diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/images/refresh.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/images/refresh.svg
new file mode 100644
index 00000000..e31a5500
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/images/refresh.svg
@@ -0,0 +1,22 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142814398">
+<g id="Group 1142814396">
+<path id="Rectangle 1304" d="M1.0437 2.41495L4.5636 2.01738L4.91112 6.00562" stroke="white" stroke-linecap="round"/>
+<g id="Ellipse 835">
+<mask id="path-2-inside-1_290_77" fill="white">
+<path d="M4.29579 2.52494C4.09359 2.27296 3.71712 2.25216 3.51748 2.50144C2.86315 3.31847 2.39514 4.30903 2.15904 5.38649C1.87758 6.67096 1.93836 8.02122 2.3337 9.26652C2.72904 10.5118 3.44118 11.5962 4.38007 12.3826C5.16561 13.0406 6.08036 13.4652 7.0411 13.6229C7.35243 13.674 7.61901 13.4293 7.63212 13.1145C7.64523 12.7997 7.39954 12.5346 7.08935 12.4765C6.32757 12.3339 5.60349 11.9884 4.97813 11.4646C4.19938 10.8124 3.6087 9.91289 3.28078 8.87998C2.95287 7.84706 2.90245 6.72709 3.13591 5.66169C3.33404 4.75752 3.72906 3.92712 4.28182 3.24492C4.4503 3.03698 4.46523 2.7361 4.29579 2.52494Z"/>
+</mask>
+<path d="M4.29579 2.52494C4.09359 2.27296 3.71712 2.25216 3.51748 2.50144C2.86315 3.31847 2.39514 4.30903 2.15904 5.38649C1.87758 6.67096 1.93836 8.02122 2.3337 9.26652C2.72904 10.5118 3.44118 11.5962 4.38007 12.3826C5.16561 13.0406 6.08036 13.4652 7.0411 13.6229C7.35243 13.674 7.61901 13.4293 7.63212 13.1145C7.64523 12.7997 7.39954 12.5346 7.08935 12.4765C6.32757 12.3339 5.60349 11.9884 4.97813 11.4646C4.19938 10.8124 3.6087 9.91289 3.28078 8.87998C2.95287 7.84706 2.90245 6.72709 3.13591 5.66169C3.33404 4.75752 3.72906 3.92712 4.28182 3.24492C4.4503 3.03698 4.46523 2.7361 4.29579 2.52494Z" stroke="white" stroke-width="2" mask="url(#path-2-inside-1_290_77)"/>
+</g>
+</g>
+<g id="Group 1142814397">
+<path id="Rectangle 1304_2" d="M15.0437 11.585L11.5238 11.9826L11.1763 7.99438" stroke="white" stroke-linecap="round"/>
+<g id="Ellipse 835_2">
+<mask id="path-4-inside-2_290_77" fill="white">
+<path d="M11.7916 11.4751C11.9938 11.727 12.3703 11.7478 12.5699 11.4986C13.2242 10.6815 13.6923 9.69097 13.9284 8.61351C14.2098 7.32904 14.149 5.97878 13.7537 4.73348C13.3584 3.48817 12.6462 2.40376 11.7073 1.61737C10.9218 0.95942 10.007 0.534814 9.0463 0.377109C8.73497 0.326006 8.46839 0.570722 8.45528 0.885536C8.44218 1.20035 8.68786 1.46544 8.99805 1.5235C9.75983 1.6661 10.4839 2.01159 11.1093 2.53538C11.888 3.18765 12.4787 4.08711 12.8066 5.12002C13.1345 6.15294 13.1849 7.27291 12.9515 8.33831C12.7534 9.24248 12.3583 10.0729 11.8056 10.7551C11.6371 10.963 11.6222 11.2639 11.7916 11.4751Z"/>
+</mask>
+<path d="M11.7916 11.4751C11.9938 11.727 12.3703 11.7478 12.5699 11.4986C13.2242 10.6815 13.6923 9.69097 13.9284 8.61351C14.2098 7.32904 14.149 5.97878 13.7537 4.73348C13.3584 3.48817 12.6462 2.40376 11.7073 1.61737C10.9218 0.95942 10.007 0.534814 9.0463 0.377109C8.73497 0.326006 8.46839 0.570722 8.45528 0.885536C8.44218 1.20035 8.68786 1.46544 8.99805 1.5235C9.75983 1.6661 10.4839 2.01159 11.1093 2.53538C11.888 3.18765 12.4787 4.08711 12.8066 5.12002C13.1345 6.15294 13.1849 7.27291 12.9515 8.33831C12.7534 9.24248 12.3583 10.0729 11.8056 10.7551C11.6371 10.963 11.6222 11.2639 11.7916 11.4751Z" stroke="white" stroke-width="2" mask="url(#path-4-inside-2_290_77)"/>
+</g>
+</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/img.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/img.png
deleted file mode 100644
index 52f690b2..00000000
Binary files a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/img.png and /dev/null differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue
index 2d52ab43..82eeb7df 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue
@@ -1,42 +1,152 @@
 <template>
-  <div class='comp_box'>
-    <img src="./img.png" />
+  <div class="RoadNetworkMonitoring">
+    <!-- 搜索栏 -->
+    <div class="filter">
+      <ButtonGradient @click="onRefresh" class="refresh-btn">
+        <template #prefix>
+          <img src="./images/refresh.svg" />
+        </template>
+        刷新
+      </ButtonGradient>
+
+      <InputSearch
+        style="width: 402px"
+        :formList="searchFormList"
+        :formConfigOptions="{ dFormData: { eventState: '0' } }"
+        @handleSearch="handleSearch"
+      />
+    </div>
+
+    <!-- 内容 -->
+    <div class="body">
+      <RoadStateCard
+        v-for="(item, index) in data"
+        :key="index"
+        :cardData="item"
+        @firstBtnClick="firstBtnClick"
+        @lastBtnClick="lastBtnClick"
+      />
+    </div>
+
+    <!-- 分页 -->
+    <div class="footer">
+      <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>
   </div>
 </template>
 
 <script>
+import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue";
+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";
+
+const directionMapping = {
+  1: "菏泽方向",
+  2: "双向",
+  3: "济南方向",
+};
 
 export default {
-  name: 'InDevelopment',
+  name: "RoadNetworkMonitoring",
   components: {
+    Pagination,
+    RoadStateCard,
+    InputSearch,
+    Pagination,
+    ButtonGradient,
   },
-  props: {
-    text: {
-      type: String,
-      default: "暂无数据"
-    }
+  data() {
+    return {
+      searchFormList: {},
+      detailDialogFormData: {},
+      total: 0,
+      data: [],
+      eventId: "0",
+      searchData: {
+        pageSize: 16,
+        pageNum: 1,
+        eventState: "0",
+      },
+    };
   },
-  mounted() {
-  }
-}
+  created() {
+    this.initData();
+  },
+  methods: {
+    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.total = result.total;
+        result.rows.forEach((it) => {
+          it.stringDirection = directionMapping[it.direction] || it.direction;
+        });
+        this.data = result.rows;
+      });
+    },
+    onSizeChange(pageSize) {},
+    getStateCardBind(item) {},
+    onRefresh() {},
+    firstBtnClick(id) {},
+    handleSearch(data) {},
+  },
+};
 </script>
 
-<style lang='scss' scoped>
-.comp_box {
-  // padding-top:160px;
-  width: 100%;
+<style lang="scss" scoped>
+.RoadNetworkMonitoring {
+  padding: 21px;
+
   height: 100%;
-  color: #8A9EAA;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  img {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
+  flex-direction: column;
+  z-index: 6;
+
+  .filter {
+    height: 38px;
+    display: flex;
+    // justify-content: flex-end;
+    justify-content: space-between;
+    .refresh-btn {
+    }
+  }
+
+  .body {
+    flex: 1;
+    overflow: auto;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 20px;
+    // grid-row-gap: 9px;
+    // grid-column-gap: 9px;
+    grid-auto-rows: min-content;
+  }
+
+  .footer {
+    margin-top: 15px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 </style>