1.4

src/views/basicConfig/components/deviceAdd.vue

@@ -1,5 +1,11 @@
 <template>
-  <el-form ref="form" :rules="rules" label-width="100px" :model="form">
+  <el-form
+    ref="form"
+    :rules="rules"
+    label-width="100px"
+    :model="form"
+    class="device-add"
+  >
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item label="产线" prop="proLineId">
@@ -144,7 +150,7 @@
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item label="设备图片" prop="imgId">
-          <div v-if="deviceImg" style="position: relative">
+          <div v-if="deviceImg" style="position: relative" class="img-box">
             <el-image
               :src="deviceImg"
               class="avatar"
@@ -232,8 +238,10 @@ export default {
         this.isEdit = true
         getEquipment({ id }).then((res) => {
           if (res.code === 0) {
-            this.form = res.data
             this.form.proLineId = res.data.proLineId
+            getUnitList(this.form.proLineId).then((res) => {
+              this.unitModuleList = res.data || []
+            })
             this.form.unitId = res.data.unitId
             this.form.name = res.data.name
             this.form.spec = res.data.spec
@@ -342,38 +350,45 @@ export default {
 }
 </script>
 <style lang="scss">
-.avatar {
-  width: 100%;
-  cursor: pointer;
-}
-.avatar-close-icon {
-  font-size: 24px;
-  position: absolute;
-  right: -10px;
-  top: -10px;
-  cursor: pointer;
-}
-.device-uploader {
-  width: 178px;
-  height: 178px;
-  display: block;
-  .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .el-upload:hover {
-    border-color: #409eff;
-  }
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
+.device-add {
+  .device-uploader {
     width: 178px;
     height: 178px;
-    line-height: 178px;
-    text-align: center;
+    display: block;
+    .el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .el-upload:hover {
+      border-color: #409eff;
+    }
+    .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      line-height: 178px;
+      text-align: center;
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+.img-box {
+  border: 1px dashed #d9d9d9;
+  .avatar {
+    width: 100%;
+    cursor: pointer;
+  }
+  .avatar-close-icon {
+    font-size: 24px;
+    position: absolute;
+    right: -10px;
+    top: -10px;
+    cursor: pointer;
   }
 }
 </style>

src/views/siteMonitoring/deviceStatus.vue

@@ -5,8 +5,10 @@
         <el-tree
           :data="treeData"
           node-key="id"
+          ref="deviceStatusTree"
           :props="defaultProps"
           default-expand-all
+          highlight-current
           @node-click="clickDevice"
         >
         </el-tree>
@@ -19,10 +21,11 @@
           <li>设备模式：{{ eqMessage.mode }}</li>
           <li>设备状态：{{ eqMessage.state }}</li>
           <li>设备报警：{{ eqMessage.alarmNum }}</li>
-          <li>剩余维护时间：{{ eqMessage.mode }}秒</li>
+          <li>剩余维护时间：{{ eqMessage.remainMainTime }}秒</li>
         </ul>
         <div class="img-box">
-          <img src="./../../assets/monitor/eq_img.jpg" alt="设备图片" />
+          <img v-if="eqMessage.imgId" :src="deviceImg" alt="设备图片" />
+          <img v-else src="./../../assets/empty.png" alt="设备图片" />
         </div>
       </div>
     </el-col>
@@ -40,35 +43,49 @@ export default {
         children: 'children',
         label: 'name'
       },
-      eqMessage: {}
+      eqMessage: {},
+      equipmentId: '',
+      deviceImg: ''
     }
   },
   mounted() {
     this.getTree()
-    this.getMsg()
   },
   methods: {
     getTree() {
       getTreeData().then((res) => {
         this.treeData = res.data
+        this.equipmentId = this.getId(res.data)
+        this.setCurrent()
+        this.getMsg()
       })
     },
+    getId(val) {
+      if (val[0].children) {
+        return this.getId(val[0].children)
+      } else {
+        return val[0].id
+      }
+    },
+    setCurrent() {
+      let _this = this
+      setTimeout(function () {
+        _this.$refs.deviceStatusTree.setCurrentKey(1)
+      }, 500)
+    },
     getMsg() {
-      eqMonitorGet({ equipmentId: 1 }).then((res) => {
+      eqMonitorGet({ equipmentId: this.equipmentId }).then((res) => {
         console.log(res)
         this.eqMessage = res.data
+        this.deviceImg = process.env.VUE_APP_VIEW_PIC + res.data.imgId
       })
     },
     clickDevice(val) {
       console.log(val)
-      // if (!val.children) {
-      //   this.$refs.searchBarForm.resetForm()
-      //   this.listQuery.spec = ''
-      //   this.listQuery.code = ''
-      //   this.listQuery.id = val.id
-      //   this.listQuery.current = 1
-      //   this.getList()
-      // }
+      if (!val.children) {
+        this.equipmentId = val.id
+        this.getMsg()
+      }
     }
   }
 }
@@ -119,6 +136,7 @@ export default {
       }
     }
     .img-box {
+      text-align: center;
       img {
         max-width: 100%;
         max-height: calc(100vh - 300px);