</div> <div v-loading="loading" class="eventWrap" element-loading-background="rgba(0, 0, 0, 0.5)" element-loading-spinner="el-icon-loading" element-loading-text="加载中" > <el-row :gutter="32"> <el-col :span="13" style="padding-left: 40px" > <div class="leftEvent"> <div class="eventDetails"> <img :height="18" :width="18" src="@/assets/images/manyidu/tc-title-icon.png" />事项详情 </div> <div class="eventItem"> <div class="label">所属组织：</div> <div class="value">{{ item.gridName }}</div> </div> <div class="eventItem"> <div class="label">上报渠道：</div> <div class="value">{{ item.sourceTypeName }}</div> </div> <div class="eventItem"> <div class="label">事件类型：</div> <div class="value">{{ item.categoryName }}</div> </div> <div class="eventItem" style="align-items: flex-start"> <div class="label">事件描述：</div> <div class="value describe">{{ item.eventContent }}</div> </div> <div class="eventItem"> <div class="label">接收时间：</div> <div class="value">{{ item.happenTime }}</div> </div> <div class="eventItem"> <div class="label">联系人：</div> <div class="value">{{ item.name }}</div> </div> <div class="eventItem"> <div class="label">联系电话：</div>  <div v-if="!item.reportUserId || item.reportUserId.trim() === ''" class="value" > {{ item.mobile }} </div> <div v-else class="value blue-text" @click="handleLook(item.reportUserId)" > {{ item.mobile }} </div> <CallPhone icon="el-icon-phone"/> </div> <div class="eventItem"> <div class="label">详细地址：</div> <div class="value">{{ item.address }}</div> </div> <div class="eventItem"> <div class="label">办结时限：</div> <div class="value">{{ item.latestOperatedTime }}</div> </div> <div class="eventItem"> <div class="label">满意度评价：</div> <div class="value">{{ item.satisfactionName }}</div> </div> </div> </el-col> <el-col :span="11" > <div class="rightEvent m-info"> <div class="eventDetails"> <img :height="18" :width="18" src="@/assets/images/manyidu/tc-title-icon.png" />办理进展 </div>  <div v-if="activities.length > 0">  <div class="m-process"> <div class="list"> <div v-for="(item, index) in activities" :key="item.processId" :class="[index === 0 ? 'z-on' : '']" class="item" > <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 v-if="item.timeLimit" class="detail"> <div class="detail-field">办结时限：</div> <div class="detail-value"> {{ getTrueTime(item.timeLimit) }} </div> </div> </template> </div> </div> </div> </div>  </div> </div> </el-col> </el-row> <div class="btn-group"> <el-button class="green" plain round type="success" @click="handleDispatch">资源调度</el-button> <el-button class="orange" plain round type="warning" @click="handleSupervision">催办督办</el-button> </div> </div> </el-dialog> <ResourceScheduling ref="ResourceScheduling" :currentLevelData="currentLevelData" @handle="dispatchOrder"/> <Supervision ref="supervision" :currentLevelData="currentLevelData"/> <EventDispatchOrder v-if="isEventDispatchOrder" ref="EventDispatchOrder" @close="isEventDispatchOrder = false" @ok="handleSure" /> </div> </template> <script> import Title from "@/views/dataBoard/satisfactionEval/components/Title"; import CallPhone from "@/views/dataBoard/cpts/CallPhone.vue"; import ResourceScheduling from "@/views/dataBoard/overview/components/ResourceScheduling.vue"; import Supervision from "@/views/dataBoard/overview/components/Supervision.vue"; import EventDispatchOrder from "@/views/dataBoard/overview/components/EventDispatchOrder.vue"; export default { name: "EventDetail", components: { CallPhone, Title, ResourceScheduling, Supervision, EventDispatchOrder }, props: { currentLevelData: { type: Object, default: () => { }, }, id: { type: String, default: "", }, showDialog: { type: Boolean, default: false, }, is12345: { type: Boolean, default: true } }, data() { return { item: {}, loading: false, loading1: false, activities: [], isEventDispatchOrder: false }; }, 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 = {}; }, handleSure() { this.$emit("ok"); this.handleClose() }, handleDispatch() { this.$refs.ResourceScheduling.open() }, handleSupervision() { this.$refs.supervision.open(this.item,this.id, 'event') }, openImg(src) { window.open(src); }, getTrueTime(time) { return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm"); }, // 查看 handleLook(resiId) { this.$router.push({ path: "/dataBoard/overview/resident", query: { user_id: resiId, type:'renfang' }, }); }, getDetailsData(id) { this.loading = true; console.log(this.is12345) let url if(this.is12345) { url = "/governance/icEvent/detail" } else { url = "/governance/icEventOld/detail" } this.$http .post(url, {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) { let url if(this.is12345) { url = "/governance/icEvent/process" } else { url = "/governance/icEventOld/process" } this.$http .post(url, {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); } }); }, dispatchOrder(data) { this.isEventDispatchOrder = true this.$nextTick(() => { this.$refs.EventDispatchOrder.open(this.item); }) } }, }; </script> <style lang="scss" scoped src="@/assets/scss/dataBoard/popup-info.scss"></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 { overflow-x: hidden; //height: 798px; overflow-y: auto; width: 1094px; padding: 24px; .eventDetails { font-size: 18px; margin: 0px 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: 23px; color: #FFFFFF; span:first-child { color: #9CB4D3 } span:last-child { } } } .rightEvent { color: #fff; } } .btn-group { display: flex; align-items: center; justify-content: center; margin-top: 20px; .green { color: #00CD96; border: 1px solid #00CD96; background: rgba(39, 189, 127, 0.3); } .el-button { width: 136px; height: 36px; margin: 0 20px; } .orange { color: #FD8904; border: 1px solid #FD8904; background: rgba(253, 137, 4, 0.3); } } .eventItem { font-size: 14px; position: relative; display: flex; align-items: center; margin-bottom: 17px; .label { color: #9CB4D3; white-space: nowrap; } .value { color: #FFFFFF; } } .describe { letter-spacing: 1px; line-height: 30px; margin-top: -8px; } .blue-text { color: #2196F3 !important; /* A shade of blue, feel free to replace with your preferred tech-inspired blue color */ cursor: pointer; font-weight: bold; /* Make the text bold */ text-decoration: underline; /* Add an underline effect */ } </style>