优化上传图片预览

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

@@ -291,4 +291,6 @@
     }
   }
   // background-color: ;
-}
\ No newline at end of file
+  
+}
+// 图片预览

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/utils/gaodeMapView.js

@@ -159,7 +159,10 @@ class gaodeMap {
       offset: new AMap.Pixel(0, 5)
     });
     this.setMarkerIcon(marker);
-    if (DEVICE_TYPE.WORKORDER != markerType && DEVICE_TYPE.INSPECTOR != markerType) {
+    if (
+      DEVICE_TYPE.WORKORDER != markerType &&
+      DEVICE_TYPE.INSPECTOR != markerType
+    ) {
       marker.content = this.getMarketContent(data);
       marker.on("mouseover", infoOpen);
       marker.on("mouseout", infoClose);
@@ -238,16 +241,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;
     }
   }
@@ -539,7 +555,9 @@ class gaodeMap {
 
   removeCloneDom() {
     this.cloneDom && document.body.removeChild(this.cloneDom);
+    this.markerCloneDom && document.body.removeChild(this.markerCloneDom);
     this.cloneDom = null;
+    this.markerCloneDom=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)"></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-tyx",
+        2: "icon-fmj",
+        3: "icon-llj",
+        4: "icon-ylb",
+        99: "icon-gdcd",
+      },
+    };
   },
   created() {
     console.log("list", this.list);
   },
+  methods: {
+    iconClass(item) {
+      return this.iconList[item.type]
+    },
+  },
 };
 </script>
 

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

@@ -375,7 +375,6 @@ export default {
       });
     },
     getInspectionDataByInspector(){
-
       this.gaoMap.addMarker(
         DEVICE_TYPE.INSPECTOR,
         {longitude:114.525243,latitude:38.035002}