add 设备实例详情 数据模型详情

src/api/equipment-management/device-instance.js

@@ -37,3 +37,21 @@ export function deleteDeviceInstance(data) {
     data
   })
 }
+
+// 获取设备实例详情
+export function getDeviceInstanceDetail(data) {
+  return request({
+    url: `${baseURL}/iot/deviceModel/instance/detail`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取属性信息
+export function getPropertyDetail(data) {
+  return request({
+    url: `${baseURL}/iot/deviceModel/data/getDataByModel`,
+    method: 'post',
+    data
+  })
+}

src/views/device-management/device-detail/index.vue

@@ -40,47 +40,45 @@
       </descriptions>
     </el-card>
     <el-card class="margin-top-20">
-      <div slot="header" class="clearfix">
+      <div slot="header">
         <span>设备信息</span>
-        <el-button style="float: right; padding: 3px 0" type="text">2020-08-12 12:22:21</el-button>
       </div>
       <descriptions
         label-position="right"
         label-width="140px"
       >
-        <descriptions-item label="型号" value="AKB48" />
-        <descriptions-item label="健康状态" value="健康" />
-        <descriptions-item label="运行状态" value="运行中" />
-        <descriptions-item label="上次启动时间" value="2020-08-12 12:22:21" />
-        <descriptions-item label="运行时长" value="1d 27h 13m 21s" />
-        <descriptions-item label="描述" value="非常贵的设备" />
+        <descriptions-item label="设备名称" :value="deviceInstance.name" />
+        <descriptions-item label="运行状态" :value="$_dictionaryFormat(deviceInstance.onlineState, 'onlineState')" />
+        <descriptions-item label="设备型号" :value="deviceInstance.deviceModel" />
+        <descriptions-item label="业务ID" :value="deviceInstance.businessId" />
+        <descriptions-item label="描述" :value="deviceInstance.description" />
       </descriptions>
     </el-card>
     <el-card class="margin-top-20">
-      <el-tabs v-model="secondActiveName">
-        <el-tab-pane label="模型一" name="first">
-          <descriptions
-            label-position="right"
-            label-width="140px"
-          >
-            <descriptions-item label="温度" value="20 摄氏度" />
-            <descriptions-item label="湿度" value="70%" />
-            <descriptions-item label="压力" value="2500 帕斯卡" />
-            <descriptions-item label="转子转速" value="1250 rpm/m" />
-          </descriptions>
-        </el-tab-pane>
-        <el-tab-pane label="模型二" name="second">
+      <div slot="header">
+        <span>数据模型</span>
+      </div>
+      <el-tabs v-if="dataModelList.length" v-model="activeDataModel" @tab-click="onTabClick">
+        <el-tab-pane
+          v-for="(dataModel, index) in dataModelList"
+          :key="index"
+          :label="dataModel.name"
+          :name="dataModel.name"
+        >
           <descriptions
             label-position="right"
             label-width="140px"
           >
-            <descriptions-item label="温度" value="20 摄氏度" />
-            <descriptions-item label="湿度" value="70%" />
-            <descriptions-item label="压力" value="2500 帕斯卡" />
-            <descriptions-item label="转子转速" value="1250 rpm/m" />
+            <descriptions-item
+              v-for="(property, index) in propertyList"
+              :key="index"
+              :label="property.propertyName"
+              :value="`${property.propertyValue} ${property.propertyUnit}`"
+            />
           </descriptions>
         </el-tab-pane>
       </el-tabs>
+      <div v-else class="el-table__empty-text" style="text-align: center;margin: 0 auto">暂无数据</div>
     </el-card>
   </div>
 </template>
@@ -89,22 +87,33 @@
 import { getAllInstanceByDeviceTypeId } from '@/api/data-visible/dashboard'
 import { getDataModelByDeviceTypeId } from '@/api/equipment-management/equipment-model'
 import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'
+import { getDeviceInstanceDetail, getPropertyDetail } from '@/api/equipment-management/device-instance'
+import dictionary from '@/utils/dictionary'
 
 export default {
   name: 'DeviceMonitoring',
+  mixins: [
+    dictionary
+  ],
   data() {
     return {
       form: {
         deviceType: null,
         deviceInstance: null
       },
-      activeName: 'first',
-      secondActiveName: 'first',
+      activeDataModel: '',
       deviceTypeList: [],
       deviceInstanceList: [],
       dataModelList: [],
       propertyList: [],
-      activeProperty: null
+      activeProperty: null,
+      deviceInstance: {
+        businessId: null,
+        description: null,
+        name: null,
+        onlineState: null,
+        deviceModel: null
+      }
     }
   },
   computed: {
@@ -132,13 +141,31 @@ export default {
         this.form.deviceType = deviceTypeId || (this.deviceTypeList.length ? this.deviceTypeList[0].id : null)
         this.getAllInstanceByDeviceTypeId(this.form.deviceType, deviceInstanceId)
         this.getDataModelByDeviceTypeId(this.form.deviceType)
+        this.getDeviceInstanceDetail(this.form.deviceType)
       })
       .catch(_ => {})
   },
   methods: {
+    onTabClick() {
+      const dataModel = this.dataModelList.find(v => v.name === this.activeDataModel)
+      this.getPropertyDetail(dataModel.id, this.form.deviceInstance)
+    },
+    getDeviceInstanceDetail(id) {
+      getDeviceInstanceDetail({ id })
+        .then(res => {
+          const { businessId, description, name, onlineState, deviceModel } = res.data.deviceInstance
+          this.deviceInstance = {
+            businessId,
+            description,
+            name,
+            onlineState,
+            deviceModel
+          }
+        })
+        .catch(_ => {})
+    },
     onDeviceTypeChange(val) {
       this.getAllInstanceByDeviceTypeId(val)
-      this.getDataModelByDeviceTypeId(val)
     },
     getAllInstanceByDeviceTypeId(val, deviceInstanceId) {
       getAllInstanceByDeviceTypeId({ deviceTypeId: val })
@@ -159,15 +186,23 @@ export default {
         .then(res => {
           this.dataModelList = res.data
           if (this.dataModelList.length) {
-            this.propertyList = this.dataModelList[0].propertyList
-            if (this.propertyList.length) {
-              this.activeProperty = this.propertyList[0].propertyCode
-            }
+            this.activeDataModel = this.dataModelList[0].name
+            this.getPropertyDetail(this.dataModelList[0].id, this.form.deviceInstance)
           }
         })
         .catch(_ => {})
     },
-    queryData() {}
+    getPropertyDetail(dataModelId, deviceId) {
+      getPropertyDetail({ dataModelId, deviceId })
+        .then(res => {
+          this.propertyList = res.data.propertyList
+        })
+        .catch(_ => {})
+    },
+    queryData() {
+      this.getDataModelByDeviceTypeId(this.form.deviceType)
+      this.getDeviceInstanceDetail(this.form.deviceType)
+    }
   }
 }
 </script>

src/views/device-management/device-monitoring/index.vue

@@ -53,34 +53,29 @@
     <el-card class="margin-top-20">
       <div slot="header" class="clearfix">
         <span>设备信息</span>
-        <el-button style="float: right; padding: 3px 0" type="text">2020-08-12 12:22:21</el-button>
       </div>
       <descriptions
         label-position="right"
         label-width="140px"
       >
-        <descriptions-item label="型号" value="AKB48" />
-        <descriptions-item label="健康状态" value="健康" />
-        <descriptions-item label="运行状态" value="运行中" />
-        <descriptions-item label="上次启动时间" value="2020-08-12 12:22:21" />
-        <descriptions-item label="运行时长" value="1d 27h 13m 21s" />
-        <descriptions-item label="描述" value="非常贵的设备" />
+        <descriptions-item label="设备名称" :value="deviceInstance.name" />
+        <descriptions-item label="运行状态" :value="$_dictionaryFormat(deviceInstance.onlineState, 'onlineState')" />
+        <descriptions-item label="设备型号" :value="deviceInstance.deviceModel" />
+        <descriptions-item label="业务ID" :value="deviceInstance.businessId" />
+        <descriptions-item label="描述" :value="deviceInstance.description" />
       </descriptions>
     </el-card>
     <el-card class="margin-top-20">
       <div slot="header" class="clearfix">
         <span>模型数据</span>
-        <el-button style="float: right; padding: 3px 0" type="text">2020-08-12 12:22:21</el-button>
+        <el-button style="float: right; padding: 3px 0" type="text">{{ $moment(dataModelReportTime, 'YYYY-MM-DD HH:mm:ss') }}</el-button>
       </div>
-      <descriptions
-        label-position="right"
-        label-width="140px"
-      >
-        <descriptions-item label="温度" value="20 摄氏度" />
-        <descriptions-item label="湿度" value="70%" />
-        <descriptions-item label="压力" value="2500 帕斯卡" />
-        <descriptions-item label="转子转速" value="1250 rpm/m" />
-      </descriptions>
+      <descriptions-item
+        v-for="(property, index) in dataModelDetail"
+        :key="index"
+        :label="property.propertyName"
+        :value="`${property.propertyValue} ${property.propertyUnit}`"
+      />
     </el-card>
     <el-card class="margin-top-20">
       <div v-if="!propertyList.length" slot="header" class="clearfix">
@@ -113,12 +108,17 @@ import { getAllInstanceByDeviceTypeId } from '@/api/equipment-management/equipme
 import { getDataModelByDeviceTypeId } from '@/api/equipment-management/equipment-model'
 import { getModelInstanceChart } from '@/api/device-management/device-monitoring'
 import ELine from '@/components/Charts/ELine'
+import { getDeviceInstanceDetail, getPropertyDetail } from '@/api/equipment-management/device-instance'
+import dictionary from '@/utils/dictionary'
 
 export default {
-  name: 'DeviceDetail',
+  name: 'DeviceMonitoring',
   components: {
     ELine
   },
+  mixins: [
+    dictionary
+  ],
   data() {
     return {
       form: {
@@ -150,7 +150,16 @@ export default {
       activeProperty: null,
       deviceTypeList: [],
       tableData: [],
-      timer: 0
+      timer: 0,
+      deviceInstance: {
+        businessId: null,
+        description: null,
+        name: null,
+        onlineState: null,
+        deviceModel: null
+      },
+      dataModelDetail: [],
+      dataModelReportTime: null
     }
   },
   watch: {
@@ -195,6 +204,7 @@ export default {
       const deviceInstanceList = await getAllInstanceByDeviceTypeId({ deviceTypeId: this.form.deviceType })
       this.deviceInstanceList = deviceInstanceList.data
       this.form.deviceInstance = deviceInstanceId || (this.deviceInstanceList.length ? this.deviceInstanceList[0].id : null)
+      await this.getDeviceInstanceDetail(this.form.deviceType)
       // 根据设备类型 ID 获取关联数据模型
       const dataModelList = await getDataModelByDeviceTypeId({ id: this.form.deviceType })
       this.dataModelList = dataModelList.data
@@ -215,6 +225,7 @@ export default {
           if (this.propertyList.length) {
             this.activeProperty = this.propertyList[0].propertyCode
           }
+          this.getDeviceInstanceDetail(this.form.deviceInstance)
           return [{
             modelId: this.form.dataMode,
             deviceId: this.form.deviceInstance,
@@ -234,6 +245,7 @@ export default {
         .then(params => {
           this.timer && clearInterval(this.timer)
           this.timer = setInterval(async() => {
+            await this.getPropertyDetail(this.form.dataMode, this.form.deviceInstance)
             const chartData = await getModelInstanceChart(params)
             this.tableData = chartData.data[0].dataList
             this.property.data = [...this.getChartData(this.activeProperty)]
@@ -241,6 +253,28 @@ export default {
         })
         .catch(_ => {})
     },
+    getDeviceInstanceDetail(id) {
+      getDeviceInstanceDetail({ id })
+        .then(res => {
+          const { businessId, description, name, onlineState, deviceModel } = res.data.deviceInstance
+          this.deviceInstance = {
+            businessId,
+            description,
+            name,
+            onlineState,
+            deviceModel
+          }
+        })
+        .catch(_ => {})
+    },
+    getPropertyDetail(dataModelId, deviceId) {
+      getPropertyDetail({ dataModelId, deviceId })
+        .then(res => {
+          this.dataModelDetail = res.data.propertyList
+          this.dataModelReportTime = res.data.reportTime
+        })
+        .catch(_ => {})
+    },
     onDeviceTypeChange(val) {
       this.form.deviceInstance = null
       this.form.dataMode = null