From f844df7476d2a7538c0faf570078be7ecd4d532d Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Mon, 15 Jan 2024 18:10:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A4=E9=80=9A=E4=BA=8B=E6=95=85=E5=BD=95?=
 =?UTF-8?q?=E5=85=A5=E5=BC=B9=E7=AA=97=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ElCheckboxGroup.vue}           |  10 +-
 .../FormConfig/components/ElSelect.vue        |  27 ++
 .../components/MultipleLabelItem.vue          |  43 ++
 .../components}/RadioGroup/Radio.vue          |  10 +-
 .../components}/RadioGroup/RadioButton.vue    |  11 +-
 .../components}/RadioGroup/index.vue          |   8 +-
 .../components/FormConfig/index.vue           |  64 ++-
 .../Cards/ReleaseInformation/index.vue        | 244 +++++------
 .../Cards/TrafficControl/index.vue            |  92 ++--
 .../event/event/FormEvent/FormInput.vue       |  26 --
 .../control/event/event/FormEvent/FormItem.js | 109 +++++
 .../event/FormEvent/FormTrafficAccident.vue   | 212 ---------
 .../control/event/event/FormEvent/data.js     | 413 ++++++++++++++++--
 .../control/event/event/FormEvent/index.vue   |  73 +++-
 .../views/JiHeExpressway/scss/el-reset.scss   |  91 ++++
 .../src/views/JiHeExpressway/scss/reset.scss  |   3 +-
 16 files changed, 952 insertions(+), 484 deletions(-)
 rename ruoyi-ui/src/views/JiHeExpressway/components/{CheckboxGroup/index.vue => FormConfig/components/ElCheckboxGroup.vue} (80%)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElSelect.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/MultipleLabelItem.vue
 rename ruoyi-ui/src/views/JiHeExpressway/components/{ => FormConfig/components}/RadioGroup/Radio.vue (74%)
 rename ruoyi-ui/src/views/JiHeExpressway/components/{ => FormConfig/components}/RadioGroup/RadioButton.vue (80%)
 rename ruoyi-ui/src/views/JiHeExpressway/components/{ => FormConfig/components}/RadioGroup/index.vue (74%)
 delete mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/FormInput.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/FormItem.js
 delete mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/FormTrafficAccident.vue

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/CheckboxGroup/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElCheckboxGroup.vue
similarity index 80%
rename from ruoyi-ui/src/views/JiHeExpressway/components/CheckboxGroup/index.vue
rename to ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElCheckboxGroup.vue
index f85bf199..40e1a797 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/CheckboxGroup/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElCheckboxGroup.vue
@@ -1,6 +1,6 @@
 <template>
-  <ElCheckboxGroup v-bind="$attrs" v-on="$listeners" class='CheckboxGroup'>
-    <ElCheckbox v-for="item in list" :label="item.key || item.label" :key="item.key || item.label">
+  <ElCheckboxGroup v-bind="$attrs" v-on="$listeners" class='ElCheckboxGroup'>
+    <ElCheckbox v-for="item in options" :label="item.key || item.label" :key="item.key || item.label">
       <slot :name="item.key || item.label" :data="item">{{ item.label }}</slot>
     </ElCheckbox>
   </ElCheckboxGroup>
@@ -8,7 +8,7 @@
 
 <script>
 export default {
-  name: 'CheckboxGroup',
+  name: 'ElCheckboxGroup_',
   props: {
     /**
      * {
@@ -16,7 +16,7 @@ export default {
      *   key?: string,
      * }[]
      */
-    list: {
+    options: {
       type: Array,
       default: () => []
     }
@@ -25,7 +25,7 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-.CheckboxGroup {
+.ElCheckboxGroup {
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElSelect.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElSelect.vue
new file mode 100644
index 00000000..53c1361d
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElSelect.vue
@@ -0,0 +1,27 @@
+<template>
+  <ElSelect v-bind="$attrs" v-on="$listeners">
+    <ElOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+      <component :is="optionComponent" />
+    </ElOption>
+  </ElSelect>
+</template>
+
+<script>
+export default {
+  name: 'ElSelect_',
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    },
+    optionComponent: {
+      type: Object,
+      default: null
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.ElSelect {}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/MultipleLabelItem.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/MultipleLabelItem.vue
new file mode 100644
index 00000000..7d0273a9
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/MultipleLabelItem.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class='MultipleLabelItem'>
+    <div v-for="item in options" class="item">
+      <span v-if="item.prefix" :style="item.prefix.style">{{ item.prefix.text }}</span>
+      <component class="unknown" :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="formData[item.key]" />
+      <span v-if="item.suffix" :style="item.suffix.style">{{ item.suffix.text }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MultipleLabelItem',
+  inject: ['getComponent', 'getBindData'],
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      formData: {}
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.MultipleLabelItem {
+  display: flex;
+  gap: 9px;
+
+  .item {
+    display: flex;
+    gap: 6px;
+
+    >.unknown {
+      flex: 1;
+    }
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/Radio.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/RadioGroup/Radio.vue
similarity index 74%
rename from ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/Radio.vue
rename to ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/RadioGroup/Radio.vue
index a8f9a2a4..79c3d1fd 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/Radio.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/RadioGroup/Radio.vue
@@ -1,5 +1,5 @@
 <template>
-  <ElRadio v-bind="getBind" v-on="$listeners" class="Radio">
+  <ElRadio v-bind="getBind" v-on="$listeners" class="Radio" :style="{ '--active-color': activeColor }">
     <slot />
   </ElRadio>
 </template>
@@ -7,6 +7,12 @@
 <script>
 export default {
   name: 'Radio',
+  props: {
+    activeColor: {
+      type: String,
+      default: "linear-gradient(180deg, #005C79 0%, #009BCC 100%)"
+    }
+  },
   computed: {
     getBind() {
       return {
@@ -32,7 +38,7 @@ label.Radio {
 
   &.is-checked {
     border-color: rgba(0, 0, 0, 0);
-    background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+    background: var(--active-color);
   }
 
   ::v-deep {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/RadioButton.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/RadioGroup/RadioButton.vue
similarity index 80%
rename from ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/RadioButton.vue
rename to ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/RadioGroup/RadioButton.vue
index 42e89f30..a9a73ebd 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/RadioButton.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/RadioGroup/RadioButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <ElRadioButton class="RadioButton" v-bind="getBind" v-on="$listeners">
+  <ElRadioButton class="RadioButton" :style="{ '--active-color': activeColor }" v-bind="getBind" v-on="$listeners">
     <slot />
   </ElRadioButton>
 </template>
@@ -7,6 +7,12 @@
 <script>
 export default {
   name: 'RadioButton',
+  props: {
+    activeColor: {
+      type: String,
+      default: "linear-gradient(180deg, #005C79 0%, #009BCC 100%)"
+    }
+  },
   computed: {
     getBind() {
       return {
@@ -37,8 +43,7 @@ label.RadioButton.el-radio-button {
   &.is-active {
     ::v-deep {
       span.el-radio-button__inner {
-        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
-        // border-color: rgba(0, 0, 0, 0);
+        background: var(--active-color);
       }
     }
   }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/RadioGroup/index.vue
similarity index 74%
rename from ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/index.vue
rename to ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/RadioGroup/index.vue
index c40b19d5..018ae63d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/RadioGroup/index.vue
@@ -1,6 +1,7 @@
 <template>
   <ElRadioGroup class='RadioGroup' v-bind="$attrs" v-on="$listeners">
-    <component :is="type === 'button' ? 'RadioButton' : 'Radio'" v-for="item in list" :key="item.key" :label="item.key">
+    <component :activeColor="activeColor" :is="type === 'button' ? 'RadioButton' : 'Radio'" v-for="item in options"
+      :key="item.key" :label="item.key">
       {{ item.label }}
     </component>
   </ElRadioGroup>
@@ -22,13 +23,16 @@ export default {
       // button | normal
       default: "normal"
     },
+    activeColor: {
+      type: String,
+    },
     /**
      * {
      *  label: string;
      *  key: string;
      * }[]
      */
-    list: {
+    options: {
       type: Array,
       default: () => []
     }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
index b1b54877..5dac5cb9 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
@@ -1,6 +1,6 @@
 <template>
   <ElForm :style="getStyle()" :label-width="labelWidth" class="FormConfig" size="mini">
-    <ElFormItem class="formItem" :rules="rules && rules[item.key]" v-for="(item, index) in formList" :key="item.key"
+    <ElFormItem class="formItem" :rules="getRules(item)" v-for="(item, index) in formList" :key="item.key"
       :label="item.label" :style="gridStyle(item, index)">
       <slot :name="item.key" :data="item" :formData="formData">
         <component :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="formData[item.key]" />
@@ -10,6 +10,13 @@
 </template>
 
 <script>
+const files = require.context('./components', true, /^.\/[^/]+\/index\.vue$|^.\/[^/]+.vue$/);
+
+const components = files.keys().reduce((prev, key) => {
+  prev[key.match(/[^./]+/g)[0]] = files(key).default;
+
+  return prev;
+}, {})
 
 export default {
   name: 'FormConfig',
@@ -17,6 +24,12 @@ export default {
     // FormInput,
     // FormTimePicker
   },
+  provide() {
+    return {
+      getComponent: this.getComponent,
+      getBindData: this.getBindData
+    }
+  },
   props: {
     /**
      * {
@@ -42,7 +55,7 @@ export default {
       default: null
     },
     column: {
-      type: String,
+      type: [String, Number],
       default: "3"
     }
   },
@@ -62,7 +75,7 @@ export default {
     gridStyle() {
       return (item, index) => ({
         gridRow: `span ${item.gridRow || 1}`,
-        gridColumn: `span ${item.gridColumn || 1}`,
+        gridColumn: `span ${item.gridColumn || item.isAlone && this.column || 1}`,
       })
     }
   },
@@ -79,7 +92,26 @@ export default {
       }
     },
     getComponent(type) {
-      return `El${type.replace(/^[a-z]/, word => word.toUpperCase())}`
+      if (!type) type = 'input';
+
+      const componentKey = type.replace(/^[a-z]/, word => word.toUpperCase());
+
+      const ElComponentKey = `El${componentKey}`;
+
+      return components[componentKey] || components[ElComponentKey] || ElComponentKey;
+    },
+    getRules(item) {
+      if (this.rules?.[item.key]) return this.rules[item.key];
+
+      if (item.rules) return item.rules;
+
+      if (item.required) return [
+        {
+          required: true,
+          message: `${item.options?.placeholder || `${item.label}不能为空`}`,
+          trigger: "blur",
+        },
+      ]
     }
   }
 }
@@ -91,6 +123,7 @@ export default {
   align-content: start;
   width: 100%;
   gap: 15px 15px;
+  overflow-x: hidden;
 
   .formItem {
     display: flex;
@@ -112,18 +145,17 @@ export default {
 
       .el-form-item__label-wrap {
         width: fit-content;
-        // align-self: start;
-
-        .el-form-item__label {
-          height: 22px;
-          font-size: 15px;
-          // font-family: PingFang SC, PingFang SC;
-          font-weight: 400;
-          color: #3DE8FF;
-          line-height: 19px;
-          // -webkit-background-clip: text;
-          // -webkit-text-fill-color: transparent;
-        }
+      }
+
+      .el-form-item__label {
+        height: 22px;
+        font-size: 15px;
+        // font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        color: #3DE8FF;
+        line-height: 19px;
+        // -webkit-background-clip: text;
+        // -webkit-text-fill-color: transparent;
       }
 
       .el-form-item__content {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/ReleaseInformation/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/ReleaseInformation/index.vue
index 97709901..eb277857 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/ReleaseInformation/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/ReleaseInformation/index.vue
@@ -1,150 +1,150 @@
 <template>
-	<Card class='ReleaseInformation' title="信息发布">
-		<Form :formList="formList" column="1">
-			<template #platform="{ formData, data }">
-				<CheckboxGroup :list="checkboxList" v-model="formData[data.key]">
-					<template v-for="item in checkboxList" #[item.key]="{ data }">
-						<div class="checkbox-content">
-							<img :src="require(`./images/${item.key}.svg`)" />
-							{{ data.label }}
-						</div>
-					</template>
-				</CheckboxGroup>
-			</template>
-		</Form>
+  <Card class='ReleaseInformation' title="信息发布">
+    <Form :formList="formList" column="1">
+      <template #platform="{ formData, data }">
+        <CheckboxGroup :options="checkboxList" v-model="formData[data.key]">
+          <template v-for="item in checkboxList" #[item.key]="{ data }">
+            <div class="checkbox-content">
+              <img :src="require(`./images/${item.key}.svg`)" />
+              {{ data.label }}
+            </div>
+          </template>
+        </CheckboxGroup>
+      </template>
+    </Form>
 
-		<div class="line"></div>
+    <div class="line"></div>
 
-		<Descriptions :list="list" style="flex: 1;" column="1" titleStyle="align-self: flex-start;">
-			<template #content-informationBoard>
-				<div class="informationBoard-content">
-					<div>暂无情报板推荐发布信息</div>
-					<img src="./images/add.svg" />
-				</div>
-			</template>
-		</Descriptions>
+    <Descriptions :list="list" style="flex: 1;" column="1" titleStyle="align-self: flex-start;">
+      <template #content-informationBoard>
+        <div class="informationBoard-content">
+          <div>暂无情报板推荐发布信息</div>
+          <img src="./images/add.svg" />
+        </div>
+      </template>
+    </Descriptions>
 
-		<div class="bottom">
-			<ButtonGradient class="title-button special-button">
-				一键发布
-			</ButtonGradient>
-			<ButtonGradient class="title-button special-button">
-				发布预案
-			</ButtonGradient>
-		</div>
-	</Card>
+    <div class="bottom">
+      <ButtonGradient class="title-button special-button">
+        一键发布
+      </ButtonGradient>
+      <ButtonGradient class="title-button special-button">
+        发布预案
+      </ButtonGradient>
+    </div>
+  </Card>
 </template>
 
 <script>
 import Card from "@screen/components/Card2/Card.vue";
 import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
 import Form from '@screen/components/FormConfig';
-import CheckboxGroup from '@screen/components/CheckboxGroup/index.vue';
+import CheckboxGroup from '@screen/components/FormConfig/components/ElCheckboxGroup.vue';
 import Descriptions from '@screen/components/Descriptions.vue';
 
 export default {
-	name: 'ReleaseInformation',
-	components: {
-		Card,
-		ButtonGradient,
-		CheckboxGroup,
-		Form,
-		Descriptions
-	},
-	data() {
-		return {
-			list: [
-				{
-					label: '情报板',
-					key: "informationBoard",
-					gridColumn: 1
-				}
-			],
-			checkboxValues: [],
-			checkboxList: [
-				{ key: 'weChat', label: '微信' },
-				{ key: 'message', label: '短信' },
-				{ key: 'website', label: '网站' },
-				{ key: 'weibo', label: '新浪' },
-			],
-			formList: [{
-				label: "发布内容:",
-				key: "content",
-				type: "input",
-				options: {
-					type: "textarea",
-					autosize: true,
-					maxlength: 200,
-					autosize: { minRows: 9, maxRows: 9 },
-					showWordLimit: true
-				}
-			},
-			{
-				label: "发布平台:",
-				key: "platform",
-				type: "input",
-				default: []
-			}],
-		}
-	}
+  name: 'ReleaseInformation',
+  components: {
+    Card,
+    ButtonGradient,
+    CheckboxGroup,
+    Form,
+    Descriptions
+  },
+  data() {
+    return {
+      list: [
+        {
+          label: '情报板',
+          key: "informationBoard",
+          gridColumn: 1
+        }
+      ],
+      checkboxValues: [],
+      checkboxList: [
+        { key: 'weChat', label: '微信' },
+        { key: 'message', label: '短信' },
+        { key: 'website', label: '网站' },
+        { key: 'weibo', label: '新浪' },
+      ],
+      formList: [{
+        label: "发布内容:",
+        key: "content",
+        type: "input",
+        options: {
+          type: "textarea",
+          autosize: true,
+          maxlength: 200,
+          autosize: { minRows: 9, maxRows: 9 },
+          showWordLimit: true
+        }
+      },
+      {
+        label: "发布平台:",
+        key: "platform",
+        type: "input",
+        default: []
+      }],
+    }
+  }
 }
 </script>
 
 <style lang='scss' scoped>
 .ReleaseInformation {
 
-	::v-deep {
-		.content {
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-			gap: 18px;
-		}
-	}
+  ::v-deep {
+    .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      gap: 18px;
+    }
+  }
 
-	.informationBoard-content {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: start;
-		gap: 6px;
+  .informationBoard-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: start;
+    gap: 6px;
 
-		>div {
-			flex: 1;
-			font-size: 16px;
-			font-family: PingFang SC, PingFang SC;
-			font-weight: 400;
-			color: rgba(255, 255, 255, .6);
-			line-height: 19px;
-			letter-spacing: 1px;
-		}
+    >div {
+      flex: 1;
+      font-size: 16px;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      color: rgba(255, 255, 255, .6);
+      line-height: 19px;
+      letter-spacing: 1px;
+    }
 
-		img {
-			cursor: pointer;
-		}
-	}
+    img {
+      cursor: pointer;
+    }
+  }
 
-	.checkbox-content {
-		display: flex;
-		align-items: center;
-		gap: 3px;
-	}
+  .checkbox-content {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+  }
 
-	.line {
-		background: linear-gradient(to left, transparent 0%, transparent 24%, #3DE8FF 24%, #3DE8FF 100%);
-		background-size: 10px 1px;
-		background-repeat: repeat-x;
-		height: 1px;
-	}
+  .line {
+    background: linear-gradient(to left, transparent 0%, transparent 24%, #3DE8FF 24%, #3DE8FF 100%);
+    background-size: 10px 1px;
+    background-repeat: repeat-x;
+    height: 1px;
+  }
 
-	.bottom {
-		display: flex;
-		gap: 9px;
-		justify-content: end;
+  .bottom {
+    display: flex;
+    gap: 9px;
+    justify-content: end;
 
-		.special-button {
-			padding: 0 9px;
-		}
-	}
+    .special-button {
+      padding: 0 9px;
+    }
+  }
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/TrafficControl/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/TrafficControl/index.vue
index b55146d5..866499d1 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/TrafficControl/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/TrafficControl/index.vue
@@ -1,65 +1,65 @@
 <template>
-	<Card class='TrafficControl' title="交通管制">
-		<RadioGroup :list="radioList" value="mainlineControl" />
+  <Card class='TrafficControl' title="交通管制">
+    <RadioGroup :options="radioList" value="mainlineControl" />
 
-		<div class="bottom">
-			<ButtonGradient class="title-button special-button"
-				style="background: linear-gradient(180deg, #E94D4E 0%, #FF195E 100%);">
-				封闭
-			</ButtonGradient>
-			<ButtonGradient class="title-button special-button" style="
+    <div class="bottom">
+      <ButtonGradient class="title-button special-button"
+        style="background: linear-gradient(180deg, #E94D4E 0%, #FF195E 100%);">
+        封闭
+      </ButtonGradient>
+      <ButtonGradient class="title-button special-button" style="
 background: linear-gradient(82deg, #FFCD48 0%, #FE861E 100%);">
-				限行
-			</ButtonGradient>
-		</div>
-	</Card>
+        限行
+      </ButtonGradient>
+    </div>
+  </Card>
 </template>
 
 <script>
 import Card from "@screen/components/Card2/Card.vue";
-import RadioGroup from '@screen/components/RadioGroup/index.vue';
+import RadioGroup from '@screen/components/FormConfig/components/RadioGroup/index.vue';
 import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
 
 export default {
-	name: 'TrafficControl',
-	components: {
-		Card,
-		RadioGroup,
-		ButtonGradient
-	},
-	data() {
-		return {
-			radioList: [
-				{ key: 'mainlineControl', label: '主线管制' },
-				{ key: 'tollboothControl', label: '收费站管制' },
-				{ key: 'serviceAreaControl', label: '服务区管制' },
-				{ key: 'hubInterchangeControl', label: '枢纽立交管制' },
-				{ key: 'otherControls', label: '其他管制' },
-			]
-		}
-	}
+  name: 'TrafficControl',
+  components: {
+    Card,
+    RadioGroup,
+    ButtonGradient
+  },
+  data() {
+    return {
+      radioList: [
+        { key: 'mainlineControl', label: '主线管制' },
+        { key: 'tollboothControl', label: '收费站管制' },
+        { key: 'serviceAreaControl', label: '服务区管制' },
+        { key: 'hubInterchangeControl', label: '枢纽立交管制' },
+        { key: 'otherControls', label: '其他管制' },
+      ]
+    }
+  }
 }
 </script>
 
 <style lang='scss' scoped>
 .TrafficControl {
-	::v-deep {
-		.content {
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-			gap: 12px;
-		}
-	}
+  ::v-deep {
+    .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      gap: 12px;
+    }
+  }
 
-	.bottom {
-		display: flex;
-		gap: 9px;
-		justify-content: end;
+  .bottom {
+    display: flex;
+    gap: 9px;
+    justify-content: end;
 
-		.special-button {
-			padding: 0 24px;
-		}
-	}
+    .special-button {
+      padding: 0 24px;
+    }
+  }
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/FormInput.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/FormInput.vue
deleted file mode 100644
index 0f4983dd..00000000
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/FormInput.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <ElInput class='FormInput' />
-</template>
-
-<script>
-export default {
-  name: 'FormInput',
-}
-</script>
-
-<style lang='scss' scoped>
-.FormInput {
-  ::v-deep {
-    .el-input__inner {
-      background-color: #0D5F79;
-      color: #fff;
-      border-radius: 2px;
-      border: 0;
-
-      &::placeholder {
-        color: #fff;
-      }
-    }
-  }
-}
-</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/FormItem.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/FormItem.js
new file mode 100644
index 00000000..514ba015
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/FormItem.js
@@ -0,0 +1,109 @@
+export const source = {
+  label: "来源:",
+  key: "key29",
+  type: "RadioGroup",
+  isAlone: true,
+  required: true,
+  options: {
+    activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+    options: [
+      {
+        key: "96659",
+        label: "96659",
+      },
+      {
+        key: "交通转接",
+        label: "交通转接",
+      },
+      {
+        key: "道路巡查",
+        label: "道路巡查",
+      },
+      {
+        key: "视频巡查",
+        label: "视频巡查",
+      },
+      {
+        key: "视频AI",
+        label: "视频AI",
+      },
+      {
+        key: "一键救援",
+        label: "一键救援",
+      },
+      {
+        key: "其他",
+        label: "其他",
+      },
+    ],
+  },
+};
+
+export const illegalTriggeringType = {
+  label: "类型:",
+  key: "key291",
+  type: "RadioGroup",
+  isAlone: true,
+  required: true,
+  options: {
+    activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+    options: [
+      {
+        key: "行人",
+        label: "行人",
+      },
+      {
+        key: "非机动车",
+        label: "非机动车",
+      },
+      {
+        key: "摩托车",
+        label: "摩托车",
+      },
+      {
+        key: "其他",
+        label: "其他",
+      },
+    ],
+  },
+};
+
+export const station = {
+  label: "桩号:",
+  key: "key8",
+  required: true,
+  type: "MultipleLabelItem",
+  options: {
+    options: [
+      {
+        prefix: {
+          text: "K",
+          style: {
+            color: "#3DE8FF",
+          },
+        },
+      },
+      {
+        prefix: {
+          text: "+",
+          style: {
+            color: "#3DE8FF",
+          },
+        },
+      },
+    ],
+  },
+};
+
+export const direction = {
+  label: "方向:",
+  key: "key7",
+  required: true,
+  type: "select",
+};
+
+export const isInTunnel = {
+  label: "是否处在隧道:",
+  key: "key21",
+  type: "select",
+};
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/FormTrafficAccident.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/FormTrafficAccident.vue
deleted file mode 100644
index 2690f377..00000000
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/FormTrafficAccident.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<template>
-  <div class="formRecord">
-    <el-form ref="form" :model="formData" label-width="140px" :rules="rules">
-      <el-row>
-        <el-col :span="8">
-          <el-form-item label="报警人姓名" prop="name">
-            <el-input v-model="formData.name" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="报警人电话" prop="telephone">
-            <el-input v-model="formData.telephone" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="交通事故类型">
-            <el-select v-model="formData.type"></el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="8">
-          <el-form-item label="事件发生时间">
-            <el-date-picker v-model="formData.timeOccur" type="datetime" placeholder="选择日期时间">
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="桩号">
-            <el-row>
-              <el-col :span="2" class="text-center">
-                K
-              </el-col>
-              <el-col :span="10">
-                <el-input v-model="formData.pile.number1" />
-              </el-col>
-              <el-col :span="2" class="text-center">
-                +
-              </el-col>
-              <el-col :span="10">
-                <el-input v-model="formData.pile.number2" />
-              </el-col>
-            </el-row>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="洒落物名称">
-            <el-select v-model="formData.fallOut"></el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="是否处在隧道">
-            <el-select v-model="formData.isInTunnel">
-              <el-option label="是" :value="1">是</el-option>
-              <el-option label="否" :value="0">否</el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="车道占用">
-            <el-checkbox-group v-model="formData.laneOccupancy">
-              <el-checkbox label="行1"></el-checkbox>
-              <el-checkbox label="行2"></el-checkbox>
-              <el-checkbox label="行3"></el-checkbox>
-              <el-checkbox label="行4"></el-checkbox>
-              <el-checkbox label="应急车道"></el-checkbox>
-            </el-checkbox-group>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="车辆情况">
-            <el-row>
-              <el-col :span="2" class="text-right" style="padding-right: 6px;">小型车</el-col>
-              <el-col :span="2">
-                <!-- <el-input type="number" v-model="formData.vehicle.small" /> -->
-                <el-input-number v-model="formData.vehicle.small" :min="0" :max="10"></el-input-number>
-              </el-col>
-              <el-col :span="1">辆</el-col>
-              <el-col :span="2" class="text-right">货车</el-col>
-              <el-col :span="2">
-                <!-- <el-input type="number" v-model="formData.vehicle.truck" /> -->
-                <el-input-number v-model="formData.vehicle.truck" :min="0" :max="10"></el-input-number>
-              </el-col>
-              <el-col :span="1">辆</el-col>
-              <el-col :span="2" class="text-right">客车</el-col>
-              <el-col :span="2">
-                <!-- <el-input type="number" v-model="formData.vehicle.bus" /> -->
-                <el-input-number v-model="formData.vehicle.bus" :min="0" :max="10"></el-input-number>
-              </el-col>
-              <el-col :span="1">辆</el-col>
-              <el-col :span="2" class="text-right">罐车</el-col>
-              <el-col :span="2">
-                <!-- <el-input type="number" v-model="formData.vehicle.tankTruck" /> -->
-                <el-input-number v-model="formData.vehicle.tankTruck" :min="0" :max="10"></el-input-number>
-              </el-col>
-              <el-col :span="1">辆</el-col>
-            </el-row>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="来源">
-            <el-radio-group v-model="formData.source" size="small">
-              <el-radio-button label="96659"></el-radio-button>
-              <el-radio-button label="police">交警转接</el-radio-button>
-              <el-radio-button label="道路巡查"></el-radio-button>
-              <el-radio-button label="视频巡查"></el-radio-button>
-              <el-radio-button label="视频AI"></el-radio-button>
-              <el-radio-button label="一键救援"></el-radio-button>
-              <el-radio-button label="其它"></el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import FormInput from './FormInput.vue';
-export default {
-  name: 'FormTrafficAccident',
-  components: {
-    FormInput
-  },
-  data() {
-    return {
-      formData: {
-        name: '张晓明',
-        telephone: '18596584584',
-        type: '交通事故',
-        timeOccur: 1701592468898,
-        pile: {
-          number1: 1000,
-          number2: 50
-        },
-        fallOut: '洒落物',
-        isInTunnel: 1,
-        laneOccupancy: ["行3", "行4"],
-        vehicle: {
-          small: 1,
-          truck: 0,
-          bus: 1,
-          tankTruck: 0
-        },
-        source: 'police'
-      },
-      rules: {
-        name: [
-          { required: true, message: '请输入姓名', trigger: 'blur' },
-          { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
-        ],
-        telephone: [
-          { required: true, message: '请输入报警人电话', trigger: 'blur' },
-          { min: 11, max: 11, message: '长度错误', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  props: {
-    /**
-     * {
-     *  label: String;
-     *  key: String;
-     *  type: 'input' | '',
-     *  gridArea: "1/1/1/1",
-     *  options: {}
-     * }[]
-     */
-  },
-  methods: {
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-.formRecord {
-
-  ::v-deep {
-    .el-form-item {
-      .el-form-item__label {
-        // height: 22px;
-        // font-size: 16px;
-        // font-family: PingFang SC, PingFang SC;
-        // font-weight: 400;
-        // color: #3DE8FF;
-        // line-height: 19px;
-        // -webkit-background-clip: text;
-        // -webkit-text-fill-color: transparent;
-      }
-
-      // .el-input__inner {
-      //   background-color: #0D5F79;
-      //   color: #fff;
-      //   border-radius: 2px;
-      //   border: 0;
-
-      //   &::placeholder {
-      //     color: #fff;
-      //   }
-      // }
-    }
-  }
-}
-</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js
index 563f3802..c6cb1951 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js
@@ -1,53 +1,402 @@
-export const formList = [
+import {
+  source,
+  station,
+  direction,
+  illegalTriggeringType,
+  isInTunnel,
+} from "./FormItem";
+
+export const tabConfigList = [
   {
-    label: "事件源:",
-    key: "事件源",
-    type: "input",
+    key: "TrafficAccident",
+    label: "交通事故",
+    formConfig: {
+      list: [
+        {
+          label: "报警人姓名:",
+          key: "key1",
+          options: {
+            placeholder: "请输入报警人姓名",
+          },
+          required: true,
+        },
+        {
+          label: "报警人电话:",
+          key: "key2",
+          options: {
+            placeholder: "请输入报警人电话(区号+号码)",
+          },
+          required: true,
+        },
+        {
+          label: "交通事故类型:",
+          key: "key3",
+          type: "select",
+          required: true,
+          options: {
+            options: [
+              {
+                value: "选项1",
+                label: "黄金糕",
+              },
+              {
+                value: "选项2",
+                label: "双皮奶",
+              },
+              {
+                value: "选项3",
+                label: "蚵仔煎",
+              },
+              {
+                value: "选项4",
+                label: "龙须面",
+              },
+              {
+                value: "选项5",
+                label: "北京烤鸭",
+              },
+            ],
+          },
+        },
+        {
+          label: "事件等级:",
+          key: "key4",
+          required: true,
+          type: "select",
+        },
+        {
+          label: "地点方式:",
+          key: "key5",
+          required: true,
+          type: "select",
+        },
+        {
+          label: "路线:",
+          key: "key6",
+          required: true,
+          type: "select",
+        },
+        direction,
+        station,
+        {
+          label: "事件发生时间:",
+          key: "key9",
+          required: true,
+          type: "datePicker",
+        },
+        {
+          label: "预计解除时间:",
+          key: "key10",
+          type: "datePicker",
+        },
+        {
+          label: "压车(公里):",
+          key: "key11",
+        },
+        {
+          label: "天气情况:",
+          required: true,
+          key: "key12",
+          type: "select",
+        },
+        {
+          label: "影响:",
+          key: "key13",
+          type: "select",
+        },
+        {
+          label: "是否到货:",
+          key: "key14",
+          type: "select",
+        },
+        {
+          label: "是否养护事故:",
+          key: "key15",
+          type: "select",
+        },
+        {
+          label: "交警电话:",
+          key: "key16",
+        },
+        {
+          label: "清障电话:",
+          options: {
+            placeholder: "请输入清障电话(区号+号码)",
+          },
+          key: "key17",
+        },
+        {
+          label: "前方是否拥堵:",
+          key: "key18",
+          type: "select",
+        },
+        {
+          label: "是否分岔口:",
+          key: "key19",
+          type: "select",
+        },
+        {
+          label: "是否处在弯道:",
+          key: "key20",
+          type: "select",
+        },
+        isInTunnel,
+        {
+          label: "洒落物名称:",
+          key: "key22",
+          isAlone: true,
+        },
+        {
+          label: "车主电话:",
+          key: "key23",
+          isAlone: true,
+        },
+        {
+          label: "车道占用:",
+          key: "key24",
+          type: "CheckboxGroup",
+          isAlone: true,
+          default: [],
+          options: {
+            options: [
+              { key: "weChat", label: "行1" },
+              { key: "message", label: "行2" },
+              { key: "website", label: "行3" },
+              { key: "weibo", label: "行4" },
+              { key: "weibo2", label: "应急车道" },
+            ],
+          },
+        },
+        {
+          label: "车辆情况:",
+          key: "key25",
+          isAlone: true,
+          type: "MultipleLabelItem",
+          options: {
+            options: [
+              {
+                prefix: {
+                  text: "小型车",
+                },
+                suffix: {
+                  text: "辆",
+                },
+              },
+              {
+                prefix: {
+                  text: "货车",
+                },
+                suffix: {
+                  text: "辆",
+                },
+              },
+              {
+                prefix: {
+                  text: "客车",
+                },
+                suffix: {
+                  text: "辆",
+                },
+              },
+              {
+                prefix: {
+                  text: "罐车",
+                },
+                suffix: {
+                  text: "辆",
+                },
+              },
+            ],
+          },
+        },
+        {
+          label: "伤亡情况:",
+          key: "key26",
+          isAlone: true,
+
+          type: "MultipleLabelItem",
+          options: {
+            options: [
+              {
+                prefix: {
+                  text: "轻伤",
+                },
+                suffix: {
+                  text: "人",
+                },
+              },
+              {
+                prefix: {
+                  text: "重伤",
+                },
+                suffix: {
+                  text: "人",
+                },
+              },
+              {
+                prefix: {
+                  text: "死亡",
+                },
+                suffix: {
+                  text: "人",
+                },
+              },
+            ],
+          },
+        },
+        {
+          label: "事件标题:",
+          key: "key27",
+          isAlone: true,
+          required: true,
+        },
+        {
+          label: "事件描述:",
+          key: "key28",
+          isAlone: true,
+          options: {
+            type: "textarea",
+            autosize: true,
+            maxlength: 150,
+            autosize: { minRows: 6, maxRows: 6 },
+            showWordLimit: true,
+          },
+          required: true,
+        },
+        source,
+      ],
+    },
   },
   {
-    label: "桩号:",
-    key: "桩号:",
-    type: "input",
+    key: "VehicleFault",
+    label: "车辆故障",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
   },
   {
-    label: "行驶方向:",
-    key: "行驶方向",
-    type: "input",
+    key: "TrafficCongestion",
+    label: "交通拥堵",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
   },
   {
-    label: "事件类型:",
-    key: "事件类型",
-    type: "input",
+    key: "TrafficControl",
+    label: "交通管制",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
   },
   {
-    label: "事件原因:",
-    key: "事件原因",
-    type: "input",
+    key: "ServiceAreaAbnormal",
+    label: "服务区异常",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
   },
   {
-    label: "事件状态:",
-    key: "事件状态",
-    type: "input",
+    key: "OtherEvents",
+    label: "其他事件",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
   },
   {
-    label: "操作员:",
-    key: "操作员",
-    type: "input",
+    key: "HiddenDangersEquipment",
+    label: "设施设备隐患",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
   },
   {
-    label: "发生时间:",
-    key: "发生时间",
-    type: "input",
+    key: "AbnormalWeather",
+    label: "异常天气",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
   },
   {
-    label: "完结时间:",
-    key: "完结时间",
-    type: "input",
+    key: "Construction",
+    label: "施工建设",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
   },
   {
-    label: "事件描述:",
-    key: "事件描述",
-    type: "input",
-    gridArea: "1/1/1/1",
+    key: "BarricadesCleared",
+    label: "路障清除",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
+  },
+  {
+    key: "IllegalOnRoad",
+    label: "非法上路",
+    formConfig: {
+      formOptions: {
+        column: 2,
+      },
+      list: [
+        illegalTriggeringType,
+        {
+          label: "补充说明:",
+          key: "key28",
+          isAlone: true,
+          options: {
+            type: "textarea",
+            autosize: true,
+            maxlength: 150,
+            autosize: { minRows: 6, maxRows: 6 },
+            showWordLimit: true,
+          },
+          required: true,
+        },
+        {
+          label: "高速公路:",
+          key: "key21",
+          type: "select",
+        },
+        direction,
+        station,
+        isInTunnel,
+        {
+          label: "开始时间:",
+          key: "key9",
+          required: true,
+          type: "datePicker",
+        },
+
+        {
+          label: "预计结束时间:",
+          key: "key09",
+          type: "datePicker",
+        },
+
+        {
+          label: "问题描述:",
+          key: "key29",
+          isAlone: true,
+          options: {
+            type: "textarea",
+            autosize: true,
+            maxlength: 150,
+            autosize: { minRows: 6, maxRows: 6 },
+            showWordLimit: true,
+          },
+          required: true,
+        },
+        source,
+      ],
+    },
   },
 ];
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue
index 213c7e82..f8142a30 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue
@@ -1,23 +1,34 @@
 <template>
   <Dialog v-model="modelVisible" title="交通事故录入">
-    <el-tabs class="content" v-model="activeName">
-      <el-tab-pane label="交通事故" name="trafficAccident">
-        <FormTrafficAccident />
-      </el-tab-pane>
-      <el-tab-pane label="车辆故障" name="vehicleFault">
-      </el-tab-pane>
-    </el-tabs>
+    <div class="EventDetailDialog">
+      <ElTabs v-model="activeName" @tab-click="handleChange">
+        <ElTabPane v-for="item in tabConfigList" :key="item.key" :label="item.label" :name="item.key" />
+      </ElTabs>
+
+      <Transition name="fade">
+        <Form class="form" :formList="formConfig.list" v-bind="getFormOptions" labelWidth="120px" />
+      </Transition>
+
+      <div class="footer">
+        <Button>修改</Button>
+        <Button style="background: #C9C9C9;">取消</Button>
+      </div>
+    </div>
   </Dialog>
 </template>
 
 <script>
 import Dialog from "@screen/components/Dialog/index";
-import FormTrafficAccident from './FormTrafficAccident'
+import Form from '@screen/components/FormConfig';
+import { tabConfigList } from "./data.js"
+import Button from '@screen/components/Buttons/Button.vue';
+
 export default {
   name: 'EventDetailDialog',
   components: {
     Dialog,
-    FormTrafficAccident
+    Form,
+    Button
   },
   model: {
     prop: 'visible',
@@ -28,9 +39,14 @@ export default {
   },
   data() {
     return {
-      activeName: "trafficAccident"
+      activeName: "TrafficAccident",
+      formConfig: {},
+      tabConfigList
     }
   },
+  created() {
+    this.formConfig = tabConfigList[0].formConfig;
+  },
   computed: {
     modelVisible: {
       get() {
@@ -39,26 +55,49 @@ export default {
       set(val) {
         this.$emit('close', val)
       }
+    },
+    getFormOptions() {
+      return {
+        column: 3,
+        ...this.formConfig.formOptions
+      }
     }
   },
+  methods: {
+    handleChange({ index }) {
+      this.formConfig = tabConfigList[index].formConfig;
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-.content {
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .24s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.EventDetailDialog {
   gap: 9px;
   width: 1050px;
-  height: 700px;
+  height: 810px;
+  display: flex;
+  flex-direction: column;
 
-  .left {
+  .form {
     flex: 1;
+    overflow-y: auto;
   }
 
-  .right {
+  .footer {
     display: flex;
-    flex-direction: column;
-    gap: 9px;
-    cursor: pointer;
+    justify-content: end;
+    gap: 15px;
   }
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss b/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss
index eaf03949..f5ddaaec 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss
+++ b/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss
@@ -44,6 +44,10 @@ div.el-popper {
   }
 }
 
+div.el-select {
+  width: 100%;
+}
+
 div.el-popper.el-select-dropdown {
   background: #123542;
   box-shadow: 2px 2px 8px 0px rgba(82, 90, 102, 0.08),
@@ -109,6 +113,93 @@ div.el-popper.el-select-dropdown {
     }
   }
 }
+
+div.el-date-editor {
+  input.el-range-input,
+  span.el-range-separator {
+    background-color: transparent;
+    color: #fff;
+  }
+}
+
+div.el-picker-panel.el-date-picker.el-popper,
+div.el-picker-panel.el-date-range-picker.el-popper {
+  background: #064258;
+  border-radius: 2px 2px 2px 2px;
+
+  &[x-placement^="top"] {
+    div.popper__arrow {
+      border-top-color: #064258;
+
+      &::after {
+        border-top-color: #064258;
+      }
+    }
+  }
+  &[x-placement^="left"] {
+    div.popper__arrow {
+      border-left-color: #064258;
+
+      &::after {
+        border-left-color: #064258;
+      }
+    }
+  }
+  &[x-placement^="right"] {
+    div.popper__arrow {
+      border-right-color: #064258;
+
+      &::after {
+        border-right-color: #064258;
+      }
+    }
+  }
+  &[x-placement^="bottom"] {
+    div.popper__arrow {
+      border-bottom-color: #064258;
+
+      &::after {
+        border-bottom-color: #064258;
+      }
+    }
+  }
+
+  .el-date-range-picker__content.is-left {
+    border-right: solid 1px rgba(255, 255, 255, 0.3);
+  }
+
+  .el-picker-panel__body-wrapper {
+    .el-picker-panel__body {
+      .el-date-picker__header {
+        .el-picker-panel__icon-btn,
+        .el-date-picker__header-label {
+          color: #fff;
+        }
+      }
+
+      .el-picker-panel__content {
+        .el-date-table {
+          th {
+            color: #fff;
+            border-bottom: solid 1px rgba(255, 255, 255, 0.3);
+          }
+
+          .today span {
+            color: #00d1ff;
+          }
+
+          .current span {
+            background-color: #56cefe;
+          }
+          td.in-range div {
+            background: rgba(96, 189, 253, 0.3);
+          }
+        }
+      }
+    }
+  }
+}
+
 div.el-scrollbar {
   .el-scrollbar__wrap {
     /**
diff --git a/ruoyi-ui/src/views/JiHeExpressway/scss/reset.scss b/ruoyi-ui/src/views/JiHeExpressway/scss/reset.scss
index 3df93f8f..267181a3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/scss/reset.scss
+++ b/ruoyi-ui/src/views/JiHeExpressway/scss/reset.scss
@@ -4,7 +4,8 @@ body {
     caret-color: white;
   }
 
-  div {
+  div,
+  form {
     /* 滚动条整体部分 */
     &::-webkit-scrollbar {
       width: 6px !important;