交通事故录入弹窗提交

ruoyi-ui/src/views/JiHeExpressway/components/CheckboxGroup/index.vue → ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElCheckboxGroup.vue

@@ -1,6 +1,6 @@
 <template>
-  <ElCheckboxGroup v-bind="$attrs" v-on="$listeners" class='CheckboxGroup'>
+  <ElCheckboxGroup v-bind="$attrs" v-on="$listeners" class='ElCheckboxGroup'>
-    <ElCheckbox v-for="item in list" :label="item.key || item.label" :key="item.key || item.label">
+    <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;

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>

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>

ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/Radio.vue → 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 {

ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/RadioButton.vue → 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%);
+        background: var(--active-color);
-        // border-color: rgba(0, 0, 0, 0);
       }
     }
   }

ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/index.vue → 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: () => []
     }

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,7 +145,7 @@ export default {
 
       .el-form-item__label-wrap {
         width: fit-content;
-        // align-self: start;
+      }
 
       .el-form-item__label {
         height: 22px;
@@ -124,7 +157,6 @@ export default {
         // -webkit-background-clip: text;
         // -webkit-text-fill-color: transparent;
       }
-      }
 
       .el-form-item__content {
         margin: 0 !important;

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/ReleaseInformation/index.vue

@@ -2,7 +2,7 @@
   <Card class='ReleaseInformation' title="信息发布">
     <Form :formList="formList" column="1">
       <template #platform="{ formData, data }">
-				<CheckboxGroup :list="checkboxList" v-model="formData[data.key]">
+        <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`)" />
@@ -39,7 +39,7 @@
 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 {

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/TrafficControl/index.vue

@@ -1,6 +1,6 @@
 <template>
   <Card class='TrafficControl' title="交通管制">
-		<RadioGroup :list="radioList" value="mainlineControl" />
+    <RadioGroup :options="radioList" value="mainlineControl" />
 
     <div class="bottom">
       <ButtonGradient class="title-button special-button"
@@ -17,7 +17,7 @@ background: linear-gradient(82deg, #FFCD48 0%, #FE861E 100%);">
 
 <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 {

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/FormInput.vue

@@ -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>

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",
+};

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/FormTrafficAccident.vue

@@ -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>

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: "TrafficAccident",
-    key: "事件源",
+    label: "交通事故",
-    type: "input",
+    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: "黄金糕",
               },
               {
-    label: "桩号:",
+                value: "选项2",
-    key: "桩号:",
+                label: "双皮奶",
-    type: "input",
+              },
+              {
+                value: "选项3",
+                label: "蚵仔煎",
+              },
+              {
+                value: "选项4",
+                label: "龙须面",
+              },
+              {
+                value: "选项5",
+                label: "北京烤鸭",
+              },
+            ],
+          },
         },
         {
-    label: "行驶方向:",
+          label: "事件等级:",
-    key: "行驶方向",
+          key: "key4",
-    type: "input",
+          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: "辆",
+                },
               },
               {
-    label: "事件类型:",
+                prefix: {
-    key: "事件类型",
+                  text: "客车",
-    type: "input",
+                },
+                suffix: {
+                  text: "辆",
+                },
               },
               {
-    label: "事件原因:",
+                prefix: {
-    key: "事件原因",
+                  text: "罐车",
-    type: "input",
+                },
+                suffix: {
+                  text: "辆",
+                },
+              },
+            ],
+          },
         },
         {
-    label: "事件状态:",
+          label: "伤亡情况:",
-    key: "事件状态",
+          key: "key26",
-    type: "input",
+          isAlone: true,
+
+          type: "MultipleLabelItem",
+          options: {
+            options: [
+              {
+                prefix: {
+                  text: "轻伤",
+                },
+                suffix: {
+                  text: "人",
+                },
               },
               {
-    label: "操作员:",
+                prefix: {
-    key: "操作员",
+                  text: "重伤",
-    type: "input",
+                },
+                suffix: {
+                  text: "人",
+                },
               },
               {
-    label: "发生时间:",
+                prefix: {
-    key: "发生时间",
+                  text: "死亡",
-    type: "input",
+                },
+                suffix: {
+                  text: "人",
+                },
+              },
+            ],
+          },
         },
         {
-    label: "完结时间:",
+          label: "事件标题:",
-    key: "完结时间",
+          key: "key27",
-    type: "input",
+          isAlone: true,
+          required: true,
         },
         {
           label: "事件描述:",
-    key: "事件描述",
+          key: "key28",
-    type: "input",
+          isAlone: true,
-    gridArea: "1/1/1/1",
+          options: {
+            type: "textarea",
+            autosize: true,
+            maxlength: 150,
+            autosize: { minRows: 6, maxRows: 6 },
+            showWordLimit: true,
+          },
+          required: true,
+        },
+        source,
+      ],
+    },
+  },
+  {
+    key: "VehicleFault",
+    label: "车辆故障",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
+  },
+  {
+    key: "TrafficCongestion",
+    label: "交通拥堵",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
+  },
+  {
+    key: "TrafficControl",
+    label: "交通管制",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
+  },
+  {
+    key: "ServiceAreaAbnormal",
+    label: "服务区异常",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
+  },
+  {
+    key: "OtherEvents",
+    label: "其他事件",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
+  },
+  {
+    key: "HiddenDangersEquipment",
+    label: "设施设备隐患",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
+  },
+  {
+    key: "AbnormalWeather",
+    label: "异常天气",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
+  },
+  {
+    key: "Construction",
+    label: "施工建设",
+    formConfig: {
+      formOptions: {},
+      list: [],
+    },
+  },
+  {
+    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,
+      ],
+    },
   },
 ];

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">
+    <div class="EventDetailDialog">
-      <el-tab-pane label="交通事故" name="trafficAccident">
+      <ElTabs v-model="activeName" @tab-click="handleChange">
-        <FormTrafficAccident />
+        <ElTabPane v-for="item in tabConfigList" :key="item.key" :label="item.label" :name="item.key" />
-      </el-tab-pane>
+      </ElTabs>
-      <el-tab-pane label="车辆故障" name="vehicleFault">
+
-      </el-tab-pane>
+      <Transition name="fade">
-    </el-tabs>
+        <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;
+    justify-content: end;
-    gap: 9px;
+    gap: 15px;
-    cursor: pointer;
   }
 }
 </style>

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 {
     /**

ruoyi-ui/src/views/JiHeExpressway/scss/reset.scss

@@ -4,7 +4,8 @@ body {
     caret-color: white;
   }
 
-  div {
+  div,
+  form {
     /* 滚动条整体部分 */
     &::-webkit-scrollbar {
       width: 6px !important;