提交

gassafety-web/package.json

@@ -24,6 +24,7 @@
     "js-beautify": "1.13.0",
     "js-cookie": "2.2.1",
     "jsencrypt": "3.0.0-rc.1",
+    "moment": "^2.29.1",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",

gassafety-web/src/api/device/pipe.js

@@ -10,16 +10,17 @@ export function listPipe(query) {
 }
 
 
-
-// 查询管道信息详细
-export function getPipe(pipeId) {
+// 查询管道信息列表
+export function pipeAllInfoList(query) {
   return request({
-    url: '/device/pipe/' + pipeId,
-    method: 'get'
+    url: '/device/pipe/pipeAllInfoList',
+    method: 'get',
+    params: query
   })
 }
 
 
+
 // getAllDeviceInfo
 
 export function getAllDevice(data) {

gassafety-web/src/assets/styles/fonticon.scss

 @font-face {
   font-family: "iconfont"; /* Project id 2692138 */
-  src: url('//at.alicdn.com/t/font_2692138_odrjf05krdd.woff2?t=1626922957592') format('woff2'),
-       url('//at.alicdn.com/t/font_2692138_odrjf05krdd.woff?t=1626922957592') format('woff'),
-       url('//at.alicdn.com/t/font_2692138_odrjf05krdd.ttf?t=1626922957592') format('truetype');
+  src: url('//at.alicdn.com/t/font_2692138_75daec8zfbv.woff2?t=1627011828763') format('woff2'),
+       url('//at.alicdn.com/t/font_2692138_75daec8zfbv.woff?t=1627011828763') format('woff'),
+       url('//at.alicdn.com/t/font_2692138_75daec8zfbv.ttf?t=1627011828763') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-ylb:before {
+  content: "\e60f";
+}
+
 .icon-fmj:before {
   content: "\e608";
 }

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

 <template>
   <div class="wrapper">
     <div class="top display-default">
-      <div class="left text">裕华路地埋管线</div>
-      <div class="right text">
+      <div class="left text">{{ obj.pipeName }}</div>
+      <div v-if="!obj.editorPage" class="right text">
         <img src="../../assets/images/closeBtn.png" alt="" />
       </div>
     </div>
     <!-- 设备信息 -->
     <div class="eq-content display-default">
       <div class="text-wrapper">
-        <div class="eq-text">设备编号：<span>aa</span></div>
-        <div class="eq-text">设备名称：<span>裕华路地埋管线</span></div>
-        <div class="eq-text">监测介质：<span>甲烷</span></div>
-        <div class="eq-text">设备状态：<span>报警</span></div>
-        <div class="eq-text">用户信息：<span>中厨燃气</span></div>
+        <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] }}</span>
+        </div>
+        <div class="eq-text">
+          <span>管道压力：</span>
+          <span>{{
+            ["低押", "中压", "次高压", "高压"][obj.pipePressure]
+          }}</span>
+        </div>
       </div>
+
       <div class="pic">
-        <img src="" alt="" />
+        <img :src="obj.url" alt="" />
       </div>
     </div>
-    <!-- 维修人员 -->
+
     <div class="maintain-content">
-      <div>姓名： <span>高雄</span></div>
-      <div>电话： <span>13512451234</span></div>
-      <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
+      <div>
+        安装日期：<span>{{ obj.installationTime }}</span>
+      </div>
+      <div>
+        最后巡检日期：<span>{{ obj.inspectionTime }}</span>
+      </div>
+      <div>
+        备注信息；<span>{{ obj.remarks }}</span>
+      </div>
     </div>
     <template v-if="!obj.editorPage">
       <div class="warn-content">
@@ -58,7 +82,7 @@ export default {
   .top {
     width: 100%;
     height: 51px;
-    background-color: #053B6A;
+    background-color: #053b6a;
     .text {
       font-weight: 600;
       font-size: 16px;
@@ -74,7 +98,7 @@ export default {
   }
 
   .eq-content {
-    height: 156px;
+    min-height: 156px;
     box-sizing: border-box;
     padding: 13px 16px 13px 22px;
     border-bottom: 1px solid #e2e2e2;
@@ -88,6 +112,15 @@ export default {
         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;
+        }
       }
     }
     .pic {
@@ -137,8 +170,7 @@ export default {
   }
 }
 
-.wrapperEditorPage{
-  
+.wrapperEditorPage {
 }
 .display-default {
   display: flex;

gassafety-web/src/utils/gaodeMap.js

@@ -234,11 +234,11 @@ class gaodeMap {
       this.polyLines.push(polyline);
       // 信息窗体
       const dom = createPop(lineInfoWindow, {
-        obj: { a: 123 ,editorPage:true}
+        obj: { a: 123, editorPage: true }
       });
 
       console.log("dom", dom.$el);
-      
+
       let infoWindow = new AMap.InfoWindow({
         isCustom: true,
         content: dom.$el,
@@ -292,53 +292,55 @@ class gaodeMap {
         // 坐标导航的宽
         const leftBar = 100;
         // 屏幕可视区的宽高
-        const {clientWidth:windowClientWidth,clientHeight:windowClientHeight} = document.body;
+        const {
+          clientWidth: windowClientWidth,
+          clientHeight: windowClientHeight
+        } = document.body;
         // 弹出的信息窗口的宽高
         // const { offsetWidth:infoWindowWidth,offsetHeight:infoWindowHeight} =infoWindow.dom;
         // 406,316
-        const { offsetWidth:infoWindowWidth,offsetHeight:infoWindowHeight} ={offsetWidth:406,offsetHeight:316}
+        const {
+          offsetWidth: infoWindowWidth,
+          offsetHeight: infoWindowHeight
+        } = { offsetWidth: 406, offsetHeight: 316 };
         // 鼠标碰到线后的位置
-        const {clientX:mouseClientX,clientY:mouseClientY} = e.originEvent;
+        const { clientX: mouseClientX, clientY: mouseClientY } = e.originEvent;
         // 鼠标到左边界的距离
-        const offsetLeftX= mouseClientX -100;
+        const offsetLeftX = mouseClientX - 100;
         // 鼠标到右边界的距离
-        const offsetRightX= windowClientWidth-mouseClientX;
-        const offsetTopY = mouseClientY-81;
-        const offsetBottomY = windowClientHeight-mouseClientY;
-        
-        
+        const offsetRightX = windowClientWidth - mouseClientX;
+        const offsetTopY = mouseClientY - 81;
+        const offsetBottomY = windowClientHeight - mouseClientY;
 
-        const offsetY = mouseClientY -80 -infoWindowHeight;
-        let X=20,Y=-20;
-        if(offsetLeftX<=infoWindowWidth){
-          console.log("靠左了")
-          X=20;
-        }else if(offsetRightX<=infoWindowWidth){
-          console.log("靠右了")
-          X=-infoWindowWidth-20;
+        const offsetY = mouseClientY - 80 - infoWindowHeight;
+        let X = 20,
+          Y = -20;
+        if (offsetLeftX <= infoWindowWidth) {
+          console.log("靠左了");
+          X = 20;
+        } else if (offsetRightX <= infoWindowWidth) {
+          console.log("靠右了");
+          X = -infoWindowWidth - 20;
         }
-        if(offsetTopY<=infoWindowHeight){
-          console.log("靠上了")
-          Y=20
-        }else if(offsetBottomY<=infoWindowHeight+81){
-          console.log("靠下了")
-          Y= -infoWindowHeight-20;
+        if (offsetTopY <= infoWindowHeight) {
+          console.log("靠上了");
+          Y = 20;
+        } else if (offsetBottomY <= infoWindowHeight + 81) {
+          console.log("靠下了");
+          Y = -infoWindowHeight - 20;
         }
         polyline.setOptions({ strokeColor: "#FF5A67" });
-        infoWindow.setOffset(new AMap.Pixel(X,Y))
+        infoWindow.setOffset(new AMap.Pixel(X, Y));
         infoWindow.open(map, e.lnglat);
 
-
-        // const 
+        // const
       });
       polyline.on("mouseout", e => {
         polyline.setOptions({ strokeColor: "#F7FE38" });
         infoWindow.close();
       });
       // 计算info的位置
-      function infoPosition(){
-
-      }
+      // function infoPosition() {}
 
       // polyline.on("rightclick", e => {
       //   console.log(this.lineType);
@@ -422,7 +424,9 @@ class gaodeMap {
   newLineAddEvent(obj) {
     obj.polyEditor = new AMap.PolyEditor(map, obj);
     obj.on("click", () => {
+      console.log(this.lineType)
       // 获取当前状态 0普通状态，1是正编辑状态
+
       const { isState, type } = obj.getExtData();
       // 如果不是新线的时候并且没点编辑，点击是无效的
       if (type != "newLine" && this.lineType != 2) return;
@@ -434,10 +438,27 @@ class gaodeMap {
         console.log(opstions);
         obj.setExtData(opstions);
       } else {
-        this.infoWindowPipelineView({ obj, lineType: type });
+        // 经纬度
+        const lnglatsArr = obj.getPath().map(item=>([item.lng,item.lat]));
+        // 管道总长度
+        const pipeLength = obj.getLength();
+        // 传回来的数据 如果是新管道就是空
+        const lineData = type == "newLine" ? {} : obj.getExtData().lineData;
+        this.infoWindowPipelineView({ target:obj, lineType: type,lnglatsArr, pipeLength,lineData });
       }
     });
   }
+  // 关闭所有已经上传的线的编辑状态
+  linePolyEditorAllClose() {
+    this.polyLines.forEach(item => {
+      item.polyEditor.close();
+      // let opstions = obj.getExtData();
+      // opstions.isState = 1;
+      item.setExtData({isState:0});
+      item.setOptions({ strokeColor: "#F7FE38" });
+    });
+  }
+
   // 传进组件的会调 点确认的时候调
   lineOkCallBack(target) {
     target.polyEditor.close();
@@ -453,11 +474,17 @@ class gaodeMap {
   // 上传服务器用的组件
 
   infoWindowPipelineView(options) {
+    // const {} =options;
     const notice = createPop(pipelineView, {
       title: "管道",
-      //线是新线还是老线
-      lineType: options.lineType,
-      target: options.obj,
+      // 数据
+      // lineData: options.lineData,
+      // lnglatsArr:options.lnglatsArr,
+      // pipeLength:options.pipeLength,
+      // //线是新线还是老线
+      // lineType: options.lineType,
+      // target: options.obj,
+      ...options,
       //把当前对象当作that传进去
       gaodeMap: this,
       lineOkCallBack: this.lineOkCallBack

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

@@ -122,6 +122,7 @@
 </template>
 <script>
 import gaodeMap from "utils/gaodeMap.js";
+import {pipeAllInfoList} from "@/api/device/pipe.js"
 import { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMap.js";
 export default {
   data() {
@@ -171,6 +172,9 @@ export default {
   },
   mounted() {
     let gaoMap = new gaodeMap("石家庄");
+    pipeAllInfoList().then(res=>{
+      console.log("管道",res);
+    })
     this.gaoMap = gaoMap;
     let lnglats = [
       [114.497949, 38.121129],
@@ -198,6 +202,7 @@ export default {
     gaoMap.addMouseTool();
   },
   methods: {
+    // 左边的Bar修改值
     leftBarChange(item){
       // this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
       const index = this.leftBarNum.indexOf(item.value);
@@ -206,7 +211,6 @@ export default {
       }else{
          this.leftBarNum.push(item.value)
       }
-
     },
     addDevice() {
       if (this.iconClass == "icon-create") {
@@ -217,8 +221,10 @@ export default {
           this.createReset();
         }
       }
+      if(this.targetNum ==1 && this.createValue ==1){
+        this.gaoMap.lineType=1;
+      }
       this.deviceType = !this.deviceType;
-
       this.gaoMap.mapOperateType = "add";
       this.gaoMap.removeMarkerDragg();
     },
@@ -228,6 +234,12 @@ 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;
+        this.gaoMap.createNewLine();
+      }
     },
     // 新建按钮还原
     createReset() {
@@ -237,14 +249,20 @@ export default {
     },
     editDevice() {
       this.targetNum = this.targetNum != 2 ? 2 : 0;
+      this.gaoMap.lineType=this.targetNum;
+      console.log(this.gaoMap.lineType)
+      if(this.targetNum!=2) {
+        this.gaoMap.linePolyEditorAllClose();
+      }
       this.createReset();
       this.deviceType = false;
-      this.gaoMap.lineType = 2;
       this.gaoMap.mapOperateType = "edit";
       this.gaoMap.addMarkerDragg();
     },
     deleteDevice() {
       this.targetNum = this.targetNum != 3 ? 3 : 0;
+      this.gaoMap.lineType=this.targetNum;
+
       this.createReset();
       this.deviceType = false;
       this.gaoMap.mapOperateType = "delete";

gassafety-web/yarn.lock

@@ -5929,6 +5929,11 @@ mkdirp@^1.0.4:
   resolved "https://registry.nlark.com/mkdirp/download/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha1-PrXtYmInVteaXw4qIh3+utdcL34=
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M=
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"