巡检平台提示框修改为可拖动

.gitignore

 node_modules
+dist

src/components/el-drag-dialog/drag.js

+export default {
+    bind(el, binding, vnode) {
+      const dialogHeaderEl = el.querySelector('.el-dialog__header')
+      const dragDom = el.querySelector('.el-dialog')
+      dialogHeaderEl.style.cssText += ';cursor:move;'
+      dragDom.style.cssText += ';top:0px;'
+  
+      // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+      const getStyle = (function() {
+        if (window.document.currentStyle) {
+          return (dom, attr) => dom.currentStyle[attr]
+        } else {
+          return (dom, attr) => getComputedStyle(dom, false)[attr]
+        }
+      })()
+  
+      dialogHeaderEl.onmousedown = (e) => {
+        // 鼠标按下，计算当前元素距离可视区的距离
+        const disX = e.clientX - dialogHeaderEl.offsetLeft
+        const disY = e.clientY - dialogHeaderEl.offsetTop
+  
+        const dragDomWidth = dragDom.offsetWidth
+        const dragDomHeight = dragDom.offsetHeight
+  
+        const screenWidth = document.body.clientWidth
+        const screenHeight = document.body.clientHeight
+  
+        const minDragDomLeft = dragDom.offsetLeft
+        const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+  
+        const minDragDomTop = dragDom.offsetTop
+        const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
+  
+        // 获取到的值带px 正则匹配替换
+        let styL = getStyle(dragDom, 'left')
+        let styT = getStyle(dragDom, 'top')
+  
+        if (styL.includes('%')) {
+          styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
+          styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
+        } else {
+          styL = +styL.replace(/\px/g, '')
+          styT = +styT.replace(/\px/g, '')
+        }
+  
+        document.onmousemove = function(e) {
+          // 通过事件委托，计算移动的距离
+          let left = e.clientX - disX
+          let top = e.clientY - disY
+  
+          // 边界处理
+          if (-(left) > minDragDomLeft) {
+            left = -minDragDomLeft
+          } else if (left > maxDragDomLeft) {
+            left = maxDragDomLeft
+          }
+  
+          if (-(top) > minDragDomTop) {
+            top = -minDragDomTop
+          } else if (top > maxDragDomTop) {
+            top = maxDragDomTop
+          }
+  
+          // 移动当前元素
+          dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+  
+          // emit onDrag event
+          vnode.child.$emit('dragDialog')
+        }
+  
+        document.onmouseup = function(e) {
+          document.onmousemove = null
+          document.onmouseup = null
+        }
+      }
+    }
+  }
\ No newline at end of file

src/components/el-drag-dialog/index.js

+import drag from './drag'
+
+const install = function(Vue) {
+  Vue.directive('el-drag-dialog', drag)
+}
+
+if (window.Vue) {
+  window['el-drag-dialog'] = drag
+  Vue.use(install); // eslint-disable-line
+}
+
+drag.install = install
+export default drag
\ No newline at end of file

src/views/Result.vue

@@ -215,7 +215,11 @@
       width: calc(100vw - 600px);
       height: 100%;
       float: left;
-      background: #888
+      background: #888;
+      .map {
+        width: calc(100vw - 600px);
+        height: 100%;
+      }
     }
     .picture{
       height: 90%;
@@ -267,10 +271,7 @@
 .pic_active{
   border: 5px solid #1296db;
 }
-.map {
-  width: calc(100vw - 600px);
-  height: 100%;
-}
+
 </style>
 
 <script>
@@ -398,10 +399,21 @@ export default {
     };
   },
   mounted() {
+    if(this.$route.params.startTime && this.$route.params.endTime){
+      this.filters.dateTime = [this.$route.params.startTime, this.$route.params.endTime];
+    }
+    
+    if(this.$route.params.equipment){
+      this.filters.plateNo = [this.$route.params.equipment];
+    }
+    if (this.filters.dateTime.length > 0 || this.filters.plateNo.length > 0) {
+      //do nothing
+    } else {
       let searchVal = sessionStorage.getItem("searchVal");
       if (searchVal) {
         this.filters = JSON.parse(searchVal);
       }
+    }
     this.queryAllEquipment();
     this.queryTravel();
   },
@@ -601,7 +613,7 @@ 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.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});
                             }
                           });
@@ -631,7 +643,7 @@ export default {
                     
                     this.tableData.push({
                       plateNo: key, 
-                      startEndTime: moment(val[val.length - 1].timestamp).format("YYYY-MM-DD hh:mm:ss") + " - " + moment(val[0].timestamp).format("YYYY-MM-DD hh:mm:ss"), 
+                      startEndTime: moment(val[val.length - 1].timestamp).format("YYYY-MM-DD hh:mm") + " - " + moment(val[0].timestamp).format("YYYY-MM-DD hh:mm"), 
                       startEndPoint: val[val.length - 1].position + " - " + val[0].position,
                       inspectDistance: (totalDistance/1000).toFixed(1) + 'km',
                       inspectNum: (val[0].inspectNum ? val[0].inspectNum : 0) + "个",

src/views/ResultDetail.vue

@@ -104,6 +104,11 @@
       label="图片路径"
       prop="imagePath">
     </el-table-column>
+    <el-table-column
+      v-if="isShowCol"
+      label="分组ID"
+      prop="groupId">
+    </el-table-column>
     <el-table-column fixed="right" label="详情">
       <template slot-scope="scope">
         <el-button
@@ -131,6 +136,7 @@
        
     </div>
     <el-dialog
+        v-el-drag-dialog
         :visible.sync="isShowPicture"
         :title="imgContent"
         custom-class="customWidth"
@@ -139,6 +145,32 @@
           <img :src="bigImgUrl" width="100%" style="height: 100%;">
         </div>
     </el-dialog>
+    <el-dialog
+      title="确认信息"
+      v-el-drag-dialog
+      :visible.sync="dialogVisible1"
+      :modal="needModal"
+      width="30%"
+      >
+      <span>此情况是否为异常?</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible1 = false">否</el-button>
+        <el-button type="primary" @click="showDialog2">是</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="确认信息"
+      v-el-drag-dialog
+      :visible.sync="dialogVisible2"
+      :modal="needModal"
+      width="30%"
+      >
+      <span>此情况是否为异常?</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible2 = false">未处理</el-button>
+        <el-button type="primary" @click="updatePicStatus">已处理</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <style lang="less" scope>
@@ -157,10 +189,12 @@ import { Message } from 'element-ui';
 import echarts from 'echarts';
 import moment from 'moment';
 import address from '../config';
-import { export_json_to_excel } from '@/excel/Export2Excel'
+import { export_json_to_excel } from '@/excel/Export2Excel';
+import elDragDialog from "@/components/el-drag-dialog";
 
 export default {
   name: 'detail',
+  directives: { elDragDialog },
   data() {
     return {
       tableData: [
@@ -180,6 +214,11 @@ export default {
       imgContent: '',
       bigImgUrl: '',
       no: 0,
+      dialogVisible1: false,
+      dialogVisible2: false,
+      needModal: false,
+      groupId: null,
+      tableIndex: -1,
       capitalOptions: [
         {
           label: '路面状况',
@@ -285,7 +324,7 @@ export default {
   created() {
     let startTime = null;
     let endTime = null;
-    let equipment = null
+    let equipment = null;
     if(this.$route.params.startTime){
       startTime = this.$route.params.startTime;
     }
@@ -468,33 +507,39 @@ export default {
 	    }
 	    return false;
     },
+    showDialog2() {
+      this.dialogVisible1 = false;
+      this.dialogVisible2 = true;
+    },
     showPicture(index, row) {
       this.imgContent = row.type2 + "|" + row.status + "|" + row.position;
       this.bigImgUrl = "/roadlinks/getCapitalImg?imgPath=" + row.imagePath;
       this.isShowPicture = true;
       if (row.status == "异常") {
-        this.$confirm('此情况是否为异常？', '确认信息', {
-          distinguishCancelAndClose: true,
-          confirmButtonText: '是',
-          cancelButtonText: '否'
-        })
-          .then(() => {
-            this.$confirm('是否已经处理改异常情况？', '确认信息', {
-              distinguishCancelAndClose: true,
-              confirmButtonText: '已处理',
-              cancelButtonText: '未处理'
-            })
-              .then(() => {
-                this.tableData[index].status = "正常";
-              })
-              .catch(action => {
-                // do nothing
-              });
+        this.dialogVisible1 = true;
+        this.groupId = row.groupId;
+        this.tableIndex = index;
+      }
+    },
+    updatePicStatus() {
+      this.dialogVisible2 = false;
+      this.tableData[this.tableIndex].status = "正常";
+      axios.post(`/roadlinks/updateImageStatus`, {
+        id: this.groupId
+      }).then((response) => {
+        if (response.data.code === 200) {
+          if (response.data.data) {
+            
+          } else {
+            
+          }
+        } else {
+          
+        }
       })
-          .catch(action => {
-            this.tableData[index].status = "正常";
+        .catch((error) => {
+          console.log(error);
         });
-      }
     },
     exportTravel(){
         this.tableData.forEach((item, index) => {

src/views/Task.vue

@@ -187,7 +187,11 @@
     .ov-map{
       width: 100%;
       height: 100%;
-      background: #888
+      background: #888;
+      .map {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
   .picture{
@@ -212,10 +216,7 @@
     }
   }
 }
-.map {
-  width: 100%;
-  height: 100%;
-}
+
 </style>
 <script>
 import axios from 'axios';
@@ -646,7 +647,14 @@ export default {
     },
     // 巡检结果查看
     linkResult(index, row) {
-
+      this.$router.push({
+          name:"result",
+          params: {
+            startTime: this.filters.dateTime[0],
+            endTime: this.filters.dateTime[1],
+            equipment: row.plateNo
+          }
+      });
     },
     shutdown(index, row) {
       console.log(index, row);