完成巡检巡查页面

gassafetyprogress-web/src/assets/image-xjxc/end.svg

+<svg width="21" height="24" viewBox="0 0 27 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_649_1291)">
+<path id="Vector" d="M13.5001 23.7578C13.8251 23.7578 20.5909 12.3435 20.5909 7.95251C20.5909 3.56149 17.4153 0 13.5001 0C9.58478 0 6.40918 3.56149 6.40918 7.95251C6.40918 12.3435 13.175 23.7578 13.5001 23.7578ZM10.148 7.95251C10.148 5.87676 11.6492 4.19314 13.5001 4.19314C15.351 4.19314 16.8521 5.87676 16.8521 7.95251C16.8521 10.0284 15.3509 11.7119 13.5001 11.7119C11.6492 11.7119 10.148 10.0284 10.148 7.95251Z" fill="#1890FF"/>
+<path id="Vector_2" d="M18.6259 21.7832C20.1679 22.3649 21.1366 23.2052 21.1366 24.1397C21.1366 25.8958 17.7168 27.3199 13.5004 27.3199C9.28392 27.3199 5.8641 25.896 5.8641 24.1397C5.8641 23.2052 6.83286 22.3651 8.37483 21.7832C5.23419 22.5648 3.11523 24.042 3.11523 25.7356C3.11523 28.245 7.76625 30.2802 13.5004 30.2802C19.2345 30.2802 23.8855 28.245 23.8855 25.7355C23.8855 24.042 21.7666 22.5648 18.6259 21.7832Z" fill="#006DD1"/>
+</g>
+<defs>
+<clipPath id="clip0_649_1291">
+<rect width="27" height="30.2809" fill="white"/>
+</clipPath>
+</defs>
+</svg>

gassafetyprogress-web/src/assets/image-xjxc/start.svg

+<svg width="18" height="24" viewBox="0 0 22 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M22 26.6602V27.5651C22 29.4384 17.6 31.0428 17.6 31.0428L15.7667 30.7827C15.7667 30.7827 12.8348 30.3736 11 30.3736C9.16793 30.3736 6.23333 30.7827 6.23333 30.7827L4.41343 31.0368C4.41343 31.0368 0 29.4316 0 27.5651V26.6602C0 24.9191 2.0342 23.1621 4.41826 21.8146C4.53374 21.7495 5.9664 30.8011 5.9664 30.8011L6.60001 30.7827C6.60001 30.7827 5.37578 21.437 5.50003 21.3735C6.15997 21.0367 6.59414 20.7211 7.2433 20.4599C7.4841 20.362 8.63532 19.6644 7.99131 17.786C6.49977 16.0896 5.48373 14.4461 5.48373 10.7398H16.5509C16.5509 14.4077 15.5089 16.0665 14.0272 17.7651H14.0357C13.4059 19.8961 14.4132 20.4015 14.5736 20.4594C15.216 20.6964 15.8555 21.0667 16.5 21.3735C16.6597 21.4494 15.4 30.7827 15.4 30.7827L16.0696 30.7627C16.0696 30.7627 17.4353 21.7406 17.5749 21.8169C19.9951 23.1389 22 24.8836 22 26.6602ZM17.3085 6.83657C17.3085 2.57742 12.11 0.448035 12.11 0.448035C11.3738 0.0780899 10.643 0.162365 9.88997 0.448035C9.88997 0.448035 4.69127 2.31773 4.69127 6.83657C4.69127 7.51215 3.59233 7.36712 3.22872 9.5041H18.7716C18.1099 7.35236 17.3085 7.51215 17.3085 6.83657Z" fill="#1890FF"/>
+</svg>

gassafetyprogress-web/src/assets/styles/all.scss

@@ -583,10 +583,6 @@
 
   // 滚动条公共样式
   .scrollStyle {
-    .el-table::before {
-      height: 0px !important;
-    }
-
     &::-webkit-scrollbar {
       width: 10px;
       background: rgba(6, 29, 51, 0.8);
@@ -622,6 +618,45 @@
 
 // 巡检巡查table样式修改
 .map-bottom-wrapper {
+  .el-table {
+    .el-table__body-wrapper {
+      // 滚动条样式
+      &::-webkit-scrollbar {
+        width: 10px;
+        // background: rgba(6, 29, 51, 0.8);
+
+        // position: absolute;
+        // top: 0;
+      }
+      &::-webkit-scrollbar-thumb {
+        /*滚动条里面小方块*/
+        // border-radius: 10px;
+        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+        background: #00000053;
+
+        border-radius: 8px;
+      }
+      &::-webkit-scrollbar-track {
+        /*滚动条里面轨道*/
+        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+        // border-radius: 10px;
+        // background-color: red;
+      }
+
+      &::-webkit-scrollbar-button:start {
+        overflow: hidden;
+      }
+      &::-webkit-scrollbar-button:end {
+        overflow: hidden;
+      }
+    }
+  }
+  .el-table::before {
+    height: 0px;
+  }
+  .el-table__fixed::before {
+    height: 0px;
+  }
   .el-table__header {
     tr th {
       background-color: rgba(24, 144, 255, 0.1);

gassafetyprogress-web/src/utils/mapClass/config.js

 /*
  * @Author: your name
  * @Date: 2022-01-26 10:47:44
- * @LastEditTime: 2022-03-23 15:26:48
+ * @LastEditTime: 2022-04-14 15:38:29
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/config.js
@@ -13,6 +13,8 @@ export const pipeColor = {
   2: "#FFFFFF",
   3: "#18FF0F",
   4: "#DE67FA",
+  // 运行监控-巡检巡查的线条颜色
+  5: "#1890FF",
 };
 export const pipePressure = {
   1: "低压",
@@ -48,6 +50,10 @@ export const svgUrl = {
   16: require("@/assets/image/yj-xj.png"),
   //煤气罐罐  运行监测   气瓶回溯
   17: require("@/assets/mapinages/meiqiguan.svg"),
+
+  // 巡检巡查
+  98: require("@/assets/image-xjxc/start.svg"),
+  99: require("@/assets/image-xjxc/end.svg"),
 };
 export const svgAlarm = {
   2: require("@/assets/mapImages/tyxAlarm.svg"),

gassafetyprogress-web/src/utils/mapClass/map.js

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:45:12
- * @LastEditTime: 2022-03-22 10:35:13
+ * @LastEditTime: 2022-04-14 15:36:25
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/mapClass.js
@@ -419,7 +419,7 @@ export class EditorMap {
     const color = pipeColor[pipePressure + 1];
     const pipe = this.createPipeLine({
       path: eval(path),
-      strokeWeight: 4,
+      strokeWeight: objData.strokeWeight||4,
       strokeColor: color,
       extData: objData,
       cursor: "pointer",
@@ -444,6 +444,7 @@ export class EditorMap {
       // 获取当前颜色
       const options = target.getOptions();
       options.strokeColor = "blue";
+      // options.strokeWeight =4;
       target.setOptions(options);
     });
 
@@ -452,9 +453,12 @@ export class EditorMap {
       // 根据管道压力获取颜色
       const { pipePressure } = target.getExtData();
       const color = pipeColor[pipePressure + 1];
+
       // 获取当前颜色
       const options = target.getOptions();
       options.strokeColor = color;
+      // options.strokeWeight =2;
+
       target.setOptions(options);
     });
     pipe.on("click", (e) => {

gassafetyprogress-web/src/utils/mapClass/xjxcmap.js

 /*
  * @Author: your name
  * @Date: 2022-04-13 09:42:29
- * @LastEditTime: 2022-04-13 10:03:22
+ * @LastEditTime: 2022-04-14 16:22:10
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/utils/mapClass/xjxjmap.js
  */
-import {EditorMap} from "./map"
+import { EditorMap } from "./map";
 export class XjxcMap extends EditorMap {
-  constructor(contaienr, config = {}, vue){
-    super(contaienr, config = {}, vue)
+  iconType1 = 98;
+  iconType2 = 99;
+  iconType3 = 0;
+  constructor(contaienr, config = {}, vue) {
+    super(contaienr, (config = {}), vue);
   }
+  create(data, componentDevice, componentPipe) {
+    const path = eval(data.path);
+    if (path.length < 1) return;
+    console.log(path);
+    // 开头
+    const deviceData1 = {
+      longitude: path[0][0],
+      latitude: path[0][1],
+      iconType: this.iconType1,
+    };
+    // 结尾
+    const deviceData2 = {
+      longitude: path[path.length - 1][0],
+      latitude: path[path.length - 1][1],
+      iconType: this.iconType2,
+    };
+    // 路线
+    const pipeData = {
+      title:data.title ||"中燃科技",
+      path,
+      iconType: this.iconType3,
+      pipePressure: 4,
+      strokeWeight: 2,
+    };
 
+    this.addPipeLine(pipeData, componentPipe);
+    this.addDevice(deviceData1, componentDevice);
+    this.addDevice(deviceData2, componentDevice);
+    // // 前取整
+    const num = path.length >> 1;
 
+    this.map.panTo(path[num]);
+  }
+  remove() {
+    if (this.allDevice[98]?.length > 0) {
+      this.map.remove(this.allDevice[98][0]);
+      this.allDevice[98] = [];
+      this.map.remove(this.allDevice[99][0]);
+      this.allDevice[99] = [];
+      this.map.remove(this.pipeArr[0][0]);
+      this.pipeArr[0] = [];
+    }
+  }
 }
-

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Pipe.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-14 15:49:20
+ * @LastEditTime: 2022-04-14 17:35:00
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Pipe.vue
+-->
+<template>
+  <div class="pipe-wrapper">
+    <div class="top">
+      <div class="title">{{ deviceData.title }}</div>
+      <div class="close" @click="close">
+        <img src="@/assets/image-xjxc/close.png" alt="" />
+      </div>
+    </div>
+
+    <div class="bottom">
+      <div class="ele flex">
+        <div class="left zzz">任务标题</div>
+        <div class="right zzz">中燃翔科测试</div>
+      </div>
+      <div class="ele flex">
+        <div class="left zzz">任务类型</div>
+        <div class="right zzz">入户安检</div>
+      </div>
+      <div class="ele flex">
+        <div class="left zzz">任务内容</div>
+        <div class="right zzz">巡检巡查</div>
+      </div>
+      <div class="ele flex">
+        <div class="left zzz">执行单位</div>
+        <div class="right zzz">中燃翔科</div>
+      </div>
+      <div class="ele flex">
+        <div class="left zzz">执行人</div>
+        <div class="right zzz">林俊杰</div>
+      </div>
+
+      <div class="ele flex">
+        <div class="left">发现问题</div>
+        <div class="right img-wrapper">
+          <el-image
+            v-if="imgSrc"
+            style="width: 80px; height: 80px"
+            :src="imgSrc"
+            :preview-src-list="[imgSrc]"
+            :z-index="999999"
+          >
+          </el-image>
+          <img v-else src="@/assets/image-xjxc/nomal.jpg" alt="" />
+        </div>
+      </div>
+      <div class="ele flex">
+        <div class="left zzz">问题描述</div>
+        <div title="还没有找到问题原因" class="right zzz">还没有找到问题原因</div>
+      </div>
+      <div class="ele flex end">
+        <div class="left zzz">发现时间</div>
+        <div class="right">2022-01-02 12:12:12</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// deviceData
+export default {
+  data() {
+    return {
+      // imgSrc:
+      //   "http://222.223.203.154:8092/gassafety/profile/upload/2022/04/08/3f197bb6-ad51-43df-aded-e1b005008ad6.jpg",
+    };
+  },
+  methods: {
+    close() {
+      this.mapClass.infowindowClose();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pipe-wrapper {
+  width: 268px;
+  padding: 10px 0 12px;
+  background-color: #fff;
+  box-sizing: border-box;
+  box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+  position: relative;
+  &::before {
+    content: "";
+    border-style: solid;
+    border-width: 9px 13px 9px 7px;
+    border-color: transparent #fff transparent transparent ;
+    position: absolute;
+    left:-20px;
+    top:50%;
+    margin-top:-9px;
+  }
+  .top {
+    box-sizing: border-box;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #c4c4c4;
+    .title {
+      padding-left: 21px;
+      color: #1d8cf3;
+      font-size: 14px;
+      font-weight: 500;
+    }
+    .close {
+      position: absolute;
+      width: 13px;
+      height: 13px;
+      right: 10px;
+      top: 13px;
+      cursor: pointer;
+      img {
+        width: 100%;
+      }
+    }
+  }
+  .bottom {
+    padding: 10px 15px 0px 21px;
+    .ele {
+      font-size: 12px;
+      padding-bottom: 4px;
+      border-bottom: 1px dashed #ececec;
+      margin-bottom: 5px;
+      > div {
+        width: 80px;
+        color: #333333;
+        &.right {
+          text-align: left;
+        }
+        &.img-wrapper {
+          height: 80px;
+        }
+      }
+      &.end {
+        border-bottom: 0px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-11 14:11:04
- * @LastEditTime: 2022-04-13 10:34:15
+ * @LastEditTime: 2022-04-14 10:45:52
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue