人员接口联调

src/assets/scss/modules/visual/warning.scss

@@ -1,6 +1,7 @@
 .warning-box {
   box-sizing: border-box;
-  width: 1881px;
+  // width: 1881px;
+  width: 100%;
   height: 914px;
   margin: auto;
   color: #fff;
@@ -10,7 +11,8 @@
 
   &-top {
     display: flex;
-    justify-content: space-around;
+    // justify-content: space-around;
+    justify-content: flex-start;
     height: 190px;
 
     .top-item {
@@ -22,6 +24,7 @@
       border: 1px solid #1043C0;
       box-shadow: 0px 83px 150px 0px #002790;
       border-radius: 8px;
+      margin-right: 15px;
 
       &-img {
         display: flex;

src/views/modules/visual/warning/Base.js

@@ -0,0 +1,10 @@
+class Base {
+  constructor() {
+    this.a = '3'
+    this.init()
+  }
+  init() {
+    console.log('1')
+  }
+}
+export default Base

src/views/modules/visual/warning/components/screen-loading/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="screen-loading">
+    <svg width="50px"
+         height="50px">
+      <circle cx="25"
+              cy="25"
+              r="20"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="31.415, 31.415"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="0, 25 25;360, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#02bcfe;#3be6cb;#02bcfe"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+
+      <circle cx="25"
+              cy="25"
+              r="10"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="15.7, 15.7"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="360, 25 25;0, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#3be6cb;#02bcfe;#3be6cb"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+    </svg>
+    <div class="loading-tip">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DvLoading'
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .loading-tip {
+    font-size: 14px;
+    color: #fff;
+  }
+}
+</style>

src/views/modules/visual/warning/components/screen-table/index.vue

@@ -7,24 +7,33 @@
         <div class="table-body">
           <div class="table-body-tr" v-for="(value,index) in tableData" :key='index'>
             <div class="td" v-for="(item,indexs) in value" :key="indexs" :style="tableContentStyle[indexs]">{{item}}
-              <span v-if="indexs+1==value.length" class="more" @click="onClickMorePop(index)" ref='morePop'>
+              <span v-if="(indexs+1==value.length) && item.length>8" class="more" @click="onClickMorePop(index)" ref='morePop'>
                 更多>
                 <span class="more-pop" v-if="visiblePopList[index]">
-                  李佳琪、刘阳、赵欣、丁一、嘉敏、李岩、何嘉慧
+                  <!-- 李佳琪、刘阳、赵欣、丁一、嘉敏、李岩、何嘉慧
-                  李易峰、赵敏、何军、曲树惠
+                  李易峰、赵敏、何军、曲树惠 -->
+                  {{item}}
                 </span>
               </span>
             </div>
           </div>
+          <screen-loading v-if="visibleLoading">加载中</screen-loading>
+          <div class="no-data" v-if="tableData.length==0 && !visibleLoading">
+            <img src="../../../../../../assets/img/modules/visual/noData.png" alt="" srcset="" class="no-data-img">
+          </div>
         </div>
       </div>
   </div>
 </template>
 
 <script>
+import ScreenLoading from '../screen-loading/index'
 import Vue from 'vue'
 export default {
 name: 'warning-table',
+components:{
+  ScreenLoading
+},
 props: {
     headerList: {
       type: Array,
@@ -46,15 +55,6 @@ name: 'warning-table',
         return [
         [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
         [2,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [3,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [4,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [5,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [6,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [7,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [8,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [9,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-        [10,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-    
         ]
       }
     },
@@ -88,6 +88,10 @@ name: 'warning-table',
         ]
       }
     },
+    visibleLoading:{
+      type:Boolean,
+      default:true
+    }
     // // 表格平均分的份数
     // ava: {
     //   type: Number,
@@ -202,20 +206,20 @@ mounted () {
                 color: #FFFFFF;
                 padding:16px 8px 10px 9px;
                 z-index: 1;
-                &::after{
+                // &::after{
-                  position: absolute;
+                //   position: absolute;
-                  left: 30%;
+                //   left: 30%;
-                  top: -30%;
+                //   top: -30%;
-                  display: flex;
+                //   display: flex;
-                  content:'';
+                //   content:'';
-                  width: 0;
+                //   width: 0;
-                  height: 0;
+                //   height: 0;
-                  border-width: 13px;
+                //   border-width: 13px;
-                  border-style: solid;
+                //   border-style: solid;
-                  border-color: transparent transparent rgba(26, 100, 204,0.5) transparent;
+                //   border-color: transparent transparent rgba(26, 100, 204,0.5) transparent;
-                  // border-color: transparent transparent red transparent;
+                //   // border-color: transparent transparent red transparent;
-                  transform: translate(-50%,0);
+                //   transform: translate(-50%,0);
-                }
+                // }
               }
           
             }
@@ -230,6 +234,18 @@ mounted () {
           background: url('../../../../../../assets/img/modules/visual/hover-bac.png') no-repeat center;
           background-size: 100% 100%;
         }
+        // 暂无数据
+        .no-data{
+          width: 100%;
+          height: calc(100% - 50px);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          &-img{
+            width: 249px;
+            height: 172px;
+          }
+        }
       }
 
     }

src/views/modules/visual/warning/index.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="warning-box">
     <div class="warning-box-top">
-      <div class="top-item" v-for="item in [1, 2, 3, 4, 5, 6]" :key="item">
+      <div class="top-item" v-for="(item,index) in warningList" :key="index">
         <div class="top-item-img">
           <img
-            src="../../../../assets/img/modules/visual/shiye.png"
+            :src="item.dataIcon"
             alt=""
             srcset=""
           />
           <div class="top-item-left">
-            <span>失业人员</span>
+            <span>{{item.label}}</span>
-            <span>1022</span>
+            <span>{{item.count}}</span>
           </div>
         </div>
         <div class="top-item-num">
-          <div class="num-item num-item-active" @click="onClickList">
+          <div class="num-item" :class="{'num-item-active':activeIndex==index&&activeVal=='top'}" @click="onClickList(index,'top')">
             <div>5-10人</div>
             <div>
-              <div>6栋</div>
+              <div>{{item.levelCount1}}栋</div>
               <img
                 src="../../../../assets/img/modules/visual/right-icon.png"
                 alt=""
@@ -25,10 +25,10 @@
               />
             </div>
           </div>
-          <div class="num-item">
+          <div class="num-item" :class="{'num-item-active':activeIndex==index&&activeVal=='bottom'}" @click="onClickList(index,'bottom')">
-            <div>5-10人</div>
+            <div>10人以上</div>
             <div>
-              <div>6栋</div>
+              <div>{{item.levelCount2}}栋</div>
               <img
                 src="../../../../assets/img/modules/visual/right-icon.png"
                 alt=""
@@ -40,12 +40,16 @@
       </div>
     </div>
     <div class="warning-box-bottom">
-      <screen-table :headerList='headerList'></screen-table>
+      <screen-table :headerList='headerList' :tableData='tableData' :visibleLoading='visibleLoading'></screen-table>
       <div class="pagination">
       <el-pagination
+      :current-page="pageNo"
+       :page-size="pageSize"
         background
         layout="prev, pager, next"
-        :total="1000">
+        @size-change="pageSizeChangeHandleNew"
+        @current-change="pageCurrentChangeHandleNew"
+        :total="total">
       </el-pagination>
       </div>
     </div>
@@ -53,6 +57,7 @@
 </template>
 
 <script>
+import { requestPost } from "@/js/dai/request";
 import screenTable from "./components/screen-table/index";
 export default {
   name: "warning-box",
@@ -61,6 +66,8 @@ export default {
   },
   data() {
     return {
+      warningList:[
+      ],
       headerList:[
         { title: '序号' },
         { title: '所属网格'},
@@ -68,10 +75,67 @@ export default {
         { title: '楼号'},
         { title: '姓名' },
       ],
+      tableData:[
+          // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      ],
+      visibleLoading:true,
+      pageNo:1,
+      pageSize:10,
+      total:0,
+      activeIndex:0,
+      activeVal:'top'
     };
   },
+  mounted(){
+    this.getUserwarnlist()
+    this.getBuildingwarnlist()
+  },
   methods: {
-  onClickList(){}
+    onClickList(index,val){
+      this.activeIndex = index
+      this.activeVal = val
+    },
+    //具体人员列表
+    async getUserwarnlist() {
+      let tableData =[]
+      const url = "/epmetuser/statsresiwarn/userwarnlist";
+      let params = {
+        configId:'432a17da8902c930096236408bd554fc',
+        buildingIdList: ['be19318ac32fd4eb92c9d68cc0575c44'],
+        pageNo:1,
+        pageSize:10
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        data.list.forEach((item,index)=>{
+          tableData.push([index+1,item.gridName,item.neighborhoodName,item.buildingName,item.residentNames?item.residentNames:"暂无"])
+        })
+        this.tableData = tableData
+        this.total = data.total
+      } else {
+      }
+    },
+    // 【人员预警】 楼宇预警数量列表
+    async getBuildingwarnlist() {
+      const url = "/epmetuser/statsresiwarn/buildingwarnlist";
+      let params = {
+        agencyId:'9943d28cbd9006de1d6bc4f6e178e55e',
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.warningList = data
+        this.visibleLoading = false
+      } else {
+      }
+    },
+    pageSizeChangeHandleNew (val) {
+      this.pageNo = 1
+      this.pageSize = val
+    },
+    pageCurrentChangeHandleNew (val) {
+      this.pageNo = val
+      this.getUserwarnlist()
+    },
   }
 };
 </script>