调整管道各种细节

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

@@ -2,82 +2,93 @@
   <div class="wrapper">
     <div class="top display-default">
       <div class="left text">{{ obj.pipeName }}</div>
-      <div v-if="!obj.editorPage" class="right text">
-        <img src="../../assets/images/closeBtn.png" alt="" />
+      <div class="right text">
+        <img @click="close" src="../../assets/images/closeBtn.png" alt="" />
       </div>
     </div>
+
     <!-- 设备信息 -->
-    <div class="eq-content display-default">
-      <div class="text-wrapper">
-        <!-- <div :title="obj.pipeName" class="eq-text">
+    <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 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="eq-text">
-          <span>管道类型：</span>
-          <span>{{ ["地埋管线", "地表管线"][obj.pipeType-1] }}</span>
-        </div>
-        <div class="eq-text">
-          <span>管道压力：</span>
-          <span>{{
-            ["低押", "中压", "次高压", "高压"][obj.pipePressure-1]
-          }}</span>
+
+        <div class="pic">
+          <img :src="obj.iconUrl" alt="" />
         </div>
       </div>
 
-      <div class="pic">
-        <img :src="obj.iconUrl" alt="" />
+      <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 class="maintain-content">
-      <div>
-        管道所在地址：<span>{{obj.pipeAddr }}</span>
-      </div>
-      <div>
-        安装日期：<span>{{ moment(obj.installationTime).format("YYYY-MM-DD") }}</span>
-      </div>
-      <div>
-        最后巡检日期：<span>{{ obj.inspectionTime }}</span>
-      </div>
-      <div>
-        备注信息；<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>
 </template>
 
 <script>
 //line移入时的的infowindow
-import moment from "moment"
+import moment from "moment";
 export default {
   props: {
     obj: { typs: Object },
   },
-  created(){
-    console.log("created",this.obj)
+  created() {
+    console.log("created", this.obj);
   },
-  methods:{
+  methods: {
     moment,
-  }
+    close() {
+      this.obj.polyline.infoWindow.close();
+    },
+  },
 };
 </script>
 
@@ -100,45 +111,53 @@ export default {
       line-height: 51px;
     }
     .left {
-      padding-left: 10px;
+      padding-left: 22px;
     }
     .right {
-      padding-right: 10px;
+      padding-right: 22px;
+      img{
+        cursor: pointer;
+      }
     }
   }
-
-  .eq-content {
-    min-height: 156px;
-    box-sizing: border-box;
-    padding: 13px 10px 0px 10px;
-    // 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 {
-          display: inline-block;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          word-break: break-all;
-          max-width: 100px;
+  .content {
+    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%;
+      .pic {
+        width: 177px;
+        height: 129px;
+        // background-color: black;
+        img {
+          width: 100%;
+          height: 100%;
+        }
       }
     }
   }
@@ -146,16 +165,22 @@ export default {
   .maintain-content {
     width: 100%;
     height: 119px;
-    padding-left: 10px;
-    padding-right:10px;
-    // padding-bottom:10px;
+    padding-left: 22px;
+    padding-right: 22px;
+    padding-bottom: 10px;
     // padding-top: 16px;
     box-sizing: border-box;
-    border-bottom: 1px solid #e2e2e2;
+    // 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: 280px;
+      }
     }
   }
 

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

@@ -25,6 +25,7 @@
         <el-col>
           <el-form-item v-show="false" label="企业id" prop="enterpriseId">
             <el-input disabled v-model="editForm.enterpriseId"></el-input>
+            
           </el-form-item>
         </el-col>
 
@@ -40,7 +41,7 @@
         </el-col>
         <el-col :span="11">
           <el-form-item label="管道长度" prop="pipeLength">
-            <el-input v-model="editForm.pipeLength">
+            <el-input type="number" min=0 v-model="editForm.pipeLength">
               <i
                 slot="suffix"
                 style="color: #000; font-style: normal; margin-right: 10px"
@@ -212,7 +213,7 @@ export default {
         pipePressure: [
           { required: true, message: "请选择管道压力", trigger: "blur" },
         ],
-        iconUrl: [{ required: true, message: "请上传骨片", trigger: "change" }],
+        iconUrl: [{ required: true, message: "请上传图片", trigger: "change" }],
         installationTime: [
           {
             // type: "date",
@@ -254,11 +255,18 @@ export default {
                 this.dialogVisible = false;
                 data.pipeId = data.pipeId ? data.pipeId : res.data;
                 this.lineOkCallBack.call(this.gaodeMap, this.target, data);
+                if (!this.editForm.pipeId) {
+                  this.gaodeMap.newLineObj = null;
+                  this.gaodeMap.createNewLine();
+                }
+
                 this.$message({
                   type: "success",
                   offset: 100,
                   // center:true,
-                  message: `${this.editForm.pipeId ?"修改管道成功":"添加管道成功"}`,
+                  message: `${
+                    this.editForm.pipeId ? "修改管道成功" : "添加管道成功"
+                  }`,
                 });
               }
             })
@@ -294,6 +302,7 @@ export default {
     // 图片上传成功
     fileFinshed(e) {
       this.editForm.iconUrl = e.url;
+      console.log(this.editForm.iconUrl);
     },
     // 图片列表移除
     listRemove(e) {

gassafety-web/src/utils/gaodeMap.js

@@ -31,6 +31,7 @@ class gaodeMap {
   lineFlag = false;
   mouseTool = null;
   myMap = null;
+  showInfoWindow = null;
 
   //构造函数中设置中央点默认值
   constructor(center) {
@@ -65,6 +66,7 @@ class gaodeMap {
             this.newLineObj = null;
             this.lineFlag = false;
             this.createNewLine();
+
             console.log("map点击事件新建");
           })
           .catch(() => {});
@@ -91,9 +93,7 @@ class gaodeMap {
     this.districtBoundaries();
   }
 
-
-
-  resetMapCenter(value){
+  resetMapCenter(value) {
     map.setCenter(value);
   }
 
@@ -335,7 +335,7 @@ class gaodeMap {
       case DEVICE_TYPE.PRESSUREGAGE: {
         let icon = new AMap.Icon({
           //size: new AMap.Size(51, 23),
-          image: require("../assets/images/yalibiao.png"),
+          image: require("../assets/images/yalibiao.png")
         });
         marker.setIcon(icon);
         break;
@@ -373,16 +373,27 @@ class gaodeMap {
           lineData: item
         }
       });
+
       this.polyLines.push(polyline);
       // 信息窗体
       const dom = createPop(lineInfoWindow, {
-        obj: { a: 123, editorPage: true, ...item }
+        obj: { a: 123, editorPage: true, ...item, polyline }
       });
 
       console.log("dom", dom.$el);
-
+      dom.$el.addEventListener("mouseover", () => {
+        let options = this.myMap.getStatus();
+        options.scrollWheel = false;
+        this.myMap.setStatus(options);
+      });
+      dom.$el.addEventListener("mouseout", () => {
+        let options = this.myMap.getStatus();
+        options.scrollWheel = true;
+        this.myMap.setStatus(options);
+      });
       let infoWindow = new AMap.InfoWindow({
         isCustom: true,
+        autoMove: false,
         content: dom.$el,
         //信息船体偏移量
         offset: new AMap.Pixel(0, 0),
@@ -390,9 +401,10 @@ class gaodeMap {
       });
 
       this.newLineAddEvent(polyline);
-
+      polyline.infoWindow = infoWindow;
       //添加事件
       polyline.on("mouseover", e => {
+        if (this.lineType == 1) return;
         // 上方导航的高
         const topBar = 81;
         // 坐标导航的宽
@@ -437,12 +449,14 @@ class gaodeMap {
         polyline.setOptions({ strokeColor: "#FF5A67" });
         infoWindow.setOffset(new AMap.Pixel(X, Y));
         infoWindow.open(map, e.lnglat);
+        // polyline.infoWindow=infoWindow;
+        this.showInfoWindow = infoWindow;
 
         // const
       });
       polyline.on("mouseout", e => {
         polyline.setOptions({ strokeColor: "#F7FE38" });
-        infoWindow.close();
+        // infoWindow.close();
       });
       // 计算info的位置
       // function infoPosition() {}
@@ -480,51 +494,8 @@ class gaodeMap {
     }
   }
   // 新建line增加编辑以及右键菜单
-  addEditorAndMenu(obj) {
-    let polyEditor = new AMap.PolyEditor(map, obj);
-    let contextMenu = new AMap.ContextMenu();
-    contextMenu.addItem(
-      "编辑",
-      function() {
-        polyEditor.setTarget(obj);
-        polyEditor.open();
-        contextMenu.close();
-      },
-      0
-    );
-    contextMenu.addItem(
-      "结束编辑",
-      function() {
-        polyEditor.close();
-        contextMenu.close();
-        console.log(obj.getPath());
-      },
-      0
-    );
-    contextMenu.addItem(
-      "保存",
-      () => {
-        polyEditor.close();
-        contextMenu.close();
-        this.addPolyline([obj.getPath()]);
-        map.remove(obj);
-      },
-      0
-    );
-    contextMenu.addItem(
-      "删除",
-      function() {
-        polyEditor.setTarget(obj);
-        polyEditor.open();
-        contextMenu.close();
-      },
-      0
-    );
-    obj.on("rightclick", e => {
-      if (this.lineType == 1) {
-        contextMenu.open(map, e.lnglat);
-      }
-    });
+  closeLineInfoWindow() {
+    this.showInfoWindow && this.showInfoWindow.close();
   }
   // 新line与老line添加点击事件
   newLineAddEvent(obj) {
@@ -537,7 +508,10 @@ class gaodeMap {
       console.log("lineType", this.lineType);
       this.lineFlag = true;
       // 每次点击关闭然后再次激活
-      this.mouseTool.close();
+      // 如果是新线就关闭
+      if (obj.getExtData().type == "newLine") {
+        this.mouseTool.close();
+      }
       // 删除
       if (this.lineType == 3) {
         this.lineDelete(obj);
@@ -591,8 +565,11 @@ class gaodeMap {
     });
   }
   lineDelete(obj) {
+    const {
+      lineData: { pipeName }
+    } = obj.getExtData();
     vue
-      .$confirm("是否删除该管道", "提示", {
+      .$confirm(`是否删除${pipeName}`, "提示", {
         // confirmButtonText: "确定",
         // cancelButtonText: "取消",
         type: "warning"
@@ -616,6 +593,8 @@ class gaodeMap {
             // center:true,
             message: "删除成功!"
           });
+          // 关闭当前线条的infowindow
+          // this.closeLineInfoWindow();
         });
       })
       .catch(() => {

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

@@ -102,37 +102,7 @@
       @click="search()"
       >搜索</el-button
     >
-    <!-- <el-button
-      type="primary"
-      style="position: absolute; top: 100px; left: 75%"
-      @click="addDevice"
-      >新增</el-button
-    >
-    <el-button
-      type="primary"
-      style="position: absolute; top: 100px; left: 82%"
-      @click="editDevice"
-      >编辑</el-button
-    >
-    <el-button
-      type="primary"
-      style="position: absolute; top: 100px; left: 90%"
-      @click="deleteDevice"
-      >删除</el-button
-    >
-    <el-select
-      v-model="value"
-      placeholder="请选择..."
-      @change="selectDeviceType"
-      style="position: absolute; top: 150px; left: 75%"
-      v-if="deviceType"
-    >
-      <el-option label="管道" value="1"></el-option>
-      <el-option label="调压箱" value="2"></el-option>
-      <el-option label="阀门井" value="3"></el-option>
-      <el-option label="流量计" value="4"></el-option>
-      <el-option label="值班人员" value="5"></el-option>
-    </el-select> -->
+  
 
     <div class="leftBar-wrapper">
       <div
@@ -236,6 +206,7 @@ export default {
     // 左边的Bar修改值
     leftBarChange(item) {
       // this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
+      
       const index = this.leftBarNum.indexOf(item.value);
       if (index >= 0) {
         this.leftBarNum.splice(index, 1);
@@ -284,12 +255,15 @@ export default {
 
     },
     addDevice() {
+      
       if (this.iconClass == "icon-create") {
         this.targetNum = this.targetNum != 1 ? 1 : 0;
       } else {
         if (this.deviceType) {
           this.targetNum = 0;
           this.createReset();
+          this.gaoMap.newLineReset();
+          
         }
       }
       if (this.targetNum == 1 && this.createValue == 1) {
@@ -297,6 +271,9 @@ export default {
       } else {
         this.gaoMap.lineType = 0;
       }
+      // 关闭当前线条的infowindow
+      this.gaoMap.closeLineInfoWindow();
+
       this.deviceType = !this.deviceType;
       this.gaoMap.mapOperateType = "add";
       this.gaoMap.removeMarkerDragg();
@@ -309,7 +286,7 @@ export default {
       this.iconClass = item.icon;
       this.createValue = item.value;
       this.createLabel = item.label;
-
+       
       if (this.targetNum == 1 && this.createValue == 1) {
         // 0是初始，1是新建 2是编辑 3删除
         this.gaoMap.lineType = 1;
@@ -322,6 +299,7 @@ export default {
         // 如果不是管道了，把之前的管道清空
         this.gaoMap.newLineReset();
 
+
         // this.createReset();
         // 其他
         this.gaoMap.draw(this.createValue.toString());
@@ -415,10 +393,12 @@ export default {
       this.gaoMap.placeSearch.clear();
       this.gaoMap.placeSearch.search(this.keyWord);
     },
-    // 新建下拉列表关闭
+    // 新建下拉列表关闭 window点击事件
     barClose() {
       console.log("window");
       this.deviceType = false;
+      // 关闭当前线条的infowindow
+      this.gaoMap.closeLineInfoWindow()
       // 如果没有选择的时候点window 则高亮消失
       if (this.targetNum == 1 && this.iconClass == "icon-create") {
         this.targetNum = 0;