剔除不上线内容
This commit is contained in:
aixianling
@@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<!-- <div class="tab">
|
||||
<span @click="changeTab(0)" :class="[currIndex === 0 ? 'active' : '']">高返贫风险人员</span>
|
||||
<span @click="changeTab(1)" :class="[currIndex === 1 ? 'active' : '']">监测对象风险解除</span>
|
||||
</div> -->
|
||||
<div class="list-wrapper">
|
||||
<div class="item" v-for="(item, index) in list" :key="index" hover-class="bg-hover" @click="toDetail(item.id)">
|
||||
<div class="item-top">
|
||||
<h2>{{ item.name || item.phone }}</h2>
|
||||
<span :style="{color: item.riskEliminationMethod ? '#2EA222' : '#FF4466'}">{{
|
||||
item.riskEliminationMethod ? '已解除' : '未解除'
|
||||
}}</span>
|
||||
</div>
|
||||
<p>{{ item.addressArea }} {{ item.address }}</p>
|
||||
<div class="item-bottom">家庭收入</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length && isMore" style="padding-bottom: 20px;"></AiEmpty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'list',
|
||||
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
isMore: false,
|
||||
current: 1,
|
||||
currIndex: 0
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
uni.showLoading()
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
})
|
||||
uni.$on('reload', () => {
|
||||
this.reload()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeTab(index) {
|
||||
this.currIndex = index
|
||||
},
|
||||
|
||||
toDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: `./MonitorDetail?id=${id}&isFrom=1`
|
||||
})
|
||||
},
|
||||
|
||||
reload() {
|
||||
this.isMore = false
|
||||
this.current = 1
|
||||
|
||||
this.getList()
|
||||
uni.showLoading()
|
||||
},
|
||||
|
||||
getList() {
|
||||
if (this.isMore) return
|
||||
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/list`, null, {
|
||||
params: {
|
||||
current: this.current,
|
||||
size: 15,
|
||||
status: 2
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
if (this.current > 1) {
|
||||
this.list = [...this.list, ...res.data.records]
|
||||
} else {
|
||||
this.list = res.data.records
|
||||
}
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
if (res.data.records.length < 10) {
|
||||
this.isMore = true
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
this.current = this.current + 1
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list {
|
||||
padding: 30px 0 120px;
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
padding: 0 60px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #D4D4D4;
|
||||
box-sizing: border-box;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 192px;
|
||||
height: 6px;
|
||||
background: transparent;
|
||||
transform: translateX(-50%);
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #1365DD;
|
||||
|
||||
&::after {
|
||||
background: #1365DD;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
.item {
|
||||
margin: 0 32px 32px;
|
||||
padding-bottom: 10px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
|
||||
.item-bottom {
|
||||
height: 94px;
|
||||
line-height: 94px;
|
||||
padding: 0 32px;
|
||||
border-top: 1px solid #DDDDDD;
|
||||
color: #3975C6;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.item-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
padding: 32px 32px 0;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #FFBB00;
|
||||
|
||||
&.status0 {
|
||||
color: #FF4466;
|
||||
}
|
||||
|
||||
&.status1 {
|
||||
color: #3975C6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.4;
|
||||
margin-bottom: 32px;
|
||||
padding: 0 32px;
|
||||
color: #999999;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,329 +0,0 @@
|
||||
<template>
|
||||
<div class="statistics">
|
||||
<div class="block"></div>
|
||||
<div class="charts-wrapper">
|
||||
<div class="total">
|
||||
<!-- <div class="total-item">
|
||||
<h2>2</h2>
|
||||
<p>高返贫风险人数</p>
|
||||
</div> -->
|
||||
<div class="total-item">
|
||||
<h2>{{ info.fxyjCount }}</h2>
|
||||
<p>监测对象风险预警</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="charts" v-if="false">
|
||||
<h2>本月高风险预警转换统计</h2>
|
||||
<div id="chart1" style="height: 400rpx"></div>
|
||||
</div>
|
||||
<div class="charts">
|
||||
<h2>本月纳入监测人群属性分析</h2>
|
||||
<div id="chart2" style="height: 400rpx"></div>
|
||||
</div>
|
||||
<div class="charts">
|
||||
<h2>本月风险消除方式统计</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 {
|
||||
chart1: null,
|
||||
chart2: null,
|
||||
chart3: null,
|
||||
chart4: null,
|
||||
info: {}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.scrollTo(0, 0)
|
||||
// this.chart1 = echarts.init(document.getElementById('chart1'))
|
||||
this.chart4 = echarts.init(document.getElementById('chart4'))
|
||||
this.chart2 = echarts.init(document.getElementById('chart2'))
|
||||
this.chart3 = echarts.init(document.getElementById('chart3'))
|
||||
this.$dict.load(['fpType', 'fpRiskEliminationMethod'])
|
||||
this.getInfo()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo() {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/statistics-h5`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
this.initChart2(res.data.byxzMap)
|
||||
this.initChart3(res.data.byxcMap)
|
||||
this.initChart4(res.data.fxxcCount, res.data.fxyjCount)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
initChart1() {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
|
||||
series: [
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
left: '0%',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%',
|
||||
sort: 'descending',
|
||||
gap: 2,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 60, name: '总上报'},
|
||||
{value: 40, name: '纳入监测'},
|
||||
{value: 20, name: '已处理'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
this.chart1.setOption(option)
|
||||
},
|
||||
|
||||
initChart2(data) {
|
||||
const values = data.map(item => {
|
||||
return {
|
||||
value: item.typeCount,
|
||||
name: this.$dict.getLabel('fpType', item.type)
|
||||
}
|
||||
})
|
||||
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.chart2.setOption(option)
|
||||
},
|
||||
|
||||
initChart3(data) {
|
||||
const values = data.map(item => {
|
||||
return {
|
||||
value: item.typeCount,
|
||||
name: this.$dict.getLabel('fpRiskEliminationMethod', item.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.chart3.setOption(option)
|
||||
},
|
||||
|
||||
initChart4(x, y) {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'funnel',
|
||||
left: '0%',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%',
|
||||
sort: 'descending',
|
||||
gap: 2,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: y, name: '纳入监测'},
|
||||
{value: x, name: '消除监测'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
this.chart4.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.statistics {
|
||||
padding: 40px 0 120px;
|
||||
|
||||
.block {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
background: #3975C6;
|
||||
}
|
||||
|
||||
.charts-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0 32px;
|
||||
|
||||
.total {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
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;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
h2 {
|
||||
color: #F09535;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user