clone暂时取消

gassafety-web/src/components/PopWindow/lineInfoWindow.vue

@@ -30,7 +30,7 @@
           <div class="eq-text">
             <span>管道压力：</span>
             <span>{{
-              ["低押", "中压", "次高压", "高压"][obj.pipePressure - 1]
+              ["低压", "中压", "次高压", "高压"][obj.pipePressure - 1]
             }}</span>
           </div>
         </div>

gassafety-web/src/components/PopWindowGis/lineInfoWindow.vue

+<template>
+  <div class="wrapper">
+    <div class="top display-default">
+      <div class="left text">{{ obj.pipeName }}</div>
+      <div class="right text">
+        <img @click="close" src="../../assets/images/closeBtn.png" alt="" />
+      </div>
+    </div>
+
+    <!-- 设备信息 -->
+    <div class="content">
+      <div class="eq-content display-default">
+        <div class="text-wrapper">
+          <!-- <div :title="obj.pipeName" class="eq-text">
+          <span>管道名称：</span>
+          <span>{{ obj.pipeName }}</span>
+        </div> -->
+          <div class="eq-text">
+            <span>管道编号：</span>
+            <span>{{ obj.pipeCode }} </span>
+          </div>
+          <div class="eq-text">
+            <span>管道长度：</span>
+            <span>{{ `${obj.pipeLength ? obj.pipeLength + "米" : ""}` }}</span>
+          </div>
+          <div class="eq-text">
+            <span>管道类型：</span>
+            <span>{{ ["地埋管线", "地表管线"][obj.pipeType - 1] }}</span>
+          </div>
+          <div class="eq-text">
+            <span>管道压力：</span>
+            <span>{{
+              ["低压", "中压", "次高压", "高压"][obj.pipePressure - 1]
+            }}</span>
+          </div>
+        </div>
+
+        <div class="pic">
+          <!-- <img :src="obj.iconUrl" alt="" /> -->
+          <el-image
+            @mouseover="mousedown"
+            id="img"
+            ref="previewImg"
+            :src="obj.iconUrl"
+            :preview-src-list="bigImageArr"
+            :z-index="9999999"
+          ></el-image>
+        </div>
+      </div>
+
+      <div class="maintain-content">
+        <div>
+          <span>管道所在地址：</span>
+          <span>{{ obj.pipeAddr }}</span>
+        </div>
+        <div>
+          <span>安装日期：</span>
+          <span>{{ moment(obj.installationTime).format("YYYY-MM-DD") }}</span>
+        </div>
+        <div>
+          <span>最后巡检日期：</span>
+          <span>{{ obj.inspectionTime }}</span>
+        </div>
+        <div>
+          <span>备注信息：</span>
+          <span>{{ obj.remarks }} </span>
+        </div>
+      </div>
+      <template v-if="!obj.editorPage">
+        <div class="warn-content">
+          <div>报警状态 <span>报警</span></div>
+          <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
+        </div>
+        <div class="btn">
+          <el-button class="elbtn" type="primary">生成工单</el-button>
+        </div>
+      </template>
+    </div>
+
+    <!-- 报警状态 -->
+  </div>
+</template>
+
+<script>
+//line移入时的的infowindow
+import moment from "moment";
+export default {
+  props: {
+    obj: { typs: Object },
+  },
+  created() {
+    console.log("created", this.obj);
+  },
+  mounted() {
+    console.log("stopWindow");
+
+    this.$refs.previewImg.$el.addEventListener("mouseover", (e) => {
+      console.log("11", e);
+      // e.stopPropagation();
+      console.log("stopWindow");
+    });
+  },
+  computed: {
+    bigImageArr() {
+      return [this.dialogImageUrl];
+    },
+  },
+  methods: {
+    moment,
+    mousedown() {
+      console.log("?");
+    },
+    close() {
+      this.obj.polyline.infoWindow.close();
+    },
+    stopWindow() {
+      console.log("阻止window冒泡的图片");
+    },
+    stopw() {
+      console.log("stopwindow");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  width: 406px;
+  // height: 488px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  // overflow: hidden;
+  .top {
+    width: 100%;
+    height: 51px;
+    background-color: #053b6a;
+    .text {
+      font-weight: 600;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 51px;
+    }
+    .left {
+      padding-left: 22px;
+    }
+    .right {
+      padding-right: 22px;
+      img {
+        cursor: pointer;
+      }
+    }
+  }
+  .content {
+    position: relative;
+    max-height: 400px;
+    overflow: hidden;
+    overflow-y: auto;
+    .eq-content {
+      min-height: 156px;
+      box-sizing: border-box;
+      padding: 13px 22px 0px 22px;
+      // border-bottom: 1px solid #e2e2e2;
+      .text-wrapper {
+        padding-top: 1px;
+        & > div {
+          margin-bottom: 6px;
+        }
+        .eq-text {
+          font-size: 14px;
+          font-weight: 400;
+          color: #1d1d1d;
+          opacity: 1;
+          & > span {
+            vertical-align: top;
+            display: inline-block;
+            // white-space: nowrap;
+            // text-overflow: ellipsis;
+            // overflow: hidden;
+            word-break: break-all;
+            max-width: 100px;
+          }
+        }
+      }
+      .pic {
+        width: 177px;
+        height: 129px;
+        // background-color: black;
+        #img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .maintain-content {
+    width: 100%;
+    height: 119px;
+    padding-left: 22px;
+    padding-right: 22px;
+    padding-bottom: 10px;
+    // padding-top: 16px;
+    box-sizing: border-box;
+    // border-bottom: 1px solid #e2e2e2;
+    & > div {
+      margin-bottom: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      span {
+        vertical-align: top;
+        display: inline-block;
+        word-break: break-all;
+        max-width: 250px;
+      }
+    }
+  }
+
+  .warn-content {
+    height: 82px;
+    box-sizing: border-box;
+    padding: 8px 0 0 22px;
+    border-bottom: 1px solid #e2e2e2;
+    & > div {
+      font-size: 14px;
+      font-weight: 400;
+      margin-bottom: 8px;
+    }
+  }
+  .btn {
+    padding-top: 32px;
+    text-align: center;
+    .elbtn {
+      background-color: #053b6a;
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+      width: 95px;
+      height: 33px;
+    }
+  }
+}
+
+.wrapperEditorPage {
+}
+.display-default {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

gassafety-web/src/components/PopWindowGis/workerManView.vue

@@ -4,16 +4,19 @@
     :visible.sync="dialogVisible"
     :before-close="handleClose"
   >
-    <div>
-      <el-date-picker
-        v-model="dateValue"
-        type="datetimerange"
-        range-separator="至"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-      >
-      </el-date-picker>
-    </div>
+    <el-form>
+      <el-form-item label="选择时间段:" prop="">
+        <el-date-picker
+          v-model="dateValue"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </el-form-item>
+    </el-form>
+
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button :loading="okLoading" type="primary" @click="ok"
@@ -23,31 +26,69 @@
   </el-dialog>
 </template>
 <script>
-import MyFileUpload from "@/components/MyFileUpload";
-import { addPipe, updatePipe } from "@/api/device/pipe.js";
-import { getString } from "@/utils/gassafety.js";
 import moment from "moment";
+import { getInspectorLocations } from "@/api/inspectorLocation/location";
+
 export default {
   props: {
-    id: {
+    userId: {
+      type: Number,
+    },
+    title: {
       type: String,
     },
-    title:{
-      type:String,
-    }
+    target: {
+      type: Object,
+    },
+    gaodeMap: {
+      type: Object,
+    },
   },
 
   components: {},
   data() {
     return {
       dialogVisible: false,
-      dateValue:"",
+      dateValue: "",
+      okLoading: false,
+      formData: {},
     };
   },
-  computed: {},
-  created() {},
+
+  created() {
+    this.formData.userId = this.userId;
+  },
+
   methods: {
-    ok() {},
+    ok() {
+      this.okLoading = true;
+
+      this.formData.beginTime = moment(this.dateValue[0]).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      this.formData.endTime = moment(this.dateValue[1]).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      getInspectorLocations(this.formData).then((res) => {
+        if (res.code == 200) {
+          let arr = res.data.map((res) => {
+            return [res.longitude, res.latitude];
+          });
+          arr = arr.sort((a, b) => {
+            return -1;
+          });
+          this.okLoading = false;
+          this.$message({
+            type: "success",
+            // center:true,
+            offset: 100,
+            message: res.msg,
+          });
+          this.dialogVisible=false;
+          this.gaodeMap.trackBack(this.target, arr);
+        }
+      });
+    },
     async requeset(id, data) {
       id ? console.log("修改") : console.log("新增");
       return id ? updatePipe(data) : addPipe(data);

gassafety-web/src/utils/gaodeMapView.js

@@ -3,7 +3,7 @@ import regulatorBox from "../components/PopWindow/regulatorBox.vue";
 import valveWell from "../components/PopWindow/valveWell.vue";
 import flowMeter from "../components/PopWindow/flowMeter.vue";
 import pipelineView from "../components/PopWindow/pipelineView.vue";
-import lineInfoWindow from "../components/PopWindow/lineInfoWindow.vue";
+import lineInfoWindow from "../components/PopWindowGis/lineInfoWindow.vue";
 import { delDeviceInfo } from "@/api/device/deviceInfo";
 import markerInfoWindow from "../components/PopWindow/markerInfoWindow.vue";
 import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.vue";
@@ -178,8 +178,20 @@ class gaodeMap {
     // 值班人员的marker
     if (DEVICE_TYPE.INSPECTOR == markerType) {
       // 存值
-      const { createTime, locationId, longitude, latitude } = data;
-      marker.setExtData({ createTime, locationId, pos: [longitude, latitude] });
+      const {
+        createTime,
+        locationId,
+        longitude,
+        latitude,
+        userId,
+        type
+      } = data;
+      marker.setExtData({
+        createTime,
+        locationId,
+        pos: [longitude, latitude],
+        deviceType: type
+      });
       // 值班人员的事件
 
       // marker.on("click", e => {
@@ -192,18 +204,20 @@ class gaodeMap {
         e.target.content = this.getMarketContent(data);
         infoWindow.setContent(e.target.content);
         infoWindow.open(map, e.target.getPosition());
-        that.addCloneDome(e.target, infoWindow);
+        // that.addCloneDome(e.target, infoWindow);
         // infoWindow.close();
         that.workerManInfoWindow = infoWindow;
       });
       marker.on("mousedown", e => {
+        console.log(data);
         that.closeInfoWindow();
-        that.workerManView({title:"值班人员轨迹回放"});
-
-
+        that.workerManView({
+          title: "值班人员轨迹回放",
+          target: marker,
+          userId
+        });
       });
     }
-
     if (
       DEVICE_TYPE.WORKORDER != markerType &&
       DEVICE_TYPE.INSPECTOR != markerType
@@ -293,7 +307,7 @@ class gaodeMap {
       map.setStatus(options);
       infoWindow.setContent(e.target.content);
       infoWindow.open(map, e.target.getPosition());
-      that.addCloneDome(e.target, infoWindow);
+      // that.addCloneDome(e.target, infoWindow);
       // infoWindow.close();
 
       that.markerInfoWindow = infoWindow;
@@ -470,11 +484,66 @@ class gaodeMap {
       // target: options.obj,
       ...options,
       //把当前对象当作that传进去
-      gaodeMap: this,
+      gaodeMap: this
       // lineOkCallBack: this.lineOkCallBack
     });
     notice.show();
   }
+  //
+  trackBack(marker, arr) {
+    // 值班人员轨迹回放
+    AMap.plugin("AMap.MoveAnimation", function() {
+      let lineArr = arr;
+      marker.moveMarker && map.remove(marker.moveMarker);
+      marker.polyline && map.remove(marker.polyline);
+      marker.passedPolyline && map.remove(marker.passedPolyline);
+
+      let icon = new AMap.Icon({
+        //size: new AMap.Size(51, 23),
+        image: require("../assets/images/zhibanrenyuan.png")
+      });
+      marker.moveMarker = new AMap.Marker({
+        map: map,
+        position: lineArr[0],
+        icon,
+        offset: new AMap.Pixel(-13, -26)
+      });
+
+      marker.polyline = new AMap.Polyline({
+        map: map,
+        path: lineArr,
+        showDir: true,
+        strokeColor: "#28F", //线颜色
+        // strokeOpacity: 1,     //线透明度
+        strokeWeight: 6 //线宽
+        // strokeStyle: "solid"  //线样式
+      });
+
+      marker.passedPolyline = new AMap.Polyline({
+        map: map,
+        strokeColor: "#AF5", //线颜色
+        strokeWeight: 6 //线宽
+      });
+
+      marker.moveMarker.on("moving", function(e) {
+        marker.passedPolyline.setPath(e.passedPath);
+      });
+      marker.moveMarker.on("moveend", e => {
+        e.index == lineArr.length - 1 && map.remove(marker.moveMarker);
+      });
+      marker.moveMarker.on("moveAlong", () => {
+        console.log(e);
+      });
+      marker.moveMarker.moveAlong(lineArr, {
+        // 每一段的时长
+        duration: 1200,
+        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+        autoRotation: false
+      });
+      // map.setFitView();
+    });
+  }
+
   /**
    * 添加折线
    * @param path
@@ -589,7 +658,7 @@ class gaodeMap {
         // this.removeCloneDom();
         // document.body.appendChild(polyline.cloneDom);
         // infoWindow.close();
-        this.addCloneDome(polyline, infoWindow);
+        // this.addCloneDome(polyline, infoWindow);
         // infoWindow.close();
         this.showInfoWindow = infoWindow;
         // const
@@ -607,6 +676,7 @@ class gaodeMap {
   }
   // 把map里的in佛window转化成vue里的dom
   addCloneDome(target, infoWindow) {
+    
     target.cloneDom = infoWindow.dom.cloneNode(true);
 
     target.cloneDom.style.top = infoWindow.dom.offsetTop + 80 + "px";
@@ -618,7 +688,7 @@ class gaodeMap {
     this.cloneDom = target.cloneDom;
     this.cloneDom.addEventListener("mousedown", e => {
       // e.stopPropagation();
-      console.log("this");
+      // console.log("this");
     });
 
     infoWindow.close();
@@ -740,6 +810,18 @@ class gaodeMap {
     this.markers.forEach(item => {
       const { deviceType } = item.getExtData();
       if (deviceType == type) {
+        // 如果是值班人员，还要隐藏身上的线条以及marker
+        if (type == 9) {
+          if (bool) {
+            item.moveMarker && item.moveMarker.show();
+            item.polyline && item.polyline.show();
+            item.passedPolyline && item.passedPolyline.show();
+          } else {
+            item.moveMarker && item.moveMarker.hide();
+            item.polyline && item.polyline.hide();
+            item.passedPolyline && item.passedPolyline.hide();
+          }
+        }
         bool ? item.show() : item.hide();
       }
       // //console.log("deviceType",deviceType);
@@ -794,7 +876,6 @@ class gaodeMap {
       let opstions = item.getExtData();
       opstions.isState = 0;
       item.setExtData(opstions);
-
       let attr = item.getOptions();
       attr.strokeColor = "#F7FE38";
       item.setOptions(attr);

gassafety-web/src/utils/submitForm.js

+import { Message } from 'element-ui';
+
+// 提交通用
+export const submitForm = async (run, params) => {
+  const hide = Message.loading("正在提交", 1);
+  try {
+    hide.close()
+    const res = await run(params);
+    // console.log(res.code);
+    // console.log("res99",res)
+    if (res.code === 200) {
+      if (res.data === -1) {
+        Message.error(res.message);
+        return false;
+      }
+      Message.success(res.message);
+      return true;
+    }
+    return false;
+  } catch (error) {
+    hide.close();
+    Message.error("提交失败,请重试！");
+    return false;
+  }
+};
\ No newline at end of file

gassafety-web/src/views/enterprise/mapView/index.vue

@@ -123,8 +123,7 @@ export default {
       // 1新建，2编辑，3删除,点按钮变色
       targetNum: 0,
       // 左边的bar的active判定
-      leftBarNum: [1, 2, 3, 4, 7],
-
+      leftBarNum: [1, 2, 3, 4, 7, 8, 9],
       // 新建里的值
       iconClass: "icon-create",
       createValue: 0,
@@ -155,27 +154,22 @@ export default {
           icon: "icon-ylb",
           label: "压力表",
         },
+        {
+          value: 8,
+          icon: "icon-yh",
+          label: "隐患",
+        },
+        {
+          value: 9,
+          icon: "icon-zhibanrenyuan",
+          label: "值班人员",
+        },
       ],
       keyWord: "",
       // 右下角的数据data
       rightBototmData: [],
     };
   },
-  async created() {
-    await countPipeLength().then((res) => {
-      // console.log("管道管道管道管道管道管道", res);
-      const obj = { number: res.data, type: "99" };
-      this.rightBototmData.push(obj);
-    });
-    await countDeviceByType().then((res) => {
-      // console.log("markerresresresresresresresresresresresres", res);
-      this.rightBototmData.push(...res.data);
-    });
-    // 值班人员
-    this.getInspectorLocations();
-
-    console.log(this.rightBototmData);
-  },
   mounted() {
     this.initMap();
   },
@@ -188,6 +182,22 @@ export default {
       gaoMap.searchTips("tipinput");
       this.getDeviceInfo();
       this.getPipeList();
+      // 右下角数据
+      this.rightBottomData();
+    },
+    // 右下角数据
+    async rightBottomData() {
+      await countPipeLength().then((res) => {
+        // console.log("管道管道管道管道管道管道", res);
+        const obj = { number: res.data, type: "99" };
+        this.rightBototmData.push(obj);
+      });
+      await countDeviceByType().then((res) => {
+        // console.log("markerresresresresresresresresresresresres", res);
+        this.rightBototmData.push(...res.data);
+      });
+      // 值班人员
+      this.getInspectorLocations();
     },
     // 左边的Bar修改值
     leftBarChange(item) {
@@ -233,6 +243,12 @@ export default {
       } else {
         this.gaoMap.markerShow(4, false);
       }
+
+      if (this.leftBarNum.includes(9)) {
+        this.gaoMap.markerShow(9, true);
+      } else {
+        this.gaoMap.markerShow(9, false);
+      }
     },
     addDevice() {
       if (this.iconClass == "icon-create") {
@@ -383,7 +399,9 @@ export default {
         if (res.code == 200) {
           console.log(" 值班人员", res);
           for (var i = 0; i < res.data.length; i++) {
-            this.gaoMap.addMarker(DEVICE_TYPE.INSPECTOR, res.data[i]);
+            let options = res.data[i];
+            options.type = 9;
+            this.gaoMap.addMarker(DEVICE_TYPE.INSPECTOR, options);
           }
         }
       });
@@ -401,6 +419,7 @@ export default {
       this.gaoMap.mapOperateType = "normal";
       // map.remove(this.gaodeMap.markerOverlays);
     },
+    // 搜索
     search() {
       this.searchClear();
       map.clearMap();
@@ -418,10 +437,13 @@ export default {
         this.getDeviceInfo({ deviceName: this.keyWord });
         this.gaoMap.polyLines = [];
         this.getPipeList({ pipeName: this.keyWord });
+        // 值班人员
+        this.getInspectorLocations();
       }
     },
     // 新建下拉列表关闭 window点击事件
     barClose() {
+      // return;
       console.log("window");
       this.deviceType = false;
       // 关闭当前线条的infowindow
@@ -443,6 +465,7 @@ export default {
       this.targetNum = 0;
       map.clearMap();
       this.initMap();
+      this.leftBarNum = [1, 2, 3, 4, 7, 8, 9];
     },
   },