巡检结果图片增加识别框

src/views/Result.vue

@@ -112,6 +112,7 @@
               label="终止时间戳"
               prop="endTime">
             </el-table-column>
+            
             <el-table-column fixed="right" label="详情" >
 
               <template slot-scope="scope">
@@ -174,8 +175,9 @@
         :title="imgContent"
         custom-class="customWidth"
         >
-        <div :style="'height:' + fullHeight + 'px;'">
-          <img :src="bigImgUrl" width="100%" style="height: 100%;">
+        <div :style="'height:' + fullHeight + 'px; position: relative;'" 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>
   </div>
@@ -271,7 +273,10 @@
 .pic_active{
   border: 5px solid #1296db;
 }
-
+.dash{
+  position: absolute;
+  border: 2px #EC292A dashed;
+}
 </style>
 
 <script>
@@ -395,7 +400,20 @@ export default {
           label: '测速雷达',
           value: 805
         }
-      ]
+      ],
+      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() {
@@ -423,6 +441,19 @@ export default {
   },
  
   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`,
+      };
+      
+    },
     getMapBounds(e){
       var bounds = e.target.getBounds();
       
@@ -488,9 +519,9 @@ export default {
       document.getElementById(this.imgs[index].id).scrollIntoView();
       this.carPoints.forEach((val, index_) => {
         if (index_ === index) {
-          val.url = val.status == 1 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
+          val.url = val.status == 1 || val.status == 3 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
         }else{
-          val.url = val.status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
+          val.url = val.status == 1 || val.status == 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
         }
       });
       this.isShow = index;
@@ -498,28 +529,45 @@ export default {
     },
     removeclass(index) {
       this.carPoints.forEach((val) => {
-        val.url = val.status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
+        val.url = val.status == 1 || val.status == 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
       });
       this.isShow = -1;
     },
     showPicture(index){
       this.bigImgUrl = this.imgs[index].url;
-      this.isShowPicture = true;
       this.imgContent = this.imgs[index].content;
+      let vectorData = JSON.parse(this.imgs[index].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;
     },
     addActive(index) {
       this.carPoints.forEach((val) => {
         val.markerAnim = '';
-        val.url = val.status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
+        val.url = val.status == 1 || val.status == 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
       });
       this.isShow = index;
-      this.carPoints[index].url = this.carPoints[index].status == 1 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
+      this.carPoints[index].url = this.carPoints[index].status == 1 || this.carPoints[index].status == 3 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
       this.carPoints[index].markerAnim = 'BMAP_ANIMATION_BOUNCE';
     },
     removeActive(index) {
       this.isShow = -1;
       this.carPoints[index].markerAnim = '';
-      this.carPoints[index].url = this.carPoints[index].status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
+      this.carPoints[index].url = this.carPoints[index].status == 1 || this.carPoints[index].status == 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
     },
     handler({BMap, map}) {
       console.log(BMap, map);
@@ -614,8 +662,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.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});
+                              this.allPoints.push({lng: result[0], lat: result[1], markerAnim: '', url: info.status == 1 || info.status == 3 ? 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.info + ' | ' + (info.status == 1 ? '正常' : (info.status == 2 ? '异常' : '新增')) + ' | ' + info.position, number: this.no ,id: 'imageCard' + this.no, vector: info.vector});
                             }
                           });
                         }