1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <template>
| <div>
| <Chart :cdata="cdata" />
| </div>
| </template>
|
| <script>
| import Chart from './chart.vue'
| export default {
| data () {
| return {
| drawTiming: null,
| cdata: {
| year: null,
| weekCategory: [],
| radarData: [],
| radarDataAvg: [],
| maxData: 470,
| // maxData: 120,
| weekMaxData: [],
| weekLineData: [244,125,98,122,211,465,124,244,120,244,122,98,156],
| }
| }
| },
| components: {
| Chart,
| },
| mounted () {
| this.tops();
| this.changeTiming();
| },
| beforeDestroy () {
| },
| methods: {
| tops(){
| this.$http.get('http://192.168.0.249:8083/passingStationCollection/bottomRightChart')
| .then((response)=>{
| this.cdata.weekLineData = response.data.data.weekLineData;
| this.cdata.maxData = response.data.data.maxData;
| console.log(this.cdata.weekLineData)
| })
| },
| changeTiming() {
| setInterval(() => {
| this.cdata.rateData = [];
| this.tops();
| }, 60000)
| },
| setData () {
| // 清空轮询数据
| this.cdata.weekCategory = [];
| this.cdata.weekMaxData = []; //折线图
| this.cdata.weekLineData = []; //折线图
| this.cdata.radarData = [];
| this.cdata.radarDataAvg = [];
|
| let dateBase = new Date();
| this.cdata.year = dateBase.getFullYear();
| // 周数据
| for (let i = 0; i < 7; i++) {
| // 日期
| let date = new Date();
| this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
|
| // 折线图数据
| this.cdata.weekMaxData.push(this.cdata.maxData);
| let distance = Math.round(Math.random() * 11000 + 500);
| this.cdata.weekLineData.push(distance);
| let radarDayData = [500, 22.222, 54.45, 81.1];
| this.cdata.radarData.unshift(radarDayData);
| this.cdata.radarDataAvg.unshift([4000, 8.832, 8.83, 0.51, 0.5])
| }
|
| }
| }
| };
| </script>
|
| <style lang="scss" scoped>
| </style>
|
|
