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