diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/RoadStateCard/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/RoadStateCard/index.vue
index b71ee1ae..9529707f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/RoadStateCard/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/RoadStateCard/index.vue
@@ -15,7 +15,7 @@
         <Button :style="{ background: firstBtnColor,width: '50%' }" @click.native="$emit('firstBtnClick', cardData.id)">{{
           firstBtnText
         }}</Button>
-        <Button v-if="cardData.state != 3" :style="{ background: lastBtnColor,width: '50%' }" @click.native="$emit('lastBtnClick', $event)">{{ lastBtnText
+        <Button v-if="cardData.state != 3" :style="{ background: lastBtnColor,width: '50%' }" @click.native="$emit('lastBtnClick', cardData.id)">{{ lastBtnText
         }}</Button>
       </div>
     </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/Carousel/images/arrow.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/Carousel/images/arrow.svg
new file mode 100644
index 00000000..0e183e4b
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/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/dispatch/EventDetailDialog/Carousel/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/Carousel/index.vue
new file mode 100644
index 00000000..42b14da7
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/Carousel/index.vue
@@ -0,0 +1,106 @@
+<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/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/dispatch/EventDetailDialog/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/data.js
new file mode 100644
index 00000000..3d2c9ffd
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/data.js
@@ -0,0 +1,131 @@
+export const formList = [
+  {
+    label: "事件源:",
+    key: "stringEventSource",
+    type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
+  },
+  {
+    label: "桩号:",
+    key: "stakeMark",
+    type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
+  },
+  {
+    label: "行驶方向:",
+    key: "direction",
+    type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
+  },
+  {
+    label: "事件类型:",
+    key: "stringEventType",
+    type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
+  },
+  {
+    label: "事件原因:",
+    key: "eventCause",
+    type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
+  },
+  {
+    label: "事件状态:",
+    key: "stringEventState",
+    type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
+  },
+  {
+    label: "操作员:",
+    key: "nickName",
+    type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
+  },
+  {
+    label: "发生时间:",
+    key: "startTime",
+    type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
+  },
+  {
+    label: "完结时间:",
+    key: "endTime",
+    type: "input",
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
+  },
+  {
+    label: "事件描述:",
+    key: "direction",
+    type: "input",
+    gridColumn: 3,
+    options: {
+      disabled: true,
+      placeholder: ''
+    }
+  },
+];
+
+export const timeLine1List = [
+  {
+    time: "16.36",
+    label: "接警记录",
+    isActive: false,
+  },
+  {
+    time: "16.36",
+    label: "指令下达",
+    isActive: false,
+  },
+  {
+    time: "16.36",
+    label: "清障到达",
+    isActive: false,
+  },
+  {
+    time: "",
+    label: "安全防护",
+    isActive: false,
+  },
+  {
+    time: "",
+    label: "开始清障",
+    isActive: false,
+  },
+  {
+    time: "",
+    label: "清障结束",
+    isActive: false,
+  },
+  {
+    time: "",
+    label: "恢复畅通",
+    isActive: false,
+  },
+];
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/index.vue
index d7e8b863..e5e27dc2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/index.vue
@@ -1,56 +1,86 @@
 <template>
   <Dialog v-model="modelVisible" title="事件详情">
     <div class="EventDetail">
-      <BlackBar class="left">
-        <!-- <img src="./images/test.png" style="width: 100%;" /> -->
-        <div class="example">
-          <div class="title">
-            <h3>调度记录</h3>
-            <span>
-              2024年01月12日 00时00分00秒 至 2024年01月12日 23时59分59秒
-            </span>
-          </div>
-          <div class="body">
-            <p>2024-01-12 08:59,山东高速济南发展有限公司,集团账号:由出行转接上报了一起交通事故事件;</p>
-            <p>2024-01-12 09:08,山东高速济南发展有限公司,系统消息:自动分配路管人员陈清泉,救援车辆鲁AJ7K68参与事件处置；</p>
-            <p>2024-01-12 09:08,山东高速济南发展有限公司,晋雪艳1;</p>
-            <p>2024-01-12 09:00,山东高速济南发展有限公司,三雪艳2;</p>
-            <p>2024-01-12 09:11,山东高速济南发展有限公司,晋雪艳2;</p>
-            <p>2024-01-12 09:11,山东高速济南发展有限公司,晋雪艳3;</p>
-            <p>2024-01-12 09:12.山东高速济南发展有限公司,晋雪艳4;</p>
-            <p>2024-01-12 09:12,山东高速济南发展有限公司,晋雪艳4;</p>
-          </div>
-        </div>
-        <!-- <div style="width: 900px;height: 900px; background-color: #0F191E;"></div> -->
-      </BlackBar>
-      <div class="right">
-        <img src="./images/image.svg">
-        <img src="./images/printer.svg">
+      <Form :formList="formList" :dFormData="formData" label-width="100px" />
+
+      <div class="video">
+        <Video style="height: 100%;" />
+      </div>
+      <div class="pic">
+        <Carousel style="flex: 1;height: 80%;" />
       </div>
+
+      <!-- <TimeLine1 :data="timeLine1List" />
+      <TimeLine2 :data="timeLine2List" style="flex: 1;" /> -->
+
     </div>
+    <!-- <template #footer>
+      <Button style="padding: 0 24px;" @click.native="modelVisible = false">确认</Button>
+      <Button :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }" @click.native="modelVisible = false"> 取消</Button>
+    </template> -->
   </Dialog>
 </template>
 
 <script>
 import Dialog from "@screen/components/Dialog/index";
-import BlackBar from "@screen/components/Scrollbar/BlackBar.vue";
+import TimeLine1 from "@screen/components/TimeLine/TimeLine1/index";
+import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index";
+import Form from '@screen/components/FormConfig';
+import { formList } 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"
+import Button from '@screen/components/Buttons/Button.vue';
+import request from "@/utils/request";
+var moment = require("moment");
 
 export default {
   name: 'EventDetail',
   components: {
     Dialog,
-    BlackBar
+    Form,
+    TimeLine1,
+    TimeLine2,
+    Video,
+    Carousel,
+    Button
   },
   model: {
     prop: 'visible',
     event: 'update:value'
   },
   props: {
-    visible: Boolean
+    visible: Boolean,
+    formData: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  data() {
+    return {
+      formList,
+      timeLine1List: [{
+        time: "",
+        label: "",
+        isActive: false,
+      }],
+      timeLine2List: [
+        {
+          time: "",
+          name: "",
+          desc: '',
+          posts: "",
+          direction: "left",
+        }
+      ],
+    }
   },
   computed: {
     modelVisible: {
       get() {
+        // if (this.visible) {
+        //   this.getProcess();
+        // }
         return this.visible;
       },
       set(val) {
@@ -58,47 +88,77 @@ export default {
       }
     }
   },
-}
-</script>
+  methods: {
+    getProcess() {
 
-<style lang="scss" scoped>
-.EventDetail {
-  display: flex;
-  gap: 9px;
+      let directionFlg = true;
 
-  .left {
-    flex: 1;
-    width: 600px;
-    height: 720px;
+      request({
+        url: `/system/process/list`,
+        method: "get",
+        params: { eventId: this.formData.id }
+      }).then(result => {
+        if (result.code != 200) return Message.error(result?.msg);
+        const rows = result.rows;
+        this.timeLine1List = [];
+        this.timeLine2List = [];
 
-    .example {
-      display: flex;
-      flex-direction: column;
-      gap: 9px;
+        this.formData?.processConfigList.forEach(it => {
+          const process = rows.find(row => it.nodeNode == row.processId);
 
-      >div {
-        display: flex;
-        flex-direction: column;
-      }
+          if (process) {
+            this.timeLine1List.push(
+              {
+                time: moment(process.operationTime || new Date()).format('HH:mm'),
+                label: it.processNode,
+                isActive: true,
+              }
+            );
+            this.timeLine2List.push({
+              time: moment(process.operationTime || new Date()).format('yyyy-MM-DD HH:mm:ss'),
+              name: process.operator,
+              desc: process.context,
+              posts: "",
+              direction: directionFlg ? 'left' : 'right',
+            })
+            directionFlg = !directionFlg;
 
-      >.body {
-        gap: 6px;
-        font-size: 13px;
-      }
+          } else {
+            this.timeLine1List.push(
+              {
+                time: "",
+                label: it.processNode,
+                isActive: false,
+              }
+            )
+          }
+        })
+
+
+      })
 
-      >.title {
-        align-items: center;
-        border-bottom: 1px solid white;
-        padding-bottom: 6px;
-      }
     }
   }
+}
+</script>
 
-  .right {
+<style lang="scss" scoped>
+.EventDetail {
+  display: flex;
+  gap: 9px;
+  width: 836px;
+  height: 768px;
+  flex-direction: column;
+
+  .video {
     display: flex;
-    flex-direction: column;
-    gap: 9px;
-    cursor: pointer;
+    justify-content: center;
+    height: 300px;
+    gap: 15px
+  }
+  .pic {
+    height: 250px;
+    margin-top: 20px;
   }
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/images/image.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDispatchDialog/images/image.svg
similarity index 100%
rename from ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/images/image.svg
rename to ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDispatchDialog/images/image.svg
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/images/printer.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDispatchDialog/images/printer.svg
similarity index 100%
rename from ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/images/printer.svg
rename to ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDispatchDialog/images/printer.svg
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/images/test.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDispatchDialog/images/test.png
similarity index 100%
rename from ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/images/test.png
rename to ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDispatchDialog/images/test.png
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDispatchDialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDispatchDialog/index.vue
new file mode 100644
index 00000000..ff8f38e8
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDispatchDialog/index.vue
@@ -0,0 +1,133 @@
+<template>
+  <Dialog v-model="modelVisible" title="调度记录">
+    <div class="EventDetail">
+      <BlackBar class="left">
+        <!-- <img src="./images/test.png" style="width: 100%;" /> -->
+        <div class="example">
+          <div class="title">
+            <h3>调度记录</h3>
+            <span>
+              {{ startTime }} 至 {{ endTime }}
+            </span>
+          </div>
+          <div class="body">
+            <p v-for="(item, index) in data" :key="index">{{ `${beautifyOperationTime(item.operationTime)}，
+                          ${item.context}，${item.operator}` }}
+            </p>
+          </div>
+        </div>
+        <!-- <div style="width: 900px;height: 900px; background-color: #0F191E;"></div> -->
+      </BlackBar>
+      <div class="right">
+        <img src="./images/image.svg">
+        <img src="./images/printer.svg">
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index";
+import BlackBar from "@screen/components/Scrollbar/BlackBar.vue";
+import request from "@/utils/request";
+import moment from 'moment/moment';
+
+export default {
+  name: 'EventDetail',
+  components: {
+    Dialog,
+    BlackBar
+  },
+  model: {
+    prop: 'visible',
+    event: 'update:value'
+  },
+  props: {
+    visible: Boolean,
+    eventId: String
+  },
+  data() {
+    return {
+      data: [],
+      startTime: '',
+      endTime: ''
+    }
+  },
+  computed: {
+    modelVisible: {
+      get() {
+        if (this.visible) this.initData();
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:value', val)
+      }
+    }
+  },
+  methods: {
+    initData() {
+      request({
+        url: `/system/process/eventProcessById/${this.eventId}`,
+        method: "get",
+        params: this.searchData,
+      }).then((result) => {
+        if (result.code != 200) return Message.error(result?.msg);
+        this.data = result.rows;
+        let length = result.rows.length;
+        if (length > 0 && result.rows[0].operationTime) {
+          this.startTime = moment(result.rows[0].operationTime).format("YYYY年MM月DD日 HH时mm分ss秒") || '';
+        }
+        if (length > 1 && result.rows[length - 1].operationTime) {
+          this.endTime = moment(result.rows[length - 1].operationTime).format("YYYY年MM月DD日 HH时mm分ss秒") || '';
+        }
+        // this.total = result.total;
+      });
+    },
+    beautifyOperationTime(time) {
+      return moment(time).format('YYYY-MM-DD HH:mm:ss')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.EventDetail {
+  display: flex;
+  gap: 9px;
+
+  .left {
+    flex: 1;
+    width: 600px;
+    height: 720px;
+
+    .example {
+      display: flex;
+      flex-direction: column;
+      gap: 9px;
+
+      >div {
+        display: flex;
+        flex-direction: column;
+      }
+
+      >.body {
+        gap: 6px;
+        font-size: 13px;
+      }
+
+      >.title {
+        align-items: center;
+        border-bottom: 1px solid white;
+        padding-bottom: 6px;
+      }
+    }
+  }
+
+  .right {
+    display: flex;
+    flex-direction: column;
+    gap: 9px;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/data.js
new file mode 100644
index 00000000..f20165c4
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/data.js
@@ -0,0 +1,79 @@
+import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
+import { merge, cloneDeep } from "lodash";
+
+export const searchFormList = [{
+    label: "事件状态:",
+    key: "eventState",
+    type: "RadioGroup",
+    options: {
+      options: [
+        {
+          key: "0",
+          label: "未解决",
+        },
+        {
+          key: "1",
+          label: "已解决",
+        },
+        {
+          key: "2",
+          label: "已关闭",
+        },
+      ],
+    },
+  },
+    PresetFormItems.eventSources,
+    PresetFormItems.eventType,
+    {
+      label: "方向:",
+      key: "direction",
+      type: "RadioGroup",
+      options: {
+        options: [
+          {
+            key: "济南方向",
+            label: "济南方向",
+          },
+          {
+            key: "菏泽方向",
+            label: "菏泽方向",
+          },
+          {
+            key: "双向",
+            label: "双向",
+          },
+        ],
+      },
+    },
+    {
+      label: "时间范围:",
+      key: "daterange",
+      required: false,
+      type: "datePicker",
+      options: {
+        type: "daterange",
+        format: 'yyyy-MM-dd HH:mm:ss',
+        valueFormat: 'yyyy-MM-dd HH:mm:ss'
+      },
+    },
+    {
+      ...PresetFormItems.station,
+      label: "开始桩号:",
+      required: false,
+    },
+    merge(cloneDeep(PresetFormItems.station), {
+      options: {
+        options: [
+          {
+            key: "endStakeMark[0]",
+          },
+          {
+            key: "endStakeMark[1]",
+          },
+        ],
+      },
+      label: "结束桩号:",
+      required: false,
+    }
+    )
+  ];
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/index.vue
index 70c99ab4..60500aa2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/index.vue
@@ -2,20 +2,26 @@
   <div class='RoadNetworkMonitoring'>
     <!-- 搜索栏 -->
     <div class="filter">
-      <InputSearch style="width: 402px;" />
+      <InputSearch style="width: 402px;" :formList="searchFormList" :formConfigOptions="{ dFormData: { eventState: 0 } }"
+        @handleSearch="handleSearch" />
     </div>
 
     <!-- 内容 -->
     <div class="body">
-      <RoadStateCard v-for="item in 16" :key="item" @firstBtnClick="firstBtnClick" />
+      <RoadStateCard v-for="item in data" :key="item" :cardData="item" @firstBtnClick="firstBtnClick"
+        @lastBtnClick="lastBtnClick" />
     </div>
 
     <!-- 分页 -->
     <div class="footer">
-      <Pagination :total="90" />
+      <Pagination @current-change="initData" @size-change="onSizeChange" width="'100%'" :page-sizes="[12, 16, 20, 30, 50]"
+        :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum" layout="total, sizes, prev, pager, next"
+        :total="total">
+      </Pagination>
     </div>
 
-    <EventDetailDialog :visible="eventDetailDialogVisible" @update:value="handleClose" />
+    <EventDetailDialog :visible="eventDetailDialogVisible" :formData="detailDialogFormData" @update:value="handleClose" />
+    <EventDispatchDialog :visible="eventDispatchDialogVisible" @update:value="handleClose" :eventId="eventId" />
   </div>
 </template>
 
@@ -24,6 +30,9 @@ import Pagination from '@screen/components/Pagination.vue';
 import InputSearch from '@screen/components/InputSearch/index.vue';
 import RoadStateCard from '@screen/components/RoadStateCard/index.vue';
 import EventDetailDialog from "./EventDetailDialog/index";
+import EventDispatchDialog from "./EventDispatchDialog/index";
+import { searchFormList } from './data';
+import request from "@/utils/request";
 
 export default {
   name: 'RoadNetworkMonitoring',
@@ -31,20 +40,97 @@ export default {
     Pagination,
     RoadStateCard,
     InputSearch,
+    EventDispatchDialog,
     EventDetailDialog,
     Pagination
   },
   data() {
     return {
-      eventDetailDialogVisible: false
+      eventDetailDialogVisible: false,
+      eventDispatchDialogVisible: false,
+      searchFormList,
+      detailDialogFormData: {},
+      total: 0,
+      data: [],
+      eventId: 0,
+      searchData: {
+        pageSize: 16,
+        pageNum: 1,
+        eventState: 0,
+      },
     }
   },
+  created() {
+    this.initData();
+  },
   methods: {
-    firstBtnClick() {
-      this.eventDetailDialogVisible = true
+    initData() {
+      request({
+        // url: `/dc/system/event/dispatchEventList`,
+        url: '/dc/system/event/list',
+        method: "get",
+        params: this.searchData,
+      }).then((result) => {
+        if (result.code != 200) return Message.error(result?.msg);
+        this.data = result.rows;
+        this.total = result.total;
+      });
+    },
+    onSizeChange(pageSize) {
+      this.searchData.pageSize = pageSize;
+      this.getData();
+    },
+    getStateCardBind(item) {
+      const { state, textColor, text } = tabMap[this.activeName];
+
+      return {
+        cardData: { ...item, state },
+        lastBtnColor: textColor,
+        lastBtnText: text,
+      };
+    },
+    firstBtnClick(id) {
+      console.log("id", id);
+      request({
+        url: `/dc/system/event/${id}`,
+        method: "get",
+      }).then((result) => {
+        if (result.code != 200) return Message.error(result?.msg);
+        this.detailDialogFormData = result.data;
+
+        this.eventDetailDialogVisible = true;
+      });
+    },
+    lastBtnClick(id) {
+      console.log(id)
+      this.eventDispatchDialogVisible = true;
+      this.eventId = id;
+    },
+    handleSearch(data) {
+      console.log("data", data);
+      let daterange = data.daterange;
+
+      let dStakeMark = data.stakeMark;
+      let dendStakeMark = data.endStakeMark;
+
+      let stakeMark = dStakeMark[0] ? `K${dStakeMark[0]}+${dStakeMark[1]}` : '';
+      let endStakeMark = dendStakeMark[0] ? `K${dendStakeMark[0]}+${dendStakeMark[1]}` : '';
+
+      this.searchData = {
+        ...this.searchData,
+        eventState: data.eventState || 0,
+        eventType: data.eventType,
+        eventSources: data.eventSources,
+        startTime: daterange && daterange.length > 0 ? daterange[0] : "",
+        endTime: daterange && daterange.length > 0 ? daterange[1] : "",
+        stakeMark: stakeMark,
+        endStakeMark: endStakeMark,
+      };
+      this.initData();
     },
     handleClose() {
       this.eventDetailDialogVisible = false;
+      this.eventDispatchDialogVisible = false;
     }
   }
 }
@@ -60,17 +146,17 @@ export default {
   z-index: 6;
 
   .filter {
-    height: 60px;
+    height: 38px;
     display: flex;
     justify-content: flex-end;
   }
 
   .body {
     flex: 1;
-    overflow: hidden;
+    overflow: auto;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    grid-gap: 24px;
+    grid-gap: 20px;
     // grid-row-gap: 9px;
     // grid-column-gap: 9px;
     grid-auto-rows: min-content;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
index bec2cf71..d6bf0b22 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
@@ -232,7 +232,7 @@ export const eventLevel = {
 export const laneOccupancy = {
   label: "车道占用:",
   key: "dcEventAccident.laneOccupancy",
-  type: "RadioGroup",
+  type: "CheckboxGroup",
   isAlone: true,
   default: [],
   options: {
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 3ca6bd13..4503a5fb 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
@@ -144,6 +144,15 @@ export default {
     handleSubmit() {
       // return
       this.$refs.FormConfigRef.validate().then((formData) => {
+        
+        if(this.index == 0) {
+          formData.dcEventAccident.laneOccupancy = formData.dcEventAccident.laneOccupancy.join(',')
+        }
+        if(this.index == 1){
+          formData.dcEventVehicleAccident.laneOccupancy = formData.dcEventVehicleAccident.laneOccupancy.join(',')
+        }
+        // console.log('formData',formData)
+        // return;
         let stakeMark = formData.stakeMark;
         let endStakeMark = formData.endStakeMark;
         request({