是小王呀\24601
5 months ago
13 changed files with 675 additions and 15 deletions
@ -0,0 +1,16 @@ |
|||
import api from './index' |
|||
import request from '@/utils/request' |
|||
export function healingList(params) { |
|||
return request({ |
|||
url: api.healingList, |
|||
method: 'get', |
|||
params |
|||
}) |
|||
} |
|||
export function healingSave(data) { |
|||
return request({ |
|||
url: api.healingSave, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
After Width: | Height: | Size: 269 KiB |
|
After Width: | Height: | Size: 963 B |
|
After Width: | Height: | Size: 363 B |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,322 @@ |
|||
<template> |
|||
<div class='pages' ref="scroll" style="scroll-behavior: smooth;"> |
|||
<div class="container"> |
|||
<div class=" card"> |
|||
<van-cell-group> |
|||
<van-field readonly is-link v-model="typeName" label="问题类型" placeholder="请选择" |
|||
@click="showPicker = true" /> |
|||
<van-action-sheet v-if="showPicker" v-model="showPicker" :actions="actions" @select="onSelect" |
|||
@click-overlay="showPicker = false" /> |
|||
<van-field readonly type="textarea" v-model="formData.description" label="问题描述" placeholder="" |
|||
rows="2" autosize show-word-limit /> |
|||
<van-field readonly v-model="completionTypeName" label="完成时限" placeholder="" |
|||
@click="showPicker = true" /> |
|||
<van-field readonly v-model="formData.agencyId" label="责任科室" placeholder="" |
|||
@click="showPicker = true" /> |
|||
<van-field readonly is-link v-model="stateName" label="完成状态" placeholder="请选择" |
|||
@click="statePicker = true" /> |
|||
<van-action-sheet v-if="statePicker" v-model="stateName" :actions="stateList" @select="onSelect1" |
|||
@click-overlay="statePicker = false" /> |
|||
<div class="textarea"> |
|||
<van-field type="textarea" v-model="formData.measure" label="解决措施" placeholder="请输入内容" rows="2" |
|||
autosize show-word-limit> |
|||
<template #label> |
|||
|
|||
</template> |
|||
</van-field> |
|||
</div> |
|||
<van-uploader style="margin-left: 14px;" v-model="fileList" :after-read="afterRead1" :max-count="3" |
|||
accept="image/*" /> |
|||
<van-field v-model="formData.writtenBy" label="填写人" placeholder="请输入" /> |
|||
<van-field v-model="formData.mobile" label="填写人电话" placeholder="请输入" /> |
|||
<van-field readonly is-link v-model="formData.writtenTime" label="填报时间" placeholder="请选择" |
|||
@click="showtime = true" /> |
|||
<van-popup v-if="showtime" v-model="showtime" position="bottom" :style="{ height: '40%' }"> |
|||
<van-datetime-picker v-if="showtime" type="date" :min-date="minDate" :max-date="maxDate" |
|||
@confirm="handleConfirm" @cancel="handleCancel" /> |
|||
</van-popup> |
|||
|
|||
</van-cell-group> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="flex flex-x flex-mean" style="margin-top: 10px;"> |
|||
<van-button style="width: 80%;" round type="info" @click="onreply">提交</van-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getUserInfo } from '@/api/user' |
|||
import {healingSave } from '@/api/summer' |
|||
// import card from './card.vue' |
|||
import throttle from 'lodash/debounce' |
|||
import { uploadvariedfile } from '@/api/basic' |
|||
import { Dialog } from 'vant'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
completionTypeName:"", |
|||
typeName:"", |
|||
statusName:"", |
|||
fileList:[], |
|||
formData:{ |
|||
agencyId:"", |
|||
measure:"", |
|||
attrs:[], |
|||
writtenBy:"", |
|||
mobile:"", |
|||
writtenTime:"", |
|||
categoryType:"", |
|||
completionType:"", |
|||
description:"", |
|||
status:"", |
|||
|
|||
}, |
|||
completionStatus:"", |
|||
content:"", |
|||
stutasName:"", |
|||
minDate:new Date(), |
|||
showtime:false, |
|||
stateName:"", |
|||
stateType:"", |
|||
stateList:[ |
|||
{name:"已完成",value:"1"}, |
|||
{name:"进行中",value:"0"}, |
|||
], |
|||
statePicker:false, |
|||
actions: [ |
|||
{ name: '涉旅游投诉相关问题', |
|||
value: "1", |
|||
description:"灵山上各种庙宇乱收费、诱导消费等问题。", |
|||
completionTypeName:"长期坚持", |
|||
completionType:1, |
|||
agencyId:"宣传办", |
|||
}, |
|||
{ |
|||
name: '占道扰民问题', |
|||
value: "2", |
|||
description: "华山医院附近占道经营问题。", |
|||
completionTypeName:"根据实际情况，暂定2025年5月1日", |
|||
completionType:2, |
|||
agencyId: "灵山综合执法中队", |
|||
}, |
|||
{ |
|||
name: '物业管理相关问题', value: "3", |
|||
description: "小区内绿化养护、卫生清扫不及时、设施损害、楼道乱堆乱放杂物、小区内车辆乱停等影响居民居住生活问题。", |
|||
completionTypeName:"长期坚持", |
|||
completionType:1, |
|||
agencyId: "城建办", |
|||
}, |
|||
{ |
|||
name: '道路积水问题', value: "4", |
|||
description: "柳沟社区、万华埠社区、稻池社区村庄积水问题", |
|||
completionTypeName:"2025年6月底", |
|||
completionType:3, |
|||
agencyId: "柳沟社区,万华埠社区,稻池社区" |
|||
}, |
|||
{ |
|||
name: '环境卫生相关问题', value: "5", |
|||
description: "夏季天气炎热垃圾暴露易造成环境污染、暴露垃圾未及时清扫、道路不洁等影响市容环境问题。", |
|||
completionTypeName:"根据夏季工作特点，暂定9月底前", |
|||
completionType:4, |
|||
agencyId: "生态办", |
|||
}, |
|||
{ |
|||
name: '噪音扰民相关问题', value: "6", |
|||
description: "华福路商贩路边经营以及一些药店造成的经营类噪音。", |
|||
completionTypeName: "根据实际情况，暂定2025年5月1日", |
|||
completionType:4, |
|||
agencyId: "灵山综合执法中队", |
|||
}, |
|||
], |
|||
showPicker:false, |
|||
showpicker2:false, |
|||
active: this.$store.state.app.tabActive, |
|||
scroll: null, |
|||
|
|||
}; |
|||
}, |
|||
created() { |
|||
this.getUserInfo() |
|||
console.log('this.$store.state.userInfo.userInfo',this.$store.state.userInfo.userInfo); |
|||
|
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
activated() { |
|||
|
|||
}, |
|||
methods: { |
|||
async getUserInfo() { |
|||
|
|||
let { data, code, msg } = await getUserInfo() |
|||
if (code == 0) { |
|||
// this.formData.agencyId=data.agencyId |
|||
} |
|||
}, |
|||
//提交 |
|||
async onreply(){ |
|||
let parms ={ |
|||
... this.formData |
|||
} |
|||
healingSave(parms).then(res => { |
|||
console.log(res,"skjlfhskdjfh"); |
|||
this.$toast.success('提交成功'); |
|||
this.$router.push({ name: 'Summer' }) |
|||
|
|||
}).catch(err => { |
|||
|
|||
}) |
|||
console.log(this.formData,"sdfjskdf"); |
|||
|
|||
}, |
|||
afterRead1(file) { |
|||
file.status = 'uploading' |
|||
file.message = '上传中...' |
|||
uploadvariedfile(file.file) |
|||
.then(res => { |
|||
file.status = '' |
|||
file.url=res.data.url |
|||
file.type="image" |
|||
file.name=file.file.name |
|||
file.formart=file.file.name.split('.').pop() |
|||
file.message = '上传成功' |
|||
this.formData.attrs.push({ |
|||
url:res.data.url, |
|||
type:"image", |
|||
name:file.file.name, |
|||
formart:file.file.name.split('.').pop() |
|||
}) |
|||
console.log(this.formData.attrs,"fgjdslf") |
|||
}) |
|||
.catch(() => { |
|||
file.status = 'failed' |
|||
file.message = '上传失败' |
|||
}) |
|||
}, |
|||
handleCancel() { |
|||
this.showtime = false; |
|||
}, |
|||
handleConfirm(value) { |
|||
console.log(value); |
|||
this.formData.writtenTime = this.$dayjs(value).format('YYYY-MM-DD HH:mm:ss'); |
|||
// console.log(this.returnTime); |
|||
this.showtime = false; |
|||
|
|||
}, |
|||
onSelect(item){ |
|||
console.log(item,"dsfjklsd"); |
|||
this.formData.categoryType=item.value |
|||
this.typeName=item.name |
|||
this.formData.completionType=item.completionType |
|||
this.formData.description=item.description |
|||
this.formData.agencyId=item.agencyId |
|||
this.completionTypeName=item.completionTypeName |
|||
// this.formData={ |
|||
// categoryType:item.value, |
|||
|
|||
// } |
|||
console.log( this.formData,"sdl;jdfslk"); |
|||
this.showPicker=false |
|||
|
|||
}, |
|||
onSelect1(item){ |
|||
// this.content=item.description, |
|||
// this.completionStatus=item.completionType, |
|||
console.log(item,"dsfjklsd"); |
|||
this.stateName=item.name |
|||
this.formData.status=item.value |
|||
this.statePicker=false |
|||
|
|||
}, |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
}, |
|||
destroyed() { |
|||
this.scroll.removeEventListener('scroll', this.bottomScroll);//移除滚动监听 |
|||
}, |
|||
components: { }, |
|||
computed: {}, |
|||
watch: {} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='less' scoped> |
|||
.textarea { |
|||
/deep/ .van-cell { |
|||
display: block; |
|||
} |
|||
/deep/ .van-field__label { |
|||
width: 100%; |
|||
} |
|||
/deep/ .van-cell__value { |
|||
margin-top: 10px; |
|||
background: #F7F7F7; |
|||
padding: 14px 16px; |
|||
} |
|||
} |
|||
.uploader{ |
|||
width: 80px; |
|||
height: 80px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #f7f8fa; |
|||
} |
|||
.fillInRecords{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
right: 0; |
|||
} |
|||
.title { |
|||
font-family: PingFang SC; |
|||
font-weight: 800; |
|||
font-size: 18px; |
|||
color: #000000; |
|||
} |
|||
.yearColor { |
|||
font-family: PingFang SC; |
|||
font-weight: 800; |
|||
font-size: 19px; |
|||
color: #276FD8; |
|||
line-height: 20px; |
|||
} |
|||
|
|||
.timeline-page { |
|||
padding:5px; |
|||
border-left: 1px dashed #D4D4D4; |
|||
} |
|||
.timeline-page1 { |
|||
padding:5px; |
|||
border-left: 1px dashed #D4D4D4; |
|||
} |
|||
|
|||
.timeline-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
.van-card { |
|||
width: 100%; |
|||
} |
|||
|
|||
.van-tag { |
|||
color: #3A80E7; |
|||
background: rgba(59,97,222,0.07); |
|||
border-radius: 6px; |
|||
border: 1px solid #3A80E7; |
|||
} |
|||
|
|||
.van-tag1 { |
|||
color: #10B4B2; |
|||
background: rgba(16, 180, 178, 0.07); |
|||
border-radius: 6px; |
|||
border: 1px solid #10B4B2; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,285 @@ |
|||
<template> |
|||
<div class='pages' ref="scroll" style="scroll-behavior: smooth;"> |
|||
<div class="p-10s" style="height: 200ytghfrpx;background: linear-gradient(180deg, #6CABFF 0%, #F6F7F7 100%);"> |
|||
<div class="flex flex-center2 "> |
|||
<img class="img30 m-right7" src="../../assets/images/summer/data.png"> |
|||
<span>灵山街道</span> |
|||
</div> |
|||
<div class="m-top12"> |
|||
<img style="width: 100% ;" src="../../assets/images/summer/bannder.png"> |
|||
</div> |
|||
</div> |
|||
<div class="p-5s"> |
|||
<van-button style=" " round plain type="info" @click="showPicker = true"> |
|||
<div class="flex flex-center2" style="width: 350px;justify-content: space-between;"> |
|||
<span style="color: #999999;">{{ typeName ? typeName : '办理状态' }}</span> |
|||
<img style="width: 8px; height: 8px;" src="@/assets/images/summer/dropdown.png"> |
|||
</div> |
|||
</van-button> |
|||
<van-action-sheet v-if="showPicker" v-model="showPicker" :actions="actions" @select="onSelect" |
|||
@click-overlay="showPicker = false" /> |
|||
</div> |
|||
|
|||
<div class="p-5s"> |
|||
<div class="card m-top10" v-for="(item,index) in list"> |
|||
<div class="yearColor m-bottom10">{{ index }}月</div> |
|||
<div v-for="(item1,index1) in item"> |
|||
<div class="flex flex-center2"> |
|||
<div class="" style="background: #3A80E7;border-radius: 50%;width: 10px;height: 10px;"> |
|||
</div> |
|||
<div class="m-left8 grey" >{{ item1.writtenTime.slice(0, 10) }}</div> |
|||
<van-tag :class="item1.status?'van-tag':'van-tag1'" class="m-left8 " type="primary">{{item1.status?"已完成":"进行中"}}</van-tag> |
|||
<img v-if="item1.status" style="width: 20px; height: 20px;margin-left: 3px;" src="../../assets/images/summer/redFlag.png"> |
|||
</div> |
|||
|
|||
<div style="margin-left: 3px;"> |
|||
<div :class="item1.length===index?'timeline-page':'timeline-page1'"> |
|||
<div class="m-left8" style="background: #EFF2F6;border-radius: 20px;"> |
|||
<div style="padding: 15px"> |
|||
<span class="title">{{ item1.title }}</span> |
|||
<div class="m-top5"> |
|||
<span>处理部门: </span> |
|||
<span>{{item1.description}}</span> |
|||
</div> |
|||
<div class="m-top5"> |
|||
<span>解决措施: </span> |
|||
<span>{{item1.measure}}</span> |
|||
</div> |
|||
<div class="m-top5 flex flex-x f-flexwrap"> |
|||
<div class="m-right7" v-for="(item2,index) in item1.attrs"> |
|||
<img style="width:90px ; height: 80px;" :src="item2.url" ></img> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="fillInRecords"> |
|||
<img @click="handelRecord" style="width: 130px; height: 130px;" src="@/assets/images/summer/fillInRecords.png"> |
|||
</div> |
|||
<van-popup v-if="showpicker2" v-model="showpicker2" position="bottom" :style="{ height: '40%' }"> |
|||
<van-picker v-if="showpicker2" show-toolbar title="状态" :columns="actions" @cancel="showpicker2 = false" |
|||
@confirm="onConfirm" /> |
|||
</van-popup> |
|||
<van-empty v-if="!list" description="暂无数据" /> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
// import card from './card.vue' |
|||
import throttle from 'lodash/debounce' |
|||
import {healingList } from '@/api/summer' |
|||
import { uploadvariedfile } from '@/api/basic' |
|||
import { Dialog } from 'vant'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
categoryType:"", |
|||
typeName:"", |
|||
actions: [ |
|||
{ name: '涉旅游投诉相关问题', |
|||
value: "1", |
|||
description:"灵山上各种庙宇乱收费、诱导消费等问题。", |
|||
completionTypeName:"长期坚持", |
|||
completionType:1, |
|||
agencyId:"宣传办", |
|||
}, |
|||
{ |
|||
name: '占道扰民问题', |
|||
value: "2", |
|||
description: "华山医院附近占道经营问题。", |
|||
completionTypeName:"根据实际情况，暂定2025年5月1日", |
|||
completionType:2, |
|||
agencyId: "灵山综合执法中队", |
|||
}, |
|||
{ |
|||
name: '物业管理相关问题', value: "3", |
|||
description: "小区内绿化养护、卫生清扫不及时、设施损害、楼道乱堆乱放杂物、小区内车辆乱停等影响居民居住生活问题。", |
|||
completionTypeName:"长期坚持", |
|||
completionType:1, |
|||
agencyId: "城建办", |
|||
}, |
|||
{ |
|||
name: '道路积水问题', value: "4", |
|||
description: "柳沟社区、万华埠社区、稻池社区村庄积水问题", |
|||
completionTypeName:"2025年6月底", |
|||
completionType:3, |
|||
agencyId: "柳沟社区,万华埠社区,稻池社区" |
|||
}, |
|||
{ |
|||
name: '环境卫生相关问题', value: "5", |
|||
description: "夏季天气炎热垃圾暴露易造成环境污染、暴露垃圾未及时清扫、道路不洁等影响市容环境问题。", |
|||
completionTypeName:"根据夏季工作特点，暂定9月底前", |
|||
completionType:4, |
|||
agencyId: "生态办", |
|||
}, |
|||
{ |
|||
name: '噪音扰民相关问题', value: "6", |
|||
description: "华福路商贩路边经营以及一些药店造成的经营类噪音。", |
|||
completionTypeName: "根据实际情况，暂定2025年5月1日", |
|||
completionType:4, |
|||
agencyId: "灵山综合执法中队", |
|||
}, |
|||
], |
|||
showPicker:false, |
|||
showpicker2:false, |
|||
active: this.$store.state.app.tabActive, |
|||
scroll: null, |
|||
pageNo: 1, |
|||
pageSize: 20, |
|||
list:[ |
|||
|
|||
] |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getServiceListRcv() |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
activated() { |
|||
|
|||
}, |
|||
methods: { |
|||
onSelect(item){ |
|||
console.log(item,"dsfjklsd"); |
|||
this.categoryType=item.value |
|||
this.typeName=item.name |
|||
// this.formData={ |
|||
// categoryType:item.value, |
|||
|
|||
// } |
|||
|
|||
console.log( this.formData,"sdl;jdfslk"); |
|||
this.showPicker=false |
|||
this.getServiceListRcv() |
|||
|
|||
}, |
|||
handelRecord(){ |
|||
this.$router.push({ name: 'addingRecord' }) |
|||
}, |
|||
getTableData(tab) { |
|||
if ((this.active === 0 && this.requestFlag) || (tab && this.active === 0)) { |
|||
this.getServiceListRcv(); |
|||
} else if ((this.active === 1 && this.requestFlag) || (tab && this.active === 1)) { |
|||
this.getServiceListProcess(); |
|||
} else if ((this.active === 2 && this.requestFlag) || (tab && this.active === 2)) { |
|||
this.getServiceListCompleted() |
|||
} |
|||
if (!this.requestFlag) { |
|||
this.$toast({ |
|||
message: '没有更多数据了', |
|||
duration: 1000 |
|||
}) |
|||
} |
|||
}, |
|||
//获取待接单 |
|||
getServiceListRcv() { |
|||
healingList({ |
|||
categoryType:this.categoryType |
|||
}).then(res => { |
|||
this.list = res.data.resultMap; |
|||
let datas=res.data.resultMap |
|||
console.log(datas,"dsf1s"); |
|||
this.list=datas.reverse() |
|||
console.log(this.list,"dsfs"); |
|||
|
|||
|
|||
|
|||
|
|||
}).catch(err => { |
|||
|
|||
}) |
|||
}, |
|||
// 获取待处理 |
|||
getServiceListProcess() { |
|||
getServiceListProcess({ |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize |
|||
}).then(res => { |
|||
this.total = res.total; |
|||
this.requestFlag = res.data.list.length === this.pageSize; |
|||
this.list = this.list.concat(res.data.list) |
|||
}).catch(err => { |
|||
}) |
|||
}, |
|||
// 获取已完成 |
|||
getServiceListCompleted() { |
|||
getServiceListCompleted({ |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize |
|||
}).then(res => { |
|||
this.total = res.total; |
|||
this.requestFlag = res.data.list.length === this.pageSize; |
|||
this.list = this.list.concat(res.data.list) |
|||
}).catch(err => { |
|||
}) |
|||
} |
|||
}, |
|||
destroyed() { |
|||
this.scroll.removeEventListener('scroll', this.bottomScroll);//移除滚动监听 |
|||
}, |
|||
components: { }, |
|||
computed: {}, |
|||
watch: {} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='less' scoped> |
|||
.fillInRecords{ |
|||
position: fixed; |
|||
bottom: 15px; |
|||
right: 0; |
|||
} |
|||
.title { |
|||
font-family: PingFang SC; |
|||
font-weight: 800; |
|||
font-size: 18px; |
|||
color: #000000; |
|||
} |
|||
.yearColor { |
|||
font-family: PingFang SC; |
|||
font-weight: 800; |
|||
font-size: 19px; |
|||
color: #276FD8; |
|||
line-height: 20px; |
|||
} |
|||
|
|||
.timeline-page { |
|||
padding:5px; |
|||
|
|||
} |
|||
.timeline-page1 { |
|||
padding:5px; |
|||
border-left: 1px dashed #D4D4D4; |
|||
} |
|||
|
|||
.timeline-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
.van-card { |
|||
width: 100%; |
|||
} |
|||
|
|||
.van-tag { |
|||
color: #3A80E7; |
|||
background: rgba(59,97,222,0.07); |
|||
border-radius: 6px; |
|||
border: 1px solid #3A80E7; |
|||
} |
|||
|
|||
.van-tag1 { |
|||
color: #10B4B2; |
|||
background: rgba(16, 180, 178, 0.07); |
|||
border-radius: 6px; |
|||
border: 1px solid #10B4B2; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue