update 仪表盘

src/api/data-visible/dashboard.js

@@ -36,3 +36,12 @@ export function getModelInstanceChart(data) {
     data
   })
 }
+
+// 根据设备类型ID获取所有设备实例
+export function getAllInstanceByDeviceTypeId(data) {
+  return request({
+    url: `${baseURL}/iot/deviceModel/instance/getInstanceByDeviceTypeId`,
+    method: 'post',
+    data
+  })
+}

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

@@ -4,9 +4,13 @@
       <el-col :xs="8" :sm="8" :md="6" :lg="4">
         <div class="left">
           <div class="search">
-            <el-select v-model="eModel" style="width: 100%">
+            <el-select
+              v-model="deviceType"
+              style="width: 100%"
+              @change="onDeviceTypeChange"
+            >
               <el-option
-                v-for="item in eModelList"
+                v-for="item in deviceTypeList"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
@@ -17,42 +21,38 @@
           <div class="custom-menu">
             <el-menu
               ref="customMenu"
-              default-active="1"
+              :default-active="defaultActive"
+              @select="onInstanceSelect"
             >
               <el-menu-item
-                v-for="(model, index) in eInstanceList"
-                :key="'model' + index"
-                :index="model.id.toString()"
-              >{{ model.name }}</el-menu-item>
+                v-for="(instance, index) in deviceInstanceList"
+                :id="'instance' + instance.id"
+                :key="'instance' + index"
+                :index="instance.id.toString()"
+                :class="'instance' + instance.id"
+              >{{ instance.name }}</el-menu-item>
             </el-menu>
           </div>
         </div>
       </el-col>
       <el-col :xs="16" :sm="16" :md="18" :lg="20">
         <el-form
-          :ref="'form'+activeModel"
+          ref="form"
           :model="chartField"
           inline
           label-width="100px"
           style="margin-top: 20px"
-          :rules="rules"
         >
-          <div>
-            <el-form-item label="选择实例：" prop="instanceId">
-              <el-radio-group v-model="chartField.instanceId">
-                <el-radio
-                  v-for="(ins, index) in instanceList"
-                  :key="300 + index"
-                  :label="ins.id"
-                >{{ ins.instanceName }}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </div>
-          <div>
-            <el-form-item label="Y轴:" prop="yFields">
-              <el-checkbox-group v-model="chartField.yFields">
+          <div v-if="dataModelList.length">
+            <el-form-item
+              v-for="(dataModel, index) in dataModelList"
+              :key="index + 300"
+              :label='dataModel.name + ":"'
+              prop="yFields"
+            >
+              <el-checkbox-group v-model="chartField.yFields[index]">
                 <el-checkbox
-                  v-for="(prop, i) in propertyList"
+                  v-for="(prop, i) in dataModel.propertyList"
                   :key="200+i"
                   :label="prop.propertyCode"
                 >{{ prop.propertyName }}</el-checkbox>
@@ -81,9 +81,13 @@
             </el-form-item>
           </div>
         </el-form>
-        <el-row :gutter="20">
+        <el-row
+          v-for="(chartGroup, index) in chartList"
+          :key="index + 1000"
+          :gutter="20"
+        >
           <el-col
-            v-for="(chart) in chartList"
+            v-for="(chart) in chartGroup"
             :key="chart.id"
             :span="12"
             style="height: 400px"
@@ -91,7 +95,7 @@
             <e-line
               :id="'line-' + chart.propertyCode"
               :title="chart.propertyName"
-              :line-data="setChartData(chart.propertyCode)"
+              :line-data="setChartData(chart.propertyCode, index)"
               :description="chart.propertyUnit"
             ></e-line>
           </el-col>
@@ -103,7 +107,10 @@
 
 <script>
 import ELine from '@/components/Charts/ELine'
-import { getAllModel, getModelDetail, getModelInstanceList, getModelInstanceChart } from '@/api/data-visible/dashboard'
+import { getModelInstanceChart } from '@/api/data-visible/dashboard'
+import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'
+import { getAllInstanceByDeviceTypeId } from '@/api/data-visible/dashboard'
+import { getDataModelByDeviceTypeId } from '@/api/equipment-management/equipment-model'
 
 export default {
   name: 'Dashboard',
@@ -113,46 +120,21 @@ export default {
   data() {
     return {
       chartField: {
-        instanceId: null,
         yFields: [],
         refresh: 1
       },
-      activeModel: null,
+      dataModelList: [],
+      deviceInstance: null,
       modelList: [],
       objectId: '1',
+      defaultActive: null,
       timer: 0,
       count: 0,
       instanceList: [],
       propertyList: [],
-      eModel: 1,
-      eModelList: [
-        {
-          value: 1,
-          label: '设备模型一'
-        },
-        {
-          value: 2,
-          label: '设备模型二'
-        }
-      ],
-      eInstanceList: [
-        {
-          id: 1,
-          name: '设备实例一'
-        },
-        {
-          id: 2,
-          name: '设备实例二'
-        },
-        {
-          id: 3,
-          name: '设备实例三'
-        },
-        {
-          id: 4,
-          name: '设备实例四'
-        }
-      ],
+      deviceType: null,
+      deviceTypeList: [],
+      deviceInstanceList: [],
       chartData: [],
       chartList: [],
       rules: {
@@ -166,44 +148,81 @@ export default {
     }
   },
   created() {
-    getAllModel()
+    // 初始化设备类型
+    getAllDeviceModel()
       .then(res => {
-        this.modelList = res.data
-        if (this.modelList.length > 0) {
-          this.activeModel = this.modelList[0].id.toString()
-          this.getDetail(parseInt(this.activeModel))
+        this.deviceTypeList = res.data.map(v => {
+          return {
+            value: v.id,
+            label: v.name
           }
         })
-      .catch(err => console.error(err))
+        if (this.deviceTypeList.length) {
+          this.deviceType = this.deviceTypeList[0].value
+          // 获取该设备类型下的设备实例
+          this.getAllInstanceByDeviceTypeId(this.deviceType)
+          // 根据设备类型 ID 获取关联数据模型
+          this.getDataModelByDeviceTypeId(this.deviceType)
+        }
+      })
+      .catch(_ => {})
   },
   beforeDestroy() {
     clearInterval(this.timer)
   },
   methods: {
-    onTabClick() {
+    onDeviceTypeChange(val) {
+      this.dataModelList = []
       this.chartField = {
-        instanceId: null,
         yFields: [],
         refresh: 1
       }
-      this.getDetail(parseInt(this.activeModel))
       this.chartList = []
+      this.chartData = []
       clearInterval(this.timer)
+      this.getDataModelByDeviceTypeId(val)
+      this.getAllInstanceByDeviceTypeId(val)
+    },
+    onInstanceSelect(index) {
+      const id = parseInt(index)
+      const instance = this.deviceInstanceList.find(v => v.id === id)
+      this.deviceInstance = instance.id
+    },
+    getDataModelByDeviceTypeId(id) {
+      getDataModelByDeviceTypeId({ id })
+        .then(res => {
+          this.dataModelList = res.data
+          this.chartField.yFields = []
+          this.dataModelList.forEach(v => {
+            this.chartField.yFields.push([])
+          })
+        })
+        .catch(_ => {})
     },
-    getDetail(id) {
-      Promise.all([getModelInstanceList({ id }), getModelDetail({ id })])
+    getAllInstanceByDeviceTypeId(val) {
+      getAllInstanceByDeviceTypeId({ deviceTypeId: val })
         .then(res => {
-          const [res1, res2] = res
-          this.instanceList = res1.data
-          this.propertyList = res2.data.propertyList
+          this.deviceInstanceList = res.data
+          this.$nextTick()
+            .then(_ => {
+              if (this.deviceInstanceList.length) {
+                this.defaultActive = this.deviceInstanceList[0].id.toString()
+                this.deviceInstance = this.deviceInstanceList[0].id
+                this.$nextTick()
+                  .then(_ => {
+                    document.getElementById(`instance${this.deviceInstanceList[0].id}`).click()
                   })
-        .catch(err => console.error(err))
+                  .catch(_ => {})
+              }
+            })
+        })
+        .catch(_ => {})
     },
     random(m, n) {
       return Math.round(Math.random() * (m - n) + n)
     },
-    setChartData(yField) {
-      return this.chartData.map(v => {
+    setChartData(yField, index) {
+      return this.chartData[index].map(v => {
         return {
           time: v.time,
           value: parseInt(v[yField])
@@ -211,41 +230,60 @@ export default {
       })
     },
     createCharts() {
-      const form = `form${this.activeModel}`
-      this.$refs[form].validate()
-        .then(_ => {
+      // eslint-disable-next-line no-unused-vars
+      let count = 0
+      this.chartField.yFields.forEach(v => {
+        if (v.length) {
+          count += v.length
+        }
+      })
+      if (count > 0) {
+        const params = this.dataModelList.map((v, i) => {
+          return {
+            modelId: v.id,
+            deviceId: this.deviceInstance,
+            propertyCodeList: [...this.chartField.yFields[i]]
+          }
+        })
         this.chartData = []
         this.chartList = []
-          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) => {
+            this.chartData = res.data.map(v => {
+              const data = v.dataList.sort((a, b) => {
                 return (a > b) ? 1 : -1
               })
+              return [...data]
+            })
+            this.dataModelList.forEach((dataModel, i) => {
               const arr = []
-              this.propertyList.forEach(v => {
-                const index = this.chartField.yFields.findIndex(item => item === v.propertyCode)
+              dataModel.propertyList.forEach(v => {
+                const index = this.chartField.yFields[i].findIndex(item => item === v.propertyCode)
                 index !== -1 && arr.push({ ...v })
               })
-              this.chartList = [...arr]
+              this.chartList.push(arr)
+            })
           })
           .then(_ => {
             this.timer && clearInterval(this.timer)
             this.timer = setInterval(async() => {
               const chartData = await getModelInstanceChart(params)
-                this.chartData = chartData.data.sort((a, b) => {
+              // this.chartData = chartData.data.sort((a, b) => {
+              //   return (a > b) ? 1 : -1
+              // })
+              this.chartData = chartData.data.map(v => {
+                const data = v.dataList.sort((a, b) => {
                   return (a > b) ? 1 : -1
                 })
+                return [...data]
+              })
               this.count++
             }, this.chartField.refresh * 1000)
           })
           .catch(_ => {})
-        })
-        .catch(err => console.error(err))
+      } else {
+        this.$message.warning('请至少选择 1 个属性')
+      }
     }
   }
 }