前台描点

src/main.js

@@ -5,6 +5,7 @@ import ElementUI from 'element-ui';
 import BaiduMap from 'vue-baidu-map';
 import 'element-ui/lib/theme-chalk/index.css';
 import _ from 'lodash';
+import moment from 'moment';
 import App from './App.vue';
 import router from './router';
 import store from './store';
@@ -13,7 +14,7 @@ Vue.use(ElementUI);
 Vue.use(BaiduMap, {
   ak: 'AZzMTSKLP4lVHphRauTBdINZUFnpWTcu',
 });
-Object.defineProperty(Vue.prototype, '$moment', { value: moment })
+Object.defineProperty(Vue.prototype, '$moment', { value: moment });
 Object.defineProperty(Vue.prototype, '$_', { value: _ });
 
 Vue.config.productionTip = false;

src/views/Task.vue

@@ -146,8 +146,13 @@
         </baidu-map>
       </div>
     </div>
-    <el-dialog :visible.sync="isShowPicture" width="960px">
-      <img :src="bigImgUrl" width="100%" />
+    <el-dialog :visible.sync="isShowPicture" width="960px" >
+      <div :style="'height:' + fullHeight + 'px; position: relative;'" ref="mainW">
+      <img :src="bigImgUrl" ref="BGIMG" width="100%" @load="loadBigImg"/>
+        <div v-for="(item) in customStyleArray" :key="item">
+          <div class="dash" :style="item"  v-if="showRedBox"></div>
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -164,6 +169,10 @@ export default {
   name: 'task',
   data() {
     return {
+      fullHeight: document.documentElement.clientHeight / 1.5,
+      styleItem: {
+
+      },
       tableData: [],
       infoWindow: {
         show: false,
@@ -240,6 +249,7 @@ export default {
         ],
       },
       searchLoading: false,
+      customStyleArray: [],
     };
   },
   mounted() {},
@@ -248,6 +258,25 @@ export default {
     this.queryTravel();
   },
   methods: {
+
+    loadBigImg() {
+      const newRedArray = [];
+      this.scale = this.$refs.BGIMG.naturalWidth / this.$refs.mainW.offsetWidth;
+      this.hscale = this.$refs.BGIMG.naturalHeight / this.$refs.mainW.offsetHeight;
+      this.customStyleArray.forEach((e) => {
+        const customStyle = {
+          top: `${e.positionRight / this.hscale}px`,
+          left: `${e.positionLeft / this.scale}px`,
+          width: `${e.positionWidth / this.scale}px`,
+          height: `${e.positionHeight / this.hscale}px`,
+        };
+        newRedArray.push(customStyle);
+      });
+
+      this.customStyleArray = newRedArray;
+      this.showRedBox = true;
+    },
+
     showTitle(e) {
       this.infoPosition.lng = e.point.lng;
       this.infoPosition.lat = e.point.lat;
@@ -269,8 +298,11 @@ export default {
     },
     showPicture(e) {
       this.infos.forEach((item) => {
+        console.log(JSON.stringify(item));
         if (item.lng == e.point.lng && item.lat == e.point.lat) {
           // 根据坐标信息获取图片
+          // 这个是描点的
+          this.getTrajectImgLocation(item.channel, item.plateNo, `${item.date} ${item.time}`);
           this.bigImgUrl = `${address
           }getTrajectImg?channel=${
             item.channel
@@ -295,7 +327,40 @@ export default {
           equipment: plateNo,
           createTime,
         })
-        .then((response) => {})
+        // eslint-disable-next-line no-unused-vars
+        .then((response) => {
+
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+
+    getTrajectImgLocation(channel, plateNo, createTime) {
+      axios
+        .get(
+          `${address}getTrajectImgLocation?channel=${channel}&equipment=${plateNo}&createTime=${createTime}`,
+        )
+        // eslint-disable-next-line no-unused-vars
+        .then((response) => {
+          const styleArray = response.data.data;
+          this.customStyleArray = [];
+
+          styleArray.forEach((e) => {
+            const point = JSON.parse(e).location;
+            if (point.length === 4) {
+              const style = {
+                positionLeft: point[0],
+                positionRight: point[1],
+                positionWidth: point[2] - point[0],
+                positionHeight: point[3] - point[1],
+
+              };
+
+              this.customStyleArray.push(style);
+            }
+          });
+        })
         .catch((error) => {
           console.log(error);
         });
@@ -698,4 +763,9 @@ export default {
     }
   }
 }
+
+.dash{
+  position: absolute;
+  border: 2px #EC292A dashed;
+}
 </style>