<!--事件详情-->
<template>
<div v-loading="wholeLoading" class="app-container">
<!-- 基础信息表单 -->
<div>
<el-row class="table-title">
<el-col :span="6"></el-col>
<div class="title-header">
<i class="el-icon-tickets" />事件基础信息
</div>
</el-row>
<case-form-process v-if="showProcess" ref="caseFormProcess" :case-form="caseDetail" :process="processStatus" />
<case-form-read v-else ref="caseFormRead" :case-form="caseDetail" :process="processStatus" />
</div>
<!-- 事件处理流程 -->
<div v-if="caseType != '应急事件'">
<el-row class="table-title" v-if="caseImgs.length > 0 || processList.length > 0">
<el-col :span="6">
<div class="title-header">
<i class="el-icon-tickets" />事件处理流程
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6" v-if="caseImgs.length > 0">
<caseImgShow :imgs="caseImgs" />
</el-col>
<el-col :span="6" v-if="processList.length > 0">
<caseProcessTable :list="processList" />
</el-col>
</el-row>
</div>
<!-- 事件流程处理 -->
<div v-if="showProcess && caseDetail.id">
<el-row class="table-title">
<el-col :span="6">
<div class="title-header">
<i class="el-icon-tickets" />事件流程处理
</div>
</el-col>
</el-row>
<case-process ref="caseProcess" :biz-id="caseDetail.id" :process-id="caseDetail.processId" :task-id="taskId"
:case-state="caseDetail.caseState" :limited-time="caseDetail.limitedTime" :case-detail="caseDetail"
@loading="loading" @submitSuccess="submitSuccess" @submitError="submitError" />
</div>
<!-- 事件处理记录 -->
<div v-if="caseDetail.processId">
<case-record ref="caseRecord" :process-id="caseDetail.processId" :id="id" />
</div>
<!-- 事件地图 -->
<div>
<el-row class="table-title">
<el-col :span="6">
<div class="title-header">
<i class="el-icon-tickets" />事件地图
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<f-map ref="mapDetail" style="height: 40vh; padding: 20px 0px" />
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import CaseFormRead from "./caseCommon/caseFormRead";
import CaseFormProcess from "./caseCommon/caseFormProcess";
import CaseProcess from "./caseCommon/caseProcess";
import CaseRecord from "./caseCommon/caseRecord";
import caseImgShow from "./caseCommon/caseImgShow";
import caseProcessTable from "./caseCommon/caseProcessTable.vue";
import {
caseDetail,
eventStepList,
eventCenterList,
socialDetail,
processPicture
} from "@/api/callCase";
import FMap from "../../components/fMap/components/fMap";
// import process from "./caseCommon/process.json";
// import process2 from "./caseCommon/process2.json";
// import mockData from "./caseCommon/data.json";
export default {
name: "CaseDetail",
components: {
FMap,
CaseFormRead,
CaseProcess,
CaseRecord,
CaseFormProcess,
caseImgShow,
caseProcessTable,
},
data() {
return {
id: "",
taskId: "", // 当前任务id，只有任务处理的详情中需要，会签用
caseDetail: {},
caseType: "",
caseImgs: [
// "https://t7.baidu.com/it/u=1742010762,3975931984&fm=193&f=GIF",
// "https://t7.baidu.com/it/u=1302518827,2012573433&fm=193&f=GIF",
], // 事件流程图片
processStatus: false, // 是否存在事件流程(运维事件)
processList: [], // 事件流程信息
showProcess: false,
wholeLoading: false,
};
},
created() {
// 获取事件分类类型
let caseTypeMap = {
2: "应急事件",
3: "运维事件",
4: "精细化管理事件",
};
let caseType = caseTypeMap[this.$route.query.caseType];
this.caseType = caseType;
this.id = this.$route.params.id;
if (this.$route.query.taskId) {
this.taskId = this.$route.query.taskId;
}
if (this.$route.query.showProcess) {
this.showProcess = this.$route.query.showProcess;
}
this.fetchDetail();
},
methods: {
/**
* 获取事件详情
*/
fetchDetail() {
// let res = {
// "afterFileId": "",
// "beforeFileId": "",
// "branch": "",
// "buildingCode": "",
// "buildingName": "",
// "caseNumber": "[2023]00006226",
// "cityCode": "",
// "cityName": "",
// "communityCode": "360783002008",
// "communityName": "南街居委会",
// "districtCode": "",
// "districtName": "",
// "eventAddress": "蓉江新区潭口镇南街居委会南街居委会01网格中共潭口镇委员会西北20米",
// "eventAddressCode": "3607830020080001",
// "eventClassify": "0",
// "eventContent": "1",
// "eventLv": "C",
// "eventSource": "9",
// "eventTypeJson": "",
// "extendsJson": "{}",
// "externalEventId": "202305110014",
// "fileId": "",
// "fileIds": [
// {
// "filetype": "image/jpeg",
// "systemid": "5d903bc3b8f04182a23ccb0e16243427",
// "bussinessid": "b131cfaab68b40e083c4953b12709b08",
// "modelname": "task",
// "base64": "",
// "description": "",
// "createdate": "2023-05-15 19:40:05",
// "filesize": "125078",
// "remote": "0",
// "userid": "wangbiying",
// "filename": "9574398604c14380b5c642bdd73117f6.jpg",
// "filepath": "task/20230515/20230515194004_7274.jpg",
// "downloads": "0",
// "isimage": "1",
// "filegroup": "0",
// "isdelete": "0",
// "username": "王碧莹"
// },
// {
// "filetype": "image/jpeg",
// "systemid": "0daea057295f4302902f52beb81567d2",
// "bussinessid": "b131cfaab68b40e083c4953b12709b08",
// "modelname": "task",
// "base64": "",
// "description": "",
// "createdate": "2023-05-15 19:40:06",
// "filesize": "127267",
// "remote": "0",
// "userid": "wangbiying",
// "filename": "696a381a461b43cda9a10d323d0fec51.jpg",
// "filepath": "task/20230515/20230515194005_1180.jpg",
// "downloads": "0",
// "isimage": "1",
// "filegroup": "0",
// "isdelete": "0",
// "username": "王碧莹"
// }
// ],
// "gridCode": "",
// "gridName": "",
// "id": "b131cfaab68b40e083c4953b12709b08",
// "isSecret": "0",
// "keyword": "",
// "latitude": "25.743910210286145",
// "linkName": "6",
// "longitude": "114.83415540354254",
// "processInstName": "",
// "remark": "",
// "reportName": "谢文平",
// "reportPhone": "17779718306",
// "reportSex": "1",
// "roomCode": "",
// "roomName": "",
// "streetCode": "360783002",
// "streetName": "潭口镇"
// }
// this.caseDetail.externalEventId = res.externalEventId;
// if (res.fileIds.length >= 1) {
// this.caseImgs = res.fileIds.map(item => {
// return `http://11.100.6.233:8085/geosocial-file/${item.filepath}`
// })
// }
if (this.id) {
this.wholeLoading = true;
caseDetail(this.id).then((response) => {
this.caseDetail = response.data;
let caseStateNameList = ["协同申请", "处理/回访完成"]
if (
this.caseDetail.eorcName == "精细化管理事件" &&
caseStateNameList.includes(this.caseDetail.caseStateName)
) {
socialDetail({ caseId: this.id }).then((res) => {
this.$set(this.caseDetail, "caseNumber", res.data.caseNumber);
this.caseDetail.externalEventId = res.data.externalEventId;
if (res.data.fileIds.length >= 1) {
this.caseImgs = res.data.fileIds.map(item => {
return `http://11.100.6.233:8085/geosocial-file/${item.filepath}`
})
}
// 测试接口调取
// processPicture({ caseId: res.data.externalEventId }).then((res) => {
// console.log(res)
// })
});
}
this.wholeLoading = false;
this.$refs.mapDetail.initMap(true, this.caseDetail);
})
// 通过类型判断传递内容
if (this.caseType == "精细化管理事件") {
// 获取返回的数据
this.$nextTick(async () => {
eventStepList({ caseId: this.id }).then(async (res) => {
this.processList = this.treeDataToCompressed(res.data).reverse();
this.processList = this.processList.filter(
(item) => item != undefined
);
let propsMap = {
processTitle: "processStepTitle",
time: "createTime",
sender: "processAssigneeName",
incept: "processNextAssigneeName",
detail: "approveMsg",
nextId: "processNextAssigneeId",
};
this.processList = await this.handlePropstoArray(
this.processList,
propsMap
);
});
socialDetail({ caseId: this.id }).then((res) => {
this.$set(this.caseDetail, "caseNumber", res.data.caseNumber);
this.caseDetail.externalEventId = res.data.externalEventId;
if (res.data.fileIds.length >= 1) {
this.caseImgs = res.data.fileIds.map(item => {
return `http://11.100.6.233:8085/geosocial-file/${item.filepath}`
})
}
});
});
} else if (this.caseType == "运维事件") {
this.$nextTick(async () => {
eventCenterList({ caseId: this.id }).then((res) => {
if (res.data.record.assignList.length >= 1) {
this.processStatus = true;
} else {
this.processStatus = false;
}
this.processList = res.data.record.assignList;
this.caseDetail.externalEventId = res.data.record.eventId;
// this.processList = process2.data.record.assignList;
let statusMap = {
1: "成功",
"-1": "驳回",
0: "处置中",
2: "结束",
3: "撤案",
};
let replyStatusMap = {
11: "事件撤案",
31: "事件驳回",
40: "已接收",
41: "立案中",
42: "待分拨",
43: "分拨中",
44: "处置中",
45: "待审核",
46: "审核驳回",
49: "指派",
51: "已办结",
52: "已评价",
53: "已接收待审核",
54: "审核不通过",
55: "审核通过",
20: "",
};
this.processList = this.processList.map((item) => {
return {
processTitle:
replyStatusMap[item.status] + " " + item.statusDesc,
time: item.time,
sender: item.name,
incept: null,
detail: item.content,
nextId: 1,
imgs: item.attachments,
};
});
});
});
}
return;
}
},
handlePropstoArray(array, props) {
return new Promise((resolve, reject) => {
let jsonData = JSON.stringify(array);
for (const key in props) {
var reg = new RegExp(props[key], "g");
jsonData = jsonData.replace(reg, key);
}
resolve(JSON.parse(jsonData));
});
},
treeDataToCompressed(source) {
let target = [];
for (const i in source) {
target.push(source[i].info);
if (
Array.isArray(source[i].children) &&
source[i].children &&
source[i].children.length > 0
) {
target = [
...target,
...this.treeDataToCompressed(source[i].children),
];
}
}
return target;
},
loading() {
this.wholeLoading = true;
},
/**
* 提交成功之后
*/
submitSuccess() {
console.log("submitSuccess");
this.$message.success("提交成功");
this.showProcess = false;
this.$route.query.showProcess = false;
this.wholeLoading = false;
this.fetchDetail();
this.$refs["caseRecord"].fetchProcessRecords();
},
/**
* 提交失败之后
*/
submitError() {
console.log("submitError");
this.wholeLoading = false;
},
},
};
</script>
<style lang="scss" scoped>
.table-title {
background-color: rgba(243, 243, 243, 1);
height: 46px;
.title-header {
line-height: 46px;
color: #606266;
font-size: 15px;
i {
margin-left: 5px;
margin-right: 5px;
}
}
}
</style>
