zhangzhang
1 year ago
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