基本差不多了

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

@@ -9,10 +9,10 @@
     <!-- 设备信息 -->
     <div class="eq-content display-default">
       <div class="text-wrapper">
-        <div :title="obj.pipeName" class="eq-text">
+        <!-- <div :title="obj.pipeName" class="eq-text">
           <span>管道名称：</span>
           <span>{{ obj.pipeName }}</span>
-        </div>
+        </div> -->
         <div class="eq-text">
           <span>管道编号：</span>
           <span>{{ obj.pipeCode }}</span>
@@ -23,24 +23,27 @@
         </div>
         <div class="eq-text">
           <span>管道类型：</span>
-          <span>{{ ["地埋管线", "地表管线"][obj.pipeType] }}</span>
+          <span>{{ ["地埋管线", "地表管线"][obj.pipeType-1] }}</span>
         </div>
         <div class="eq-text">
           <span>管道压力：</span>
           <span>{{
-            ["低押", "中压", "次高压", "高压"][obj.pipePressure]
+            ["低押", "中压", "次高压", "高压"][obj.pipePressure-1]
           }}</span>
         </div>
       </div>
 
       <div class="pic">
-        <img :src="obj.url" alt="" />
+        <img :src="obj.iconUrl" alt="" />
       </div>
     </div>
 
     <div class="maintain-content">
       <div>
-        安装日期：<span>{{ obj.installationTime }}</span>
+        管道所在地址：<span>{{obj.pipeAddr }}</span>
+      </div>
+      <div>
+        安装日期：<span>{{ moment(obj.installationTime).format("YYYY-MM-DD") }}</span>
       </div>
       <div>
         最后巡检日期：<span>{{ obj.inspectionTime }}</span>
@@ -64,10 +67,17 @@
 
 <script>
 //line移入时的的infowindow
+import moment from "moment"
 export default {
   props: {
     obj: { typs: Object },
   },
+  created(){
+    console.log("created",this.obj)
+  },
+  methods:{
+    moment,
+  }
 };
 </script>
 
@@ -78,7 +88,7 @@ export default {
   background: #fff;
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-  overflow: hidden;
+  // overflow: hidden;
   .top {
     width: 100%;
     height: 51px;
@@ -90,18 +100,18 @@ export default {
       line-height: 51px;
     }
     .left {
-      padding-left: 22px;
+      padding-left: 10px;
     }
     .right {
-      padding-right: 16px;
+      padding-right: 10px;
     }
   }
 
   .eq-content {
     min-height: 156px;
     box-sizing: border-box;
-    padding: 13px 16px 13px 22px;
-    border-bottom: 1px solid #e2e2e2;
+    padding: 13px 10px 0px 10px;
+    // border-bottom: 1px solid #e2e2e2;
     .text-wrapper {
       padding-top: 1px;
       & > div {
@@ -112,7 +122,6 @@ export default {
         font-weight: 400;
         color: #1d1d1d;
         opacity: 1;
-
         & > span {
           display: inline-block;
           white-space: nowrap;
@@ -126,18 +135,21 @@ export default {
     .pic {
       width: 177px;
       height: 129px;
-      background-color: black;
+      // background-color: black;
       img {
         width: 100%;
+        height: 100%;
       }
     }
   }
 
   .maintain-content {
     width: 100%;
-    height: 109px;
-    padding-left: 22px;
-    padding-top: 16px;
+    height: 119px;
+    padding-left: 10px;
+    padding-right:10px;
+    // padding-bottom:10px;
+    // padding-top: 16px;
     box-sizing: border-box;
     border-bottom: 1px solid #e2e2e2;
     & > div {

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

@@ -4,7 +4,7 @@
     :visible.sync="dialogVisible"
     :before-close="handleClose"
   >
-    <el-row >
+    <el-row>
       <el-form
         :rules="rules"
         ref="editForm"
@@ -99,7 +99,11 @@
               @remove="listRemove"
               :fileArr="fileArr"
             />
-            <el-input v-show="false" disabled v-model="editForm.iconUrl"></el-input>
+            <el-input
+              v-show="false"
+              disabled
+              v-model="editForm.iconUrl"
+            ></el-input>
           </el-form-item>
           <!-- <el-form-item v-show="false" label="设备图片路径" prop="iconUrl"> -->
           <!-- </el-form-item> -->
@@ -111,7 +115,7 @@
           <el-form-item label="安装日期" prop="installationTime">
             <el-col :span="11">
               <el-date-picker
-                type="datetime"
+                type="date"
                 placeholder="选择日期"
                 style="width: 100%"
                 v-model="editForm.installationTime"
@@ -141,7 +145,9 @@
 
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
-      <el-button type="primary" @click="ok">确 定</el-button>
+      <el-button :loading="okLoading" type="primary" @click="ok"
+        >确 定</el-button
+      >
     </span>
   </el-dialog>
 </template>
@@ -177,9 +183,10 @@ export default {
   data() {
     return {
       // isShow: false,
+      okLoading: false,
       fileArr: [],
       editForm: {
-        pipeName:"",
+        pipeName: "",
         pipeType: "1",
         pipePressure: "1",
         iconUrl: "",
@@ -227,28 +234,39 @@ export default {
     this.fileArr = this.lineData.pipeId ? [{ url: this.editForm.iconUrl }] : [];
   },
   methods: {
-    mouseup(){
-      console.log('组件mouseup')
+    mouseup() {
+      console.log("组件mouseup");
     },
     ok() {
-      this.$refs.editForm.validate((valid)=>{
-        if(valid){
+      this.$refs.editForm.validate((valid) => {
+        if (valid) {
+          this.okLoading = true;
           const data = { ...this.editForm };
-        data.installationTime = moment(this.editForm.installationTime).format(
-          "YYYY-MM-DD HH:mm:ss"
-        );
-        console.log("data", data);
-        console.log(this.editForm.pipeId);
-        this.requeset(this.editForm.pipeId, data).then((res) => {
-          // 改变this指向，传回去target ，传回去data
-          if (res.code == 200) {
-            this.dialogVisible = false;
-           data.pipeId =data.pipeId ?data.pipeId: res.data;
-            this.lineOkCallBack.call(this.gaodeMap, this.target, data);
-          }
-        });
+          data.installationTime = moment(this.editForm.installationTime).format(
+            "YYYY-MM-DD HH:mm:ss"
+          );
+          console.log("data", data);
+          console.log(this.editForm.pipeId);
+          this.requeset(this.editForm.pipeId, data)
+            .then((res) => {
+              // 改变this指向，传回去target ，传回去data
+              if (res.code == 200) {
+                this.dialogVisible = false;
+                data.pipeId = data.pipeId ? data.pipeId : res.data;
+                this.lineOkCallBack.call(this.gaodeMap, this.target, data);
+                this.$message({
+                  type: "success",
+                  offset: 100,
+                  // center:true,
+                  message: `${this.editForm.pipeId ?"修改管道成功":"添加管道成功"}`,
+                });
+              }
+            })
+            .catch(() => {
+              this.okLoading = false;
+            });
         }
-      })
+      });
       // console.log(this.gaodeMap,this.target)
     },
     async requeset(id, data) {
@@ -270,7 +288,6 @@ export default {
       this.$confirm("确认关闭？")
         .then((_) => {
           done();
-          
         })
         .catch((_) => {});
     },

gassafety-web/src/utils/gaodeMap.js

@@ -27,7 +27,8 @@ class gaodeMap {
   lineType = 0;
   // 创建一个新的lineObj
   newLineObj = null;
-  lineFlag =false;
+  // onceFlag=false;
+  lineFlag = false;
   mouseTool = null;
   myMap = null;
 
@@ -49,36 +50,26 @@ class gaodeMap {
       // mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
     });
     this.myMap = map;
-    this.myMap.on("mousedown", e => {
-      // e.originEvent.stopPropagation();
-      // console.log(this.mouseTool);
-      // this.createNewLine()
-      // console.log(123)
-      // console.log(this.lineFlag)
-      // if (this.lineFlag) {
-      //   return;
-      // }
-      // console.log("this.newLineObj",this.newLineObj)
-      // if (this.newLineObj != null) {
-      //   this.newLineObj.polyEditor.close();
-      //   map.remove(this.newLineObj);
-      //   console.log(this.mouseTool);
-      // }
-      // console.log("map", e);
-    });
+
     this.myMap.on("click", e => {
-      if (this.lineType !=1 ||this.lineFlag) return;
-      console.log(this.lineFlag);
-      // this.lineFlag = false;
-      // this.createNewLine();
-      // console.log("mapUp")
+      // if (this.lineType !=1 || this.lineFlag) return;
+      if (this.lineType != 1 || this.lineFlag) return;
+
       // 除了这里，还要利用vue页面的window事件辅助，当组件出来的时候，就得利用window事件
-      if (this.newLineObj != null) {
-        this.newLineObj.polyEditor.close();
-        map.remove(this.newLineObj);
-        this.createNewLine();
+      if (this.newLineObj) {
+        vue
+          .$confirm("是否重新画管道")
+          .then(() => {
+            this.newLineObj.polyEditor.close();
+            map.remove(this.newLineObj);
+            this.newLineObj = null;
+            this.lineFlag = false;
+            this.createNewLine();
+            console.log("map点击事件新建");
+          })
+          .catch(() => {});
       }
-      console.log("抬起来了");
+      // console.log("抬起来了");
     });
     this.districtBoundaries();
   }
@@ -151,14 +142,17 @@ class gaodeMap {
       offset: new AMap.Pixel(-13, -30)
     });
     this.setMarkerIcon(marker);
-    if(DEVICE_TYPE.WORKORDER != markerType){
+    if (DEVICE_TYPE.WORKORDER != markerType) {
       marker.content = this.getMarketContent(data);
       marker.on("mouseover", infoOpen);
       marker.on("mouseout", infoClose);
       marker.setExtData(data);
       that.deviceType = markerType;
       let editWindow = that.createInfowindow();
-      editWindow.fileArr = data.iconUrl != "" && data.iconUrl != undefined  ? [{ url: data.iconUrl }] : [];
+      editWindow.fileArr =
+        data.iconUrl != "" && data.iconUrl != undefined
+          ? [{ url: data.iconUrl }]
+          : [];
       editWindow.obj = marker;
       editWindow.gaoMap = that;
       editWindow.map = map;
@@ -258,16 +252,15 @@ class gaodeMap {
         return html;
       }
       case DEVICE_TYPE.PRESSUREGAGE: {
-        const dom = createPop(markerInfoWindow,{
+        const dom = createPop(markerInfoWindow, {
           title: "压力表",
           data: data,
-          map:map
+          map: map
         });
         const html = dom.$el;
         dom.remove();
         return html;
       }
-
     }
   }
 
@@ -276,8 +269,13 @@ class gaodeMap {
    * @param delType
    * @param deviceId
    */
-  deleteMarker(delType,deviceId){
-    if(DEVICE_TYPE.REGEULATORBOX == delType || DEVICE_TYPE.VALUEWELL == delType || DEVICE_TYPE.FLOWMETER == delType || DEVICE_TYPE.PRESSUREGAGE == delType){
+  deleteMarker(delType, deviceId) {
+    if (
+      DEVICE_TYPE.REGEULATORBOX == delType ||
+      DEVICE_TYPE.VALUEWELL == delType ||
+      DEVICE_TYPE.FLOWMETER == delType ||
+      DEVICE_TYPE.PRESSUREGAGE == delType
+    ) {
       delDeviceInfo(deviceId);
     }
   }
@@ -331,7 +329,7 @@ class gaodeMap {
       case DEVICE_TYPE.PRESSUREGAGE: {
         let icon = new AMap.Icon({
           //size: new AMap.Size(51, 23),
-          image: require("../assets/images/zhibaorenyuan.png"),
+          image: require("../assets/images/zhibaorenyuan.png")
         });
         marker.setIcon(icon);
         break;
@@ -389,9 +387,6 @@ class gaodeMap {
 
       //添加事件
       polyline.on("mouseover", e => {
-        // console.log("屏幕宽高",document.body.clientWidth,document.body.clientHeight)
-        // console.log('窗口大小',infoWindow.dom.offsetWidth)
-        // console.log("鼠标的位置",e.originEvent.clientX,e.originEvent.clientY);
         // 上方导航的高
         const topBar = 81;
         // 坐标导航的宽
@@ -402,8 +397,7 @@ class gaodeMap {
           clientHeight: windowClientHeight
         } = document.body;
         // 弹出的信息窗口的宽高
-        // const { offsetWidth:infoWindowWidth,offsetHeight:infoWindowHeight} =infoWindow.dom;
-        // 406,316
+
         const {
           offsetWidth: infoWindowWidth,
           offsetHeight: infoWindowHeight
@@ -462,9 +456,10 @@ class gaodeMap {
         //当前line状态 0:正常状态 1:正在编辑状态
         isState: 0
       }
-
       //同Polyline的Option设置
     });
+    // 让它不再等于null
+    // this.newLineObj={a:123}
   }
   // 创建出来的新线归位，重置，当点击编辑跟删除的时候
   newLineReset() {
@@ -473,7 +468,9 @@ class gaodeMap {
       this.mouseTool.close();
     }
     if (this.newLineObj) {
+      this.newLineObj.polyEditor.close();
       map.remove(this.newLineObj);
+      this.newLineObj = null;
     }
   }
   // 新建line增加编辑以及右键菜单
@@ -531,7 +528,7 @@ class gaodeMap {
     // })
     obj.on("mousedown", e => {
       console.log(e.originEvent);
-      console.log("lineType",this.lineType);
+      console.log("lineType", this.lineType);
       this.lineFlag = true;
       // 每次点击关闭然后再次激活
       this.mouseTool.close();
@@ -569,12 +566,30 @@ class gaodeMap {
       }
     });
   }
+  // 隐藏所有管道
+  lineShow(bool) {
+    bool
+      ? this.polyLines.forEach(item => item.show())
+      : this.polyLines.forEach(item => item.hide());
+    if (this.newLineObj) {
+      bool ? this.newLineObj.show() : this.newLineObj.hide();
+    }
+  }
+  markerShow(type, bool) {
+    this.markers.forEach(item => {
+      const { deviceType } = item.getExtData();
+      if (deviceType == type) {
+        bool ? item.show() : item.hide();
+      }
+      // console.log("deviceType",deviceType);
+    });
+  }
   lineDelete(obj) {
     vue
       .$confirm("是否删除该管道", "提示", {
         // confirmButtonText: "确定",
         // cancelButtonText: "取消",
-        type: "warning",
+        type: "warning"
         // center: true
       })
       .then(() => {
@@ -591,6 +606,8 @@ class gaodeMap {
           }
           vue.$message({
             type: "success",
+            offset: 100,
+            // center:true,
             message: "删除成功!"
           });
         });
@@ -598,6 +615,8 @@ class gaodeMap {
       .catch(() => {
         vue.$message({
           type: "info",
+          // center:true,
+          offset: 100,
           message: "已取消删除"
         });
       });
@@ -606,10 +625,13 @@ class gaodeMap {
   linePolyEditorAllClose() {
     this.polyLines.forEach(item => {
       item.polyEditor.close();
-      // let opstions = obj.getExtData();
-      // opstions.isState = 1;
-      item.setExtData({ isState: 0 });
-      item.setOptions({ strokeColor: "#F7FE38" });
+      let opstions = item.getExtData();
+      opstions.isState = 0;
+      item.setExtData(opstions);
+
+      let attr = item.getOptions();
+      attr.strokeColor = "#F7FE38";
+      item.setOptions(attr);
     });
   }
 
@@ -678,24 +700,25 @@ class gaodeMap {
         that.markerOverlays.push(e.obj);
       }
 
-      if (e.obj.getExtData().type == "newLine") {
-        console.log("挂上菜单");
+      if (e.obj && e.obj.getExtData().type == "newLine") {
+        console.log("挂上事件");
         that.newLineAddEvent(e.obj);
         // 记录这条线
         that.newLineObj = e.obj;
-        // that.mouseTool.close();
+        // 关闭
+        that.mouseTool.close();
         // 创建一条新线，然后在点地图的时候删除原来的旧线
         // that.createNewLine();
 
         // 右键菜单
         // that.addEditorAndMenu(e.obj)
-        that.overlays.push(e.obj);
       }
 
       // if(e.obj.getExtData().type=="line"){
       //   return;
       // }
       //that.mouseTool.close();
+      that.overlays.push(e.obj);
     });
   }
 
@@ -819,7 +842,7 @@ class gaodeMap {
     });
   }
 
-  closeAddMarker(){
+  closeAddMarker() {
     this.mouseTool.close();
     map.remove(this.markerOverlays);
   }

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

@@ -148,6 +148,7 @@
         <div class="right">
           {{ item.label }}
         </div>
+        <i class="el-icon-check"></i>
       </div>
     </div>
   </div>
@@ -185,7 +186,7 @@ export default {
       // 1新建，2编辑，3删除,点按钮变色
       targetNum: 0,
       // 左边的bar的active判定
-      leftBarNum: [1, 2, 3, 4, 5],
+      leftBarNum: [1, 2, 3, 4, 7],
 
       // 新建里的值
       iconClass: "icon-create",
@@ -254,6 +255,46 @@ export default {
       } else {
         this.leftBarNum.push(item.value);
       }
+      // 1,2,3,4,7分别对应数据库type5，1，2，3，4
+      console.log(this.leftBarNum);
+
+      if (this.leftBarNum.includes(1)) {
+        this.gaoMap.lineShow(true);
+      }else{
+        this.gaoMap.lineShow(false);
+      }
+
+      // console.log("marks",this.gaoMap.markers)
+      // this.gaoMap.markerShow();
+      if (this.leftBarNum.includes(2)) {
+        this.gaoMap.markerShow(1,true)
+      }else{
+        this.gaoMap.markerShow(1,false)
+      }
+
+
+      if (this.leftBarNum.includes(3)) {
+        this.gaoMap.markerShow(2,true)
+      }else{
+        this.gaoMap.markerShow(2,false)
+      }
+
+
+      if (this.leftBarNum.includes(4)) {
+        this.gaoMap.markerShow(3,true)
+      }else{
+        this.gaoMap.markerShow(3,false)
+      }
+
+       if (this.leftBarNum.includes(7)) {
+        this.gaoMap.markerShow(4,true)
+      }else{
+        this.gaoMap.markerShow(4,false)
+      }
+
+
+
+
     },
     addDevice() {
       if (this.iconClass == "icon-create") {
@@ -266,6 +307,8 @@ export default {
       }
       if (this.targetNum == 1 && this.createValue == 1) {
         this.gaoMap.lineType = 1;
+      } else {
+        this.gaoMap.lineType = 0;
       }
       this.deviceType = !this.deviceType;
       this.gaoMap.mapOperateType = "add";
@@ -283,10 +326,21 @@ export default {
       if (this.targetNum == 1 && this.createValue == 1) {
         // 0是初始，1是新建 2是编辑 3删除
         this.gaoMap.lineType = 1;
-        this.gaoMap.createNewLine();
-      }else {
+        if (this.gaoMap.newLineObj == null) {
+          this.gaoMap.createNewLine();
+        }
+      } else {
+        // 如果不是管道，就归位
+        this.gaoMap.lineType = 0;
+        // 如果不是管道了，把之前的管道清空
+        this.gaoMap.newLineReset();
+
+        // this.createReset();
+        // 其他
         this.gaoMap.draw(this.createValue.toString());
       }
+      // 清空所有正在编辑状态的线
+      this.gaoMap.linePolyEditorAllClose();
     },
     // 新建按钮还原
     createReset() {
@@ -315,6 +369,9 @@ export default {
       this.gaoMap.lineType = this.targetNum;
       // 如果正在新建线条，则清空
       this.gaoMap.newLineReset();
+      // 清空所有正在编辑状态的线
+      this.gaoMap.linePolyEditorAllClose();
+
       this.createReset();
       this.deviceType = false;
       this.gaoMap.mapOperateType = "delete";
@@ -351,8 +408,8 @@ export default {
             if ("3" == response.data[i].deviceType) {
               this.gaoMap.addMarker(DEVICE_TYPE.FLOWMETER, response.data[i]);
             }
-            if("4" == response.data[i].deviceType){
-              this.gaoMap.addMarker(DEVICE_TYPE.PRESSUREGAGE,response.data[i])
+            if ("4" == response.data[i].deviceType) {
+              this.gaoMap.addMarker(DEVICE_TYPE.PRESSUREGAGE, response.data[i]);
             }
           }
         }
@@ -380,9 +437,10 @@ export default {
         this.targetNum = 0;
       }
       // 辅助新建重新画线
-      if (!this.gaoMap.lineFlag) return;
+      // if (!this.gaoMap.lineFlag || this.gaoMap.lineType != 1) return;
+      console.log("利用window把lineFlagh恢复");
       this.gaoMap.lineFlag = false;
-      this.gaoMap.createNewLine();
+      // this.gaoMap.createNewLine();
     },
   },
 
@@ -399,7 +457,7 @@ export default {
 .leftBar-wrapper {
   position: fixed;
   left: 100px;
-  top: 100px;
+  top: 150px;
   .box {
     width: 180px;
     height: 48px;
@@ -409,19 +467,32 @@ export default {
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-top: none;
     cursor: pointer;
+    position: relative;
+    > i {
+      position: absolute;
+      line-height: 48px;
+      right: 20px;
+      color: #fff;
+    }
     &:hover {
-      background-color: #053b6a;
-      color: #ffffff;
+      // background-color: #053b6a;
+      // color: #ffffff;
+      // > i {
+      //   color:#fff;
+      // }
     }
     &:hover .left,
     &:hover .right {
-      color: #ffffff;
+      // color: #ffffff;
     }
     &.active {
-      background-color: #053b6a;
+      // background-color: #053b6a;
       .left,
       .right {
-        color: #ffffff;
+        color: #053b6a;
+      }
+      > i {
+        color: #053b6a;
       }
     }
     .left {