Merge remote-tracking branch 'origin/master'

src/components/G2Plot/G2Line.vue

@@ -20,6 +20,10 @@ export default {
     title: {
       type: String,
       default: 'line'
+    },
+    description: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -40,16 +44,34 @@ export default {
         visible: true,
         text: this.title
       },
-      description: {
-        visible: true,
-        text: '用平滑的曲线代替折线'
-      },
       xField: 'time',
       yField: 'value',
       xAxis: {
         type: 'time',
         mask: 'HH:mm:ss'
+      },
+      tooltip: {
+        visible: true,
+        shared: true,
+        showCrosshairs: true,
+        crosshairs: {
+          type: 'y'
+        },
+        offset: 20
+      },
+      description: {
+        visible: true,
+        text: `单位为: ${this.description}`
+      },
+      guideLine: [
+        {
+          type: 'mean',
+          lineStyle: {},
+          text: {
+            content: '中位数'
+          }
         }
+      ]
     })
     this.line.render()
   }

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

@@ -13,13 +13,15 @@
       >
         <div v-if="activeModel === model.id.toString()">
           <el-form
+            :ref="'form'+activeModel"
             :model="chartField"
             inline
             label-width="100px"
             style="margin-top: 20px"
+            :rules="rules"
           >
             <div>
-              <el-form-item label="选择实例：">
+              <el-form-item label="选择实例：" prop="instanceId">
                 <el-radio-group v-model="chartField.instanceId">
                   <el-radio
                     v-for="(ins, index) in instanceList"
@@ -30,7 +32,7 @@
               </el-form-item>
             </div>
             <div>
-              <el-form-item label="Y轴:">
+              <el-form-item label="Y轴:" prop="yFields">
                 <el-checkbox-group v-model="chartField.yFields">
                   <el-checkbox
                     v-for="(prop, i) in propertyList"
@@ -64,15 +66,16 @@
           </el-form>
           <el-row :gutter="20">
             <el-col
-              v-for="(chart, index) in charts"
+              v-for="(chart, index) in chartList"
               :key="100 + index"
               :span="12"
               style="height: 400px"
             >
               <g2-line
                 :id="'line-' + index"
-                :title="chart"
-                :line-data="setChartData(chart)"
+                :title="chart.propertyName"
+                :line-data="setChartData(chart.propertyCode)"
+                :description="chart.propertyUnit"
                 style="min-width: 500px;height: 400px"
               />
             </el-col>
@@ -102,13 +105,20 @@ export default {
       activeModel: null,
       modelList: [],
       objectId: '1',
-      lineData: [],
-      chartData: [],
       timer: 0,
       count: 0,
       instanceList: [],
       propertyList: [],
-      charts: []
+      chartData: [],
+      chartList: [],
+      rules: {
+        instanceId: [
+          { required: true, message: '请选择实例', trigger: 'change' }
+        ],
+        yFields: [
+          { type: 'array', required: true, message: '请至少选择一个属性', trigger: 'change' }
+        ]
+      }
     }
   },
   created() {
@@ -122,24 +132,16 @@ export default {
       })
       .catch(err => console.error(err))
   },
-  mounted() {
-    // this.timer = setInterval(() => {
-    //   this.chartData.push({
-    //     time: new Date().getTime(),
-    //     value: {
-    //       power: this.random(100, 120),
-    //       temperature: this.random(20, 30),
-    //       humidity: this.random(200, 300)
-    //     }
-    //   })
-    //   this.count++
-    // }, this.chartField.refresh * 1000)
-  },
   beforeDestroy() {
     clearInterval(this.timer)
   },
   methods: {
     onTabClick() {
+      this.chartField = {
+        instanceId: null,
+        yFields: [],
+        refresh: 1
+      }
       this.getDetail(parseInt(this.activeModel))
     },
     getDetail(id) {
@@ -162,7 +164,38 @@ export default {
         }
       })
     },
-    createCharts() {}
+    createCharts() {
+      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.timer && clearInterval(this.timer)
+          this.timer = setInterval(async() => {
+            await this.mockData()
+            this.count++
+          }, this.chartField.refresh * 1000)
+        })
+        .catch(err => console.error(err))
+    },
+    mockData() {
+      return new Promise(resolve => {
+        // this.chartData.pop()
+        this.chartData.push({
+          time: new Date().getTime(),
+          value: {
+            inpressure: this.random(100, 120),
+            outpressure: this.random(20, 30)
+          }
+        })
+        resolve()
+      })
+    }
   }
 }
 </script>