|
|
|
@ -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> |
|
|
|
|
|
|
|
|
dai
4 years ago