jiangyy
4 years ago
8 changed files with 763 additions and 1 deletions
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,744 @@ |
|||
<template> |
|||
<div class="warning-box"> |
|||
<cpt-card> |
|||
<div class="card-title"> |
|||
<img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" /> |
|||
<div class="title-label"> |
|||
<el-dropdown trigger="click"> |
|||
<span class="el-dropdown-link"> |
|||
全部网格<i class="el-icon-caret-bottom el-icon--right"></i> |
|||
</span> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item>黄金糕</el-dropdown-item> |
|||
<el-dropdown-item>狮子头</el-dropdown-item> |
|||
<el-dropdown-item>螺蛳粉</el-dropdown-item> |
|||
<el-dropdown-item>双皮奶</el-dropdown-item> |
|||
<el-dropdown-item>蚵仔煎</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
</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"> |
|||
<div class="card-left-title">党员年龄统计</div> |
|||
<div class="card-flex"> |
|||
<div class="echart-wr"> |
|||
<div class="echart-cicle"></div> |
|||
<div id="echartOrg" class="echart-org"></div> |
|||
</div> |
|||
<div class="echarts-tips echarts-tips-wd50"> |
|||
<div class="tips-lists"> |
|||
<div v-for="item in ageItem" :key="item.value" class="tips-items"> |
|||
<div class="tips-items-title" :class="'tips-items-title' + item.value"> |
|||
{{ item.name }} |
|||
</div> |
|||
<div class="tips-items-num"> |
|||
<div class="tips-item-count">{{item.value}}</div> |
|||
<div class="tips-item-has">25%</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<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 class="card-left"> |
|||
<div class="card-left-title">党员学历统计</div> |
|||
<div class="card-flex"> |
|||
<div class="echart-wr echart-wr100"> |
|||
<div class="echart-cicle echart-cicle0"></div> |
|||
<div id="echartType" class="echart-org"></div> |
|||
</div> |
|||
<div v-if="false" class="echarts-tips"> |
|||
<div class="tips-list"> |
|||
<div v-for="item in eduItem" :key="item.value" class="tips-item"> |
|||
<div class="tips-item-icon" :style="'background:' + item.color"></div> |
|||
<div class="tips-item-text">{{item.name}}</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<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> |
|||
|
|||
|
|||
</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"; |
|||
|
|||
import * as echarts from 'echarts'; |
|||
export default { |
|||
name: "warning-box", |
|||
components: { |
|||
cptCard, |
|||
screenTable, |
|||
}, |
|||
data() { |
|||
return { |
|||
warningList: [], |
|||
headerList: [ |
|||
{ title: "序号", coulmn: 'index' }, |
|||
{ title: "姓名", coulmn: 'gridName' }, |
|||
{ title: "年龄", coulmn: 'buildingName' }, |
|||
{ title: "手机号码", coulmn: 'neighborhoodName' } |
|||
], |
|||
tableData: [ |
|||
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'], |
|||
], |
|||
value2: '', |
|||
visibleLoading: true, |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
total: 0, |
|||
activeIndex: 0, |
|||
activeLevel: "1", |
|||
eduItem: [ |
|||
{ |
|||
name: '小学', |
|||
value: 0, |
|||
color: 'rgba(27, 81, 255, 1)' |
|||
}, { |
|||
name: '初中', |
|||
value: 1, |
|||
color: 'rgba(0, 229, 237, 1)' |
|||
}, { |
|||
name: '高中', |
|||
value: 2, |
|||
color: 'rgba(120, 0, 255, 1)' |
|||
}, { |
|||
name: '中专', |
|||
value: 3, |
|||
color: 'rgba(255, 120, 0, 1)' |
|||
}, { |
|||
name: '大专', |
|||
value: 4, |
|||
color: 'rgba(255, 186, 0, 1)' |
|||
}, { |
|||
name: '本科', |
|||
value: 5, |
|||
color: 'rgba(22, 215, 131, 1)' |
|||
}, { |
|||
name: '硕士', |
|||
value: 6, |
|||
color: 'rgba(42, 0, 255, 1)' |
|||
}, { |
|||
name: '博士', |
|||
value: 7, |
|||
color: 'rgba(198, 0, 255, 1)' |
|||
}, { |
|||
name: '其他', |
|||
value: 8, |
|||
color: 'rgba(255, 42, 0, 1)' |
|||
} |
|||
], |
|||
ageItem: [ |
|||
{ |
|||
name: '50岁以下', |
|||
value: 1, |
|||
color: 'rgba(27, 81, 255, 1)' |
|||
}, { |
|||
name: '50-59岁', |
|||
value: 2, |
|||
color: 'rgba(0, 229, 237, 1)' |
|||
}, { |
|||
name: '60-69岁', |
|||
value: 3, |
|||
color: 'rgba(120, 0, 255, 1)' |
|||
}, { |
|||
name: '70-79岁', |
|||
value: 4, |
|||
color: 'rgba(255, 120, 0, 1)' |
|||
}, { |
|||
name: '80岁以上', |
|||
value: 5, |
|||
color: 'rgba(255, 186, 0, 1)' |
|||
} |
|||
], |
|||
|
|||
}; |
|||
}, |
|||
async mounted() { |
|||
await nextTick(100); |
|||
this.initCharts() |
|||
this.initChartType() |
|||
this.getBuildingwarnlist(); |
|||
}, |
|||
methods: { |
|||
initCharts() { |
|||
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: true, |
|||
length: 20, |
|||
length2: 0, |
|||
maxSurfaceAngle: 80, |
|||
lineStyle: { |
|||
cap: 'round' |
|||
} |
|||
}, |
|||
labelLayout: function (params) { |
|||
const isLeft = params.labelRect.x < _charts.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 |
|||
} |
|||
] |
|||
} |
|||
option && _charts.setOption(option); |
|||
|
|||
}, |
|||
initChartType() { |
|||
const eId = document.getElementById('echartType') |
|||
let _charts = echarts.init(eId) |
|||
let option = { |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
legend: { |
|||
show: true, |
|||
orient: 'vertical', |
|||
top: '20%', |
|||
right: 0, |
|||
textStyle: { |
|||
width: 90, |
|||
color: '#fff', |
|||
rich: { |
|||
a: { |
|||
width: 90 |
|||
} |
|||
} |
|||
}, |
|||
formatter: name => { |
|||
for (let a = 0; a < this.eduItem.length; a++) { |
|||
// this.data 这个数据中有名称和次数 |
|||
if (this.eduItem[a].name === name) { |
|||
//两个名称进行对比，取出对应的次数 |
|||
let params1 = name + "\n"; //然后return你需要的legend格式即可 |
|||
console.log(params1); |
|||
let tmp = params1.split("\n"); |
|||
let res = "" + params1; |
|||
for (let i in tmp) { |
|||
res = res.replace(tmp[i], ""); |
|||
} |
|||
return res + params1; |
|||
} |
|||
} |
|||
// var target; |
|||
// for(var i = 0; i < this.eduItem.length; i++){ |
|||
// if(i == this.eduItem.length && parseFloat(this.eduItem[i].value * 100).toFixed(2) < parseFloat(0.01)){ |
|||
// target = " (<0.01" |
|||
// break; |
|||
// } |
|||
// if(name == this.eduItem[i].name){ |
|||
// target = " (" + (this.eduItem[i].value * 100).toFixed(2) + "" |
|||
// break; |
|||
// } |
|||
// } |
|||
// var arr = [ |
|||
// '{a|' + name + target + '%)}', |
|||
// ] |
|||
// return arr.join('\n'); |
|||
} |
|||
}, |
|||
title: { |
|||
text: '12000', //图形标题，配置在中间对应效果图的80% |
|||
subtext: '总数', |
|||
left: 196, |
|||
top: "center", |
|||
textAlign: 'center', |
|||
textStyle: { |
|||
color: "#fff", |
|||
fontSize: 28, |
|||
align: "center" |
|||
}, |
|||
subtextStyle: { |
|||
fontSize: 16, |
|||
color: '#fff', |
|||
align: 'center' |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
// name: 'Access From', |
|||
type: 'pie', |
|||
// center: ['50%', '50%'], |
|||
radius: ['40%', '60%'], |
|||
avoidLabelOverlap: true, |
|||
// top: top + '%', |
|||
// height: '80%', |
|||
// left: 0, |
|||
width: 400, |
|||
label: { |
|||
position: 'outside', |
|||
alignTo: 'edge', |
|||
formatter: '{a|{c}}\n{r|}\n{name|{b}}', |
|||
minMargin: 5, |
|||
edgeDistance: 20, |
|||
lineHeight: 15, |
|||
color: '#fff', |
|||
fontSize: 15, |
|||
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: true, |
|||
length: 20, |
|||
length2: 0, |
|||
maxSurfaceAngle: 80 |
|||
}, |
|||
labelLayout: function (params) { |
|||
const isLeft = params.labelRect.x < _charts.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.eduItem |
|||
} |
|||
] |
|||
} |
|||
option && _charts.setOption(option); |
|||
|
|||
}, |
|||
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> |
|||
.card-title { |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
.title-icon { |
|||
display: block; |
|||
width: 46px; |
|||
height: 34px; |
|||
box-sizing: border-box; |
|||
margin-right: 6px; |
|||
} |
|||
::v-deep .el-dropdown { |
|||
font-size: 18px; |
|||
color: #fff; |
|||
font-weight: 800; |
|||
} |
|||
.title-time { |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
margin-left: 30px; |
|||
font-size: 14px; |
|||
color: #fff; |
|||
.title-time-label { |
|||
margin-right: 10px; |
|||
} |
|||
::v-deep .el-date-editor--month { |
|||
width: 100px; |
|||
.el-input__inner { |
|||
width: 100px; |
|||
height: 24px; |
|||
box-sizing: border-box; |
|||
padding: 0; |
|||
font-size: 14px; |
|||
color: #fff; |
|||
line-height: 24px; |
|||
text-align: center; |
|||
background: #06186D; |
|||
border: 1px solid #1A64CC; |
|||
border-radius: 2px; |
|||
} |
|||
.el-input__prefix { |
|||
display: none; |
|||
} |
|||
.el-input__suffix { |
|||
right: 0; |
|||
.el-input__icon { |
|||
line-height: 24px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
.card-echart { |
|||
display: flex; |
|||
margin-top: 40px; |
|||
height: 100%; |
|||
.card-left { |
|||
position: relative; |
|||
flex: 1; |
|||
// display: flex; |
|||
height: 100%; |
|||
.card-flex { |
|||
width: 100%; |
|||
display: flex; |
|||
} |
|||
} |
|||
} |
|||
.card-left-title { |
|||
position: relative; |
|||
padding-left: 40px; |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #fff; |
|||
} |
|||
.card-left-title::after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 20px; |
|||
width: 12px; |
|||
height: 12px; |
|||
box-sizing: border-box; |
|||
margin-top: -6px; |
|||
background: #2865FA; |
|||
border-radius: 50%; |
|||
} |
|||
.echart-wr { |
|||
position: relative; |
|||
flex-shrink: 0; |
|||
width: 50%; |
|||
height: 320px; |
|||
box-sizing: border-box; |
|||
.echart-org { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.echart-cicle { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
width: 240px; |
|||
height: 240px; |
|||
box-sizing: border-box; |
|||
margin-top: -120px; |
|||
margin-left: -120px; |
|||
border: 1px dashed rgba(0, 96, 240, 1); |
|||
border-radius: 50%; |
|||
} |
|||
.echart-cicle0 { |
|||
left: 80px; |
|||
margin-left: 0; |
|||
} |
|||
} |
|||
.echart-wr100 { |
|||
width: 70%; |
|||
} |
|||
.echarts-tips { |
|||
width: 40%; |
|||
// flex: 1; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.echarts-tips-wd50 { |
|||
width: 320px; |
|||
} |
|||
.tips-list, .tips-item, .tips-lists, .tips-items-num { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.tips-list { |
|||
// width: 100%; |
|||
// height: 100%; |
|||
flex-wrap: wrap; |
|||
// justify-content: center; |
|||
.tips-item { |
|||
// flex: 1; |
|||
width: 50%; |
|||
margin-top: 20px; |
|||
// margin-right: 40px; |
|||
cursor: pointer; |
|||
.tips-item-icon { |
|||
width: 20px; |
|||
height: 10px; |
|||
box-sizing: border-box; |
|||
margin-right: 8px; |
|||
background: #1B51FF; |
|||
border-radius: 2px; |
|||
} |
|||
.tips-item-text { |
|||
font-size: 16px; |
|||
color: #D2E7FF; |
|||
} |
|||
} |
|||
} |
|||
.tips-lists { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
padding: 30px 0 0 30px; |
|||
flex-wrap: wrap; |
|||
.tips-items { |
|||
margin-bottom: 30px; |
|||
margin-right: 40px; |
|||
// width: 50%; |
|||
cursor: pointer; |
|||
.tips-items-title { |
|||
position: relative; |
|||
width: 100px; |
|||
height: 26px; |
|||
box-sizing: border-box; |
|||
padding-left: 6px; |
|||
font-size: 16px; |
|||
color: #EFF0F1; |
|||
background: url('../../../../assets/img/shuju/measure/zi@2x.png') no-repeat left bottom; |
|||
&1 { |
|||
background: url('../../../../assets/img/shuju/measure/huang@2x.png') no-repeat left bottom; |
|||
} |
|||
&2 { |
|||
background: url('../../../../assets/img/shuju/measure/lan@2x.png') no-repeat left bottom; |
|||
} |
|||
&3 { |
|||
background: url('../../../../assets/img/shuju/measure/lanlv@2x.png') no-repeat left bottom; |
|||
} |
|||
&4 { |
|||
background: url('../../../../assets/img/shuju/measure/lv@2x.png') no-repeat left bottom; |
|||
} |
|||
} |
|||
.tips-items-num { |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
margin-top: 10px; |
|||
// padding-right: 30px; |
|||
font-size: 20px; |
|||
.tips-item-has { |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.warning-box-bottom { |
|||
height: calc(100% - 500px); |
|||
box-sizing: border-box; |
|||
margin: 0; |
|||
padding: 0 30px; |
|||
// overflow-y: scroll; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue