右上角功能制作完成

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

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/views/enterprise/mapView/components/Center.vue

@@ -243,6 +243,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.totalNum }}</span
+        >报警总数
+      </div>
+      <div>
+        <span>{{ rightPicData.handledNum }}</span
+        >已处理
+      </div>
+      <div>
+        <span>{{ rightPicData.noHandeldNum }}</span
+        >未处理
+      </div>
     </div>
 
     <div class="left">
@@ -14,16 +23,37 @@
           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,107 @@ export default {
       tableHeight: 202,
       tableData: [
         {
-          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: "上海市普陀区金沙江路",
+          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: "上海市普陀区金沙江路",
+          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: "上海市普陀区金沙江路",
+          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: "上海市普陀区金沙江路",
+          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: "上海市普陀区金沙江路",
+          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: "上海市普陀区金沙江路",
+          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: "上海市普陀区金沙江路",
-        },
-        {
-          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: "上海市普陀区金沙江路",
         },
       ],
+      scrollHeight: 0,
+      timer: null,
     };
   },
-  created() {},
+  watch: {
+    rightPicData() {
+      // this.tableData = this.rightPicData.pageData;
+      // 列表容器
+      this.getScrollHeight();
+    },
+  },
+
+  mounted() {},
 
-  methods: {},
+  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;
+      console.log(this.scrollHeight / this.tableData.length);
+
+      this.timerAni();
+    },
+    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);
+    },
+  },
 };
 </script>
 
@@ -133,20 +200,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 +338,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" l />
     <!-- 报警工单 -->
     <CreateWork
       ref="CreateWork"
@@ -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 {
@@ -600,6 +600,8 @@ export default {
       circleNum: 0,
       detcetorList: [],
       lntPosition: 0,
+      //右上角数据
+      rightPicData:{},
     };
   },
   created() {
@@ -616,6 +618,8 @@ export default {
     // 公司列表
     this.getCompList();
     this.initMap();
+    // 右上角数据展示
+    this.getAlarmData();
     // });
   },
   watch: {
@@ -842,13 +846,23 @@ export default {
         console.log("queryParams", res);
         if (res.code == 200) {
           this.detcetorList = res.data;
-          this.$refs.center.fade="fade";
+          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) => {