右上角数据列表以及滚动,数据报警器列表分页添加

gassafety-web/src/api/device/detector.js

@@ -13,8 +13,12 @@ export function detectorUserList(query) {
 // 查询报警器用户下的报警器
 export function getdetectorInfoList(query) {
   return request({
-    url: '/detector/detectorInfo/detectorInfoList',
+    url: '/detector/detectorInfo/list',
     method: 'get',
-    params: query
+    params: {
+      pageNum:1,
+      pageSize:20,
+      ...query
+    }
   })
 }

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

@@ -220,6 +220,75 @@
     }
   }
 }
+// center下的分页
+.center {
+  .el-pagination {
+    button:disabled {
+      background-color: rgba(0, 0, 0, 0);
+    }
+    .el-pager li {
+      background-color: rgba(0, 0, 0, 0);
+      color: #fff;
+      cursor: pointer;
+      &.active {
+        color: #1890ff;
+      }
+      &:hover {
+        color: #7bf8f4;
+      }
+    }
+    .btn-prev,
+    .el-pagination .btn-next {
+      background-color: rgba(0, 0, 0, 0);
+    }
+  }
+  .el-pagination .btn-prev,
+  .el-pagination .btn-next {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  // 禁用状态的左箭头
+  button[disabled] {
+    &:hover {
+      .el-icon-arrow-left,
+      .el-icon-arrow-right {
+        &::before {
+          color: #909399 !important;
+        }
+      }
+    }
+    .el-icon-arrow-left,
+    .el-icon-arrow-right {
+      &::before {
+        color: #909399;
+      }
+    }
+  }
+  button {
+    &:hover {
+      .el-icon-arrow-left,
+      .el-icon-arrow-right {
+        &::before {
+          color: #7bf8f4 !important;
+        }
+      }
+    }
+  }
+  // 平常状态下的
+  .el-icon-arrow-left,
+  .el-icon-arrow-right {
+    &::before {
+      color: #ffffff;
+    }
+  }
+  .el-pagination__jump{
+    color:#fff;
+  }
+  .el-input__inner{
+    background-color:rgba(0,0,0,0);
+    border-color:#1890ff;
+    color: #fff;
+  }
+}
 // gis地图里抽屉的搜索样式
 .search-input {
   .el-input__inner {

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

@@ -11,7 +11,7 @@
     </div>
     <div class="table-top">
       <div>
-        联系人: <span v-un-content>{{ data.username }}</span>
+        联系人: <span v-un-content>{{ data.linkMan }}</span>
       </div>
       <div>
         联系电话：<span v-un-content>{{ data.phone }}</span>
@@ -26,7 +26,7 @@
     </div>
     <div class="table-list">
       <div class="thead">
-        <div class="theadtop">设备类型</div>
+        <div class="theadtop">用户类型</div>
         <div>设备数量</div>
         <div>在线设备</div>
         <div>离线设备</div>
@@ -35,7 +35,7 @@
         <div class="last">报警中</div>
       </div>
       <div class="tbody">
-        <div class="theadtop">{{ userTypeName[data.userType] }}</div>
+        <div class="theadtop">{{ this.userTypeName[data.userType] }}</div>
         <div>{{ data.detectorCount }}</div>
         <div>{{ data.onLineNum }}</div>
         <div>{{ data.offLineNum }}</div>
@@ -65,7 +65,7 @@ export default {
   },
   data() {
     return {
-      userTypeName: ["家用报警器", "商用报警器", "工业报警器"],
+      userTypeName: ['',"家用报警器", "商用报警器", "工业报警器"],
     };
   },
   mounted() {

gassafety-web/src/utils/gaodeMapView.js

@@ -387,6 +387,15 @@ class gaodeMap {
     // 报警器用户下的独立报警器
     if (DEVICE_TYPE.DETECTOR_ONLY == markerType) {
       // 如果报警器用户下的单一报警器
+      let oldLng = [];
+      // 先记录当前的this.detcetorMarker
+      if (this.detcetorMarker) {
+        oldLng = [
+          this.detcetorMarker.data.longitude,
+          this.detcetorMarker.data.latitude
+        ];
+      }
+
       // 如果this.detcetorMarker有值就删了
       this.clearDetectorOnlyOpen();
 
@@ -402,10 +411,16 @@ class gaodeMap {
       this.detectorOpenInfoWindow && this.detectorOpenInfoWindow.close();
       this.detectorOnlyOpenInfowindow &&
         this.detectorOnlyOpenInfowindow.close();
-      // 回调，先移动，后展示infowindow
-      this.handleInfoWindowOpenFunc = () => {
+      // 因为报警器会出现同一位置的情况，如果是同一个位置，直接显示infoWindow，
+      // 如果不是同一位置，移动完了在显示
+      if (oldLng[0] == data.longitude && oldLng[1] == data.latitude) {
         this.detectorOnlyOpen(e);
-      };
+      } else {
+        // 回调，先移动，后展示infowindow
+        this.handleInfoWindowOpenFunc = () => {
+          this.detectorOnlyOpen(e);
+        };
+      }
       this.panTo([data.longitude, data.latitude - this.view.lntPosition]);
       marker.on("mousedown", this.detectorOnlyOpen);
 
@@ -1497,16 +1512,19 @@ class gaodeMap {
     });
   }
   // 报警器的显示隐藏
-  detctorMakeShow(userId, bool) {
+  detctorMakeShow(userType, bool) {
     this.detectors
       .filter(item => {
-        return item.getExtData().userId == userId;
+        return item.getExtData().userType == userType;
       })
-      .forEach(item => {
+      ?.forEach(item => {
         bool ? item.show() : item.hide();
-        // 如果独立报警器存在，且属于自身
-        if (this.detcetorMarker &&this.detcetorMarker.data.detectorId==item.data.userId) {
-          bool?this.detcetorMarker.show():this.detcetorMarker.hide();
+        // 如果有报警器，就让报警器一起隐藏
+        if (
+          this.detcetorMarker &&
+          this.detcetorMarker.data.userId == item.data.userId
+        ) {
+          bool ? this.detcetorMarker.show() : this.detcetorMarker.hide();
         }
       });
   }

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

@@ -25,6 +25,9 @@
             <!-- :height="tableHeight" -->
 
             <el-table-column prop="detectorName" label="设备名称" width="100">
+              <template slot-scope="scope">
+                <div v-un-content>{{ scope.row.detectorName }}</div>
+              </template>
             </el-table-column>
             <el-table-column prop="detectorCode" label="设备编号" width="200">
             </el-table-column>
@@ -54,6 +57,16 @@
               </template>
             </el-table-column>
           </el-table>
+          <div>
+            <el-pagination
+              @current-change="handleCurrentChangvale"
+              :page-size="pageSize"
+              layout="prev, pager, next, jumper"
+              :total="total"
+              :hide-on-single-page="total<=pageSize"
+            >
+            </el-pagination>
+          </div>
         </div>
       </div>
     </div>
@@ -72,6 +85,15 @@ export default {
     show: {
       type: Boolean,
     },
+    userId: {
+      type: [Number,String],
+    },
+    total:{
+      type:Number,
+    },
+    pageSize:{
+      type:Number,
+    }
   },
   data() {
     return {
@@ -98,16 +120,22 @@ export default {
   },
   watch: {
     // 当组件显示的时候
-    show(bol) {
-      console.log(bol);
-      if (bol) {
-        console.log(this.detcetorList);
-        this.tableData = [...this.detcetorList];
-      }
+    detcetorList(newData) {
+      // console.log(bol);
+      // if (bol) {
+      console.log(newData);
+      this.tableData = [...newData];
+      // }
     },
   },
 
   methods: {
+    handleSizeChange(val) {
+      console.log(val);
+    },
+    handleCurrentChangvale(val) {
+      this.$parent.getDetectorInfoList({userId:this.userId,pageNum:val,pageSize:this.pageSize})
+    },
     close() {
       this.fade = "fade";
       this.$parent.centerShow = false;

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

@@ -2,21 +2,21 @@
   <div class="wrapper rightPic">
     <div class="math">
       <div>
-        <span>{{ rightPicData.totalNum }}</span
+        <span>{{ rightPicData.alarmNum }}</span
         >报警总数
       </div>
       <div>
-        <span>{{ rightPicData.handledNum }}</span
-        >已处理
+        <span>{{ rightPicData.onlineNum }}</span
+        >在线设备
       </div>
       <div>
-        <span>{{ rightPicData.noHandeldNum }}</span
-        >未处理
+        <span>{{ rightPicData.offlineNum }}</span
+        >离线设备
       </div>
     </div>
 
     <div class="left">
-      <div class="bottom right-bottom-data-left">
+      <div class="bottom right-bottom-data-left" @mouseover="tableEnter" @mouseout="timerAni">
         <el-table
           size="mini"
           :data="tableData"
@@ -95,9 +95,10 @@ export default {
       this.tableData = [...newData.pageData];
       // }
       // this.tableData = [...newData.pageData];
-
       // 列表容器
-      this.getScrollHeight();
+      this.$nextTick(() => {
+        this.getScrollHeight();
+      });
     },
   },
 
@@ -118,7 +119,6 @@ export default {
       const { height: heightSelect } = select.getBoundingClientRect();
       // 滚动条的高度 = 列表高度-列表容器高度
       this.scrollHeight = heightSelect - heightWrapper;
-
       this.timerAni();
     },
     timerAni() {
@@ -132,6 +132,10 @@ export default {
         selectWrap.scrollTop += 1;
       }, 100);
     },
+    tableEnter() {
+      console.log(123);
+      clearInterval(this.timer);
+    },
   },
 };
 </script>

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

@@ -81,7 +81,7 @@
       :list="rightBototmData"
     />
     <!-- 右边 -->
-    <RightPic :rightPicData="rightPicData" v-show="RightPicShow" ref="RightPic" l />
+    <RightPic :rightPicData="rightPicData" v-show="RightPicShow" ref="RightPic"/>
     <!-- 报警工单 -->
     <CreateWork
       ref="CreateWork"
@@ -95,7 +95,7 @@
       @callback="CreateWorkTroubleCallBack"
     />
     <!-- 报警用户的报警器列表 -->
-    <Center :show="centerShow" ref="center" :detcetorList="detcetorList" />
+    <Center :show="centerShow" ref="center" :detcetorList="detcetorList" :userId="centerUserId" :total="centerTotal" :pageSize="20"/>
     <!-- 当报警列表隐藏时，这个显示,点击就让Center回来 -->
     <div
       @click="
@@ -347,8 +347,8 @@
                     <div class="list-wrapper">
                       <div class="thead">
                         <div class="no"></div>
-                        <div class="code">设备名称</div>
-                        <div class="name">设备地址</div>
+                        <div class="code">用户名称</div>
+                        <div class="name">用户地址</div>
                       </div>
                       <div
                         class="deviceList"
@@ -359,7 +359,7 @@
                       >
                         <div class="no">{{ iten.no + 1 }}</div>
                         <div :title="iten.deviceName" class="code">
-                          {{ iten.deviceName + `999` }}
+                          {{ iten.deviceName  }}
                         </div>
                         <div :title="iten.deviceAddress" class="name">
                           {{ iten.deviceAddress ? iten.deviceAddress : "-" }}
@@ -543,7 +543,7 @@ export default {
           type: "8",
           value: 11,
           icon: "icon-jiayong",
-          label: "家用报警器",
+          label: "家用报警器用户",
           nowPage: 1,
           maxPage: 99,
           list: [],
@@ -552,7 +552,7 @@ export default {
           type: "9",
           value: 12,
           icon: "icon-shangye",
-          label: "商用报警器",
+          label: "商用报警器用户",
           nowPage: 1,
           maxPage: 99,
           list: [],
@@ -561,7 +561,7 @@ export default {
           type: "10",
           value: 13,
           icon: "icon-gongye",
-          label: "工业报警器",
+          label: "工业报警器用户",
           nowPage: 1,
           maxPage: 99,
           list: [],
@@ -598,7 +598,12 @@ export default {
       // 右下角的圆
       circleShow: false,
       circleNum: 0,
+      // 报警列表的数据
       detcetorList: [],
+      // 报警列表的总数据，分页用的
+      centerTotal:0,
+      // 这是center列表翻页时候用的userId
+      centerUserId:99,
       lntPosition: 0,
       //右上角数据
       rightPicData:{},
@@ -845,7 +850,10 @@ export default {
       return getdetectorInfoList(queryParams).then((res) => {
         console.log("queryParams", res);
         if (res.code == 200) {
-          this.detcetorList = res.data;
+          this.detcetorList = res.rows;
+          this.centerUserId = queryParams.userId;
+          // 总数据
+          this.centerTotal = res.total;
           this.$refs.center.fade = "fade";
           this.centerShow = true;
           // 传递回去
@@ -2632,7 +2640,7 @@ input[type="radio"] {
       .diviceNum {
         color: #fff;
         position: absolute;
-        left: 180px;
+        left: 210px;
         top: 12px;
       }
     }