修改数据地图里的infowindow层级问题

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

 @font-face {
   font-family: "iconfont"; /* Project id 2692138 */
-  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');
+  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');
 }
 
 .iconfont {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-gdcd:before {
+  content: "\e615";
+}
+
+.icon-tyxgs:before {
+  content: "\e610";
+}
+
+.icon-fmjgs:before {
+  content: "\e612";
+}
+
+.icon-rqbgs:before {
+  content: "\e613";
+}
+
+.icon-ljsgs:before {
+  content: "\e614";
+}
+
 .icon-ylb:before {
   content: "\e60f";
 }

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

@@ -15,7 +15,7 @@
       :show-file-list="true"
       :headers="headers"
       class="upload-file-uploader"
-      :class="{hide:addShow}"
+      :class="{ hide: addShow }"
       ref="upload"
     >
       <!-- 上传按钮 -->
@@ -33,8 +33,13 @@
         的文件
       </div>
     </el-upload>
-    <el-dialog  :modal="modal" :visible.sync="dialogVisible">
-      <img width="100%" :src="dialogImageUrl" alt="" />
+    <el-dialog
+      :center="true"
+      width="50%"
+      :modal="modal"
+      :visible.sync="dialogVisible"
+    >
+      <img :src="dialogImageUrl" alt="" />
     </el-dialog>
     <!-- 文件列表 -->
     <!-- <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
@@ -80,7 +85,6 @@ export default {
       type: Boolean,
       default: false,
     },
-
   },
   data() {
     return {
@@ -89,10 +93,10 @@ export default {
         Authorization: "Bearer " + getToken(),
       },
       fileList: [],
-      modal:false,
-      dialogVisible:false,
-      dialogImageUrl:"",
-      addShow:true,
+      modal: false,
+      dialogVisible: false,
+      dialogImageUrl: "",
+      addShow: true,
     };
   },
   computed: {
@@ -167,7 +171,7 @@ export default {
     // 文件列表移除文件
     handleRemove(file, fileList) {
       console.log("列表移除", file, fileList);
-      this.addShow = fileList.length>0 ?true:false;
+      this.addShow = fileList.length > 0 ? true : false;
       this.$emit("remove", file);
     },
     // 删除文件
@@ -189,10 +193,13 @@ export default {
       //   }
       // });
     },
-    handleFileClick(file) {
-      this.dialogImageUrl = file.response.url;
-      this.dialogVisible=true;
+    handleFileClick(file, fileList) {
+      this.dialogImageUrl = file.response ? file.response.url : file.url;
+      //  this.dialogImageUrl =if(this.fileArr) this.fileArr[0].url;
+
+      this.dialogVisible = true;
       console.log(file);
+      // console.log(file.response.url)
     },
     // 获取文件名称
     getFileName(name) {
@@ -203,19 +210,21 @@ export default {
       }
     },
     // 当改变列表改变时
-    fileChange(file,fileList){
-      this.addShow = fileList.length>0 ?true:false;
-
-    }
+    fileChange(file, fileList) {
+      this.addShow = fileList.length > 0 ? true : false;
+    },
   },
   created() {
     // this.fileList = this.list;
-    this.addShow = this.fileArr.length>0 ?true:false;
+    this.addShow = this.fileArr.length > 0 ? true : false;
   },
 };
 </script>
 
 <style scoped lang="scss">
+img {
+  width: 100%;
+}
 .upload-file-uploader {
   margin-bottom: 5px;
 }
@@ -234,5 +243,4 @@ export default {
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }
-
 </style>

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

@@ -121,6 +121,7 @@ export default {
     }
   }
   .content {
+    position: relative;
     max-height: 400px;
     overflow: hidden;
     overflow-y: auto;

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

@@ -416,7 +416,15 @@ export default {
 
 
 <style lang="scss" scoped>
+// 解决地图下拉框
+#container{
+  position: fixed;
+  top: 80px;
+  bottom:0;
+  width: 100%;
+}
 // 左边的bar
+
 .leftBar-wrapper {
   position: fixed;
   left: 100px;

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

+<template>
+  <div class="wrapper">
+    <div class="left">
+      <div class="top">设备报警最新记录</div>
+
+      <div class="bottom">
+        <div class="one">设备编号:<span>1123123123</span></div>
+        <div class="two">报警时间:<span>34523452345</span></div>
+      </div>
+    </div>
+
+    <div class="right">
+      <template v-for="item in list" >
+        <div class="right-content" :key="item.type">
+          <div class="text-icon">
+            <i class="iconfont icon-gdcd"></i>
+          </div>
+          <div class="text">
+            <div class="top">{{typeName[item.type]}}</div>
+            <div class="bottom">{{item.number}}{{item.type==99?"KM":"个" }}</div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+    },
+  },
+  data(){
+    return {
+      typeName:{
+        "1":"调压箱",
+        "2":"阀门井",
+        "3":"流量计",
+        "4":"压力表",
+        "99":"管道",
+      },
+      // type
+    }
+  },
+  created() {
+    console.log("list", this.list);
+  },
+};
+</script>
+
+<style lang="scss"  scoped>
+.wrapper {
+  width: 778px;
+  height: 304px;
+  position: fixed;
+  right: 32px;
+  bottom: 22px;
+  // background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  & > div {
+  }
+  .left {
+    width: 278px;
+    margin-right: 12px;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
+    background-color: #fff;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 400;
+    .top {
+      height: 32px;
+      background-color: #053b6a;
+      line-height: 32px;
+      padding-left: 12px;
+    }
+    .bottom {
+      & > div {
+        height: 20px;
+        padding-left: 32px;
+        padding-bottom: 2px;
+        &.one {
+          background-color: #f0f0f0;
+          color: #2788ea;
+        }
+        &.two {
+          color: #676767;
+        }
+      }
+    }
+  }
+  .right {
+    width: 500px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: flex-start;
+    & > .right-content {
+      background-color: #fff;
+      width: 238px;
+      height: 82px;
+      margin-bottom: 29px;
+      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
+      display: flex;
+      // align-items: center;
+      .text-icon {
+        line-height: 82px;
+        padding-left: 22px;
+        margin-right: 22px;
+        i {
+          color: #053b6a;
+          font-size: 60px;
+        }
+      }
+      .text {
+        font-size: 14px;
+        padding-top: 16px;
+        .top {
+          color: #000;
+          margin-bottom: 10px;
+          font-weight: 600;
+        }
+        .bottom {
+          color: #2788ea;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

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

 <template>
   <div>
     <div style="width: 100vw; height: 100vh" id="container"></div>
-    <div class="btn-wrapper">
+    <div v-show="false" class="btn-wrapper">
       <div class="myBtn">
         <div
           class="el-btn"
@@ -63,6 +63,8 @@
       </div>
     </div>
 
+
+
     <el-input
       v-model="keyWord"
       placeholder="点击输入"
@@ -93,14 +95,20 @@
         <i class="el-icon-check"></i>
       </div>
     </div>
+
+    <RightBototmData :list="rightBototmData"/>
   </div>
 </template>
 <script>
-import gaodeMap from "utils/gaodeMap.js";
-import { pipeAllInfoList } from "@/api/device/pipe.js";
-import { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMap.js";
-import { getAllDeviceInfo } from "@/api/device/deviceInfo";
+// import  from "utils/gaodeMapView.js";
+import { pipeAllInfoList, countPipeLength } from "@/api/device/pipe.js";
+import gaodeMap, { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMapView.js";
+import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
+import RightBototmData from "./components/RightBototmData.vue";
 export default {
+  components: {
+    RightBototmData,
+  },
   data() {
     return {
       gaoMap: null,
@@ -145,8 +153,22 @@ export default {
         },
       ],
       keyWord: "",
+      // 右下角的数据data
+      rightBototmData: [],
     };
   },
+  async created() {
+    await countPipeLength().then((res) => {
+      console.log("管道管道管道管道管道管道", res);
+      const obj = { number: res.data, type: "99" };
+      this.rightBototmData.push(obj);
+    });
+    await countDeviceByType().then((res) => {
+      console.log("markerresresresresresresresresresresresres", res);
+      this.rightBototmData.push(...res.data);
+    });
+    console.log(this.rightBototmData);
+  },
   mounted() {
     this.initMap();
   },
@@ -416,6 +438,12 @@ export default {
 
 
 <style lang="scss" scoped>
+#container{
+  position: fixed;
+  top: 80px;
+  bottom:0;
+  width: 100%;
+}
 // 左边的bar
 .leftBar-wrapper {
   position: fixed;
@@ -599,37 +627,37 @@ input[type="radio"] {
   padding: 0;
   margin: 0 0.5rem 0 0;
 }
-.btn {
-  display: inline-block;
-  font-weight: 400;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  border: 1px solid transparent;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  background-color: transparent;
-  background-image: none;
-  color: #25a5f7;
-  border-color: #25a5f7;
-  padding: 0.25rem 0.5rem;
-  line-height: 1.5;
-  border-radius: 1rem;
-  -webkit-appearance: button;
-  cursor: pointer;
-  width: 6rem;
-  margin: 0 1rem 0 2rem;
-}
+// .btn {
+//   display: inline-block;
+//   font-weight: 400;
+//   text-align: center;
+//   white-space: nowrap;
+//   vertical-align: middle;
+//   -webkit-user-select: none;
+//   -moz-user-select: none;
+//   -ms-user-select: none;
+//   user-select: none;
+//   border: 1px solid transparent;
+//   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+//     border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+//   background-color: transparent;
+//   background-image: none;
+//   color: #25a5f7;
+//   border-color: #25a5f7;
+//   padding: 0.25rem 0.5rem;
+//   line-height: 1.5;
+//   border-radius: 1rem;
+//   -webkit-appearance: button;
+//   cursor: pointer;
+//   width: 6rem;
+//   margin: 0 1rem 0 2rem;
+// }
 
-.btn:hover {
-  color: #fff;
-  background-color: #25a5f7;
-  border-color: #25a5f7;
-}
+// .btn:hover {
+//   color: #fff;
+//   background-color: #25a5f7;
+//   border-color: #25a5f7;
+// }
 .input-text {
   width: 4rem;
   margin-right: 1rem;