ss

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

@@ -24,38 +24,10 @@
               :key="indexs"
               :style="tableContentStyle[indexs]"
             >
-              <div v-if="Array.isArray(item)">
-                <span
-                  v-show="rIndex < 3"
-                  :key="resi.userId"
-                  v-for="(resi, rIndex) in item"
-                >
-                  {{ rIndex != 0 ? "、" : "" }}
-                  <a @click="handlePeopleItem(resi.userId, value[1])">{{
-                    resi.residentName
-                  }}</a>
-                </span>
+              <div v-if="item.type && item.type == 'btn'">
+                <a @click="handleClickBtn(item)">{{ item.name }}</a>
               </div>
               <span v-else>{{ item }}</span>
-              <span
-                v-if="indexs + 1 == value.length && item.length > 3"
-                class="more"
-                @click.stop="onClickMorePop(index)"
-                ref="morePop"
-              >
-                更多>
-                <div class="more-pop" v-if="visiblePopList[index]">
-                  <span
-                    :key="index + rIndex + resi.userId"
-                    v-for="(resi, rIndex) in item"
-                  >
-                    {{ rIndex != 0 ? "、" : "" }}
-                    <a @click="handlePeopleItem(resi.userId, value[1])">{{
-                      resi.residentName
-                    }}</a>
-                  </span>
-                </div>
-              </span>
             </div>
           </div>
           <screen-loading v-if="visibleLoading">加载中</screen-loading>
@@ -66,11 +38,11 @@
       </div>
     </div>
 
-    <people-more
-      v-if="showedPeopleMoreInfo && currentPepeleId"
-      :userId="currentPepeleId"
-      :gridName="currentPepeleGridName"
-      @close="showedPeopleMoreInfo = false"
+    <people-list
+      v-if="showedPeopleList && buildingId"
+      :buildingId="buildingId"
+      :configId="configId"
+      @close="showedPeopleList = false"
     />
   </div>
 </template>
@@ -78,13 +50,13 @@
 <script>
 import ScreenLoading from "../screen-loading/index";
 import Vue from "vue";
-import peopleMore from "@/views/modules/shequ/cpts/people-more";
+import peopleList from "./people-list";
 
 export default {
   name: "warning-table",
   components: {
     ScreenLoading,
-    peopleMore,
+    peopleList,
   },
   props: {
     headerList: {
@@ -96,7 +68,8 @@ export default {
           { title: "所属网格" },
           { title: "所属小区" },
           { title: "楼号" },
-          { title: "姓名" },
+          { title: "预警人数" },
+          { title: "操作" },
         ];
       },
     },
@@ -156,80 +129,30 @@ export default {
       type: Boolean,
       default: true,
     },
-    // // 表格平均分的份数
-    // ava: {
-    //   type: Number,
-    //   default: 8
-    // },
-    // // 表头高度--默认占比10%
-    // headerHeightAva: {
-    //   type: String,
-    //   default: '10%'
-    // },
-    // // 表格主体平均分成的份数
-    // tableContentAva: {
-    //   type: Number,
-    //   default: 5
-    // },
   },
   data() {
     return {
       // 显示人员详情
-      showedPeopleMoreInfo: false,
-
-      currentPepeleId: "",
-      currentPepeleGridName: "",
-
-      visiblePopList: [
-        false,
-        false,
-        false,
-        false,
-        false,
-        false,
-        false,
-        false,
-        false,
-        false,
-      ],
+      showedPeopleList: false,
+      buildingId: "",
+      configId: "",
     };
   },
-  watch: {
-    tableData(arr) {
-      if (Array.isArray(arr)) {
-        this.visiblePopList = new Array(arr.length).fill(false);
-      }
-    },
-  },
+  watch: {},
 
-  mounted() {
-    window.addEventListener("click", (e) => {
-      this.visiblePopList = new Array(this.visiblePopList.length).fill(false);
-    });
-  },
+  mounted() {},
 
   created() {},
 
   methods: {
-    toUserInfo(uid) {
-      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
-    },
-
-    handlePeopleItem(uid, gridName) {
-      this.currentPepeleId = uid;
-      this.currentPepeleGridName = gridName;
-
-      this.showedPeopleMoreInfo = true;
+    handleClickBtn(item) {
+      this.showedPeopleList = true;
+      this.buildingId = item.buildingId;
+      this.configId = item.configId;
     },
 
-    onClickMorePop(index) {
-      this.visiblePopList.forEach((item, indexs) => {
-        if (index == indexs) {
-          Vue.set(this.visiblePopList, index, true);
-        } else {
-          Vue.set(this.visiblePopList, indexs, false);
-        }
-      });
+    toUserInfo(uid) {
+      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
     },
   },
 };

src/views/modules/warning/components/screen-table/people-list.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="m-pop">
+    <div class="wrap">
+      <div class="btn-close" @click="handleClose">
+        <img src="@/assets/img/shuju/people/close.png" />
+      </div>
+      <div class="wrap2">
+        <div class="title">
+          <span>更多信息</span>
+        </div>
+
+        <div class="content">
+          <div class="tb">
+            <el-table
+              :data="list"
+              border
+              style="width: 100%"
+              class="resi-table"
+              :max-height="maxTableHeight"
+            >
+              <el-table-column
+                label="序号"
+                type="index"
+                align="center"
+                width="50"
+              />
+              <el-table-column prop="residentName" label="姓名">
+              </el-table-column>
+              <el-table-column prop="unitName" label="单元"> </el-table-column>
+              <el-table-column prop="doorName" label="门牌号" width="80">
+              </el-table-column>
+              <el-table-column prop="mobile" label="手机"> </el-table-column>
+              <el-table-column prop="idCard" label="身份证"> </el-table-column>
+              <el-table-column
+                fixed="right"
+                label="操作"
+                align="center"
+                width="60"
+              >
+                <template slot-scope="scope">
+                  <el-button
+                    @click="handlePeopleItem(scope.userId)"
+                    type="text"
+                    size="small"
+                    >查看更多</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+
+          <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>
+    </div>
+
+    <people-more
+      v-if="showedPeopleInfo && currentPepeleId"
+      :userId="currentPepeleId"
+      :gridName="gridName"
+      @close="showedPeopleMoreInfo = false"
+    />
+  </div>
+</template>
+
+<script>
+import cptCard from "@/views/modules/visual/cpts/card";
+import { requestPost } from "@/js/dai/request";
+import peopleMore from "@/views/modules/shequ/cpts/people-more";
+import { mapGetters } from "vuex";
+
+export default {
+  name: "people-list",
+  props: {
+    configId: {
+      type: String,
+      default: "",
+    },
+    buildingId: {
+      type: String,
+      default: "",
+    },
+  },
+
+  components: {
+    cptCard,
+  },
+
+  data() {
+    return {
+      showedPeopleInfo: false,
+      currentPepeleId: "",
+      currentPepeleGridName: "",
+
+      loading: false,
+      pageNo: 0,
+      pageSize: 10,
+      total: 0,
+      list: [],
+    };
+  },
+
+  computed: {
+    maxTableHeight() {
+      return this.clientHeight - 450;
+      return 420;
+    },
+    ...mapGetters(["clientHeight"]),
+  },
+
+  watch: {
+    userId() {
+      this.getApiData();
+    },
+  },
+
+  mounted() {
+    this.getApiData();
+  },
+
+  methods: {
+    pageSizeChangeHandleNew(val) {
+      this.pageNo = 1;
+      this.pageSize = val;
+    },
+    pageCurrentChangeHandleNew(val) {
+      this.pageNo = val;
+      this.getList();
+    },
+
+    handlePeopleItem(uid) {
+      this.currentPepeleId = uid;
+
+      this.showedPeopleInfo = true;
+    },
+
+    handleClose() {
+      this.$emit("close");
+    },
+
+    async getApiData() {
+      this.getList();
+    },
+
+    async getList() {
+      const url = "/epmetuser/statsresiwarn/alluserwarnlist";
+      let params = {
+        buildingId: this.buildingId,
+        configId: this.configId,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        const { list, total } = data;
+        this.list = list;
+        this.total = total;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/people-info.scss" scoped></style>

src/views/modules/warning/index.vue

@@ -98,7 +98,8 @@ export default {
         { title: "所属网格" },
         { title: "所属小区" },
         { title: "楼号" },
-        { title: "姓名" },
+        { title: "预警人数" },
+        { title: "操作" },
       ],
       tableData: [
         // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
@@ -142,7 +143,13 @@ export default {
             item.gridName,
             item.neighborhoodName,
             item.buildingName,
-            item.userList || "暂无",
+            item.count,
+            {
+              type: "btn",
+              name: "查看人员详情",
+              buildingId: item.buildingId,
+              configId: item.configId,
+            },
           ]);
         });
         this.tableData = tableData;