完善数据-人员预警页面

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

@@ -2,10 +2,11 @@
   box-sizing: border-box;
   // width: 1881px;
   width: 100%;
-  height: 914px;
+  // height: 100%;
+  min-height: 100%;
   margin: auto;
   color: #fff;
-  background: url('../../../img/modules/visual/warning-box.png') no-repeat center;
+  // background: url("../../../img/modules/visual/warning-box.png") no-repeat center;
   background-size: 100% 100%;
   padding: 45px 21px 35px 24px;
 
@@ -13,7 +14,8 @@
     display: flex;
     // justify-content: space-around;
     justify-content: flex-start;
-    height: 190px;
+    flex-wrap: wrap;
+    min-height: 190px;
 
     .top-item {
       box-sizing: border-box;
@@ -21,10 +23,11 @@
       height: 190px;
       padding: 10px 22px 14px 21px;
       // background: rgba(255, 255, 255, 0);
-      border: 1px solid #1043C0;
+      border: 1px solid #1043c0;
       box-shadow: 0px 83px 150px 0px #002790;
       border-radius: 8px;
       margin-right: 15px;
+      margin-bottom: 15px;
 
       &-img {
         display: flex;
@@ -34,6 +37,7 @@
           width: 78px;
           height: 78px;
           margin-right: 16px;
+          margin-bottom: 10px;
         }
 
         .top-item-left {
@@ -47,13 +51,13 @@
           span:nth-child(1) {
             font-size: 18px;
             font-weight: 400;
-            color: #FFFFFF;
+            color: #ffffff;
           }
 
           span:nth-child(2) {
             font-size: 28px;
             font-weight: bold;
-            color: #00FFFC;
+            color: #00fffc;
             margin-top: 10px;
           }
         }
@@ -76,13 +80,14 @@
           align-items: center;
           justify-content: space-between;
           padding: 0 10px 0 29px;
+          cursor: pointer;
 
           &::after {
             display: block;
-            content: '';
+            content: "";
             width: 8px;
             height: 8px;
-            background: #F0F3F7;
+            background: #f0f3f7;
             border-radius: 50%;
             position: absolute;
             left: 12px;
@@ -94,7 +99,7 @@
             font-size: 16px;
             font-family: PingFang SC;
             font-weight: 400;
-            color: #FFFFFF;
+            color: #ffffff;
           }
 
           div:nth-child(2) {
@@ -103,7 +108,7 @@
             font-size: 20px;
             font-family: PingFang SC;
             font-weight: 500;
-            color: #FFFFFF;
+            color: #ffffff;
 
             .right-icon {
               width: 10px;
@@ -113,7 +118,7 @@
         }
 
         .num-item-active {
-          background: linear-gradient(0deg, #1A5AFD, #26C4FF);
+          background: linear-gradient(0deg, #1a5afd, #26c4ff);
         }
 
         .num-item:nth-child(2) {
@@ -121,17 +126,15 @@
         }
       }
     }
-
-
   }
 
   &-bottom {
     box-sizing: border-box;
     width: 100%;
     height: calc(100% - 300px);
+    min-height: 300px;
     margin-top: 60px;
 
-
     .pagination {
       box-sizing: border-box;
       margin-top: 20px;
@@ -141,24 +144,21 @@
       justify-content: flex-end;
 
       /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
-        background: #0266D1;
-        color: #000D3F;
+        background: #0266d1;
+        color: #000d3f;
       }
 
       /deep/ .el-pagination .el-pager li {
-        background: #002E74;
+        background: #002e74;
       }
 
       /deep/ .el-pagination .btn-prev {
-        background: #002E74;
+        background: #002e74;
       }
 
       /deep/ .el-pagination .btn-next {
-        background: #002E74;
+        background: #002e74;
       }
     }
   }
-
-
-
 }

src/router/index.js

@@ -218,7 +218,7 @@ router.beforeEach((to, from, next) => {
   //  }else{
 
   http
-    .get("/oper/access/menu/nav")
+    .get("/gov/access/menu/nav")
     .then(({ data: res }) => {
       if (res.code !== 0) {
         // Vue.prototype.$message.error(res.msg)

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

@@ -137,6 +137,7 @@ mounted () {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .warning-table{
      box-sizing: border-box;
@@ -172,8 +173,8 @@ mounted () {
 
         &-tr {
           width: 100%;
-          // height: 50px;
-          height: calc(100% / 10);
+          height: 50px;
+          // height: calc(100% / 10);
           display: flex;
           justify-content: space-around;
           align-items: center;

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

@@ -1,37 +1,44 @@
 <template>
   <div class="warning-box">
+    <cpt-card>
       <div class="warning-box-top">
         <div class="top-item" v-for="(item, index) in warningList" :key="index">
           <div class="top-item-img">
-          <img
-            :src="item.dataIcon"
-            alt=""
-            srcset=""
-          />
+            <img :src="item.dataIcon" />
             <div class="top-item-left">
               <span>{{ item.label }}</span>
               <span>{{ item.count }}</span>
             </div>
           </div>
           <div class="top-item-num">
-          <div class="num-item" :class="{'num-item-active':activeIndex==index&&activeVal=='top'}" @click="onClickList(index,'top')">
-            <div>5-10人</div>
+            <div
+              class="num-item"
+              :class="{
+                'num-item-active': activeIndex == index && activeLevel == '1',
+              }"
+              @click="onClickList(index, '1')"
+            >
+              <div>{{ item.level1 }}-{{ item.level2 }}人</div>
               <div>
                 <div>{{ item.levelCount1 }}栋</div>
                 <img
                   src="../../../../assets/img/modules/visual/right-icon.png"
-                alt=""
                   class="right-icon"
                 />
               </div>
             </div>
-          <div class="num-item" :class="{'num-item-active':activeIndex==index&&activeVal=='bottom'}" @click="onClickList(index,'bottom')">
-            <div>10人以上</div>
+            <div
+              class="num-item"
+              :class="{
+                'num-item-active': activeIndex == index && activeLevel == '2',
+              }"
+              @click="onClickList(index, '2')"
+            >
+              <div>{{ item.level2 }}人以上</div>
               <div>
                 <div>{{ item.levelCount2 }}栋</div>
                 <img
                   src="../../../../assets/img/modules/visual/right-icon.png"
-                alt=""
                   class="right-icon"
                 />
               </div>
@@ -40,7 +47,11 @@
         </div>
       </div>
       <div class="warning-box-bottom">
-      <screen-table :headerList='headerList' :tableData='tableData' :visibleLoading='visibleLoading'></screen-table>
+        <screen-table
+          :headerList="headerList"
+          :tableData="tableData"
+          :visibleLoading="visibleLoading"
+        ></screen-table>
         <div class="pagination">
           <el-pagination
             :current-page="pageNo"
@@ -49,31 +60,36 @@
             layout="prev, pager, next"
             @size-change="pageSizeChangeHandleNew"
             @current-change="pageCurrentChangeHandleNew"
-        :total="total">
+            :total="total"
+          >
           </el-pagination>
         </div>
       </div>
+    </cpt-card>
   </div>
 </template>
 
 <script>
 import { requestPost } from "@/js/dai/request";
 import screenTable from "./components/screen-table/index";
+import cptCard from "@/views/modules/visual/cpts/card";
+import nextTick from "dai-js/tools/nextTick";
+
 export default {
   name: "warning-box",
   components: {
-    screenTable
+    cptCard,
+    screenTable,
   },
   data() {
     return {
-      warningList:[
-      ],
+      warningList: [],
       headerList: [
-        { title: '序号' },
-        { title: '所属网格'},
-        { title: '所属小区'},
-        { title: '楼号'},
-        { title: '姓名' },
+        { title: "序号" },
+        { title: "所属网格" },
+        { title: "所属小区" },
+        { title: "楼号" },
+        { title: "姓名" },
       ],
       tableData: [
         // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
@@ -83,35 +99,45 @@ export default {
       pageSize: 10,
       total: 0,
       activeIndex: 0,
-      activeVal:'top'
+      activeLevel: "1",
     };
   },
-  mounted(){
-    this.getUserwarnlist()
-    this.getBuildingwarnlist()
+  async mounted() {
+    await nextTick(100);
+    this.getBuildingwarnlist();
   },
   methods: {
-    onClickList(index,val){
-      this.activeIndex = index
-      this.activeVal = val
+    onClickList(index, level) {
+      this.activeIndex = index;
+      this.activeLevel = level;
+      this.pageNo = 1;
+      this.getUserwarnlist();
     },
     //具体人员列表
     async getUserwarnlist() {
-      let tableData =[]
+      const { activeIndex, activeLevel, warningList } = this;
+      const reqItem = warningList[activeIndex];
+      let tableData = [];
       const url = "/epmetuser/statsresiwarn/userwarnlist";
       let params = {
-        configId:'432a17da8902c930096236408bd554fc',
-        buildingIdList: ['be19318ac32fd4eb92c9d68cc0575c44'],
-        pageNo:1,
-        pageSize:10
+        configId: reqItem.configId,
+        buildingIdList: reqItem["buildingIdList" + activeLevel],
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
       };
       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
+          tableData.push([
+            index + 1,
+            item.gridName,
+            item.neighborhoodName,
+            item.buildingName,
+            item.residentNames ? item.residentNames : "暂无",
+          ]);
+        });
+        this.tableData = tableData;
+        this.total = data.total;
       } else {
       }
     },
@@ -119,24 +145,25 @@ export default {
     async getBuildingwarnlist() {
       const url = "/epmetuser/statsresiwarn/buildingwarnlist";
       let params = {
-        agencyId:'9943d28cbd9006de1d6bc4f6e178e55e',
+        agencyId: this.$store.state.user.agencyId,
       };
       const { data, code, msg } = await requestPost(url, params);
       if (code === 0) {
-        this.warningList = data
-        this.visibleLoading = false
+        this.warningList = data;
+        this.visibleLoading = false;
+        this.getUserwarnlist();
       } else {
       }
     },
     pageSizeChangeHandleNew(val) {
-      this.pageNo = 1
-      this.pageSize = val
+      this.pageNo = 1;
+      this.pageSize = val;
     },
     pageCurrentChangeHandleNew(val) {
-      this.pageNo = val
-      this.getUserwarnlist()
+      this.pageNo = val;
+      this.getUserwarnlist();
+    },
   },
-  }
 };
 </script>