|
@@ -1,7 +1,9 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div ref="testLine" style="width: 600px; height: 230px"></div>
|
|
|
- <timeselect @getMsg="chooseDate" style="margin-left: 480px;color: gray;margin-top: -228px;width:100px;"></timeselect> <!--算法框-->
|
|
|
+<!-- <div ref="testLine" style="width: 600px; height: 230px"></div>-->
|
|
|
+ <div ref="testLine" style="width: 100%; height: 230px"></div>
|
|
|
+<!-- <timeselect @getMsg="chooseDate" style="margin-left: 480px;color: gray;margin-top: -228px;width:100px;"></timeselect> <!–算法框–>-->
|
|
|
+ <timeselect @getMsg="chooseDate" style="margin-left: 80%;color: gray;margin-top: -228px;width:20%;"></timeselect> <!--算法框-->
|
|
|
|
|
|
<!-- 230-->
|
|
|
</div>
|
|
@@ -25,6 +27,10 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ interval0: null,
|
|
|
+ interval1: null,
|
|
|
+ interval2: null,
|
|
|
+ interval3: null,
|
|
|
chooseDatetime: "0",
|
|
|
currentChartId: 1,
|
|
|
count: 0,
|
|
@@ -106,7 +112,8 @@ export default {
|
|
|
axisLabel: {
|
|
|
color: "#fff",
|
|
|
fontSize: 11,
|
|
|
- // rotate: 30,
|
|
|
+ rotate: 30,
|
|
|
+ padding: [0,-20,0,0],
|
|
|
},
|
|
|
axisTick: { show: false },
|
|
|
boundaryGap: false,
|
|
@@ -117,7 +124,7 @@ export default {
|
|
|
text: this.title,
|
|
|
// left: 100,
|
|
|
// top: 10,
|
|
|
- padding: [15, 162],
|
|
|
+ padding: [15, 142],
|
|
|
// x:'center',
|
|
|
// y:'top',
|
|
|
// textAlign:'center',
|
|
@@ -125,7 +132,7 @@ export default {
|
|
|
textStyle: {
|
|
|
fontWeight: "normal", //标题颜色
|
|
|
color: "#4ADEFE",
|
|
|
- fontSize: 22,
|
|
|
+ fontSize: 19, //22
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
@@ -213,19 +220,22 @@ export default {
|
|
|
this.chooseDatetime = value;
|
|
|
this.count = 0;
|
|
|
switch (value) {
|
|
|
- case "0":
|
|
|
+ case "0": //半小时
|
|
|
+ clearInterval(this.interval1);
|
|
|
+ clearInterval(this.interval2);
|
|
|
+ clearInterval(this.interval3);
|
|
|
var first = 1;
|
|
|
if(first){
|
|
|
- var xData=[];
|
|
|
- var data1 = [];
|
|
|
+ var xData=[]; //横坐标
|
|
|
+ var data1 = []; //纵坐标
|
|
|
let now =new Date();
|
|
|
- let time = now.getTime() //分钟
|
|
|
- for (let i = 0; i < 5; i++) {
|
|
|
+ let time = now.getTime() //获取当前时间
|
|
|
+ for (let i = 0; i < 31; i++) {
|
|
|
let now1 = now.setTime(time);
|
|
|
now1 = new Date(now1)
|
|
|
xData.unshift(now1.toLocaleTimeString().replace(/^\D*/, ''))
|
|
|
data1.push(this.getRandomNumWithDecimals(0.8, 1.0));
|
|
|
- time = time-1000*60*30; //间隔30分钟
|
|
|
+ time = time-1000*60; //间隔1分钟
|
|
|
}
|
|
|
first = 0;
|
|
|
}
|
|
@@ -240,7 +250,7 @@ export default {
|
|
|
],
|
|
|
});
|
|
|
|
|
|
- let interval = setInterval(() => {
|
|
|
+ this.interval0 = setInterval(() => {
|
|
|
xData.shift();
|
|
|
xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
|
|
|
data1.shift();
|
|
@@ -255,21 +265,24 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
- }, 1000*60*30);
|
|
|
+ }, 1000*60);
|
|
|
break;
|
|
|
- case "1":
|
|
|
+ case "1": //1小时
|
|
|
+ clearInterval(this.interval0);
|
|
|
+ clearInterval(this.interval2);
|
|
|
+ clearInterval(this.interval3);
|
|
|
var first = 1;
|
|
|
if(first){
|
|
|
var xData=[];
|
|
|
var data1 = [];
|
|
|
let now =new Date();
|
|
|
let time = now.getTime() //分钟
|
|
|
- for (let i = 0; i < 5; i++) {
|
|
|
+ for (let i = 0; i < 31; i++) {
|
|
|
let now1 = now.setTime(time);
|
|
|
now1 = new Date(now1)
|
|
|
xData.unshift(now1.toLocaleTimeString().replace(/^\D*/, ''))
|
|
|
data1.push(this.getRandomNumWithDecimals(0.8, 1.0));
|
|
|
- time = time-1000*60*60; //间隔60分钟
|
|
|
+ time = time-1000*60*2; //间隔2分钟
|
|
|
}
|
|
|
first = 0;
|
|
|
}
|
|
@@ -284,7 +297,7 @@ export default {
|
|
|
],
|
|
|
});
|
|
|
|
|
|
- interval = setInterval(() => {
|
|
|
+ this.interval1 = setInterval(() => {
|
|
|
xData.shift();
|
|
|
xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
|
|
|
data1.shift();
|
|
@@ -299,22 +312,25 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
- }, 1000*60*60);
|
|
|
+ }, 1000*60*2);
|
|
|
break;
|
|
|
case "2":
|
|
|
+ clearInterval(this.interval0);
|
|
|
+ clearInterval(this.interval1);
|
|
|
+ clearInterval(this.interval3);
|
|
|
var first = 1;
|
|
|
if(first){
|
|
|
var xData=[];
|
|
|
var data1 = [];
|
|
|
let now =new Date();
|
|
|
let time = now.getTime() //分钟
|
|
|
- for (let i = 0; i < 5; i++) {
|
|
|
+ for (let i = 0; i < 25; i++) {
|
|
|
let now1 = now.setTime(time);
|
|
|
now1 = new Date(now1)
|
|
|
let x = this.convertToDate(now1)
|
|
|
xData.unshift(x)
|
|
|
data1.push(this.getRandomNumWithDecimals(0.8, 1.0));
|
|
|
- time = time-1000*60*60*24; //
|
|
|
+ time = time-1000*60*60; //间隔1小时
|
|
|
}
|
|
|
first = 0;
|
|
|
}
|
|
@@ -329,7 +345,7 @@ export default {
|
|
|
],
|
|
|
});
|
|
|
|
|
|
- interval = setInterval(() => {
|
|
|
+ this.interval2 = setInterval(() => {
|
|
|
xData.shift();
|
|
|
let now =new Date();
|
|
|
xData.push(this.convertToDate(now))
|
|
@@ -345,22 +361,25 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
- }, 1000*60*60*24);
|
|
|
+ }, 1000*60*60);
|
|
|
break;
|
|
|
case "3":
|
|
|
+ clearInterval(this.interval0);
|
|
|
+ clearInterval(this.interval1);
|
|
|
+ clearInterval(this.interval2);
|
|
|
var first = 1;
|
|
|
if(first){
|
|
|
var xData=[];
|
|
|
var data1 = [];
|
|
|
let now =new Date();
|
|
|
let time = now.getTime() //分钟
|
|
|
- for (let i = 0; i < 5; i++) {
|
|
|
+ for (let i = 0; i < 22; i++) {
|
|
|
let now1 = now.setTime(time);
|
|
|
now1 = new Date(now1)
|
|
|
let x = this.convertToDate(now1)
|
|
|
xData.unshift(x)
|
|
|
data1.push(this.getRandomNumWithDecimals(0.8, 1.0));
|
|
|
- time = time-1000*60*60*24*7; //
|
|
|
+ time = time-1000*60*60*8; //间隔8小时
|
|
|
}
|
|
|
first = 0;
|
|
|
}
|
|
@@ -375,7 +394,7 @@ export default {
|
|
|
],
|
|
|
});
|
|
|
|
|
|
- interval = setInterval(() => {
|
|
|
+ this.interval3 = setInterval(() => {
|
|
|
xData.shift();
|
|
|
let now =new Date();
|
|
|
xData.push(this.convertToDate(now))
|
|
@@ -391,7 +410,7 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
- }, 1000*60*60*24*7);
|
|
|
+ }, 1000*60*60*8);
|
|
|
break;
|
|
|
}
|
|
|
},
|