巡检结果图片添加资产框

src/views/Result.vue

@@ -404,7 +404,8 @@ export default {
     }
     
     if(this.$route.params.equipment){
-      this.filters.plateNo = [this.$route.params.equipment];
+      let equipment = this.$route.params.equipment;
+      this.filters.plateNo = equipment.split(",");
     }
     if (this.filters.dateTime.length > 0 || this.filters.plateNo.length > 0) {
       //do nothing
@@ -613,8 +614,8 @@ export default {
                                   info.type2 = capital.label;
                                 }
                               });
-                              this.allPoints.push({lng: result[0], lat: result[1], markerAnim: '', url: info.status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png'), status: info.status, content: this.no, title: '', titleList: ['资产类型:' + info.type2,'资产状态:' + (info.status == 1 ? '正常' : '异常'), '位置:' + info.position]});
-                              this.allImgs.push({url: '/roadlinks/getCapitalImg?imgPath=' + info.imagePath, content: info.type2 + ' | ' + (info.status == 1 ? '正常' : '异常') + ' | ' + info.position, number: this.no ,id: 'imageCard' + this.no});
+                              this.allPoints.push({lng: result[0], lat: result[1], markerAnim: '', url: info.status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png'), status: info.status, content: this.no, title: '', titleList: ['资产类型:' + info.type2,'资产状态:' + (info.status == 1 ? '正常' : (info.status == 2 ? '异常' : '新增')), '位置:' + info.position]});
+                              this.allImgs.push({url: '/roadlinks/getCapitalImg?imgPath=' + info.imagePath, content: info.type2 + ' | ' + (info.status == 1 ? '正常' : (info.status == 2 ? '异常' : '新增')) + ' | ' + info.position, number: this.no ,id: 'imageCard' + this.no});
                             }
                           });
                         }

src/views/ResultDetail.vue

@@ -109,6 +109,16 @@
       label="分组ID"
       prop="groupId">
     </el-table-column>
+    <el-table-column
+      v-if="isShowCol"
+      label="显示信息"
+      prop="info">
+    </el-table-column>
+    <el-table-column
+      v-if="isShowCol"
+      label="图片设施边框"
+      prop="vector">
+    </el-table-column>
     <el-table-column fixed="right" label="详情">
       <template slot-scope="scope">
         <el-button
@@ -141,8 +151,9 @@
         :title="imgContent"
         custom-class="customWidth"
         >
-        <div :style="'height:' + fullHeight + 'px;'">
-          <img :src="bigImgUrl" width="100%" style="height: 100%;">
+        <div :style="'height:' + fullHeight + 'px;'" ref="mainW">
+          <img :src="bigImgUrl" ref="BGIMG" width="100%" style="height: 100%;" @load=loadBigImg>
+          <div class="dash" :style="customStyle"  v-if="showRedBox"></div>
         </div>
     </el-dialog>
     <el-dialog
@@ -154,7 +165,7 @@
       >
       <span>此情况是否为异常?</span>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible1 = false">否</el-button>
+        <el-button @click="updatePicStatus">否</el-button>
         <el-button type="primary" @click="showDialog2">是</el-button>
       </span>
     </el-dialog>
@@ -182,6 +193,11 @@
     }
   }
 }
+.dash{
+  position: absolute;
+  border: 2px #EC292A dashed;
+}
+
 </style>
 <script>
 import axios from 'axios';
@@ -316,6 +332,19 @@ export default {
       },
       currentdate: '',
       fullHeight: document.documentElement.clientHeight/1.5,
+      showRedBox: false,
+      customStyle: {
+        top: `${this.positionRight / this.hscale}px`,
+        left: `${this.positionLeft / this.scale}px`,
+        width: `${this.positionWidth / this.scale}px`,
+        height: `${this.positionHeight / this.hscale}px`,
+      },
+      positionLeft: '',
+      positionRight: '',
+      positionWidth: '',
+      positionHeight: '',
+      scale: 0, // 适应比例
+      hscale: 0,
     };
   },
   mounted() {
@@ -337,13 +366,31 @@ export default {
     if (startTime || endTime || equipment) {
       this.filters.dateTime = [moment(startTime).format("YYYY-MM-DD HH:mm:ss"), moment(endTime).format("YYYY-MM-DD HH:mm:ss")];
       this.getImageGroupsByCon(startTime, endTime, equipment);
+    } else {
+      let searchVal = sessionStorage.getItem("resultDetailSearchVal");
+      if (searchVal) {
+        this.filters = JSON.parse(searchVal);
       } else {
         this.filters.status = 2;
+      }
       this.getImageGroups();
     }
     
   },
   methods: {
+    loadBigImg() {
+    //  console.log('---');
+      this.scale = this.$refs.BGIMG.naturalWidth / this.$refs.mainW.offsetWidth;
+      this.hscale = this.$refs.BGIMG.naturalHeight / this.$refs.mainW.offsetHeight;
+      
+      this.customStyle = {
+        top: `${this.positionRight / this.hscale}px`,
+        left: `${this.positionLeft / this.scale}px`,
+        width: `${this.positionWidth / this.scale}px`,
+        height: `${this.positionHeight / this.hscale}px`,
+      };
+      
+    },
     getImageGroupsByCon(startTime, endTime, equipment) {
       axios.post(`/roadlinks/getImageGroupsByCon`, {
         startTimeMill: startTime,
@@ -374,6 +421,7 @@ export default {
         });
     },
     getImageGroups() {
+      sessionStorage.setItem("resultDetailSearchVal", JSON.stringify(this.filters));
       if(this.filters.dateTime.length == 0){
         this.filters.dateTime[0] = moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 00:00:00';
         this.filters.dateTime[1] = moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 23:59:59';
@@ -512,8 +560,25 @@ export default {
       this.dialogVisible2 = true;
     },
     showPicture(index, row) {
-      this.imgContent = row.type2 + "|" + row.status + "|" + row.position;
+      this.imgContent = row.info + "|" + row.status + "|" + row.position;
       this.bigImgUrl = "/roadlinks/getCapitalImg?imgPath=" + row.imagePath;
+      let vectorData = JSON.parse(row.vector);
+      if (vectorData && vectorData.location) {
+        let point = vectorData.location;
+        if (point.length == 4) {
+          this.positionLeft = point[0];
+          this.positionRight = point[1];
+          this.positionWidth = point[2] - point[0];
+          this.positionHeight = point[3] - point[1];
+          this.customStyle = {
+            top: `${this.positionRight / this.hscale}px`,
+            left: `${this.positionLeft / this.scale}px`,
+            width: `${this.positionWidth / this.scale}px`,
+            height: `${this.positionHeight / this.hscale}px`,
+          };
+        }
+      }
+      this.showRedBox = true;
       this.isShowPicture = true;
       if (row.status == "异常") {
         this.dialogVisible1 = true;
@@ -522,6 +587,7 @@ export default {
       }
     },
     updatePicStatus() {
+      this.dialogVisible1 = false;
       this.dialogVisible2 = false;
       this.tableData[this.tableIndex].status = "正常";
       axios.post(`/roadlinks/updateImageStatus`, {

src/views/Task.vue

@@ -647,12 +647,22 @@ export default {
     },
     // 巡检结果查看
     linkResult(index, row) {
+      let equipmentCode = "";
+      if(this.filters.plateNo && this.filters.plateNo.length > 0){
+        this.filters.plateNo.forEach((item) => {
+          if(equipmentCode == ""){
+            equipmentCode += item;
+          }else{
+            equipmentCode += "," + item;
+          }
+        });
+      }
       this.$router.push({
           name:"result",
           params: {
             startTime: this.filters.dateTime[0],
             endTime: this.filters.dateTime[1],
-            equipment: row.plateNo
+            equipment: equipmentCode
           }
       });
     },