434 lines
9.3 KiB
Vue
434 lines
9.3 KiB
Vue
<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>
|