</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"> {{ item.eventContent }} </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.name }}</span> </div> <div class="eventItem"> <span>联系电话：</span> <span>{{ item.mobile }}</span> <CallPhone icon="el-icon-phone"/> </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 :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"/> <Supervision ref="supervision" :currentLevelData="currentLevelData"/> </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"; export default { name: "EventDetail", components: { CallPhone, Title, ResourceScheduling, Supervision }, props: { currentLevelData: { type: Object, default: () => { }, }, 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 = {}; }, handleDispatch() { this.$refs.ResourceScheduling.open() }, handleSupervision() { this.$refs.supervision.open() }, 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/icEvent/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/icEvent/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 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); } } </style>