267 lines
7.4 KiB
Vue
267 lines
7.4 KiB
Vue
<template>
|
|
<div class="photo-detail">
|
|
<AiGroup noBorder>
|
|
<h2>{{ info.content }}</h2>
|
|
<div class="status-name" :class="detailStatus.cls" v-text="detailStatus.label"/>
|
|
<div style="height:20px;"></div>
|
|
</AiGroup>
|
|
<AiGroup description noBorder labelColor="#999">
|
|
<AiItem label="事件类型" :value="info.groupName"/>
|
|
<AiItem label="所属网格" :value="info.girdName"/>
|
|
<AiItem label="上报时间" :value="info.createTime"/>
|
|
<AiItem label="照片" class="not-line">
|
|
<div class="flex wrap">
|
|
<image class="fill imageItem" v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
|
|
</div>
|
|
<span v-if="!hasFiles(info.files)">暂无照片</span>
|
|
</AiItem>
|
|
</AiGroup>
|
|
<u-gap height="24" v-if="result.doExplain"/>
|
|
<AiGroup title="处理详情" description noBorder labelColor="#999" v-if="result.doExplain">
|
|
<AiItem label="处理结果" top-label :value="result.doExplain"/>
|
|
<AiItem label="照片" class="not-line">
|
|
<div class="flex wrap">
|
|
<image class="fill imageItem" v-for="(item, index) in result.files" @click="preview(item.url)" :key="index" :src="item.url"/>
|
|
</div>
|
|
<span v-if="!hasFiles(result.files)">暂无照片</span>
|
|
</AiItem>
|
|
</AiGroup>
|
|
<!-- <u-gap height="24" v-if="info.judgeName"/>
|
|
<AiGroup title="研判信息" description noBorder labelColor="#999" v-if="info.judgeName">
|
|
<AiItem label="事件研判"><span class="risk-level" :class="`level`+info.judgeRiskLevel">{{ $dict.getLabel('qujingRiskLevel', info.judgeRiskLevel) }}</span></AiItem>
|
|
<AiItem label="当事人姓名" :value="info.judgeName"/>
|
|
<AiItem label="性别" :value="$dict.getLabel('sex', info.judgeSex)"/>
|
|
<AiItem label="联系电话" :value="info.judgePhone"/>
|
|
<AiItem label="家庭住址" :value="info.judgeAddress"/>
|
|
<AiItem label="纠纷类别" :value="$dict.getLabel('qujingDisputeCategory', info.judgeDisputeCategory)"/>
|
|
<AiItem label="排查内容" class="not-line">
|
|
<span v-for="(item, index) in info.judgeRiskList" :key="index">
|
|
<span v-if="index > 0">,</span>{{ $dict.getLabel('qujingRisk', item) }}
|
|
</span>
|
|
</AiItem>
|
|
</AiGroup>
|
|
<u-gap height="24" v-if="info.mediateAreaName"/>
|
|
<AiGroup title="调解信息" description noBorder labelColor="#999" v-if="info.mediateAreaName">
|
|
<AiItem label="调解主体" :value="info.mediateAreaName" />
|
|
<AiItem label="涉及金额" :value="info.mediateAmount"/>
|
|
<AiItem label="调解员" :value="info.mediatePerson"/>
|
|
<AiItem label="参加人" :value="info.mediateMember || '无'"/>
|
|
<AiItem label="调解时间" :value="info.mediateDate"/>
|
|
<AiItem label="调处思路、措施及主要过程" :value="info.mediateInfo"/>
|
|
<AiItem label="调处结果" class="not-line" value="调解成功" />
|
|
</AiGroup> -->
|
|
<u-gap height="24"/>
|
|
<u-tabs :list="tabs" :current="currentTab" @change="v=>currentTab=v"/>
|
|
<u-gap height="24" bg-color="#fff"/>
|
|
<AiGroup noBorder v-if="currentTab=='0'">
|
|
<AiStep v-for="(item,i) in process" :key="item.id" :index="i">
|
|
<div class="flex start">
|
|
<div class="fill stepTitle" v-text="item.systemExplain"/>
|
|
<div class="color-999 mar-r32 stepTime" v-text="item.doTime"/>
|
|
</div>
|
|
<div v-if="item.doExplain" class="stepContent mar-t8" v-text="item.doExplain"/>
|
|
<u-gap height="48"/>
|
|
</AiStep>
|
|
</AiGroup>
|
|
<AiEvaluation v-if="currentTab=='1'" :bid="info.id" type="show"/>
|
|
<AiEvaluation v-if="info.eventStatus == 3" v-model="evaluation" class="fixed-bottom bg-fff" :bid="info.id">
|
|
<div class="bottomBtn">去评价</div>
|
|
</AiEvaluation>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
appName: "随手拍详情",
|
|
data() {
|
|
return {
|
|
info: {},
|
|
result: {},
|
|
currentTab: 0,
|
|
evaluation: {}
|
|
}
|
|
},
|
|
computed: {
|
|
detailStatus: v => {
|
|
const status = !v.evaluation.id ? v.info.eventStatus : 'evaluation'
|
|
return {
|
|
cls: 'status-' + status,
|
|
label: !v.evaluation.id ? v.$dict.getLabel('qujingEventStatus', v.info.eventStatus) : "已评价"
|
|
}
|
|
},
|
|
process() {
|
|
const list = this.info.processList
|
|
if (this.evaluation.id) {
|
|
const {id, createUserName, score, createTime: doTime, rateText: doExplain} = this.evaluation
|
|
list.splice(0, 0, {
|
|
id, doTime, doExplain,
|
|
systemExplain: `${createUserName}完成评价 (${score}星评价)`
|
|
})
|
|
}
|
|
return list;
|
|
},
|
|
tabs: v => {
|
|
const tabs = [{name: "办理进度"}];
|
|
if (!!v.evaluation?.id) {
|
|
tabs.push({name: "我的评价"});
|
|
}
|
|
return tabs;
|
|
},
|
|
},
|
|
onShow() {
|
|
this.getInfo()
|
|
},
|
|
onLoad(query) {
|
|
this.id = query.id
|
|
this.getInfo()
|
|
this.$dict.load(['qujingEventStatus', 'qujingDoStatus', 'qujingEventType', 'sex', 'qujingRisk', 'qujingRiskLevel', 'qujingDisputeCategory'])
|
|
},
|
|
methods: {
|
|
getInfo() {
|
|
this.$loading()
|
|
this.$instance.post(`/app/appclapeventinfoqujing/queryDetailById?id=${this.id}`).then(res => {
|
|
if (res?.data) {
|
|
this.info = res.data
|
|
if (['3', '4'].includes(res.data.eventStatus) && res.data.groupName != '矛盾调解') {
|
|
this.result = res.data.processList[0]
|
|
}
|
|
if (this.info.judgeRisk) {
|
|
this.info.judgeRiskList = this.info.judgeRisk.split(',')
|
|
}
|
|
}
|
|
}).finally(() => this.$hideLoading())
|
|
},
|
|
previewResult(url) {
|
|
uni.previewImage({
|
|
urls: this.result.files.map(v => v.url),
|
|
current: url
|
|
})
|
|
},
|
|
|
|
preview(url) {
|
|
uni.previewImage({
|
|
urls: this.info.files.map(v => v.url),
|
|
current: url,
|
|
});
|
|
},
|
|
hasFiles(files) {
|
|
return files?.length > 0;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.photo-detail {
|
|
padding: 32px 0 160px;
|
|
margin-bottom: 60px;
|
|
// background: #fff;
|
|
|
|
h2 {
|
|
line-height: 1.3;
|
|
margin-bottom: 26px;
|
|
color: #333333;
|
|
text-align: justify;
|
|
font-size: 40px;
|
|
}
|
|
|
|
::v-deep.stepTitle {
|
|
min-height: 44px;
|
|
font-family: PingFangSC-Regular;
|
|
font-weight: 400;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.stepTime {
|
|
line-height: 44px;
|
|
}
|
|
|
|
.stepContent {
|
|
color: #343D65;
|
|
}
|
|
|
|
.status-name {
|
|
width: 96px;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
text-align: center;
|
|
// background: #FF883C;
|
|
color: #fff;
|
|
font-size: 26px;
|
|
border-radius: 8px;
|
|
|
|
// &.status-1, &.status-evaluation {
|
|
// background: #1AAAFF;
|
|
// }
|
|
|
|
// &.status-2 {
|
|
// background: #42D784;
|
|
// }
|
|
|
|
// &.status-3 {
|
|
// background: #FF4466;
|
|
// }
|
|
|
|
&.status-0 {
|
|
background: #ff883c;
|
|
}
|
|
|
|
&.status-1, &.status-2, &.status-evaluation {
|
|
background: #1aaaff;
|
|
}
|
|
|
|
&.status-3 {
|
|
background: #42d784;
|
|
}
|
|
|
|
&.status-4 {
|
|
background: #ff4466;
|
|
}
|
|
}
|
|
|
|
.imageItem {
|
|
min-width: 30%;
|
|
height: 30vw;
|
|
flex-shrink: 0;
|
|
margin-right: 16px;
|
|
margin-bottom: 16px;
|
|
|
|
&:nth-of-type(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.not-line {
|
|
.AiItem {
|
|
.normal {
|
|
border: none !important;
|
|
min-height: 112px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .AiGroup {
|
|
.groupHeader {
|
|
padding-top: 16px !important;
|
|
}
|
|
}
|
|
|
|
.level1 {
|
|
color: #3D88F5;
|
|
}
|
|
|
|
.level2 {
|
|
color: #52C75B;
|
|
}
|
|
|
|
.level3 {
|
|
color: #FF883C;
|
|
}
|
|
|
|
.level4 {
|
|
color: #FF3C3C;
|
|
}
|
|
|
|
}
|
|
</style>
|