From c78850863094ce7b081ce0962b3f016b8af45607 Mon Sep 17 00:00:00 2001
From: zhoule <zz221011@163.com>
Date: Wed, 13 Mar 2024 17:07:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E9=A2=84=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/common/menuData.js               |   6 +
 .../event/plan/addAndEditDialog/index.vue     | 617 ++++++++++++++++++
 .../pages/control/event/plan/data.js          |  79 +++
 .../control/event/plan/formTable/index.vue    | 343 ++++++++++
 .../control/event/plan/images/refresh.svg     |  22 +
 .../pages/control/event/plan/index.vue        | 222 +++++++
 6 files changed, 1289 insertions(+)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/data.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/formTable/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/images/refresh.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/index.vue

diff --git a/ruoyi-ui/src/common/menuData.js b/ruoyi-ui/src/common/menuData.js
index 21d94eb8..3e788ba5 100644
--- a/ruoyi-ui/src/common/menuData.js
+++ b/ruoyi-ui/src/common/menuData.js
@@ -64,6 +64,12 @@ export default [
             name: "controlEventEvent",
             component: "control/event/event/index.vue",
           },
+          {
+            title: "事件预案",
+            path: "/control/event/plan",
+            name: "controlEventPlam",
+            component: "control/event/plan/index.vue",
+          },
           {
             title: "协调调度记录",
             path: "/control/event/coordinateSchedulingRecords",
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/index.vue
new file mode 100644
index 00000000..95811c77
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/index.vue
@@ -0,0 +1,617 @@
+<template>
+    <Dialog v-model="modelVisible" title="新增预案">
+        <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
+                        v-if="(formData.eventCategory == 1 && formData.eventType !== 8) || formData.eventCategory == 2"
+                        label="触发类型:" prop="triggerMechanism">
+
+                        <el-select
+                            v-if="(formData.eventCategory == 1 && formData.eventType !== 6) || formData.eventCategory == 2"
+                            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-select v-if="formData.eventCategory == 1 && formData.eventType == 6"
+                            v-model="formData.triggerMechanism" placeholder="请选择触发类型">
+                            <el-option-group label="主线">
+                                <el-option label="主线封闭" value="1"></el-option>
+                                <el-option label="主线限行" value="2"></el-option>
+                            </el-option-group>
+                            <el-option-group label="收费站">
+                                <el-option label="收费站封闭" value="3"></el-option>
+                                <el-option label="收费站限行" value="4"></el-option>
+                            </el-option-group>
+                            <el-option-group label="匝道立交">
+                                <el-option label="匝道立交封闭" value="5"></el-option>
+                                <el-option label="匝道立交限行" value="6"></el-option>
+                            </el-option-group>
+                            <el-option-group label="服务区">
+                                <el-option label="服务区封闭" value="7"></el-option>
+                                <el-option label="服务区限行" value="8"></el-option>
+                            </el-option-group>
+                        </el-select>
+
+                    </el-form-item>
+                </div>
+                <div class="second">
+                    <el-row>
+                        <el-col :span="2">
+                            <div class="text">执行操作:</div>
+                        </el-col>
+                        <el-col :span="22">
+                            <FormTable ref="secondFormTable"></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></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";
+
+const optionsMap = {
+    1: {
+        1: [
+            {
+                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: '其他'
+            }
+        ],
+        2: [
+            {
+                value: 1,
+                label: '侧翻'
+            },
+            {
+                value: 2,
+                label: '撞障碍物'
+            },
+            {
+                value: 3,
+                label: '货物洒落'
+            },
+            {
+                value: 4,
+                label: '撞护栏'
+            },
+            {
+                value: 5,
+                label: '自燃'
+            },
+            {
+                value: 6,
+                label: '追尾'
+            }
+        ],
+        3: [
+            {
+                value: 1,
+                label: '行人'
+            },
+            {
+                value: 2,
+                label: '非机动车'
+            },
+            {
+                value: 3,
+                label: '摩托车'
+            },
+            {
+                value: 4,
+                label: '其他'
+            }
+        ],
+        4: [
+            {
+                value: 1,
+                label: '高速主线'
+            },
+            {
+                value: 2,
+                label: '服务区'
+            },
+            {
+                value: 3,
+                label: '立交桥'
+            },
+            {
+                value: 4,
+                label: '收费站'
+            }
+        ],
+        5: [
+            {
+                value: 1,
+                label: '道路拥堵'
+            },
+            {
+                value: 2,
+                label: '立交拥堵'
+            },
+            {
+                value: 3,
+                label: '收费站拥堵'
+            },
+            {
+                value: 4,
+                label: '收费站服务区拥堵'
+            }
+        ],
+        6: [
+
+        ],
+        7: [
+            {
+                value: 1,
+                label: '封闭、暂停营业'
+            },
+            {
+                value: 2,
+                label: '重要设施停用'
+            },
+            {
+                value: 3,
+                label: '其他异常'
+            }
+        ],
+        8: [],
+        9: [
+            {
+                value: 1,
+                label: '烟雾'
+            },
+            {
+                value: 2,
+                label: '倒伏树木'
+            },
+            {
+                value: 3,
+                label: '洒落物'
+            },
+            {
+                value: 4,
+                label: '动物'
+            },
+            {
+                value: 5,
+                label: '其他'
+            }
+        ]
+    },
+    2: {
+        1: [{
+            value: 1,
+            label: '雾'
+        }],
+        2: [],
+        3: [],
+        4: [],
+        5: [],
+        6: [],
+        7: [],
+    }
+};
+
+export default {
+    name: 'addAndEditDialog',
+    components: {
+        Dialog,
+        Form,
+        Button,
+        FormTable
+    },
+    model: {
+        prop: 'visible',
+        event: 'close'
+    },
+    props: {
+        visible: Boolean,
+        detail: {
+            type: Object,
+            default: () => { }
+        }
+    },
+    data() {
+        return {
+            activeName: "TrafficAccident",
+            submitting: false,
+            formConfig: {},
+            formData: {
+                eventCategory: 1,
+                eventType: 1,
+                triggeringCondition: 0
+            },
+            index: 1,
+            roads: [],
+            direction: [],
+            lwss: [],
+            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: '小于(<)'
+                },
+            ],
+            rules: {
+                planName: [
+                    { required: true, message: '请输入预案名称', trigger: 'blur' },
+
+                ],
+                eventType: [
+                    { required: true, message: '请选择事件类型', trigger: 'change' }
+                ],
+            }
+        }
+    },
+    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);
+                })
+
+            ])
+        },
+        changeEventType(value = 1) {
+            this.mechanismOptions = optionsMap[this.formData.eventCategory || 1][value];
+        },
+        changeRadio(value = 1) {
+            const optionsMap = {
+                1: [{
+                    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: '路障清除'
+                }],
+                2: [{
+                    value: 1,
+                    label: '异常天气'
+                },
+                {
+                    value: 2,
+                    label: '拥堵'
+                },
+                {
+                    value: 3,
+                    label: '非机动车'
+                },
+                {
+                    value: 4,
+                    label: '行人'
+                },
+                {
+                    value: 5,
+                    label: '烟火'
+                },
+                {
+                    value: 6,
+                    label: '抛洒物'
+                },
+                {
+                    value: 7,
+                    label: '逆行'
+                },
+                ]
+            }
+            this.eventOptions = optionsMap[value];
+            this.changeEventType();
+        },
+        handleChange() {
+
+        },
+        handleSubmit() {
+            this.$refs['ruleForm'].validate((valid) => {
+                if (valid) {
+                    this.submitting = true;
+                    console.log('formData', this.formData)
+                    this.modelVisible = false;
+                    this.submitting = false;
+                    // this.$emit('queryData',true)
+                    console.log(this.$refs['secondFormTable'].tableData)
+                    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 .24s;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.EventAddPlanDialog {
+    gap: 9px;
+    width: 1080px;
+    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>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/data.js
new file mode 100644
index 00000000..d9eeb945
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/data.js
@@ -0,0 +1,79 @@
+import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
+import { merge, cloneDeep } from "lodash";
+
+export const searchFormList = [
+  {
+    label: "事件状态:",
+    key: "eventState",
+    type: "RadioGroup",
+    options: {
+      options: [
+        {
+          key: "0",
+          label: "未解决",
+        },
+        {
+          key: "1",
+          label: "已解决",
+        },
+        {
+          key: "2",
+          label: "已关闭",
+        },
+      ],
+    },
+  },
+  PresetFormItems.eventSources,
+  PresetFormItems.eventType,
+  {
+    label: "方向:",
+    key: "direction",
+    type: "RadioGroup",
+    options: {
+      options: [
+        {
+          key: "济南方向",
+          label: "济南方向",
+        },
+        {
+          key: "菏泽方向",
+          label: "菏泽方向",
+        },
+        {
+          key: "双向",
+          label: "双向",
+        },
+      ],
+    },
+  },
+  {
+    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,
+  }),
+];
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/formTable/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/formTable/index.vue
new file mode 100644
index 00000000..119ccd7f
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/formTable/index.vue
@@ -0,0 +1,343 @@
+<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="phrases2" width="260">
+                <template slot-scope="scope">
+                    <el-select v-if="scope.row.deviceType == 1" v-model="scope.row.phrases2" placeholder="检索规则条件">
+                        <el-option v-for="item in zyOptions" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+
+                    <div v-if="scope.row.deviceType == 2" class="plhx">
+                        <el-select v-model="scope.row.phrases1" placeholder="">
+                            <el-option label="事发上游最近" :value="1"></el-option>
+                        </el-select>
+                        <el-input-number v-model="scope.row.phrases2" :min="0" :max="9999"
+                            style="width: 130px;"></el-input-number>个
+                    </div>
+
+                    <div v-if="scope.row.deviceType == 3 || scope.row.deviceType == 4" class="plhx">
+                        <el-select v-model="scope.row.phrases1" placeholder="">
+                            <el-option label="最近公里数" :value="1"></el-option>
+                        </el-select>
+                        <el-input-number v-model="scope.row.phrases2" :min="0" :max="9999"
+                            style="width: 130px;"></el-input-number>
+                        <p style="width: 56px;">公里</p>
+                    </div>
+
+                </template>
+            </ElTableColumn>
+
+            <ElTableColumn prop="phrases3" width="370">
+                <template slot-scope="scope">
+                    <div v-if="scope.row.deviceType == 1" class="mjs">
+                        <el-select v-model="scope.row.phrases3" placeholder="" multiple collapse-tags>
+                            <el-option v-for="item in options" :key="item.value" :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select>
+                        <el-input placeholder="请选择" v-model="scope.row.phrases4" readonly>
+                            <i slot="suffix" class="el-input__icon el-icon-search"></i>
+                        </el-input>
+                    </div>
+
+                    <div v-if="scope.row.deviceType == 2" class="mjs">
+                        <el-select v-model="scope.row.phrases4" placeholder="">
+                            <el-option label="工作模式" :value="1"></el-option>
+                        </el-select>
+                        <el-select v-model="scope.row.phrases6" placeholder="">
+                            <el-option label="操作时长" :value="1"></el-option>
+                        </el-select>
+                    </div>
+
+                    <div v-if="scope.row.deviceType == 3" class="mjs">
+                        <el-select v-model="scope.row.phrases4" placeholder="">
+                            <el-option label="控制模式" :value="1"></el-option>
+                        </el-select>
+                        <el-select v-model="scope.row.phrases5" placeholder="">
+                            <el-option label="选择时间" :value="1"></el-option>
+                        </el-select>
+                        <el-select v-model="scope.row.phrases6" placeholder="">
+                            <el-option label="工作状态" :value="1"></el-option>
+                        </el-select>
+                    </div>
+
+                    <div v-if="scope.row.deviceType == 4" class="mjs">
+                        <el-input v-model="scope.row.phrases4" 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>
+    </div>
+</template>
+
+<script>
+import Table from '@screen/components/Table.vue';
+import Button from '@screen/components/Buttons/Button.vue';
+import request from "@/utils/request";
+import { Message } from 'element-ui'
+
+
+export default {
+    name: 'formTable',
+    components: {
+        Button,
+        Table,
+    },
+    model: {
+        prop: 'visible',
+        event: 'update:value'
+    },
+    props: {
+        visible: Boolean,
+        eventType: Number,
+        // process: {
+        //     type: Array,
+        //     default: () => []
+        // }
+    },
+    data() {
+        return {
+            tableData: [
+                {
+                    deviceType: 1,
+                    phrases2: 1,
+                    phrases4: '安全行驶'
+                }
+            ],
+            deviceOptions: [
+                {
+                    value: 1,
+                    label: '门架式可变信息标志'
+                },
+                {
+                    value: 2,
+                    label: '疲劳唤醒'
+                },
+                {
+                    value: 3,
+                    label: '行车诱导'
+                },
+                {
+                    value: 4,
+                    label: '路段广播'
+                }
+            ],
+            zyOptions: [
+                {
+                    value: 1,
+                    label: '指定设备资源'
+                },
+                {
+                    value: 2,
+                    label: '事发上游最近'
+                },
+                {
+                    value: 3,
+                    label: '最近公里数'
+                },
+            ],
+            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: '其他事件'
+                }
+            ],
+            deviceType: 1,
+        }
+    },
+    methods: {
+        getProcess() {
+            this.tableData = [];
+            request({
+                url: `/business/dcEventType/${this.eventType}`,
+                method: "get",
+            }).then(result => {
+                if (result.code != 200) return Message.error(result.msg);
+                //流程列表
+                this.process = [];
+                this.tableData = [];
+                result.data.processConfigList?.forEach((it, index) => {
+                    let commonPhrasesArr = it.commonPhrases ? it.commonPhrases.split(',') : [''];
+                    let phrs = [];
+                    commonPhrasesArr?.forEach(phr => {
+                        phrs.push({ id: it.id, phrases: phr })
+                    })
+                    this.process.push({
+                        ...it,
+                        phrs: phrs,
+                        label: it.processNode,
+                        isActive: index == 0 ? true : false,
+                    })
+                    if (index == 0) {
+                        this.id = it.id;
+                        this.tableData = phrs;
+                    }
+                })
+
+            })
+        },
+        changeDeviceType(value) {
+            this.deviceType = value;
+        },
+        getTableData() {
+            let rows = this.process.find(item => item.id == this.id);
+            return rows?.phrs || [];
+        },
+        updateTableData(id = 1) {
+            this.id = id;
+            this.tableData = [];
+            let pros = this.process.find(item => item.id == id);
+            this.tableData = pros.phrs;
+        },
+        onAdd(id) {
+            this.tableData.push({
+                id: id,
+                phrases: ''
+            })
+        },
+        onDel(index) {
+            if (this.tableData.length <= 1) {
+                return Message.warning('最后一项不可删除！');
+            }
+            this.tableData.splice(index, 1)
+        },
+        submitTable() {
+            let data = []
+            this.process.forEach((lc) => {
+                let commonPhrases = [];
+                lc.phrs.forEach(phr => { if (phr.phrases) commonPhrases.push(phr.phrases) })
+                data.push({
+                    commonPhrases: commonPhrases.join(','),
+                    id: lc.id,
+                    eventType: lc.eventType,
+                    nodeNode: lc.nodeNode,
+                    processNode: lc.processNode
+                })
+            })
+            console.log('data', data)
+            // return;
+            request({
+                url: `/business/dcEventType/updateDcProcessConfig`,
+                method: "post",
+                data: {
+                    eventType: this.eventType,
+                    processConfigList: data
+                }
+            }).then(result => {
+                if (result.code != 200) return Message.error(result.msg);
+                Message.success(result.msg);
+                this.modelVisible = false;
+                this.$emit('reInitData', true)
+            })
+        }
+    }
+}
+</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;
+        }
+    }
+
+    .plhx {
+        display: flex;
+    }
+
+
+}
+
+.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>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/images/refresh.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/images/refresh.svg
new file mode 100644
index 00000000..e31a5500
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/images/refresh.svg
@@ -0,0 +1,22 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142814398">
+<g id="Group 1142814396">
+<path id="Rectangle 1304" d="M1.0437 2.41495L4.5636 2.01738L4.91112 6.00562" stroke="white" stroke-linecap="round"/>
+<g id="Ellipse 835">
+<mask id="path-2-inside-1_290_77" fill="white">
+<path d="M4.29579 2.52494C4.09359 2.27296 3.71712 2.25216 3.51748 2.50144C2.86315 3.31847 2.39514 4.30903 2.15904 5.38649C1.87758 6.67096 1.93836 8.02122 2.3337 9.26652C2.72904 10.5118 3.44118 11.5962 4.38007 12.3826C5.16561 13.0406 6.08036 13.4652 7.0411 13.6229C7.35243 13.674 7.61901 13.4293 7.63212 13.1145C7.64523 12.7997 7.39954 12.5346 7.08935 12.4765C6.32757 12.3339 5.60349 11.9884 4.97813 11.4646C4.19938 10.8124 3.6087 9.91289 3.28078 8.87998C2.95287 7.84706 2.90245 6.72709 3.13591 5.66169C3.33404 4.75752 3.72906 3.92712 4.28182 3.24492C4.4503 3.03698 4.46523 2.7361 4.29579 2.52494Z"/>
+</mask>
+<path d="M4.29579 2.52494C4.09359 2.27296 3.71712 2.25216 3.51748 2.50144C2.86315 3.31847 2.39514 4.30903 2.15904 5.38649C1.87758 6.67096 1.93836 8.02122 2.3337 9.26652C2.72904 10.5118 3.44118 11.5962 4.38007 12.3826C5.16561 13.0406 6.08036 13.4652 7.0411 13.6229C7.35243 13.674 7.61901 13.4293 7.63212 13.1145C7.64523 12.7997 7.39954 12.5346 7.08935 12.4765C6.32757 12.3339 5.60349 11.9884 4.97813 11.4646C4.19938 10.8124 3.6087 9.91289 3.28078 8.87998C2.95287 7.84706 2.90245 6.72709 3.13591 5.66169C3.33404 4.75752 3.72906 3.92712 4.28182 3.24492C4.4503 3.03698 4.46523 2.7361 4.29579 2.52494Z" stroke="white" stroke-width="2" mask="url(#path-2-inside-1_290_77)"/>
+</g>
+</g>
+<g id="Group 1142814397">
+<path id="Rectangle 1304_2" d="M15.0437 11.585L11.5238 11.9826L11.1763 7.99438" stroke="white" stroke-linecap="round"/>
+<g id="Ellipse 835_2">
+<mask id="path-4-inside-2_290_77" fill="white">
+<path d="M11.7916 11.4751C11.9938 11.727 12.3703 11.7478 12.5699 11.4986C13.2242 10.6815 13.6923 9.69097 13.9284 8.61351C14.2098 7.32904 14.149 5.97878 13.7537 4.73348C13.3584 3.48817 12.6462 2.40376 11.7073 1.61737C10.9218 0.95942 10.007 0.534814 9.0463 0.377109C8.73497 0.326006 8.46839 0.570722 8.45528 0.885536C8.44218 1.20035 8.68786 1.46544 8.99805 1.5235C9.75983 1.6661 10.4839 2.01159 11.1093 2.53538C11.888 3.18765 12.4787 4.08711 12.8066 5.12002C13.1345 6.15294 13.1849 7.27291 12.9515 8.33831C12.7534 9.24248 12.3583 10.0729 11.8056 10.7551C11.6371 10.963 11.6222 11.2639 11.7916 11.4751Z"/>
+</mask>
+<path d="M11.7916 11.4751C11.9938 11.727 12.3703 11.7478 12.5699 11.4986C13.2242 10.6815 13.6923 9.69097 13.9284 8.61351C14.2098 7.32904 14.149 5.97878 13.7537 4.73348C13.3584 3.48817 12.6462 2.40376 11.7073 1.61737C10.9218 0.95942 10.007 0.534814 9.0463 0.377109C8.73497 0.326006 8.46839 0.570722 8.45528 0.885536C8.44218 1.20035 8.68786 1.46544 8.99805 1.5235C9.75983 1.6661 10.4839 2.01159 11.1093 2.53538C11.888 3.18765 12.4787 4.08711 12.8066 5.12002C13.1345 6.15294 13.1849 7.27291 12.9515 8.33831C12.7534 9.24248 12.3583 10.0729 11.8056 10.7551C11.6371 10.963 11.6222 11.2639 11.7916 11.4751Z" stroke="white" stroke-width="2" mask="url(#path-4-inside-2_290_77)"/>
+</g>
+</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/index.vue
new file mode 100644
index 00000000..5ec17711
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/index.vue
@@ -0,0 +1,222 @@
+<template>
+    <div class='emergencyProcessManagement'>
+
+        <!-- 搜索栏 -->
+        <div class="filter">
+            <div>
+                <ButtonGradient @click="onAdd">
+                    <template #prefix>
+                        <img src="@screen/images/insert.svg" />
+                    </template>
+                    新增
+                </ButtonGradient>
+                <ButtonGradient @click="onRefresh" class="refresh-btn">
+                    <template #prefix>
+                        <img src="./images/refresh.svg" />
+                    </template>
+                    刷新
+                </ButtonGradient>
+            </div>
+            <InputSearch style="width: 402px;" :formList="searchFormList"
+                :formConfigOptions="{ dFormData: { eventState: 0 } }" @handleSearch="handleSearch" />
+        </div>
+
+        <!-- 内容 -->
+        <div class="body">
+            <Table :data="tableData">
+                <ElTableColumn prop="strEventCategory" label="事件分类" width="100" align="center" />
+                <ElTableColumn prop="strEventType" label="事件类型" width="100" align="center" />
+                <ElTableColumn prop="planName" label="预案名称" width="140" align="center" />
+                <ElTableColumn prop="triggeringCondition" label="检索条件" width="140" />
+                <ElTableColumn prop="deviceType" label="设备类型" width="140" />
+                <ElTableColumn prop="controllableDevice" label="可控设备" width="200" />
+                <ElTableColumn prop="controlCommand" label="控制指令" />
+                <ElTableColumn label="操作" width="210" align="center">
+                    <template slot-scope="scope">
+                        <ElButton type="text" style="color: #00D1FF;" @click="showDisposal(scope.row)">修改</ElButton>
+                        <ElButton type="text" style="color: #00EBC1;" @click="handleDelete(scope.row)">删除</ElButton>
+                    </template>
+                </ElTableColumn>
+            </Table>
+        </div>
+
+        <!-- 新增修改弹窗 -->
+        <AddAndEditDialog :visible="isShowDialog" :detail="detail" @close="onCloseAddNew"
+            @update:phrasesData="onUpdatePhrasesData" @reInitData="initData" />
+
+        <!-- 分页 -->
+        <div class="footer">
+            <Pagination @current-change="initData" @size-change="onSizeChange" width="'100%'"
+                :page-sizes="[10, 20, 30, 40, 50]" :page-size="searchData.pageSize"
+                :current-page.sync="searchData.pageNum" layout="total, sizes, prev, pager, next" :total="total">
+            </Pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
+import Pagination from '@screen/components/Pagination.vue';
+import Table from '@screen/components/Table.vue';
+import InputSearch from '@screen/components/InputSearch/index.vue';
+import AddAndEditDialog from './addAndEditDialog';
+import request from "@/utils/request";
+import { confirm } from "@screen/utils/common";
+import { Message } from 'element-ui'
+import { searchFormList } from './data';
+
+const eventTypeMap = {
+    0: {
+        1: '交通事故',
+        2: '车辆故障',
+        3: '交通管制',
+        4: '交通拥堵',
+        5: '非法上路',
+        6: '路障清除',
+        7: '施工建设',
+        8: '服务区异常',
+        9: '设施设备隐患',
+        10: '异常天气',
+        11: '其他事件',
+    },
+    1: {
+        1: '异常天气',
+        2: '拥堵',
+        3: '非机动车',
+        4: '行人',
+        5: '烟火',
+        6: '抛洒物',
+        7: '逆行',
+    },
+    2: {}
+
+}
+
+
+export default {
+    name: 'controlEventPlan',
+    components: {
+        ButtonGradient,
+        Pagination,
+        Table,
+        InputSearch,
+        AddAndEditDialog
+    },
+    data() {
+        return {
+            tableData: [],
+            searchFormList,
+            isShowDialog: false,
+            total: 20,
+            eventType: 1,
+            searchData: {
+                pageSize: 20,
+                pageNum: 1,
+            },
+            phrasesData: [],
+            detail: {}
+        }
+    },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+            request({
+                url: `/business/plans/list`,
+                method: "get",
+                params: this.searchData,
+            }).then((result) => {
+                if (result.code != 200) return Message.error(result?.msg);
+                result.rows.forEach(it => {
+                    it.strEventCategory = it.eventCategory == 0 ? '交通事件' : '感知事件';
+                    it.strEventType = eventTypeMap[it.eventCategory || 0][it.eventType];
+                })
+                this.tableData = result.rows;
+                this.total = result.total;
+            });
+        },
+        onSizeChange(pageSize) {
+            // this.searchData.pageSize = pageSize;
+            // this.getData();
+        },
+        onRefresh() {
+            this.initData();
+        },
+        onAdd() {
+            this.isShowDialog = true
+        },
+        onCloseAddNew() {
+            this.isShowDialog = false
+        },
+        onUpdatePhrasesData() {
+
+        },
+        handleSearch() {
+
+        },
+        async handleDelete(data) {
+            await confirm({ message: "是否要删除该预案?" });
+            // return console.log('删除成功',data.id)
+            request({
+                url: `/business/plans/${data.id}`,
+                method: "DELETE",
+
+            }).then(result => {
+                if (result.code != 200) return Message.error("删除失败");
+                this.initData()
+
+                Message.success("删除成功")
+            }).catch(() => {
+                Message.error("删除失败")
+            })
+        }
+    }
+}
+</script>
+
+<style lang='scss' scoped>
+.emergencyProcessManagement {
+    padding: 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;
+        position: relative;
+        overflow: hidden;
+
+        .content {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+        }
+    }
+
+    .footer {
+        margin-top: 15px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+</style>
\ No newline at end of file