diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/SimpleIcon.vue b/ruoyi-ui/src/views/JiHeExpressway/components/SimpleIcon.vue
new file mode 100644
index 00000000..e3299335
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/SimpleIcon.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class='SimpleIcon' ref="SimpleIconRef" />
+</template>
+
+<script>
+const cacheIcon = {
+
+}
+
+export default {
+  name: 'SimpleIcon',
+  props: {
+    /**
+     * [pattern, replacement]
+     */
+    replaces: {
+      type: Array,
+      default: () => []
+    },
+    url: {
+      type: String,
+      default: null
+    }
+  },
+  async created() {
+    if (!cacheIcon[this.url]) {
+      await fetch(this.url).then(async data => {
+        cacheIcon[this.url] = await new Response(data.body).text();
+      })
+    };
+
+    this._icon_replace_data = cacheIcon[this.url].replaceAll(...this.replaces);
+
+    this.insertHTML();
+  },
+  mounted() {
+    this.insertHTML();
+  },
+  methods: {
+    insertHTML() {
+      const el = this.$refs.SimpleIconRef;
+      if (!el) return;
+
+      el.innerHTML = this._icon_replace_data;
+
+      if (el.firstElementChild) {
+        const svg = el.firstElementChild;
+        el.replaceWith(el.firstElementChild)
+
+        this.$nextTick(() => {
+          for (let key in el.dataset) {
+            svg.dataset[key] = "";
+          }
+
+          el.classList.forEach(className => svg.classList.add(className))
+        });
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped></style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/index.vue
index 2eecace8..0e759e89 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/index.vue
@@ -1,9 +1,9 @@
 <template>
   <div class='TimeLine2'>
     <div class="node" v-for="(item, index) in data">
-      <div class="content">
-        <template v-if="!!((index + 1) & 1)">
-          <span class="title">{{ item.title }}</span>
+      <div class="content" v-if="direction != 'right'">
+        <template v-if="direction === 'auto' ? !!((index + 1) & 1) : true">
+          <span class="title" v-if="item.title">{{ item.title }}</span>
           <DescCard :data="item" />
         </template>
       </div>
@@ -11,10 +11,9 @@
         <div class="circle"></div>
         <div class="line"></div>
       </div>
-      <!-- <div class="content"> -->
-      <div class="content">
-        <template v-if="!((index + 1) & 1)">
-          <span class="title">{{ item.title }}</span>
+      <div class="content" v-if="direction != 'left'">
+        <template v-if="direction === 'auto' ? !((index + 1) & 1) : true">
+          <span class="title" v-if="item.title">{{ item.title }}</span>
           <DescCard :data="item" />
         </template>
       </div>
@@ -43,6 +42,15 @@ export default {
     data: {
       type: Array,
       default: () => []
+    },
+    /**
+     * auto 左右 显示
+     * left 左侧显示
+     * right 右侧显示
+     */
+    direction: {
+      type: String,
+      default: "auto"
     }
   }
 }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/divide.svg b/ruoyi-ui/src/views/JiHeExpressway/images/divide.svg
new file mode 100644
index 00000000..d3ddce77
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/divide.svg
@@ -0,0 +1,10 @@
+<svg width="1" height="150" viewBox="0 0 1 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line id="Line" x1="0.5" y1="-2.50936e-08" x2="0.500006" y2="150" stroke="url(#paint0_linear_140_6250)"/>
+<defs>
+<linearGradient id="paint0_linear_140_6250" x1="-1.00014" y1="-7.07547" x2="-1.00014" y2="159.906" gradientUnits="userSpaceOnUse">
+<stop stop-color="#033C51" stop-opacity="0"/>
+<stop offset="0.481139" stop-color="#0185B5"/>
+<stop offset="1" stop-color="#033C51" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/export.svg b/ruoyi-ui/src/views/JiHeExpressway/images/export.svg
index 7b9c7fb6..79ebc42b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/images/export.svg
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/export.svg
@@ -1,14 +1,7 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Frame 10065" clip-path="url(#clip0_308_1276)">
-<g id="Group 1142814551">
-<path id="Rectangle 1282" d="M1 7V11C1 12.1046 1.89543 13 3 13H11C12.1046 13 13 12.1046 13 11V7" stroke="white" stroke-linecap="round"/>
-<path id="Rectangle 1304" d="M4.27282 4.05153L7.04691 1.00002L9.81656 4.05155" stroke="white" stroke-linecap="round"/>
-<path id="Line 513" d="M7 9L7 2" stroke="white" stroke-linecap="round"/>
+<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#175;&#188;&#229;&#135;&#186;">
+<path id="Rectangle 1282" d="M1 6V9C1 10.1046 1.89543 11 3 11H10C11.1046 11 12 10.1046 12 9V6" stroke="white" stroke-linecap="round"/>
+<path id="Rectangle 1304" d="M4.00018 3.54291L6.54306 1.00003L9.08187 3.54293" stroke="white" stroke-linecap="round"/>
+<path id="Line 513" d="M6.54102 8L6.54102 2" stroke="white" stroke-linecap="round"/>
 </g>
-</g>
-<defs>
-<clipPath id="clip0_308_1276">
-<rect width="14" height="14" fill="white"/>
-</clipPath>
-</defs>
 </svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/form/calendar.svg b/ruoyi-ui/src/views/JiHeExpressway/images/form/calendar.svg
new file mode 100644
index 00000000..b4344fa0
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/form/calendar.svg
@@ -0,0 +1,29 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#151;&#165;&#229;&#142;&#134;">
+<circle id="Ellipse 41" cx="11" cy="11" r="11" fill="url(#paint0_linear_140_6234)"/>
+<g id="&#229;&#155;&#190;&#229;&#177;&#130;_1" clip-path="url(#clip0_140_6234)">
+<path id="Vector" d="M7.33355 15.8889H6.72244C6.35577 15.8889 6.11133 15.6444 6.11133 15.2778V6.7222C6.11133 6.35553 6.35577 6.11108 6.72244 6.11108H7.33355V15.8889Z" fill="white"/>
+<path id="Vector_2" d="M15.2781 15.8889H14.667V6.11108H15.2781C15.6448 6.11108 15.8892 6.35553 15.8892 6.7222V15.2778C15.8892 15.6444 15.6448 15.8889 15.2781 15.8889Z" fill="white"/>
+<path id="Vector_3" d="M7.33398 14.6666H14.6673V15.8888H7.33398V14.6666Z" fill="white"/>
+<path id="Vector_4" d="M7.33398 7.94446H14.6673V9.16668H7.33398V7.94446Z" fill="white"/>
+<path id="Vector_5" d="M9.77832 6.11108H12.2228V7.94442H9.77832V6.11108Z" fill="white"/>
+<path id="Vector_6" d="M8.55566 10.3889H9.77789V11.6111H8.55566V10.3889Z" fill="white"/>
+<path id="Vector_7" d="M7.94434 6.11108H9.16656V7.33331H7.94434V6.11108Z" fill="white"/>
+<path id="Vector_8" d="M12.834 6.11108H14.0562V7.33331H12.834V6.11108Z" fill="white"/>
+<path id="Vector_9" d="M10.3887 10.3889H11.6109V11.6111H10.3887V10.3889Z" fill="white"/>
+<path id="Vector_10" d="M12.2227 10.3889H13.4449V11.6111H12.2227V10.3889Z" fill="white"/>
+<path id="Vector_11" d="M8.55566 12.2222H9.77789V13.4444H8.55566V12.2222Z" fill="white"/>
+<path id="Vector_12" d="M10.3887 12.2222H11.6109V13.4444H10.3887V12.2222Z" fill="white"/>
+<path id="Vector_13" d="M12.2227 12.2222H13.4449V13.4444H12.2227V12.2222Z" fill="white"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_140_6234" x1="10.6049" y1="4.19847" x2="10.6049" y2="21.4962" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D5A939"/>
+<stop offset="1" stop-color="#D6771F"/>
+</linearGradient>
+<clipPath id="clip0_140_6234">
+<rect width="9.77778" height="9.77778" fill="white" transform="translate(6.11133 6.11108)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/form/delete.svg b/ruoyi-ui/src/views/JiHeExpressway/images/form/delete.svg
new file mode 100644
index 00000000..d7ac27b6
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/form/delete.svg
@@ -0,0 +1,9 @@
+<svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#136;&#160;&#233;&#153;&#164;">
+<path id="Rectangle 1282" d="M2.66602 4.33313V15.6665C2.66602 16.771 3.56145 17.6665 4.66602 17.6665H12.3327C13.4373 17.6665 14.3327 16.771 14.3327 15.6665V4.33313" stroke="white"/>
+<path id="Line 511" d="M4.33496 1H12.6683" stroke="white" stroke-linecap="round"/>
+<path id="Line 512" d="M6.83398 14.3333L6.83398 7.66659" stroke="white" stroke-linecap="round"/>
+<path id="Line 514" d="M1 4.33313H16" stroke="white" stroke-linecap="round"/>
+<path id="Line 513" d="M10.166 14.3333L10.166 7.66659" stroke="white" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/form/edit.svg b/ruoyi-ui/src/views/JiHeExpressway/images/form/edit.svg
new file mode 100644
index 00000000..3f485ed7
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/form/edit.svg
@@ -0,0 +1,7 @@
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#228;&#191;&#174;&#230;&#148;&#185;">
+<path id="Rectangle 81" d="M15.6672 8.5235V15.1222C15.6672 16.2267 14.7718 17.1222 13.6672 17.1222H3C1.89543 17.1222 1 16.2267 1 15.1222V4.38159C1 3.27702 1.89543 2.38159 3 2.38159H9.55587" stroke="white"/>
+<path id="Rectangle 82" d="M11.7444 2.66358L14.8486 4.98538L9.41261 12.3259L6.63976 13.5432C6.28599 13.6985 5.89777 13.4081 5.94424 13.023L6.30846 10.0041L11.7444 2.66358Z" stroke="white"/>
+<path id="Rectangle 83" d="M12.9 1.10311C13.0643 0.881196 13.3768 0.835378 13.5979 1.00078L15.9013 2.72362C16.1224 2.88902 16.1685 3.203 16.0041 3.42492L14.7172 5.16281L11.613 2.84101L12.9 1.10311Z" stroke="white"/>
+</g>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/form/people.svg b/ruoyi-ui/src/views/JiHeExpressway/images/form/people.svg
new file mode 100644
index 00000000..e0051f57
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/form/people.svg
@@ -0,0 +1,12 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#228;&#186;&#186;&#229;&#145;&#152;">
+<circle id="Ellipse 41" cx="11" cy="11" r="11" fill="url(#paint0_linear_140_5759)"/>
+<path id="Vector" d="M14.1331 7.2677C14.1743 7.28983 14.2143 7.31408 14.2528 7.34035L14.3733 7.42027V7.55904C14.3786 7.96373 14.3292 8.30521 14.2236 8.56822C14.1415 8.78965 13.9828 8.97658 13.7746 9.09715C13.6384 9.56723 13.479 10.0024 13.2507 10.3686C12.991 10.79 12.652 11.114 12.1632 11.2884C11.9469 11.3611 11.3931 11.4018 10.861 11.393C10.3468 11.3865 9.83039 11.3364 9.62607 11.2477C9.18599 11.0508 8.87764 10.7203 8.64039 10.3032C8.43758 9.92372 8.28086 9.52265 8.17337 9.10805C7.95896 8.99158 7.79422 8.80487 7.7086 8.5813C7.59484 8.31611 7.54245 7.96737 7.54919 7.55687V7.41664L7.66894 7.33817C7.69962 7.31856 7.73106 7.30039 7.76174 7.28296C7.62702 5.6642 7.67792 5.0648 8.29612 4.38112C9.50408 3.42062 12.2725 3.45477 13.4962 4.3259C14.3307 5.0895 14.3905 5.94465 14.1331 7.2677ZM11.5974 11.9489L11.6146 12.3194L11.3901 12.6827L11.7059 14.6945L12.9985 11.9968L14.9676 11.9321C15.9847 12.8658 16.6366 15.065 16.4757 16.5H5.5C5.52769 15.2394 5.76644 13.0852 7.05822 11.9954L8.83723 12.0106L10.504 14.6785L10.8168 12.6834L10.5923 12.3201L10.6095 11.9496C10.9391 11.9271 11.27 11.9271 11.5997 11.9496L11.5974 11.9489ZM13.0688 6.693C12.2867 6.83831 11.1229 6.97127 10.2009 6.46849C9.8476 6.27523 9.32819 6.6712 8.90459 6.63052C8.76934 6.89034 8.67283 7.1675 8.61794 7.4537L8.57154 7.69636L8.32007 7.67166C8.26935 7.66739 8.21829 7.67384 8.17038 7.69055C8.14694 7.69763 8.12415 7.70662 8.10227 7.71743C8.10004 7.94236 8.13959 8.16583 8.21903 8.37714C8.2819 8.52245 8.36871 8.61981 8.48472 8.65541L8.6344 8.699L8.67482 8.84431C8.79756 9.28823 8.93677 9.70672 9.13136 10.0475C9.31098 10.3635 9.5415 10.6149 9.86182 10.758C9.99654 10.8176 10.4231 10.8518 10.8707 10.859C11.3459 10.8663 11.819 10.8409 11.9754 10.7864C12.3279 10.66 12.5809 10.4158 12.7784 10.0962C12.9902 9.75322 13.1407 9.31729 13.2724 8.83922L13.3106 8.70263L13.4505 8.65613C13.562 8.61763 13.6481 8.51954 13.708 8.37205C13.7843 8.16359 13.8223 7.94374 13.8202 7.72252C13.8008 7.71224 13.7802 7.70419 13.7589 7.69854C13.7136 7.6825 13.6656 7.6751 13.6174 7.67675L13.3719 7.69273L13.3278 7.45878C13.2755 7.19476 13.1885 6.93837 13.0688 6.6959V6.693Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_140_5759" x1="10.6049" y1="4.19847" x2="10.6049" y2="21.4962" gradientUnits="userSpaceOnUse">
+<stop stop-color="#48C1F5"/>
+<stop offset="1" stop-color="#0073B4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/form/phone.svg b/ruoyi-ui/src/views/JiHeExpressway/images/form/phone.svg
new file mode 100644
index 00000000..ffe666a2
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/form/phone.svg
@@ -0,0 +1,12 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#148;&#181;&#232;&#175;&#157;">
+<circle id="Ellipse 41" cx="11" cy="11" r="11" fill="url(#paint0_linear_140_5786)"/>
+<path id="Vector" d="M16.1488 14.7326C16.2922 14.8764 16.3727 15.0711 16.3727 15.2741C16.3727 15.4772 16.2922 15.6719 16.1488 15.8156L15.607 16.3575C15.207 16.7575 14.6805 17.0009 14.0424 17.0817C13.8843 17.1014 13.7252 17.1113 13.5659 17.1111C13.0588 17.1045 12.5552 17.0256 12.0704 16.8766C10.6308 16.4568 9.11696 15.501 7.80896 14.1908C6.50096 12.8806 5.54294 11.3689 5.12311 9.92934C4.9121 9.21248 4.84299 8.54856 4.91798 7.95743C4.99886 7.31924 5.24222 6.79355 5.6422 6.39284L6.18407 5.85171C6.32782 5.70835 6.52256 5.62785 6.72558 5.62785C6.9286 5.62785 7.12333 5.70835 7.26709 5.85171L9.65001 8.23461C9.79337 8.37837 9.87387 8.5731 9.87387 8.77612C9.87387 8.97913 9.79337 9.17387 9.65001 9.31762L9.10814 9.85875C8.80227 10.1646 9.10814 11.1572 9.97499 12.0248C10.8418 12.8923 11.8344 13.2011 12.141 12.8916L12.6829 12.3497C12.8266 12.2064 13.0214 12.1259 13.2244 12.1259C13.4274 12.1259 13.6222 12.2064 13.7659 12.3497L16.1488 14.7326ZM12.2094 9.17792C12.3718 9.17812 12.5274 9.24271 12.6423 9.35752C12.7571 9.47234 12.8217 9.628 12.8219 9.79038C12.8198 9.83185 12.8262 9.87331 12.8407 9.91223C12.8552 9.95116 12.8774 9.98673 12.906 10.0168C12.9347 10.0469 12.9691 10.0708 13.0073 10.0872C13.0455 10.1035 13.0866 10.112 13.1281 10.112C13.1696 10.112 13.2107 10.1035 13.2489 10.0872C13.287 10.0708 13.3215 10.0469 13.3501 10.0168C13.3788 9.98673 13.401 9.95116 13.4155 9.91223C13.4299 9.87331 13.4363 9.83185 13.4343 9.79038C13.4341 9.46557 13.305 9.15413 13.0753 8.92445C12.8457 8.69478 12.5342 8.56567 12.2094 8.56547C12.1679 8.56344 12.1265 8.56985 12.0875 8.58432C12.0486 8.5988 12.013 8.62102 11.983 8.64966C11.9529 8.6783 11.9289 8.71274 11.9126 8.75091C11.8962 8.78908 11.8878 8.83017 11.8878 8.8717C11.8878 8.91322 11.8962 8.95432 11.9126 8.99249C11.9289 9.03065 11.9529 9.0651 11.983 9.09374C12.013 9.12237 12.0486 9.1446 12.0875 9.15907C12.1265 9.17354 12.1679 9.17996 12.2094 9.17792ZM16.7253 7.88244C16.3505 6.99456 15.7222 6.23698 14.9189 5.70456C14.1156 5.17213 13.1731 4.88854 12.2094 4.88928C12.1679 4.88725 12.1265 4.89366 12.0875 4.90814C12.0486 4.92261 12.013 4.94484 11.983 4.97347C11.9529 5.00211 11.9289 5.03655 11.9126 5.07472C11.8962 5.11289 11.8878 5.15398 11.8878 5.19551C11.8878 5.23704 11.8962 5.27813 11.9126 5.3163C11.9289 5.35447 11.9529 5.38891 11.983 5.41755C12.013 5.44618 12.0486 5.46841 12.0875 5.48288C12.1265 5.49736 12.1679 5.50377 12.2094 5.50174C13.3464 5.5031 14.4365 5.95537 15.2404 6.75935C16.0444 7.56334 16.4967 8.65338 16.4981 9.79038C16.496 9.83185 16.5024 9.87331 16.5169 9.91223C16.5314 9.95116 16.5536 9.98673 16.5823 10.0168C16.6109 10.0469 16.6453 10.0708 16.6835 10.0872C16.7217 10.1035 16.7628 10.112 16.8043 10.112C16.8458 10.112 16.8869 10.1035 16.9251 10.0872C16.9633 10.0708 16.9977 10.0469 17.0263 10.0168C17.055 9.98673 17.0772 9.95116 17.0917 9.91223C17.1061 9.87331 17.1126 9.83185 17.1105 9.79038C17.112 9.13493 16.981 8.48594 16.7253 7.88244ZM12.2094 7.33983C12.8591 7.34061 13.4819 7.59904 13.9413 8.05844C14.4007 8.51784 14.6592 9.14069 14.66 9.79038C14.6579 9.83185 14.6643 9.87331 14.6788 9.91223C14.6933 9.95116 14.7155 9.98673 14.7441 10.0168C14.7728 10.0469 14.8072 10.0708 14.8454 10.0872C14.8836 10.1035 14.9247 10.112 14.9662 10.112C15.0077 10.112 15.0488 10.1035 15.087 10.0872C15.1251 10.0708 15.1596 10.0469 15.1882 10.0168C15.2169 9.98673 15.2391 9.95116 15.2536 9.91223C15.268 9.87331 15.2745 9.83185 15.2724 9.79038C15.2724 8.97802 14.9497 8.19893 14.3753 7.62451C13.8008 7.05009 13.0218 6.72738 12.2094 6.72738C12.1679 6.72534 12.1265 6.73176 12.0875 6.74623C12.0486 6.7607 12.013 6.78293 11.983 6.81157C11.9529 6.8402 11.9289 6.87465 11.9126 6.91282C11.8962 6.95098 11.8878 6.99208 11.8878 7.0336C11.8878 7.07513 11.8962 7.11622 11.9126 7.15439C11.9289 7.19256 11.9529 7.22701 11.983 7.25564C12.013 7.28428 12.0486 7.30651 12.0875 7.32098C12.1265 7.33545 12.1679 7.34186 12.2094 7.33983Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_140_5786" x1="10.6049" y1="4.19847" x2="10.6049" y2="21.4962" gradientUnits="userSpaceOnUse">
+<stop stop-color="#39D5BF"/>
+<stop offset="1" stop-color="#1FAED6"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/form/record.svg b/ruoyi-ui/src/views/JiHeExpressway/images/form/record.svg
new file mode 100644
index 00000000..1a7f56d0
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/form/record.svg
@@ -0,0 +1,6 @@
+<svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#232;&#174;&#176;&#229;&#189;&#149;">
+<path id="Ellipse 17" d="M11.7128 6.81954C11.7128 8.05231 10.719 9.0474 9.49847 9.0474C8.2779 9.0474 7.28418 8.05231 7.28418 6.81954C7.28418 5.58677 8.2779 4.59167 9.49847 4.59167C10.719 4.59167 11.7128 5.58677 11.7128 6.81954Z" stroke="white"/>
+<path id="Ellipse 18" d="M18.245 6.59259C18.3433 6.73274 18.3433 6.90658 18.245 7.04673C17.6997 7.824 16.5296 9.36298 14.9702 10.7027C13.4016 12.0503 11.5054 13.1393 9.5 13.1393C7.49457 13.1393 5.59845 12.0503 4.02983 10.7027C2.47043 9.36298 1.30027 7.824 0.755021 7.04673C0.656707 6.90658 0.656707 6.73274 0.755022 6.59259C1.30027 5.81533 2.47043 4.27635 4.02983 2.93664C5.59845 1.58902 7.49457 0.5 9.5 0.5C11.5054 0.5 13.4016 1.58902 14.9702 2.93664C16.5296 4.27635 17.6997 5.81533 18.245 6.59259Z" stroke="white"/>
+</g>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/form/search.svg b/ruoyi-ui/src/views/JiHeExpressway/images/form/search.svg
new file mode 100644
index 00000000..2baaab48
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/form/search.svg
@@ -0,0 +1,6 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#144;&#156;&#231;&#180;&#162;">
+<path id="Ellipse 598" d="M11.1686 6.92125C10.7805 9.65526 8.24946 11.557 5.51545 11.1688C2.78144 10.7807 0.879734 8.24969 1.26787 5.51568C1.65601 2.78167 4.18701 0.879962 6.92102 1.2681C9.65503 1.65624 11.5567 4.18724 11.1686 6.92125Z" stroke="white"/>
+<path id="Line 508" d="M10.5147 9.94337L10.1418 9.6103L9.47566 10.3561L9.84857 10.6892L10.5147 9.94337ZM12.5377 13.091C12.7436 13.275 13.0597 13.2571 13.2437 13.0512C13.4276 12.8452 13.4098 12.5291 13.2038 12.3452L12.5377 13.091ZM9.84857 10.6892L12.5377 13.091L13.2038 12.3452L10.5147 9.94337L9.84857 10.6892Z" fill="white"/>
+</g>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/import.svg b/ruoyi-ui/src/views/JiHeExpressway/images/import.svg
new file mode 100644
index 00000000..2d4ffd83
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/import.svg
@@ -0,0 +1,7 @@
+<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#175;&#188;&#229;&#135;&#186;">
+<path id="Rectangle 1282" d="M1 6V3C1 1.89543 1.89543 1 3 1H10C11.1046 1 12 1.89543 12 3V6" stroke="white" stroke-linecap="round"/>
+<path id="Rectangle 1304" d="M4.00018 8.45709L6.54306 11L9.08187 8.45707" stroke="white" stroke-linecap="round"/>
+<path id="Line 513" d="M6.54102 4L6.54102 10" stroke="white" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
index 7713daad..44624f5f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
@@ -12,7 +12,7 @@
       <div class="device-item" v-for="(item, index) in tabContentData" :key="item.id" @click="handleDevice(item)"
         :style="getStart(index)">
         <div class="device-icon"
-          :style="{ backgroundImage: `url(${require(`@screen/images/layer/${active}/${item.title}${item.status}.svg`)})` }" />
+          :style="{ backgroundImage: `url(${require(`@screen/images/layer/${active}/${item.title}${item.status}.svg`)})`, '--bgColor': `rgba(0, 209, 255, ${item.status ? 0.3 : 0})` }" />
         <span>{{ item.title }}</span>
       </div>
     </TransitionGroup>
@@ -207,7 +207,9 @@ export default {
           width: 33px;
           height: 33px;
           border: 1px solid rgba(0, 209, 255, .5);
+          background-color: var(--bgColor);
           border-radius: 50%;
+          z-index: -1;
         }
       }
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
index 7bf409fb..db2f6a0e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
@@ -49,13 +49,16 @@ export const eventMap = {
 
     cacheRemoveFunc.DriveTestEquipment_Camera_Remove?.();
 
-    const normal = require(`@screen/images/layer${item.id.replace(".", "")}`);
+    const normal = require(`@screen/images/layer${item.id.replace(
+      /^\.|[^/]+(?=.svg$)/g,
+      (data) => (data === "." ? "" : `${data}_active`)
+    )}`);
     const fault = require(`@screen/images/layer${item.id.replace(
       /^\.|[^/]+(?=.svg$)/g,
       (data) => (data === "." ? "" : `${data}_fault`)
     )}`);
-    // const fault = require(`@screen/images/mapBg/fault.svg`);
-    // const normal = require(`@screen/images/mapBg/active.svg`);
+    const faultBg = require(`@screen/images/mapBg/fault.svg`);
+    const normalBg = require(`@screen/images/mapBg/active.svg`);
 
     const markerClick = (e) => {
       const extData = e.target.getExtData();
@@ -79,9 +82,23 @@ export const eventMap = {
           lnglat: [lng, lat],
           name: "",
           extData: item,
-          content: `<img style="width: 36px; height: 36px" src='${
-            item.status !== "0" ? fault : normal
-          }'>`,
+          content: `<div style="
+            background-image: url(${item.status !== "0" ? faultBg : normalBg});
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            width: 42px;
+            height: 42px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          ">
+          <img style="
+            width: 18px;
+            height: 18px;
+            margin-left: 3px;
+            margin-bottom: 6px;
+          " src='${item.status !== "0" ? fault : normal}'>
+          </div>`,
         };
       }),
       markerClick
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
index 3d6938b3..263bef6f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
@@ -57,8 +57,14 @@ export async function setMarkerCluster(map, points, markerFun) {
     renderMarker(context) {
       const { content, extData } = context.data[0];
 
-      const offset = new AMap.Pixel(-9, -9);
+      const offset = new AMap.Pixel(0, 0);
       context.marker.setContent(content);
+      context.marker.setAnchor("bottom-center");
+      console.log(
+        "%c [ context.marker ]-62-「map.js」",
+        "font-size:15px; background:#7d477f; color:#c18bc3;",
+        context.marker
+      );
       context.marker.setOffset(offset);
 
       context.marker.setExtData(extData);
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/README.md b/ruoyi-ui/src/views/JiHeExpressway/pages/README.md
deleted file mode 100644
index 18ae2dba..00000000
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-> 规范:
-> 按照 XXX/index.vue
-> 再去 HeaderMenu 的 menuData.js 修改
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/components/SelectList.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/components/SelectList.vue
new file mode 100644
index 00000000..c28b8e04
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/components/SelectList.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class='SelectList'>
+    <div class="title">
+      {{ data.title }}
+    </div>
+    <div class="body">
+      <div class="card" v-for="item in (data.list || [])">
+        <SimpleIcon class="icon" :url="require('@screen/images/form/delete.svg')"
+          :replaces='[`stroke="white"`, `stroke="#52D6FF"`]' />
+
+        <slot :data="item">
+          <div class="info">
+            <span>{{ item.name }}</span>
+            <span>{{ item.phone }}</span>
+          </div>
+        </slot>
+      </div>
+    </div>
+    <div class="footer card">
+      <img src="@screen/images/form/delete.svg" />
+      <span>添加</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import SimpleIcon from "@screen/components/SimpleIcon.vue"
+
+export default {
+  name: 'SelectList',
+  components: {
+    SimpleIcon
+  },
+  props: {
+    data: {
+      /**
+       * {
+       *    title: '标题',
+       *    list: {
+       *      name: "",
+       *      phone: "",
+       *    }[]
+       * }
+       */
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.SelectList {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    height: 22px;
+    font-size: 16px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    line-height: 19px;
+    letter-spacing: 1px;
+    background: linear-gradient(180deg, #3DE8FF 0%, #00BCD6 100%);
+    background-clip: text;
+    color: transparent;
+    margin-bottom: 15px;
+
+    text-align: center;
+  }
+
+  .card {
+    width: 142px;
+    min-height: 65px;
+    background: #0D5F79;
+    border-radius: 2px 2px 2px 2px;
+    opacity: 1;
+    position: relative;
+
+    font-size: 16px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 19px;
+    letter-spacing: 1px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 3px;
+    }
+
+    &.active {
+      background: linear-gradient(180deg, #00AEE5 0%, #0086B1 100%);
+    }
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: 9px;
+    overflow: auto;
+    height: 100%;
+    flex: 1;
+
+    .card {
+      cursor: pointer;
+
+      .icon {
+        position: absolute;
+        width: 12px;
+        right: 3px;
+        top: 3px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .footer {
+    margin-top: 9px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    font-size: 15px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    color: #4DD4FF;
+    line-height: 19px;
+    letter-spacing: 1px;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/components/SpecialTable.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/components/SpecialTable.vue
new file mode 100644
index 00000000..982c4201
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/components/SpecialTable.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class='SpecialTable'>
+    <div v-for="(dataItem, index) in data" class="row">
+      <div class="bg normal">
+        <div class="column" v-for="item in columns" :key="item.key" :style="{ width: item.width }">
+          <div class="title" v-if="onlyFirstTitle ? !index : true">
+            <slot :name="`title-${item.key}`" :title="item" :data="dataItem">
+              {{ item.title }}
+            </slot>
+          </div>
+          <div class="content">
+            <slot :name="`content-${item.key}`" :title="item" :data="dataItem" />
+          </div>
+        </div>
+      </div>
+      <div class="bg operation column">
+        <div class="title">
+          <slot name="operation-title">
+            操作
+          </slot>
+        </div>
+        <div class="content">
+          <slot name="operation-content" :data="dataItem" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SpecialTable',
+  props: {
+    /**
+     * {
+     *  key: string;
+     *  title: string;
+     *  width: string
+     * }[]
+     */
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * {
+     *  id: string;
+     *  [x: string]: any;
+     * }[]
+     */
+    data: {
+      type: Array,
+      default: () => [{}]
+    },
+    onlyFirstTitle: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.SpecialTable {
+  display: flex;
+  flex-direction: column;
+
+  gap: 9px;
+
+  .row {
+    width: 100%;
+    display: flex;
+    gap: 27px;
+  }
+
+  .bg {
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, rgba(24, 57, 77, .7) 93%);
+    border-radius: 0px 0px 0px 0px;
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(1, 135, 178, 0), rgba(1, 135, 178, .51)) 1 1;
+  }
+
+  .normal {
+    display: flex;
+  }
+
+  .column {
+    position: relative;
+    padding: 15px 18px;
+    // padding-top: 12px;
+    font-size: 20px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    line-height: 23px;
+    letter-spacing: 1px;
+    gap: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .title {
+      background: linear-gradient(180deg, #3DE8FF 0%, #00BCD6 100%);
+      background-clip: text;
+      color: transparent;
+      // position: absolute;
+    }
+
+    .content {
+      display: flex;
+      align-items: center;
+      flex: 1;
+    }
+
+    &:not(:last-child) {
+      &::after {
+        content: "";
+        position: absolute;
+        background-image: url("~@screen/images/divide.svg");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        height: 100%;
+        width: 3px;
+        right: 0;
+        top: 0;
+      }
+    }
+  }
+
+  .operation {
+    padding: 24px 18px;
+
+    .content {
+      gap: 9px;
+    }
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/index.vue
index 016bb484..eeb4a347 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/index.vue
@@ -5,25 +5,52 @@
     <!-- 搜索栏 -->
     <div class="filter">
       <div>
-        <ButtonGradient>
-          <template #prefix>
-            <img src="@screen/images/insert.svg" />
-          </template>
-          新增
-        </ButtonGradient>
-        <ButtonGradient>
-          <template #prefix>
-            <img src="@screen/images/export.svg" />
-          </template>
-          导出
-        </ButtonGradient>
-        <ButtonGradient>
-          <template #prefix>
-            <img src="@screen/images/refresh.svg" />
-          </template>
-          刷新
-        </ButtonGradient>
-
+        <template v-if="activeName === 'DutyOfficer'">
+          <ButtonGradient>
+            <template #prefix>
+              <img src="@screen/images/import.svg" />
+            </template>
+            机构值班表
+          </ButtonGradient>
+          <ButtonGradient>
+            <template #prefix>
+              <img src="@screen/images/import.svg" />
+            </template>
+            应急机构
+          </ButtonGradient>
+          <ButtonGradient>
+            <template #prefix>
+              <img src="@screen/images/export.svg" />
+            </template>
+            上传
+          </ButtonGradient>
+          <ButtonGradient>
+            <template #prefix>
+              <img src="@screen/images/insert.svg" />
+            </template>
+            新增
+          </ButtonGradient>
+        </template>
+        <template v-else>
+          <ButtonGradient>
+            <template #prefix>
+              <img src="@screen/images/insert.svg" />
+            </template>
+            新增
+          </ButtonGradient>
+          <ButtonGradient>
+            <template #prefix>
+              <img src="@screen/images/export.svg" />
+            </template>
+            导出
+          </ButtonGradient>
+          <ButtonGradient>
+            <template #prefix>
+              <img src="@screen/images/refresh.svg" />
+            </template>
+            刷新
+          </ButtonGradient>
+        </template>
       </div>
 
       <InputSearch style="width: 402px;" />
@@ -71,7 +98,7 @@ export default {
   },
   data() {
     return {
-      activeName: "FirstResponders",
+      activeName: "DutyOfficer",
       panels: [
         {
           label: "应急人员",
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
new file mode 100644
index 00000000..f484e15d
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue
@@ -0,0 +1,118 @@
+<template>
+  <Dialog v-model="visibleModel" title="修改值班信息表">
+    <div class="ModifyDutyInformationTable">
+      <div class="search">
+        <div>
+          <Form :formList="formList" />
+        </div>
+
+        <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/pages/control/event/event/EventDetailDialog/Form.vue';
+
+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: "input",
+      },
+      {
+        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;
+    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/OperateRecord.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/OperateRecord.vue
new file mode 100644
index 00000000..efe03f0d
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/OperateRecord.vue
@@ -0,0 +1,76 @@
+<template>
+  <Dialog v-model="visibleModel" title="操作记录">
+    <div class="OperateRecord">
+      <TimeLine :data="timeLine2List" direction="right" />
+
+      <div class="bottom">
+        <Button>确认</Button>
+        <Button :style="{ backgroundColor: '#C9C9C9' }"> 取消</Button>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index.vue";
+import TimeLine from "@screen/components/TimeLine/TimeLine2/index.vue";
+import Button from "@screen/components/Buttons/Button.vue"
+
+export default {
+  name: 'OperateRecord',
+  components: {
+    Dialog,
+    Button,
+    TimeLine
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emit: ['close'],
+  data() {
+    return {
+      timeLine2List: Array.from({ length: 6 }).map(() => ({
+        // title: "接警记录",
+        time: "2023-12-21 16:35:44",
+        name: "甘易玫",
+        desc: "描述性文字文字文字文字文字文字文字文字描述性文字文字文字文字文字文字文字文字",
+        posts: '淄博发展公司管理员'
+      })),
+    }
+  },
+  computed: {
+    visibleModel: {
+      get() {
+        return this.visible
+      },
+      set(bool) {
+        this.$emit('close', bool);
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.OperateRecord {
+  width: 540px;
+  height: 518px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+
+  .bottom {
+    margin-top: 9px;
+    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/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/index.vue
index 42c43f07..b79b9a39 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/index.vue
@@ -1,15 +1,213 @@
 <template>
   <div class='DutyOfficer'>
-    DutyOfficer
+    <SpecialTable :columns="columns" :data="data">
+      <template #title-DateDuty>
+        <div>
+          值班中心
+        </div>
+        </template>
+      <template #content-DateDuty="{ data }">
+        <div class="item">
+          <img src="@screen/images/form/calendar.svg" />
+          {{ data['值班日期'] }}
+        </div>
+      </template>
+      <template #content-DutyLeaderCenter="{ data }">
+        <div class="parent">
+          <div class="item">
+            <img src="@screen/images/form/people.svg" />
+            {{ data['值班日期'] }}
+          </div>
+          <div class="item">
+            <img src="@screen/images/form/phone.svg" />
+            {{ data['值班日期'] }}
+          </div>
+        </div>
+      </template>
+      <template #content-DispatchLeadership="{ data }">
+        <div class="item-parent">
+          <div class="item">
+            <img src="@screen/images/form/people.svg" />
+            {{ data['值班日期'] }}
+          </div>
+          <div class="item">
+            <img src="@screen/images/form/phone.svg" />
+            {{ data['值班日期'] }}
+          </div>
+        </div>
+      </template>
+      <template #content-DispatchDuty="{ data }">
+        <div class="item-parent">
+          <div class="item">
+            <img src="@screen/images/form/people.svg" />
+            {{ data['值班日期'] }}
+          </div>
+          <div class="item">
+            <img src="@screen/images/form/people.svg" />
+            {{ data['值班日期'] }}
+          </div>
+        </div>
+      </template>
+      <template #content-TravelDuty="{ data }">
+        <div class="item-parent">
+          <div class="item">
+            <img src="@screen/images/form/people.svg" />
+            {{ data['值班日期'] }}
+          </div>
+          <div class="item">
+            <img src="@screen/images/form/people.svg" />
+            {{ data['值班日期'] }}
+          </div>
+        </div>
+      </template>
+      <template #content-EmergencyLeadership="{ data }">
+        <div class="item-parent">
+          <div class="item">
+            <img src="@screen/images/form/people.svg" />
+            {{ data['值班日期'] }}
+          </div>
+          <div class="item">
+            <img src="@screen/images/form/phone.svg" />
+            {{ data['值班日期'] }}
+          </div>
+        </div>
+      </template>
+      <template #content-EmergencyDuty="{ data }">
+        <div class="item-parent">
+          <div class="item">
+            <img src="@screen/images/form/people.svg" />
+            {{ data['值班日期'] }}
+          </div>
+          <div class="item">
+            <img src="@screen/images/form/people.svg" />
+            {{ data['值班日期'] }}
+          </div>
+        </div>
+      </template>
+      <template #operation-content>
+        <ButtonGradient class="operate-button" @click.native="handleOperateRecord(true)">
+          <template #prefix>
+            <img src="@screen/images/form/edit.svg" />
+          </template>
+          修改
+        </ButtonGradient>
+        <ButtonGradient class="operate-button" @click.native="handleModifyDutyInformationTable(true)">
+          <template #prefix>
+            <img src="@screen/images/form/record.svg" />
+          </template>
+          记录
+        </ButtonGradient>
+        <ButtonGradient class="operate-button">
+          <template #prefix>
+            <img src="@screen/images/form/delete.svg" />
+          </template>
+          删除
+        </ButtonGradient>
+      </template>
+    </SpecialTable>
+
+    <OperateRecord :visible="operateRecordVisible" @close="handleOperateRecord(false)" />
+    <ModifyDutyInformationTable :visible="modifyDutyInformationTableVisible"
+      @close="handleModifyDutyInformationTable(false)" />
   </div>
 </template>
 
 <script>
+import SpecialTable from "./../../components/SpecialTable.vue"
+import OperateRecord from "./components/OperateRecord.vue"
+import ModifyDutyInformationTable from "./components/ModifyDutyInformationTable.vue"
+import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
+
 export default {
   name: 'DutyOfficer',
+  components: {
+    SpecialTable,
+    OperateRecord,
+    ModifyDutyInformationTable,
+    ButtonGradient
+  },
+  data() {
+    return {
+      columns: [
+        {
+          key: "DateDuty",
+          title: "值班日期",
+          width: "180px"
+        },
+        {
+          key: "DutyLeaderCenter",
+          title: "中心值班领导",
+          width: "240px"
+        },
+        {
+          key: "DispatchLeadership",
+          title: "调度领导",
+          width: "240px"
+        },
+        {
+          key: "DispatchDuty",
+          title: "调度值班",
+          width: "180px"
+        },
+        {
+          key: "TravelDuty",
+          title: "出行值班",
+          width: "180px"
+        },
+        {
+          key: "EmergencyLeadership",
+          title: "应急领导",
+          width: "240px"
+        },
+        {
+          key: "EmergencyDuty",
+          title: "应急值班",
+          width: "180px"
+        },
+      ],
+      data: Array.from({ length: 15 }).map((_, index) => ({
+        "id": index,
+        "值班日期": "2023-12-21",
+        "中心值班领导": "甘易玫",
+        "调度领导": "甘易玫",
+        "调度值班": "甘易玫",
+        "出行值班": "甘易玫",
+        "应急领导": "甘易玫",
+        "应急值班": "甘易玫",
+      })),
+
+      operateRecordVisible: false,
+      modifyDutyInformationTableVisible: false
+    }
+  },
+  methods: {
+    handleOperateRecord(bool) {
+      this.operateRecordVisible = bool;
+    },
+    handleModifyDutyInformationTable(bool) {
+      this.modifyDutyInformationTableVisible = bool;
+    }
+  }
 }
 </script>
 
 <style lang='scss' scoped>
-.DutyOfficer {}
+.DutyOfficer {
+
+  .item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    &:not(:last-child) {
+      margin-bottom: 6px;
+    }
+  }
+
+  .operate-button {
+    width: 105px;
+    height: 41px;
+    border-radius: 5px;
+  }
+}
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Form.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Form.vue
index 4aa74a08..0cc68188 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Form.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Form.vue
@@ -1,13 +1,15 @@
 <template>
   <ElForm :style="getStyle()" :label-width="labelWidth" class="FormConfig" size="mini">
-    <ElFormItem v-for="(item, index) in formList" :key="item.key" :label="item.label" :style="gridStyle(item, index)">
+    <ElFormItem class="formItem" v-for="(item, index) in formList" :key="item.key" :label="item.label"
+      :style="gridStyle(item, index)">
       <FormInput v-bind="item.options" />
     </ElFormItem>
   </ElForm>
 </template>
 
 <script>
-import FormInput from "./FormInput.vue"
+import FormInput from "./FormInput.vue";
+
 export default {
   name: 'FormConfig',
   components: {
@@ -59,6 +61,11 @@ export default {
   align-content: start;
   width: 100%;
 
+  .formItem {
+    display: flex;
+    align-items: center;
+  }
+
 
   ::v-deep {
     .el-form-item {
@@ -72,6 +79,10 @@ export default {
         // -webkit-background-clip: text;
         // -webkit-text-fill-color: transparent;
       }
+
+      .el-form-item__content {
+        margin: 0 !important;
+      }
     }
   }
 }