修改数据查询实时曲线统计图，添加鼠标监听事件，并实现相应数据的展示

industry-admin/src/views/source/dataQuery/index.vue

@@ -40,7 +40,9 @@
         <!-- 数据项表格 -->
         <ItemTable ref="itemTable" @receiveCheckedData="receiveCheckedData"></ItemTable>
         <!-- 统计图 -->
-        <div id="lineChart" class="lineChart" />
+        <div class="lineChartContant" v-on:mouseover="mouseOver()" v-on:mouseout="mouseOut()">
+            <div id="lineChart" class="lineChart" />
+        </div>
     </div>
 </template>
 
@@ -61,6 +63,9 @@ export default {
     data() {
         return {
             timer: null,
+            //如果state为true，则是动态统计图。反之
+            state: null,
+            count: 0,
             itemGroupList: [],
             chartForm: {
                 itemGroupId: null,
@@ -95,13 +100,15 @@ export default {
                         backgroundColor: '#777'
                     },
                 },
-                formatter: function (params, ticket, callback) {
-                    let b = ''
-                    for (let a of params) {
-                        b += '<div>' + a.seriesName + ': ' + a.data + ' 单位:' + a.unit + '</div>'
-                    }
-                    return b;
-                }
+                // formatter: function (params, ticket, callback) {
+                //     let b = '<div style="display:inline;">'
+                //     for (let a of params) {
+                //         b += '<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + a.color + ';"></span><span>'
+                //             + a.seriesName + ': ' + a.data + '</span></div>'
+                //     }
+                //     b += '</div>'
+                //     return b;
+                // }
             },
             //列标题
             legend: {
@@ -208,6 +215,7 @@ export default {
         },
         /** 查询数据 */
         queryData() {
+            //每次查询的时候，将统计图初清空，定时器清空
             clearInterval(this.timer)
             this.timer = null
             this.chart = null
@@ -230,20 +238,17 @@ export default {
                 if (this.chartForm.endTime) {
                     this.chooseStartTime = this.chartForm.startTime
                     this.chooseEndTime = this.chartForm.endTime
+                    this.state = false
                     this.initChart()
                 } else {
                     //如果只有开始时间，则展示固定长度时间线的数据
                     let currentTime = new Date().getTime()
-                    let count = currentTime - new Date(this.chartForm.startTime).getTime()
+                    this.count = currentTime - new Date(this.chartForm.startTime).getTime()
                     this.chooseStartTime = this.chartForm.startTime
                     this.chooseEndTime = parseTime(currentTime)
+                    this.state = true
                     this.initChart()
-                    this.timer = setInterval(() => {
-                        let currentTime1 = new Date().getTime()
-                        this.chooseStartTime = parseTime(new Date(currentTime1 - count))
-                        this.chooseEndTime = parseTime(currentTime1)
-                        this.updateChartData(true)
-                    }, 1000)
+                    this.startTimer()
                 }
             } else {
                 if (this.chartForm.endTime) {
@@ -254,27 +259,29 @@ export default {
                     return
                 } else {
                     //如果开始时间和结束时间都没有，则从当前时刻开始，往前推一分钟
+                    this.count = 60 * 60 * 1000
                     let currentTime = new Date().getTime()
                     this.chooseEndTime = parseTime(currentTime)
-                    this.chooseStartTime = parseTime(new Date(currentTime - 60 * 60 * 1000))
+                    this.chooseStartTime = parseTime(new Date(currentTime - this.count))
+                    this.state = true
                     this.initChart()
-                    this.timer = setInterval(() => {
-                        this.chooseStartTime = this.chooseEndTime
-                        this.chooseEndTime = parseTime(new Date())
-                        this.updateChartData(false)
-                    }, 1000)
+                    this.startTimer()
                 }
             }
         },
         /** 重置 */
         resetQuery() {
             this.$refs['chartForm'].resetFields();
+            this.state = false
             clearInterval(this.timer)
             this.timer = null
             this.chart = null
         },
         /** 通过数据项id，开始结束时间获取相应的数据 */
         getItemListValue(callback) {
+            if (this.chooseStartTime == this.chooseEndTime) {
+                return
+            }
             let param = {
                 itemGroupId: this.chartForm.itemGroupId,
                 idList: this.chartForm.idList,
@@ -286,7 +293,7 @@ export default {
                 callback(res);
             })
         },
-        /** 初始化统计图 */
+        /** 初始化统计图，如果state为true，则是动态，否则是静态 */
         initChart() {
             this.getItemListValue((res) => {
                 let data = res.data
@@ -296,8 +303,8 @@ export default {
                 for (let a of data) {
                     legendData.push(a.describe ? a.describe : a.itemReadName)
                     let b = {
-                        name: a.describe ? a.describe : a.itemReadName,
-                        unit: a.unit,
+                        name: a.unit ? ((a.describe ? a.describe : a.itemReadName) + '(' + a.unit + ')') :
+                            (a.describe ? a.describe : a.itemReadName),
                         type: 'line',
                         smooth: true,
                         symbol: 'circle',
@@ -328,41 +335,54 @@ export default {
                 })
             })
         },
+        /** 鼠标移入事件 */
+        mouseOver() {
+            if (this.state) {
+                this.stopTimer()
+            }
+        },
+        /** 鼠标移出事件 */
+        mouseOut() {
+            if (this.state) {
+                this.startTimer()
+            }
+        },
+        /** 清除定时器 */
+        stopTimer() {
+            clearInterval(this.timer)
+            this.timer = null
+        },
+        /** 设置定时器，继续轮训数据 */
+        startTimer() {
+            this.timer = setInterval(() => {
+                this.chooseStartTime = this.chooseEndTime
+                this.chooseEndTime = parseTime(new Date())
+                this.updateChartData()
+            }, 1000)
+        },
         /** 更新统计图数据 */
-        updateChartData(isAllFlash) {
+        updateChartData() {
             this.getItemListValue((res) => {
                 let data = res.data
-                let seriesData = []
                 if (data && data[0].dataTimeList) {
-                    //数据是否全部刷新
-                    if (isAllFlash) {
-                        this.xAxis.data = data[0].dataTimeList
-                        for (let i in data.length) {
-                            let a = data[i]
-                            this.series[i].data = a.dataValueList
-                        }
-                    } else {
-                        //数据不全部刷新
-                        let arrX = this.xAxis.data
-                        arrX = arrX.concat(data[0].dataTimeList)
-                        //删除掉多余时间
-                        let count = new Date(arrX[arrX.length - 1]).getTime() - 60 * 60 * 1000
-                        let num = 0
-                        for (let i in arrX) {
-                            if (new Date(arrX[i]).getTime() >= count) {
-                                num = i
-                                break
-                            }
-                        }
-                        this.xAxis.data = arrX.splice(num)
-                        //删除多余数据
-                        for (let i in data.length) {
-                            let a = data[i]
-                            let arr = this.series[i].data
-                            arr = arr.concat(a.dataValueList)
-                            this.series[i].data = arr.splice(num)
+                    let arrX = this.xAxis.data
+                    arrX = arrX.concat(data[0].dataTimeList)
+                    //删除掉多余时间
+                    let count = new Date(arrX[arrX.length - 1]).getTime() - this.count
+                    let num = 0
+                    for (let i in arrX) {
+                        if (new Date(arrX[i]).getTime() >= count) {
+                            num = i
+                            break
                         }
-
+                    }
+                    this.xAxis.data = arrX.splice(num)
+                    //删除多余数据
+                    for (let i in data) {
+                        let a = data[i]
+                        let arr = this.series[i].data
+                        arr = arr.concat(a.dataValueList)
+                        this.series[i].data = arr.splice(num)
                     }
                     //更新统计图
                     this.chart.setOption({ xAxis: this.xAxis, series: this.series });
@@ -371,7 +391,7 @@ export default {
         },
         /** 导出统计图数据 */
         exportData() {
-
+            console.log("---导出统计图-----")
         }
     },
     destroyed: function () {
@@ -383,10 +403,13 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.lineChart {
-    // width: 100%;
-    // height: 100%;
+.lineChartContant {
     width: 180vh;
     height: 80vh;
+
+    .lineChart {
+        width: 100%;
+        height: 100%;
+    }
 }
 </style>