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

<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" />
            <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 && 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 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>
    </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: {
    cptCard,
    screenTable,
  },
  data() {
    return {
      warningList: [],
      headerList: [
        { title: "序号" },
        { title: "所属网格" },
        { title: "所属小区" },
        { title: "楼号" },
        { title: "姓名" },
      ],
      tableData: [
        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
      ],
      visibleLoading: true,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      activeIndex: 0,
      activeLevel: "1",
    };
  },
  async mounted() {
    await nextTick(100);
    this.getBuildingwarnlist();
  },
  methods: {
    onClickList(index, level) {
      this.activeIndex = index;
      this.activeLevel = level;
      this.pageNo = 1;
      this.getUserwarnlist();
    },
    //具体人员列表
    async getUserwarnlist() {
      const { activeIndex, activeLevel, warningList } = this;
      const reqItem = warningList[activeIndex];
      let tableData = [];
      const url = "/epmetuser/statsresiwarn/userwarnlist";
      let params = {
        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;
      } else {
      }
    },
    // 【人员预警】 楼宇预警数量列表
    async getBuildingwarnlist() {
      const url = "/epmetuser/statsresiwarn/buildingwarnlist";
      let params = {
        agencyId: this.$store.state.user.agencyId,
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.warningList = data;
        this.visibleLoading = false;
        this.getUserwarnlist();
      } else {
      }
    },
    pageSizeChangeHandleNew(val) {
      this.pageNo = 1;
      this.pageSize = val;
    },
    pageCurrentChangeHandleNew(val) {
      this.pageNo = val;
      this.getUserwarnlist();
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/warning.scss"
  scoped
></style>