update 实例详情

src/api/equipment-management/equipment-model.js

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

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

 <template>
   <div>
     <el-card class="no-bottom">
-      <el-form :model="form" inline>
-        <el-form-item label="设备类型:">
-          <el-select v-model="form.a" placeholder="请选择">
-            <el-option label="类型一" :value="null" />
-            <el-option label="类型二" :value="1" />
+      <el-form ref="form" :model="form" inline>
+        <el-form-item label="设备类型:" prop="deviceType">
+          <el-select v-model="form.deviceType" @change="onDeviceTypeChange">
+            <el-option
+              v-for="(deviceType, index) in deviceTypeList"
+              :key="index"
+              :label="deviceType.name"
+              :value="deviceType.id"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item label="设备实例:">
-          <el-select v-model="form.a" placeholder="请选择">
-            <el-option label="实例一" :value="null" />
-            <el-option label="实例二" :value="1" />
+        <el-form-item label="设备实例:" prop="deviceInstance">
+          <el-select v-model="form.deviceInstance" placeholder="请选择">
+            <el-option
+              v-for="(deviceInstance, index) in deviceInstanceList"
+              :key="index"
+              :label="deviceInstance.name"
+              :value="deviceInstance.id"
+            />
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary">查询</el-button>
+          <el-button type="primary" @click="queryData">查询</el-button>
         </el-form-item>
       </el-form>
     </el-card>
@@ -27,8 +35,8 @@
         label-position="right"
         label-width="140px"
       >
-        <descriptions-item label="设备类型" value="机床" />
-        <descriptions-item label="数据模型" value="模型一，模型二" />
+        <descriptions-item label="设备类型" :value="deviceType.name" />
+        <descriptions-item label="数据模型" :value="deviceType.dataModes" />
       </descriptions>
     </el-card>
     <el-card class="margin-top-20">
@@ -78,18 +86,85 @@
 </template>
 
 <script>
+import { getAllInstanceByDeviceTypeId } from '@/api/data-visible/dashboard'
+import { getDataModelByDeviceTypeId } from '@/api/equipment-management/equipment-model'
+import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'
+
 export default {
   name: 'DeviceMonitoring',
   data() {
     return {
       form: {
-        a: null,
-        c: [],
-        refresh: 1
+        deviceType: null,
+        deviceInstance: null
       },
       activeName: 'first',
-      secondActiveName: 'first'
+      secondActiveName: 'first',
+      deviceTypeList: [],
+      deviceInstanceList: [],
+      dataModelList: [],
+      propertyList: [],
+      activeProperty: null
+    }
+  },
+  computed: {
+    deviceType() {
+      let name = null
+      let dataModes = null
+      if (this.deviceTypeList.length && this.form.deviceType) {
+        const deviceType = this.deviceTypeList.find(v => v.id === this.form.deviceType)
+        name = deviceType.name
+      }
+      if (this.dataModelList.length) {
+        dataModes = this.dataModelList.map(v => v.name).join(',')
+      }
+      return {
+        name,
+        dataModes
+      }
     }
+  },
+  created() {
+    getAllDeviceModel()
+      .then(res => {
+        this.deviceTypeList = res.data
+        if (this.deviceTypeList.length) {
+          this.form.deviceType = this.deviceTypeList[0].id
+        }
+        this.getAllInstanceByDeviceTypeId(this.form.deviceType)
+        this.getDataModelByDeviceTypeId(this.form.deviceType)
+      })
+      .catch(_ => {})
+  },
+  methods: {
+    onDeviceTypeChange(val) {
+      this.getAllInstanceByDeviceTypeId(val)
+      this.getDataModelByDeviceTypeId(val)
+    },
+    getAllInstanceByDeviceTypeId(val) {
+      getAllInstanceByDeviceTypeId({ deviceTypeId: val })
+        .then(res => {
+          this.deviceInstanceList = res.data
+          if (this.deviceInstanceList.length) {
+            this.form.deviceInstance = this.deviceInstanceList[0].id
+          }
+        })
+        .catch(_ => {})
+    },
+    getDataModelByDeviceTypeId(id) {
+      getDataModelByDeviceTypeId({ id })
+        .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
+            }
+          }
+        })
+        .catch(_ => {})
+    },
+    queryData() {}
   }
 }
 </script>