|
|
|
@ -4,7 +4,7 @@ |
|
|
|
<div class="card-title"> |
|
|
|
<img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" /> |
|
|
|
<div class="title-label"> |
|
|
|
<el-dropdown trigger="click"> |
|
|
|
<!-- <el-dropdown trigger="click"> |
|
|
|
<span class="el-dropdown-link"> |
|
|
|
全部网格<i class="el-icon-caret-bottom el-icon--right"></i> |
|
|
|
</span> |
|
|
|
@ -15,18 +15,16 @@ |
|
|
|
<el-dropdown-item>双皮奶</el-dropdown-item> |
|
|
|
<el-dropdown-item>蚵仔煎</el-dropdown-item> |
|
|
|
</el-dropdown-menu> |
|
|
|
</el-dropdown> |
|
|
|
</el-dropdown> --> |
|
|
|
<el-cascader |
|
|
|
v-model="selectAgency" |
|
|
|
:options="propTree" |
|
|
|
:props="{ checkStrictly: true }" |
|
|
|
:show-all-levels="false" |
|
|
|
:getCheckedNodes="getCheckedNodes" |
|
|
|
clearable @change="handleCascader"> |
|
|
|
</el-cascader> |
|
|
|
</div> |
|
|
|
<!-- <div class="title-time"> |
|
|
|
<div class="title-time-label">选择时间</div> |
|
|
|
<div class=""> |
|
|
|
<el-date-picker |
|
|
|
v-model="value2" |
|
|
|
type="month" |
|
|
|
placeholder="选择月"> |
|
|
|
</el-date-picker> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
<div class="card-echart"> |
|
|
|
<div class="card-left"> |
|
|
|
@ -47,7 +45,7 @@ |
|
|
|
</div> |
|
|
|
<div class="tips-items-num"> |
|
|
|
<div class="tips-item-count">{{item.value}}</div> |
|
|
|
<div class="tips-item-has">25%</div> |
|
|
|
<div class="tips-item-has">{{ item.radio }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -58,19 +56,19 @@ |
|
|
|
<div class="warning-box-bottom"> |
|
|
|
<screen-table |
|
|
|
:headerList="headerList" |
|
|
|
:tableData="tableData" |
|
|
|
:tableData="ageList" |
|
|
|
:visibleLoading="visibleLoading" |
|
|
|
:operate="false" |
|
|
|
></screen-table> |
|
|
|
<div class="pagination"> |
|
|
|
<el-pagination |
|
|
|
:current-page="pageNo" |
|
|
|
:page-size="pageSize" |
|
|
|
:current-page="agePageNo" |
|
|
|
:page-size="agePageSize" |
|
|
|
background |
|
|
|
layout="prev, pager, next" |
|
|
|
@size-change="pageSizeChangeHandleNew" |
|
|
|
@current-change="pageCurrentChangeHandleNew" |
|
|
|
:total="total" |
|
|
|
@size-change="pageSizeChangeHandleAge" |
|
|
|
@current-change="pageCurrentChangeHandleAge" |
|
|
|
:total="ageTotal" |
|
|
|
> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
@ -98,8 +96,8 @@ |
|
|
|
</div> |
|
|
|
<div class="warning-box-bottom"> |
|
|
|
<screen-table |
|
|
|
:headerList="headerList" |
|
|
|
:tableData="tableData" |
|
|
|
:headerList="headerEduList" |
|
|
|
:tableData="eduList" |
|
|
|
:visibleLoading="visibleLoading" |
|
|
|
:operate="false" |
|
|
|
></screen-table> |
|
|
|
@ -142,23 +140,31 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
warningList: [], |
|
|
|
headerList: [ |
|
|
|
{ title: "序号", coulmn: 'index' }, |
|
|
|
{ title: "姓名", coulmn: 'gridName' }, |
|
|
|
{ title: "年龄", coulmn: 'buildingName' }, |
|
|
|
{ title: "手机号码", coulmn: 'neighborhoodName' } |
|
|
|
{ title: "姓名", coulmn: 'name' }, |
|
|
|
{ title: "年龄", coulmn: 'age' }, |
|
|
|
{ title: "手机号码", coulmn: 'mobile' } |
|
|
|
], |
|
|
|
headerEduList: [ |
|
|
|
{ title: "序号", coulmn: 'index' }, |
|
|
|
{ title: "姓名", coulmn: 'name' }, |
|
|
|
{ title: "学历", coulmn: 'education' }, |
|
|
|
{ title: "手机号码", coulmn: 'mobile' } |
|
|
|
], |
|
|
|
tableData: [ |
|
|
|
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'], |
|
|
|
], |
|
|
|
selectAgency: null, |
|
|
|
propTree: [], |
|
|
|
value2: '', |
|
|
|
visibleLoading: true, |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 10, |
|
|
|
agePageNo: 1, |
|
|
|
agePageSize: 10, |
|
|
|
total: 0, |
|
|
|
activeIndex: 0, |
|
|
|
activeLevel: "1", |
|
|
|
ageTotal: 0, |
|
|
|
eduItem: [ |
|
|
|
{ |
|
|
|
name: '小学', |
|
|
|
@ -221,6 +227,8 @@ export default { |
|
|
|
color: 'rgba(255, 186, 0, 1)' |
|
|
|
} |
|
|
|
], |
|
|
|
ageList: [], |
|
|
|
eduList: [], |
|
|
|
pieAgeChartS: null, |
|
|
|
pieEduChartSs: null, |
|
|
|
pieAgeOptions: null, |
|
|
|
@ -228,12 +236,15 @@ export default { |
|
|
|
}; |
|
|
|
}, |
|
|
|
async mounted() { |
|
|
|
|
|
|
|
await nextTick(100); |
|
|
|
this.initAgeCharts() |
|
|
|
this.initEduCharts() |
|
|
|
await this.getAgencyList() |
|
|
|
this.getAgeCount(this.$store.state.user.agencyId, 'agency') |
|
|
|
this.getEduCount(this.$store.state.user.agencyId, 'agency') |
|
|
|
// this.initAgeCharts() |
|
|
|
// this.initEduCharts() |
|
|
|
this.getAgeList(this.$store.state.user.agencyId, 'agency') |
|
|
|
this.getEduList(this.$store.state.user.agencyId, 'agency') |
|
|
|
// this.initChartType() |
|
|
|
this.getBuildingwarnlist(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
pieInitOk (dom) { |
|
|
|
@ -252,105 +263,7 @@ export default { |
|
|
|
// const eId = document.getElementById('echartOrg') |
|
|
|
// let _charts = echarts.init(eId) |
|
|
|
let option = { |
|
|
|
// tooltip: { |
|
|
|
// show: false, |
|
|
|
// trigger: 'item' |
|
|
|
// }, |
|
|
|
// legend: { |
|
|
|
// show: false, |
|
|
|
// orient: 'vertical', |
|
|
|
// top: '40%', |
|
|
|
// left: 'right', |
|
|
|
// textStyle: { |
|
|
|
// color: '#fff' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// title: { |
|
|
|
// text: '12000', //图形标题，配置在中间对应效果图的80% |
|
|
|
// subtext: '总数', |
|
|
|
// left: "center", |
|
|
|
// top: "center", |
|
|
|
// textStyle: { |
|
|
|
// color: "#fff", |
|
|
|
// fontSize: 28, |
|
|
|
// align: "center" |
|
|
|
// }, |
|
|
|
// subtextStyle: { |
|
|
|
// fontSize: 16, |
|
|
|
// color: '#fff' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// series: [ |
|
|
|
// { |
|
|
|
// // name: 'Access From', |
|
|
|
// type: 'pie', |
|
|
|
// // center: ['10%', '50%'], |
|
|
|
// radius: ['40%', '60%'], |
|
|
|
// avoidLabelOverlap: true, |
|
|
|
// // top: top + '%', |
|
|
|
// // height: '80%', |
|
|
|
// left: 'center', |
|
|
|
// width: 400, |
|
|
|
// label: { |
|
|
|
// show: true, |
|
|
|
// position: 'outer', |
|
|
|
// alignTo: 'edge', |
|
|
|
// formatter: '{a|{c}}\n{r|}\n{name|{b}}', |
|
|
|
// minMargin: 5, |
|
|
|
// edgeDistance: 20, |
|
|
|
// lineHeight: 15, |
|
|
|
// color: '#fff', |
|
|
|
// fontSize: 12, |
|
|
|
// // padding: [5], |
|
|
|
// distanceToLabelLine: 10, |
|
|
|
// rich: { |
|
|
|
// name: { |
|
|
|
// padding: [0, 6, 0, 6] |
|
|
|
// }, |
|
|
|
// a: { |
|
|
|
// fontSize: 15, |
|
|
|
// color: '#fff', |
|
|
|
// padding: [0, 6, 0, 6] |
|
|
|
// }, |
|
|
|
// r: { |
|
|
|
// backgroundColor: 'auto', |
|
|
|
// borderRadius: 6, |
|
|
|
// width: 6, |
|
|
|
// height: 6, |
|
|
|
// // padding: [3, 3, 0, -12] |
|
|
|
// } |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// emphasis: { |
|
|
|
// label: { |
|
|
|
// show: true, |
|
|
|
// fontSize: '14', |
|
|
|
// fontWeight: 'bold' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// labelLine: { |
|
|
|
// show: false, |
|
|
|
// length: 20, |
|
|
|
// length2: 0, |
|
|
|
// maxSurfaceAngle: 80, |
|
|
|
// lineStyle: { |
|
|
|
// cap: 'round' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// labelLayout: function (params) { |
|
|
|
// const isLeft = params.labelRect.x < this.pieChartS.getWidth() / 2; |
|
|
|
// const points = params.labelLinePoints; |
|
|
|
// // Update the end point. |
|
|
|
// points[2][0] = isLeft |
|
|
|
// ? params.labelRect.x |
|
|
|
// : params.labelRect.x + params.labelRect.width; |
|
|
|
// return { |
|
|
|
// labelLinePoints: points |
|
|
|
// }; |
|
|
|
// }, |
|
|
|
// data: this.ageItem |
|
|
|
// } |
|
|
|
// ] |
|
|
|
|
|
|
|
} |
|
|
|
this.pieAgeOptions = pieOption(this.pieAgeChartS) |
|
|
|
this.clickAgePie(0) |
|
|
|
@ -606,59 +519,163 @@ export default { |
|
|
|
this.$refs.eduChart.setOption(this.pieEduOptions) |
|
|
|
|
|
|
|
}, |
|
|
|
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"; |
|
|
|
async getAgeCount(orgId, orgType) { |
|
|
|
const url = "/epmetuser/icresiuser/partymemberagestatistics"; |
|
|
|
let params = { |
|
|
|
configId: reqItem.configId, |
|
|
|
buildingIdList: reqItem["buildingIdList" + activeLevel], |
|
|
|
pageNo: this.pageNo, |
|
|
|
pageSize: this.pageSize, |
|
|
|
orgId, |
|
|
|
orgType |
|
|
|
}; |
|
|
|
const { data, code, msg } = await requestPost(url, params); |
|
|
|
if (code === 0) { |
|
|
|
tableData = data.list.map((item, index) => { |
|
|
|
this.ageItem = data.map(item => { |
|
|
|
return { |
|
|
|
...item, |
|
|
|
index: index + 1, |
|
|
|
residentNames: item.residentNames || "暂无" |
|
|
|
name: item.label |
|
|
|
} |
|
|
|
}); |
|
|
|
this.tableData = tableData; |
|
|
|
this.total = data.total; |
|
|
|
}) |
|
|
|
this.initAgeCharts() |
|
|
|
} else { |
|
|
|
} |
|
|
|
}, |
|
|
|
async getEduCount(orgId, orgType) { |
|
|
|
const url = "/epmetuser/icresiuser/partymembereducationstatistics"; |
|
|
|
let params = { |
|
|
|
orgId, |
|
|
|
orgType |
|
|
|
}; |
|
|
|
const { data, code, msg } = await requestPost(url, params); |
|
|
|
if (code === 0) { |
|
|
|
this.eduItem = data.map(item => { |
|
|
|
return { |
|
|
|
...item, |
|
|
|
name: item.label |
|
|
|
} |
|
|
|
}) |
|
|
|
this.initEduCharts() |
|
|
|
} else { |
|
|
|
} |
|
|
|
}, |
|
|
|
async getAgeList(orgId, orgType, _code) { |
|
|
|
this.visibleLoading = true |
|
|
|
const url = "/epmetuser/icresiuser/partymemberagelist"; |
|
|
|
let params = { |
|
|
|
orgId, |
|
|
|
orgType, |
|
|
|
code: _code || '', |
|
|
|
pageNo: this.agePageNo, |
|
|
|
pageSize: this.agePageSize |
|
|
|
}; |
|
|
|
const { data, code, msg } = await requestPost(url, params); |
|
|
|
if (code === 0) { |
|
|
|
this.ageList = data.list.map((item, index) => { |
|
|
|
return { |
|
|
|
...item, |
|
|
|
index: index + 1 |
|
|
|
} |
|
|
|
}) |
|
|
|
this.ageTotal = data.total |
|
|
|
} else { |
|
|
|
} |
|
|
|
this.visibleLoading = false |
|
|
|
}, |
|
|
|
// 【人员预警】 楼宇预警数量列表 |
|
|
|
async getBuildingwarnlist() { |
|
|
|
const url = "/epmetuser/statsresiwarn/buildingwarnlist"; |
|
|
|
async getEduList(orgId, orgType, _code) { |
|
|
|
const url = "/epmetuser/icresiuser/partymembereducationlist"; |
|
|
|
let params = { |
|
|
|
agencyId: this.$store.state.user.agencyId, |
|
|
|
orgId, |
|
|
|
orgType, |
|
|
|
code: _code || '', |
|
|
|
pageNo: this.pageNo, |
|
|
|
pageSize: this.pageSize |
|
|
|
}; |
|
|
|
const { data, code, msg } = await requestPost(url, params); |
|
|
|
if (code === 0) { |
|
|
|
this.warningList = data; |
|
|
|
this.visibleLoading = false; |
|
|
|
this.getUserwarnlist(); |
|
|
|
this.eduList = data.list.map((item, index) => { |
|
|
|
return { |
|
|
|
...item, |
|
|
|
index: index + 1 |
|
|
|
} |
|
|
|
}) |
|
|
|
this.total = data.total |
|
|
|
} else { |
|
|
|
} |
|
|
|
}, |
|
|
|
async getAgencyList(node, resolve) { |
|
|
|
// const url = "/gov/org/customeragency/staffinagencylist"; |
|
|
|
const url = '/gov/org/customeragency/agencygridtree' |
|
|
|
// let params = { |
|
|
|
// agencyId: this.$store.state.user.agencyId, |
|
|
|
// }; |
|
|
|
const { data, code, msg } = await requestPost(url); |
|
|
|
if (code === 0) { |
|
|
|
console.log('data-org----o', data) |
|
|
|
this.selectAgency = [`${data.agencyId}-${data.level}`] |
|
|
|
let arr = [] |
|
|
|
arr.push(data) |
|
|
|
this.propTree = arr && this.getTreeData(arr) |
|
|
|
|
|
|
|
} else { |
|
|
|
} |
|
|
|
}, |
|
|
|
getTreeData(data){ |
|
|
|
if (!Array.isArray(data)) return [] |
|
|
|
let arr = data.map(item => { |
|
|
|
let _item = {} |
|
|
|
if (item.subAgencyList) { |
|
|
|
if (item.subAgencyList.length === 0) { |
|
|
|
_item = { |
|
|
|
label: item.agencyName, |
|
|
|
value: item.agencyId + '-' + item.level, |
|
|
|
level: item.level, |
|
|
|
children: undefined |
|
|
|
} |
|
|
|
} else _item = { |
|
|
|
label: item.agencyName, |
|
|
|
value: item.agencyId + '-' + item.level, |
|
|
|
level: item.level, |
|
|
|
children: this.getTreeData(item.subAgencyList)} |
|
|
|
} else { |
|
|
|
_item = { |
|
|
|
label: item.agencyName, |
|
|
|
value: item.agencyId + '-' + item.level, |
|
|
|
level: item.level, |
|
|
|
} |
|
|
|
} |
|
|
|
return _item |
|
|
|
}) |
|
|
|
return arr |
|
|
|
}, |
|
|
|
handleCascader(val) { |
|
|
|
console.log('val-vvv', val) |
|
|
|
const _arr = val[val.length - 1].split('-') |
|
|
|
const orgType = _arr[1] !== 'grid' ? 'agency': 'grid' |
|
|
|
this.getAgeList(_arr[0], orgType) |
|
|
|
this.getEduList(_arr[0], orgType) |
|
|
|
}, |
|
|
|
getCheckedNodes(val) { |
|
|
|
console.log('val-nnn', val) |
|
|
|
}, |
|
|
|
lazyLoad(node, resolve) { |
|
|
|
setTimeout(() => { |
|
|
|
this.getAgeList(node, resolve) |
|
|
|
}, 500) |
|
|
|
}, |
|
|
|
pageSizeChangeHandleAge(val) { |
|
|
|
this.agePageNo = 1 |
|
|
|
this.agePageSize = val |
|
|
|
this.getAgeList() |
|
|
|
}, |
|
|
|
pageCurrentChangeHandleAge (val) { |
|
|
|
this.agePageSize = val |
|
|
|
this.getAgeList() |
|
|
|
}, |
|
|
|
pageSizeChangeHandleNew(val) { |
|
|
|
this.pageNo = 1; |
|
|
|
this.pageSize = val; |
|
|
|
this.getEduList() |
|
|
|
}, |
|
|
|
pageCurrentChangeHandleNew(val) { |
|
|
|
this.pageNo = val; |
|
|
|
this.getUserwarnlist(); |
|
|
|
this.getEduList() |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
@ -723,6 +740,21 @@ export default { |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.title-label { |
|
|
|
::v-deep .el-input { |
|
|
|
width: 180px; |
|
|
|
.el-input__inner { |
|
|
|
font-size: 20px; |
|
|
|
font-weight: 800; |
|
|
|
color: #fff; |
|
|
|
background: transparent; |
|
|
|
border: 0; |
|
|
|
} |
|
|
|
.el-icon-arrow-down::before { |
|
|
|
content: "\e790"; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.card-echart { |
|
|
|
display: flex; |
|
|
|
|
13176889840
4 years ago