perf: 优化设备详情页面

device-manager-ui/admin/src/assets/mixins/formdialog.js

 export default {
   created() {
-   // this.getData();
+    // this.getData();
   },
   beforeDestroy() {
     clearTimeout(this.loadingTimer);
@@ -8,30 +8,28 @@ export default {
   methods: {
     // 渲染前置处理
     beforeRender(data) {
-      return data
+      return data;
     },
     // 渲染后置处理
-    afterRender(data) {
-
-    },
+    afterRender(data) {},
     // 提交表单的前置处理
     beforeSubmit(data) {
-      return data
+      return data;
     },
     // 提交表单的后置处理, 会阻断默认的回退行为
     afterSubmit(data) {
       this.$router.go(-1);
     },
 
-      // 开启、关闭
-      changePath(path) {
-        this.pageInfo.list = path + "/list";
-        this.pageInfo.del = path + "/delete";
-        this.pageInfo.add = path + "/add";
-        this.pageInfo.edit = path + "/edit";
-        this.pageInfo.view = path + "/view";
-      },
-    
+    // 开启、关闭
+    changePath(path) {
+      this.pageInfo.list = path + "/list";
+      this.pageInfo.del = path + "/delete";
+      this.pageInfo.add = path + "/add";
+      this.pageInfo.edit = path + "/edit";
+      this.pageInfo.view = path + "/view";
+    },
+
     // 默认拉取数据
     getData() {
       this.loading = true;
@@ -46,19 +44,18 @@ export default {
           res.entity = this.util_toDateStr(res.entity, this.toDate);
           this.form = Object.assign({}, this.form, res.entity);
           this.dict = Object.assign({}, this.dict, res.dict);
-          
           this.afterRender(res);
         })
-        .catch(error => {
-          this.$message.error(error.message)
-          throw error
+        .catch((error) => {
+          this.$message.error(error.message);
+          throw error;
         })
-        .then(data => {
+        .then((data) => {
           clearTimeout(this.loadingTimer);
           this.loadingTimer = setTimeout(() => {
             this.loading = false;
           }, 300);
-        })
+        });
     },
     // 提交表单
     submitForm(ref) {
@@ -66,70 +63,81 @@ export default {
       el.validate((valid) => {
         if (!valid) return;
         this.loading = true;
-        this.$post(this.urls.saveUrl || this.pageInfo.saveUrl, this.beforeSubmit(this.form))
-          .then(res => {
+        this.$post(
+          this.urls.saveUrl || this.pageInfo.saveUrl,
+          this.beforeSubmit(this.form)
+        )
+          .then((res) => {
             this.$message.success(res.msg);
             this.afterSubmit(res);
           })
-          .catch(error => {
+          .catch((error) => {
             this.$message.error(error.message);
           })
-          .then(data => {
+          .then((data) => {
             clearTimeout(this.loadingTimer);
             this.loadingTimer = setTimeout(() => {
               this.loading = false;
             }, 200);
-          })
+          });
       });
     },
     // 复制一个数组或对象
     util_copy(data) {
-      return JSON.parse(JSON.stringify(data))
+      return JSON.parse(JSON.stringify(data));
     },
     // 工具方法，把数字转化为字符串
     util_toString(data, array) {
       //原始数据
       const dataCopy = Object.assign({}, data);
-      array.forEach(item => {
+      array.forEach((item) => {
         //如果相等做操作
-        dataCopy[item] = dataCopy[item] === undefined ? '' : dataCopy[item] + '';
-      })
+        dataCopy[item] =
+          dataCopy[item] === undefined ? "" : dataCopy[item] + "";
+      });
       return dataCopy;
     },
     // 工具方法，把字符串转化为数组
     util_toArrays(data, array) {
       const dataCopy = Object.assign({}, data);
-      array.forEach(item => {
-        dataCopy[item] = dataCopy[item] === undefined ? [] : dataCopy[item].split(",");
-      })
+      array.forEach((item) => {
+        dataCopy[item] =
+          dataCopy[item] === undefined ? [] : dataCopy[item].split(",");
+      });
       return dataCopy;
     },
     // 工具方法，把字符串转化为格式化日期
     util_toDateStr(data, array) {
       const dataCopy = Object.assign({}, data);
-      array.forEach(item => {
-        dataCopy[item] = dataCopy[item] === undefined ? '' : this.util_formatterDate(dataCopy[item]);
-      })
+      array.forEach((item) => {
+        dataCopy[item] =
+          dataCopy[item] === undefined
+            ? ""
+            : this.util_formatterDate(dataCopy[item]);
+      });
       return dataCopy;
     },
     util_formatterDate(time) {
       let date = new Date(Number(time));
-      let Y = date.getFullYear() + '-';
-      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
-      let D = this.panLeft(date.getDate()) + ' ';
-      let h = this.panLeft(date.getHours()) + ':';
-      let m = this.panLeft(date.getMinutes()) + ':';
+      let Y = date.getFullYear() + "-";
+      let M =
+        (date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1)
+          : date.getMonth() + 1) + "-";
+      let D = this.panLeft(date.getDate()) + " ";
+      let h = this.panLeft(date.getHours()) + ":";
+      let m = this.panLeft(date.getMinutes()) + ":";
       let s = this.panLeft(date.getSeconds());
       return Y + M + D + h + m + s;
     },
     panLeft(num) {
-      return num < 10 ? '0' + num : num;
+      return num < 10 ? "0" + num : num;
     },
 
     // 从dict字段暴力取值，取不到则返回原值
     util_formatter(key, val) {
       try {
-        return this.dict[key][val]
+        return this.dict[key][val];
       } catch (error) {
         return val;
       }
@@ -142,24 +150,24 @@ export default {
           }
         });
       }, 0);
-    }
+    },
   },
   computed: {
     pageInfo() {
       let currUrl = this.$route.path;
-      let urlArray = currUrl.split('/');
+      let urlArray = currUrl.split("/");
       let type = urlArray.pop();
-      urlArray.push('save');
-      let saveUrl = urlArray.join('/');
+      urlArray.push("save");
+      let saveUrl = urlArray.join("/");
       urlArray.pop();
-      urlArray.push('edit');
-      let editUrl = urlArray.join('/');
+      urlArray.push("edit");
+      let editUrl = urlArray.join("/");
       urlArray.pop();
-      urlArray.push('add');
-      let addUrl = urlArray.join('/');
+      urlArray.push("add");
+      let addUrl = urlArray.join("/");
       urlArray.pop();
-      urlArray.push('view');
-      let viewUrl = urlArray.join('/');
+      urlArray.push("view");
+      let viewUrl = urlArray.join("/");
       return {
         type,
         currUrl,
@@ -183,9 +191,6 @@ export default {
       toString: [], // 需要把number转化为string的表单字段name数组
       toArrays: [], // 需要把number转化为arrays的表单字段name数组
       toDate: [], // 需要把number转化为date的表单字段name数组
-    }
-  }
-}
-
-
-
+    };
+  },
+};

device-manager-ui/admin/src/assets/mixins/table.js

@@ -176,13 +176,14 @@ export default {
     // 格式化单元格数据
     formatter(row, column, val) {
       const content = formatter(this.tableData, column, val);
-
       return content ? (
         <el-tag type={"info"} size="mini">
           {content}
         </el-tag>
-      ) : (
+      ) : val ? (
         val
+      ) : (
+        "--"
       );
     },
 

device-manager-ui/admin/src/views/device/drawerview.vue

@@ -10,7 +10,7 @@
     <el-form ref="form" :model="form" :rules="rules" label-width="120px">
       <el-tabs style="margin-left: 10px" v-model="activeName">
         <el-tab-pane label="设备详情" name="deviceDetail">
-          <view-show :form="viewInfo" :dict="dict" />
+          <view-show :siteInfo="siteInfo" :form="viewInfo" :dict="dict" />
         </el-tab-pane>
         <el-tab-pane label="告警记录" name="alarmLog">
           <alarm-list :queryIn="{ alarmDevice: form.id }" />
@@ -42,6 +42,13 @@ export default {
     alarmList,
     moduleList,
   },
+  props: {
+    siteInfo: {
+      type: Object,
+      required: true,
+      default: () => {},
+    },
+  },
   data() {
     return {
       activeName: "deviceDetail",

device-manager-ui/admin/src/views/device/list.vue

@@ -254,7 +254,7 @@
 
     <drawer-show ref="drawerform" @ok="getData" />
 
-    <drawer-view ref="drawerViewform" @ok="getData" />
+    <drawer-view ref="drawerViewform" :siteInfo="siteInfo" @ok="getData" />
   </div>
 </template>
 
@@ -310,7 +310,7 @@ export default {
       siteId: null,
       siteName: "",
       siteCode: "",
-
+      siteInfo: {},
       updateSiteId: null,
       updateSiteName: "",
       updateSiteCode: "",
@@ -476,6 +476,7 @@ export default {
           //this.info=res.data
           this.siteName = res.data.siteName;
           this.siteCode = res.data.siteCode;
+          this.siteInfo = res.data;
         }
       })
       .catch((error) => {

device-manager-ui/admin/src/views/device/view.vue

@@ -102,7 +102,7 @@
         {{ form.lon }}
       </el-descriptions-item>
       <el-descriptions-item
-        label="经度"
+        label="纬度"
         label-class-name="labelClass"
         content-class-name="contentClass"
       >
@@ -231,7 +231,27 @@
         设备位置
       </template>
     </el-descriptions>
-    <Map></Map>
+    <!-- <Map></Map> -->
+    <div class="map">
+      <el-amap
+        vid="amaps"
+        :zoom="20"
+        viewMode="3D"
+        expandZoomRange
+        :center="[siteInfo.longitude, siteInfo.latitude]"
+      >
+        <el-amap-marker
+          vid="2"
+          topWhenClick
+          :label="{
+            content: `我在${siteInfo.detailAddress}`,
+            offset: [0, -20],
+          }"
+          :position="[siteInfo.longitude, siteInfo.latitude]"
+          :icon="require('@/assets/images/d.png')"
+        ></el-amap-marker>
+      </el-amap>
+    </div>
   </layout-view>
 </template>
 
@@ -248,6 +268,11 @@ export default {
       type: Object,
       default: null,
     },
+    siteInfo: {
+      type: Object,
+      required: true,
+      default: () => {},
+    },
   },
   components: {},
   created() {},
@@ -326,4 +351,8 @@ export default {
 .contentClass {
   width: 600px;
 }
-</style>
+.map {
\ No newline at end of file
+  width: 100%;
+  height: 600px;
+}
+</style>