设备加载 gengdidi

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

@@ -9,6 +9,15 @@ export function listDeviceInfo(query) {
   })
 }
 
+// 查询设备信息列表
+export function getAllDeviceInfo(query) {
+  return request({
+    url: '/device/deviceInfo/deviceListInfo',
+    method: 'get',
+    params: query
+  })
+}
+
 // 查询设备信息详细
 export function getDeviceInfo(deviceId) {
   return request({

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

+<template>
+  <div class="wrapper">
+    <div class="top display-default">
+      <div class="left text">裕华路地埋管线1111</div>
+      <div 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>
+      <div class="pic">
+        <img src="" alt="" />
+      </div>
+    </div>
+    <!-- 维修人员 -->
+    <div class="maintain-content">
+      <div>姓名： <span>高雄</span></div>
+      <div>电话： <span>13512451234</span></div>
+      <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
+    </div>
+    <!-- 报警状态 -->
+    <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>
+  </div>
+</template>
+
+<script>
+//line移入时的的infowindow
+export default {
+  props: {
+    obj: { typs: Object },
+  },
+};
+</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: #ff5a67;
+    .text {
+      font-weight: 600;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 51px;
+    }
+    .left {
+      padding-left: 22px;
+    }
+    .right {
+      padding-right: 16px;
+    }
+  }
+
+  .eq-content {
+    height: 156px;
+    box-sizing: border-box;
+    padding: 13px 16px 13px 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;
+      }
+    }
+    .pic {
+      width: 177px;
+      height: 129px;
+      background-color: black;
+      img {
+        width: 100%;
+      }
+    }
+  }
+
+  .maintain-content {
+    width: 100%;
+    height: 109px;
+    padding-left: 22px;
+    padding-top: 16px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #e2e2e2;
+    & > div {
+      margin-bottom: 8px;
+      font-size: 14px;
+      font-weight: 400;
+    }
+  }
+
+  .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;
+    }
+  }
+}
+.display-default {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

gassafety-web/src/utils/gaodeMap.js

@@ -3,10 +3,9 @@ import regulatorBox from "../components/PopWindow/regulatorBox.vue";
 import valveWell from "../components/PopWindow/valveWell.vue";
 import flowMeter from "../components/PopWindow/flowMeter.vue";
 import dutyPerson from "../components/PopWindow/dutyPerson.vue";
-// import regulatorBoxOrValveWell from "../components/PopWindow/regulatorBoxOrValveWell.vue";
-
 import pipelineView from "../components/PopWindow/pipelineView.vue";
 import lineInfoWindow from "../components/PopWindow/lineInfoWindow.vue";
+import markerInfoWindow from "../components/PopWindow/markerInfoWindow.vue";
 import vue from "../main";
 let defaultCenter = "石家庄";
 export let map;
@@ -99,48 +98,45 @@ class gaodeMap {
    * @param markerType
    * @param lnglats
    */
-  addMarker(markerType, lnglats) {
+  addMarker(markerType, data) {
     let that = this;
     that.markerType = markerType;
     let infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(-13, -70) });
-    for (let i = 0; i < lnglats.length; i++) {
-      let marker = new AMap.Marker({
-        position: lnglats[i],
-        map: map,
-        offset: new AMap.Pixel(-13, -30),
-        cursor: "move",
-        // 设置拖拽效果
-        raiseOnDrag: true
-      });
-      marker.content = this.getMarketContent("data");
-      marker.on("mouseover", infoOpen);
-      marker.on("mouseout", infoClose);
-      that.deviceType = markerType;
-      let editWindow = that.createInfowindow();
-      marker.on("click", function(e) {
-        if ("edit" == that.mapOperateType) {
-          editWindow.show();
-        } else if ("delete" == that.mapOperateType) {
-          if (confirm("确认删除") == true) {
-            map.remove(marker);
-          }
-        } else {
-          map.setZoomAndCenter(13, e.target.getPosition());
-          let infoWindow = new AMap.InfoWindow({
-            offset: new AMap.Pixel(-13, -70)
-          });
-          infoWindow.setContent(e.target.content);
-          infoWindow.open(map, e.target.getPosition());
+    let marker = new AMap.Marker({
+      position: [data.longitude,data.latitude],
+      map: map,
+      offset: new AMap.Pixel(-13, -30)
+    });
+    marker.content = this.getMarketContent(data);
+    this.setMarkerIcon(marker);
+    marker.on("mouseover", infoOpen);
+    marker.on("mouseout", infoClose);
+    that.deviceType = markerType;
+    let editWindow = that.createInfowindow();
+    marker.on("click", function(e) {
+      if ("edit" == that.mapOperateType) {
+        editWindow.show();
+      } else if ("delete" == that.mapOperateType) {
+        if (confirm("确认删除") == true) {
+          map.remove(marker);
         }
-      });
-      marker.on("dragend", function(e) {
-        editWindow.editForm.longitude = e.lnglat.lng;
-        editWindow.editForm.latitude = e.lnglat.lat;
-        console.log(e.lnglat, "rrrr====");
-      });
-      this.markers.push(marker);
-    }
-    map.setFitView();
+      } else {
+        map.setZoomAndCenter(13, e.target.getPosition());
+        let infoWindow = new AMap.InfoWindow({
+          offset: new AMap.Pixel(-13, -70)
+        });
+        infoWindow.setContent(e.target.content);
+        infoWindow.open(map, e.target.getPosition());
+      }
+    });
+    marker.on("dragend", function(e) {
+      editWindow.editForm.longitude = e.lnglat.lng;
+      editWindow.editForm.latitude = e.lnglat.lat;
+      console.log(e.lnglat, "rrrr====");
+    });
+    this.markers.push(marker);
+    map.setZoom("11");
+    //map.setFitView();
 
     function infoClose(e) {
       infoWindow.close(map, e.target.getPosition());
@@ -176,8 +172,25 @@ class gaodeMap {
    * @returns {string}
    */
   getMarketContent(data) {
-    let html =
-      "<div>" +
+   /* const dom = createPop(markerInfoWindow,{});
+    const html = dom.$el;
+    dom.remove();
+    switch (this.markerType) {
+      case DEVICE_TYPE.REGEULATORBOX: {
+        return html;
+      }
+      case DEVICE_TYPE.VALUEWELL: {
+        return html;
+      }
+      case DEVICE_TYPE.FLOWMETER: {
+        return html;
+      }
+      case DEVICE_TYPE.DUTYPERSON: {
+        return html;
+      }
+    }*/
+
+    let html = "<div>" +
       "<table>" +
       "<tr>" +
       "<td>所属燃气公司</td>" +
@@ -193,18 +206,59 @@ class gaodeMap {
       "</tr>" +
       "</table>" +
       "</div>";
+    switch (this.markerType){
+      case DEVICE_TYPE.REGEULATORBOX :{
+        return html;
+      }
+      case DEVICE_TYPE.VALUEWELL :{
+        return html;
+      }
+      case DEVICE_TYPE.FLOWMETER :{
+        return html;
+      }
+      case DEVICE_TYPE.DUTYPERSON :{
+        return html;
+      }
+    }
+  }
+
+  /**
+   * 设置设备图标
+   * @param marker
+   */
+  setMarkerIcon(marker){
     switch (this.markerType) {
       case DEVICE_TYPE.REGEULATORBOX: {
-        return html;
+        let icon = new AMap.Icon({
+          //size: new AMap.Size(51, 23),
+          image: require("../assets/images/tiaoyaxiang.png"),
+        });
+        marker.setIcon(icon);
+        break;
       }
       case DEVICE_TYPE.VALUEWELL: {
-        return html;
+        let icon = new AMap.Icon({
+          //size: new AMap.Size(51, 23),
+          image: require("../assets/images/famenjing.png"),
+        });
+        marker.setIcon(icon);
+        break;
       }
       case DEVICE_TYPE.FLOWMETER: {
-        return html;
+        let icon = new AMap.Icon({
+          //size: new AMap.Size(51, 23),
+          image: require("../assets/images/liuliangji.png"),
+        });
+        marker.setIcon(icon);
+        break;
       }
       case DEVICE_TYPE.DUTYPERSON: {
-        return html;
+        let icon = new AMap.Icon({
+          //size: new AMap.Size(51, 23),
+          image: require("../assets/images/tiaoyaxiang.png"),
+        });
+        marker.setIcon(icon);
+        break;
       }
     }
   }

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

@@ -52,6 +52,7 @@
 <script>
 import gaodeMap from "utils/gaodeMap.js";
 import { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMap.js";
+import  { getAllDeviceInfo } from "@/api/device/deviceInfo";
 export default {
   data() {
     return {
@@ -59,20 +60,30 @@ export default {
       deviceType: false,
       value: "",
       operateType: "",
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        enterpriseId: null,
+        pipeId: null,
+        deviceName: null,
+        deviceAddr: null,
+        deviceModel: null,
+        deviceType: null,
+        longitude: null,
+        latitude: null,
+        iotNo: null,
+        iconUrl: null,
+        linkman: null,
+        phone: null,
+        installationTime: null,
+        inspectionTime: null,
+        remarks: null
+      },
     };
   },
   mounted() {
     let gaoMap = new gaodeMap("石家庄");
     this.gaoMap = gaoMap;
-    let lnglats = [
-      [114.497949, 38.121129],
-      [114.595972, 38.114511],
-      [114.443193, 37.990963],
-      [114.588419, 37.969449],
-      [114.522668, 38.042962],
-      [114.383966, 38.091548],
-    ];
-    gaoMap.addMarker(DEVICE_TYPE.REGEULATORBOX, lnglats);
     let path = [
       [
         [114.436698, 38.083306],
@@ -88,6 +99,7 @@ export default {
     ];
     gaoMap.addPolyline(path);
     gaoMap.addMouseTool();
+    this.getDeviceInfo();
   },
   methods: {
     addDevice() {
@@ -118,6 +130,26 @@ export default {
         this.gaoMap.createNewLine();
       }
     },
+    getDeviceInfo(){
+      this.loading = true;
+      getAllDeviceInfo(this.queryParams).then(response => {
+        if(response.code == 200){
+          for(var i = 0;i < response.data.length; i++){
+            if("1" == response.data[i].deviceType){
+              this.gaoMap.addMarker(DEVICE_TYPE.REGEULATORBOX,response.data[i])
+            }
+            if("2" == response.data[i].deviceType){
+              this.gaoMap.addMarker(DEVICE_TYPE.VALUEWELL,response.data[i])
+            }
+            if("3" == response.data[i].deviceType){
+              this.gaoMap.addMarker(DEVICE_TYPE.FLOWMETER,response.data[i])
+            }
+          }
+        }
+        this.loading = false;
+      });
+
+    }
   },
 };
 </script>