<!--事件详情-->
<template>
<div v-loading="wholeLoading" class="app-container">
<!-- 基础信息表单 -->
<div>
<el-row class="table-title">
<el-col :span="6"
><div class="title-header">
<i class="el-icon-tickets" />事件基础信息
</div></el-col
>
</el-row>
<case-form-process
v-if="showProcess"
ref="caseFormProcess"
:case-form="caseDetail"
/>
<case-form-read v-else ref="caseFormRead" :case-form="caseDetail" />
</div>
<!-- 事件处理流程 -->
<div v-if="caseType != '应急事件'">
<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="6">
<caseImgShow :imgs="caseImgs" />
</el-col>
<el-col :span="6">
<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 } from "@/api/callCase";
import FMap from "../../components/fMap/components/fMap";
import process from "./caseCommon/process.json";
import process2 from "./caseCommon/process2.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",
], // 事件流程图片
processList: [], // 事件流程信息
showProcess: false,
wholeLoading: false,
};
},
created() {
// 获取事件分类类型
let caseTypeMap = {
2: "应急事件",
3: "运维事件",
// 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() {
if (this.id) {
this.wholeLoading = true;
caseDetail(this.id).then((response) => {
this.caseDetail = response.data;
this.wholeLoading = false;
this.$refs.mapDetail.initMap(true, this.caseDetail);
});
// 通过类型判断传递内容
// id为caseId
if (this.caseType == "运维事件") {
// 获取返回的数据
this.$nextTick(async () => {
// 运维
eventCenterList({ caseId: this.id }).then((res) => {
this.processList = this.treeDataToCompressed([
...res.data,
]).reverse();
});
// this.processList = this.treeDataToCompressed([
// ...process,
// ]).reverse();
let propsMap = {
processTitle: "processStepTitle",
time: "createTime",
sender: "processAssigneeName",
incept: "processNextAssigneeName",
detail: "approveMsg",
nextId: "processNextAssigneeId",
};
this.processList = await this.handlePropstoArray(
this.processList,
propsMap
);
});
} else if (this.caseType == "精细化管理事件") {
// 精细化
this.$nextTick(async () => {
// this.processList = process2.data.replyDatas;
eventStepList({ caseId: this.id }).then((res) => {
this.processList = res.data;
});
let statusMap = {
1: "成功",
"-1": "驳回",
0: "处置中",
2: "结束",
3: "撤案",
};
let replyStatusMap = {
11: "事件撤案",
31: "事件驳回",
40: "已接收",
41: "立案中",
42: "待分拨",
43: "分拨中",
44: "处置中",
45: "待审核",
46: "审核驳回",
49: "指派",
51: "已办结",
52: "已评价",
53: "已接收待审核",
54: "审核不通过",
55: "审核通过",
};
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,
};
});
});
}
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.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>
