剔除不上线内容
This commit is contained in:
aixianling
@@ -1,285 +0,0 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<div class="area">
|
||||
<i>可选范围</i>
|
||||
<span class="separat">/</span>
|
||||
<!-- <AiArea class="aiArea" v-model="addressAreaId" mode="custom" fullname :areaRange="$areaId" :name.sync="addressArea" @change="reload">
|
||||
<div class="label" v-if="addressArea">{{ addressArea }}</div>
|
||||
<i v-else>请选择</i>
|
||||
</AiArea> -->
|
||||
<AiAreaPicker ref="area" class="aiArea" :name.sync="addressArea" :areaId="areaId" mode="custom"
|
||||
@select="onChange">
|
||||
<span class="label" v-if="addressArea">{{ addressArea }}</span>
|
||||
<i v-else>请选择</i>
|
||||
</AiAreaPicker>
|
||||
</div>
|
||||
<div class="list-wrapper">
|
||||
<div class="tab">
|
||||
<span @click="changeTab(0)" :class="[currIndex === 0 ? 'active' : '']">已登记监测对象</span>
|
||||
<span @click="changeTab(1)" :class="[currIndex === 1 ? 'active' : '']">已消除风险对象</span>
|
||||
</div>
|
||||
<div class="search">
|
||||
<u-search
|
||||
placeholder="请输入"
|
||||
:show-action="false"
|
||||
search-icon-color="#ccc"
|
||||
v-model="name"
|
||||
@search="reload">
|
||||
</u-search>
|
||||
</div>
|
||||
<div class="list-item__wrapper">
|
||||
<div class="list-item" v-for="(item, index) in list" :key="index" @click="toDetail(item.id)">
|
||||
<image src="/static/images/avatar.png"/>
|
||||
<div class="right">
|
||||
<h2>{{ item.name || item.phone }}</h2>
|
||||
<p>{{ item.addressArea }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length && isMore" style="padding-bottom: 20px;"></AiEmpty>
|
||||
</div>
|
||||
<AiFixedBtn>
|
||||
<div class="addBtn iconfont iconfont-iconfangda" @tap="toAdd"></div>
|
||||
</AiFixedBtn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'list',
|
||||
|
||||
data() {
|
||||
return {
|
||||
currIndex: 0,
|
||||
name: '',
|
||||
list: [],
|
||||
areaId: '',
|
||||
addressAreaId: '',
|
||||
addressArea: '',
|
||||
isMore: false,
|
||||
current: 1
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
uni.showLoading()
|
||||
this.areaId = this.$store.state.user.areaId
|
||||
this.addressAreaId = this.$store.state.user.areaId
|
||||
this.addressArea = this.$store.state.user.areaName
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
})
|
||||
uni.$on('reload', () => {
|
||||
if (this.currIndex === 0) {
|
||||
} else {
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
toDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: './MonitorDetail?id=' + id
|
||||
})
|
||||
},
|
||||
|
||||
onChange(e) {
|
||||
this.addressAreaId = e.id
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.reload()
|
||||
})
|
||||
},
|
||||
|
||||
toAdd() {
|
||||
uni.navigateTo({
|
||||
url: './MonitorAdd'
|
||||
})
|
||||
},
|
||||
|
||||
reload() {
|
||||
this.isMore = false
|
||||
this.current = 1
|
||||
uni.showLoading()
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
changeTab(index) {
|
||||
this.currIndex = index
|
||||
this.reload()
|
||||
},
|
||||
|
||||
getList() {
|
||||
if (this.isMore) return
|
||||
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/list`, null, {
|
||||
params: {
|
||||
current: this.current,
|
||||
size: 15,
|
||||
status: this.currIndex === 1 ? '1' : '',
|
||||
addressAreaId: this.addressAreaId,
|
||||
name: this.name
|
||||
}
|
||||
}).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: 112px 0 120px;
|
||||
|
||||
.addBtn {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
flex-shrink: 0;
|
||||
background: $uni-color-primary;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
font-size: 48px;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
margin-top: 16px;
|
||||
background: #fff;
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 32px;
|
||||
|
||||
image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #999999;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 20px 0;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,433 +0,0 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user