设备信息 gengdidi

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

 <template>
   <div class="wrapper">
+    <span class="dot-left"></span>
     <div class="top display-default">
-      <div class="left text">裕华路地埋管线1111</div>
+      <div class="left text">{{title}}</div>
       <div class="right text">
         <img src="../../assets/images/closeBtn.png" alt="" />
       </div>
@@ -9,20 +10,19 @@
     <!-- 设备信息 -->
     <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>{{data.deviceName}}</span></div>
+        <div class="eq-text">设备型号：<span>{{data.deviceModel}}</span></div>
+        <div class="eq-text">所属管道：<span>{{data.pipeCode}}</span></div>
         <div class="eq-text">设备状态：<span>报警</span></div>
-        <div class="eq-text">用户信息：<span>中厨燃气</span></div>
       </div>
       <div class="pic">
-        <img src="" alt="" />
+        <img v-bind:src="data.iconUrl" alt="" />
       </div>
     </div>
     <!-- 维修人员 -->
     <div class="maintain-content">
-      <div>姓名： <span>高雄</span></div>
-      <div>电话： <span>13512451234</span></div>
+      <div>姓名： <span>{{data.linkman}}</span></div>
+      <div>电话： <span>{{data.phone}}</span></div>
       <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
     </div>
     <!-- 报警状态 -->
@@ -30,10 +30,6 @@
       <div>报警状态 <span>报警</span></div>
       <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
     </div>
-
-    <div class="btn">
-      <el-button class="elbtn" type="primary">生成工单</el-button>
-    </div>
   </div>
 </template>
 
@@ -42,7 +38,9 @@
 export default {
   props: {
     obj: { typs: Object },
-  },
+    title: "",
+    data: {}
+  }
 };
 </script>
 
@@ -57,7 +55,7 @@ export default {
   .top {
     width: 100%;
     height: 51px;
-    background-color: #ff5a67;
+    background-color: #053B6A;
     .text {
       font-weight: 600;
       font-size: 16px;
@@ -95,6 +93,7 @@ export default {
       background-color: black;
       img {
         width: 100%;
+        height: 100%;
       }
     }
   }
@@ -139,4 +138,56 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+.dot-top {
+  font-size: 0;
+  line-height: 0;
+  border-width: 10px;
+  border-color: #053B6A;
+  border-top-width: 0;
+  border-style: dashed;
+  border-bottom-style: solid;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+/* 向右的箭头 */
+.dot-right {
+  font-size: 0;
+  line-height: 0;
+  border-width: 10px;
+  border-color: #053B6A;
+  border-right-width: 0;
+  border-style: dashed;
+  border-left-style: solid;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
+/* 向下的箭头 */
+.dot-bottom {
+  font-size: 0;
+  line-height: 0;
+  border-width: 10px;
+  border-color: #053B6A;
+  border-bottom-width: 0;
+  border-style: dashed;
+  border-top-style: solid;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+/* 向左的箭头 */
+.dot-left {
+  position: absolute;
+  left: -12px;
+  top: 8px;
+  font-size: 0;
+  line-height: 0;
+  border-width: 13px;
+  border-color: #053B6A;
+  border-left-width: 0;
+  border-style: dashed;
+  border-right-style: solid;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
+
+
 </style>

gassafety-web/src/utils/gaodeMap.js

@@ -101,7 +101,7 @@ class gaodeMap {
   addMarker(markerType, data) {
     let that = this;
     that.markerType = markerType;
-    let infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(-13, -70) });
+    let infoWindow = new AMap.InfoWindow({ isCustom: true, offset: new AMap.Pixel(12, -65),anchor: "left-top" });
     let marker = new AMap.Marker({
       position: [data.longitude,data.latitude],
       map: map,
@@ -126,7 +126,9 @@ class gaodeMap {
       } else {
         map.setZoomAndCenter(13, e.target.getPosition());
         let infoWindow = new AMap.InfoWindow({
-          offset: new AMap.Pixel(-13, -70)
+          isCustom: true,
+          offset: new AMap.Pixel(12, -65),
+          anchor: "left-top"
         });
         infoWindow.setContent(e.target.content);
         infoWindow.open(map, e.target.getPosition());
@@ -174,25 +176,37 @@ class gaodeMap {
    * @returns {string}
    */
   getMarketContent(data) {
-   /* const dom = createPop(markerInfoWindow,{});
-    const html = dom.$el;
-    dom.remove();
     switch (this.markerType) {
       case DEVICE_TYPE.REGEULATORBOX: {
+        const dom = createPop(markerInfoWindow,{
+          title: "调压箱",
+          data: data
+        });
+        const html = dom.$el;
+        dom.remove();
         return html;
       }
       case DEVICE_TYPE.VALUEWELL: {
+        const dom = createPop(markerInfoWindow,{
+          title: "阀门井",
+          data: data
+        });
+        const html = dom.$el;
+        dom.remove();
         return html;
       }
       case DEVICE_TYPE.FLOWMETER: {
+        const dom = createPop(markerInfoWindow,{
+          title: "流量计",
+          data: data
+        });
+        const html = dom.$el;
+        dom.remove();
         return html;
       }
-      case DEVICE_TYPE.DUTYPERSON: {
-        return html;
     }
-    }*/
 
-    let html = "<div>" +
+   /* let html = "<div>" +
       "<table>" +
       "<tr>" +
       "<td>所属燃气公司</td>" +
@@ -218,7 +232,7 @@ class gaodeMap {
       case DEVICE_TYPE.FLOWMETER :{
         return html;
       }
-    }
+    }*/
   }
 
   /**