Browse Source

事件预案,重构

wangqin
zhoule 7 months ago
parent
commit
e834d35920
  1. 413
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/ScopeTable.vue
  2. 472
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/index copy.vue
  3. 259
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/index.vue
  4. 58
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/data.js
  5. 14
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/index.vue
  6. 34
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/qbbDialog/index.vue
  7. 86
      ruoyi-ui/src/views/JiHeExpressway/utils/enum.js

413
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/ScopeTable.vue

@ -0,0 +1,413 @@
<template>
<div class="ScopeTable">
<el-row>
<el-col :span="2">
<p>设备资源:</p>
</el-col>
<el-col :span="4">
<!-- 设备类型 -->
<el-select v-model="tableInfo.deviceType" placeholder="" @change="changeDeviceType" transfer="true"
:popper-append-to-body="false">
<el-option v-for="item in deviceOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="4">
<!-- 规则条件 -->
<el-select v-model="tableInfo.searchRule" placeholder="">
<el-option v-for="item in zyOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="4">
<!-- 设备列表 -->
<el-select v-if="tableInfo.searchRule == 1" v-model="tableInfo.devList" 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-number v-if="tableInfo.searchRule == 2 || tableInfo.searchRule == 3"
v-model="tableInfo.number" :min="0" :max="9999" style="width: 130px;"></el-input-number>
<span v-if="tableInfo.searchRule == 2 || tableInfo.searchRule == 3"></span>
<!-- 公里 -->
<el-input-number v-if="tableInfo.searchRule == 4" v-model="tableInfo.number" :min="0" :max="9999"
style="width: 130px;"></el-input-number>
<span v-if="tableInfo.searchRule == 4" style="width: 56px;">公里</span>
</el-col>
</el-row>
<el-row>
<el-col :span="2">
<p>执行操作:</p>
</el-col>
<!-- 可变信息标识 -->
<el-col v-if="tableInfo.deviceType == 2" :span="4">
<el-select v-model="tableInfo.zx_operationType" placeholder="请选择">
<el-option label="自定义发布" :value="1"></el-option>
<el-option label="智能发布" :value="2"></el-option>
</el-select>
</el-col>
<el-col v-if="tableInfo.deviceType == 2 && tableInfo.zx_operationType == 1" :span="4">
<el-input @click.native="clickQbb('zx_content')" placeholder="请选择" v-model="tableInfo.zx_content" readonly>
<i slot="suffix" class="el-input__icon el-icon-search"></i>
</el-input>
</el-col>
<!-- 疲劳唤醒 -->
<el-col v-if="tableInfo.deviceType == 10" :span="4">
<el-select v-model="tableInfo.zx_name" placeholder="工作模式">
<el-option v-for="item in gzmsOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-col>
<el-col v-if="tableInfo.deviceType == 10" :span="4">
<el-input-number placeholder="" v-model="tableInfo.zx_operationDuration" :min="0"
:max="999"></el-input-number>
</el-col>
<el-col v-if="tableInfo.deviceType == 10" :span="2">
<span>时长(分钟)</span>
</el-col>
<!-- 行车诱导 -->
<el-col v-if="tableInfo.deviceType == 12" :span="4">
<el-select v-model="tableInfo.zx_controlModel" placeholder="请选择模式" transfer="true"
:popper-append-to-body="false">
<el-option label="手动模式" value="00"></el-option>
<el-option label="自动模式" value="01"></el-option>
<el-option label="万年历" value="02"></el-option>
</el-select>
</el-col>
<el-col v-if="tableInfo.deviceType == 12 && tableInfo.zx_controlModel == '01'" :span="4">
<el-time-picker v-model="tableInfo.zx_time" is-range style="" range-separator="-" placeholder="选择时间"
value-format="HH:mm" format="HH:mm">
</el-time-picker>
</el-col>
<el-col v-if="tableInfo.deviceType == 12" :span="4">
<el-select v-model="tableInfo.zx_state" placeholder="工作状态">
<el-option v-for="item in gzztOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-col>
<!-- 语音广播 -->
<el-col v-if="tableInfo.deviceType == 5" :span="4">
<el-select v-model="tableInfo.zx_operationType" placeholder="请选择">
<el-option label="自定义发布" :value="1"></el-option>
<el-option label="智能发布" :value="2"></el-option>
</el-select>
</el-col>
<el-col v-if="tableInfo.deviceType == 5 && tableInfo.zx_operationType == 1" :span="4">
<el-input v-model="tableInfo.zx_content" placeholder="请输入发布内容"></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="2">
<p>恢复操作:</p>
</el-col>
<!-- 可变信息标识 -->
<el-col v-if="tableInfo.deviceType == 2" :span="4">
<el-select v-model="tableInfo.hf_operationType" placeholder="请选择">
<el-option label="自定义发布" :value="1"></el-option>
<el-option label="还原上次" :value="2"></el-option>
</el-select>
</el-col>
<el-col v-if="tableInfo.deviceType == 2 && tableInfo.hf_operationType == 1" :span="4">
<el-input @click.native="clickQbb('hf_content')" placeholder="请选择" v-model="tableInfo.hf_content" readonly>
<i slot="suffix" class="el-input__icon el-icon-search"></i>
</el-input>
</el-col>
<!-- 疲劳唤醒 -->
<el-col v-if="tableInfo.deviceType == 10" :span="4">
<el-select v-model="tableInfo.hf_name" placeholder="工作模式">
<el-option v-for="item in gzmsOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-col>
<el-col v-if="tableInfo.deviceType == 10" :span="4">
<el-input-number placeholder="" v-model="tableInfo.hf_operationDuration" :min="0"
:max="999"></el-input-number>
</el-col>
<el-col v-if="tableInfo.deviceType == 10" :span="2">
<span>时长(分钟)</span>
</el-col>
<!-- 行车诱导 -->
<el-col v-if="tableInfo.deviceType == 12" :span="4">
<el-select v-model="tableInfo.hf_controlModel" placeholder="请选择模式" transfer="true"
:popper-append-to-body="false">
<el-option label="手动模式" value="00"></el-option>
<el-option label="自动模式" value="01"></el-option>
<el-option label="万年历" value="02"></el-option>
</el-select>
</el-col>
<el-col v-if="tableInfo.deviceType == 12 && tableInfo.hf_controlModel == '01'" :span="4">
<el-time-picker v-model="tableInfo.hf_time" is-range style="" range-separator="-" placeholder="选择时间"
value-format="HH:mm" format="HH:mm">
</el-time-picker>
</el-col>
<el-col v-if="tableInfo.deviceType == 12" :span="4">
<el-select v-model="tableInfo.hf_state" placeholder="工作状态">
<el-option v-for="item in gzztOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-col>
<!-- 语音广播 -->
<!-- <el-col v-if="tableInfo.deviceType == 5" :span="4">
<el-select v-model="tableInfo.hf_operationType" placeholder="请选择">
<el-option label="自定义发布" :value="1"></el-option>
<el-option label="智能发布" :value="2"></el-option>
</el-select>
</el-col> -->
<el-col v-if="tableInfo.deviceType == 5 && tableInfo.hf_operationType == 1" :span="4">
<el-input v-model="tableInfo.hf_content" placeholder="请输入发布内容"></el-input>
</el-col>
</el-row>
<!-- 情报板弹窗 -->
<QbbDialog :visible="isShowDialog" :info="qbbData" @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";
import { defaultTableInfo } from "../data";
export default {
name: 'ScopeTable',
components: {
Button,
Table,
QbbDialog
},
model: {
prop: 'visible',
event: 'update:value'
},
inject: ['loadData'],
props: {
visible: Boolean,
eventType: Number,
type: Number,
tableInfo: {
type: Object,
default: () => ({...defaultTableInfo})
}
},
data() {
return {
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: "激光关闭",
label: "激光关闭"
},
{
value: "常亮模式",
label: "常亮模式"
},
{
value: "间隔100ms闪烁模式",
label: "间隔100ms闪烁模式"
},
{
value: "间隔200ms闪烁模式",
label: "间隔200ms闪烁模式",
},
{
value: "间隔500ms闪烁模式",
label: "间隔500ms闪烁模式",
},
{
value: "2次闪烁模式",
label: "2次闪烁模式"
},
{
value: "SOS模式",
label: "SOS模式"
},
{
value: "自定义模式1",
label: "自定义模式1",
},
{
value: "自定义模式2",
label: "自定义模式2",
},
{
value: "自定义模式3",
label: "自定义模式3",
}
],
qbbData: {},
sbOptions: [],
deviceType: 1,
clickQbbName: 1
}
},
watch: {
// async tableData(newValue) {
// console.log('newValue', newValue)
// if (newValue) {
// const item = this.tableData.find(it => it.searchRule == 1);
// console.log('item', item);
// if (item && item.deviceType) {
// let loadData = await this.loadData(item.deviceType);
// console.log('aa', loadData)
// this.sbOptions = loadData;
// }
// }
// }
},
async mounted() {
let loadData = await this.loadData(2);
// console.log('aa', loadData)
this.sbOptions = loadData;
},
methods: {
initData() {
},
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(name) {
this.clickQbbName = name;
// this.qbbData = this.tableData[index].dcInfoBoardTemplate;
this.isShowDialog = true;
},
onCloseDialog() {
this.isShowDialog = false;
},
dialogSubmit(data) {
console.log('qbbData',data)
this.tableInfo[this.clickQbbName] = data.content;
// this.tableData[this.index].otherConfig = JSON.stringify(data);
}
}
}
</script>
<style lang="scss" scoped>
.ScopeTable {
display: flex;
gap: 9px;
width: 100%;
// height: 768px;
min-height: 50px;
margin-top: 5px;
flex-direction: column;
p {
color: aqua;
}
::v-deep {
.el-table .el-table__cell {
padding: 0 5px;
}
.el-col-4 {
margin-left: 6px;
}
}
.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>

472
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/index copy.vue

@ -0,0 +1,472 @@
<template>
<Dialog v-model="modelVisible" :title="title" width="1330px">
<div class="EventAddPlanDialog">
<ElForm :model="formData" inline :rules="rules" ref="ruleForm">
<div class="first">
<el-form-item prop="eventCategory">
<el-radio-group v-model="formData.eventCategory" @input="changeRadio">
<el-radio-button :label="1">交通事件</el-radio-button>
<el-radio-button :label="2">感知事件</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item required label="预案名称:" prop="planName">
<el-input v-model="formData.planName" placeholder="请输入预案名称"></el-input>
</el-form-item>
<el-form-item required label="事件类型:" prop="eventType">
<el-select v-model="formData.eventType" placeholder="请选择事件类型" @change="changeEventType">
<el-option v-for="item in eventOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="触发类型:" prop="triggerMechanism">
<el-select v-model="formData.triggerMechanism" placeholder="请选择触发类型">
<el-option v-for="item in mechanismOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
<div class="second">
<el-row>
<el-col :span="2">
<div class="text"><i style="color: red">*</i>执行操作:</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"><i style="color: red">*</i>恢复操作:</div>
</el-col>
<el-col :span="22">
<FormTable ref="thirdFormTable" :tableData="thirdFormData" :type="2"></FormTable>
</el-col>
</el-row>
</div>
</ElForm>
</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 FormTable from "../formTable/index";
import Button from "@screen/components/Buttons/Button.vue";
import request from "@/utils/request";
import { Message } from "element-ui";
import { throttle } from "lodash";
import {
controlModelMap,
gzztMap,
gzmsMap,
eventSubClassMap,
trafficKV,
WarningTypeList as perceptionKV,
} from "@screen/utils/enum.js";
const typeMap = {
1: trafficKV,
2: perceptionKV,
};
export default {
name: "addAndEditDialog",
components: {
Dialog,
Form,
Button,
FormTable,
},
model: {
prop: "visible",
event: "close",
},
provide() {
return {
// loadData: throttle(this.loadData, 100)
loadData: this.loadData,
};
},
props: {
visible: Boolean,
detail: {
type: Object,
default: () => { },
},
},
data() {
return {
title: "新增预案",
dialogType: 1,
planId: 0,
submitting: false,
formData: {
eventCategory: 1,
eventType: 1,
triggerMechanism: "",
},
secondFormData: [
{
deviceType: 1,
searchRule: 1,
qbb: "",
},
],
thirdFormData: [
{
deviceType: 1,
searchRule: 1,
qbb: "",
},
],
deviceData: [],
eventOptions: trafficKV,
mechanismOptions: [
{
value: "1-1",
label: "追尾",
},
{
value: "1-2",
label: "侧翻",
},
{
value: "1-3",
label: "撞护栏",
},
{
value: "1-4",
label: "自然",
},
{
value: "1-5",
label: "其他事故",
},
],
rules: {
planName: [{ required: true, message: "请输入预案名称" }],
eventType: [
{ required: true, message: "请选择事件类型", trigger: "change" },
],
},
};
},
mounted() { },
computed: {
modelVisible: {
get() {
if (this.visible) {
if (Object.keys(this.detail).length > 0) {
this.title = "修改预案";
this.dialogType = 2;
this.eventOptions = typeMap[this.detail.eventCategory];
this.mechanismOptions =
eventSubClassMap[this.detail.eventCategory || 1][
this.detail.eventType
];
this.initData(this.detail.id);
} else {
this.title = "新增预案";
this.dialogType = 1;
this.formData = {
eventCategory: 1,
eventType: 1,
triggerMechanism: "",
};
this.secondFormData = [
{
deviceType: 1,
searchRule: 1,
qbb: "",
},
];
this.thirdFormData = [
{
deviceType: 1,
searchRule: 1,
qbb: "",
},
];
}
}
return this.visible;
},
set(val) {
this.$emit("close", val);
},
},
},
methods: {
initData(id = 1) {
request({
url: `/business/plans/list/${id}`,
method: "get",
})
.then((result) => {
if (result.code != 200) return Message.error(result?.msg);
let data = result.data;
let dcExecuteAction = result.data.dcExecuteAction;
this.planId = data.id;
this.formData = {
eventCategory: data.eventCategory,
planName: data.planName,
eventType: data.eventType,
triggerMechanism: data.triggerMechanism,
};
this.secondFormData = [];
this.thirdFormData = [];
dcExecuteAction.forEach((it) => {
let action = {};
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) {
this.secondFormData.push(action);
} else if (it.actionType == 2) {
this.thirdFormData.push(action);
}
});
console.log("secondFormData", this.secondFormData);
})
// console.log('secondFormData', this.secondFormData)
// }).catch((err) => {
// console.log(err)
// Message.error("", err);
// })
.catch((err) => {
console.log(err);
Message.error("查询事件预案列表失败", err);
});
},
async loadData(deviceType = 1) {
this.deviceData = [];
let result = await request({
url: `business/device/query?deviceType=${deviceType}`,
method: "get",
});
if (result.code != 200) return Message.error(result?.msg);
if (deviceType == 1) {
this.deviceData = result.data.filter((it) => it.childType !== "1-1");
} else {
this.deviceData = result.data;
}
return this.deviceData;
},
changeEventType(value = 1) {
this.mechanismOptions =
eventSubClassMap[this.formData.eventCategory || 1][value];
},
changeRadio(value = 1) {
this.formData.triggerMechanism = "";
this.eventOptions = typeMap[value];
this.changeEventType(1);
},
handleChange() { },
formatData(it, value = 1, id = "") {
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: controlModelMap[it.controlModel],
state: it.state,
name: gzztMap[it.state],
};
if (it.time && it?.time[0]) {
other = {
controlModel: it.controlModel,
controlModelName: controlModelMap[it.controlModel],
state: it.state,
name: gzztMap[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() {
this.$refs["ruleForm"].validate((valid) => {
if (valid) {
// this.submitting = false;
let secondFormTable = this.$refs["secondFormTable"].tableData || [];
let thirdFormTable = this.$refs["thirdFormTable"].tableData || [];
// let flg = false;
// for (let item of secondFormTable) {
// if (this.areAllValuesEmpty(item)) { flg = true; break };
// }
// if (flg) return Message.warning('');
// for (let item of thirdFormTable) {
// if (this.areAllValuesEmpty(item)) { flg = true; break };
// }
// if (flg) return Message.warning('');
// console.log('12', secondFormTable);
// console.log('34', thirdFormTable);
let dcArr = [];
let id = "";
if (this.dialogType == 2) id = this.planId;
secondFormTable.forEach((it) => {
dcArr.push(this.formatData(it, 1, id));
});
thirdFormTable.forEach((it) => {
dcArr.push(this.formatData(it, 2, id));
});
console.log({
...this.formData,
dcExecuteAction: dcArr,
});
// return;
if (this.dialogType == 1) {
//
request({
url: `/business/plans`,
method: "post",
data: {
...this.formData,
dcExecuteAction: dcArr,
},
})
.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("reInitData", true);
});
} else if (this.dialogType == 2) {
//
request({
url: `/business/plans`,
method: "put",
data: {
...this.formData,
id: this.planId,
dcExecuteAction: dcArr,
},
})
.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("reInitData", true);
});
}
}
});
},
areAllValuesEmpty(obj) {
console.log("ass", obj);
return Object.keys(obj).every(function (key) {
const value = obj[key];
return (
value == null ||
value === "" ||
(Array.isArray(value) && value.length === 0) ||
(value instanceof Object && Object.keys(value).length === 0)
);
});
},
},
};
</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;
}
}
</style>

259
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/index.vue

@ -3,12 +3,6 @@
<div class="EventAddPlanDialog">
<ElForm :model="formData" inline :rules="rules" ref="ruleForm">
<div class="first">
<el-form-item prop="eventCategory">
<el-radio-group v-model="formData.eventCategory" @input="changeRadio">
<el-radio-button :label="1">交通事件</el-radio-button>
<el-radio-button :label="2">感知事件</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item required label="预案名称:" prop="planName">
<el-input v-model="formData.planName" placeholder="请输入预案名称"></el-input>
</el-form-item>
@ -18,35 +12,26 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="触发类型:" prop="triggerMechanism">
<el-select v-model="formData.triggerMechanism" placeholder="请选择触发类型">
<el-form-item label="细分类型:" prop="triggerMechanism">
<el-select v-model="formData.triggerMechanism" placeholder="请选择细分类型">
<el-option v-for="item in mechanismOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
<div class="second">
<el-row>
<el-col :span="2">
<div class="text"><i style="color: red">*</i>执行操作:</div>
</el-col>
<div>
<el-row v-for="(item, index) in tableData" :key="item.id" class="rowBlock">
<el-col :span="22">
<FormTable ref="secondFormTable" :tableData="secondFormData" :type="1"></FormTable>
<ScopeTable :tableInfo="item"></ScopeTable>
</el-col>
</el-row>
</div>
<div class="third">
<el-row>
<el-col :span="2">
<div class="text"><i style="color: red">*</i>恢复操作:</div>
</el-col>
<el-col :span="22">
<FormTable ref="thirdFormTable" :tableData="thirdFormData" :type="2"></FormTable>
<ElButton class="elButton" icon="el-icon-plus" plain size="mini" @click.native="onAdd()" />
<ElButton class="elButton" icon="el-icon-delete" plain size="mini" @click.native="onDel(index)" />
</el-col>
</el-row>
</div>
</ElForm>
</div>
@ -65,21 +50,17 @@ import FormTable from "../formTable/index";
import Button from "@screen/components/Buttons/Button.vue";
import request from "@/utils/request";
import { Message } from "element-ui";
import { throttle } from "lodash";
import ScopeTable from "./ScopeTable.vue";
import { defaultTableInfo } from "../data";
import Table from '@screen/components/Table.vue';
import {
controlModelMap,
gzztMap,
gzmsMap,
eventSubClassMap,
trafficKV,
WarningTypeList as perceptionKV,
trafficKV
} from "@screen/utils/enum.js";
const typeMap = {
1: trafficKV,
2: perceptionKV,
};
export default {
name: "addAndEditDialog",
components: {
@ -87,6 +68,8 @@ export default {
Form,
Button,
FormTable,
Table,
ScopeTable
},
model: {
prop: "visible",
@ -112,24 +95,10 @@ export default {
planId: 0,
submitting: false,
formData: {
eventCategory: 1,
eventType: 1,
triggerMechanism: "",
},
secondFormData: [
{
deviceType: 1,
searchRule: 1,
qbb: "",
},
],
thirdFormData: [
{
deviceType: 1,
searchRule: 1,
qbb: "",
},
],
tableData: [],
deviceData: [],
eventOptions: trafficKV,
mechanismOptions: [
@ -170,34 +139,17 @@ export default {
if (Object.keys(this.detail).length > 0) {
this.title = "修改预案";
this.dialogType = 2;
this.eventOptions = typeMap[this.detail.eventCategory];
this.mechanismOptions =
eventSubClassMap[this.detail.eventCategory || 1][
this.detail.eventType
];
this.mechanismOptions = eventSubClassMap[1][this.detail.eventType];
this.initData(this.detail.id);
} else {
this.title = "新增预案";
this.dialogType = 1;
this.formData = {
eventCategory: 1,
eventType: 1,
triggerMechanism: "",
};
this.secondFormData = [
{
deviceType: 1,
searchRule: 1,
qbb: "",
},
];
this.thirdFormData = [
{
deviceType: 1,
searchRule: 1,
qbb: "",
},
];
console.log('defaultTableInfo', { ...defaultTableInfo })
this.tableData = [{ ...defaultTableInfo }]
}
}
return this.visible;
@ -216,43 +168,38 @@ export default {
.then((result) => {
if (result.code != 200) return Message.error(result?.msg);
let data = result.data;
let dcExecuteAction = result.data.dcExecuteAction;
let dcExecuteAction = data.dcExecuteAction;
this.planId = data.id;
this.formData = {
eventCategory: data.eventCategory,
planName: data.planName,
eventType: data.eventType,
triggerMechanism: data.triggerMechanism,
};
this.secondFormData = [];
this.thirdFormData = [];
let dcArr = [];
dcExecuteAction.forEach((it) => {
let action = {};
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 };
let action = { ...it };
if (it.executeConfig) {
let executeConfig = JSON.parse(it.executeConfig);
let execute = this.mapKeys(executeConfig, 'zx_');
action = { ...action, ...execute };
}
if (it.recoverConfig) {
let recoverConfig = JSON.parse(it.recoverConfig);
let recover = this.mapKeys(recoverConfig, 'hf_');
action = { ...action, ...recover };
}
if (it.deviceList) {
action.deviceList = it.deviceList
action.devList = it.deviceList
.split(",")
.map((str) => Number(str));
}
if (it.actionType == 1) {
this.secondFormData.push(action);
} else if (it.actionType == 2) {
this.thirdFormData.push(action);
}
dcArr.push(action);
});
console.log("secondFormData", this.secondFormData);
this.tableData = dcArr;
console.log("tableData", this.tableData);
})
// console.log('secondFormData', this.secondFormData)
// }).catch((err) => {
@ -265,6 +212,12 @@ export default {
Message.error("查询事件预案列表失败", err);
});
},
mapKeys(obj, prefix) {
return Object.keys(obj).reduce((result, key) => {
result[`${prefix}${key}`] = obj[key];
return result;
}, {});
},
async loadData(deviceType = 1) {
this.deviceData = [];
let result = await request({
@ -280,87 +233,80 @@ export default {
return this.deviceData;
},
changeEventType(value = 1) {
this.mechanismOptions =
eventSubClassMap[this.formData.eventCategory || 1][value];
},
changeRadio(value = 1) {
this.formData.triggerMechanism = "";
this.eventOptions = typeMap[value];
this.changeEventType(1);
console.log('changeEventType', value)
this.mechanismOptions = eventSubClassMap[1][value];
this.formData.triggerMechanism = ''
},
handleChange() { },
formatData(it, value = 1, id = "") {
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 });
onAdd() {
this.tableData.push({ ...defaultTableInfo })
},
onDel(index) {
if (this.tableData.length <= 1) {
return Message.warning('最后一项不可删除!');
}
this.tableData.splice(index, 1)
},
formatData(it) {
let data = {};
if (it.controlModel) {
let other = {
data = {
controlModel: it.controlModel,
controlModelName: controlModelMap[it.controlModel],
state: it.state,
name: gzztMap[it.state],
};
if (it.time && it?.time[0]) {
other = {
controlModel: it.controlModel,
controlModelName: controlModelMap[it.controlModel],
state: it.state,
name: gzztMap[it.state],
data = {
...data,
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() {
this.$refs["ruleForm"].validate((valid) => {
if (valid) {
// this.submitting = false;
let secondFormTable = this.$refs["secondFormTable"].tableData || [];
let thirdFormTable = this.$refs["thirdFormTable"].tableData || [];
// let flg = false;
// for (let item of secondFormTable) {
// if (this.areAllValuesEmpty(item)) { flg = true; break };
// }
// if (flg) return Message.warning('');
// for (let item of thirdFormTable) {
// if (this.areAllValuesEmpty(item)) { flg = true; break };
// }
// if (flg) return Message.warning('');
// console.log('12', secondFormTable);
// console.log('34', thirdFormTable);
let dcArr = [];
let id = "";
if (this.dialogType == 2) id = this.planId;
secondFormTable.forEach((it) => {
dcArr.push(this.formatData(it, 1, id));
});
thirdFormTable.forEach((it) => {
dcArr.push(this.formatData(it, 2, id));
});
this.tableData.forEach(item => {
let dcData = {
id: item.id || '',
deviceType: item.deviceType,
searchRule: item.searchRule,
number: item.number
}
if (this.dialogType == 2) {
dcData.emergencyPlansId = this.planId;
}
if (item.devList && item.devList.length > 0) {
dcData.deviceList = item.devList.join(",");
}
let zxData = {}, hfData = {};
Object.keys(item).forEach(key => {
if (/^zx_/.test(key)) {
let keyName = key.substring(3);
zxData[keyName] = item[key];
}
if (/^hf_/.test(key)) {
let keyName = key.substring(3);
hfData[keyName] = item[key];
}
})
if (item.deviceType == 12) {
zxData = this.formatData(zxData);
hfData = this.formatData(hfData);
}
dcData.executeConfig = JSON.stringify(zxData);
dcData.recoverConfig = JSON.stringify(hfData);
dcArr.push(dcData);
})
console.log({
...this.formData,
dcExecuteAction: dcArr,
dcExecuteAction: dcArr
});
// return;
if (this.dialogType == 1) {
@ -468,5 +414,26 @@ export default {
justify-content: end;
gap: 15px;
}
.rowBlock {
background-color: #296887;
padding: 5px 10px;
margin-bottom: 10px;
}
}
.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>

58
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/data.js

@ -1,5 +1,4 @@
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
import { merge, cloneDeep } from "lodash";
import { planDeviceOptions } from "@screen/utils/enum.js";
export const searchFormList = [
{
@ -7,50 +6,19 @@ export const searchFormList = [
key: "planName",
},
{
label: "事件分类:",
key: "eventCategory",
type: "RadioGroup",
label: "设备类型:",
key: "deviceType",
type: "select",
options: {
options: [
{
key: "1",
label: "交通事件",
},
{
key: "2",
label: "感知事件",
},
],
options: planDeviceOptions,
},
},
// {
// label: "时间范围:",
// key: "daterange",
// required: false,
// type: "datePicker",
// options: {
// type: "daterange",
// format: "yyyy-MM-dd HH:mm:ss",
// valueFormat: "yyyy-MM-dd HH:mm:ss",
// },
// },
// {
// ...PresetFormItems.station,
// label: "开始桩号:",
// required: false,
// },
// merge(cloneDeep(PresetFormItems.station), {
// options: {
// options: [
// {
// key: "endStakeMark[0]",
// },
// {
// key: "endStakeMark[1]",
// },
// ],
// },
// label: "结束桩号:",
// required: false,
// }),
];
export const defaultTableInfo = {
deviceType: 2,
searchRule: 1,
number: 0,
// zx_operationType: 2,
// hf_operationType: 2,
};

14
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/index.vue

@ -24,9 +24,9 @@
<!-- 内容 -->
<div class="body">
<Table :data="tableData">
<ElTableColumn prop="strEventCategory" label="事件分类" width="100" align="center" />
<ElTableColumn prop="strEventType" label="事件类型" width="100" align="center" />
<!-- <ElTableColumn prop="strEventCategory" label="事件分类" width="100" align="center" /> -->
<ElTableColumn prop="planName" label="预案名称" width="140" align="center" />
<ElTableColumn prop="strEventType" label="事件类型" width="140" align="center" />
<ElTableColumn prop="triggeringCondition" label="检索条件" width="140" />
<ElTableColumn prop="deviceType" label="设备类型" />
<ElTableColumn prop="controllableDeviceName" label="可控设备" />
@ -63,12 +63,7 @@ import request from "@/utils/request";
import { confirm } from "@screen/utils/common";
import { Message } from 'element-ui'
import { searchFormList } from './data';
import { WarningType, trafficType } from "@screen/utils/enum.js";
const eventTypeMap = {
1: trafficType,
2: WarningType,
}
import { trafficType } from "@screen/utils/enum.js";
export default {
name: 'controlEventPlan',
@ -106,8 +101,7 @@ export default {
}).then((result) => {
if (result.code != 200) return Message.error(result?.msg);
result.rows.forEach(it => {
it.strEventCategory = it.eventCategory == 1 ? '交通事件' : '感知事件';
it.strEventType = eventTypeMap[it.eventCategory || 0][it.eventType];
it.strEventType = trafficType[it.eventType];
// it.strDeviceType = deviceMap[it.deviceType];
})
this.tableData = result.rows;

34
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/qbbDialog/index.vue

@ -1,25 +1,17 @@
<template>
<Dialog v-model="modelVisible" title="选择情报板" width="550px">
<div class="EventAddPlanDialog">
<Dialog v-model="modelVisible" title="选择情报板" width="700px">
<div class="PlanQbbDialog">
<vuescroll :ops="scrollOptions" class="listBox">
<div v-for="item in templateAvailable" :key="item.dictValue">
<!-- 原来是<el-collapse v-model="activeNames"> -->
<h3>{{ item.dictLabel }}</h3>
<div v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
<!-- 模板内容 -->
<BoardTplPreview
class="boardPreview"
boardWH="1400*200"
:tpl="itm"
></BoardTplPreview>
<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)"
/>
<el-radio v-model="radio1" :label="itm.id" @input="changeRadio(itm)" />
</p>
</div>
</div>
@ -28,17 +20,9 @@
</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
>
<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>
@ -67,7 +51,7 @@ export default {
visible: Boolean,
info: {
type: Object,
default: () => {},
default: () => { },
},
},
data() {
@ -255,7 +239,7 @@ export default {
opacity: 0;
}
.EventAddPlanDialog {
.PlanQbbDialog {
gap: 9px;
width: 650px;
height: 510px;

86
ruoyi-ui/src/views/JiHeExpressway/utils/enum.js

@ -288,49 +288,49 @@ export const eventSubClassMap = {
],
2: [
{
value: 1,
value: '1',
label: "高速主线",
},
{
value: 2,
value: '2',
label: "服务区",
},
{
value: 3,
value: '3',
label: "立交桥",
},
{
value: 4,
value: '4',
label: "收费站",
},
],
3: [
{
value: 1,
value: '1',
label: "主线关闭",
},
{
value: 2,
value: '2',
label: "主线限行",
},
{
value: 6,
value: '6',
label: "收费站关闭",
},
{
value: 7,
value: '7',
label: "收费站限行",
},
{
value: 10,
value: '10',
label: "匝道立交关闭",
},
{
value: 12,
value: '12',
label: "匝道立交限行",
},
{
value: 14,
value: '14',
label: "服务区关闭",
},
],
@ -394,43 +394,43 @@ export const eventSubClassMap = {
],
7: [
{
value: 1,
value: '1',
label: "道路养护施工",
},
{
value: 2,
value: '2',
label: "收费站养护施工",
},
{
value: 3,
value: '3',
label: "服务区养护施工",
},
{
value: 4,
value: '4',
label: "枢纽立交匝道养护施工",
},
{
value: 5,
value: '5',
label: "地方道路养护施工",
},
{
value: 6,
value: '6',
label: "道路工程建设施工",
},
{
value: 7,
value: '7',
label: "收费站工程建设施工",
},
{
value: 8,
value: '8',
label: "服务区工程建设施工",
},
{
value: 9,
value: '9',
label: "枢纽立交匝道工程建设施工",
},
{
value: 10,
value: '10',
label: "地方道路工程建设施工",
},
],
@ -450,27 +450,27 @@ export const eventSubClassMap = {
],
9: [
{
value: 1,
value: '1',
label: "摄像机",
},
{
value: 2,
value: '2',
label: "护栏",
},
{
value: 3,
value: '3',
label: "隔离栅",
},
{
value: 4,
value: '4',
label: "情报板",
},
{
value: 5,
value: '5',
label: "防炫板",
},
{
value: 6,
value: '6',
label: "其他",
},
],
@ -514,7 +514,7 @@ export const eventSubClassMap = {
],
11: [
{
value: 1,
value: '1',
label: "其他事件",
},
],
@ -763,10 +763,10 @@ export const planDeviceMap = {
};
//预案设备Options
export const planDeviceOptions = [
{
value: 1,
label: "摄像机",
},
// {
// value: 1,
// label: "摄像机",
// },
{
value: 2,
label: "可变信息标志",
@ -781,7 +781,7 @@ export const planDeviceOptions = [
// },
{
value: 5,
label: "路段语音广播",
label: "语音广播",
},
// {
// value: 6,
@ -791,17 +791,17 @@ export const planDeviceOptions = [
// value: 7,
// label: "毫米波雷达",
// },
{
value: 8,
label: "合流区预警",
},
// {
// value: 8,
// label: "合流区预警",
// },
// {
// value: 9,
// label: "智慧锥桶",
// },
{
value: 10,
label: "激光疲劳唤醒",
label: "疲劳唤醒",
},
// {
// value: 11,
@ -813,12 +813,12 @@ export const planDeviceOptions = [
},
{
value: 13,
label: "智能设备箱",
},
{
value: 14,
label: "光线在线监测",
label: "设备箱",
},
// {
// value: 14,
// label: "光线在线监测",
// },
];
// 非机预警事件主类

Loading…
Cancel
Save