From 097d74f7244dcfbbc75adbf10d180d4fb96f134e Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Mon, 18 Mar 2024 11:29:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../event/plan/addAndEditDialog/index.vue     | 1344 +++++++++--------
 .../components/heightway/index.vue            |  123 +-
 2 files changed, 783 insertions(+), 684 deletions(-)

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
index 4c9b449e..21d6179c 100644
--- 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
@@ -1,691 +1,743 @@
 <template>
-    <Dialog v-model="modelVisible" :title="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>
+  <Dialog v-model="modelVisible" :title="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>
+          <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" :tableData="secondFormData"></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"></FormTable>
-                        </el-col>
-                    </el-row>
-                </div>
-            </ElForm>
+        <div class="second">
+          <el-row>
+            <el-col :span="2">
+              <div class="text">执行操作:</div>
+            </el-col>
+            <el-col :span="22">
+              <FormTable
+                ref="secondFormTable"
+                :tableData="secondFormData"
+              ></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"
+              ></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 #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 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: [],
-    }
+  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
+  name: "addAndEditDialog",
+  components: {
+    Dialog,
+    Form,
+    Button,
+    FormTable,
+  },
+  model: {
+    prop: "visible",
+    event: "close",
+  },
+  props: {
+    visible: Boolean,
+    detail: {
+      type: Object,
+      default: () => {},
     },
-    model: {
-        prop: 'visible',
-        event: 'close'
-    },
-    props: {
-        visible: Boolean,
-        detail: {
-            type: Object,
-            default: () => { }
+  },
+  data() {
+    return {
+      title: "新增预案",
+      dialogType: 1,
+      planId: 0,
+      submitting: false,
+      formData: {
+        eventCategory: 1,
+        eventType: 1,
+        triggerMechanism: 1,
+      },
+      secondFormData: [
+        {
+          deviceType: 1,
+          searchRule: 1,
+          qbb: "",
+        },
+      ],
+      thirdFormData: [
+        {
+          deviceType: 1,
+          searchRule: 1,
+          qbb: "",
+        },
+      ],
+      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: "请输入预案名称" }],
+        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.initData(this.detail.id);
+          } else {
+            this.title = "新增预案";
+            this.dialogType = 1;
+            this.formData = {
+              eventCategory: 1,
+              eventType: 1,
+              triggerMechanism: 1,
+            };
+          }
         }
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("close", val);
+      },
     },
-    data() {
-        return {
-            title: '新增预案',
-            dialogType: 1,
-            planId: 0,
-            submitting: false,
-            formData: {
-                eventCategory: 1,
-                eventType: 1,
-                triggerMechanism: 1
-            },
-            secondFormData: [{
-                deviceType: 1,
-                searchRule: 1,
-                qbb: ''
-            }],
-            thirdFormData: [{
-                deviceType: 1,
-                searchRule: 1,
-                qbb: ''
-            }],
-            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' },
+  },
+  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;
 
-                ],
-                eventType: [
-                    { required: true, message: '请选择事件类型', trigger: 'change' }
-                ],
+          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) => {
+            if (it.deviceList) {
+              it.deviceList = it.deviceList.split(",");
             }
-        }
+            if (it.actionType == 1) {
+              this.secondFormData.push(it);
+            } else if (it.actionType == 2) {
+              this.thirdFormData.push(it);
+            }
+          });
+        })
+        .catch((err) => {
+          console.log(err);
+          Message.error("查询事件预案列表失败", err);
+        });
     },
-    mounted() {
-
+    changeEventType(value = 1) {
+      this.mechanismOptions =
+        optionsMap[this.formData.eventCategory || 1][value];
     },
-    computed: {
-        modelVisible: {
-            get() {
-                if (this.visible) {
-
-                    if (Object.keys(this.detail).length > 0) {
-                        this.title = '修改预案';
-                        this.dialogType = 2;
-                        this.initData(this.detail.id);
-                    } else {
-                        this.title = '新增预案';
-                        this.dialogType = 1;
-                        this.formData = {
-                            eventCategory: 1,
-                            eventType: 1,
-                            triggerMechanism: 1
-                        }
-                    }
-                }
-                return this.visible;
-            },
-            set(val) {
-                this.$emit('close', val)
-            }
-        },
+    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();
     },
-    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 => {
-                    if (it.deviceList) {
-                        it.deviceList = it.deviceList.split(',');
-                    }
-                    if (it.actionType == 1) {
-                        this.secondFormData.push(it);
-                    } else if (it.actionType == 2) {
-                        this.thirdFormData.push(it);
-                    }
-                })
+    handleChange() {},
+    formatData(it, value = 1) {
+      let data = { ...it, actionType: value };
+      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,
+          state: it.state,
+        };
+        if (it.time && it?.time[0]) {
+          other = {
+            controlModel: it.controlModel,
+            state: 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,
+          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 dcArr = [];
+          secondFormTable.forEach((it) => {
+            dcArr.push(this.formatData(it, 1));
+          });
+          thirdFormTable.forEach((it) => {
+            dcArr.push(this.formatData(it, 2));
+          });
 
-            }).catch((err) => {
-                console.log(err)
-                Message.error("查询事件预案列表失败", err);
+          console.log({
+            ...this.formData,
+            dcExecuteAction: dcArr,
+          });
+          // return;
+          if (this.dialogType == 1) {
+            //新增
+            request({
+              url: `/business/plans`,
+              method: "post",
+              data: {
+                ...this.formData,
+                dcExecuteAction: dcArr,
+              },
             })
-
-        },
-        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() {
-
-        },
-        formatData(it, value = 1) {
-            let data = { ...it, actionType: value }
-            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,
-                    state: it.state,
-                }
-                if (it.time && it?.time[0]) {
-                    other = {
-                        controlModel: it.controlModel,
-                        state: 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,
-                    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 dcArr = [];
-                    secondFormTable.forEach(it => {
-                        dcArr.push(this.formatData(it, 1));
-                    })
-                    thirdFormTable.forEach(it => {
-                        dcArr.push(this.formatData(it, 2));
-                    })
-
-                    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);
-                        })
-
-                    }
-
-
-                }
-
+              .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);
+              });
+          }
         }
-    }
-}
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .fade-enter-active,
 .fade-leave-active {
-    transition: opacity .24s;
+  transition: opacity 0.24s;
 }
 
 .fade-enter,
 .fade-leave-to {
-    opacity: 0;
+  opacity: 0;
 }
 
 .EventAddPlanDialog {
-    gap: 9px;
-    width: 1080px;
-    height: 310px;
-    display: flex;
-    flex-direction: column;
+  gap: 9px;
+  width: 1080px;
+  height: 310px;
+  display: flex;
+  flex-direction: column;
 
-    .first,
-    .second,
-    .third {
-        padding: 5px 10px 8px;
-        background-color: #296887;
-        margin-bottom: 15px;
+  .first,
+  .second,
+  .third {
+    padding: 5px 10px 8px;
+    background-color: #296887;
+    margin-bottom: 15px;
 
-        .text {
-            margin-top: 12px;
-        }
+    .text {
+      margin-top: 12px;
     }
+  }
 
-    .form {
-        flex: 1;
-        overflow-y: auto;
-    }
+  .form {
+    flex: 1;
+    overflow-y: auto;
+  }
 
-    .footer {
-        display: flex;
-        justify-content: end;
-        gap: 15px;
-    }
+  .footer {
+    display: flex;
+    justify-content: end;
+    gap: 15px;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue
index 387c2a8c..931eb552 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue
@@ -3,36 +3,65 @@
     <WgtTitle :title="'交通路段状态'"></WgtTitle>
     <div class="board">
       <div class="searchPanel">
-        <div>起始桩号：k</div>
-        <el-input class="inputZh" v-model="start" placeholder="55"></el-input>
-        <span>+</span>
-        <el-input
-          class="inputZh inputJl"
-          v-model="start1"
-          placeholder="378"
-        ></el-input>
-        <div>结束桩号：k</div>
-        <el-input class="inputZh" v-model="start2" placeholder="208"></el-input>
-        <span>+</span>
-        <el-input
-          class="inputZh inputJl"
-          v-model="start3"
-          placeholder="153"
-        ></el-input>
-        <div>路段方向：</div>
-        <el-select v-model="area" class="selectRoad" placeholder="请选择">
-          <el-option
-            v-for="item in areaOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+        <el-form :inline="true" :model="ruleForm" ref="ruleForm">
+          <el-form-item label="起始桩号：k" prop="start">
+            <!-- <div>起始桩号：k</div> -->
+            <el-input
+              class="inputZh"
+              v-model="ruleForm.start"
+              placeholder="55"
+            ></el-input>
+            <span>+</span>
+          </el-form-item>
+          <el-form-item label="" prop="start1">
+            <el-input
+              class="inputZh inputJl"
+              v-model="ruleForm.start1"
+              placeholder="378"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="结束桩号：k" prop="start2">
+            <!-- <div>结束桩号：k</div> -->
+            <el-input
+              class="inputZh"
+              v-model="ruleForm.start2"
+              placeholder="208"
+            ></el-input>
+            <span>+</span>
+          </el-form-item>
+          <el-form-item label="" prop="start3">
+            <el-input
+              class="inputZh inputJl"
+              v-model="ruleForm.start3"
+              placeholder="153"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="路段方向：" prop="area">
+            <el-select
+              v-model="ruleForm.area"
+              class="selectRoad"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in areaOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            ><el-button type="primary" class="btnSearch" @click="onSubmit"
+              >搜索</el-button
+            >
+            <el-button class="btnReset" @click="onClose"
+              >重置</el-button
+            ></el-form-item
           >
-          </el-option>
-        </el-select>
-        <el-button type="primary" class="btnSearch" @click="onSubmit"
-          >搜索</el-button
-        >
-        <el-button class="btnReset">重置</el-button>
+        </el-form>
+
+        <!-- <div>路段方向：</div> -->
       </div>
       <div class="tblResult">
         <div class="tblTd">
@@ -66,10 +95,13 @@ export default {
   },
   data() {
     return {
-      start: "",
-      start1: "",
-      start2: "",
-      start3: "",
+      ruleForm: {
+        start: "",
+        start1: "",
+        start2: "",
+        start3: "",
+        area: "济南",
+      },
       areaOptions: [
         {
           value: "济南",
@@ -80,7 +112,7 @@ export default {
           label: "菏泽",
         },
       ],
-      area: "济南",
+
       list: [
         {
           name: "大学城-长清",
@@ -131,7 +163,11 @@ export default {
   created() {},
   methods: {
     onSubmit() {
-      console.log("submit!");
+      console.log("submit!", this.ruleForm);
+    },
+    onClose() {
+      this.$refs.ruleForm.resetFields();
+      console.log("submit!", this.ruleForm);
     },
   },
 };
@@ -149,6 +185,17 @@ export default {
   color: #9f9f9f;
   font-size: 12px;
 }
+
+::v-deep .searchPanel .el-form-item__label {
+  color: #fff;
+  font-weight: normal;
+  white-space: nowrap;
+  margin-left: -2px;
+  margin-right: -5px;
+  font-size: 13px;
+  line-height: 36px;
+}
+
 .heightway {
   width: 100%;
   .board {
@@ -192,8 +239,8 @@ export default {
       }
       .inputJl {
         // width: 60px;
-        margin-left: 5px;
-        margin-right: 10px;
+        // margin-left: 5px;
+        // margin-right: 10px;
       }
       .selectRoad {
         width: 87px;
@@ -207,7 +254,7 @@ export default {
       }
       .btnSearch {
         background-color: #00b3cc;
-        margin-left: 10px;
+        // margin-left: 10px;
         padding: 6px 15px;
         font-size: 13px;
       }