kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

迁移防返贫

Browse Source
This commit is contained in:
aixianling
2021-12-16 17:10:43 +08:00
parent 81c6e9ce04
commit 6ed973c0fc
19 changed files with 49 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

433
src/apps/AppPovertyAlleviation/Monitor/Statistics.vue Normal file
View File

@@ -0,0 +1,433 @@
<template>
<div class="statistics">
<div class="area">
<i>可选范围</i>
<span class="separat">/</span>
<AiAreaPicker ref="area" class="aiArea" :areaId="areaId" :name.sync="addressArea" mode="custom"
@select="onChange">
<span class="label" v-if="addressArea">{{ addressArea }}</span>
<i v-else>请选择</i>
</AiAreaPicker>
</div>
<div class="charts-wrapper">
<div class="total">
<div class="total-item">
<h2>{{ info.jths }}</h2>
<p>检测家庭户数</p>
</div>
<div class="total-item">
<h2>{{ info.zrs }}</h2>
<p>监测对象总人数</p>
</div>
</div>
<div class="charts">
<h2>近半年风险人数变化趋势</h2>
<div id="chart1" style="height: 400rpx"></div>
</div>
<div class="total middle-total">
<div class="total-item">
<h2>{{ info['饮水安全'] || 0 }}</h2>
<p>住房安全</p>
</div>
<div class="total-item">
<h2>{{ info['饮水安全'] || 0 }}</h2>
<p>饮水安全</p>
</div>
<div class="total-item">
<h2>{{ info['失学辍学'] || 0 }}</h2>
<p>失学辍学</p>
</div>
<div class="total-item">
<h2>{{ info['医疗保险'] || 0 }}</h2>
<p>医疗保险</p>
</div>
</div>
<div class="charts">
<h2>风险类型排行TOP10</h2>
<div id="chart3" style="height: 400rpx"></div>
</div>
<div class="charts">
<h2>风险消除方式</h2>
<div id="chart4" style="height: 400rpx"></div>
</div>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'statistics',
data() {
return {
addressAreaId: '',
addressArea: '',
chart1: null,
chart2: null,
chart3: null,
chart4: null,
areaId: '',
info: {},
pageShow: false
}
},
created() {
this.areaId = this.$store.state.user.areaId
this.addressAreaId = this.$store.state.user.areaId
this.addressArea = this.$store.state.user.areaName
},
mounted() {
window.scrollTo(0, 0)
this.chart1 = echarts.init(document.getElementById('chart1'))
this.chart4 = echarts.init(document.getElementById('chart4'))
this.chart3 = echarts.init(document.getElementById('chart3'))
this.$dict.load(['fpRiskType', 'fpRiskEliminationMethod']).then(() => {
this.getInfo()
})
},
methods: {
reload() {
this.$nextTick(() => {
this.getInfo()
})
},
onChange(e) {
this.addressAreaId = e.id
this.$nextTick(() => {
this.reload()
})
},
initChart1(data) {
const x = data.map(v => v.m)
const v = data.map(v => v.c)
const option = {
color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
xAxis: {
type: 'category',
data: x,
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: '#f5f5f5'
}
},
axisLabel: {
align: 'center',
padding: [2, 0, 0, 0],
interval: 0,
fontSize: 14,
color: '#999'
},
axisTick: {
length: 1,
show: true
},
boundaryGap: true,
axisLine: {
show: true,
lineStyle: {
color: '#aaa'
}
}
},
grid: {
top: '4%',
left: '4%',
right: '6%',
bottom: '0%',
containLabel: true
},
yAxis: {
type: 'value',
boundaryGap: true,
axisTick: {
length: 1,
show: true
},
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: '#f5f5f5'
}
},
nameTextStyle: {
color: '#f5f5f5',
align: 'left'
},
axisLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: '#aaa'
}
},
axisLabel: {
color: '#999'
}
},
series: [
{
data: v,
type: 'line'
}
]
}
this.chart1.setOption(option)
},
initChart3(data) {
const y = data.map(v => this.$dict.getLabel('fpRiskType', v.risk_type) || '其他')
const v = data.map(v => v.c)
const option = {
tooltip: {},
color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
grid: {
top: '4%',
left: '4%',
right: '6%',
bottom: '0%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: '#f5f5f5'
}
},
axisTick: {
length: 1,
show: true
},
axisLabel: {
align: 'center',
padding: [2, 0, 0, 0],
interval: 0,
fontSize: 14,
color: '#999'
},
boundaryGap: true,
axisLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: '#aaa'
}
},
},
yAxis: {
type: 'category',
data: y,
boundaryGap: true,
axisTick: {
length: 0,
show: false
},
splitLine: {
show: true,
lineStyle: {
color: ['#e9e9e9'],
width: 1,
type: 'solid'
}
},
nameTextStyle: {
color: '#999',
align: 'left'
},
axisLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: '#aaa'
}
},
axisLabel: {
color: '#999'
}
},
series: [
{
name: '2011',
type: 'bar',
data: v
}
]
}
this.chart3.setOption(option)
},
initChart4(data) {
const values = data.map(v => {
return {
value: v.c,
name: this.$dict.getLabel('fpRiskEliminationMethod', v.risk_elimination_method) || '其他'
}
})
const option = {
tooltip: {
trigger: 'item'
},
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '40px',
containLabel: true
},
color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
series: [
{
name: '本月纳入监测人群属性分析',
type: 'pie',
radius: ['40%', '70%'],
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
data: values
}
]
}
this.chart4.setOption(option)
},
getInfo() {
this.$http.post(`/app/apppreventionreturntopoverty/statistics-prtp?areaId=${this.addressAreaId}`).then(res => {
if (res.code === 0) {
this.info = res.data
this.initChart1(res.data['近半年趋势'])
this.initChart3(res.data['风险类型排行'])
this.initChart4(res.data['风险消除方式'])
}
})
}
}
}
</script>
<style lang="scss">
.statistics {
padding: 112px 0 120px;
.area {
display: flex;
position: fixed;
align-items: center;
top: 0;
left: 0;
z-index: 11;
width: 100%;
padding: 0 32px;
height: 112px;
color: #333333;
font-size: 30px;
background: #fff;
.separat {
padding: 0 8px;
}
i {
color: #3F8DF5;
font-size: 30px;
font-style: normal;
}
span {
color: #333333;
font-size: 30px;
}
}
.charts-wrapper {
position: relative;
z-index: 1;
padding: 0 32px;
.total {
display: flex;
align-items: center;
height: 200px;
margin-top: 32px;
background: #FFFFFF;
border-radius: 8px;
.total-item {
flex: 1;
text-align: center;
h2 {
font-size: 64px;
color: #3192F4;
}
p {
margin-top: 10px;
color: #999999;
font-size: 28px;
}
}
}
.middle-total {
height: 160px;
h2 {
font-size: 48px !important;
}
p {
margin-top: 8px !important;
}
}
.charts {
margin-top: 32px;
background: #FFFFFF;
border-radius: 8px;
& > h2 {
height: 96px;
line-height: 96px;
padding: 0 32px;
color: #333333;
font-size: 32px;
border-bottom: 1px solid #DDDDDD;
}
& > div {
width: 686px;
margin: 0 auto;
padding: 32px 0;
}
}
}
}
</style>