From 1228f878fde73da0e5dcfd368d4e394c4853c3f9 Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Thu, 18 Nov 2021 15:06:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=95=B0=E6=8D=AE-=E4=BA=BA?=
 =?UTF-8?q?=E5=91=98=E9=A2=84=E8=AD=A6=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/modules/visual/warning.scss   |  46 ++--
 src/router/index.js                           |   2 +-
 .../warning/components/screen-table/index.vue |   5 +-
 src/views/modules/visual/warning/index.vue    | 205 ++++++++++--------
 4 files changed, 143 insertions(+), 115 deletions(-)

diff --git a/src/assets/scss/modules/visual/warning.scss b/src/assets/scss/modules/visual/warning.scss
index 2a822bf6..36260a7f 100644
--- a/src/assets/scss/modules/visual/warning.scss
+++ b/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;
       }
     }
   }
-
-
-
-}
\ No newline at end of file
+}
diff --git a/src/router/index.js b/src/router/index.js
index 74034c36..dbf8448e 100644
--- a/src/router/index.js
+++ b/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)
diff --git a/src/views/modules/visual/warning/components/screen-table/index.vue b/src/views/modules/visual/warning/components/screen-table/index.vue
index 4cbb392d..7b6dce78 100644
--- a/src/views/modules/visual/warning/components/screen-table/index.vue
+++ b/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;
diff --git a/src/views/modules/visual/warning/index.vue b/src/views/modules/visual/warning/index.vue
index a4dedb38..8afcae22 100644
--- a/src/views/modules/visual/warning/index.vue
+++ b/src/views/modules/visual/warning/index.vue
@@ -1,117 +1,143 @@
 <template>
   <div class="warning-box">
-    <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=""
-          />
-          <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>
-              <div>{{item.levelCount1}}栋</div>
-              <img
-                src="../../../../assets/img/modules/visual/right-icon.png"
-                alt=""
-                class="right-icon"
-              />
+    <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" />
+            <div class="top-item-left">
+              <span>{{ item.label }}</span>
+              <span>{{ item.count }}</span>
             </div>
           </div>
-          <div class="num-item" :class="{'num-item-active':activeIndex==index&&activeVal=='bottom'}" @click="onClickList(index,'bottom')">
-            <div>10人以上</div>
-            <div>
-              <div>{{item.levelCount2}}栋</div>
-              <img
-                src="../../../../assets/img/modules/visual/right-icon.png"
-                alt=""
-                class="right-icon"
-              />
+          <div class="top-item-num">
+            <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"
+                  class="right-icon"
+                />
+              </div>
+            </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"
+                  class="right-icon"
+                />
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="warning-box-bottom">
-      <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"
-        @size-change="pageSizeChangeHandleNew"
-        @current-change="pageCurrentChangeHandleNew"
-        :total="total">
-      </el-pagination>
+      <div class="warning-box-bottom">
+        <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"
+            @size-change="pageSizeChangeHandleNew"
+            @current-change="pageCurrentChangeHandleNew"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
       </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:[
-      ],
-      headerList:[
-        { title: '序号' },
-        { title: '所属网格'},
-        { title: '所属小区'},
-        { title: '楼号'},
-        { title: '姓名' },
+      warningList: [],
+      headerList: [
+        { title: "序号" },
+        { title: "所属网格" },
+        { title: "所属小区" },
+        { title: "楼号" },
+        { title: "姓名" },
       ],
-      tableData:[
-          // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
       ],
-      visibleLoading:true,
-      pageNo:1,
-      pageSize:10,
-      total:0,
-      activeIndex:0,
-      activeVal:'top'
+      visibleLoading: true,
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      activeIndex: 0,
+      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
+        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 {
       }
     },
@@ -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
+    pageSizeChangeHandleNew(val) {
+      this.pageNo = 1;
+      this.pageSize = val;
     },
-    pageCurrentChangeHandleNew (val) {
-      this.pageNo = val
-      this.getUserwarnlist()
+    pageCurrentChangeHandleNew(val) {
+      this.pageNo = val;
+      this.getUserwarnlist();
     },
-  }
+  },
 };
 </script>