13176889840
4 years ago
7 changed files with 496 additions and 176 deletions
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,401 @@ |
|||||
|
<template> |
||||
|
<div class="warning-box"> |
||||
|
<cpt-card class="card-wr"> |
||||
|
<div class="card-title"> |
||||
|
<img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" /> |
||||
|
<div class="title-label"> |
||||
|
区域化党建 |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="second-title"> |
||||
|
<div class="second-title-label">党建单位分类统计</div> |
||||
|
<div class="second-select"> |
||||
|
<el-select v-model="value2" clearable placeholder="请选择"> |
||||
|
<el-option |
||||
|
v-for="item in headerList" |
||||
|
:key="item.coulmn" |
||||
|
:label="item.title" |
||||
|
:value="item.coulmn"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="second-select"> |
||||
|
<el-date-picker |
||||
|
v-model="value2" |
||||
|
type="date" |
||||
|
prefix-icon="el-icon-caret-bottom" |
||||
|
placeholder="选择日期" |
||||
|
value-format="yyyy-MM-dd"> |
||||
|
</el-date-picker> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="box-wr box-wr-400"> |
||||
|
<div class="box-left"> |
||||
|
<div class="box-left-item"> |
||||
|
<div class="box-label">组织单位</div> |
||||
|
<div class="box-num">1233</div> |
||||
|
</div> |
||||
|
<div class="box-left-item"> |
||||
|
<div class="box-label">组织活动</div> |
||||
|
<div class="box-num">1233</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="box-right"> |
||||
|
<div class="warning-box-bottom"> |
||||
|
<screen-table |
||||
|
:headerList="headerList" |
||||
|
:tableData="tableData" |
||||
|
:visibleLoading="visibleLoading" |
||||
|
:operate="false" |
||||
|
></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> |
||||
|
</div> |
||||
|
<div class="second-title"> |
||||
|
<div class="second-title-label">党建单位分类统计</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="box-wr"> |
||||
|
<div class="box-left box-left-w400"> |
||||
|
<div v-for="item in partyItem" :key="item.value" class="box-left-item"> |
||||
|
<div class="box-label">{{ item.name }}</div> |
||||
|
<div class="box-num" :style="'color:' + item.color">{{ item.value }}</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div class="box-right"> |
||||
|
<div class="box-map">这是地图容器</div> |
||||
|
<div class="map-tips"> |
||||
|
<div v-for="item in partyItem" :key="item.value" class="map-tips-item"> |
||||
|
<div class="map-tips-icon"> |
||||
|
<img :src="item.icon" /> |
||||
|
</div> |
||||
|
<div class="map-tips-label">{{ item.name }}</div> |
||||
|
</div> |
||||
|
</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: { |
||||
|
cptCard, |
||||
|
screenTable, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
warningList: [], |
||||
|
headerList: [ |
||||
|
{ title: "序号", coulmn: 'index' }, |
||||
|
{ title: "需求类型", coulmn: 'gridName' }, |
||||
|
{ title: "具体内容", coulmn: 'buildingName' }, |
||||
|
{ title: "上报情况", coulmn: 'neighborhoodName' }, |
||||
|
{ title: "上报人", coulmn: 'residentNames' }, |
||||
|
{ title: "上报时间", coulmn: 'residentNames' }, |
||||
|
{ title: "是否认领", coulmn: 'residentNames' }, |
||||
|
{ title: "认领方", coulmn: 'residentNames' }, |
||||
|
{ title: "认领时间", coulmn: 'residentNames' } |
||||
|
], |
||||
|
tableData: [ |
||||
|
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'], |
||||
|
], |
||||
|
value2: '', |
||||
|
visibleLoading: true, |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
total: 0, |
||||
|
activeIndex: 0, |
||||
|
activeLevel: "1", |
||||
|
partyItem: [ |
||||
|
{ |
||||
|
name: '楼宇党建', |
||||
|
value: 1, |
||||
|
color: 'rgba(250, 32, 10, 1)', |
||||
|
icon: require('../../../../assets/img/shuju/measure/ly@2x.png') |
||||
|
}, { |
||||
|
name: '机关直属部门', |
||||
|
value: 2, |
||||
|
color: 'rgba(65, 181, 104, 1)', |
||||
|
icon: require('../../../../assets/img/shuju/measure/jgzs@2x.png') |
||||
|
}, { |
||||
|
name: '两新党建', |
||||
|
value: 3, |
||||
|
color: 'rgba(251, 177, 4, 1)', |
||||
|
icon: require('../../../../assets/img/shuju/measure/lxdj@2x.png') |
||||
|
}, { |
||||
|
name: '辖区单位', |
||||
|
value: 4, |
||||
|
color: 'rgba(80, 194, 237, 1)', |
||||
|
icon: require('../../../../assets/img/shuju/measure/xq@2x.png') |
||||
|
}, { |
||||
|
name: '其他', |
||||
|
value: 5, |
||||
|
color: 'rgba(192, 21, 195, 1)', |
||||
|
icon: require('../../../../assets/img/shuju/measure/qita.png') |
||||
|
} |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
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) { |
||||
|
tableData = data.list.map((item, index) => { |
||||
|
return { |
||||
|
...item, |
||||
|
index: index + 1, |
||||
|
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> |
||||
|
<style lang="scss" scoped> |
||||
|
.warning-box { |
||||
|
display: flex; |
||||
|
.card-wr { |
||||
|
flex: 1; |
||||
|
} |
||||
|
.card-wr:last-child { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
} |
||||
|
.card-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
.title-icon { |
||||
|
display: block; |
||||
|
width: 46px; |
||||
|
height: 34px; |
||||
|
box-sizing: border-box; |
||||
|
margin-right: 6px; |
||||
|
} |
||||
|
.title-label { |
||||
|
font-size: 16px; |
||||
|
font-weight: 800; |
||||
|
} |
||||
|
::v-deep .el-dropdown { |
||||
|
font-size: 16px; |
||||
|
color: #fff; |
||||
|
font-weight: 800; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.second-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-top: 20px; |
||||
|
.second-title-label { |
||||
|
position: relative; |
||||
|
padding-left: 40px; |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.second-title-label::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 20px; |
||||
|
width: 12px; |
||||
|
height: 12px; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: -6px; |
||||
|
background: #2865FA; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
.second-select { |
||||
|
margin: 0 10px 0 40px; |
||||
|
::v-deep .el-input { |
||||
|
width: 120px; |
||||
|
height: 36px; |
||||
|
.el-input__inner { |
||||
|
height: 100%; |
||||
|
padding: 0 10px; |
||||
|
color: #fff; |
||||
|
line-height: 36px; |
||||
|
background: #06186D; |
||||
|
border: 1px solid #1A64CC; |
||||
|
} |
||||
|
|
||||
|
.el-icon-arrow-up:before { |
||||
|
content: "\e78f" |
||||
|
} |
||||
|
// .el-select__caret:before { |
||||
|
// content: '\E790' |
||||
|
// } |
||||
|
} |
||||
|
::v-deep .el-date-editor { |
||||
|
.el-input__prefix { |
||||
|
left: unset; |
||||
|
right: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.second-select:last-child { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.box-wr { |
||||
|
display: flex; |
||||
|
box-sizing: border-box; |
||||
|
.box-left { |
||||
|
flex-shrink: 0; |
||||
|
display: flex; |
||||
|
.box-left-item { |
||||
|
.box-label { |
||||
|
font-size: 16px; |
||||
|
color: rgba(255, 255, 255, .72); |
||||
|
} |
||||
|
.box-num { |
||||
|
font-size: 32px; |
||||
|
font-weight: bold; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.box-right { |
||||
|
flex: 1; |
||||
|
.box-map { |
||||
|
height: 400px; |
||||
|
border: 1px solid #2865FA; |
||||
|
} |
||||
|
} |
||||
|
.box-left-w400 { |
||||
|
flex-wrap: wrap; |
||||
|
width: 400px; |
||||
|
box-sizing: border-box; |
||||
|
padding-top: 60px; |
||||
|
padding-left: 100px; |
||||
|
.box-left-item { |
||||
|
width: 50%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.box-wr-400 { |
||||
|
height: 400px; |
||||
|
.box-left { |
||||
|
width: 300px; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
.box-left-item:last-child { |
||||
|
margin-top: 100px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.map-tips { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
flex-wrap: wrap; |
||||
|
padding-top: 10px; |
||||
|
padding-bottom: 20px; |
||||
|
.map-tips-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-top: 20px; |
||||
|
margin-right: 40px; |
||||
|
.map-tips-icon { |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
box-sizing: border-box; |
||||
|
margin-right: 10px; |
||||
|
// background: #DD2719; |
||||
|
// border-radius: 2px; |
||||
|
img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
.map-tips-label { |
||||
|
font-size: 16px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue