Merge branch 'develop_jzl'

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

@@ -432,6 +432,13 @@
   }
 }
 
+.rightPic{
+  .el-bottom {
+    .el-table__body-wrapper {
+      max-height: 250px !important;
+    }
+  }
+}
 // 设备巡检详情页表格样式
 .inspectiondetail {
   .el-table {

gassafety-web/src/components/PopWindowGis/detectorOnlyInfoWindow.vue

@@ -9,6 +9,31 @@
         <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
       </div>
     </div>
+    <div class="contant">
+      <div>
+        <div class="theadtop">
+          设备名称: <span v-un-content>{{ data.detectorName }}</span>
+        </div>
+        <div>
+          设备编号: <span v-un-content>{{ data.detectorCode }}</span>
+        </div>
+        <div>
+          联系人: <span v-un-content>{{ data.linkman }}</span>
+        </div>
+        <div>
+          联系电话: <span v-un-content>{{ data.phone }}</span>
+        </div>
+        <div>
+          设备状态: <span v-un-content>{{ data.detectorStatus }}</span>
+        </div>
+        <div>
+          报警时间: <span v-un-content>{{ data.alarmTime }}</span>
+        </div>
+        <div>
+          创建时间: <span v-un-content>{{ data.creatTime }}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -23,37 +48,60 @@ export default {
     map: null,
   },
   data() {
-    return {};
+    return {
+      userTypeName: ["家用报警器", "商用报警器", "工业报警器"],
+    };
   },
-  computed: {},
+  mounted() {},
   methods: {
     moment,
-
+    deviceMore() {
+      this.data.class.view.$router.push({
+        // path: "/dataMonitoring/realtimedetail",
+        path: "/device/deviceInfoDetail",
+        query: {
+          deviceId: this.data.deviceId,
+          // deviceType: this.data.deviceType,
+        },
+      });
+    },
     close() {
       this.map.clearInfoWindow();
       this.data.class.view.domAllShow();
+      this.data.class.clearDetectorOnlyOpen();
     },
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .wrapper {
-  width: 406px;
-  max-height: 500px;
+  // width: 406px;
+  max-height: 430px;
   // background: #fff;
-  background: rgba(7, 29, 51, 0.9);
-  color: #fff;
   border-radius: 4px;
+  background: rgba(7, 29, 51, 0.9);
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  color: #fff;
   // overflow: hidden;
   .top {
     width: 100%;
     height: 51px;
-    // background-color: #ff5a67;
-    background-image: url(../../assets/images/redTopBg.png);
+    // background-color: #053b6a;
+    background-image: url(../../assets/images/blueTopBg.png);
     background-size: 100% 100%;
     background-position: center;
     &:before {
+      // content: "";
+      // position: absolute;
+      // left: -20px;
+      // top: 5px;
+      // width: 0px;
+      // height: 0px;
+      // z-index:-1;
+      // border-top: 15px solid transparent;
+      // border-bottom: 15px solid transparent;
+      // border-right: 30px solid #053b6a;
       content: "";
       position: absolute;
       left: -20px;
@@ -61,7 +109,7 @@ export default {
       z-index: -1;
       width: 33px;
       height: 33px;
-      background-image: url(../../assets/images/redLeftTriangle.png);
+      background-image: url(../../assets/images/blueLeftTriangle.png);
     }
     .text {
       font-weight: 600;
@@ -79,100 +127,8 @@ export default {
       }
     }
   }
-  .content {
-    position: relative;
-    max-height: 300px;
-    overflow: hidden;
-    overflow-y: auto;
-    padding-bottom: 2px;
-    border-bottom: 1px solid #eeeeee;
-    .eq-content {
-      // min-height: 156px;
-      box-sizing: border-box;
-      padding: 13px 22px 0px 22px;
-      // border-bottom: 1px solid #e2e2e2;
-      .text-wrapper {
-        padding-top: 1px;
-        & > div {
-          margin-bottom: 6px;
-        }
-        .eq-text {
-          font-size: 14px;
-          font-weight: 400;
-          color: #fff;
-          opacity: 1;
-          & > span {
-            vertical-align: top;
-            display: inline-block;
-            // white-space: nowrap;
-            // text-overflow: ellipsis;
-            // overflow: hidden;
-            word-break: break-all;
-            max-width: 100px;
-          }
-        }
-      }
-      .pic {
-        width: 180px;
-        height: 103px;
-        // background-color: black;
-        img {
-          width: 100%;
-          height: 100%;
-          // cursor: pointer;
-        }
-      }
-    }
-  }
-
-  .maintain-content {
-    width: 100%;
-    max-height: 119px;
-    padding-left: 22px;
-    // padding-right: 22px;
-    // padding-bottom: 10px;
-    // padding-top: 16px;
-    box-sizing: border-box;
-    // border-bottom: 1px solid #e2e2e2;
-    & > div {
-      margin-bottom: 8px;
-      font-size: 14px;
-      font-weight: 400;
-      span {
-        vertical-align: top;
-        display: inline-block;
-        word-break: break-all;
-        max-width: 280px;
-      }
-    }
-  }
-  .warn-wrapper {
-    .warn-content {
-      box-sizing: border-box;
-      padding: 10px 0 2px 22px;
-      border-bottom: 1px solid #e2e2e2;
-      color: #fe5966;
-      & > div {
-        font-size: 14px;
-        font-weight: 400;
-        margin-bottom: 8px;
-      }
-    }
-    .btn {
-      padding: 16px 0;
-      text-align: center;
-      span {
-        display: inline-block;
-        padding: 0 10px;
-        .elbtn {
-          background-color: #053b6a;
-          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-          width: 95px;
-          height: 33px;
-          // border: none;
-        }
-      }
-    }
+  .contant {
+    padding: 10px;
   }
 }
 

gassafety-web/src/utils/gaodeMapView.js

@@ -17,7 +17,7 @@ import videoView from "../components/PopWindowGis/videoView.vue";
 import videoInfowindow from "../components/PopWindowGis/videoInfowindow.vue";
 // 三个报警器
 import detectorInfoWindow from "../components/PopWindowGis/detectorInfoWindow.vue";
-import detectorOnlyInfoWindow from "../components/PopWindowGis/detectorInfoWindow.vue";
+import detectorOnlyInfoWindow from "../components/PopWindowGis/detectorOnlyInfoWindow.vue";
 
 import { getArray } from "@/utils/gassafety.js";
 import { lineColor, mapStyle } from "./mapCommon.js";
@@ -101,7 +101,8 @@ class gaodeMap {
       // if (this.lineType !=1 || this.lineFlag) return;
       this.closeInfoWindow();
       this.polyLinesColorClear();
-
+      // 删除独立报警器
+      this.clearDetectorOnlyOpen();
       this.domAllShow();
       if (this.lineType != 1 || this.lineFlag) return;
       // 除了这里，还要利用vue页面的window事件辅助，当组件出来的时候，就得利用window事件
@@ -383,18 +384,25 @@ class gaodeMap {
     if (DEVICE_TYPE.DETECTOR_ONLY == markerType) {
       // 如果报警器用户下的单一报警器
       // 如果this.detcetorMarker有值就删了
-      this.detcetorMarker && map.remove(this.detcetorMarker);
-      this.detcetorMarker = null;
+      this.clearDetectorOnlyOpen();
 
       marker.markerType = markerType;
       marker.data = data;
       marker.infoWindow = infoWindow;
       // marker.on("mousedown", this.detectorOpen
       const e = {
-        target,
+        target: marker,
         lnglat: [data.longitude, data.latitude]
       };
+      // 先把infowindow关掉
+      this.detectorOpenInfoWindow && this.detectorOpenInfoWindow.close();
+      this.detectorOnlyOpenInfowindow &&
+        this.detectorOnlyOpenInfowindow.close();
+      // 回调，先移动，后展示infowindow
+      this.handleInfoWindowOpenFunc = () => {
         this.detectorOnlyOpen(e);
+      };
+      this.panTo([data.longitude, data.latitude - 0.08]);
       marker.setExtData(data);
 
       // 赋值上去
@@ -545,18 +553,23 @@ class gaodeMap {
     e.target.infoWindow.setContent(e.target.content);
     e.target.infoWindow.open(map, e.target.getPosition());
     this.boxCollision(e.target.infoWindow.dom);
-    this.workerManInfoWindow = e.target.infoWindow;
+    this.detectorOpenInfoWindow = e.target.infoWindow;
   };
   // 报警器用户下的单独报警器
   detectorOnlyOpen = e => {
     this.markerType = e.target.markerType;
     e.target.content = this.getMarketContent(e.target.data);
     e.target.infoWindow.setContent(e.target.content);
+    e.target.infoWindow.setOffset(new AMap.Pixel(24, -21));
     e.target.infoWindow.open(map, e.target.getPosition());
     this.boxCollision(e.target.infoWindow.dom);
-    this.workerManInfoWindow = e.target.infoWindow;
+    this.detectorOnlyOpenInfowindow = e.target.infoWindow;
   };
-
+  // 清空独立报警器
+  clearDetectorOnlyOpen() {
+    this.detcetorMarker && map.remove(this.detcetorMarker);
+    this.detcetorMarker = null;
+  }
   // 鼠标移入设备时候实行的函数
   infoOpen = e => {
     if (e.target.getExtData().alarmState == 1) {
@@ -748,7 +761,7 @@ class gaodeMap {
       case DEVICE_TYPE.DETECTOR_ONLY: {
         // console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
         const dom = createPop(detectorOnlyInfoWindow, {
-          title: "detector",
+          title: "detectorOnly",
           data: data,
           map: map
         });
@@ -1227,10 +1240,12 @@ class gaodeMap {
     // gis地图页面的bottomdata组件
     const {
       Bottom: { $el: pageDomBottom },
-      Right: { $el: pageDomRight }
+      Right: { $el: pageDomRight },
+      RightPic: { $el: pageDomRightPic }
     } = this.view.$refs;
-    this.mathWho(infowindowDom, pageDomBottom, "bottomDataShow", "bottom");
-    this.mathWho(infowindowDom, pageDomRight, "rightDataShow", "right");
+    // this.mathWho(infowindowDom, pageDomBottom, "bottomDataShow", "bottom");
+    // this.mathWho(infowindowDom, pageDomRight, "rightDataShow", "right");
+    this.mathWho(infowindowDom,pageDomRightPic,"RightPicShow","rightpic");
   }
   // domAttr view里的属性
   //attr 存储在类里的值
@@ -1275,6 +1290,7 @@ class gaodeMap {
   domAllShow() {
     this.view.bottomDataShow = true;
     this.view.rightDataShow = true;
+    this.view.RightPicShow = true;
   }
 
   // 把map里的in佛window转化成vue里的dom
@@ -1304,6 +1320,8 @@ class gaodeMap {
     // 工人的轨迹线条用的
     this.markerPassedPolylineInfoWindow &&
       this.markerPassedPolylineInfoWindow.close();
+    this.detectorOpenInfoWindow && this.detectorOpenInfoWindow.close();
+    this.detectorOnlyOpenInfowindow && this.detectorOnlyOpenInfowindow.close();
   }
   // infoWindow的拖拽
   infoWindowMove(infoWindow) {

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

@@ -10,8 +10,9 @@
       <div class="bottom right-bottom-data-left">
         <el-table
           size="mini"
-          :data="detcetorList"
-          style="width: 100%; maxheight: 600px"
+          :data="tableData"
+          style="width: 100%;"
+          :height="tableHeight"
           class="el-bottom"
         >
           <!-- :height="tableHeight" -->
@@ -28,24 +29,27 @@
           </el-table-column>
           <el-table-column prop="alarmTime" label="报警时间" width="">
             <template slot-scope="scope">
-              <div v-un-content>{{scope.row.alarmTime}}</div>
+              <div v-un-content>{{ scope.row.alarmTime }}</div>
             </template>
           </el-table-column>
           <el-table-column prop="creatTime" label="创建时间" width="">
             <template slot-scope="scope">
-              <div v-un-content>{{scope.row.creatTime}}</div>
+              <div v-un-content>{{ scope.row.creatTime }}</div>
             </template>
           </el-table-column>
           <el-table-column prop="alarmValue" label="定位" width="50">
             <template slot-scope="scope">
-              <div @click="createDetector(scope)" class="iconfont icon-bjqdw">
-              </div>
+              <div
+                @click="createDetector(scope)"
+                class="iconfont icon-bjqdw"
+              ></div>
               <!-- {{ scope.row.userId }} -->
             </template>
           </el-table-column>
         </el-table>
       </div>
     </div>
+
   </div>
 </template>
 
@@ -72,55 +76,7 @@ export default {
           city: "普陀区",
           address: "上海市普陀区金沙江路",
         },
-        {
-          deviceCode: "2016-05-03",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路",
-        },
-        {
-          deviceCode: "2016-05-03",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路",
-        },
-        {
-          deviceCode: "2016-05-03",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路",
-        },
-        {
-          deviceCode: "2016-05-03",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路",
-        },
-        {
-          deviceCode: "2016-05-03",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路",
-        },
-        {
-          deviceCode: "2016-05-03",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路",
-        },
-        {
-          deviceCode: "2016-05-03",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路",
-        },
+        
       ],
     };
   },
@@ -144,10 +100,11 @@ export default {
       this.$parent.centerShow = false;
     },
     // 点击创建点并且定位过去
-    createDetector(data){
+    createDetector(data) {
       console.log(data);
-      this.$parent.gaoMap.addMarker('detector_only');
-    }
+      this.close();
+      this.$parent.gaoMap.addMarker("detector_only", data.row);
+    },
   },
 };
 </script>
@@ -286,7 +243,8 @@ export default {
       }
     }
   }
-  .iconfont{
+
+  .iconfont {
     cursor: pointer;
   }
   // 单独调整下最后一个icon的大小
@@ -306,6 +264,5 @@ export default {
   .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;
   }
-
 }
 </style>
\ No newline at end of file

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

+<template>
+  <div class="wrapper rightPic">
+    <div class="math">
+      <div><span>2012</span>报警设备</div>
+      <div><span>2022</span>在线设备</div>
+      <div><span>2052</span>离线设备</div>
+    </div>
+    
+    <div class="left">
+      <div class="bottom right-bottom-data-left">
+        <el-table
+          size="mini"
+          :data="tableData"
+          style="width: 100%"
+          :height="tableHeight"
+          class="el-bottom"
+        >
+          <el-table-column prop="deviceCode" label="编号" width="80">
+          </el-table-column>
+          <el-table-column prop="deviceName" label="名称" width="">
+          </el-table-column>
+          <el-table-column prop="province" label="报警类型" width="">
+          </el-table-column>
+          <el-table-column prop="city" label="报警开始时间" width="180">
+          </el-table-column>
+          <el-table-column prop="address" label="报警内容" width="">
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
+
+export default {
+  props: {},
+  data() {
+    return {
+      timer: null,
+      repeatFinshed: false,
+      tableHeight: 202,
+      tableData: [
+        {
+          deviceCode: "ZhC-11",
+          deviceName: "流量计",
+          province: "压力异常",
+          city: "2021-02-02 16-00-00",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "ZhC-11",
+          deviceName: "流量计",
+          province: "压力异常",
+          city: "2021-02-02 16-00-00",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "ZhC-11",
+          deviceName: "流量计",
+          province: "压力异常",
+          city: "2021-02-02 16-00-00",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "ZhC-11",
+          deviceName: "流量计",
+          province: "压力异常",
+          city: "2021-02-02 16-00-00",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "ZhC-11",
+          deviceName: "流量计",
+          province: "压力异常",
+          city: "2021-02-02 16-00-00",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "ZhC-11",
+          deviceName: "流量计",
+          province: "压力异常",
+          city: "2021-02-02 16-00-00",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "ZhC-11",
+          deviceName: "流量计",
+          province: "压力异常",
+          city: "2021-02-02 16-00-00",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "ZhC-11",
+          deviceName: "流量计",
+          province: "压力异常",
+          city: "2021-02-02 16-00-00",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "ZhC-11",
+          deviceName: "流量计",
+          province: "压力异常",
+          city: "2021-02-02 16-00-00",
+          address: "上海市普陀区金沙江路",
+        },
+      ],
+    };
+  },
+  created() {},
+
+  methods: {},
+};
+</script>
+
+<style lang="scss"  scoped>
+.wrapper {
+  width: 520px;
+  max-height: 258px;
+  box-sizing: border-box;
+  padding: 10px;
+  padding-top: 15px;
+  padding-right: 0px;
+  position: fixed;
+  right: 20px;
+  top: 150px;
+  // background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  background-image: url(../../../../assets/images/bg/newPicBg.png);
+  background-size: 100% 100%;
+  .math {
+    width: 520px;
+    position: absolute;
+    top:-40px;
+    left:0px;
+    display: flex;
+    justify-content: space-between;
+    &>div{
+      >span{
+        color:aqua;
+      }
+      font-size: 14px;
+      color:#fff;
+      text-align: center;
+      line-height: 30px;
+      width: 108px;
+      height:30px;
+      background-image: url(../../../../assets/images/bg/bg.png);
+    }
+  }
+  & > div {
+  }
+  .left {
+    width: 500px;
+    max-height: 256px;
+    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;
+
+    .el-table__body-wrappe {
+      max-height: 140px !important;
+    }
+    .top {
+      height: 19px;
+      // background-color: #053b6a;
+      color: #fff;
+      // line-height: 32px;
+      // padding-left: 12px;
+      position: relative;
+
+      .title {
+        position: absolute;
+        left: 50%;
+        margin-left: -92px;
+        top: -5px;
+      }
+      .repeat {
+        position: absolute;
+        top: -5px;
+        right: 160px;
+        color: #fff;
+        cursor: pointer;
+        &:hover {
+          color: #2788ea;
+        }
+      }
+      .repeat2 {
+        position: absolute;
+        right: 206px;
+        color: #67c23a;
+      }
+      .more {
+        position: absolute;
+        right: 38px;
+        top: -5px;
+        color: #fff;
+        float: right;
+        margin-right: 20px;
+        cursor: pointer;
+        &:hover {
+          color: #2788ea;
+        }
+      }
+    }
+    .bottom {
+      // width: 680px;
+      margin: 0 auto;
+    }
+  }
+  .right {
+    width: 740px;
+    display: flex;
+    flex-wrap: wrap;
+    // justify-content: space-between;
+    align-content: flex-start;
+    // margin-top: 7px;
+    & > .right-content {
+      background-color: #fff;
+      width: 238px;
+      height: 82px;
+      margin-bottom: 29px;
+      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
+      margin-right: 10px;
+      display: flex;
+      &.three {
+        margin-right: 0px;
+      }
+      // 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;
+        }
+      }
+    }
+  }
+  // 单独调整下最后一个icon的大小
+  .iconFontSize {
+    font-size: 50px !important;
+  }
+  .fade-enter-to,
+  .fade-leave {
+    opacity: 1;
+  }
+  .fade-leave-active {
+    transition: opacity 0.5s;
+  }
+  .fade-enter-active {
+    transition: opacity 0s;
+  }
+  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+    opacity: 0;
+  }
+}
+</style>
\ No newline at end of file

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

@@ -66,13 +66,13 @@
       </div>
     </div>
     <Right
-      v-show="rightDataShow"
+      v-show="rightDataShow && 0"
       :class="{ classShow: !rightDataShow }"
       ref="Right"
       :list="rightBototmData"
     />
     <Bottom
-      v-show="bottomDataShow"
+      v-show="bottomDataShow && 0"
       :class="{
         classShow: !bottomDataShow,
         bottomMarginRight: bottomMarginRight,
@@ -80,6 +80,8 @@
       ref="Bottom"
       :list="rightBototmData"
     />
+    <!-- 右边 -->
+    <RightPic v-show="RightPicShow" ref="RightPic"/>
     <!-- 报警工单 -->
     <CreateWork
       ref="CreateWork"
@@ -93,7 +95,15 @@
       @callback="CreateWorkTroubleCallBack"
     />
     <!-- 报警用户的报警器列表 -->
-    <Center :show="centerShow" ref="center" :detcetorList="detcetorList"/>
+    <Center :show="centerShow" ref="center" :detcetorList="detcetorList" />
+    <!-- 当报警列表隐藏时，这个显示,点击就让Center回来 -->
+    <div
+      @click="centerShow = true"
+      v-show="!centerShow && gaoMap && gaoMap.detcetorMarker"
+      class="circle"
+    >
+      列表
+    </div>
     <div
       ref="drawer"
       class="drawer"
@@ -390,7 +400,10 @@
 <script>
 // import  from "utils/gaodeMapView.js";
 import { pipeAllInfoList, countPipeLength } from "@/api/device/pipe.js";
-import { detectorUserList,getdetectorInfoList } from "@/api/device/detector.js";
+import {
+  detectorUserList,
+  getdetectorInfoList,
+} from "@/api/device/detector.js";
 import { videoList } from "@/api/device/videoManager.js";
 import gaodeMap, {
   map,
@@ -404,6 +417,7 @@ import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
 import { getMapHiddenTroublelist } from "@/api/riskManagement/hiddenTrouble";
 import Bottom from "./components/Bottom.vue";
 import Right from "./components/Right.vue";
+import RightPic from "./components/RightPic.vue";
 import Center from "./components/Center.vue";
 import CreateWork from "./components/CreateWork.vue";
 import CreateWorkTrouble from "./components/CreateWorkTrouble.vue";
@@ -417,7 +431,8 @@ export default {
     CreateWork,
     CreateWorkTrouble,
     Right,
-    Center
+    RightPic,
+    Center,
   },
   data() {
     return {
@@ -555,6 +570,7 @@ export default {
       rightBototmData: [],
       bottomDataShow: true,
       rightDataShow: true,
+      RightPicShow:true,
       // 如果右边与下面重叠了，bottom要往左移
       bottomMarginRight: false,
       // 是否显示生成工单弹框
@@ -574,8 +590,8 @@ export default {
       mapStyle: true,
 
       // Center组件的参数，也就是报警用户的的list
-      centerShow:false,
-      detcetorList:[],
+      centerShow: false,
+      detcetorList: [],
     };
   },
   created() {
@@ -812,16 +828,17 @@ export default {
       });
     },
     // 获取报警器用户的报警器分布
-    getDetectorInfoList(queryParams){
-      return getdetectorInfoList(queryParams).then(res=>{
-        console.log("queryParams",res)
-        if(res.code ==200){
-          this.detcetorList=res.data;
-          this.centerShow=true;
+    getDetectorInfoList(queryParams) {
+      console.log(queryParams);
+      return getdetectorInfoList(queryParams).then((res) => {
+        console.log("queryParams", res);
+        if (res.code == 200) {
+          this.detcetorList = res.data;
+          this.centerShow = true;
           // 传递回去
           return res.code;
         }
-      })
+      });
     },
     // 获取报警资源，并且改变图上的状态
     getSelectAlarmDevice() {
@@ -1362,8 +1379,8 @@ export default {
         this.videoInfoWindowShow(iten, lat, lng);
       } else if (item.value > 10 && item.value <= 13) {
         // this.detectorOpen
-        console.log("detectorInfoWindowShow")
-        this.detectorInfoWindowShow(iten, lat, lng)
+        console.log("detectorInfoWindowShow");
+        this.detectorInfoWindowShow(iten, lat, lng);
       } else {
         // 其他设备
         this.diveceInfoWindowShow(iten, lat, lng);
@@ -1518,7 +1535,6 @@ export default {
       };
     },
 
-
     // 向右的箭头的动画
     arrowRightChange(item) {
       const index = this.arrowRightNum.indexOf(item.value);
@@ -2612,5 +2628,19 @@ input[type="radio"] {
     }
   }
 }
+// 报警器列表消失的时候右下角的列表
+
+.circle {
+  width: 100px;
+  height: 100px;
+  background-color: #31eaea;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  border-radius: 50%;
+  cursor: pointer;
+  text-align: center;
+  line-height: 100px;
+}
 </style>