6 changed files with 954 additions and 3 deletions
@ -0,0 +1,373 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
width="1118px" |
||||
|
:modal="true" |
||||
|
:modal-append-to-body="false" |
||||
|
:destroy-on-close="true" |
||||
|
:visible="showDialog" |
||||
|
@close="handleClose" |
||||
|
|
||||
|
> |
||||
|
<div class="eventWrap" |
||||
|
v-loading="loading" |
||||
|
element-loading-text="加载中" |
||||
|
element-loading-spinner="el-icon-loading" |
||||
|
element-loading-background="rgba(0, 0, 0, 0.5)" |
||||
|
> |
||||
|
<el-row :gutter="32"> |
||||
|
<el-col :span="24" style="padding-left: 40px"> |
||||
|
<title-box text="事件详情"/> |
||||
|
</el-col> |
||||
|
<el-col |
||||
|
:span="13" |
||||
|
style="padding-left: 40px" |
||||
|
|
||||
|
> |
||||
|
<div class="leftEvent"> |
||||
|
<div class="eventDetails"> |
||||
|
<img |
||||
|
:width="18" |
||||
|
:height="18" |
||||
|
src="@/assets/images/manyidu/tc-title-icon.png" |
||||
|
/>事项详情 |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>所属组织:</span> |
||||
|
<span>{{ item.gridName }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>上报渠道:</span> |
||||
|
<span>{{ item.sourceTypeName }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>事件类型:</span> |
||||
|
<span>{{ item.categoryName }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>接受时间:</span> |
||||
|
<span>{{ item.happenTime }}</span> |
||||
|
</div> |
||||
|
<!-- <div class="eventItem"> |
||||
|
<span>工单号:</span> |
||||
|
<span>{{ item.workOrderNum }}</span> |
||||
|
</div>--> |
||||
|
<div class="eventItem"> |
||||
|
<div>问题描述:</div> |
||||
|
<div style="margin-top: 20px">{{ item.eventContent }}</div> |
||||
|
</div> |
||||
|
<!-- <div class="eventItem"> |
||||
|
<div>图片:</div> |
||||
|
<div style="margin-top: 20px; display: flex"> |
||||
|
<img |
||||
|
style="width: 100px; height: 100px; margin-right: 5px" |
||||
|
v-for="src in item.imageList" |
||||
|
:key="src" |
||||
|
:src="src" |
||||
|
alt="/" |
||||
|
@click="openImg(src)" |
||||
|
/> |
||||
|
</div> |
||||
|
</div>--> |
||||
|
<div class="eventItem"> |
||||
|
<span>联系人:</span> |
||||
|
<span>{{ item.name }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>联系电话:</span> |
||||
|
<span>{{ item.mobile }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>详细地址:</span> |
||||
|
<span>{{ item.address }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>办结时限:</span> |
||||
|
<span>{{ item.latestOperatedTime }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>满意度评价:</span> |
||||
|
<span>{{ item.satisfactionName }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col |
||||
|
:span="11" |
||||
|
> |
||||
|
<div class="rightEvent m-info"> |
||||
|
<div class="eventDetails"> |
||||
|
<img |
||||
|
:width="18" |
||||
|
:height="18" |
||||
|
src="@/assets/images/manyidu/tc-title-icon.png" |
||||
|
/>办理进展 |
||||
|
</div> |
||||
|
<!-- <el-timeline class="timeline" :reverse="true"> |
||||
|
<el-timeline-item v-for="(item, index) in activities" :key="index" :class="index == activities.length - 1 ? 'sucess' : ''"> |
||||
|
<div class="status-box"> |
||||
|
<div class="status1" v-if="index == activities.length - 1">回复</div> |
||||
|
<div class="status2" v-else>完成并回复</div> |
||||
|
<div class="timestamp">{{ item.timeLimit ? $moment(item.timeLimit).format("YYYY-MM-DD hh:mm:ss") : "" }}</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="field">回复人:</div> |
||||
|
<div class="value">{{ item.departmentName }}</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="field">回复内容:</div> |
||||
|
<div class="value">{{ item.publicReply }}</div> |
||||
|
</div> |
||||
|
</el-timeline-item> |
||||
|
</el-timeline> --> |
||||
|
<div v-if="activities.length > 0"> |
||||
|
<!-- <el-card :class="{ 'box-card': source === 'visiual' }" style="min-height: calc(88vh - 50px); overflow: auto"> --> |
||||
|
<div class="m-process"> |
||||
|
<div class="list"> |
||||
|
<div |
||||
|
class="item" |
||||
|
:class="[index === 0 ? 'z-on' : '']" |
||||
|
:key="item.processId" |
||||
|
v-for="(item, index) in activities" |
||||
|
> |
||||
|
<div class="item-row"> |
||||
|
<template v-if="item.agencyId"> |
||||
|
<div class="name">指派</div> |
||||
|
</template> |
||||
|
<template v-if="!item.timeLimit"> |
||||
|
<div class="name">完成并回复</div> |
||||
|
</template> |
||||
|
<template v-if="!item.agencyId && item.timeLimit"> |
||||
|
<div class="name">{{ item.processName }}</div> |
||||
|
</template> |
||||
|
<div class="date"> |
||||
|
{{ |
||||
|
item.processTime ? getTrueTime(item.processTime) : "" |
||||
|
}} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="item.type === 'event'"> |
||||
|
<template v-if="item.agencyId"> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">指派人:</div> |
||||
|
<div class="detail-value"> |
||||
|
{{ item.departmentName }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">指派部门:</div> |
||||
|
<div class="detail-value"> |
||||
|
{{ item.agencyName }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">转办意见:</div> |
||||
|
<div class="detail-value"> |
||||
|
{{ item.publicReply }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">办结时限:</div> |
||||
|
<div class="detail-value"> |
||||
|
{{ item.timeLimit }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">回复人:</div> |
||||
|
<div class="detail-value"> |
||||
|
{{ item.departmentName }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">回复内容:</div> |
||||
|
<div class="detail-value"> |
||||
|
{{ item.publicReply }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail" v-if="item.timeLimit"> |
||||
|
<div class="detail-field">办结时限:</div> |
||||
|
<div class="detail-value"> |
||||
|
{{ getTrueTime(item.timeLimit) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- </el-card> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import titleBox from "./Title"; |
||||
|
|
||||
|
export default { |
||||
|
name: "ReportAnEvent", |
||||
|
components: { |
||||
|
titleBox, |
||||
|
}, |
||||
|
props: { |
||||
|
id: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
showDialog: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
item: {}, |
||||
|
loading: false, |
||||
|
loading1: false, |
||||
|
activities: [], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: {}, |
||||
|
watch: { |
||||
|
showDialog: { |
||||
|
handler(val) { |
||||
|
if (val) { |
||||
|
this.getDetailsData(this.id); |
||||
|
this.getProcessData(this.id); |
||||
|
} else { |
||||
|
this.item = {} |
||||
|
this.activities = [] |
||||
|
} |
||||
|
}, |
||||
|
immediate: true, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handleClose() { |
||||
|
this.$emit("close", false); |
||||
|
this.item = {}; |
||||
|
}, |
||||
|
|
||||
|
openImg(src) { |
||||
|
window.open(src); |
||||
|
}, |
||||
|
|
||||
|
getTrueTime(time) { |
||||
|
return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm"); |
||||
|
}, |
||||
|
|
||||
|
getDetailsData(id) { |
||||
|
this.loading = true; |
||||
|
this.$http |
||||
|
.post("/governance/icEventOLd/detail", {icEventId: id}) |
||||
|
.then((res) => { |
||||
|
const {code, data, msg} = res.data; |
||||
|
if (code === 0) { |
||||
|
this.item = data; |
||||
|
this.loading = false; |
||||
|
} else { |
||||
|
this.loading = false; |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
getProcessData(id) { |
||||
|
this.$http |
||||
|
.post("/governance/icEventOLd/process", {icEventId: id}) |
||||
|
.then((res) => { |
||||
|
const {code, data, msg} = res.data; |
||||
|
if (code === 0) { |
||||
|
this.activities = data; |
||||
|
this.loading1 = false; |
||||
|
} else { |
||||
|
this.loading1 = false; |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
||||
|
@import "@/assets/scss/dataBoard/dialog.scss"; |
||||
|
|
||||
|
@mixin fontStyle { |
||||
|
color: #fff !important; |
||||
|
font-size: 14px !important; |
||||
|
} |
||||
|
|
||||
|
.eventWrap { |
||||
|
width: 1094px; |
||||
|
//height: 798px; |
||||
|
overflow-y: auto; |
||||
|
overflow-x: hidden; |
||||
|
padding: 24px; |
||||
|
|
||||
|
.eventDetails { |
||||
|
font-size: 18px; |
||||
|
margin: 48px 24px 48px 0; |
||||
|
color: #ffffff; |
||||
|
|
||||
|
img { |
||||
|
margin-top: -4px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-info { |
||||
|
padding: 0px !important; |
||||
|
|
||||
|
.m-process { |
||||
|
margin: 0 !important; |
||||
|
|
||||
|
.name { |
||||
|
@include fontStyle; |
||||
|
} |
||||
|
|
||||
|
.date { |
||||
|
@include fontStyle; |
||||
|
} |
||||
|
|
||||
|
.detail { |
||||
|
@include fontStyle; |
||||
|
|
||||
|
.detail-field { |
||||
|
flex: none !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.leftEvent { |
||||
|
color: #fff; |
||||
|
|
||||
|
.eventItem { |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 24px; |
||||
|
|
||||
|
span:first-child { |
||||
|
} |
||||
|
|
||||
|
span:last-child { |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.rightEvent { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,272 @@ |
|||||
|
<template> |
||||
|
<Dialog title="事件详情" @close="handleClose"> |
||||
|
<template> |
||||
|
<div class="eventWrap"> |
||||
|
<el-row :gutter="32"> |
||||
|
<el-col :span="13" style="padding-left: 40px" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)"> |
||||
|
<div class="leftEvent"> |
||||
|
<div class="eventDetails">事件详情</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>所属组织:</span> |
||||
|
<span>{{ item.gridName }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>上报渠道:</span> |
||||
|
<span>{{ item.sourceTypeName }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>接受时间:</span> |
||||
|
<span>{{ item.happenTime }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>工单号:</span> |
||||
|
<span>{{ item.workOrderNum }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<div>问题描述:</div> |
||||
|
<div style="margin-top: 20px">{{ item.eventContent }}</div> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<div>图片:</div> |
||||
|
<div style="margin-top: 20px; display: flex"> |
||||
|
<img style="width: 100px; height: 100px; margin-right: 5px" v-for="src in item.imageList" :key="src" :src="src" alt="/" @click="openImg(src)" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>联系人:</span> |
||||
|
<span>{{ item.name }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>联系电话:</span> |
||||
|
<span>{{ $sensitive(item.mobile, 3, 7) }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>详细地址:</span> |
||||
|
<span>{{ item.address }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>办结时限:</span> |
||||
|
<span>{{ item.gridName }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>满意度评价:</span> |
||||
|
<span>{{ item.satisfactionName }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="11" v-loading="loading1" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)"> |
||||
|
<div class="rightEvent m-info"> |
||||
|
<div class="eventDetails">办理进展</div> |
||||
|
<!-- <el-timeline class="timeline" :reverse="true"> |
||||
|
<el-timeline-item v-for="(item, index) in activities" :key="index" :class="index == activities.length - 1 ? 'sucess' : ''"> |
||||
|
<div class="status-box"> |
||||
|
<div class="status1" v-if="index == activities.length - 1">回复</div> |
||||
|
<div class="status2" v-else>完成并回复</div> |
||||
|
<div class="timestamp">{{ item.timeLimit ? $moment(item.timeLimit).format("YYYY-MM-DD hh:mm:ss") : "" }}</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="field">回复人:</div> |
||||
|
<div class="value">{{ item.departmentName }}</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="field">回复内容:</div> |
||||
|
<div class="value">{{ item.publicReply }}</div> |
||||
|
</div> |
||||
|
</el-timeline-item> |
||||
|
</el-timeline> --> |
||||
|
<div v-if="activities.length > 0"> |
||||
|
<!-- <el-card :class="{ 'box-card': source === 'visiual' }" style="min-height: calc(88vh - 50px); overflow: auto"> --> |
||||
|
<div class="m-process"> |
||||
|
<div class="list"> |
||||
|
<div class="item" :class="[index === 0 ? 'z-on' : '']" :key="item.processId" v-for="(item, index) in activities"> |
||||
|
<div class="item-row"> |
||||
|
<template v-if="item.agencyId"> |
||||
|
<div class="name">指派</div> |
||||
|
</template> |
||||
|
<template v-if="!item.timeLimit"> |
||||
|
<div class="name">完成并回复</div> |
||||
|
</template> |
||||
|
<template v-if="!item.agencyId && item.timeLimit"> |
||||
|
<div class="name">{{ item.processName }}</div> |
||||
|
</template> |
||||
|
<div class="date"> |
||||
|
{{ item.processTime ? getTrueTime(item.processTime) : "" }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="item.type === 'event'"> |
||||
|
<template v-if="item.agencyId"> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">指派人:</div> |
||||
|
<div class="detail-value">{{ item.departmentName }}</div> |
||||
|
</div> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">指派部门:</div> |
||||
|
<div class="detail-value">{{ item.agencyName }}</div> |
||||
|
</div> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">转办意见:</div> |
||||
|
<div class="detail-value">{{ item.publicReply }}</div> |
||||
|
</div> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">办结时限:</div> |
||||
|
<div class="detail-value">{{ formTimeLimit(item.timeLimit) }}</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">回复人:</div> |
||||
|
<div class="detail-value">{{ item.departmentName }}</div> |
||||
|
</div> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">回复内容:</div> |
||||
|
<div class="detail-value">{{ item.publicReply }}</div> |
||||
|
</div> |
||||
|
<div class="detail" v-if="item.timeLimit"> |
||||
|
<div class="detail-field">办结时限:</div> |
||||
|
<div class="detail-value">{{ getTrueTime(item.timeLimit) }}</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- </el-card> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@/components/Dialog/index.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: "ReportAnEvent", |
||||
|
components: { Dialog }, |
||||
|
props: { |
||||
|
id: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
item: {}, |
||||
|
loading: false, |
||||
|
loading1: false, |
||||
|
activities: [], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: {}, |
||||
|
watch: { |
||||
|
id: { |
||||
|
handler(val) { |
||||
|
if (val) { |
||||
|
this.getDetailsData(val); |
||||
|
this.getProcessData(val); |
||||
|
} |
||||
|
}, |
||||
|
immediate: true, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() {}, |
||||
|
|
||||
|
methods: { |
||||
|
handleClose() { |
||||
|
this.$emit("close", false); |
||||
|
this.item = {}; |
||||
|
}, |
||||
|
|
||||
|
openImg(src) { |
||||
|
window.open(src); |
||||
|
}, |
||||
|
|
||||
|
getTrueTime(time) { |
||||
|
return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm"); |
||||
|
}, |
||||
|
|
||||
|
getDetailsData(id) { |
||||
|
this.loading = true; |
||||
|
this.$http.post("/governance/icEventOld/detail", { icEventId: id }).then((res) => { |
||||
|
const { code, data, msg } = res.data; |
||||
|
if (code === 0) { |
||||
|
this.item = data; |
||||
|
this.loading = false; |
||||
|
} else { |
||||
|
this.loading = false; |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
getProcessData(id) { |
||||
|
this.$http.post("/governance/icEventOld/process", { icEventId: id }).then((res) => { |
||||
|
const { code, data, msg } = res.data; |
||||
|
if (code === 0) { |
||||
|
this.activities = data; |
||||
|
this.loading1 = false; |
||||
|
} else { |
||||
|
this.loading1 = false; |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
||||
|
@mixin fontStyle { |
||||
|
color: #fff !important; |
||||
|
font-size: 14px !important; |
||||
|
} |
||||
|
.eventWrap { |
||||
|
height: 500px; |
||||
|
overflow-y: auto; |
||||
|
overflow-x: hidden; |
||||
|
.eventDetails { |
||||
|
font-size: 16px; |
||||
|
margin: 24px 0; |
||||
|
} |
||||
|
.m-info { |
||||
|
padding: 0px !important; |
||||
|
.m-process { |
||||
|
margin: 0 !important; |
||||
|
.name { |
||||
|
@include fontStyle; |
||||
|
} |
||||
|
.date { |
||||
|
@include fontStyle; |
||||
|
} |
||||
|
.detail { |
||||
|
@include fontStyle; |
||||
|
.detail-field { |
||||
|
flex: none !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.leftEvent { |
||||
|
color: #fff; |
||||
|
.eventItem { |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 24px; |
||||
|
span:first-child { |
||||
|
} |
||||
|
span:last-child { |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.rightEvent { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,306 @@ |
|||||
|
<template> |
||||
|
<el-dialog width="1118px" :modal="true" :modal-append-to-body="false" :destroy-on-close="true" :visible="showDialog" |
||||
|
@close="handleClose" title="事件详情"> |
||||
|
<div class="eventWrap"> |
||||
|
<el-row :gutter="32"> |
||||
|
<el-col :span="13" style="padding-left: 40px"> |
||||
|
<div class="leftEvent"> |
||||
|
|
||||
|
<div class="eventItem"> |
||||
|
<span>所属组织:</span> |
||||
|
<span>{{ item.gridName || '--' }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>上报渠道:</span> |
||||
|
<span>{{ item.sourceTypeName || '--' }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>事件类型:</span> |
||||
|
<span>{{ item.categoryName || '--' }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>接受时间:</span> |
||||
|
<span>{{ item.happenTime || '--' }}</span> |
||||
|
</div> |
||||
|
<!-- <div class="eventItem"> |
||||
|
<span>工单号:</span> |
||||
|
<span>{{ item.workOrderNum }}</span> |
||||
|
</div>--> |
||||
|
<div class="eventItem"> |
||||
|
<div>问题描述:</div> |
||||
|
<div style="margin-top: 20px">{{ item.eventContent || '--' }}</div> |
||||
|
</div> |
||||
|
<!-- <div class="eventItem"> |
||||
|
<div>图片:</div> |
||||
|
<div style="margin-top: 20px; display: flex"> |
||||
|
<img |
||||
|
style="width: 100px; height: 100px; margin-right: 5px" |
||||
|
v-for="src in item.imageList" |
||||
|
:key="src" |
||||
|
:src="src" |
||||
|
alt="/" |
||||
|
@click="openImg(src)" |
||||
|
/> |
||||
|
</div> |
||||
|
</div>--> |
||||
|
<div class="eventItem"> |
||||
|
<span>联系人:</span> |
||||
|
<span>{{ item.name || '--' }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>联系电话:</span> |
||||
|
<span>{{ item.mobile || '--' }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>详细地址:</span> |
||||
|
<span>{{ item.address || '--' }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>办结时限:</span> |
||||
|
<span>{{ item.latestOperatedTime || '--' }}</span> |
||||
|
</div> |
||||
|
<div class="eventItem"> |
||||
|
<span>满意度评价:</span> |
||||
|
<span>{{ item.satisfactionName || '--' }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="11"> |
||||
|
<div class="rightEvent m-info"> |
||||
|
<!-- <div class="eventDetails"> |
||||
|
<img :width="18" :height="18" src="@/assets/images/manyidu/tc-title-icon.png" />办理进展 |
||||
|
</div> --> |
||||
|
<!-- <el-timeline class="timeline" :reverse="true"> |
||||
|
<el-timeline-item v-for="(item, index) in activities" :key="index" :class="index == activities.length - 1 ? 'sucess' : ''"> |
||||
|
<div class="status-box"> |
||||
|
<div class="status1" v-if="index == activities.length - 1">回复</div> |
||||
|
<div class="status2" v-else>完成并回复</div> |
||||
|
<div class="timestamp">{{ item.timeLimit ? $moment(item.timeLimit).format("YYYY-MM-DD hh:mm:ss") : "" }}</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="field">回复人:</div> |
||||
|
<div class="value">{{ item.departmentName }}</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="field">回复内容:</div> |
||||
|
<div class="value">{{ item.publicReply }}</div> |
||||
|
</div> |
||||
|
</el-timeline-item> |
||||
|
</el-timeline> --> |
||||
|
<div v-if="activities.length > 0"> |
||||
|
<!-- <el-card :class="{ 'box-card': source === 'visiual' }" style="min-height: calc(88vh - 50px); overflow: auto"> --> |
||||
|
<div class="m-process"> |
||||
|
<div class="list"> |
||||
|
<div class="item" :class="[index === 0 ? 'z-on' : '']" :key="item.processId" |
||||
|
v-for="(item, index) in activities"> |
||||
|
<div class="item-row"> |
||||
|
<template v-if="item.agencyId"> |
||||
|
<div class="name">指派</div> |
||||
|
</template> |
||||
|
<template v-if="!item.timeLimit"> |
||||
|
<div class="name">完成并回复</div> |
||||
|
</template> |
||||
|
<template v-if="!item.agencyId && item.timeLimit"> |
||||
|
<div class="name">{{ item.processName || '--' }}</div> |
||||
|
</template> |
||||
|
<div class="date"> |
||||
|
{{ |
||||
|
item.processTime ? getTrueTime(item.processTime) : "" |
||||
|
}} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="item.type === 'event'"> |
||||
|
<template v-if="item.agencyId"> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">指派人:</div> |
||||
|
<div class="detail-value"> |
||||
|
{{ item.departmentName || '--' }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">指派部门:</div> |
||||
|
<div class="detail-value"> |
||||
|
{{ item.agencyName || '--' }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">转办意见:</div> |
||||
|
<div class="detail-value"> |
||||
|
{{ item.publicReply || '--' }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">办结时限:</div> |
||||
|
<div class="detail-value"> |
||||
|
{{ item.timeLimit || '--' }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">回复人:</div> |
||||
|
<div class="detail-value"> |
||||
|
{{ item.departmentName || '--' }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail"> |
||||
|
<div class="detail-field">回复内容:</div> |
||||
|
<div class="detail-value"> |
||||
|
{{ item.publicReply || '--' }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail" v-if="item.timeLimit"> |
||||
|
<div class="detail-field">办结时限:</div> |
||||
|
<div class="detail-value"> |
||||
|
{{ getTrueTime(item.timeLimit) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- </el-card> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "ReportAnEvent", |
||||
|
components: { |
||||
|
}, |
||||
|
props: { |
||||
|
id: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
showDialog: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
item: {}, |
||||
|
loading: false, |
||||
|
loading1: false, |
||||
|
activities: [], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: {}, |
||||
|
watch: { |
||||
|
showDialog: { |
||||
|
handler(val) { |
||||
|
if (val) { |
||||
|
this.getDetailsData(this.id); |
||||
|
this.getProcessData(this.id); |
||||
|
} else { |
||||
|
this.item = {} |
||||
|
this.activities = [] |
||||
|
} |
||||
|
}, |
||||
|
immediate: true, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handleClose() { |
||||
|
this.$emit("close", false); |
||||
|
this.item = {}; |
||||
|
}, |
||||
|
|
||||
|
openImg(src) { |
||||
|
window.open(src); |
||||
|
}, |
||||
|
|
||||
|
getTrueTime(time) { |
||||
|
return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm"); |
||||
|
}, |
||||
|
|
||||
|
getDetailsData(id) { |
||||
|
this.loading = true; |
||||
|
this.$http |
||||
|
.post("/governance/icEventOld/detail", { icEventId: id }) |
||||
|
.then((res) => { |
||||
|
const { code, data, msg } = res.data; |
||||
|
if (code === 0) { |
||||
|
this.item = data; |
||||
|
this.loading = false; |
||||
|
} else { |
||||
|
this.loading = false; |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
getProcessData(id) { |
||||
|
this.$http |
||||
|
.post("/governance/icEventOld/process", { icEventId: id }) |
||||
|
.then((res) => { |
||||
|
const { code, data, msg } = res.data; |
||||
|
if (code === 0) { |
||||
|
this.activities = data; |
||||
|
this.loading1 = false; |
||||
|
} else { |
||||
|
this.loading1 = false; |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
||||
|
|
||||
|
.eventWrap { |
||||
|
width: 1094px; |
||||
|
overflow-y: auto; |
||||
|
overflow-x: hidden; |
||||
|
padding: 24px; |
||||
|
|
||||
|
.eventDetails { |
||||
|
font-size: 18px; |
||||
|
margin: 48px 24px 48px 0; |
||||
|
|
||||
|
img { |
||||
|
margin-top: -4px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-info { |
||||
|
padding: 0px !important; |
||||
|
|
||||
|
.m-process { |
||||
|
margin: 0 !important; |
||||
|
|
||||
|
.detail { |
||||
|
.detail-field { |
||||
|
flex: none !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.leftEvent { |
||||
|
.eventItem { |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 24px; |
||||
|
|
||||
|
span:first-child {} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
Loading…
Reference in new issue