Merge branch 'develop_jzl'

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/api/enterprise/info.js

@@ -60,3 +60,13 @@ export function detectorUserList(query) {
     params: query
   })
 }
+
+// 右上角的综合列表
+export function alarmData(query) {
+  return request({
+    url: '/detector/detectorInfo/getAlarmData',
+    method: 'get',
+    params: query
+  })
+}
+

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

@@ -211,6 +211,84 @@
     }
   }
 }
+// gis地图右上角的滚动条隐藏
+.rightPic {
+  .el-table {
+    .el-table__body-wrapper {
+      overflow-y: hidden;
+      overflow-x: hidden;
+    }
+  }
+}
+// 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 {
@@ -416,7 +494,7 @@
 
 // gis地图内的bottom列表，如果隐藏在出现会有一个bug，这样可以解决
 .b {
-  &>.el-bottom {
+  & > .el-bottom {
     .el-table__body-wrapper {
       height: 140px !important;
     }
@@ -432,7 +510,7 @@
   }
 }
 
-.rightPic{
+.rightPic {
   .el-bottom {
     .el-table__body-wrapper {
       max-height: 250px !important;

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/directive/permission/index.js

 import hasRole from './hasRole'
 import hasPermi from './hasPermi'
 import unContent from './unContent'
+import loadMore from './loadMore'
 
 const install = function(Vue) {
   Vue.directive('hasRole', hasRole)
   Vue.directive('hasPermi', hasPermi)
   Vue.directive('un-content', unContent)
+  Vue.directive('loadmore', loadMore)
 }
 
 if (window.Vue) {

gassafety-web/src/directive/permission/loadMore.js

+export default {
+  bind(el, binding) {
+    const selectWrap = el.querySelector(".el-table__body-wrapper");
+    selectWrap.addEventListener("scroll", function() {
+      let sign = 10;
+      const scrollDistance =
+        this.scrollHeight - this.scrollTop - this.clientHeight;
+      console.log("binding.value", binding.value);
+      if (scrollDistance <= sign) {
+        binding.value();
+      }
+    });
+  }
+};

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，
+      // 如果不是同一位置，移动完了在显示
+      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;
@@ -243,6 +271,7 @@ export default {
     font-weight: 400;
     .title-wrapper {
       width: 100%;
+      height: 30px;
       display: flex;
       justify-content: space-between;
       background: #1890ff;

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>
+        <span>{{ rightPicData.alarmNum }}</span
+        >报警总数
+      </div>
+      <div>
+        <span>{{ rightPicData.onlineNum }}</span
+        >在线设备
+      </div>
+      <div>
+        <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"
           style="width: 100%"
           :height="tableHeight"
           class="el-bottom"
+          ref="table"
         >
-          <el-table-column prop="deviceCode" label="编号" width="80">
+          <el-table-column prop="unitName" label="所在单位" width="">
+            <template slot-scope="scope">
+              <div class="ddd" :title="scope.row.unitName">
+                {{ scope.row.unitName }}
+              </div>
+            </template>
           </el-table-column>
-          <el-table-column prop="deviceName" label="名称" width="">
+          <el-table-column prop="detectorType" label="设备类型" width="">
+            <template slot-scope="scope">
+              <div class="ddd" :title="scope.row.detectorType">
+                {{ scope.row.detectorType }}
+              </div>
+            </template>
           </el-table-column>
-          <el-table-column prop="province" label="报警类型" width="">
+          <el-table-column prop="statusName" label="预警信息" width="">
+            <template slot-scope="scope">
+              <div class="ddd" :title="scope.row.statusName">
+                {{ scope.row.statusName }}
+              </div>
+            </template>
           </el-table-column>
-          <el-table-column prop="city" label="报警开始时间" width="180">
+          <el-table-column prop="alarmTime" label="预警时间啊" width="180">
           </el-table-column>
-          <el-table-column prop="address" label="报警内容" width="">
+          <el-table-column prop="handledStatus" label="状态" width="">
+            <template slot-scope="scope">
+              <div class="ddd" :title="scope.row.handledStatus">
+                {{ scope.row.handledStatus }}
+              </div>
+            </template>
           </el-table-column>
         </el-table>
       </div>
@@ -35,7 +65,11 @@
 import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
 
 export default {
-  props: {},
+  props: {
+    rightPicData: {
+      type: Object,
+    },
+  },
   data() {
     return {
       timer: null,
@@ -43,74 +77,66 @@ export default {
       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: "上海市普陀区金沙江路",
+          unitName: "ZhC-11",
+          detectorType: "流量计",
+          statusName: "压力异常",
+          alarmTime: "2021-02-02 16-00-00",
+          handledStatus: "上海市普陀区金沙江路",
         },
-        {
-          deviceCode: "ZhC-11",
-          deviceName: "流量计",
-          province: "压力异常",
-          city: "2021-02-02 16-00-00",
-          address: "上海市普陀区金沙江路",
+      ],
+      scrollHeight: 0,
+      timer: null,
+    };
   },
-        {
-          deviceCode: "ZhC-11",
-          deviceName: "流量计",
-          province: "压力异常",
-          city: "2021-02-02 16-00-00",
-          address: "上海市普陀区金沙江路",
+  watch: {
+    rightPicData(newData) {
+      console.log("newData", newData);
+      // if (newData.pageData.length > 0) {
+      this.tableData = [...newData.pageData];
+      // }
+      // this.tableData = [...newData.pageData];
+      // 列表容器
+      this.$nextTick(() => {
+        this.getScrollHeight();
+      });
     },
-        {
-          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: "上海市普陀区金沙江路",
+
+  mounted() {},
+
+  methods: {
+    getScrollHeight() {
+      const selectWrap = this.$refs.table.$el.querySelector(
+        ".el-table__body-wrapper"
+      );
+      // 列表
+      const select = this.$refs.table.$el
+        .querySelector(".el-table__body-wrapper")
+        .querySelector(".el-table__body");
+      // 列表容器高度
+      const { height: heightWrapper } = selectWrap.getBoundingClientRect();
+      // 列表高度
+      const { height: heightSelect } = select.getBoundingClientRect();
+      // 滚动条的高度 = 列表高度-列表容器高度
+      this.scrollHeight = heightSelect - heightWrapper;
+      this.timerAni();
     },
-        {
-          deviceCode: "ZhC-11",
-          deviceName: "流量计",
-          province: "压力异常",
-          city: "2021-02-02 16-00-00",
-          address: "上海市普陀区金沙江路",
+    timerAni() {
+      const selectWrap = this.$refs.table.$el.querySelector(
+        ".el-table__body-wrapper"
+      );
+      this.timer = setInterval(() => {
+        if (selectWrap.scrollTop == this.scrollHeight) {
+          selectWrap.scrollTop = 1;
+        }
+        selectWrap.scrollTop += 1;
+      }, 100);
     },
-        {
-          deviceCode: "ZhC-11",
-          deviceName: "流量计",
-          province: "压力异常",
-          city: "2021-02-02 16-00-00",
-          address: "上海市普陀区金沙江路",
+    tableEnter() {
+      console.log(123);
+      clearInterval(this.timer);
     },
-      ],
-    };
   },
-  created() {},
-
-  methods: {},
 };
 </script>
 
@@ -133,20 +159,20 @@ export default {
   .math {
     width: 520px;
     position: absolute;
-    top:-40px;
-    left:0px;
+    top: -40px;
+    left: 0px;
     display: flex;
     justify-content: space-between;
-    &>div{
-      >span{
-        color:aqua;
+    & > div {
+      > span {
+        color: aqua;
       }
       font-size: 14px;
-      color:#fff;
+      color: #fff;
       text-align: center;
       line-height: 30px;
       width: 108px;
-      height:30px;
+      height: 30px;
       background-image: url(../../../../assets/images/bg/bg.png);
     }
   }
@@ -271,5 +297,9 @@ export default {
   .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;
   }
+  .el-table__body-wrappe {
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+  }
 }
 </style>
\ No newline at end of file

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

@@ -81,7 +81,7 @@
       :list="rightBototmData"
     />
     <!-- 右边 -->
-    <RightPic v-show="RightPicShow" ref="RightPic" />
+    <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 : "-" }}
@@ -426,7 +426,7 @@ import Center from "./components/Center.vue";
 import CreateWork from "./components/CreateWork.vue";
 import CreateWorkTrouble from "./components/CreateWorkTrouble.vue";
 import { getInspectorLocations } from "@/api/inspectorLocation/location";
-import { listInfo } from "@/api/enterprise/info";
+import { listInfo, alarmData } from "@/api/enterprise/info";
 import { lineColor } from "@/utils/mapCommon.js";
 
 export default {
@@ -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,8 +598,15 @@ export default {
       // 右下角的圆
       circleShow: false,
       circleNum: 0,
+      // 报警列表的数据
       detcetorList: [],
+      // 报警列表的总数据，分页用的
+      centerTotal:0,
+      // 这是center列表翻页时候用的userId
+      centerUserId:99,
       lntPosition: 0,
+      //右上角数据
+      rightPicData:{},
     };
   },
   created() {
@@ -616,6 +623,8 @@ export default {
     // 公司列表
     this.getCompList();
     this.initMap();
+    // 右上角数据展示
+    this.getAlarmData();
     // });
   },
   watch: {
@@ -841,14 +850,27 @@ export default {
       return getdetectorInfoList(queryParams).then((res) => {
         console.log("queryParams", res);
         if (res.code == 200) {
-          this.detcetorList = res.data;
-          this.$refs.center.fade="fade";
+          this.detcetorList = res.rows;
+          this.centerUserId = queryParams.userId;
+          // 总数据
+          this.centerTotal = res.total;
+          this.$refs.center.fade = "fade";
           this.centerShow = true;
           // 传递回去
           return res.code;
         }
       });
     },
+    // 右上角列表数据展示
+    getAlarmData(queryParams) {
+      return alarmData(queryParams).then((res) => {
+        if (res.code == 200) {
+          console.log('右上角数据',res)
+          this.rightPicData = res.data;
+          return res.code;
+        }
+      });
+    },
     // 获取报警资源，并且改变图上的状态
     getSelectAlarmDevice() {
       return selectAlarmDevice().then((res) => {
@@ -2618,7 +2640,7 @@ input[type="radio"] {
       .diviceNum {
         color: #fff;
         position: absolute;
-        left: 180px;
+        left: 210px;
         top: 12px;
       }
     }