合并jzl

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

 @font-face {
   font-family: "iconfont"; /* Project id 2692138 */
-  src: url('//at.alicdn.com/t/font_2692138_r2b0jk88vrj.woff2?t=1627616466373') format('woff2'),
-       url('//at.alicdn.com/t/font_2692138_r2b0jk88vrj.woff?t=1627616466373') format('woff'),
-       url('//at.alicdn.com/t/font_2692138_r2b0jk88vrj.ttf?t=1627616466373') format('truetype');
+  src: url('//at.alicdn.com/t/font_2692138_cd9e8nk8yoo.woff2?t=1627718383904') format('woff2'),
+       url('//at.alicdn.com/t/font_2692138_cd9e8nk8yoo.woff?t=1627718383904') format('woff'),
+       url('//at.alicdn.com/t/font_2692138_cd9e8nk8yoo.ttf?t=1627718383904') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zhibanrenyuan:before {
+  content: "\e613";
+}
+
+.icon-ylbgs:before {
+  content: "\e611";
+}
+
 .icon-gdcd:before {
   content: "\e615";
 }
@@ -25,11 +33,7 @@
   content: "\e612";
 }
 
-.icon-rqbgs:before {
-  content: "\e613";
-}
-
-.icon-ljsgs:before {
+.icon-lljgs:before {
   content: "\e614";
 }
 

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

@@ -291,4 +291,6 @@
     }
   }
   // background-color: ;
+  
 }
+// 图片预览

gassafety-web/src/components/MyFileUpload/index.vue

@@ -32,15 +32,24 @@
         </template>
         的文件
       </div>
+     
     </el-upload>
-    <el-dialog
+     <el-image v-show="false"
+        id="img"
+        ref="previewImg"
+        :src="dialogImageUrl"
+        :preview-src-list="bigImageArr"
+        :z-index="9999999"
+      ></el-image>
+    <!-- <el-dialog
       :center="true"
       width="50%"
       :modal="modal"
       :visible.sync="dialogVisible"
     >
       <img :src="dialogImageUrl" alt="" />
-    </el-dialog>
+    </el-dialog> -->
+
     <!-- 文件列表 -->
     <!-- <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
       <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
@@ -123,6 +132,9 @@ export default {
         return [];
       }
     },
+    bigImageArr() {
+      return [this.dialogImageUrl]
+    },
   },
   methods: {
     // 上传前校检格式和大小
@@ -197,7 +209,9 @@ export default {
       this.dialogImageUrl = file.response ? file.response.url : file.url;
       //  this.dialogImageUrl =if(this.fileArr) this.fileArr[0].url;
 
-      this.dialogVisible = true;
+      // this.dialogVisible = true;
+      this.$refs.previewImg.showViewer = true;
+
       console.log(file);
       // console.log(file.response.url)
     },

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

@@ -94,7 +94,7 @@ export default {
     .pic {
       width: 177px;
       height: 129px;
-      background-color: black;
+      // background-color: black;
       img {
         width: 100%;
         height: 100%;

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

+<template>
+  <div class="wrapper">
+    <span class="left">高雄:</span>
+    <span class="right">2019-99-99 15:21:21</span>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style  lang="scss" scoped>
+.wrapper{
+  width: 136px;
+  height: 54px;
+  background: #0D4F88;
+  font-size: 14px;
+  color:#fff;
+  box-sizing: border-box;
+  padding:7px 0px 7px 10px;
+  box-shadow: 0 0 20px -5px #0D4F88;
+  border-radius: 4px;
+
+  span{
+    word-break: break-all;
+    display: inline-block;
+    vertical-align: top;
+    &.right{
+      width:90px;
+    }
+  }
+}
+</style>
\ No newline at end of file

gassafety-web/src/utils/gaodeMapView.js

@@ -6,9 +6,11 @@ import pipelineView from "../components/PopWindow/pipelineView.vue";
 import lineInfoWindow from "../components/PopWindow/lineInfoWindow.vue";
 import { delDeviceInfo } from "@/api/device/deviceInfo";
 import markerInfoWindow from "../components/PopWindow/markerInfoWindow.vue";
+import workerManInfowindow from "../components/PopWindow/workerManInfowindow.vue";
 import { getArray } from "@/utils/gassafety.js";
 import { delPipe } from "@/api/device/pipe.js";
 import vue from "../main";
+import {Card} from "element-ui"
 let defaultCenter = "石家庄";
 export let map;
 export const DEVICE_TYPE = {
@@ -159,7 +161,43 @@ class gaodeMap {
       offset: new AMap.Pixel(0, 5)
     });
     this.setMarkerIcon(marker);
-    if (DEVICE_TYPE.WORKORDER != markerType && DEVICE_TYPE.INSPECTOR != markerType) {
+
+    if (DEVICE_TYPE.INSPECTOR == markerType) {
+      // 存值
+      const { createTime,locationId,longitude,latitude} = data;
+      marker.setExtData({createTime, locationId ,pos:[longitude,latitude]});
+      // 值班人员的事件
+
+      marker.on("click", e => {
+        console.log(e);
+        console.log(e.target.getExtData())
+        // console.log(Card)
+        // e.target.content = this.getMarketContent(data);
+      });
+      marker.on("mouseover",(e)=>{
+        e.target.content = this.getMarketContent(data);
+        infoWindow.setContent(e.target.content);
+        infoWindow.open(map, e.target.getPosition());
+        e.target.cloneDom = infoWindow.dom.cloneNode(true);
+
+        // console.log(infoWindow.dom.offsetLeft);
+        // console.log(infoWindow.dom);
+        e.target.cloneDom.style.top = infoWindow.dom.offsetTop + 80 + "px";
+        e.target.cloneDom.style.left = infoWindow.dom.offsetLeft + 100 + "px";
+        // 先删除之前的，后增加现在的
+        // this.removeCloneDom();
+        that.removeCloneDom();
+        document.body.appendChild(e.target.cloneDom);
+        that.workerManCloneDom = e.target.cloneDom;
+        infoWindow.close();
+        that.workerManInfoWindow = infoWindow;
+      })
+    }
+
+    if (
+      DEVICE_TYPE.WORKORDER != markerType && 
+      DEVICE_TYPE.INSPECTOR != markerType
+    ) {
       marker.content = this.getMarketContent(data);
       marker.on("mouseover", infoOpen);
       marker.on("mouseout", infoClose);
@@ -238,16 +276,29 @@ class gaodeMap {
     }
 
     function infoOpen(e) {
-      // 如果有cloneDom就删了
-      console.log(that.cloneDom);
-      // 删除克隆出来的clonedom
-      that.removeCloneDom();
+      // 删除克隆出来的线的clonedom
 
       let options = map.getStatus();
       options.scrollWheel = false;
       map.setStatus(options);
       infoWindow.setContent(e.target.content);
       infoWindow.open(map, e.target.getPosition());
+
+      // console.log(infoWindow.dom);
+
+      // 这个是为了盖住vue里的东西
+      e.target.cloneDom = infoWindow.dom.cloneNode(true);
+
+      // console.log(infoWindow.dom.offsetLeft);
+      // console.log(infoWindow.dom);
+      e.target.cloneDom.style.top = infoWindow.dom.offsetTop + 80 + "px";
+      e.target.cloneDom.style.left = infoWindow.dom.offsetLeft + 100 + "px";
+      // 先删除之前的，后增加现在的
+      // this.removeCloneDom();
+      that.removeCloneDom();
+      document.body.appendChild(e.target.cloneDom);
+      that.markerCloneDom = e.target.cloneDom;
+      infoWindow.close();
       that.markerInfoWindow = infoWindow;
     }
   }
@@ -317,6 +368,17 @@ class gaodeMap {
         dom.remove();
         return html;
       }
+      case DEVICE_TYPE.INSPECTOR: {
+        const dom = createPop(workerManInfowindow, {
+          title: "值班人员",
+          data: data,
+          map: map
+        });
+        const html = dom.$el;
+        dom.remove();
+        return html;
+      }
+
     }
   }
 
@@ -393,7 +455,7 @@ class gaodeMap {
       case DEVICE_TYPE.INSPECTOR: {
         let icon = new AMap.Icon({
           //size: new AMap.Size(51, 23),
-          image: require("../assets/images/zhibanrenyuan.png")
+          image: require("../assets/images/zhibanrenyuan.jpg")
         });
         marker.setIcon(icon);
         break;
@@ -510,8 +572,8 @@ class gaodeMap {
         // 这个是为了盖住vue里的东西
         polyline.cloneDom = infoWindow.dom.cloneNode(true);
 
-        console.log(infoWindow.dom.offsetLeft);
-        console.log(infoWindow.dom);
+        // console.log(infoWindow.dom.offsetLeft);
+        // console.log(infoWindow.dom);
         polyline.cloneDom.style.top = infoWindow.dom.offsetTop + 80 + "px";
         polyline.cloneDom.style.left = infoWindow.dom.offsetLeft + 100 + "px";
         // 先删除之前的，后增加现在的
@@ -538,8 +600,17 @@ class gaodeMap {
   }
 
   removeCloneDom() {
+    // 线
     this.cloneDom && document.body.removeChild(this.cloneDom);
+    // 设备
+    this.markerCloneDom && document.body.removeChild(this.markerCloneDom);
+    // 值班人员
+    this.workerManCloneDom && document.body.removeChild(this.workerManCloneDom);
+     
+        // that.workerManInfoWindow = infoWindow;
     this.cloneDom = null;
+    this.markerCloneDom = null;
+    this.workerManCloneDom = null;
   }
 
   // 创建一条新的线

gassafety-web/src/views/enterprise/mapView/components/RightBototmData.vue

@@ -10,14 +10,16 @@
     </div>
 
     <div class="right">
-      <template v-for="item in list" >
+      <template v-for="item in list">
         <div class="right-content" :key="item.type">
           <div class="text-icon">
-            <i class="iconfont icon-gdcd"></i>
+            <i  class="iconfont" :class="[iconClass(item),{iconFontSize: item.type==4 }]"></i>
           </div>
           <div class="text">
-            <div class="top">{{typeName[item.type]}}</div>
-            <div class="bottom">{{item.number}}{{item.type==99?"KM":"个" }}</div>
+            <div class="top">{{ typeName[item.type] }}</div>
+            <div class="bottom">
+              {{ item.number }}{{ item.type == 99 ? "KM" : "个" }}
+            </div>
           </div>
         </div>
       </template>
@@ -32,21 +34,32 @@ export default {
       type: Array,
     },
   },
-  data(){
+  data() {
     return {
-      typeName:{
-        "1":"调压箱",
-        "2":"阀门井",
-        "3":"流量计",
-        "4":"压力表",
-        "99":"管道",
+      typeName: {
+        1: "调压箱",
+        2: "阀门井",
+        3: "流量计",
+        4: "压力表",
+        99: "管道",
       },
-      // type
-    }
+      iconList: {
+        1: "icon-tyxgs",
+        2: "icon-fmjgs",
+        3: "icon-lljgs",
+        4: "icon-ylbgs",
+        99: "icon-gdcd",
+      },
+    };
   },
   created() {
     console.log("list", this.list);
   },
+  methods: {
+    iconClass(item) {
+      return this.iconList[item.type]
+    },
+  },
 };
 </script>
 
@@ -128,5 +141,9 @@ export default {
       }
     }
   }
+  // 单独调整下最后一个icon的大小
+  .iconFontSize{
+    font-size: 50px !important;
+  }
 }
 </style>
\ No newline at end of file

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

@@ -63,8 +63,6 @@
       </div>
     </div>
 
-
-
     <el-input
       v-model="keyWord"
       placeholder="点击输入"
@@ -96,16 +94,20 @@
       </div>
     </div>
 
-    <RightBototmData :list="rightBototmData"/>
+    <RightBototmData :list="rightBototmData" />
   </div>
 </template>
 <script>
 // import  from "utils/gaodeMapView.js";
 import { pipeAllInfoList, countPipeLength } from "@/api/device/pipe.js";
-import gaodeMap, { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMapView.js";
+import gaodeMap, {
+  map,
+  DEVICE_TYPE,
+  mapOperateType,
+} from "utils/gaodeMapView.js";
 import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
 import RightBototmData from "./components/RightBototmData.vue";
-import { getInspectorLocations } from "@/api/inspectorLocation/location"
+import { getInspectorLocations } from "@/api/inspectorLocation/location";
 
 export default {
   components: {
@@ -161,14 +163,17 @@ export default {
   },
   async created() {
     await countPipeLength().then((res) => {
-      console.log("管道管道管道管道管道管道", res);
+      // console.log("管道管道管道管道管道管道", res);
       const obj = { number: res.data, type: "99" };
       this.rightBototmData.push(obj);
     });
     await countDeviceByType().then((res) => {
-      console.log("markerresresresresresresresresresresresres", res);
+      // console.log("markerresresresresresresresresresresresres", res);
       this.rightBototmData.push(...res.data);
     });
+    // 值班人员
+    this.getInspectorLocations();
+
     console.log(this.rightBototmData);
   },
   mounted() {
@@ -183,7 +188,6 @@ export default {
       gaoMap.searchTips("tipinput");
       this.getDeviceInfo();
       this.getPipeList();
-      this.getInspectorLocations();
     },
     // 左边的Bar修改值
     leftBarChange(item) {
@@ -374,14 +378,12 @@ export default {
         }
       });
     },
-    getInspectorLocations(){
-      getInspectorLocations().then((res) =>{
-        if(res.code == 200){
-          for(var i =0; i<res.data.length; i++){
-            this.gaoMap.addMarker(
-              DEVICE_TYPE.INSPECTOR,
-              res.data[i]
-            );
+    getInspectorLocations() {
+      getInspectorLocations().then((res) => {
+        if (res.code == 200) {
+          console.log(" 值班人员", res);
+          for (var i = 0; i < res.data.length; i++) {
+            this.gaoMap.addMarker(DEVICE_TYPE.INSPECTOR, res.data[i]);
           }
         }
       });
@@ -430,7 +432,7 @@ export default {
       }
       // 辅助新建重新画线
       // if (!this.gaoMap.lineFlag || this.gaoMap.lineType != 1) return;
-      console.log("利用window把lineFlagh恢复");
+      // console.log("利用window把lineFlagh恢复");
       this.gaoMap.lineFlag = false;
       // this.gaoMap.createNewLine();
     },
@@ -453,10 +455,10 @@ export default {
 
 
 <style lang="scss" scoped>
-#container{
+#container {
   position: fixed;
   top: 80px;
-  bottom:0;
+  bottom: 0;
   width: 100%;
 }
 // 左边的bar