From 081820957ad553ed606cfc00ba0e58059ccf5c35 Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Mon, 15 Jan 2024 14:17:52 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E8=B7=AF=E7=BD=91=E7=AE=A1=E6=8E=A7=20?=
 =?UTF-8?q?=E5=80=BC=E7=8F=AD=E4=BA=BA=E5=91=98=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=80=BC=E7=8F=AD=E4=BA=BA=E5=91=98=E4=BF=A1=E6=81=AF=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=20UI=20=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Dialog/index.vue               |  30 ++--
 .../components/FormConfig/index.vue           |  12 +-
 .../images/dialog/icon-close.png              | Bin 281 -> 0 bytes
 .../images/dialog/icon-close.svg              |   6 +
 .../images/dialog/right-bottom.svg            |   9 ++
 .../images/dialog/title-icon.svg              |   6 +
 .../ModifyDutyInformationTable copy.vue       | 119 +++++++++++++++
 .../components/ModifyDutyInformationTable.vue | 137 ++++++++++++++----
 .../views/dutyOfficer/images/Line.svg         |  12 ++
 9 files changed, 285 insertions(+), 46 deletions(-)
 delete mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-close.png
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-close.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/dialog/right-bottom.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/dialog/title-icon.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable copy.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/images/Line.svg

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
index 454f83f0..ec5d2c6d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
@@ -4,13 +4,15 @@
       <div class="mask-layer" v-if="modelVisible">
         <div class='dialog'>
           <div class="dialog-title">
-            <img class="title-icon" src="@screen/images/title/title-icon.png" />
+            <img class="title-icon" src="@screen/images/dialog/title-icon.svg" />
             <span>{{ title }}</span>
-            <img class="icon-close" @click="modelVisible = false" src="@screen/images/dialog/icon-close.png" />
+            <img class="icon-close" @click="modelVisible = false" src="@screen/images/dialog/icon-close.svg" />
           </div>
           <div class="dialog-content">
             <slot />
           </div>
+
+          <img class="bottom-right" src="@screen/images/dialog/right-bottom.svg">
         </div>
       </div>
     </Transition>
@@ -108,8 +110,7 @@ export default {
     padding-top: 3px;
     align-items: center;
     justify-content: space-between;
-    background: url("~@screen/images/title/box-title.png") no-repeat;
-    background-size: 100% 100%;
+    background: linear-gradient(90deg, #267494 0%, rgba(38, 116, 148, 0) 100%);
     font-size: 19px;
     font-family: PingFang SC, PingFang SC;
     font-weight: 500;
@@ -117,9 +118,9 @@ export default {
 
     .title-icon {
       position: absolute;
-      top: 0;
-      width: 258px;
-      height: 5px;
+      top: -1px;
+      left: -1px;
+      height: 6px;
     }
 
     .icon-close {
@@ -138,17 +139,12 @@ export default {
   .dialog-content {
     padding: 10px 20px 20px 20px;
     max-height: 96vh;
+  }
 
-    .icon-content {
-      display: flex;
-
-      img {
-        display: inline-block;
-        // width: 23px;
-        // height: 21px;
-        margin-right: 10px;
-      }
-    }
+  .bottom-right {
+    position: absolute;
+    right: 0;
+    bottom: 0;
   }
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
index 59f1c70a..b1b54877 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
@@ -3,7 +3,7 @@
     <ElFormItem class="formItem" :rules="rules && rules[item.key]" 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="item.options" placeholder="请输入" v-model="formData[item.key]" />
+        <component :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="formData[item.key]" />
       </slot>
     </ElFormItem>
   </ElForm>
@@ -72,6 +72,12 @@ export default {
         gridTemplateColumns: `repeat(${this.column}, 1fr)`,
       }
     },
+    getBindData(item) {
+      return {
+        placeholder: "请输入",
+        ...item.options
+      }
+    },
     getComponent(type) {
       return `El${type.replace(/^[a-z]/, word => word.toUpperCase())}`
     }
@@ -100,13 +106,13 @@ export default {
 
       &:first-child {
         .el-form-item__label-wrap {
-          padding-top: 9px;
+          // padding-top: 9px;
         }
       }
 
       .el-form-item__label-wrap {
         width: fit-content;
-        align-self: start;
+        // align-self: start;
 
         .el-form-item__label {
           height: 22px;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-close.png b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-close.png
deleted file mode 100644
index 666c4d0b14b2fdd308ba950cb6ae1218b81b09af..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 281
zcmeAS@N?(olHy`uVBq!ia0vp^{2<K11|+SoP4xm&jKx9jP7LeL$-D$|E_=E-hFJI~
zo78=aZ|Uw#v}9IxKA%{4Y%Y%r!|Lz<pU$i|I+JL!<9~d^^vMrx4%f4BvZ=K(II%gH
z$}y}=XNgSt_-8+pw({XRCpLv_mPnRsK0S;tq#X5HvX7-RnDr`r)tI$W^27Arhisqy
z**3^uJj~*3+{VbmlP@75;j)2ME$plUb58vK?dd;G7cd<8cmBkM0+%@(1#QJPX1RS-
z)-+qpe(rrek9nc1a@W}%PNLyf4cW(*3dUP8WUDO^oX*&Dp{H<Gz@;N;3_8hc)KtSA
d4=0#0h<~1YD`5ijb)fecJYD@<);T3K0RSbIW{&^>

diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-close.svg b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-close.svg
new file mode 100644
index 00000000..ccc92b57
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-close.svg
@@ -0,0 +1,6 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142814160">
+<path id="Vector" d="M1 1L14 14" stroke="#3DE8FF" stroke-width="1.6" stroke-linecap="round"/>
+<path id="Vector_2" d="M1 14L14 1" stroke="#3DE8FF" stroke-width="1.6" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/dialog/right-bottom.svg b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/right-bottom.svg
new file mode 100644
index 00000000..05beeab2
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/right-bottom.svg
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 159" d="M30 0V30H0" stroke="url(#paint0_linear_195_2076)" stroke-width="3.2"/>
+<defs>
+<linearGradient id="paint0_linear_195_2076" x1="30.8108" y1="30" x2="16.6053" y2="15.4106" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3DE8FF"/>
+<stop offset="1" stop-color="#3DE8FF" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/dialog/title-icon.svg b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/title-icon.svg
new file mode 100644
index 00000000..c93c4dbd
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/title-icon.svg
@@ -0,0 +1,6 @@
+<svg width="258" height="5" viewBox="0 0 258 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142814161">
+<path id="Rectangle 623" opacity="0.4" d="M0 0H258L253.193 5H0V0Z" fill="#3DE8FF"/>
+<path id="Rectangle 624" d="M0 0H158.646L153.839 5H0V0Z" fill="#3DE8FF"/>
+</g>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable copy.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable copy.vue
new file mode 100644
index 00000000..71f7ba92
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable copy.vue	
@@ -0,0 +1,119 @@
+<template>
+  <Dialog v-model="visibleModel" title="修改值班信息表">
+    <div class="ModifyDutyInformationTable">
+      <div class="search">
+        <Form :formList="formList" :rules="{ '桩号:': [{ required: true, message: '年龄不能为空' }] }" column="2"
+          style="flex: 1;" />
+
+        <ButtonGradient>
+          <template #prefix>
+            <img src="@screen/images/form/search.svg" />
+          </template>
+          刷新
+        </ButtonGradient>
+      </div>
+      <div class="body">
+        <SelectList v-for="item in list" :data="item" />
+      </div>
+      <div class="bottom">
+        <Button>确认</Button>
+        <Button :style="{ backgroundColor: '#C9C9C9' }"> 取消</Button>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index.vue";
+import Button from "@screen/components/Buttons/Button.vue"
+import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
+import Form from '@screen/components/FormConfig';
+
+import SelectList from "./../../../components/SelectList.vue"
+
+export default {
+  name: 'ModifyDutyInformationTable',
+  components: {
+    Dialog,
+    Button,
+    ButtonGradient,
+    SelectList,
+    Form
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emit: ['close'],
+  data() {
+    return {
+      formList: [{
+        label: "值班时间:",
+        key: "事件源",
+        type: "timePicker",
+      },
+      {
+        label: "操作人员:",
+        key: "桩号:",
+        type: "input",
+      }],
+      list: Array.from({ length: 15 }).map(item => ({
+        title: "123456",
+        list: Array.from({ length: 15 }).map((_, index) => ({
+          name: index,
+          phone: "12345678901"
+        }))
+      }))
+    }
+  },
+  computed: {
+    visibleModel: {
+      get() {
+        return this.visible
+      },
+      set(bool) {
+        this.$emit('close', bool);
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.ModifyDutyInformationTable {
+  width: 947px;
+  height: 658px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  .search {
+    display: flex;
+    gap: 24px;
+    align-items: center;
+    justify-content: space-between;
+
+  }
+
+  .body {
+    display: flex;
+    gap: 9px;
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .bottom {
+    display: flex;
+    gap: 15px;
+    justify-content: end;
+
+    >div {
+      width: 96px;
+    }
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue
index 71f7ba92..f000d588 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue
@@ -2,18 +2,35 @@
   <Dialog v-model="visibleModel" title="修改值班信息表">
     <div class="ModifyDutyInformationTable">
       <div class="search">
-        <Form :formList="formList" :rules="{ '桩号:': [{ required: true, message: '年龄不能为空' }] }" column="2"
-          style="flex: 1;" />
-
-        <ButtonGradient>
-          <template #prefix>
-            <img src="@screen/images/form/search.svg" />
-          </template>
-          刷新
-        </ButtonGradient>
+        <InputSearch style="width: 402px;" />
+
       </div>
       <div class="body">
-        <SelectList v-for="item in list" :data="item" />
+        <div class="people">
+          <div v-for="item in 36" :key="item">
+            <span>甘易玫</span>
+            <span>13011600555</span>
+          </div>
+        </div>
+        <img src="./../images/Line.svg">
+        <div class="dutyPeople">
+          <div class="line">
+            <p>白天值班:</p>
+            <div>
+              <p v-for="item in 15">甘易玫</p>
+            </div>
+          </div>
+          <div class="line">
+            <p>晚上值班:</p>
+            <div>
+              <p v-for="item in 15">甘易玫</p>
+            </div>
+          </div>
+        </div>
+        <div>
+          <Form :formList="formList" :rules="{ '桩号:': [{ required: true, message: '年龄不能为空' }] }" column="1"
+            style="flex: 1;" />
+        </div>
       </div>
       <div class="bottom">
         <Button>确认</Button>
@@ -26,18 +43,15 @@
 <script>
 import Dialog from "@screen/components/Dialog/index.vue";
 import Button from "@screen/components/Buttons/Button.vue"
-import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
+import InputSearch from '@screen/components/InputSearch/index.vue';
 import Form from '@screen/components/FormConfig';
 
-import SelectList from "./../../../components/SelectList.vue"
-
 export default {
   name: 'ModifyDutyInformationTable',
   components: {
     Dialog,
     Button,
-    ButtonGradient,
-    SelectList,
+    InputSearch,
     Form
   },
   props: {
@@ -49,16 +63,16 @@ export default {
   emit: ['close'],
   data() {
     return {
-      formList: [{
-        label: "值班时间:",
-        key: "事件源",
-        type: "timePicker",
-      },
-      {
-        label: "操作人员:",
-        key: "桩号:",
-        type: "input",
-      }],
+      formList: [
+        {
+          label: "操作人员:",
+          key: "input",
+          type: "input",
+          options: {
+            placeholder: "请输入人员名称"
+          }
+        }
+      ],
       list: Array.from({ length: 15 }).map(item => ({
         title: "123456",
         list: Array.from({ length: 15 }).map((_, index) => ({
@@ -100,10 +114,81 @@ export default {
 
   .body {
     display: flex;
-    gap: 9px;
+    flex-direction: column;
+    gap: 24px;
     height: 100%;
     overflow-x: auto;
     overflow-y: hidden;
+    flex: 1;
+
+    .people {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      grid-auto-rows: 65px;
+      gap: 9px;
+      flex: 1;
+      overflow-y: auto;
+
+      >div {
+        height: 65px;
+        background: linear-gradient(180deg, #00AEE5 0%, #0086B1 100%);
+        border-radius: 2px;
+        font-size: 16px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        color: #FFFFFF;
+        letter-spacing: 1px;
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-direction: column;
+        cursor: pointer;
+        padding: 9px 12px;
+      }
+    }
+
+    .dutyPeople {
+      display: flex;
+      flex-direction: column;
+      gap: 9px;
+
+      >div {
+        display: flex;
+        gap: 9px;
+        border-radius: 2px;
+        opacity: 1;
+        overflow: hidden;
+
+        p {
+          background: linear-gradient(180deg, rgba(1, 167, 220, 0) 0%, #01A7DC 100%);
+          height: 42px;
+          display: flex;
+          align-items: center;
+          padding: 15px 24px;
+
+          font-size: 16px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          color: #FFFFFF;
+
+          border-radius: 2px;
+
+          cursor: pointer;
+        }
+
+        >div {
+          flex: 1;
+          display: flex;
+          gap: 9px;
+          // flex-shrink: 1;
+          flex-wrap: nowrap;
+          white-space: nowrap;
+          overflow: hidden;
+          overflow-x: auto;
+        }
+      }
+    }
   }
 
   .bottom {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/images/Line.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/images/Line.svg
new file mode 100644
index 00000000..60aaeeba
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/images/Line.svg
@@ -0,0 +1,12 @@
+<svg width="750" height="1" viewBox="0 0 750 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line id="Line" x1="4.37114e-08" y1="0.5" x2="750" y2="0.500066" stroke="url(#paint0_linear_198_2334)"/>
+<defs>
+<linearGradient id="paint0_linear_198_2334" x1="-35.3774" y1="2.00013" x2="799.528" y2="2.00057" gradientUnits="userSpaceOnUse">
+<stop stop-color="#033C51" stop-opacity="0"/>
+<stop offset="0.0909964" stop-color="#0185B5" stop-opacity="0.55"/>
+<stop offset="0.481139" stop-color="#0185B5"/>
+<stop offset="0.867241" stop-color="#0185B5" stop-opacity="0.55"/>
+<stop offset="1" stop-color="#033C51" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

From 20fa52d1b749c3af395f19dda6cf6eff6a108062 Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Mon, 15 Jan 2024 14:59:46 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E5=AE=8C=E5=96=84=20=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=20=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   3 +-
 .../Carousel/images/arrow.svg                 |  36 ++++++
 .../EventDetailDialog/Carousel/index.vue      | 112 ++++++++++++++++++
 .../event/event/EventDetailDialog/index.vue   |  23 ++--
 4 files changed, 164 insertions(+), 10 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/images/arrow.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/index.vue

diff --git a/package.json b/package.json
index 04a37ae9..9f970962 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "flv.js": "^1.6.2"
+    "flv.js": "^1.6.2",
+    "vue-slick-carousel": "^1.0.6"
   }
 }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/images/arrow.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/images/arrow.svg
new file mode 100644
index 00000000..0e183e4b
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/images/arrow.svg
@@ -0,0 +1,36 @@
+<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142814550">
+<g id="Group 1142814473">
+<g id="Polygon 87">
+<path d="M6.16667 1.3635L12 7.49987L6.16667 13.6362" stroke="white" stroke-linecap="round"/>
+<path d="M6.16667 1.3635L12 7.49987L6.16667 13.6362" stroke="url(#paint0_linear_308_1272)" stroke-linecap="round"/>
+</g>
+<path id="Polygon 88" d="M5 -3.57639e-07L12 7.5L5 15L5 -3.57639e-07Z" fill="url(#paint1_linear_308_1272)"/>
+</g>
+<g id="Group 1142814478">
+<g id="Polygon 87_2">
+<path d="M1.16667 1.3635L7 7.49987L1.16667 13.6362" stroke="white" stroke-linecap="round"/>
+<path d="M1.16667 1.3635L7 7.49987L1.16667 13.6362" stroke="url(#paint2_linear_308_1272)" stroke-linecap="round"/>
+</g>
+<path id="Polygon 88_2" d="M1.0378e-06 -3.57639e-07L7 7.5L4.76837e-07 15L1.0378e-06 -3.57639e-07Z" fill="url(#paint3_linear_308_1272)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_308_1272" x1="10.8868" y1="7.72029" x2="6.30026" y2="7.72029" gradientUnits="userSpaceOnUse">
+<stop stop-color="#39D5BF"/>
+<stop offset="1" stop-color="#1FAED6"/>
+</linearGradient>
+<linearGradient id="paint1_linear_308_1272" x1="12" y1="7.5" x2="5" y2="7.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3AD6C0"/>
+<stop offset="1" stop-color="#20AFD7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_308_1272" x1="5.88677" y1="7.72029" x2="1.30026" y2="7.72029" gradientUnits="userSpaceOnUse">
+<stop stop-color="#39D5BF"/>
+<stop offset="1" stop-color="#1FAED6"/>
+</linearGradient>
+<linearGradient id="paint3_linear_308_1272" x1="7" y1="7.5" x2="7.57319e-07" y2="7.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3AD6C0"/>
+<stop offset="1" stop-color="#20AFD7" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/index.vue
new file mode 100644
index 00000000..a502ef1b
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/index.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="Carousel">
+    <img src="./images/arrow.svg" @click="prevSlide" class="arrow" />
+
+    <VueSlickCarousel v-bind="settings" ref="CarouselRef" class="vueSlickCarousel">
+      <div v-for="(item, index) in carouselItems" :key="index" class="item">
+        <img :src="require(`@screen/images/${item.imageURL}`)" style="height: 100%">
+      </div>
+    </VueSlickCarousel>
+
+    <img src="./images/arrow.svg" @click="nextSlide" class="arrow" />
+  </div>
+</template>
+
+<script>
+
+import VueSlickCarousel from 'vue-slick-carousel'
+import 'vue-slick-carousel/dist/vue-slick-carousel.css'
+// optional style for arrows & dots
+import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
+
+export default {
+  name: "Carousel",
+  components: { VueSlickCarousel },
+  data() {
+    return {
+      carouselItems: [
+        {
+          "imageURL": "shareWith/message-active.svg"
+        },
+        {
+          "imageURL": "shareWith/message.svg"
+        },
+        {
+          "imageURL": "shareWith/phone-active.svg"
+        },
+        {
+          "imageURL": "shareWith/phone.svg"
+        },
+        {
+          "imageURL": "shareWith/website-active.svg"
+        },
+        {
+          "imageURL": "shareWith/website.svg"
+        },
+        {
+          "imageURL": "shareWith/weChat-active.svg"
+        },
+        {
+          "imageURL": "shareWith/weChat-active.svg"
+        }
+      ],
+      settings: {
+        infinite: true,
+        arrows: false,
+        speed: 600,
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        autoplay: true,
+        autoplaySpeed: 1800,
+      },
+    }
+  },
+  methods: {
+    prevSlide() {
+      this.$refs.CarouselRef.prev()
+    },
+    nextSlide() {
+      this.$refs.CarouselRef.next()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Carousel {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  gap: 9px;
+
+  .vueSlickCarousel {
+    flex: 1;
+    overflow: hidden;
+
+    ::v-deep {
+      .slick-list {
+        height: 100%;
+
+        div {
+          height: 100%;
+        }
+      }
+    }
+
+    .item {
+      img {
+        height: 100%;
+      }
+    }
+  }
+
+  .arrow {
+    cursor: pointer;
+    width: 15px;
+
+    &:first-child {
+      transform: rotate(-180deg)
+    }
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
index 7ecafca0..d7e03549 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
@@ -3,6 +3,12 @@
     <div class="EventDetail">
       <Form :formList="formList" />
 
+      <div class="video-pic">
+        <Video />
+
+        <Carousel style="flex: 1" />
+      </div>
+
       <TimeLine1 :data="timeLine1List" />
       <TimeLine2 :data="timeLine2List" style="flex: 1;" />
     </div>
@@ -16,6 +22,8 @@ import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index";
 import Form from '@screen/components/FormConfig';
 import { formList, timeLine1List } from "./data"
 import { timeLine2List } from "@screen/pages/control/event/commandDispatch/Cards/DisposalProcess/data.js"
+import Video from "@screen/components/Video";
+import Carousel from "./Carousel/index.vue"
 
 export default {
   name: 'EventDetail',
@@ -23,7 +31,9 @@ export default {
     Dialog,
     Form,
     TimeLine1,
-    TimeLine2
+    TimeLine2,
+    Video,
+    Carousel
   },
   model: {
     prop: 'visible',
@@ -60,15 +70,10 @@ export default {
   height: 768px;
   flex-direction: column;
 
-  .left {
-    flex: 1;
-  }
-
-  .right {
+  .video-pic {
     display: flex;
-    flex-direction: column;
-    gap: 9px;
-    cursor: pointer;
+    height: 150px;
+    gap: 15px
   }
 }
 </style>

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 3/3] =?UTF-8?q?=E4=BA=A4=E9=80=9A=E4=BA=8B=E6=95=85?=
 =?UTF-8?q?=E5=BD=95=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;