王钦
9 months ago
31 changed files with 7147 additions and 206 deletions
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,28 @@ |
|||
// import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
|
|||
import * as PresetFormItems from "@screen/common/PresetFormItems.js"; |
|||
// import { merge, cloneDeep } from "lodash";
|
|||
|
|||
import {directionOptions} from '@screen/utils/enum.js'; |
|||
export const searchFormList = [ |
|||
|
|||
{ |
|||
label: "设备名称:", |
|||
key: "deviceName", |
|||
type: "input", |
|||
default: "" |
|||
}, |
|||
{ |
|||
label: "物联编号:", |
|||
key: "iotDeviceId", |
|||
type: "input", |
|||
default: "" |
|||
}, { |
|||
label: "设备方向:", |
|||
key: "direction", |
|||
type: "select", |
|||
options: { |
|||
options: directionOptions, |
|||
}, |
|||
}, |
|||
|
|||
]; |
|||
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,34 @@ |
|||
<template> |
|||
<div class='board_record'> |
|||
TODO |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import request from "@/utils/request"; |
|||
export default { |
|||
name: 'boardRecord', |
|||
components: { |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
mounted(){ |
|||
|
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.board_record { |
|||
|
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,126 @@ |
|||
<template> |
|||
<div class="Carousel"> |
|||
<img src="./images/arrow.svg" @click="prevSlide" class="arrow" /> |
|||
|
|||
<VueSlickCarousel v-if="pictures.length > 0" v-bind="settings" ref="CarouselRef" class="vueSlickCarousel"> |
|||
<div v-for="(item, index) in pictures" :key="index" class="item"> |
|||
<!-- <img :src="require(`@screen/images/${item}`)" style="height: 100%"> --> |
|||
<!-- <img :src="item" style="height: 100%"> --> |
|||
<el-image style="height: 100%" :src="item" :preview-src-list="pictures"> |
|||
</el-image> |
|||
</div> |
|||
</VueSlickCarousel> |
|||
|
|||
<VueSlickCarousel v-if="videos.length > 0" v-bind="videoSettings" ref="CarouselRef" class="vueSlickCarousel"> |
|||
<div v-for="(item, index) in videos " :key="index" class="item"> |
|||
<Video style="height: 100%;" :showHeader="false" :url="item || ''" videoType="mp4" /> |
|||
</div> |
|||
</VueSlickCarousel> |
|||
|
|||
<img src="./images/arrow.svg" @click="nextSlide" class="arrow" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import VueSlickCarousel from 'vue-slick-carousel' |
|||
import 'vue-slick-carousel/dist/vue-slick-carousel.css' |
|||
// optional style for arrows & dots |
|||
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css' |
|||
import Video from "@screen/components/Video"; |
|||
|
|||
export default { |
|||
name: "Carousel", |
|||
components: { VueSlickCarousel, Video }, |
|||
props: { |
|||
pictures: { |
|||
type: Array, |
|||
default: () => [ |
|||
// "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", |
|||
// "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg", |
|||
// "require('@screen/images/shareWith/message-active.svg')", |
|||
// "require('@screen/images/shareWith/message.svg')", |
|||
// "require('@screen/images/shareWith/website-active.svg')", |
|||
// "require('@screen/images/shareWith/website.svg')", |
|||
// "require('@screen/images/shareWith/weChat-active.svg')", |
|||
// "require('@screen/images/shareWith/weChat-active.svg')" |
|||
] |
|||
}, |
|||
videos: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
carouselItems: [], |
|||
settings: { |
|||
infinite: true, |
|||
arrows: false, |
|||
speed: 600, |
|||
slidesToShow: 1, |
|||
slidesToScroll: 1, |
|||
autoplay: true, |
|||
autoplaySpeed: 1800, |
|||
}, |
|||
videoSettings: { |
|||
infinite: true, |
|||
arrows: false, |
|||
speed: 600, |
|||
slidesToShow: 1, |
|||
slidesToScroll: 1, |
|||
autoplay: false, |
|||
autoplaySpeed: 1800, |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
prevSlide() { |
|||
this.$refs.CarouselRef.prev() |
|||
}, |
|||
nextSlide() { |
|||
// console.log('pics',this.pictures) |
|||
this.$refs.CarouselRef.next() |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.Carousel { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
display: flex; |
|||
gap: 9px; |
|||
|
|||
.vueSlickCarousel { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
|
|||
::v-deep { |
|||
.slick-list { |
|||
height: 100%; |
|||
|
|||
div { |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item { |
|||
img { |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.arrow { |
|||
cursor: pointer; |
|||
width: 15px; |
|||
|
|||
&:first-child { |
|||
transform: rotate(-180deg) |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,177 @@ |
|||
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: "roadName", |
|||
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: "estimatedEndTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "水膜厚度(mm):", |
|||
key: "waterFilmThickness", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
visible: (data) => { |
|||
if (data?.waterFilmThickness) { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}, |
|||
{ |
|||
label: "风速:", |
|||
key: "windSpeed", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
visible: (data) => { |
|||
if (data?.windSpeed) { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}, |
|||
{ |
|||
label: "能见度(m):", |
|||
key: "visibility", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
visible: (data) => { |
|||
if (data?.visibility) { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件描述:", |
|||
key: "remark", |
|||
type: "input", |
|||
isAlone: true, |
|||
gridColumn: 3, |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const timeLine1List = [ |
|||
{ |
|||
time: "16.36", |
|||
label: "接警记录", |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
time: "16.36", |
|||
label: "指令下达", |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
time: "16.36", |
|||
label: "清障到达", |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
time: "", |
|||
label: "安全防护", |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
time: "", |
|||
label: "开始清障", |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
time: "", |
|||
label: "清障结束", |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
time: "", |
|||
label: "恢复畅通", |
|||
isActive: false, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,521 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" :title="title" width="880px"> |
|||
<div class="EventAddPlanDialog"> |
|||
<div class="first"> |
|||
<el-radio-group v-model="planName" @input="changeRadio"> |
|||
<el-radio-button |
|||
v-for="item in info" |
|||
:key="item.id" |
|||
:label="item.planName" |
|||
></el-radio-button> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<div class="second"> |
|||
<el-row> |
|||
<el-col :span="2"> |
|||
<div class="text">联动设备:</div> |
|||
</el-col> |
|||
<el-col :span="22"> |
|||
<FormTable |
|||
ref="secondFormTable" |
|||
:tableData="secondFormData" |
|||
:type="1" |
|||
></FormTable> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<div class="third"> |
|||
<el-row> |
|||
<el-col :span="2"> |
|||
<div class="text">恢复操作:</div> |
|||
</el-col> |
|||
<el-col :span="22"> |
|||
<FormTable |
|||
ref="thirdFormTable" |
|||
:tableData="thirdFormData" |
|||
:type="2" |
|||
></FormTable> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
|
|||
<template #footer> |
|||
<!-- <Button v-if="isDisBtn" style="padding:0 24px; pointer-events: none; background-color: #C9C9C9;" |
|||
@click.native="handleRestore" :loading="submitting">强制恢复</Button> --> |
|||
<Button |
|||
style="padding: 0 24px" |
|||
@click.native="handleSubmit(2)" |
|||
:loading="submitting" |
|||
>强制恢复</Button |
|||
> |
|||
<Button |
|||
style="padding: 0 24px" |
|||
@click.native="handleSubmit(1)" |
|||
:loading="submitting" |
|||
>确认</Button |
|||
> |
|||
<Button |
|||
style="background: #c9c9c9; padding: 0 24px" |
|||
@click.native="(modelVisible = false), (submitting = false)" |
|||
>取消</Button |
|||
> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import FormTable from "../formTable/index.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue"; |
|||
import request from "@/utils/request"; |
|||
import { Message } from "element-ui"; |
|||
import { throttle } from "lodash"; |
|||
|
|||
export default { |
|||
name: "eventPlanDialog", |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
FormTable, |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "close", |
|||
}, |
|||
provide() { |
|||
return { |
|||
loadData: throttle(this.loadData, 1000), |
|||
getAutomatic: this.getTemplateAutomatic, |
|||
getOriginal: this.getBoardOriginal, |
|||
}; |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
activeName: String, |
|||
info: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
eventFormData: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
title: "事件确认", |
|||
isDisBtn: true, |
|||
dialogType: 1, |
|||
planId: 0, |
|||
planInfo: {}, |
|||
submitting: false, |
|||
secondFormData: [ |
|||
{ |
|||
deviceType: 1, |
|||
searchRule: 1, |
|||
qbb: "", |
|||
}, |
|||
], |
|||
thirdFormData: [ |
|||
{ |
|||
deviceType: 1, |
|||
searchRule: 1, |
|||
qbb: "", |
|||
}, |
|||
], |
|||
planName: "", |
|||
automaticInfo: {}, |
|||
dcExecuteAction: [], |
|||
deviceData: [], |
|||
automaticData: {}, |
|||
boardOriginalData: {}, |
|||
eventOptions: [ |
|||
{ |
|||
value: 1, |
|||
label: "异常天气", |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: "交通事故", |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: "非法上路", |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: "车辆故障", |
|||
}, |
|||
{ |
|||
value: 5, |
|||
label: "交通拥堵", |
|||
}, |
|||
{ |
|||
value: 6, |
|||
label: "交通管制", |
|||
}, |
|||
{ |
|||
value: 7, |
|||
label: "服务区异常", |
|||
}, |
|||
{ |
|||
value: 8, |
|||
label: "施工建设", |
|||
}, |
|||
{ |
|||
value: 9, |
|||
label: "路障清除", |
|||
}, |
|||
], |
|||
mechanismOptions: [ |
|||
{ |
|||
value: 1, |
|||
label: "雨", |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: "雪", |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: "雾", |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: "大风", |
|||
}, |
|||
{ |
|||
value: 5, |
|||
label: "低温寒潮", |
|||
}, |
|||
{ |
|||
value: 6, |
|||
label: "路面积雪", |
|||
}, |
|||
{ |
|||
value: 7, |
|||
label: "路面结冰", |
|||
}, |
|||
{ |
|||
value: 8, |
|||
label: "路面积水", |
|||
}, |
|||
{ |
|||
value: 9, |
|||
label: "其他", |
|||
}, |
|||
], |
|||
conditionOptions: [ |
|||
// { |
|||
// value: 1, |
|||
// label: '大于(>)' |
|||
// }, |
|||
{ |
|||
value: 1, |
|||
label: "小于(<)", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
mounted() {}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
if (this.visible) { |
|||
if (this.info.length > 0) { |
|||
this.planName = this.info[0]?.planName || ""; |
|||
this.planInfo = this.info[0]; |
|||
this.initData(this.info[0]); |
|||
} |
|||
} |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit("close", val); |
|||
}, |
|||
}, |
|||
}, |
|||
methods: { |
|||
initData(data) { |
|||
console.log("data", data); |
|||
if (!data) return; |
|||
// this.planId = data.id; |
|||
let dcExecuteAction = data.dcExecuteAction; |
|||
let secondFormData = []; |
|||
let thirdFormData = []; |
|||
dcExecuteAction.forEach((it) => { |
|||
let action = { ...it }; |
|||
if (it.otherConfig) { |
|||
let config = JSON.parse(it.otherConfig); |
|||
let qbb = ""; |
|||
if (config.id) { |
|||
qbb = config.content; |
|||
config = { dcInfoBoardTemplate: config }; |
|||
} |
|||
// if (config.state) { |
|||
// config.gzms = config.state |
|||
// } |
|||
action = { ...it, ...config, qbb: qbb }; |
|||
} |
|||
if (it.deviceList) { |
|||
action.deviceList = it.deviceList |
|||
.split(",") |
|||
.map((str) => Number(str)); |
|||
} |
|||
if (it.actionType == 1) { |
|||
secondFormData.push(action); |
|||
} else if (it.actionType == 2) { |
|||
thirdFormData.push({ |
|||
...action, |
|||
qbb: "默认恢复该情报板上次常态化信息", |
|||
}); |
|||
} |
|||
}); |
|||
this.secondFormData = secondFormData; |
|||
this.thirdFormData = thirdFormData; |
|||
}, |
|||
async loadData() { |
|||
if (this.deviceData.length <= 0) { |
|||
let result = await request({ |
|||
url: `business/device/query?deviceType=2`, |
|||
method: "get", |
|||
}); |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
// console.log('123'); |
|||
this.deviceData = result.data; |
|||
// return result.data; |
|||
} |
|||
return this.deviceData; |
|||
}, |
|||
async getTemplateAutomatic() { |
|||
let url = ""; |
|||
let data = {}; |
|||
let otherConfig = {}; |
|||
let plan = this.info.find((it) => it.planName == this.planName); |
|||
console.log("plan", plan); |
|||
let action = plan.dcExecuteAction.find( |
|||
(it) => it.actionType == 1 && it.deviceType == 2 |
|||
); |
|||
if (action) { |
|||
otherConfig = JSON.parse(action.otherConfig); |
|||
if (this.activeName == "-1") { |
|||
//感知 |
|||
url = "/business/plans/warning/confirm"; |
|||
data = { |
|||
dcInfoBoardTemplate: otherConfig, |
|||
dcWarning: this.eventFormData, |
|||
}; |
|||
} else { |
|||
//交通 |
|||
url = "/business/plans/event/automatic"; |
|||
data = { |
|||
dcInfoBoardTemplate: otherConfig, |
|||
dcEvent: this.eventFormData, |
|||
}; |
|||
} |
|||
const result = await request({ |
|||
url: url, |
|||
method: "post", |
|||
data: data, |
|||
}); |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
this.automaticData = result.data; |
|||
} else { |
|||
console.log("没有情报板，不调用接口"); |
|||
this.automaticData = {}; |
|||
} |
|||
return this.automaticData; |
|||
}, |
|||
async getBoardOriginal() { |
|||
let url = ""; |
|||
let data = {}; |
|||
let plan = this.info.find((it) => it.planName == this.planName); |
|||
console.log("plan1", plan); |
|||
let action = plan.dcExecuteAction.find( |
|||
(it) => it.actionType == 1 && it.deviceType == 2 |
|||
); |
|||
if (action) { |
|||
if (this.activeName == "-1") { |
|||
//感知 |
|||
url = "/business/plans/warning/board/confirm"; |
|||
data = { |
|||
dcEmergencyPlans: { |
|||
...plan, |
|||
executeAction: action, |
|||
}, |
|||
dcWarning: this.eventFormData, |
|||
}; |
|||
} else { |
|||
//交通 |
|||
url = "/business/plans/event/board/confirm"; |
|||
data = { |
|||
dcEmergencyPlans: { |
|||
...plan, |
|||
executeAction: action, |
|||
}, |
|||
dcEvent: this.eventFormData, |
|||
}; |
|||
} |
|||
const result = await request({ |
|||
url: url, |
|||
method: "post", |
|||
data: data, |
|||
}); |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
this.boardOriginalData = result.data; |
|||
} else { |
|||
console.log("没有情报板，不调用接口"); |
|||
this.boardOriginalData = {}; |
|||
} |
|||
return this.boardOriginalData; |
|||
}, |
|||
changeRadio(value) { |
|||
let plan = this.info.find((it) => it.planName == value); |
|||
this.planInfo = plan; |
|||
this.initData(plan); |
|||
}, |
|||
formatData(it, value = 1) { |
|||
let data = { ...it, actionType: value, emergencyPlansId: id }; |
|||
if ( |
|||
it.deviceList && |
|||
typeof it.deviceList !== "string" && |
|||
it.deviceList.length > 0 |
|||
) { |
|||
data.deviceList = it.deviceList.join(","); |
|||
} else { |
|||
data.deviceList = ""; |
|||
} |
|||
if (it.content) { |
|||
data.otherConfig = JSON.stringify({ content: it.content }); |
|||
} |
|||
if (it.controlModel) { |
|||
let other = { |
|||
controlModel: it.controlModel, |
|||
controlModelName: inducerModeDic[it.controlModel], |
|||
state: it.state, |
|||
name: inducerWorkTypeDic[it.state], |
|||
}; |
|||
if (it.time && it?.time[0]) { |
|||
other = { |
|||
controlModel: it.controlModel, |
|||
controlModelName: inducerModeDic[it.controlModel], |
|||
state: it.state, |
|||
name: inducerWorkTypeDic[it.state], |
|||
startTime: it.time[0], |
|||
endTime: it.time[1], |
|||
}; |
|||
} |
|||
data.otherConfig = JSON.stringify(other); |
|||
} |
|||
if (it.gzms) { |
|||
data.otherConfig = JSON.stringify({ |
|||
state: it.gzms, |
|||
name: gzmsMap[it.gzms], |
|||
operationDuration: it.operationDuration, |
|||
}); |
|||
} |
|||
return data; |
|||
}, |
|||
handleSubmit(value = 1) { |
|||
// this.submitting = false; |
|||
let plan = { ...this.planInfo }; |
|||
let actions = plan.dcExecuteAction.filter((it) => it.actionType == value); |
|||
plan.dcExecuteAction = actions; |
|||
|
|||
let reqData = { |
|||
operationType: value, //1-执行操作 2-恢复操作 |
|||
dcEmergencyPlans: plan, |
|||
dcEvent: this.eventFormData, |
|||
}; |
|||
|
|||
let url = ""; |
|||
if (this.activeName == "-1") { |
|||
//感知 |
|||
url = "/business/plans/warning/confirm"; |
|||
reqData = { ...reqData, dcWarning: { ...reqData.dcEvent } }; |
|||
} else { |
|||
//交通 |
|||
url = "/business/plans/event/confirm"; |
|||
} |
|||
console.log("reqData", reqData); |
|||
// return; |
|||
request({ |
|||
url: url, |
|||
method: "post", |
|||
data: reqData, |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
Message.success("提交成功"); |
|||
this.$emit("close", false); |
|||
setTimeout(() => { |
|||
this.$emit("reInitData", true); |
|||
}, 100); |
|||
}) |
|||
.catch(() => { |
|||
Message.error("提交失败"); |
|||
}) |
|||
.finally(() => { |
|||
this.submitting = false; |
|||
}); |
|||
}, |
|||
handleRestore() {}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.24s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-to { |
|||
opacity: 0; |
|||
} |
|||
|
|||
.EventAddPlanDialog { |
|||
gap: 9px; |
|||
width: 1280px; |
|||
height: 310px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.first, |
|||
.second, |
|||
.third { |
|||
padding: 5px 10px 8px; |
|||
background-color: #296887; |
|||
margin-bottom: 15px; |
|||
|
|||
.text { |
|||
margin-top: 12px; |
|||
} |
|||
} |
|||
|
|||
.form { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
justify-content: end; |
|||
gap: 15px; |
|||
} |
|||
|
|||
// .disabledBtn { |
|||
// height: 24px; |
|||
// border-radius: 48px; |
|||
// background: #C9C9C9; |
|||
// padding: 0 24px; |
|||
// color: white !important; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// justify-content: center; |
|||
// } |
|||
} |
|||
</style> |
|||
@ -0,0 +1,336 @@ |
|||
<template> |
|||
<div class="EventDetail"> |
|||
<Table :data="tableData" :show-header="false"> |
|||
<ElTableColumn prop="deviceType" width="160"> |
|||
<template slot-scope="scope"> |
|||
<el-select v-model="scope.row.deviceType" placeholder="请选择设备类型" @change="changeDeviceType"> |
|||
<el-option v-for="item in deviceOptions" :key="item.value" :label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</template> |
|||
</ElTableColumn> |
|||
|
|||
<ElTableColumn prop="searchRule" width="230"> |
|||
<template slot-scope="scope"> |
|||
<div class="plhx"> |
|||
<el-select v-model="scope.row.searchRule" placeholder="检索规则条件"> |
|||
<el-option v-for="item in zyOptions" :key="item.value" :label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
<el-input-number v-if="scope.row.searchRule == 2 || scope.row.searchRule == 3" |
|||
v-model="scope.row.number" :min="0" :max="9999" style="width: 130px;"></el-input-number> |
|||
<p v-if="scope.row.searchRule == 2 || scope.row.searchRule == 3">个</p> |
|||
|
|||
<el-input-number v-if="scope.row.searchRule == 4" v-model="scope.row.number" :min="0" |
|||
:max="9999" style="width: 130px;"></el-input-number> |
|||
<p v-if="scope.row.searchRule == 4" style="width: 56px;">公里</p> |
|||
</div> |
|||
|
|||
</template> |
|||
</ElTableColumn> |
|||
|
|||
<ElTableColumn prop="deviceList" width="400"> |
|||
<template slot-scope="scope"> |
|||
<div class="mjs"> |
|||
<el-select v-if="scope.row.searchRule == 1" v-model="scope.row.deviceList" placeholder="请选择设备" |
|||
multiple collapse-tags> |
|||
<el-option v-for="item in sbOptions" :key="item.id" :label="item.deviceName" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
<!-- 情报板 --> |
|||
<el-input @click.native="clickQbb(scope.$index)" v-if="scope.row.deviceType == 2" |
|||
placeholder="请选择" v-model="scope.row.qbb" readonly> |
|||
<i slot="suffix" class="el-input__icon el-icon-search"></i> |
|||
</el-input> |
|||
|
|||
<el-select v-if="scope.row.deviceType == 10" v-model="scope.row.gzms" placeholder="工作模式"> |
|||
<el-option v-for="item in gzmsOptions" :key="item.value" :label="item.label" |
|||
:value="item.value"></el-option> |
|||
</el-select> |
|||
<el-input-number v-if="scope.row.deviceType == 10" placeholder="时长(分钟)" |
|||
v-model="scope.row.operationDuration" :min="0" :max="999"></el-input-number> |
|||
|
|||
<el-select v-if="scope.row.deviceType == 12" v-model="scope.row.controlModel" |
|||
placeholder="请选择模式"> |
|||
<el-option label="手动模式" value="00"></el-option> |
|||
<el-option label="自动模式" value="01"></el-option> |
|||
<el-option label="万年历" value="02"></el-option> |
|||
</el-select> |
|||
<el-time-picker v-if="scope.row.controlModel == '01' && scope.row.deviceType == 12" |
|||
v-model="scope.row.time" is-range style="" range-separator="-" placeholder="选择时间" |
|||
value-format="HH:mm" format="HH:mm"> |
|||
</el-time-picker> |
|||
<el-select v-if="scope.row.deviceType == 12" v-model="scope.row.state" placeholder="工作状态"> |
|||
<el-option v-for="item in gzztOptions" :key="item.value" :label="item.label" |
|||
:value="item.value"></el-option> |
|||
</el-select> |
|||
|
|||
<el-input v-if="scope.row.deviceType == 5" v-model="scope.row.content" |
|||
placeholder="请输入发布内容"></el-input> |
|||
|
|||
</div> |
|||
</template> |
|||
</ElTableColumn> |
|||
|
|||
|
|||
<ElTableColumn label="操作" width="100"> |
|||
<template slot-scope="scope"> |
|||
<ElButton class="elButton" icon="el-icon-plus" plain size="mini" |
|||
@click.native="onAdd(scope.row.id)" /> |
|||
<ElButton class="elButton" icon="el-icon-delete" plain size="mini" |
|||
@click.native="onDel(scope.$index)" /> |
|||
</template> |
|||
</ElTableColumn> |
|||
</Table> |
|||
|
|||
<!-- 情报板弹窗 --> |
|||
<QbbDialog :visible="isShowDialog" :info="qbbData" :type="type" @close="onCloseDialog" |
|||
@dialogSubmit="dialogSubmit" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Table from '@screen/components/Table.vue'; |
|||
import Button from '@screen/components/Buttons/Button.vue'; |
|||
import request from "@/utils/request"; |
|||
import QbbDialog from "../qbbDialog/index.vue"; |
|||
import { Message } from 'element-ui' |
|||
import { planDeviceOptions } from "@screen/utils/enum.js"; |
|||
|
|||
|
|||
export default { |
|||
name: 'formTable', |
|||
components: { |
|||
Button, |
|||
Table, |
|||
QbbDialog |
|||
}, |
|||
// model: { |
|||
// prop: 'visible', |
|||
// event: 'update:value' |
|||
// }, |
|||
inject: ['loadData'], |
|||
props: { |
|||
eventType: Number, |
|||
type: Number, |
|||
tableData: { |
|||
type: Array, |
|||
default: () => [{ |
|||
deviceType: 1, |
|||
searchRule: 1, |
|||
qbb: '' |
|||
}] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// tableData: [ |
|||
// { |
|||
// deviceType: 1, |
|||
// searchRule: 1, |
|||
// qbb: '安全行驶' |
|||
// } |
|||
// ], |
|||
isShowDialog: false, |
|||
deviceOptions: planDeviceOptions, |
|||
zyOptions: [ |
|||
{ |
|||
value: 1, |
|||
label: '指定设备资源' |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: '事发上游最近' |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: '事发下游最近' |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: '最近公里数' |
|||
}, |
|||
], |
|||
gzztOptions: [ |
|||
{ |
|||
value: "01", |
|||
label: "常亮" |
|||
}, |
|||
{ |
|||
value: "02", |
|||
label: "流水" |
|||
}, |
|||
{ |
|||
value: "03", |
|||
label: "闪烁" |
|||
}, |
|||
{ |
|||
value: "04", |
|||
label: "关闭", |
|||
} |
|||
], |
|||
gzmsOptions: [ |
|||
{ |
|||
value: "SETMD0", |
|||
label: "激光关闭" |
|||
}, |
|||
{ |
|||
value: "SETMD1", |
|||
label: "常亮模式" |
|||
}, |
|||
{ |
|||
value: "SETMD2", |
|||
label: "间隔100ms闪烁模式" |
|||
}, |
|||
{ |
|||
value: "SETMD3", |
|||
label: "间隔200ms闪烁模式", |
|||
}, |
|||
{ |
|||
value: "SETMD4", |
|||
label: "间隔500ms闪烁模式", |
|||
}, |
|||
{ |
|||
value: "SETMD5", |
|||
label: "2次闪烁模式" |
|||
}, |
|||
{ |
|||
value: "SETMD6", |
|||
label: "SOS模式" |
|||
}, |
|||
{ |
|||
value: "SETMD7", |
|||
label: "自定义模式1", |
|||
}, |
|||
{ |
|||
value: "SETMD8", |
|||
label: "自定义模式2", |
|||
}, |
|||
{ |
|||
value: "SETMD9", |
|||
label: "自定义模式3", |
|||
} |
|||
], |
|||
qbbData: {}, |
|||
sbOptions: [], |
|||
deviceType: 1, |
|||
index: 1 |
|||
} |
|||
}, |
|||
async created() { |
|||
let loadData = await this.loadData(1); |
|||
// console.log('aa',loadData) |
|||
this.sbOptions = loadData; |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
// request({ |
|||
// url: `business/device/query?deviceType=2`, |
|||
// method: "get", |
|||
// }).then((result) => { |
|||
// if (result.code != 200) return Message.error(result?.msg); |
|||
// this.sbOptions = result.data; |
|||
|
|||
// }).catch(() => { |
|||
// Message.error("查询可变信息标识失败"); |
|||
// }) |
|||
|
|||
}, |
|||
async changeDeviceType(value) { |
|||
this.deviceType = value; |
|||
console.log('value', value) |
|||
this.sbOptions = await this.loadData(value); |
|||
}, |
|||
onAdd(id) { |
|||
this.tableData.push({ |
|||
deviceType: 1, |
|||
searchRule: 1, |
|||
qbb: '' |
|||
}) |
|||
}, |
|||
onDel(index) { |
|||
if (this.tableData.length <= 1) { |
|||
return Message.warning('最后一项不可删除！'); |
|||
} |
|||
this.tableData.splice(index, 1) |
|||
}, |
|||
clickQbb(index) { |
|||
this.index = index; |
|||
// this.qbbData = this.tableData[index].dcInfoBoardTemplate; |
|||
console.log('this.type', this.type) |
|||
this.isShowDialog = true; |
|||
}, |
|||
onCloseDialog() { |
|||
this.isShowDialog = false; |
|||
}, |
|||
dialogSubmit(data) { |
|||
this.tableData[this.index].qbb = data.content; |
|||
this.tableData[this.index].otherConfig = JSON.stringify(data); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.EventDetail { |
|||
display: flex; |
|||
gap: 9px; |
|||
width: 100%; |
|||
// height: 768px; |
|||
min-height: 50px; |
|||
margin-top: 5px; |
|||
flex-direction: column; |
|||
|
|||
::v-deep { |
|||
.el-table .el-table__cell { |
|||
padding: 0 5px; |
|||
} |
|||
} |
|||
|
|||
.mjs { |
|||
display: flex; |
|||
|
|||
>div { |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.ms { |
|||
width: 160px; |
|||
} |
|||
|
|||
.plhx { |
|||
display: flex; |
|||
} |
|||
|
|||
::v-deep { |
|||
.el-tag.el-tag--info { |
|||
max-width: 100px; |
|||
} |
|||
|
|||
.el-range-editor--medium .el-range__icon, |
|||
.el-range-editor--medium .el-range__close-icon { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.elButton { |
|||
background: #2ba8c3; |
|||
border-radius: 2px 2px 2px 2px; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.elButton:hover, |
|||
.elButton:focus { |
|||
background: #2ba8c3; |
|||
border-radius: 2px 2px 2px 2px; |
|||
border-color: #FFFFFF; |
|||
color: #FFFFFF; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,406 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="事件详情" width="890px" top="11%"> |
|||
<div class="EventDetail" :style="{ |
|||
height: activeName == '-1' || activeName == '0' ? '380px' : '698px', |
|||
}"> |
|||
<Form ref="FormConfigRef" :formList="formList" :dFormData="formData" label-width="100px" /> |
|||
|
|||
<div class="video-pic" :style="{ |
|||
height: formData.component === 'VideoMulti' ? '242px' : undefined, |
|||
}"> |
|||
<component :is="formData.component" v-if="activeName != '-1'" style="height: 100%; width: 380px" |
|||
:showHeader="false" :url="formData.videoList && formData.videoList.length > 0 |
|||
? formData.videoList[0] |
|||
: '' |
|||
" :camId="formData.upCamId" :pileNum="formData.stakeMark" rangeIndex="upCamera" :videoType="formData.videoType" /> |
|||
|
|||
<component :is="formData.component" v-if="activeName != '-1'" style="height: 100%; width: 380px" |
|||
:showHeader="false" :url="formData.videoList && formData.videoList.length > 0 |
|||
? formData.videoList[1] |
|||
: '' |
|||
" :camId="formData.downCamId" :pileNum="formData.stakeMark" rangeIndex="downCamera" |
|||
:videoType="formData.videoType" /> |
|||
|
|||
<Carousel v-if="activeName == '-1'" style="flex: 1" :videos="formData.videoList" :pictures="[]" /> |
|||
<Carousel v-if="activeName == '-1'" style="flex: 1" :pictures="formData.pictures" :videos="[]" /> |
|||
</div> |
|||
<!-- <div>{{ formData.videoList[0] }}</div> --> |
|||
<TimeLine1 v-if="activeName == '1' || activeName == '2'" :data="timeLine1List" /> |
|||
<TimeLine2 v-if="activeName == '1' || activeName == '2'" :data="timeLine2List" style="flex: 1" /> |
|||
</div> |
|||
|
|||
<!-- 确认弹窗 --> |
|||
<EventPlanDialog :visible="isShowDialog" :info="info" :eventFormData="formData" :activeName="activeName" |
|||
@reInitData="() => { |
|||
this.$emit('update:value', false); |
|||
this.$emit('queryData', true); |
|||
} |
|||
" @close="onCloseAddNew" /> |
|||
|
|||
<template #footer> |
|||
<Button v-if="activeName == '-1' || activeName == '0'" style="padding: 0 24px" |
|||
@click.native="onDelete">误报</Button> |
|||
<Button :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }" |
|||
@click.native="modelVisible = false">取消</Button> |
|||
<Button v-if="activeName == '-1' || activeName == '0'" style="padding: 0 24px" |
|||
@click.native="onSubmit">确认</Button> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import TimeLine1 from "@screen/components/TimeLine/TimeLine1/index"; |
|||
import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index"; |
|||
import Form from "@screen/components/FormConfig"; |
|||
import { _formList } from "./data"; |
|||
// import { timeLine2List } from "@screen/pages/control/event/commandDispatch/Cards/DisposalProcess/data.js" |
|||
import Video from "@screen/components/Video"; |
|||
import VideoMulti from "@screen/components/VideoMulti"; |
|||
import Carousel from "./Carousel/index.vue"; |
|||
import EventPlanDialog from "./eventPlanDialog/index.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue"; |
|||
import request from "@/utils/request"; |
|||
import { Message } from "element-ui"; |
|||
var moment = require("moment"); |
|||
import { |
|||
getProcessNode, |
|||
getProcessList, |
|||
postProcess, |
|||
postCompleteEvent, |
|||
postNoSkipClear, |
|||
} from "@/api/commandDispatch"; |
|||
|
|||
export default { |
|||
name: "EventDetail", |
|||
components: { |
|||
Dialog, |
|||
Form, |
|||
TimeLine1, |
|||
TimeLine2, |
|||
Video, |
|||
VideoMulti, |
|||
Carousel, |
|||
Button, |
|||
EventPlanDialog, |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "update:value", |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
activeName: String, |
|||
formData: { |
|||
type: Object, |
|||
default: () => { }, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
formList:[..._formList], |
|||
isShowDialog: false, |
|||
info: [], |
|||
timeLine1List: [ |
|||
{ |
|||
time: "", |
|||
label: "", |
|||
isActive: false, |
|||
}, |
|||
], |
|||
timeLine2List: [ |
|||
{ |
|||
time: "", |
|||
name: "", |
|||
desc: "", |
|||
posts: "", |
|||
direction: "left", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
if (this.visible) { |
|||
this.getProcess(); |
|||
} |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
console.log(111) |
|||
this.formList = [..._formList] |
|||
this.$emit("update:value", val); |
|||
}, |
|||
}, |
|||
}, |
|||
methods: { |
|||
getProcess() { |
|||
if (this.activeName == "-1" || this.activeName == "0") { |
|||
this.timeLine1List = []; |
|||
this.timeLine2List = []; |
|||
return; |
|||
} |
|||
|
|||
let directionFlg = true; |
|||
getProcessList(this.formData.id).then((rows) => { |
|||
console.log('rows', rows) |
|||
// 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 && row.processType === 1); |
|||
|
|||
if (process) { |
|||
this.timeLine1List.push({ |
|||
time: moment(process.operationTime || new Date()).format("HH:mm"), |
|||
label: it.processNode, |
|||
isActive: true, |
|||
}); |
|||
directionFlg = !directionFlg; |
|||
} else { |
|||
this.timeLine1List.push({ |
|||
time: "", |
|||
label: it.processNode, |
|||
isActive: false, |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
rows.forEach(item =>{ |
|||
this.timeLine2List.push({ |
|||
time: moment(item.operationTime || new Date()).format( |
|||
"yyyy-MM-DD HH:mm:ss" |
|||
), |
|||
name: item.operatorName, |
|||
desc: item.context, |
|||
source: item.source, |
|||
posts: "", |
|||
direction: item.source == 1 ? "right" : "left", |
|||
}); |
|||
}) |
|||
|
|||
}); |
|||
}, |
|||
getProcessNode() { |
|||
return request({ |
|||
url: |
|||
`/dc/system/event/getProcessNode/${this.formData.id}`, |
|||
method: "GET", |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return []; |
|||
// this.timeLine1List = result.data.map((item) => { |
|||
// return { |
|||
// time: item.operationTime, |
|||
// label: item.processNode, |
|||
// isActive: item.status == 1 ? true : false, |
|||
// }; |
|||
// }); |
|||
// this.options = result.data.filter((item) => { |
|||
// item.status == 0; |
|||
// return item; |
|||
// }); |
|||
}) |
|||
.catch((err) => []); |
|||
}, |
|||
onCloseAddNew() { |
|||
this.isShowDialog = false; |
|||
}, |
|||
onDelete() { |
|||
if(this.formList[this.formList.length-1].key !== 'relieveReason' ){ |
|||
this.formList.push({ |
|||
label: "解除类型:", |
|||
key: "relieveType", |
|||
type: "RadioGroup", |
|||
isAlone: true, |
|||
required: true, |
|||
options: { |
|||
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
|||
options: [ |
|||
{ |
|||
key: "1", |
|||
label: "误报解除", |
|||
}, |
|||
{ |
|||
key: "2", |
|||
label: "事件已结束", |
|||
}, |
|||
{ |
|||
key: "3", |
|||
label: "无需处理事件", |
|||
}, |
|||
{ |
|||
key: "4", |
|||
label: "其它", |
|||
} |
|||
], |
|||
}, |
|||
}) |
|||
this.formList.push({ |
|||
label: "解除原因:", // 标题 |
|||
key: "relieveReason", //数据存储字段 |
|||
isAlone: true, // 单独一行 |
|||
type: "input", //组件类型(el-input 去掉el-即可) 不填默认为input |
|||
options: { //element原生formItem属性 |
|||
type: "textarea", |
|||
autosize: true, |
|||
maxlength: 200, |
|||
autosize: { minRows: 3, maxRows: 3 }, |
|||
showWordLimit: true, |
|||
} |
|||
}) |
|||
} else { |
|||
this.$refs.FormConfigRef.validate() |
|||
.then((result) => { |
|||
request({ |
|||
url: `/business/warning/falseAlarm`, |
|||
method: "post", |
|||
data: { |
|||
id: this.formData.id, |
|||
relieveType: result.relieveType, |
|||
relieveReason: result.relieveReason |
|||
}, |
|||
}).then((result) => { |
|||
if (result.code == 200) Message.success("成功！"); |
|||
else Message.error(result?.msg); |
|||
this.modelVisible = false; |
|||
this.$emit("queryData", true); |
|||
//触发全局监听事件 |
|||
this.$root.$emit('delete-event'); |
|||
}); |
|||
}) |
|||
.catch((err) => { |
|||
}); |
|||
} |
|||
|
|||
// 2024-05-18 修改为二次确认，增加误报类型和误报原因 |
|||
// if (this.formData.id) { |
|||
// this.$confirm("确定误报吗？", "提示", { |
|||
// confirmButtonText: "确定", |
|||
// cancelButtonText: "取消", |
|||
// type: "warning", |
|||
// }).then(() => { |
|||
// if (this.activeName == "-1") { |
|||
// request({ |
|||
// url: `/business/warning/delete`, |
|||
// method: "post", |
|||
// data: { id: this.formData.id }, |
|||
// }).then((result) => { |
|||
// if (result.code == 200) Message.success("成功！"); |
|||
// else Message.error(result?.msg); |
|||
// this.modelVisible = false; |
|||
// this.$emit("queryData", true); |
|||
// //触发全局监听事件 |
|||
// this.$root.$emit('delete-event'); |
|||
// }); |
|||
// } else { |
|||
// request({ |
|||
// url: `dc/system/event/${this.formData.id}`, |
|||
// method: "delete", |
|||
// }).then((result) => { |
|||
// if (result.code == 200) Message.success("成功！"); |
|||
// else Message.error(result?.msg); |
|||
// this.modelVisible = false; |
|||
// this.$emit("queryData", true); |
|||
// //触发全局监听事件 |
|||
// this.$root.$emit('delete-event'); |
|||
// }); |
|||
// } |
|||
// }); |
|||
// } |
|||
}, |
|||
onSubmit() { |
|||
// let url = "/business/plans/list/warning/type"; |
|||
// if (this.activeName == "-1") { |
|||
// url = "/business/plans/list/warning/type"; |
|||
// } else { |
|||
// url = "/business/plans/list/event/type"; |
|||
// } |
|||
// request({ |
|||
// url: url, |
|||
// method: "post", |
|||
// data: this.formData, |
|||
// }).then((result) => { |
|||
// if (result.code != 200) return Message.error(result?.msg); |
|||
// this.info = result.data; |
|||
// this.isShowDialog = true; |
|||
// }); |
|||
|
|||
let reData = { |
|||
id: this.formData.id, |
|||
stakeMark: this.formData.stakeMark, |
|||
direction: this.formData.direction == '济南方向' ? 3 : 1, |
|||
warningType: this.formData.warningType, |
|||
warningSource: this.formData.warningSource, |
|||
deptId: this.formData.deptId, |
|||
warningTime: this.formData.warningTime, |
|||
warningLevel: this.formData.warningLevel, |
|||
warningSubclass: this.formData.warningSubclass, |
|||
warningTitle: this.formData.warningTitle, |
|||
lane: this.formData.lane, |
|||
remark: this.formData.remark, |
|||
} |
|||
if (this.activeName == '-1') { |
|||
request({ |
|||
url: '/business/warning/updateWarningConvert', |
|||
method: "post", |
|||
data: reData, |
|||
}).then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
else Message.success("成功！"); |
|||
|
|||
this.modelVisible = false; |
|||
this.$emit("queryData", true); |
|||
}); |
|||
} else if (this.activeName == '0') { |
|||
request({ |
|||
url: `/dc/system/event/dcEventState/${this.formData.id}/1`, |
|||
method: "put", |
|||
data: reData, |
|||
}).then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
else Message.success("成功！"); |
|||
|
|||
this.modelVisible = false; |
|||
this.$emit("queryData", true); |
|||
}); |
|||
} else { |
|||
let eventId = this.formData.id; |
|||
this.modelVisible = false; |
|||
|
|||
setTimeout(() => { |
|||
this.$router.push(`/control/event/commandDispatch?eventId=${eventId}`); |
|||
// this.$router.push(`/control/event/commandDispatch`); |
|||
}) |
|||
|
|||
} |
|||
|
|||
}, |
|||
reInitData() { |
|||
console.log("reInitData"); |
|||
this.$emit("update:value", false); |
|||
this.$emit("queryData", true); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.EventDetail { |
|||
display: flex; |
|||
gap: 9px; |
|||
width: 836px; |
|||
// height: 768px; |
|||
flex-direction: column; |
|||
|
|||
.video-pic { |
|||
display: flex; |
|||
height: 190px; |
|||
gap: 15px; |
|||
justify-content: space-around; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,381 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
|
|||
<Dialog v-model="modelVisible" title="情报板确认"> |
|||
<div v-if="type == 1" class="EventAddPlanDialog"> |
|||
<h4>预案内容</h4> |
|||
<dev class="listBox disPid"> |
|||
<div class="tplItem"> |
|||
<BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="automaticData"></BoardTplPreview> |
|||
<div class="infoBtnBox infoBtnBoxSm"> |
|||
<p class="btn"> |
|||
<el-radio v-model="radio1" :label="1" @input="changeRadio(automaticData)" /> |
|||
</p> |
|||
<!-- <p @click="____onEditTemplate(automaticData)" class="btn btnEdit" /> --> |
|||
</div> |
|||
</div> |
|||
</dev> |
|||
<h4>自动生成</h4> |
|||
<dev class="listBox disPid"> |
|||
<div class="tplItem"> |
|||
<BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="automaticData"></BoardTplPreview> |
|||
<div class="infoBtnBox infoBtnBoxSm"> |
|||
<p class="btn"> |
|||
<el-radio v-model="radio1" :label="2" @input="changeRadio(automaticData)" /> |
|||
</p> |
|||
<!-- <p @click="____onEditTemplate(automaticData)" class="btn btnEdit" /> --> |
|||
</div> |
|||
</div> |
|||
</dev> |
|||
<h4>情报板模版</h4> |
|||
<vuescroll :ops="scrollOptions" class="listBox"> |
|||
<div v-for="(item) in templateAvailable" :key="item.dictValue"> |
|||
<h5>{{ item.dictLabel }}</h5> |
|||
<div v-for="(itm, indx) in item.list" :key="indx" class="tplItem"> |
|||
<BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="itm"></BoardTplPreview> |
|||
<div class="infoBtnBox infoBtnBoxSm"> |
|||
<!-- <p class="btn"> |
|||
<el-radio v-model="radio1" :label="itm.id" @input="changeRadio(itm)" /> |
|||
</p> --> |
|||
<p @click="____onEditTemplate(itm)" class="btn btnEdit" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</vuescroll> |
|||
</div> |
|||
<div v-if="type == 2" class="EventAddPlanDialog"> |
|||
<div v-for="(item, index) in Object.keys(originalData)" :key="index"> |
|||
<h4>{{ item }}</h4> |
|||
<dev class="listBox disPid"> |
|||
<div v-for="(it, idx) in originalData[item]" :key="idx" class="tplItem"> |
|||
<BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="it"></BoardTplPreview> |
|||
</div> |
|||
</dev> |
|||
</div> |
|||
|
|||
</div> |
|||
<template #footer v-if="type == 1"> |
|||
<Button style="background: #C9C9C9;padding:0 24px;" |
|||
@click.native="modelVisible = false, submitting = false">取消</Button> |
|||
<Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">确认</Button> |
|||
</template> |
|||
</Dialog> |
|||
|
|||
<BoardInfoEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type" |
|||
:visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></BoardInfoEditor> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import vuescroll from "vuescroll"; |
|||
import scrollOptions from "@/common/scrollbar.js"; |
|||
import BoardTplPreview from "@screen/components/infoBoard/BoardTplPreview.vue"; |
|||
import BoardInfoEditor from "@screen/components/infoBoard/BoardInfoEditor"; |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import Button from '@screen/components/Buttons/Button.vue'; |
|||
import { getTemplateList } from "@/api/board/template"; |
|||
|
|||
export default { |
|||
name: 'qbbDialog', |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
vuescroll, |
|||
BoardTplPreview, |
|||
BoardInfoEditor |
|||
}, |
|||
model: { |
|||
prop: 'visible', |
|||
event: 'close' |
|||
}, |
|||
inject: ['getAutomatic', 'getOriginal'], |
|||
props: { |
|||
visible: Boolean, |
|||
type: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
info: { |
|||
type: Object, |
|||
default: () => { } |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
submitting: false, |
|||
selectedSize: "", |
|||
scrollOptions, |
|||
templateAvailable: null, |
|||
tplCategory: [], |
|||
templateAll: [], |
|||
radio1: '', |
|||
itmData: {}, |
|||
automaticData: {}, |
|||
originalData: {}, |
|||
editDialog: { |
|||
mode: "", |
|||
type: "", |
|||
visible: false, |
|||
tpl: {}, |
|||
}, |
|||
} |
|||
}, |
|||
mounted() { |
|||
if (this.type == 1) { |
|||
this.initData(); |
|||
} else if (this.type == 2) { |
|||
this.getBoardOriginal(); |
|||
} |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
// if (this.visible2) { |
|||
// if (this.info && this.info.id) { |
|||
// this.radio1 = Number(this.info.id); |
|||
// } |
|||
// console.log('123', this.getTemplateAutomatic()); |
|||
// } |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit('close', val) |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
if (this.tplCategory.length && this.templateAll.length) { |
|||
this.____setAvailableTemplate(); |
|||
} else { |
|||
Promise.all([ |
|||
this.____getTemplateCategory(), |
|||
this.____getAllTemplate(), |
|||
]).then((res) => { |
|||
this.____setAvailableTemplate(); |
|||
}); |
|||
this.getTemplateAutomatic(); |
|||
} |
|||
|
|||
}, |
|||
// 获取信息模板分类 |
|||
____getTemplateCategory() { |
|||
return this.getDicts("iot_template_category").then((res) => { |
|||
this.tplCategory = res.data; |
|||
}); |
|||
}, |
|||
//获取全部模版 |
|||
____getAllTemplate() { |
|||
return getTemplateList().then((res) => { |
|||
this.templateAll = res.data; |
|||
}); |
|||
}, |
|||
// 设置当前设备可用的模板 |
|||
____setAvailableTemplate() { |
|||
this.templateAvailable = []; |
|||
this.tplCategory.forEach((item, index) => { |
|||
let arr = this.templateAll["" + index]; |
|||
if (arr.length > 0) { |
|||
let temp = []; |
|||
arr.forEach((tpl) => { |
|||
if (tpl.screenSize) { |
|||
temp.push(tpl); |
|||
} |
|||
}); |
|||
if (temp.length > 0) { |
|||
this.templateAvailable.push({ |
|||
...item, |
|||
list: temp, |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
____onEditTemplate(tpl) { |
|||
this.editDialog = { |
|||
visible: true, |
|||
mode: "edit", |
|||
type: "template", |
|||
tpl, |
|||
}; |
|||
}, |
|||
//提交之后的回调 |
|||
____onEditSubmit(para) { |
|||
this.editDialog.tpl = {}; |
|||
this.editDialog.visible = false; |
|||
|
|||
if (para.type == "device") { |
|||
if (para.mode == "edit") { |
|||
this.selectedBdMsg[this.boardItemEdtingIndex] = para.data; |
|||
} else { |
|||
this.selectedBdMsg.push(_.cloneDeep(para.data)); |
|||
} |
|||
} else if (para.mode == "toDevice") { |
|||
this.selectedBdMsg.push(_.cloneDeep(para.data)); |
|||
} else { |
|||
this.____refreshPageData(para); |
|||
} |
|||
}, |
|||
____refreshPageData(para) { |
|||
if (para.type == "template") { |
|||
this.____getAllTemplate().then((res) => { |
|||
this.____setAvailableTemplate(); |
|||
}); |
|||
} else { |
|||
} |
|||
}, |
|||
async getTemplateAutomatic() { |
|||
let data = await this.getAutomatic(); |
|||
console.log('dataaaa', data); |
|||
this.automaticData = data; |
|||
}, |
|||
async getBoardOriginal() { |
|||
let data = await this.getOriginal(); |
|||
console.log('datbbbbb', data); |
|||
this.originalData = data; |
|||
}, |
|||
changeRadio(data) { |
|||
this.itmData = data; |
|||
}, |
|||
handleSubmit() { |
|||
this.modelVisible = false; |
|||
this.$emit('dialogSubmit', this.itmData); |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.listBox { |
|||
padding: 20px; |
|||
|
|||
.tplItem { |
|||
margin-right: 14px; |
|||
display: flex; |
|||
align-items: stretch; |
|||
padding-bottom: 10px; |
|||
|
|||
.boardPreview { |
|||
border: 1px solid rgba(61, 232, 255, 0.5); |
|||
// width: 560px; |
|||
// height:80px; |
|||
flex: 1; |
|||
} |
|||
|
|||
.infoBtnBox { |
|||
&.infoBtnBoxSm { |
|||
width: 60px; |
|||
} |
|||
|
|||
width: 110px; |
|||
height: 80px; |
|||
display: flex; |
|||
margin-left: 10px; |
|||
/* // border: solid 1px #05afe3; */ |
|||
border: 1px solid rgba(61, 232, 255, 0.5); |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
|
|||
.btn { |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
width: 15px; |
|||
height: 30px; |
|||
|
|||
&.btnApply { |
|||
background-image: url(~@/assets/jihe/images/button/toLeft.svg); |
|||
} |
|||
|
|||
&.btnEdit { |
|||
background-image: url(~@/assets/jihe/images/button/edit.svg); |
|||
} |
|||
|
|||
&.btnDelete { |
|||
background-image: url(~@/assets/jihe/images/button/delete.svg); |
|||
} |
|||
} |
|||
|
|||
i { |
|||
font-size: 24px; |
|||
color: #666; |
|||
padding-left: 4px; |
|||
cursor: pointer; |
|||
caret-color: rgba(0, 0, 0, 0); |
|||
user-select: none; |
|||
} |
|||
|
|||
i:hover { |
|||
color: #05afe3; |
|||
} |
|||
|
|||
.disabledClass { |
|||
pointer-events: none; |
|||
cursor: auto !important; |
|||
color: #ccc; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.controlBox { |
|||
margin-top: 10px; |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.el-collapse { |
|||
max-height: 100% !important; |
|||
overflow: auto; |
|||
border-bottom: none; |
|||
border-top: none; |
|||
padding: 0 0.5vw; |
|||
} |
|||
} |
|||
|
|||
.disPid { |
|||
padding: 0 20px !important; |
|||
} |
|||
|
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity .24s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-to { |
|||
opacity: 0; |
|||
} |
|||
|
|||
.EventAddPlanDialog { |
|||
gap: 9px; |
|||
width: 650px; |
|||
height: 700px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
h4 { |
|||
margin: 0 0 5px 0; |
|||
} |
|||
|
|||
::v-deep { |
|||
.el-radio__label { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
.form { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
justify-content: end; |
|||
gap: 15px; |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,258 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="交通事故录入" width="1100px" top="14%"> |
|||
<div class="EventDetailDialog"> |
|||
<ElTabs v-model="activeName" @tab-click="handleChange"> |
|||
<ElTabPane v-for="(item, index) in tabConfigList" :key="index" :label="item.label" :name="item.key" /> |
|||
</ElTabs> |
|||
|
|||
<Transition name="fade"> |
|||
<Form class="form" ref="FormConfigRef" :formList="formConfig.list" v-bind="getFormOptions" labelWidth="120px" /> |
|||
</Transition> |
|||
</div> |
|||
|
|||
<template #footer> |
|||
<Button style="background: #c9c9c9; padding: 0 24px" |
|||
@click.native="(modelVisible = false), (submitting = false)">取消</Button> |
|||
<Button style="padding: 0 24px" @click.native="handleSubmit" :loading="submitting">保存</Button> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import Form from "@screen/components/FormConfig"; |
|||
import Button from "@screen/components/Buttons/Button.vue"; |
|||
import request from "@/utils/request"; |
|||
import { Message } from "element-ui"; |
|||
|
|||
import { tabConfigList } from "./data.js"; |
|||
|
|||
export default { |
|||
name: "EventDetailDialog", |
|||
components: { |
|||
Dialog, |
|||
Form, |
|||
Button, |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "close", |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
}, |
|||
data() { |
|||
return { |
|||
activeName: "TrafficAccident", |
|||
submitting: false, |
|||
formConfig: {}, |
|||
tabConfigList, |
|||
index: 1, |
|||
roads: [], |
|||
direction: [], |
|||
lwss: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
// this.formConfig = tabConfigList[0].formConfig; |
|||
this.initData().then(() => { |
|||
this.handleChange({ index: 0 }); |
|||
}); |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit("close", val); |
|||
}, |
|||
}, |
|||
getFormOptions() { |
|||
return { |
|||
column: 3, |
|||
...this.formConfig.formOptions, |
|||
}; |
|||
}, |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
return Promise.all([ |
|||
//道路 |
|||
request({ |
|||
url: `/business/road/query`, |
|||
method: "get", |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
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); |
|||
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); |
|||
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); |
|||
}), |
|||
]); |
|||
}, |
|||
handleChange({ index }) { |
|||
// console.log('index',index) |
|||
this.index = index; |
|||
let formConfig = tabConfigList[index].formConfig; |
|||
console.log("formConfig", formConfig); |
|||
formConfig.list.forEach((it) => { |
|||
if (it.key == "direction") { |
|||
it.options.options = this.direction; |
|||
} |
|||
if (it.key == "roadId") { |
|||
it.options.options = this.roads; |
|||
} |
|||
if (index == 7 && it.key == "dcEventServiceArea.facilityId") { |
|||
it.options.options = this.lwss.filter((ss) => ss.type == 6); |
|||
} |
|||
// if (index == 0 || index == 1 || index == 7) { |
|||
// if (it.key === 'dcEventAccident.facilityId' || it.key === 'dcEventVehicleAccident.facilityId' || it.key === 'dcEventServiceArea.facilityId') { |
|||
// it.options.options = this.lwss.filter(ss => ss.type == 6); |
|||
// } |
|||
// } |
|||
}); |
|||
|
|||
this.formConfig = formConfig; |
|||
}, |
|||
handleSubmit() { |
|||
// return |
|||
this.$refs.FormConfigRef.validate().then((formData) => { |
|||
this.submitting = true; |
|||
|
|||
if (this.index == 0 || this.index == 1) { |
|||
formData.lang = formData.lang.join(","); |
|||
} else { |
|||
formData.lang = ""; |
|||
} |
|||
if (this.index == 2 && formData.dcEventTrafficControl.facilityId instanceof Array) { |
|||
let ids = formData.dcEventTrafficControl.facilityId; |
|||
formData.dcEventTrafficControl.facilityIds = ids |
|||
formData.dcEventTrafficControl.facilityId = '' |
|||
} |
|||
if (formData.endStakeMark && formData.endStakeMark[0] != null) { |
|||
let endStakeMark = formData.endStakeMark; |
|||
let strMark = endStakeMark && endStakeMark.length > 0 ? "K" + endStakeMark[0] + "+" + endStakeMark[1] : ""; |
|||
if (this.index == 3) { |
|||
formData.dcEventTrafficCongestion.endStakeMark = strMark; |
|||
} |
|||
if (this.index == 6) { |
|||
formData.dcEventConstruction.endStakeMark = strMark; |
|||
} |
|||
if (this.index == 9) { |
|||
formData.dcEventAbnormalWeather.endStakeMark = strMark; |
|||
} |
|||
formData.endStakeMark = ""; |
|||
} else { |
|||
formData.endStakeMark = ""; |
|||
} |
|||
let stakeMark = formData.stakeMark; |
|||
// console.log('formData', { |
|||
// ...formData, |
|||
// eventType: Number(this.index) + 1, |
|||
// stakeMark: (stakeMark && stakeMark[0] != null) ? ((stakeMark && stakeMark.length > 0) ? ('K' + stakeMark[0] + '+' + stakeMark[1]) : '') : '', |
|||
// }) |
|||
// this.modelVisible = false; |
|||
// this.submitting = false; |
|||
// this.$emit('queryData',true) |
|||
// return; |
|||
|
|||
request({ |
|||
url: `/dc/system/event`, |
|||
method: "post", |
|||
data: { |
|||
...formData, |
|||
eventType: Number(this.index) + 1, |
|||
eventState: 0, |
|||
stakeMark: |
|||
stakeMark && stakeMark[0] != null |
|||
? stakeMark && stakeMark.length > 0 |
|||
? "K" + stakeMark[0] + "+" + stakeMark[1] |
|||
: "" |
|||
: "", |
|||
}, |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
Message.success("提交成功"); |
|||
this.modelVisible = false; |
|||
}) |
|||
.catch(() => { |
|||
Message.error("提交失败"); |
|||
}) |
|||
.finally(() => { |
|||
this.submitting = false; |
|||
this.$emit("queryData", true); |
|||
}); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.24s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-to { |
|||
opacity: 0; |
|||
} |
|||
|
|||
.EventDetailDialog { |
|||
gap: 9px; |
|||
width: 1050px; |
|||
// height: 810px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.form { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
justify-content: end; |
|||
gap: 15px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,226 @@ |
|||
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
|||
import { merge, cloneDeep } from "lodash"; |
|||
|
|||
const station = { |
|||
label: "桩号:", |
|||
key: "stakeMark", |
|||
required: true, |
|||
type: "MultipleLabelItem", |
|||
options: { |
|||
options: [ |
|||
{ |
|||
prefix: { |
|||
text: "K", |
|||
style: { |
|||
color: "#3DE8FF", |
|||
}, |
|||
}, |
|||
key: "stakeMark[0]", |
|||
}, |
|||
{ |
|||
prefix: { |
|||
text: "+", |
|||
style: { |
|||
color: "#3DE8FF", |
|||
}, |
|||
}, |
|||
key: "stakeMark[1]", |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export const tabMap = { |
|||
"1": { |
|||
state: 21, |
|||
textColor: "#007FF4", |
|||
text: "上报", |
|||
}, |
|||
"2": { |
|||
state: 22, |
|||
textColor: "#007FF4", |
|||
text: "已完成", |
|||
}, |
|||
"3": { |
|||
state: 23, |
|||
textColor: "#007FF4", |
|||
text: "已终止", |
|||
}, |
|||
"4": { |
|||
state: 24, |
|||
textColor: "#007FF4", |
|||
text: "自动结束", |
|||
}, |
|||
}; |
|||
export const searchFormList = [ |
|||
{ |
|||
label: "事件状态:", |
|||
key: "warningState", |
|||
type: "select", |
|||
options: { |
|||
clearable: true, |
|||
options: [ |
|||
{ |
|||
value: 1, |
|||
label: "上报", |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: "已完成", |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: "已终止", |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: "自动结束", |
|||
} |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件来源:", |
|||
key: "warningSource", |
|||
type: "select", |
|||
options: { |
|||
clearable: true, |
|||
options: [ |
|||
{ |
|||
key: "1", |
|||
label: "视频AI", |
|||
}, |
|||
{ |
|||
key: "2", |
|||
label: "雷达识别", |
|||
}, |
|||
{ |
|||
key: "3", |
|||
label: "锥桶", |
|||
}, |
|||
{ |
|||
key: "4", |
|||
label: "护栏碰撞", |
|||
}, |
|||
{ |
|||
key: "5", |
|||
label: "扫码报警", |
|||
}, |
|||
// {
|
|||
// key: "6",
|
|||
// label: "非机预警",
|
|||
// },
|
|||
{ |
|||
key: "7", |
|||
label: "气象监测器", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "方向:", |
|||
key: "direction", |
|||
type: "RadioGroup", |
|||
options: { |
|||
options: [ |
|||
{ |
|||
key: "1", |
|||
label: "菏泽方向", |
|||
}, |
|||
{ |
|||
key: "3", |
|||
label: "济南方向", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件主类:", |
|||
key: "warningType", |
|||
type: "select", |
|||
options: { |
|||
clearable: true, |
|||
options: [ |
|||
{ |
|||
value: 1, |
|||
label: "交通拥堵", |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: "行人", |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: "非机动车", |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: "停车", |
|||
}, |
|||
{ |
|||
value: 5, |
|||
label: "违规驾驶", |
|||
}, |
|||
{ |
|||
value: 6, |
|||
label: "路障", |
|||
}, |
|||
{ |
|||
value: 7, |
|||
label: "道路施工", |
|||
}, |
|||
{ |
|||
value: 8, |
|||
label: "异常天气", |
|||
}, |
|||
{ |
|||
value: 9, |
|||
label: "护栏碰撞", |
|||
}, |
|||
{ |
|||
value: 10, |
|||
label: "交通事故", |
|||
}, |
|||
{ |
|||
value: 11, |
|||
label: "车辆故障", |
|||
}, |
|||
{ |
|||
value: 99, |
|||
label: "其他事件", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "时间范围:", |
|||
key: "daterange", |
|||
required: false, |
|||
type: "datePicker", |
|||
options: { |
|||
style: "width: auto", |
|||
type: "datetimerange", |
|||
format: "yyyy-MM-dd HH:mm:ss", |
|||
valueFormat: "yyyy-MM-dd HH:mm:ss", |
|||
}, |
|||
}, |
|||
{ |
|||
...station, |
|||
label: "开始桩号:", |
|||
required: false, |
|||
}, |
|||
merge(cloneDeep(station), { |
|||
options: { |
|||
options: [ |
|||
{ |
|||
key: "endStakeMark[0]", |
|||
}, |
|||
{ |
|||
key: "endStakeMark[1]", |
|||
}, |
|||
], |
|||
}, |
|||
label: "结束桩号:", |
|||
required: false, |
|||
}), |
|||
]; |
|||
|
After Width: | Height: | Size: 624 B |
|
After Width: | Height: | Size: 385 B |
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,321 @@ |
|||
<template> |
|||
<div class="RoadNetworkMonitoring2"> |
|||
<!-- 搜索栏 --> |
|||
<div class="filter"> |
|||
<div> |
|||
<ButtonGradient @click="onExport"> |
|||
|
|||
<template #prefix> |
|||
<img src="./images/export.svg" /> |
|||
</template> |
|||
导出 |
|||
</ButtonGradient> |
|||
<ButtonGradient @click="onRefresh"> |
|||
|
|||
<template #prefix> |
|||
<img src="./images/refresh.svg" /> |
|||
</template> |
|||
刷新 |
|||
</ButtonGradient> |
|||
</div> |
|||
<InputSearch ref="searchComp" style="width: 402px" :formList="searchFormList" @handleSearch="handleSearch" /> |
|||
</div> |
|||
|
|||
<!-- 内容 --> |
|||
<div class="body" v-loading> |
|||
<RoadStateCard v-for="(item, index) in data" :key="index" v-bind="getStateCardBind(item)" |
|||
@firstBtnClick="firstBtnClick" @lastBtnClick="onLastBtnClick" /> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="footer"> |
|||
<Pagination @current-change="getData" @size-change="onSizeChange" width="'100%'" |
|||
:page-sizes="[12, 16, 20, 30, 50]" :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum" |
|||
layout="total, sizes, prev, pager, next" :total="total"> |
|||
</Pagination> |
|||
</div> |
|||
|
|||
<!-- "详情"弹出框 --> |
|||
<!-- <EventDetailDialog :visible="eventDetailDialogVisible" :formData="detailDialogFormData" :activeName="activeName" |
|||
@update:value="handleClose" @queryData="queryData" /> |
|||
--> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue"; |
|||
import Tabs from "@screen/components/Tabs/index.vue"; |
|||
import RoadStateCard from "@screen/components/RoadStateCard/index.vue"; |
|||
import Pagination from "@screen/components/Pagination.vue"; |
|||
import InputSearch from "@screen/components/InputSearch/index.vue"; |
|||
import EventDetailDialog from "./EventDetailDialog/index"; |
|||
import FormEvent from "./FormEvent/index"; |
|||
import { tabMap,searchFormList } from "./data"; |
|||
import request from "@/utils/request"; |
|||
import { Message } from "element-ui"; |
|||
import { Loading } from 'element-ui'; |
|||
import { WarningType as warningTypeMapping, WarningSubclass as warningSubclassTypeMapping, DirectionTypes as gzDirectionMapping, warningSourceMapping, warningStateMapping } from "@screen/utils/enum.js" |
|||
|
|||
export default { |
|||
name: "RoadNetworkMonitoring2", |
|||
components: { |
|||
ButtonGradient, |
|||
Tabs, |
|||
Pagination, |
|||
RoadStateCard, |
|||
InputSearch, |
|||
EventDetailDialog, |
|||
FormEvent, |
|||
}, |
|||
data() { |
|||
return { |
|||
data: [], |
|||
total: 0, |
|||
searchFormList, |
|||
activeName: "-1", |
|||
eventDetailDialogVisible: false, |
|||
isShowAddNew: false, |
|||
searchData: { |
|||
pageSize: 12, |
|||
pageNum: 1 |
|||
}, |
|||
detailDialogFormData: {}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getData(); |
|||
}, |
|||
methods: { |
|||
getStateCardBind(item) { |
|||
const { state, textColor, text } = tabMap[item.warningState]; |
|||
return { |
|||
cardData: { ...item, state }, |
|||
lastBtnColor: textColor, |
|||
lastBtnText: text, |
|||
isShowLeft: this.activeName == '-1' |
|||
}; |
|||
}, |
|||
queryData(flag) { |
|||
this.getData() |
|||
}, |
|||
getData() { //列表数据查询 |
|||
request({ |
|||
url: `/perceivedEvents/warning/perceivedEventsList`,//感知事件 |
|||
method: "post", |
|||
params: { pageNum: this.searchData.pageNum, pageSize: this.searchData.pageSize }, |
|||
data: { ...this.searchData } |
|||
}).then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
result.rows.forEach(it => { |
|||
it.stringEventSource = it?.warningSource ? warningSourceMapping[it?.warningSource] : ''; |
|||
it.stringDirection = gzDirectionMapping[it.direction] || it.direction; |
|||
|
|||
let strSub = ''; |
|||
if (it.warningSubclass && warningSubclassTypeMapping[it.warningType][it.warningSubclass] || '') { |
|||
strSub = `(${warningSubclassTypeMapping[it.warningType][it.warningSubclass] || ''})` |
|||
} |
|||
it.stringEventType = warningTypeMapping[it.warningType] + strSub; |
|||
|
|||
it.startTime = it.warningTime; |
|||
|
|||
if (it.otherConfig) { |
|||
let otherConfig = JSON.parse(it.otherConfig); |
|||
it.pictures = otherConfig.pictures || []; |
|||
} |
|||
|
|||
}) |
|||
this.data = result.rows; |
|||
|
|||
this.total = result.total; |
|||
}); |
|||
}, |
|||
onRefresh() { |
|||
this.searchData.pageNum = 1; |
|||
this.$refs.searchComp.handleResetForm(); |
|||
}, |
|||
onSizeChange(pageSize) { |
|||
this.searchData.pageSize = pageSize; |
|||
this.getData(); |
|||
}, |
|||
onExport() { |
|||
let url = ''; |
|||
if (this.activeName == '-1') { |
|||
url = '/business/warning/export' |
|||
} else { |
|||
url = '/dc/system/event/export?eventState=' + this.searchData.eventState; |
|||
} |
|||
let loadingInstance = Loading.service({ |
|||
fullscreen: true, |
|||
background: "#00000052", |
|||
text: "文件正在下载...", |
|||
}); |
|||
// request.post(url, {}, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'blob' }) |
|||
request({ |
|||
url: url,//感知事件 |
|||
method: "post", |
|||
data: { ...this.searchData, warningState: 1 }, |
|||
responseType: 'blob' |
|||
}) |
|||
.then((res) => { |
|||
console.log(res); |
|||
const url = window.URL.createObjectURL(new Blob([res])); |
|||
let link = document.createElement("a"); |
|||
link.style.display = "none"; |
|||
link.href = url; |
|||
link.setAttribute("download", "事件信息列表.xlsx"); |
|||
document.body.appendChild(link); |
|||
link.click(); |
|||
URL.revokeObjectURL(link.href); // 释放URL 对象 |
|||
document.body.removeChild(link); |
|||
link = null; |
|||
loadingInstance.close(); |
|||
}) |
|||
.catch((err) => { |
|||
Message.error(err); |
|||
loadingInstance.close(); |
|||
}); |
|||
}, |
|||
firstBtnClick(id) {//点击去确认/详情/处置记录等第一个按钮 |
|||
console.log("id", id); |
|||
if (this.activeName == '-1') { |
|||
request({ |
|||
url: `/perceivedEvents/warning/getWarningById`,//感知事件 |
|||
method: "post", |
|||
data: { id } |
|||
}).then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
let data = result.data; |
|||
|
|||
data.stringEventSource = data?.warningSource ? warningSourceMapping[data.warningSource] : ''; |
|||
data.nickName = data.userName; |
|||
data.direction = gzDirectionMapping[data.direction] || data.direction; |
|||
data.startTime = data.warningTime; |
|||
data.stringEventState = warningStateMapping[data.warningState]; |
|||
data.stringEventType = warningTypeMapping[data.warningType]; |
|||
|
|||
data.videoList = []; |
|||
if (data.otherConfig) { |
|||
let otherConfig = JSON.parse(data.otherConfig); |
|||
|
|||
data.waterFilmThickness = otherConfig.waterFilmThickness; |
|||
data.windSpeed = otherConfig.windSpeed; |
|||
data.visibility = otherConfig.visibility; |
|||
|
|||
data.pictures = otherConfig.pictures || []; |
|||
data.videoList = otherConfig.videoList || []; |
|||
// data.videoList = ['https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4', |
|||
// 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4'] |
|||
} |
|||
data.videoType = "mp4"; |
|||
data.component = "Video"; |
|||
this.detailDialogFormData = data; |
|||
// console.log('data', this.detailDialogFormData) |
|||
|
|||
this.eventDetailDialogVisible = true; |
|||
}); |
|||
} else { |
|||
request({ |
|||
url: `/dc/system/event/${id}`,//交通事件 |
|||
method: "get", |
|||
}).then(async (result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
let data = result.data; |
|||
data.stringDirection = gzDirectionMapping[data.direction] || data.direction; |
|||
data.startTime = data?.occurrenceTime || ''; |
|||
|
|||
|
|||
data.videoList = []; |
|||
data.component = "VideoMulti"; |
|||
|
|||
// const { downCamera, upCamera } = ((await getNearCameraNew(data.stakeMark))?.data || {});//新的上下游摄像头接口 |
|||
// data.downCamId = downCamera?.camId; |
|||
// data.upCamId = upCamera?.camId; |
|||
data.videoType = "flv"; |
|||
|
|||
this.detailDialogFormData = data; |
|||
|
|||
this.eventDetailDialogVisible = true; |
|||
}); |
|||
} |
|||
|
|||
}, |
|||
onLastBtnClick(id) { |
|||
this.$router.push(`/control/event/commandDispatch?eventId=${id}`); |
|||
}, |
|||
handleClose() { |
|||
this.eventDetailDialogVisible = false; |
|||
}, |
|||
handleSearch(data) { |
|||
let daterange = data.daterange; |
|||
|
|||
let dStakeMark = data.stakeMark; |
|||
let dendStakeMark = data.endStakeMark; |
|||
|
|||
let stakeMark = dStakeMark[0] ? `K${dStakeMark[0]}+${dStakeMark[1]}` : ''; |
|||
let endStakeMark = ''; |
|||
if (dendStakeMark) { |
|||
endStakeMark = dendStakeMark[0] ? `K${dendStakeMark[0]}+${dendStakeMark[1]}` : ''; |
|||
} |
|||
|
|||
this.searchData = { |
|||
...this.searchData, |
|||
warningState: data.warningState, |
|||
warningType: data.warningType, |
|||
warningSource: data?.warningSource || '', |
|||
direction: data.direction, |
|||
startTime: daterange && daterange.length > 0 ? daterange[0] : "", |
|||
endTime: this.activeName != "-1" && daterange && daterange.length > 0 ? daterange[1] : "", |
|||
completeTime: this.activeName == "-1" && daterange && daterange.length > 0 ? daterange[1] : "", |
|||
startStakeMark: stakeMark, |
|||
endStakeMark: endStakeMark, |
|||
}; |
|||
console.log(this.searchData) |
|||
// this.getData(); |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.RoadNetworkMonitoring2 { |
|||
padding: 0px 21px 21px 21px; |
|||
|
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
z-index: 6; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.filter { |
|||
height: 60px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
>div { |
|||
display: flex; |
|||
gap: 6px; |
|||
} |
|||
} |
|||
|
|||
.body { |
|||
flex: 1; |
|||
overflow: auto; |
|||
display: grid; |
|||
grid-template-columns: repeat(4, 1fr); |
|||
grid-gap: 24px; |
|||
// grid-row-gap: 9px; |
|||
// grid-column-gap: 9px; |
|||
grid-auto-rows: min-content; |
|||
} |
|||
|
|||
.footer { |
|||
margin-top: 15px; |
|||
height: 36px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue