Merge branch 'develop_jzl'

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

@@ -107,6 +107,7 @@ export default {
   methods: {
     moment,
     mousedown(e) {
+      console.log("?")
       return;
       // console.log(this.$refs.previewImg)
       this.$refs.previewImg.showViewer = true;

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

@@ -107,6 +107,7 @@ export default {
   methods: {
     moment,
     mousedown(e) {
+      console.log("??")
       return;
       // console.log(this.$refs.previewImg)
       this.$refs.previewImg.showViewer = true;

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

+<template>
+  <div @mousedown.stop="deleteLine" class="wrapper">
+    <el-button type="danger" icon="el-icon-delete" circle></el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    map: {
+      type: Object,
+    },
+    marker: {
+      type: Object,
+    },
+  },
+  created() {
+
+  },
+  methods: {
+    deleteLine() {
+      // console.log("999999")
+      this.map.workerManAttrRemove(this.marker);
+      this.marker.infoWindow.close();
+      
+    },
+  },
+};
+</script>
+
+<style  lang="scss" scoped>
+.wrapper {
+  width: 36px;
+  height: 36px;
+  // background: #fff;
+}
+</style>
\ No newline at end of file

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

 <template>
   <div class="wrapper">
-    <span class="left">高雄高雄:</span>
-    <span class="right">2019-99-99 15:21:21</span>
+    <span class="left">{{data.userName}}:</span>
+    <span class="right">{{data.createTime}}</span>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  props:{
+    data:{
+      type:Object
+    }
+  },
+  created(){
+    console.log("data",this.data)
+  }
+
+};
 </script>
 
 <style  lang="scss" scoped>

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

@@ -4,17 +4,61 @@
     :visible.sync="dialogVisible"
     :before-close="handleClose"
   >
-    <el-form>
-      <el-form-item label="选择时间段:" prop="">
-        <el-date-picker
+    <el-form :model="formData" ref="formData" :rules="rules">
+      <!-- <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-date-picker> -->
+      <!-- </el-form-item> -->
+      <el-row>
+        <el-col :span="11">
+          <el-form-item label="选择值班人员:" prop="userId">
+            <el-select
+              style="width: 220px"
+              v-model="formData.userId"
+              filterable
+              placeholder="请选择"
+              @change="selectChange"
+            >
+              <el-option
+                v-for="item in workerManArr"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="11">
+          <el-form-item label="选择开始时间:" prop="beginTime">
+            <el-date-picker
+              v-model="formData.beginTime"
+              type="datetime"
+              placeholder="选择开始时间"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="11">
+          <el-form-item label="选择结束时间:" prop="endTime">
+            <el-date-picker
+              v-model="formData.endTime"
+              type="datetime"
+              placeholder="选择结束时间"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
 
     <span slot="footer" class="dialog-footer">
@@ -51,41 +95,90 @@ export default {
       dialogVisible: false,
       dateValue: "",
       okLoading: false,
-      formData: {},
+      formData: {
+        userId: null,
+      },
+      workerManArr: [],
+
+      rules: {
+        userId: [
+          { required: true, message: "请选择值班人员", trigger: "blur" },
+        ],
+        beginTime: [
+          { required: true, message: "请输入开始时间", trigger: "blur" },
+        ],
+        endTime: [
+          { required: true, message: "请输入结束时间", trigger: "blur" },
+        ],
+      },
     };
   },
 
   created() {
     this.formData.userId = this.userId;
+    this.workerManArr = this.gaodeMap.workerManArr.map((item) => ({
+      label: item.userName,
+      value: item.userId,
+    }));
   },
 
   methods: {
+    // 下拉框选项
+    selectChange(e) {
+      console.log(e);
+      this.formData.userId = e;
+    },
     ok() {
-      this.okLoading = true;
+      this.$refs.formData.validate((valid) => {
+        if (valid) {
+          this.okLoading = true;
+          this.formData.beginTime = moment(this.formData.beginTime).format(
+            "YYYY-MM-DD HH:mm:ss"
+          );
+          this.formData.endTime = moment(this.formData.endTime).format(
+            "YYYY-MM-DD HH:mm:ss"
+          );
+          console.log(this.formData);
 
-      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,
+          // 找到哪个值班人员
+          const target = this.gaodeMap.workerManMarkArr.filter((item) => {
+            // console.log("userId",item.getExtData().userId)
+            return item.getExtData().userId == this.formData.userId;
+          })[0];
+          console.log("target.moveMarker", target.moveMarker);
+          getInspectorLocations(this.formData).then((res) => {
+            if (res.code == 200) {
+              // 如果这个时间段没有移动轨迹
+              if (res.data.length < 1) {
+                this.$message({
+                  type: "warn",
+                  // center:true,
+                  offset: 100,
+                  message: "该时间段无移动轨迹",
+                });
+                this.okLoading = false;
+                return;
+              }
+              let arr = res.data.map((res) => {
+                return [res.longitude, res.latitude];
+              });
+              arr = arr.sort((a, b) => {
+                return -1;
+              });
+              let data = res.data.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(target, arr,data)
+            }
           });
-          this.dialogVisible=false;
-          this.gaodeMap.trackBack(this.target, arr);
         }
       });
     },

gassafety-web/src/utils/gaodeMapView.js

@@ -5,6 +5,7 @@ import flowMeter from "../components/PopWindow/flowMeter.vue";
 import pipelineView from "../components/PopWindow/pipelineView.vue";
 import lineInfoWindow from "../components/PopWindowGis/lineInfoWindow.vue";
 import markerInfoWindow from "../components/PopWindowGis/markerInfoWindow.vue";
+import removeLineInfoWindow from "../components/PopWindowGis/removeLineInfoWindow.vue";
 import markerInfoWindowWarn from "../components/PopWindowGis/markerInfoWindowWarn.vue";
 import lineInfoWindowWarn from "../components/PopWindowGis/lineInfoWindowWarn.vue";
 import { delDeviceInfo } from "@/api/device/deviceInfo";
@@ -26,11 +27,16 @@ export const DEVICE_TYPE = {
   DUTYPERSON: "5",
   WORKORDER: "6",
   PRESSUREGAGE: "7",
-  INSPECTOR: "8"
+  INSPECTOR: "8",
+  SMALLINSPECTOR: "workPoint"
 };
 class gaodeMap {
   // 所有线的数组
   polyLines = [];
+  //值班人员的单独数组，轨迹的时候使用
+  workerManArr = [];
+  // 值班人员对象的arr
+  workerManMarkArr = [];
   // 是否开启新增
   lineType = 0;
   // 创建一个新的lineObj
@@ -40,6 +46,8 @@ class gaodeMap {
   mouseTool = null;
   myMap = null;
   showInfoWindow = null;
+  // 工人轨迹用的窗口
+  markerPassedPolylineInfoWindow=null;
 
   //构造函数中设置中央点默认值
   constructor(center) {
@@ -179,7 +187,10 @@ class gaodeMap {
     this.setMarkerIcon(marker);
 
     // 值班人员的marker
-    if (DEVICE_TYPE.INSPECTOR == markerType) {
+    if (
+      DEVICE_TYPE.INSPECTOR == markerType ||
+      DEVICE_TYPE.SMALLINSPECTOR == markerType
+    ) {
       // 存值
       const {
         createTime,
@@ -193,7 +204,8 @@ class gaodeMap {
         createTime,
         locationId,
         pos: [longitude, latitude],
-        deviceType: type
+        deviceType: type,
+        userId
       });
       // 值班人员的事件
 
@@ -207,7 +219,7 @@ class gaodeMap {
         e.target.content = this.getMarketContent(data);
         infoWindow.setContent(e.target.content);
         infoWindow.open(map, e.target.getPosition());
-        that.boxCollision(infoWindow.dom)
+        that.boxCollision(infoWindow.dom);
         // that.addCloneDome(e.target, infoWindow);
         // infoWindow.close();
         that.workerManInfoWindow = infoWindow;
@@ -215,16 +227,22 @@ class gaodeMap {
       marker.on("mousedown", e => {
         console.log(data);
         that.closeInfoWindow();
+        if (marker.workerPoint) return;
         that.workerManView({
           title: "值班人员轨迹回放",
           target: marker,
           userId
         });
       });
+      // workerPoint不加入数组
+      if (!marker.workerPoint) {
+        this.workerManMarkArr.push(marker);
+      }
     }
     if (
       DEVICE_TYPE.WORKORDER != markerType &&
-      DEVICE_TYPE.INSPECTOR != markerType
+      DEVICE_TYPE.INSPECTOR != markerType &&
+      DEVICE_TYPE.SMALLINSPECTOR != markerType
     ) {
       marker.content = this.getMarketContent(data);
       marker.on("mouseover", infoOpen);
@@ -292,8 +310,11 @@ class gaodeMap {
       });
     }
 
-    this.markers.push(marker);
-    map.setZoom("11");
+    // 如果这个值为false说明不是workerpoint，就push进去
+    if (!marker.workerPoint) {
+      this.markers.push(marker);
+      map.setZoom("11");
+    }
     //map.setFitView();
 
     function infoClose(e) {
@@ -313,12 +334,14 @@ class gaodeMap {
       infoWindow.open(map, e.target.getPosition());
 
       // 检测是否碰到底部的bottomData
-      that.boxCollision(infoWindow.dom)
+      that.boxCollision(infoWindow.dom);
       // that.addCloneDome(e.target, infoWindow);
       // infoWindow.close();
 
       that.markerInfoWindow = infoWindow;
     }
+
+    return marker;
   }
 
   /**
@@ -346,7 +369,6 @@ class gaodeMap {
   getMarketContent(data) {
     // let markerInfoWindow = markerInfoWindowWarn;
     switch (this.markerType) {
-
       case DEVICE_TYPE.REGEULATORBOX: {
         const dom = createPop(markerInfoWindow, {
           title: "调压箱",
@@ -397,6 +419,17 @@ class gaodeMap {
         dom.remove();
         return html;
       }
+      //值班人员的轨迹的点
+      case DEVICE_TYPE.SMALLINSPECTOR: {
+        const dom = createPop(workerManInfowindow, {
+          title: "值班人员",
+          data: data,
+          map: map
+        });
+        const html = dom.$el;
+        dom.remove();
+        return html;
+      }
     }
   }
 
@@ -478,6 +511,15 @@ class gaodeMap {
         marker.setIcon(icon);
         break;
       }
+      case DEVICE_TYPE.SMALLINSPECTOR: {
+        let icon = new AMap.Icon({
+          opacity: 0.1,
+          image: require("../assets/images/zhibanrenyuan.png")
+        });
+        marker.workerPoint = true;
+        marker.setIcon(icon);
+        break;
+      }
     }
   }
 
@@ -499,16 +541,15 @@ class gaodeMap {
     notice.show();
   }
   //
-  trackBack(marker, arr) {
+  trackBack(marker, arr, data) {
     // 值班人员轨迹回放
-    AMap.plugin("AMap.MoveAnimation", function() {
+    AMap.plugin("AMap.MoveAnimation", () => {
       let lineArr = arr;
-      marker.moveMarker && map.remove(marker.moveMarker);
-      marker.polyline && map.remove(marker.polyline);
-      marker.passedPolyline && map.remove(marker.passedPolyline);
-
+      // 各种属性清空
+      this.workerManAttrRemove(marker);
       let icon = new AMap.Icon({
         //size: new AMap.Size(51, 23),
+        opacity: 0.1,
         image: require("../assets/images/zhibanrenyuan.png")
       });
       marker.moveMarker = new AMap.Marker({
@@ -534,14 +575,46 @@ class gaodeMap {
         strokeWeight: 6 //线宽
       });
 
+      // removeLineInfoWindow
+      
+      marker.passedPolyline.on("mouseover", e => {
+        const dom = createPop(removeLineInfoWindow, {
+          map:this,marker
+        });
+        marker.infoWindow = new AMap.InfoWindow({
+          isCustom: true,
+          autoMove: false,
+          content: dom.$el,
+          //信息船体偏移量
+          // offset: new AMap.Pixel(20, 20),
+          anchor: "left-top"
+        });
+        marker.infoWindow.open(map, e.lnglat);
+        // infoWindow.on("mousedown",(e)=>{
+        //   e.stopPropagation();
+
+        // })
+        this.markerPassedPolylineInfoWindow = infoWindow;
+        console.log(e.lnglat);
+      });
+
       marker.moveMarker.on("moving", function(e) {
         marker.passedPolyline.setPath(e.passedPath);
       });
+      // 刚开始的时候要立个点
+      let workPoint = this.addMarker(DEVICE_TYPE.SMALLINSPECTOR, data[0]);
+      marker.pointArr.push(workPoint);
       marker.moveMarker.on("moveend", e => {
-        e.index == lineArr.length - 1 && map.remove(marker.moveMarker);
+        // 如果不是最后一个点，就创建一个新的worderpoint，如果是就不创建，并且把自身删除
+        if (e.index == lineArr.length - 1) {
+          map.remove(marker.moveMarker);
+        } else {
+          workPoint = this.addMarker(DEVICE_TYPE.SMALLINSPECTOR, data[e.index]);
+          marker.pointArr.push(workPoint);
+        }
       });
       marker.moveMarker.on("moveAlong", () => {
-        console.log(e);
+        console.log("moveAlong", e);
       });
       marker.moveMarker.moveAlong(lineArr, {
         // 每一段的时长
@@ -552,6 +625,17 @@ class gaodeMap {
       // map.setFitView();
     });
   }
+  workerManAttrRemove(marker) {
+    marker.moveMarker && map.remove(marker.moveMarker);
+    marker.polyline && map.remove(marker.polyline);
+    marker.passedPolyline && map.remove(marker.passedPolyline);
+    if (marker.pointArr?.length > 0) {
+      marker.pointArr.forEach(item => {
+        map.remove(item);
+      });
+    }
+    marker.pointArr = [];
+  }
 
   /**
    * 添加折线
@@ -626,7 +710,7 @@ class gaodeMap {
           clientHeight: windowClientHeight
         } = document.body;
         // 弹出的信息窗口的宽高
-        
+
         const {
           offsetWidth: infoWindowWidth,
           offsetHeight: infoWindowHeight
@@ -686,32 +770,41 @@ class gaodeMap {
     // map.setFitView();
   }
   // 碰撞检测
-  boxCollision(infowindowDom){
-        // gis地图页面的bottomdata组件
-    const { RightBototmData:{$el:pageDom} } = this.view.$refs;
-    let {offsetTop:ay,offsetLeft:ax,offsetWidth:aw,offsetHeight:ah} = pageDom;
-    let {y:by,x:bx,width:bw,height:bh} = infowindowDom.getBoundingClientRect();
+  boxCollision(infowindowDom) {
+    // gis地图页面的bottomdata组件
+    const {
+      RightBototmData: { $el: pageDom }
+    } = this.view.$refs;
+    let {
+      offsetTop: ay,
+      offsetLeft: ax,
+      offsetWidth: aw,
+      offsetHeight: ah
+    } = pageDom;
+    let {
+      y: by,
+      x: bx,
+      width: bw,
+      height: bh
+    } = infowindowDom.getBoundingClientRect();
     // 如果组件消失了ay回变成0，所以要记录一下，当它为0的时候取记录的值
-    if(ay!=0){
-      this.ay =ay;
-    }else{
-      ay=this.ay;
+    if (ay != 0) {
+      this.ay = ay;
+    } else {
+      ay = this.ay;
     }
-    console.log("ay",ay)
-    if(by+bh>=ay){
-      console.log("隐藏")
+    console.log("ay", ay);
+    if (by + bh >= ay) {
+      console.log("隐藏");
       this.view.bottomDataShow = false;
-    }else{
-      console.log("显示")
+    } else {
+      console.log("显示");
       this.view.bottomDataShow = true;
     }
     // if((by+bh) -ay <0)
-
-
   }
   // 把map里的in佛window转化成vue里的dom
   addCloneDome(target, infoWindow) {
-    
     target.cloneDom = infoWindow.dom.cloneNode(true);
 
     target.cloneDom.style.top = infoWindow.dom.offsetTop + 80 + "px";
@@ -734,6 +827,9 @@ class gaodeMap {
     // 删除浮动到线上的cloneDom
     this.markerInfoWindow && this.markerInfoWindow.close();
     this.workerManInfoWindow && this.workerManInfoWindow.close();
+    // 工人的轨迹线条用的
+    this.markerPassedPolylineInfoWindow && this.markerPassedPolylineInfoWindow.close();
+
   }
   // 关闭转化到vue的dom
   removeCloneDom() {

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

@@ -405,10 +405,13 @@ export default {
         }
       });
     },
+    //值班人员
     getInspectorLocations() {
       getInspectorLocations().then((res) => {
         if (res.code == 200) {
           console.log(" 值班人员", res);
+          // 把值班人员传进类里
+          this.gaoMap.workerManArr = res.data;
           for (var i = 0; i < res.data.length; i++) {
             let options = res.data[i];
             options.type = 9;