update mock data

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

@@ -66,13 +66,13 @@
           </el-form>
           <el-row :gutter="20">
             <el-col
-              v-for="(chart, index) in chartList"
-              :key="100 + index"
+              v-for="(chart) in chartList"
+              :key="chart.id"
               :span="12"
               style="height: 400px"
             >
               <g2-line
-                :id="'line-' + index"
+                :id="'line-' + chart.propertyCode"
                 :title="chart.propertyName"
                 :line-data="setChartData(chart.propertyCode)"
                 :description="chart.propertyUnit"
@@ -118,7 +118,79 @@ 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() {
@@ -143,6 +215,8 @@ export default {
         refresh: 1
       }
       this.getDetail(parseInt(this.activeModel))
+      this.chartList = []
+      clearInterval(this.timer)
     },
     getDetail(id) {
       Promise.all([getModelInstanceList({ id }), getModelDetail({ id })])
@@ -168,13 +242,17 @@ export default {
       const form = `form${this.activeModel}`
       this.$refs[form][0].validate()
         .then(_ => {
-          this.chartList = this.chartField.yFields.map(v => {
-            const prop = this.propertyList.find(item => item.id === v)
-            return {
-              ...prop
-            }
-          })
           this.chartData = []
+          this.chartList = []
+          this.mockData()
+            .then(_ => {
+              const arr = []
+              this.propertyList.forEach(v => {
+                const index = this.chartField.yFields.findIndex(item => item === v.id)
+                index !== -1 && arr.push({ ...v })
+              })
+              this.chartList = [...arr]
+            })
           this.timer && clearInterval(this.timer)
           this.timer = setInterval(async() => {
             await this.mockData()
@@ -185,14 +263,25 @@ export default {
     },
     mockData() {
       return new Promise(resolve => {
-        // this.chartData.pop()
-        this.chartData.push({
-          time: new Date().getTime(),
+        this.fakeData.shift()
+        this.fakeData.push({
+          time: null,
           value: {
-            inpressure: this.random(100, 120),
+            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()
       })
     }