防返贫接入企微产品库和地图组件
This commit is contained in:
aixianling
365
src/pages/Monitor/Add.vue
Normal file
365
src/pages/Monitor/Add.vue
Normal file
@@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>监测对象类型</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpType" v-model="form.type"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>联系方式</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" type="number" v-model="form.phone" :maxlength="11" placeholder-style="color: #999; font-size: 30rpx;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>地址</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<!-- <AiArea class="aiArea" v-model="form.addressAreaId" mode="custom" fullname :areaRange="$areaId" :name.sync="form.addressArea">
|
||||
<span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
|
||||
<i v-else>请选择</i>
|
||||
<u-icon name="arrow-right" color="#ddd"/>
|
||||
</AiArea> -->
|
||||
<AiAreaPicker ref="address" class="aiArea" :areaId="$areaId" mode="custom" all @select="onAreaChange">
|
||||
<span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
|
||||
<i v-else>请选择</i>
|
||||
<u-icon name="arrow-right" color="#ddd"/>
|
||||
</AiAreaPicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>家庭住址</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.address" placeholder-style="color: #999; font-size: 30rpx;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>是否扶贫搬迁</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-radio-group v-model="form.move">
|
||||
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
|
||||
</u-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" v-if="form.move === '01'">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>安置地区</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiAreaPicker ref="area" class="aiArea" :areaId.sync="form.placeAreaId" mode="custom" all @select="onChange">
|
||||
<span class="label" v-if="form.placeArea">{{ form.placeArea }}</span>
|
||||
<i v-else>请选择</i>
|
||||
<u-icon name="arrow-right" color="#ddd"/>
|
||||
</AiAreaPicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>安置地区详细地址</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.place" placeholder-style="color: #999; font-size: 30rpx;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" hover-class="text" @click="submit"> {{ isEdit ? '保存' : '提交' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiUploader from '@/components/AiUploader'
|
||||
import AiSelect from '@/components/AiSelect'
|
||||
import AiArea from '@/components/AiArea'
|
||||
import AiAreaPicker from '@/components/AiAreaPicker'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
addressAreaId: '',
|
||||
address: '',
|
||||
addressArea: '',
|
||||
move: '02',
|
||||
place: '',
|
||||
placeAreaId: '',
|
||||
placeArea: '',
|
||||
type: ''
|
||||
},
|
||||
$areaId: '',
|
||||
isEdit: false,
|
||||
id: '',
|
||||
areaName: ''
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AiArea,
|
||||
AiSelect,
|
||||
AiUploader,
|
||||
AiAreaPicker
|
||||
},
|
||||
|
||||
created () {
|
||||
this.$areaId = this.$store.state.user.areaId
|
||||
this.areaName = this.$store.state.user.areaFullName
|
||||
this.$dict.load(['fpType', 'fpYesOrNo'])
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
if (query.id) {
|
||||
this.isEdit = true
|
||||
this.id = query.id
|
||||
|
||||
this.getInfo(this.id)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
submit () {
|
||||
if (!this.form.type) {
|
||||
return this.$u.toast('请选择监测类型')
|
||||
}
|
||||
|
||||
if (!this.form.phone) {
|
||||
return this.$u.toast('请输入联系方式')
|
||||
}
|
||||
|
||||
if (!this.form.addressAreaId) {
|
||||
return this.$u.toast('请选择住址')
|
||||
}
|
||||
|
||||
uni.showLoading()
|
||||
this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
|
||||
...this.form,
|
||||
id: this.isEdit ? this.id : ''
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast(this.isEdit ? '保存成功' : '提交成功')
|
||||
uni.$emit('reload')
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
|
||||
onAreaChange (e) {
|
||||
this.form.addressAreaId = e.id
|
||||
const areaList = this.$refs.address.fullArea
|
||||
let fullAreaName = ''
|
||||
areaList.forEach(item => {
|
||||
fullAreaName = fullAreaName + item.name
|
||||
})
|
||||
|
||||
this.form.addressArea = fullAreaName.replace('全国', '')
|
||||
},
|
||||
|
||||
onChange (e) {
|
||||
this.form.placeAreaId = e.id
|
||||
const areaList = this.$refs.area.fullArea
|
||||
let fullAreaName = ''
|
||||
areaList.forEach(item => {
|
||||
fullAreaName = fullAreaName + item.name
|
||||
})
|
||||
|
||||
this.form.placeArea = fullAreaName.replace('全国', '')
|
||||
},
|
||||
|
||||
getInfo (id) {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.form = {
|
||||
...this.form,
|
||||
...res.data
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add {
|
||||
padding-bottom: 120px;
|
||||
|
||||
.aiArea {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.label {
|
||||
color: #303133!important;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-left: 4px;
|
||||
font-style: normal;
|
||||
color: #999999;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-radio {
|
||||
&:last-child {
|
||||
.u-radio__label {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.form-item {
|
||||
padding-left: 32px;
|
||||
|
||||
.form-item__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
padding-right: 32px;
|
||||
|
||||
span {
|
||||
font-size: 30px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
font-style: normal;
|
||||
color: #FF4466;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.form-item__wrapper {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__imgs {
|
||||
padding: 32px;
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 34px;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
padding: 0 32px;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #3192F4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
461
src/pages/Monitor/AddFamilyMember.vue
Normal file
461
src/pages/Monitor/AddFamilyMember.vue
Normal file
@@ -0,0 +1,461 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>与户主关系</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpRelationship" v-model="form.relationship"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>姓名</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.name" placeholder-style="color: #999; font-size: 30rpx;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>身份证号</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.idNumber" placeholder-style="color: #999; font-size: 30rpx;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>性别</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="sex" v-model="form.sex"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>民族</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpNation" v-model="form.nation"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>政治面貌</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpPoliticalOutlook" v-model="form.politicalOutlook"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>文化程度</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpEducation" v-model="form.education"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>在校情况</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpStudentsInSchool" v-model="form.studentsInSchool"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>健康状况</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpHealth" v-model="form.health"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>劳动技能</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpLaborSkills" v-model="form.laborSkills"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>务工区域</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.workArea" placeholder-style="color: #999; font-size: 30rpx;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>务工时长(月)</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" type="number" v-model="form.workingMonths" placeholder-style="color: #999; font-size: 30rpx;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否参加医保</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-radio-group v-model="form.medicalInsurance">
|
||||
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
|
||||
</u-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否参加大病保险</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-radio-group v-model="form.sicknessInsurance">
|
||||
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
|
||||
</u-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否参加养老保险</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-radio-group v-model="form.endowmentInsurance">
|
||||
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
|
||||
</u-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否享受最低生活保障</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-radio-group v-model="form.subsistenceAllowance">
|
||||
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
|
||||
</u-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否特困供养</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-radio-group v-model="form.destitute">
|
||||
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
|
||||
</u-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="submit">提交</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiSelect from '@/components/AiSelect'
|
||||
import AiDate from '@/components/AiDate'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
destitute: '',
|
||||
education: '',
|
||||
endowmentInsurance: '',
|
||||
health: '',
|
||||
idNumber: '',
|
||||
laborSkills: '',
|
||||
medicalInsurance: '',
|
||||
name: '',
|
||||
nation: '',
|
||||
politicalOutlook: '',
|
||||
relationship: '',
|
||||
relocation: '',
|
||||
sex: '',
|
||||
sicknessInsurance: '',
|
||||
studentsInSchool: '',
|
||||
subsistenceAllowance: '',
|
||||
workArea: '',
|
||||
workingMonths: ''
|
||||
},
|
||||
id: '',
|
||||
info: {},
|
||||
isEdit: false,
|
||||
index: ''
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AiSelect,
|
||||
AiDate
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
uni.showLoading()
|
||||
this.id = query.id
|
||||
this.$dict.load(['fpRelationship', 'sex', 'fpNation', 'fpHealth', 'fpEducation', 'fpYesOrNo', 'fpLaborSkills', 'fpPoliticalOutlook',
|
||||
'fpRelationship', 'fpStudentsInSchool', 'fpFnancialAssistance', 'fpHealthAssistance', 'fpHousingSecurity']).then(() => {
|
||||
this.getInfo(query.id)
|
||||
})
|
||||
|
||||
if (query.index > -1) {
|
||||
this.isEdit = true
|
||||
this.index = Number(query.index)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo (id) {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
if (this.isEdit) {
|
||||
this.form = {
|
||||
...res.data.familyList[this.index]
|
||||
}
|
||||
}
|
||||
this.info = res.data
|
||||
}
|
||||
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
|
||||
rules () {
|
||||
return {
|
||||
relationship: '请选择与户主关系',
|
||||
name: '请输入姓名',
|
||||
idNumber: '请输入身份证号',
|
||||
sex: '请选择性别',
|
||||
studentsInSchool: '请选择在校情况',
|
||||
health: '请选择健康状况',
|
||||
medicalInsurance: '请选择是否参加医保',
|
||||
sicknessInsurance: '请选择是否参加大病保险',
|
||||
endowmentInsurance: '请选择是否参加养老保险',
|
||||
subsistenceAllowance: '请选择是否享受最低生活保障',
|
||||
destitute: '请选择是否特困供养',
|
||||
}
|
||||
},
|
||||
|
||||
submit () {
|
||||
const rules = this.rules()
|
||||
|
||||
for (let v of Object.keys(rules)) {
|
||||
if (!this.form[v]) {
|
||||
return this.$u.toast(rules[v])
|
||||
}
|
||||
}
|
||||
|
||||
uni.showLoading()
|
||||
let familyList = this.info.familyList
|
||||
if (this.isEdit) {
|
||||
familyList[this.index] = this.form
|
||||
} else {
|
||||
familyList.push(this.form)
|
||||
}
|
||||
this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
|
||||
...this.info,
|
||||
familyList,
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast(this.isEdit ? '编辑成功' : '提交成功')
|
||||
uni.$emit('reload')
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add {
|
||||
padding-bottom: 120px;
|
||||
|
||||
::v-deep .u-radio {
|
||||
&:last-child {
|
||||
.u-radio__label {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.form-item {
|
||||
padding-left: 32px;
|
||||
|
||||
.form-item__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
padding-right: 32px;
|
||||
|
||||
span {
|
||||
font-size: 30px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
font-style: normal;
|
||||
color: #FF4466;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.form-item__wrapper {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__imgs {
|
||||
padding: 32px;
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 34px;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
padding: 0 32px;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #3192F4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
159
src/pages/Monitor/AddLog.vue
Normal file
159
src/pages/Monitor/AddLog.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="form">
|
||||
<div class="form-item form-item__textarea">
|
||||
<div class="form-item__title">
|
||||
<em>*</em>
|
||||
<h2>帮扶内容</h2>
|
||||
</div>
|
||||
<textarea :maxlength="500" v-model="detail" placeholder="请输入帮扶内容"></textarea>
|
||||
</div>
|
||||
<div class="form-item form-item__imgs">
|
||||
<div class="form-item__title">
|
||||
<h2>图片</h2>
|
||||
<i>（最多9张）</i>
|
||||
</div>
|
||||
<div>
|
||||
<AiUploader :limit="9" multiple :def.sync="picture"></AiUploader>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="submit">提交</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiUploader from '@/components/AiUploader'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
detail: '',
|
||||
pid: '',
|
||||
id: '',
|
||||
picture: []
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AiUploader
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
if (query.id) {
|
||||
this.getInfo(query.id)
|
||||
this.id = query.id
|
||||
}
|
||||
this.pid = query.pid
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo (id) {
|
||||
this.$http.post(`/app/apppreventionreturntopovertylog/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.detail = res.data.detail
|
||||
this.picture = JSON.parse(res.data.picture)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
submit () {
|
||||
if (!this.detail) {
|
||||
return this.$u.toast('请输入帮扶内容')
|
||||
}
|
||||
|
||||
uni.showLoading()
|
||||
this.$http.post('/app/apppreventionreturntopovertylog/addOrUpdate', {
|
||||
detail: this.detail,
|
||||
picture: JSON.stringify(this.picture),
|
||||
pid: this.pid,
|
||||
id: this.id || ''
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast(this.isEdit ? '保存成功' : '提交成功')
|
||||
uni.$emit('reload')
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.form {
|
||||
padding-bottom: 120px;
|
||||
|
||||
div {
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
padding: 32px;
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 34px;
|
||||
|
||||
em {
|
||||
margin-right: 4px;
|
||||
font-style: normal;
|
||||
color: #FF4466;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
padding: 0 32px;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #3192F4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
539
src/pages/Monitor/Detail.vue
Normal file
539
src/pages/Monitor/Detail.vue
Normal file
@@ -0,0 +1,539 @@
|
||||
<template>
|
||||
<div class="detail" v-if="pageShow" :class="[isFrom ? 'active' : '']">
|
||||
<div class="tab" v-if="!isFrom">
|
||||
<span @click="changeTab(0)" :class="[currIndex === 0 ? 'active' : '']">基本信息</span>
|
||||
<span @click="changeTab(1)" :class="[currIndex === 1 ? 'active' : '']">帮扶日志</span>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-content__item" v-show="currIndex === 0">
|
||||
<div class="item-wrapper">
|
||||
<div class="item-header item-avatar">
|
||||
<div class="left">
|
||||
<image src="/static/images/avatar.png" />
|
||||
<div class="left-right">
|
||||
<h2>{{ info.name }}</h2>
|
||||
<p>{{ info.phone }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<span @click="linkTo('/pages/Monitor/Add?id=' + info.id)">编辑</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>行政区划</label>
|
||||
<span>{{ info.addressArea }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>家庭地址</label>
|
||||
<span>{{ info.address }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否扶贫搬迁</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.move) }}</span>
|
||||
</div>
|
||||
<div class="item-info" v-if="info.move === '01'">
|
||||
<label>安置地区</label>
|
||||
<span>{{ info.placeArea }}</span>
|
||||
</div>
|
||||
<div class="item-info" v-if="info.move === '01'">
|
||||
<label>安置详细地址</label>
|
||||
<span>{{ info.place }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>纳入监测时间</label>
|
||||
<span>{{ info.createTime }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>监测员</label>
|
||||
<span>{{ info.monitoringContact || '-' }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>监测员电话</label>
|
||||
<span style="color: #3D94FB;" @click="call(info.monitoringContactPhone)">{{ info.monitoringContactPhone || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-wrapper">
|
||||
<div class="item-header">
|
||||
<div class="left">
|
||||
<h2>家庭成员</h2>
|
||||
<i :style="{color: info.familyList.length ? '#2EA222' : '#FF4466'}">({{ info.familyList.length ? '已填写' : '未填写' }})</i>
|
||||
</div>
|
||||
<span @click="linkTo('/pages/Monitor/FamilyMember?id=' + info.id)">编辑</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>未参加医疗参保</label>
|
||||
<span>{{ info.ylbxCount }}人</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>未参加养老保险</label>
|
||||
<span>{{ info.ylCount }}人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-wrapper">
|
||||
<div class="item-header">
|
||||
<div class="left">
|
||||
<h2>家庭情况</h2>
|
||||
<i :style="{color: isFamilySituation ? '#2EA222' : '#FF4466'}">({{ isFamilySituation ? '已填写' : '未填写' }})</i>
|
||||
</div>
|
||||
<span @click="linkTo('/pages/Monitor/FamilySituation?id=' + info.id)">编辑</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否危房</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.dilapidatedHouse) || '-' }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>饮用水安全问题</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', info.drinkingWaterSafety) || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-wrapper">
|
||||
<div class="item-header">
|
||||
<div class="left">
|
||||
<h2>收支情况</h2>
|
||||
<i :style="{color: isIncome ? '#2EA222' : '#FF4466'}">({{ isIncome ? '已填写' : '未填写' }})</i>
|
||||
</div>
|
||||
<span @click="linkTo('/pages/Monitor/Income?id=' + info.id)">编辑</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>家庭纯收入</label>
|
||||
<span>{{ info.income6 }}元</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>家庭人均纯收入</label>
|
||||
<span>{{ info.income7 }}元</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-wrapper">
|
||||
<div class="item-header">
|
||||
<div class="left">
|
||||
<h2>风险解除</h2>
|
||||
<i :style="{color: isPoorStatus ? '#2EA222' : '#FF4466'}">({{ isPoorStatus ? '已填写' : '未填写' }})</i>
|
||||
</div>
|
||||
<span @click="linkTo('/pages/Monitor/PoorStatus?id=' + info.id)">编辑</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<label>是否消除风险</label>
|
||||
<span>{{ info.riskEliminationMethod ? '是' : '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content__item" v-show="currIndex === 1">
|
||||
<div class="log-item" v-for="(item, index) in list" :key="index">
|
||||
<div class="log-item__wrapper">
|
||||
<div class="log-item__user">
|
||||
<div class="left">
|
||||
<div class="user">
|
||||
<span>{{ item.createUserName.substr(item.createUserName.length - 2)}}</span>
|
||||
</div>
|
||||
<h2>{{ item.createUserName }}</h2>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>{{ item.createTime }}</span>
|
||||
<image src="/static/images/more.png" @click="edit(item.id)" />
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ item.detail }}</p>
|
||||
<div class="imgs">
|
||||
<image :src="img.url" @click="prevImg(item.imgs, img.url)" v-for="(img, index) in item.imgs" :key="index" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ai-empty v-if="!list.length" style="padding-bottom: 20px;"></ai-empty>
|
||||
</div>
|
||||
</div>
|
||||
<ai-fixed-btn v-if="currIndex === 1">
|
||||
<div class="addBtn iconfont iconfont-iconfangda" @tap="toAddLog"></div>
|
||||
</ai-fixed-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiFixedBtn from '@/components/AiFixedBtn'
|
||||
import AiEmpty from '@/components/AiEmpty/AiEmpty'
|
||||
export default {
|
||||
name: 'detail',
|
||||
|
||||
data () {
|
||||
return {
|
||||
info: {},
|
||||
pageShow: false,
|
||||
currIndex: 0,
|
||||
list: [],
|
||||
isFrom: false
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AiEmpty,
|
||||
AiFixedBtn
|
||||
},
|
||||
|
||||
computed: {
|
||||
isIncome () {
|
||||
if (!this.info.id) {
|
||||
return false
|
||||
}
|
||||
|
||||
return this.info.income6 > 0 && this.info.income7 > 0;
|
||||
|
||||
|
||||
},
|
||||
|
||||
isPoorStatus () {
|
||||
if (!this.info.id) {
|
||||
return false
|
||||
}
|
||||
|
||||
return !!this.info.riskEliminationMethod;
|
||||
|
||||
|
||||
},
|
||||
|
||||
isFamilySituation () {
|
||||
if (!this.info.id) {
|
||||
return false
|
||||
}
|
||||
|
||||
return !!(this.info.drinkingWaterSafety && this.info.dilapidatedHouse);
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
if (query.isFrom) {
|
||||
this.isFrom = true
|
||||
uni.setNavigationBarTitle({
|
||||
title: '风险预警详情'
|
||||
})
|
||||
}
|
||||
uni.showLoading()
|
||||
this.$dict.load(['fpType', 'riskEliminationMethod', 'fpRiskType', 'fpYesOrNo']).then(() => {
|
||||
this.getInfo(query.id)
|
||||
})
|
||||
|
||||
this.id = query.id
|
||||
uni.$on('reload', () => {
|
||||
this.getInfo(query.id)
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
linkTo (url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
|
||||
call (phone) {
|
||||
if (phone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
edit (id) {
|
||||
uni.showActionSheet({
|
||||
itemList: ['编辑', '删除'],
|
||||
success: res => {
|
||||
if (res.tapIndex === 0) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/Monitor/AddLog?pid=${this.info.id}&id=${id}`
|
||||
})
|
||||
} else if (res.tapIndex === 1) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
uni.showLoading()
|
||||
this.$http.post(`/app/apppreventionreturntopovertylog/delete?ids=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast('删除成功')
|
||||
this.getInfo(this.id)
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
prevImg (urls, img) {
|
||||
const imgs = urls.map(v => v.url)
|
||||
uni.previewImage({
|
||||
urls: imgs,
|
||||
current: img
|
||||
})
|
||||
},
|
||||
|
||||
toAddLog () {
|
||||
uni.navigateTo({
|
||||
url: '/pages/Monitor/AddLog?pid=' + this.info.id
|
||||
})
|
||||
},
|
||||
|
||||
changeTab (index) {
|
||||
this.currIndex = index
|
||||
},
|
||||
|
||||
getInfo (id) {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
|
||||
let ylbxCount = 0
|
||||
let ylCount = 0
|
||||
res.data.familyList.forEach(item => {
|
||||
if (item.medicalInsurance === '02') {
|
||||
ylbxCount = ylbxCount + 1
|
||||
}
|
||||
if (item.endowmentInsurance === '02') {
|
||||
ylCount = ylCount + 1
|
||||
}
|
||||
})
|
||||
this.info.ylbxCount = ylbxCount
|
||||
this.info.ylCount = ylCount
|
||||
this.pageShow = true
|
||||
}
|
||||
|
||||
uni.hideLoading()
|
||||
})
|
||||
this.$http.post(`/app/apppreventionreturntopovertylog/list?pid=${id}&size=1000¤t=1`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.list = res.data.records.map(item => {
|
||||
return {
|
||||
...item,
|
||||
imgs: JSON.parse(item.picture)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.detail {
|
||||
padding-top: 96px;
|
||||
padding-bottom: 60px;
|
||||
|
||||
&.active {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
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: 96rpx;
|
||||
line-height: 96rpx;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
background: #fff;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 32px 16px;
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 96px;
|
||||
|
||||
& > span {
|
||||
color: #3975C6;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: #2EA222;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 14px 0;
|
||||
|
||||
label {
|
||||
color: #999999;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
max-width: 496px;
|
||||
text-align: right;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-avatar {
|
||||
height: 192px;
|
||||
|
||||
image {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.left-right {
|
||||
p {
|
||||
margin-top: 8px;
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.log-item {
|
||||
padding: 0 0 0 32px;
|
||||
background: #fff;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.log-item__wrapper {
|
||||
border: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
.log-item__wrapper {
|
||||
padding: 32px 32px 32px 0;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
|
||||
.log-item__user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
.user, image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: #2266FF;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: 6px;
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 4px 0 16px 96px;
|
||||
color: #343D65;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
margin-left: 96px;
|
||||
|
||||
image {
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
336
src/pages/Monitor/FamilyMember.vue
Normal file
336
src/pages/Monitor/FamilyMember.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<div class="familyMember" v-if="pageShow">
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<div class="item-title">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<h2>{{ item.name }}</h2>
|
||||
<span>{{ item.idNumber }}</span>
|
||||
</div>
|
||||
<span>{{ $dict.getLabel('fpRelationship', item.relationship) }}</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span>{{ $dict.getLabel('sex', item.sex) }}</span>
|
||||
<span>{{ item.age }}岁</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-info" v-if="item.isShow">
|
||||
<div class="item-info__item">
|
||||
<label>民族</label>
|
||||
<span>{{ $dict.getLabel('fpNation', item.nation) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>政治面貌</label>
|
||||
<span>{{ $dict.getLabel('fpPoliticalOutlook', item.politicalOutlook) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>文化程度</label>
|
||||
<span>{{ $dict.getLabel('fpEducation', item.education) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>在校情况</label>
|
||||
<span>{{ $dict.getLabel('fpStudentsInSchool', item.studentsInSchool) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>健康状况</label>
|
||||
<span>{{ $dict.getLabel('fpHealth', item.health) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>劳动技能</label>
|
||||
<span>{{ $dict.getLabel('fpLaborSkills', item.laborSkills) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>务工区域</label>
|
||||
<span>{{ item.workArea }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>务工时间</label>
|
||||
<span>{{ item.workingMonths }}月</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>是否参加医疗参保</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', item.medicalInsurance) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>是否参加大病保险</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', item.sicknessInsurance) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>是否参加养老保险</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', item.endowmentInsurance) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>是否享受最低生活保障</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', item.subsistenceAllowance) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>是否特困供养</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', item.destitute) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-bottom">
|
||||
<span @click="showMore(index)">{{ item.isShow ? '收起详情' : '展开详情' }}</span>
|
||||
<span @click="toEdit(index)">编辑</span>
|
||||
<span @click="remove(index)">删除</span>
|
||||
</div>
|
||||
</div>
|
||||
<ai-fixed-btn>
|
||||
<div class="addBtn iconfont iconfont-iconfangda" @tap="toAdd"></div>
|
||||
</ai-fixed-btn>
|
||||
<div class="no-more" v-if="!list.length">
|
||||
<image src="/static/images/empty.png" />
|
||||
<div>
|
||||
<span>您还未添加过家庭成员点击</span>
|
||||
<i>新增按钮</i>
|
||||
<span>试试吧~</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiFixedBtn from '@/components/AiFixedBtn'
|
||||
import AiBack from '@/components/AiBack'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list: [],
|
||||
id: '',
|
||||
info: {},
|
||||
pageShow: false
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AiBack,
|
||||
AiFixedBtn
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
uni.showLoading()
|
||||
this.id = query.id
|
||||
this.$dict.load(['fpRelationship', 'sex', 'fpNation', 'fpHealth', 'fpEducation', 'fpYesOrNo', 'fpLaborSkills', 'fpPoliticalOutlook',
|
||||
'fpRelationship', 'fpStudentsInSchool', 'fpFnancialAssistance', 'fpHealthAssistance', 'fpHousingSecurity']).then(() => {
|
||||
this.getInfo(query.id)
|
||||
})
|
||||
|
||||
uni.$on('reload', () => {
|
||||
this.getInfo(query.id)
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
toAdd () {
|
||||
uni.navigateTo({
|
||||
url: '/pages/Monitor/AddFamilyMember?id=' + this.id
|
||||
})
|
||||
},
|
||||
|
||||
toEdit (index) {
|
||||
this.$confirm('确定编辑该数据？').then(() => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/Monitor/AddFamilyMember?id=${this.id}&index=${index}`
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
|
||||
remove (index) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
let familyList = JSON.parse(JSON.stringify(this.list))
|
||||
familyList.splice(index, 1)
|
||||
uni.showLoading()
|
||||
this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
|
||||
...this.info,
|
||||
familyList,
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast('删除成功')
|
||||
this.getInfo(this.id)
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
|
||||
showMore (index) {
|
||||
this.list[index].isShow = !this.list[index].isShow
|
||||
},
|
||||
|
||||
getInfo (id) {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
this.list = res.data.familyList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
isShow: false,
|
||||
age: this.$calcAge(item.idNumber)
|
||||
}
|
||||
})
|
||||
|
||||
this.pageShow = true
|
||||
}
|
||||
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.familyMember {
|
||||
padding: 32px 0;
|
||||
|
||||
.no-more {
|
||||
padding-top: 160px;
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
width: 282px;
|
||||
height: 304px;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 280px;
|
||||
margin: 0 auto;
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: #467DFE;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 686px;
|
||||
margin: 0 auto 32px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
|
||||
.item-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 94px;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 96px;
|
||||
color: #3975C6;
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
padding: 32px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
margin-right: 32px;
|
||||
color: #333333;
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
color: #3975C6;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: #F9F9F9;
|
||||
|
||||
.item-info__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 50%;
|
||||
height: 72px;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
border-right: 1px solid #DDDDDD;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: #999999;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #3975C6;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
259
src/pages/Monitor/FamilySituation.vue
Normal file
259
src/pages/Monitor/FamilySituation.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否危房</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-radio-group v-model="form.dilapidatedHouse">
|
||||
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
|
||||
</u-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否饮水安全问题</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-radio-group v-model="form.drinkingWaterSafety">
|
||||
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
|
||||
</u-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>风险类型</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpRiskType" v-model="form.riskType"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="form-group form-textarea">
|
||||
<h2>备注</h2>
|
||||
<textarea placeholder-style="color: #999; font-size: 30rpx;" placeholder="请输入"></textarea>
|
||||
</div> -->
|
||||
<div class="btn" hover-class="text" @click="submit">保存</div>
|
||||
<AiBack></AiBack>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiBack from '@/components/AiBack'
|
||||
import AiSelect from '@/components/AiSelect'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
dilapidatedHouse: '',
|
||||
drinkingWaterSafety: '',
|
||||
riskType: ''
|
||||
},
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AiBack,
|
||||
AiSelect
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
this.$dict.load(['fpYesOrNo', 'fpRiskType'])
|
||||
uni.showLoading()
|
||||
this.id = query.id
|
||||
this.getInfo(query.id)
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo (id) {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.form = {
|
||||
...this.form,
|
||||
...res.data
|
||||
}
|
||||
}
|
||||
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
|
||||
submit () {
|
||||
uni.showLoading()
|
||||
this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
|
||||
...this.form,
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast(this.isEdit ? '保存成功' : '提交成功')
|
||||
uni.$emit('reload')
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add {
|
||||
padding-bottom: 120px;
|
||||
|
||||
.form-textarea {
|
||||
padding: 32px;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 32px;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
::v-deep .u-radio {
|
||||
&:last-child {
|
||||
.u-radio__label {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.form-item {
|
||||
padding-left: 32px;
|
||||
|
||||
.form-item__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
padding-right: 32px;
|
||||
|
||||
span {
|
||||
font-size: 30px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
font-style: normal;
|
||||
color: #FF4466;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.form-item__wrapper {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__imgs {
|
||||
padding: 32px;
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 34px;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
padding: 0 32px;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #3192F4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
267
src/pages/Monitor/Income.vue
Normal file
267
src/pages/Monitor/Income.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>工资收入</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.income1" type="number" placeholder-style="color: #999; font-size: 30rpx;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>生产经营收入</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.income2" type="number" placeholder-style="color: #999; font-size: 30rpx;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>财产性收入</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.income3" type="number" placeholder-style="color: #999; font-size: 30rpx;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>转移性收入</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.income4" type="number" placeholder-style="color: #999; font-size: 30rpx;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>理赔收入</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.income8" type="number" placeholder-style="color: #999; font-size: 30rpx;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>生产经营支出</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.income5" type="number" placeholder-style="color: #999; font-size: 30rpx;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<span>合规自然支出</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input placeholder="请输入" v-model="form.income9" type="number" placeholder-style="color: #999; font-size: 30rpx;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tips">*不填时默认为0元</p>
|
||||
<div class="btn" hover-class="text" @click="submit">保存</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
income1: '',
|
||||
income2: '',
|
||||
income3: '',
|
||||
income4: '',
|
||||
income5: '',
|
||||
income8: '',
|
||||
income9: ''
|
||||
},
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
uni.showLoading()
|
||||
this.id = query.id
|
||||
this.getInfo(query.id)
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo (id) {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.form = {
|
||||
...this.form,
|
||||
...res.data
|
||||
}
|
||||
}
|
||||
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
|
||||
submit () {
|
||||
uni.showLoading()
|
||||
this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
|
||||
...this.form,
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast(this.isEdit ? '保存成功' : '提交成功')
|
||||
uni.$emit('reload')
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add {
|
||||
padding-bottom: 120px;
|
||||
|
||||
.tips {
|
||||
margin: 32px 0 0 32px;
|
||||
color: #999999;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.form-item {
|
||||
padding-left: 32px;
|
||||
|
||||
.form-item__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
padding-right: 32px;
|
||||
|
||||
span {
|
||||
font-size: 30px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
font-style: normal;
|
||||
color: #FF4466;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.form-item__wrapper {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__imgs {
|
||||
padding: 32px;
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 34px;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
padding: 0 32px;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #3192F4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
87
src/pages/Monitor/Monitor.vue
Normal file
87
src/pages/Monitor/Monitor.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="povertyMonitor">
|
||||
<div class="form-content">
|
||||
<List ref="list" v-if="currIndex === 0"></List>
|
||||
<Statistics ref="statistics" v-if="currIndex === 1"></Statistics>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">监测对象列表</div>
|
||||
<div @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">数据统计</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Statistics from './components/Statistics.vue'
|
||||
import List from './components/List.vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
currIndex: 0
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
List,
|
||||
Statistics
|
||||
},
|
||||
|
||||
computed: {
|
||||
tabBar () {
|
||||
const link = icon => `${this.$cdn}askform/${icon}.png`
|
||||
return [
|
||||
{text: "监测对象列表", iconPath: "bdlb1", selectedIconPath: "bdlb2" },
|
||||
{text: "数据统计", iconPath: "xjxm1", selectedIconPath: "xjxm2" }
|
||||
].map(e => ({
|
||||
...e,
|
||||
iconPath: link(e.iconPath),
|
||||
selectedIconPath: link(e.selectedIconPath)
|
||||
}))
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
uni.$on('reload', () => {
|
||||
if (this.currIndex === 0) {
|
||||
this.$refs.list.reload()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (this.currIndex === 0) {
|
||||
this.$refs.list.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.povertyMonitor {
|
||||
.footer {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
height: 98px;
|
||||
line-height: 98px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
background: #fff;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: #3192F4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
350
src/pages/Monitor/PoorStatus.vue
Normal file
350
src/pages/Monitor/PoorStatus.vue
Normal file
@@ -0,0 +1,350 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="form-group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>产业帮扶</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpIndustrialAssistance" v-model="form.industrialAssistance"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>健康帮扶</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpHealthAssistance" v-model="form.healthAssistance"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>就业帮扶</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpEmploymentAssistance" v-model="form.employmentAssistance"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>教育帮扶</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpEducationalAssistance" v-model="form.educationalAssistance"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>金融帮扶</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpFinancialAssistance" v-model="form.financialAssistance"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>社会帮扶</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpSocialAssistance" v-model="form.socialAssistance"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<span>公益岗位帮扶</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpPublicWelfarePostAssistance" v-model="form.publicWelfarePostAssistance"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>是否消除风险</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-radio-group v-model="form.isRisk" @change="onRiskChange">
|
||||
<u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
|
||||
</u-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item" v-if="form.isRisk === '01'">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>风险消除方式</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiSelect dict="fpRiskEliminationMethod" v-model="form.riskEliminationMethod"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item" v-if="form.isRisk === '01'">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="left">
|
||||
<i>*</i>
|
||||
<span>风险消除时间</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<AiDate v-model="form.riskEliminationDate"></AiDate>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" hover-class="text" @click="submit">保存</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiSelect from '@/components/AiSelect'
|
||||
import AiDate from '@/components/AiDate'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
result: '',
|
||||
form: {
|
||||
isRisk: '02',
|
||||
riskEliminationMethod: '',
|
||||
riskEliminationDate: '',
|
||||
industrialAssistance: '',
|
||||
healthAssistance: '',
|
||||
employmentAssistance: '',
|
||||
educationalAssistance: '',
|
||||
financialAssistance: '',
|
||||
socialAssistance: '',
|
||||
publicWelfarePostAssistance: ''
|
||||
},
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AiDate,
|
||||
AiSelect
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
uni.showLoading()
|
||||
this.$dict.load(['fpYesOrNo', 'fpRiskEliminationMethod', 'fpIndustrialAssistance', 'fpHealthAssistance', 'fpEmploymentAssistance',
|
||||
'fpEducationalAssistance', 'fpFinancialAssistance', 'fpSocialAssistance', 'fpPublicWelfarePostAssistance']).then(() => {
|
||||
this.getInfo(query.id)
|
||||
})
|
||||
this.id = query.id
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo (id) {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.form = {
|
||||
...this.form,
|
||||
...res.data
|
||||
}
|
||||
|
||||
if (this.form.riskEliminationMethod) {
|
||||
this.form.isRisk = '01'
|
||||
}
|
||||
}
|
||||
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
|
||||
onRiskChange (e) {
|
||||
if (e === '02') {
|
||||
this.form.riskEliminationMethod = ''
|
||||
this.form.riskEliminationDate = ''
|
||||
}
|
||||
},
|
||||
|
||||
submit () {
|
||||
if (!this.form.isRisk) {
|
||||
return this.$u.toast('请选择是否消除风险')
|
||||
}
|
||||
|
||||
if (this.form.isRisk === '01') {
|
||||
if (!this.form.riskEliminationMethod) {
|
||||
return this.$u.toast('请选择风险消除方式')
|
||||
}
|
||||
|
||||
if (!this.form.riskEliminationDate) {
|
||||
return this.$u.toast('请选择风险消除时间')
|
||||
}
|
||||
}
|
||||
|
||||
uni.showLoading()
|
||||
this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
|
||||
...this.form,
|
||||
riskEliminationMethod: this.form.isRisk ? this.form.riskEliminationMethod : '',
|
||||
id: this.id,
|
||||
status: this.form.isRisk === '01' ? 1 : ''
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast(this.isEdit ? '保存成功' : '提交成功')
|
||||
uni.$emit('reload')
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add {
|
||||
padding-bottom: 120px;
|
||||
|
||||
& > div {
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
::v-deep .u-radio {
|
||||
&:last-child {
|
||||
.u-radio__label {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.form-item {
|
||||
padding-left: 32px;
|
||||
|
||||
.form-item__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
border-bottom: 1px solid #E4E5E6;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
padding-right: 32px;
|
||||
|
||||
span {
|
||||
font-size: 30px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
font-style: normal;
|
||||
color: #FF4466;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.form-item__wrapper {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__imgs {
|
||||
padding: 32px;
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 34px;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
padding: 0 32px;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #3192F4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
295
src/pages/Monitor/components/List.vue
Normal file
295
src/pages/Monitor/components/List.vue
Normal file
@@ -0,0 +1,295 @@
|
||||
<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>
|
||||
<ai-empty v-if="!list.length && isMore" style="padding-bottom: 20px;"></ai-empty>
|
||||
</div>
|
||||
<ai-fixed-btn>
|
||||
<div class="addBtn iconfont iconfont-iconfangda" @tap="toAdd"></div>
|
||||
</ai-fixed-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiArea from '@/components/AiArea'
|
||||
import AiFixedBtn from '@/components/AiFixedBtn'
|
||||
import AiEmpty from '@/components/AiEmpty/AiEmpty'
|
||||
import AiAreaPicker from '@/components/AiAreaPicker'
|
||||
|
||||
export default {
|
||||
name: 'list',
|
||||
|
||||
data () {
|
||||
return {
|
||||
currIndex: 0,
|
||||
name: '',
|
||||
list: [],
|
||||
areaId: '',
|
||||
addressAreaId: '',
|
||||
addressArea: '',
|
||||
isMore: false,
|
||||
current: 1
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AiArea,
|
||||
AiEmpty,
|
||||
AiAreaPicker,
|
||||
AiFixedBtn
|
||||
},
|
||||
|
||||
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: '/pages/Monitor/Detail?id=' + id
|
||||
})
|
||||
},
|
||||
|
||||
onChange (e) {
|
||||
this.addressAreaId = e.id
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.reload()
|
||||
})
|
||||
},
|
||||
|
||||
toAdd () {
|
||||
uni.navigateTo({
|
||||
url: '/pages/Monitor/Add'
|
||||
})
|
||||
},
|
||||
|
||||
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: 96rpx;
|
||||
line-height: 96rpx;
|
||||
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>
|
||||
439
src/pages/Monitor/components/Statistics.vue
Normal file
439
src/pages/Monitor/components/Statistics.vue
Normal file
@@ -0,0 +1,439 @@
|
||||
<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'
|
||||
import AiArea from '@/components/AiArea'
|
||||
import AiAreaPicker from '@/components/AiAreaPicker'
|
||||
|
||||
export default {
|
||||
name: 'statistics',
|
||||
|
||||
data () {
|
||||
return {
|
||||
addressAreaId: '',
|
||||
addressArea: '',
|
||||
chart1: null,
|
||||
chart2: null,
|
||||
chart3: null,
|
||||
chart4: null,
|
||||
areaId: '',
|
||||
info: {},
|
||||
pageShow: false
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AiArea,
|
||||
AiAreaPicker
|
||||
},
|
||||
|
||||
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>
|
||||
228
src/pages/PovertyAlleviation/News.vue
Normal file
228
src/pages/PovertyAlleviation/News.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="news">
|
||||
<div class="tab">
|
||||
<span
|
||||
@click="changeTab(index, item.dictValue)"
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
:class="[currIndex === index ? 'active' : '']">
|
||||
{{ item.dictName }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for="(item, index) in list" :key="index" @click="linkTo('/pages/PovertyAlleviation/NewsDetail?id=' + item.id)">
|
||||
<div class="left">
|
||||
<h2>{{ item.title }}</h2>
|
||||
<div class="item-bottom">
|
||||
<span>{{ $dict.getLabel('newsCenterPolicyType', item.policyType) }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<image v-if="item.coverFile" :src="item.coverFile ? item.coverFile.url : ''" />
|
||||
</div>
|
||||
<ai-empty v-if="!list.length && isMore" style="padding-bottom: 20px;"></ai-empty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiEmpty from '@/components/AiEmpty/AiEmpty'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
currIndex: 0,
|
||||
list: [],
|
||||
current: 1,
|
||||
size: 15,
|
||||
type: '',
|
||||
tabList: [],
|
||||
isMore: false
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AiEmpty
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
uni.showLoading()
|
||||
this.$dict.load(['newsCenterPolicyType']).then(() => {
|
||||
this.tabList = this.$dict.getDict('newsCenterPolicyType')
|
||||
this.type = this.$dict.getDict('newsCenterPolicyType')[0].dictValue
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeTab (index, type) {
|
||||
this.type = type
|
||||
this.currIndex = index
|
||||
|
||||
this.current = 1
|
||||
this.isMore = false
|
||||
|
||||
uni.showLoading()
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
linkTo (url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
|
||||
getList() {
|
||||
if (this.isMore) return
|
||||
|
||||
this.$http.post(`/app/appnewscenterinfo/listForWx`, null, {
|
||||
params: {
|
||||
current: this.current,
|
||||
size: this.size,
|
||||
status: 1,
|
||||
policyType: this.type
|
||||
}
|
||||
}).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()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.news {
|
||||
padding: 96px 0 40px;
|
||||
|
||||
.list {
|
||||
padding: 0 30px;
|
||||
background: #fff;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32px 0;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
|
||||
&:active {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& > image {
|
||||
width: 200px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 32px;
|
||||
color: #333333;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 24px;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #D4D4D4;
|
||||
box-sizing: border-box;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 88px;
|
||||
height: 6px;
|
||||
background: transparent;
|
||||
transform: translateX(-50%);
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #1365DD;
|
||||
|
||||
&::after {
|
||||
background: #1365DD;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
98
src/pages/PovertyAlleviation/NewsDetail.vue
Normal file
98
src/pages/PovertyAlleviation/NewsDetail.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="detail" v-if="pageShow">
|
||||
<h2>{{ info.title }}</h2>
|
||||
<span>发布时间：{{ info.createTime }}</span>
|
||||
<div class="content">
|
||||
<u-parse :html="info.content" v-if="info.type === '0'"></u-parse>
|
||||
<video class="video" v-else :src="info.videoFile.url"></video>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
pageShow: false,
|
||||
info: {},
|
||||
content: `
|
||||
<p>露从今夜白，月是故乡明</p>
|
||||
<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
|
||||
`
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
uni.showLoading()
|
||||
this.getInfo(query.id)
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo (id) {
|
||||
this.$http.post(`/app/appnewscenterinfo/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.info = res.data
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.detail {
|
||||
min-height: 100vh;
|
||||
padding: 40px 32px 40px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
|
||||
& > h2 {
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.3;
|
||||
font-size: 40px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-size: 28px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
|
||||
::v-deep * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::v-deep p {
|
||||
margin: 20px 0;
|
||||
line-height: 1.4;
|
||||
color: #666;
|
||||
font-size: 28px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
::v-deep img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep br {
|
||||
display: block;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
169
src/pages/PovertyAlleviation/PovertyAlleviation.vue
Normal file
169
src/pages/PovertyAlleviation/PovertyAlleviation.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="info">
|
||||
<div class="info-top">
|
||||
<div class="info-top__item" @click="linkTo('/pages/Monitor/Monitor')">
|
||||
<image src="/static/images/wdbf.png" />
|
||||
<h2>监测对象</h2>
|
||||
</div>
|
||||
<div class="info-top__item" @click="linkTo('/pages/povertyMonitor/povertyMonitor')">
|
||||
<image src="/static/images/yjjk.png" />
|
||||
<h2>预警监控</h2>
|
||||
</div>
|
||||
<div class="info-top__item" @click="linkTo('/pages/PovertyAlleviation/News')">
|
||||
<image src="/static/images/news.png" />
|
||||
<h2>政策动态</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news">
|
||||
<h2>最新动态</h2>
|
||||
<div class="news-list">
|
||||
<div class="news-item" v-for="(item, index) in list" :key="index" @click="linkTo(`/pages/PovertyAlleviation/NewsDetail?id=${item.id}`)">
|
||||
<div class="left">
|
||||
<h2>{{ item.title }}</h2>
|
||||
<div class="item-bottom">
|
||||
<span>{{ $dict.getLabel('newsCenterPolicyType', item.policyType) }}</span>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<image v-if="item.coverFile" :src="item.coverFile ? item.coverFile.url : ''" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
this.$dict.load(['newsCenterPolicyType']).then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
linkTo (url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
|
||||
getList () {
|
||||
this.$http.post(`/app/appnewscenterinfo/listForWx`, null, {
|
||||
params: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
status: 1
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.list = res.data.records
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.info {
|
||||
padding: 32px 30px;
|
||||
|
||||
.info-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
padding: 32px 0;
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 4px;
|
||||
color: #3D434A;
|
||||
font-size: 28px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.news {
|
||||
& > h2 {
|
||||
margin-bottom: 32px;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.news-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 32px 24px;
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
|
||||
&:active {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& > image {
|
||||
width: 200px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 100%;
|
||||
margin-bottom: 32px;
|
||||
color: #333333;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 24px;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
250
src/pages/povertyMonitor/Detail.vue
Normal file
250
src/pages/povertyMonitor/Detail.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="detail" v-if="pageShow">
|
||||
<div class="info">
|
||||
<div class="info-top">
|
||||
<div class="left">
|
||||
<image src="/static/images/avatar.png" />
|
||||
<h2>{{ info.name || info.phone }}</h2>
|
||||
</div>
|
||||
<div class="right">
|
||||
<image src="/static/images/phone.png" />
|
||||
<p>拨打电话</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item__wrapper">
|
||||
<div class="info-item">
|
||||
<label>风险类型：</label>
|
||||
<span>大额医疗支出</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>联系电话：</label>
|
||||
<span>13782909781</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>所在地址：</label>
|
||||
<span>{{ info.addressArea }} {{ info.address }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>情况描述：</label>
|
||||
<span>全身大面积烧伤，预计手术费30万元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result" v-if="false">
|
||||
<div class="result-top">
|
||||
<h2>处理结果</h2>
|
||||
<span>已解除风险</span>
|
||||
</div>
|
||||
<div class="info-item__wrapper">
|
||||
<div class="info-item">
|
||||
<label>受理人：</label>
|
||||
<span>张三</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>处理时间：</label>
|
||||
<span>2021-10-10 10:10:10</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>联系方式：</label>
|
||||
<span>17964042574</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>处理结果：</label>
|
||||
<span>经现场了解，该人员家庭有多出房产，无返贫风险倾向。</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>图片：</label>
|
||||
<div class="imgs">
|
||||
<image v-for="(item, index) in 6" :key="index" src="/static/images/avatar.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<span>纳入监测对象</span>
|
||||
<span @click="linkTo">解除预警</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'detail',
|
||||
|
||||
data () {
|
||||
return {
|
||||
info: {},
|
||||
id: '',
|
||||
pageShow: false
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
uni.showLoading()
|
||||
this.id = query.id
|
||||
|
||||
this.getInfo(query.id)
|
||||
},
|
||||
|
||||
methods: {
|
||||
linkTo () {
|
||||
uni.navigateTo({
|
||||
url: '/pages/povertyMonitor/Form'
|
||||
})
|
||||
},
|
||||
|
||||
getInfo (id) {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
|
||||
this.pageShow = true
|
||||
}
|
||||
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.detail {
|
||||
padding-bottom: 122rpx;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
color: #FF4466;
|
||||
font-size: 32px;
|
||||
background: #fff;
|
||||
|
||||
&:last-child {
|
||||
color: #fff;
|
||||
background: #3192F4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
background: #fff;
|
||||
|
||||
.info-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 136px;
|
||||
padding: 0 32px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #D8DDE6;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: center;
|
||||
image {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #3D94FB;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result {
|
||||
margin-top: 20px;
|
||||
background: #fff;
|
||||
|
||||
.result-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 96px;
|
||||
padding: 0 32px;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #2EA222;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-item__wrapper {
|
||||
padding: 32px;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
|
||||
label {
|
||||
flex-shrink: 0;
|
||||
width: 150px;
|
||||
line-height: 1.3;
|
||||
text-align: right;
|
||||
color: #999999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
line-height: 1.3;
|
||||
text-align: justify;
|
||||
color: #343D65;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
flex: 1;
|
||||
|
||||
image {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
112
src/pages/povertyMonitor/Form.vue
Normal file
112
src/pages/povertyMonitor/Form.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="form">
|
||||
<div class="form-type">
|
||||
<h2>处理方式</h2>
|
||||
<span>解除风险</span>
|
||||
</div>
|
||||
<div class="form-item form-item__textarea">
|
||||
<div class="form-item__title">
|
||||
<h2>帮扶结果</h2>
|
||||
</div>
|
||||
<textarea :maxlength="-1" v-model="result" placeholder="请详细说明跟进情况"></textarea>
|
||||
</div>
|
||||
<div class="form-item form-item__imgs">
|
||||
<div class="form-item__title">
|
||||
<h2>图片</h2>
|
||||
<i>（最多9张）</i>
|
||||
</div>
|
||||
<div>
|
||||
<AiUploader :limit="9" multiple></AiUploader>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">提交</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiUploader from '@/components/AiUploader'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
result: '',
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AiUploader
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.form {
|
||||
padding-bottom: 120px;
|
||||
|
||||
div {
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
padding: 32px;
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 34px;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-weight: normal;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 112px;
|
||||
padding: 0 32px;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #3192F4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
209
src/pages/povertyMonitor/components/List.vue
Normal file
209
src/pages/povertyMonitor/components/List.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<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>
|
||||
<ai-empty v-if="!list.length && isMore" style="padding-bottom: 20px;"></ai-empty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiEmpty from '@/components/AiEmpty/AiEmpty'
|
||||
export default {
|
||||
name: 'list',
|
||||
|
||||
data () {
|
||||
return {
|
||||
list: [],
|
||||
isMore: false,
|
||||
current: 1,
|
||||
currIndex: 0
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AiEmpty
|
||||
},
|
||||
|
||||
created () {
|
||||
uni.showLoading()
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
})
|
||||
uni.$on('reload', () => {
|
||||
this.reload()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeTab (index) {
|
||||
this.currIndex = index
|
||||
},
|
||||
|
||||
toDetail (id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/Monitor/Detail?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: 96rpx;
|
||||
line-height: 96rpx;
|
||||
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: 已解除风险;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.4;
|
||||
margin-bottom: 32rpx;
|
||||
padding: 0 32px;
|
||||
color: #999999;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
329
src/pages/povertyMonitor/components/Statistics.vue
Normal file
329
src/pages/povertyMonitor/components/Statistics.vue
Normal file
@@ -0,0 +1,329 @@
|
||||
<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>
|
||||
89
src/pages/povertyMonitor/povertyMonitor.vue
Normal file
89
src/pages/povertyMonitor/povertyMonitor.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="povertyMonitor">
|
||||
<div class="form-content">
|
||||
<List ref="list" v-if="currIndex === 0"></List>
|
||||
<Statistics ref="statistics" v-if="currIndex === 1"></Statistics>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">监控预警</div>
|
||||
<div @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">数据统计</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Statistics from './components/Statistics.vue'
|
||||
import List from './components/List.vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
currIndex: 0
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
List,
|
||||
Statistics
|
||||
},
|
||||
|
||||
computed: {
|
||||
tabBar () {
|
||||
const link = icon => `${this.$cdn}askform/${icon}.png`
|
||||
return [
|
||||
{text: "预警监控", iconPath: "bdlb1", selectedIconPath: "bdlb2" },
|
||||
{text: "数据统计", iconPath: "xjxm1", selectedIconPath: "xjxm2" }
|
||||
].map(e => ({
|
||||
...e,
|
||||
iconPath: link(e.iconPath),
|
||||
selectedIconPath: link(e.selectedIconPath)
|
||||
}))
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
uni.$on('reload', () => {
|
||||
if (this.currIndex === 0) {
|
||||
this.$refs.list.reload()
|
||||
} else {
|
||||
this.$refs.addList.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (this.currIndex === 0) {
|
||||
this.$refs.list.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.povertyMonitor {
|
||||
.footer {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
height: 98px;
|
||||
line-height: 98px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
background: #fff;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: #3192F4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user