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

<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"
              />
            </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>
          </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>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import screenTable from "./components/screen-table/index";
export default {
  name: "warning-box",
  components: {
    screenTable
  },
  data() {
    return {
      warningList:[
      ],
      headerList:[
        { title: '序号' },
        { title: '所属网格'},
        { title: '所属小区'},
        { title: '楼号'},
        { title: '姓名' },
      ],
      tableData:[
          // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
      ],
      visibleLoading:true,
      pageNo:1,
      pageSize:10,
      total:0,
      activeIndex:0,
      activeVal:'top'
    };
  },
  mounted(){
    this.getUserwarnlist()
    this.getBuildingwarnlist()
  },
  methods: {
    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>

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