8 changed files with 847 additions and 126 deletions
@ -0,0 +1,406 @@ |
|||
export const formList = [ |
|||
{ |
|||
label: "事故类型:", |
|||
key: "stringEventSource", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "交通事故类型:", |
|||
key: "stakeMark", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件等级:", |
|||
key: "direction", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "报警人姓名:", |
|||
key: "stringEventType", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "报警人电话:", |
|||
key: "eventCause", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "地点方式:", |
|||
key: "stringEventState", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "路线:", |
|||
key: "nickName", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "方向:", |
|||
key: "startTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "桩号:", |
|||
key: "nickName", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件发生时间:", |
|||
key: "endTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "预计解除时间:", |
|||
key: "startTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "压车:", |
|||
key: "nickName", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "天气情况:", |
|||
key: "startTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "影响:", |
|||
key: "nickName", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "前方是否倒货:", |
|||
key: "startTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "前方是否养护施工:", |
|||
key: "nickName", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "前方是否拥堵:", |
|||
key: "startTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "是否分岔路口:", |
|||
key: "nickName", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "是否处在弯道:", |
|||
key: "startTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "是否处在隧道:", |
|||
key: "nickName", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "交警电话:", |
|||
key: "startTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "清障电话:", |
|||
key: "nickName", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "酒落物名称:", |
|||
key: "startTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "车主电话:", |
|||
key: "nickName", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "经验总结:", |
|||
key: "startTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "超时原因:", |
|||
key: "nickName", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "来源:", |
|||
key: "startTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "车道占用:", |
|||
key: "startTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "伤亡情况:", |
|||
key: "nickName", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "车辆情况:", |
|||
key: "startTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件标题:", |
|||
key: "nickName", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件描述:", |
|||
key: "startTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
// {
|
|||
// label: "完结时间:",
|
|||
// key: "endTime",
|
|||
// type: "input",
|
|||
// options: {
|
|||
// disabled: true,
|
|||
// placeholder: ''
|
|||
// }
|
|||
// },
|
|||
// {
|
|||
// label: "事件描述:",
|
|||
// key: "direction",
|
|||
// type: "input",
|
|||
// gridColumn: 3,
|
|||
// options: {
|
|||
// disabled: true,
|
|||
// placeholder: "",
|
|||
// },
|
|||
// },
|
|||
]; |
|||
|
|||
export const reportList = [ |
|||
{ |
|||
label: "车型及车牌号:", |
|||
key: "eventCause", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "分流点名称及桩号:", |
|||
key: "eventCause", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
|
|||
{ |
|||
label: "目前处置进度:", |
|||
key: "eventCause", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "已采取的措施:", |
|||
key: "eventCause", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "是否启动应急预案:", |
|||
key: "eventCause", |
|||
type: "radio", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
|
|||
{ |
|||
label: "交警是否到达:", |
|||
key: "eventCause", |
|||
type: "radio", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "医疗是否到达:", |
|||
key: "eventCause", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
|
|||
{ |
|||
label: "是否做好情报板提示工作:", |
|||
key: "eventCause", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "是否有危化品泄露:", |
|||
key: "eventCause", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
|
|||
{ |
|||
label: "消防是否到达:", |
|||
key: "eventCause", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,253 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="事件上报" width="885px" top="90px"> |
|||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|||
<el-tab-pane label="事件" name="first"> |
|||
<div class="EventDetail"> |
|||
<span class="title">事件基本信息</span> |
|||
<Form |
|||
class="form" |
|||
ref="FormConfigRef" |
|||
:formList="formConfigList" |
|||
v-model="fData" |
|||
labelWidth="120px" |
|||
/> |
|||
|
|||
<!-- <Form |
|||
:formList="formList" |
|||
:dFormData="formData" |
|||
label-width="100px" |
|||
/> --> |
|||
<span class="title">上报侧重要素</span> |
|||
<Form |
|||
:formList="reportList" |
|||
:dFormData="formData" |
|||
label-width="100px" |
|||
/> |
|||
<div class="footer"> |
|||
<Button @click.native="onSubmit" :loading="submitting">保存</Button> |
|||
<Button |
|||
style="background: #c9c9c9" |
|||
@click.native="modelVisible = false" |
|||
>关闭</Button |
|||
> |
|||
</div> |
|||
</div> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="初报" name="second"> </el-tab-pane> |
|||
<el-tab-pane label="续报" name="third"> </el-tab-pane> |
|||
<el-tab-pane label="终报" name="fourth"> </el-tab-pane> |
|||
</el-tabs> |
|||
</Dialog> |
|||
</template> |
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import Form from "@screen/components/FormConfig"; |
|||
import { formList, reportList } from "./data"; |
|||
import { tabConfigList } from "../../EventInformation/components/EditEventInformationDialog/data.js"; |
|||
import Button from "@screen/components/Buttons/Button.vue"; |
|||
import request from "@/utils/request"; |
|||
var moment = require("moment"); |
|||
export default { |
|||
name: "EventDetail", |
|||
components: { |
|||
Dialog, |
|||
Form, |
|||
Button, |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "update:value", |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
formData: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
// formList, |
|||
fData: {}, |
|||
formConfigList: [], |
|||
reportList, |
|||
activeName: "first", |
|||
}; |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
// if (this.visible) { |
|||
// this.getProcess(); |
|||
// } |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit("update:value", val); |
|||
}, |
|||
}, |
|||
}, |
|||
methods: { |
|||
async initData() { |
|||
let infoData = await request({ |
|||
url: `/dc/system/event/eventSubclass/1/60f022d95a7c4b6cada2d780246543d8`, //交通事件 |
|||
method: "get", |
|||
}); |
|||
|
|||
if (infoData.code != 200) return Message.error(infoData?.msg); |
|||
this.resultEventData = { ...infoData.data }; |
|||
console.log("事件详情666", this.resultEventData); |
|||
let info = infoData.data; |
|||
if (typeof info.stakeMark == "string") { |
|||
let numbers = info.stakeMark.match(/\d+/g).map(Number); |
|||
// console.log('numbers', numbers); |
|||
info.stakeMark = numbers; |
|||
} |
|||
this.fData = info; |
|||
|
|||
let configList = tabConfigList.find( |
|||
(item) => item.label == this.fData.eventName |
|||
); |
|||
this.formConfigList = configList.formConfig.list; |
|||
|
|||
await Promise.all([ |
|||
//道路 |
|||
request({ |
|||
url: `/business/road/query`, |
|||
method: "get", |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
this.roads = []; |
|||
result.data.forEach((it) => { |
|||
this.roads.push({ key: it.id, label: it.roadName }); |
|||
}); |
|||
}) |
|||
.catch((err) => { |
|||
Message.error("查询失败4", err); |
|||
}), |
|||
//方向字典 |
|||
request({ |
|||
url: `/system/dict/data/type/iot_event_direction`, |
|||
method: "get", |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
this.direction = []; |
|||
result.data.forEach((it) => { |
|||
this.direction.push({ key: it.dictValue, label: it.dictLabel }); |
|||
}); |
|||
}) |
|||
.catch((err) => { |
|||
Message.error("查询失败5", err); |
|||
}), |
|||
//路网设施 1 收费站 2 桥梁 3 互通立交 4 枢纽立交 5 隧道 6 服务区 |
|||
request({ |
|||
url: `/business/facility/query`, |
|||
method: "get", |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
this.lwss = []; |
|||
result.data.forEach((it) => |
|||
this.lwss.push({ |
|||
key: it.id, |
|||
label: it.facilityName, |
|||
type: it.facilityType, |
|||
}) |
|||
); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("err", err); |
|||
Message.error("查询失败6", err); |
|||
}), |
|||
]); |
|||
|
|||
this.formConfigList.forEach((it) => { |
|||
if (it.key == "direction") { |
|||
it.options.options = this.direction; |
|||
} |
|||
if (it.key == "roadId") { |
|||
it.options.options = this.roads; |
|||
} |
|||
if (it.key == "dcEventServiceArea.facilityId") { |
|||
it.options.options = this.lwss.filter((ss) => ss.type == 6); |
|||
} |
|||
}); |
|||
}, |
|||
handleClick(tab, event) { |
|||
console.log(tab, event); |
|||
}, |
|||
|
|||
getProcess() { |
|||
let directionFlg = true; |
|||
|
|||
request({ |
|||
url: `/system/process/list`, |
|||
method: "get", |
|||
params: { eventId: this.formData.id }, |
|||
}).then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
const rows = result.rows; |
|||
this.timeLine1List = []; |
|||
this.timeLine2List = []; |
|||
|
|||
this.formData?.processConfigList.forEach((it) => { |
|||
const process = rows.find((row) => it.nodeNode == row.processId); |
|||
|
|||
if (process) { |
|||
this.timeLine1List.push({ |
|||
time: moment(process.operationTime || new Date()).format("HH:mm"), |
|||
label: it.processNode, |
|||
isActive: true, |
|||
}); |
|||
this.timeLine2List.push({ |
|||
time: moment(process.operationTime || new Date()).format( |
|||
"yyyy-MM-DD HH:mm:ss" |
|||
), |
|||
name: process.operator, |
|||
desc: process.context, |
|||
posts: "", |
|||
direction: directionFlg ? "left" : "right", |
|||
}); |
|||
directionFlg = !directionFlg; |
|||
} else { |
|||
this.timeLine1List.push({ |
|||
time: "", |
|||
label: it.processNode, |
|||
isActive: false, |
|||
}); |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.initData(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.EventDetail { |
|||
display: flex; |
|||
gap: 9px; |
|||
width: 836px; |
|||
height: 768px; |
|||
flex-direction: column; |
|||
.title { |
|||
margin: 10px 0; |
|||
} |
|||
.footer { |
|||
display: flex; |
|||
justify-content: end; |
|||
gap: 15px; |
|||
margin-top: 20px; |
|||
margin-right: 20px; |
|||
} |
|||
} |
|||
::v-deep .el-tabs__content { |
|||
overflow: auto; |
|||
position: relative; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue