update 改用echarts

src/api/object-visible/dashboard.js

@@ -28,3 +28,11 @@ export function getModelInstanceList(data) {
     data
   })
 }
+// 获取图表数据
+export function getModelInstanceChart(data) {
+  return request({
+    url: `${baseURL}iot/dashboard/modelData`,
+    method: 'post',
+    data
+  })
+}

src/components/Charts/ELine.vue

+<template>
+  <div :id="id" :class="className" :style="{height:height,minWidth:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import moment from 'moment'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    title: {
+      type: String,
+      default: 'line'
+    },
+    width: {
+      type: String,
+      default: '500px'
+    },
+    height: {
+      type: String,
+      default: '400px'
+    },
+    lineData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    description: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    lineData: function(val) {
+      this.updateChart(val)
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    updateChart(data) {
+      const xAxis = []
+      const series = []
+      data.forEach(v => {
+        xAxis.push(moment(v.time).format('HH:mm:ss'))
+        series.push(v.value)
+      })
+      this.chart.setOption({
+        xAxis: {
+          data: xAxis
+        },
+        series: [{
+          name: this.title,
+          data: series
+        }]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        title: {
+          text: `${this.title}监控图表`,
+          subtext: `单位为: ${this.description}`
+        },
+        tooltip: {},
+        legend: {
+          data: [this.title]
+        },
+        xAxis: {
+          data: []
+        },
+        yAxis: {},
+        series: [{
+          name: this.title,
+          type: 'line',
+          data: []
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/object-visible/dashboard/index.vue

@@ -37,7 +37,7 @@
                   <el-checkbox
                     v-for="(prop, i) in propertyList"
                     :key="200+i"
-                    :label="prop.id"
+                    :label="prop.propertyCode"
                   >{{ prop.propertyName }}</el-checkbox>
                 </el-checkbox-group>
               </el-form-item>
@@ -71,13 +71,12 @@
               :span="12"
               style="height: 400px"
             >
-              <g2-line
+              <e-line
                 :id="'line-' + chart.propertyCode"
                 :title="chart.propertyName"
                 :line-data="setChartData(chart.propertyCode)"
                 :description="chart.propertyUnit"
-                style="min-width: 500px;height: 400px"
-              />
+              ></e-line>
             </el-col>
           </el-row>
         </div>
@@ -87,13 +86,13 @@
 </template>
 
 <script>
-import G2Line from '@/components/G2Plot/G2Line'
-import { getAllModel, getModelDetail, getModelInstanceList } from '@/api/object-visible/dashboard'
+import ELine from '@/components/Charts/ELine'
+import { getAllModel, getModelDetail, getModelInstanceList, getModelInstanceChart } from '@/api/object-visible/dashboard'
 
 export default {
   name: 'Dashboard',
   components: {
-    G2Line
+    ELine
   },
   data() {
     return {
@@ -118,79 +117,7 @@ export default {
         yFields: [
           { type: 'array', required: true, message: '请至少选择一个属性', trigger: 'change' }
         ]
-      },
-      fakeData: [
-        {
-          time: null,
-          value: {
-            inpressure: 110,
-            outpressure: 21
-          }
-        },
-        {
-          time: null,
-          value: {
-            inpressure: 111,
-            outpressure: 25
-          }
-        },
-        {
-          time: null,
-          value: {
-            inpressure: 112,
-            outpressure: 24
-          }
-        },
-        {
-          time: null,
-          value: {
-            inpressure: 115,
-            outpressure: 23
-          }
-        },
-        {
-          time: null,
-          value: {
-            inpressure: 117,
-            outpressure: 22
-          }
-        },
-        {
-          time: null,
-          value: {
-            inpressure: 110,
-            outpressure: 21
-          }
-        },
-        {
-          time: null,
-          value: {
-            inpressure: 111,
-            outpressure: 25
-          }
-        },
-        {
-          time: null,
-          value: {
-            inpressure: 112,
-            outpressure: 24
-          }
-        },
-        {
-          time: null,
-          value: {
-            inpressure: 115,
-            outpressure: 23
-          }
-        },
-        {
-          time: null,
-          value: {
-            inpressure: 117,
-            outpressure: 22
-          }
-        }
-      ]
+      }
     }
   },
   created() {
@@ -234,7 +161,7 @@ export default {
       return this.chartData.map(v => {
         return {
           time: v.time,
-          value: v.value[yField]
+          value: parseInt(v[yField])
         }
       })
     },
@@ -244,46 +171,36 @@ export default {
         .then(_ => {
           this.chartData = []
           this.chartList = []
-          this.mockData()
-            .then(_ => {
+          const params = {
+            modelId: parseInt(this.activeModel),
+            instanceId: this.chartField.instanceId,
+            propertyCodeList: [...this.chartField.yFields]
+          }
+          getModelInstanceChart(params)
+            .then(res => {
+              this.chartData = res.data.sort((a, b) => {
+                return (a > b) ? 1 : -1
+              })
               const arr = []
               this.propertyList.forEach(v => {
-                const index = this.chartField.yFields.findIndex(item => item === v.id)
+                const index = this.chartField.yFields.findIndex(item => item === v.propertyCode)
                 index !== -1 && arr.push({ ...v })
               })
               this.chartList = [...arr]
             })
-          this.timer && clearInterval(this.timer)
-          this.timer = setInterval(async() => {
-            await this.mockData()
-            this.count++
-          }, this.chartField.refresh * 1000)
+            .then(_ => {
+              this.timer && clearInterval(this.timer)
+              this.timer = setInterval(async() => {
+                const chartData = await getModelInstanceChart(params)
+                this.chartData = chartData.data.sort((a, b) => {
+                  return (a > b) ? 1 : -1
+                })
+                this.count++
+              }, this.chartField.refresh * 1000)
+            })
+            .catch(_ => {})
         })
         .catch(err => console.error(err))
-    },
-    mockData() {
-      return new Promise(resolve => {
-        this.fakeData.shift()
-        this.fakeData.push({
-          time: null,
-          value: {
-            inpressure: this.random(80, 120),
-            outpressure: this.random(20, 30)
-          }
-        })
-        const arr = []
-        const time = new Date().getTime()
-        for (let i = 0; i < 10; i++) {
-          arr.push({
-            time: time - (9 - i) * 1000,
-            value: {
-              ...this.fakeData[i].value
-            }
-          })
-        }
-        this.chartData = [...arr]
-        resolve()
-      })
     }
   }
 }