diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Title/images/bg.svg b/ruoyi-ui/src/views/JiHeExpressway/components/Title/images/bg.svg
new file mode 100644
index 00000000..b40eaea6
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Title/images/bg.svg
@@ -0,0 +1,9 @@
+<svg width="465" height="36" viewBox="0 0 465 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 75" d="M0 8.44156V36L465 34.9091V0H0V8.44156Z" fill="url(#paint0_linear_455_741)"/>
+<defs>
+<linearGradient id="paint0_linear_455_741" x1="1.51477e-06" y1="14.1818" x2="449.603" y2="14.1818" gradientUnits="userSpaceOnUse">
+<stop stop-color="#237E9B"/>
+<stop offset="1" stop-color="#1791B8" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Title/images/icon.svg b/ruoyi-ui/src/views/JiHeExpressway/components/Title/images/icon.svg
new file mode 100644
index 00000000..15dba2d6
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Title/images/icon.svg
@@ -0,0 +1,29 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 4116">
+<path id="Vector 321" opacity="0.24" d="M0.0888672 16.4886L0.0888672 5.46875L9.29593 10.9787L18.2442 5.46875V16.4886L9.29593 21.9985L0.0888672 16.4886Z" fill="url(#paint0_linear_455_750)"/>
+<path id="Vector 318" opacity="0.8" d="M17.7642 5.47103L9.29213 10.6877L0.575052 5.47104L9.29214 0.291889L17.7642 5.47103Z" fill="url(#paint1_linear_455_750)" stroke="url(#paint2_linear_455_750)" stroke-width="0.5"/>
+<path id="Vector 320" d="M17.7646 16.4915L9.29261 21.7082L0.57554 16.4915L9.29262 11.3124L17.7646 16.4915Z" fill="url(#paint3_linear_455_750)" stroke="url(#paint4_linear_455_750)" stroke-width="0.5"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_455_750" x1="8.84044" y1="7.08842" x2="8.84044" y2="21.5765" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3FFF74"/>
+<stop offset="1" stop-color="#32B3BB"/>
+</linearGradient>
+<linearGradient id="paint1_linear_455_750" x1="8.83849" y1="1.07589" x2="8.83849" y2="10.6998" gradientUnits="userSpaceOnUse">
+<stop offset="0.333357" stop-color="#00E2C7"/>
+<stop offset="1" stop-color="#32B3BB"/>
+</linearGradient>
+<linearGradient id="paint2_linear_455_750" x1="9.16456" y1="0" x2="9.16456" y2="10.9802" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00C945" stop-opacity="0"/>
+<stop offset="1" stop-color="#4FF5FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_455_750" x1="8.83898" y1="12.0964" x2="8.83898" y2="21.7204" gradientUnits="userSpaceOnUse">
+<stop offset="0.333357" stop-color="#00E2C7"/>
+<stop offset="1" stop-color="#32B3BB"/>
+</linearGradient>
+<linearGradient id="paint4_linear_455_750" x1="9.16505" y1="11.0205" x2="9.16505" y2="22.0007" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00C945" stop-opacity="0"/>
+<stop offset="1" stop-color="#4FF5FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Title/images/icon2.svg b/ruoyi-ui/src/views/JiHeExpressway/components/Title/images/icon2.svg
new file mode 100644
index 00000000..dcfb36d4
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Title/images/icon2.svg
@@ -0,0 +1,12 @@
+<svg width="66" height="10" viewBox="0 0 66 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142814103">
+<g id="Group 1142813371">
+<g id="Group 1142814342">
+<path id="Rectangle 186" d="M0.958496 0H11.8586L22.7587 8.66778H11.8586L0.958496 0Z" fill="#32B3BB"/>
+<path id="Rectangle 187" opacity="0.7" d="M25.54 2H34.2601L42.9802 8.50083H34.2601L25.54 2Z" fill="#32B3BB"/>
+<path id="Rectangle 188" opacity="0.4" d="M45.7139 5H51.5273L57.3407 9.33389H51.5273L45.7139 5Z" fill="#32B3BB"/>
+<path id="Rectangle 189" opacity="0.1" d="M59.835 7H62.742L65.6491 9.16695H62.742L59.835 7Z" fill="#32B3BB"/>
+</g>
+</g>
+</g>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Title/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Title/index.vue
new file mode 100644
index 00000000..029c3961
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Title/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class='Title'>
+    <div class="left">
+      <img src="./images/icon.svg" />
+      <span>{{ title }}</span>
+      <!-- <slot name="prefix"/> -->
+    </div>
+    <div class="right">
+      <slot name="suffix" />
+      <img src="./images/icon2.svg" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Title',
+  props: {
+    title: {
+      type: String
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.Title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 36px;
+  padding: 0 9px;
+
+  background-image: url(./images/bg.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+
+  >div {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue
new file mode 100644
index 00000000..c2b26d80
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <Card class='CrowdnessIndicatorRankings' title="拥挤度指标排名情况">
+    CrowdnessIndicatorRankings
+  </Card>
+</template>
+
+<script>
+import Card from "./../../components/Card.vue"
+
+export default {
+  name: 'CrowdnessIndicatorRankings',
+  components: {
+    Card
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.CrowdnessIndicatorRankings {}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DispatchLiaison/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DispatchLiaison/index.vue
new file mode 100644
index 00000000..d08e9737
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DispatchLiaison/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <Card class='DispatchLiaison' title="调度联络">
+    DispatchLiaison
+  </Card>
+</template>
+
+<script>
+import Card from "./../../components/Card.vue"
+
+export default {
+  name: 'DispatchLiaison',
+  components: {
+    Card
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.DispatchLiaison {}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue
new file mode 100644
index 00000000..c60fe9ce
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <Card class='DisposalPlan' title="处置预案">
+    DisposalPlan
+  </Card>
+</template>
+
+<script>
+import Card from "./../../components/Card.vue"
+
+export default {
+  name: 'DisposalPlan',
+  components: {
+    Card
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.DisposalPlan {}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/index.vue
new file mode 100644
index 00000000..8eee2775
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <Card class='DisposalProcess' title="处置过程">
+    DisposalProcess
+  </Card>
+</template>
+
+<script>
+import Card from "./../../components/Card.vue"
+
+export default {
+  name: 'DisposalProcess',
+  components: {
+    Card
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.DisposalProcess {}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/EventInformation/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/EventInformation/index.vue
new file mode 100644
index 00000000..f815a1bb
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/EventInformation/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <Card class='EventInformation' title="事件信息">
+    EventInformation
+  </Card>
+</template>
+
+<script>
+import Card from "./../../components/Card.vue"
+
+export default {
+  name: 'EventInformation',
+  components: {
+    Card
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.EventInformation {}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/RealTimeVideo/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/RealTimeVideo/index.vue
new file mode 100644
index 00000000..619464b6
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/RealTimeVideo/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <Card class='RealTimeVideo' title="实时视频">
+    RealTimeVideo
+  </Card>
+</template>
+
+<script>
+import Card from "./../../components/Card.vue"
+
+export default {
+  name: 'RealTimeVideo',
+  components: {
+    Card
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.RealTimeVideo {}
+</style>
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
new file mode 100644
index 00000000..ed39fdfa
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/ReleaseInformation/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <Card class='ReleaseInformation' title="信息发布">
+    ReleaseInformation
+  </Card>
+</template>
+
+<script>
+import Card from "./../../components/Card.vue"
+
+export default {
+  name: 'ReleaseInformation',
+  components: {
+    Card
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.ReleaseInformation {}
+</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
new file mode 100644
index 00000000..31413b00
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/TrafficControl/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <Card class='TrafficControl' title="交通管制">
+    TrafficControl
+  </Card>
+</template>
+
+<script>
+import Card from "./../../components/Card.vue"
+
+export default {
+  name: 'TrafficControl',
+  components: {
+    Card
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.TrafficControl {}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/components/Card.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/components/Card.vue
new file mode 100644
index 00000000..66683eb3
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/components/Card.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class='Card'>
+    <Title :title="title">
+      <template #suffix>
+        <slot name="title-suffix" />
+      </template>
+    </Title>
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import Title from "@screen/components/Title/index.vue"
+
+export default {
+  name: 'Card',
+  components: {
+    Title
+  },
+  props: {
+    title: {
+      type: String
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.Card {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, rgba(6, 66, 88, .4) 93%);
+  display: flex;
+  flex-direction: column;
+
+  .content {
+    height: 100%;
+    overflow: auto;
+    flex: 1;
+    padding: 9px;
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/index.vue
index 442870d9..40d3e026 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/index.vue
@@ -1,15 +1,49 @@
 <template>
   <div class='CommandDispatch'>
-    CommandDispatch
+    <EventInformation style="grid-area: 1/1/span 9/1;">1</EventInformation>
+    <DispatchLiaison style="grid-area: 10/1/span 7/2;">2</DispatchLiaison>
+    <DisposalPlan style="grid-area: 17/1/span 9/2;">3</DisposalPlan>
+    <CrowdnessIndicatorRankings style="grid-area: 1/2/span 12/2;">4</CrowdnessIndicatorRankings>
+    <DisposalProcess style="grid-area: 13/2/span 13/2;">5</DisposalProcess>
+    <RealTimeVideo style="grid-area: 1/3/span 6/3;">6</RealTimeVideo>
+    <ReleaseInformation style="grid-area: 7/3/span 14/3;">7</ReleaseInformation>
+    <TrafficControl style="grid-area: 21/3/span 5/3;">8</TrafficControl>
   </div>
 </template>
 
 <script>
+import Card from "./components/Card.vue";
+import CrowdnessIndicatorRankings from "./Cards/CrowdnessIndicatorRankings/index.vue";
+import DispatchLiaison from "./Cards/DispatchLiaison/index.vue";
+import DisposalPlan from "./Cards/DisposalPlan/index.vue";
+import DisposalProcess from "./Cards/DisposalProcess/index.vue";
+import EventInformation from "./Cards/EventInformation/index.vue";
+import RealTimeVideo from "./Cards/RealTimeVideo/index.vue";
+import ReleaseInformation from "./Cards/ReleaseInformation/index.vue";
+import TrafficControl from "./Cards/TrafficControl/index.vue";
+
 export default {
   name: 'CommandDispatch',
+  components: {
+    Card,
+    CrowdnessIndicatorRankings,
+    DispatchLiaison,
+    DisposalPlan,
+    DisposalProcess,
+    EventInformation,
+    RealTimeVideo,
+    ReleaseInformation,
+    TrafficControl,
+  }
 }
 </script>
 
 <style lang='scss' scoped>
-.CommandDispatch {}
+.CommandDispatch {
+  padding: 24px 12px 21px 12px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: repeat(24, 1fr);
+  gap: 18px;
+}
 </style>