From deb4ca10fa3a897c121319fc5533123ab6c0b582 Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Tue, 23 Jan 2024 15:56:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JiHeExpressway/components/Adaptation.vue  |   6 +-
 .../components/Descriptions.vue               |   4 +-
 .../components/Dialog/index.vue               |  38 +-
 .../JiHeExpressway/components/Dialog/utils.js |  45 ++
 .../JiHeExpressway/components/Video/Video.vue |  32 ++
 .../JiHeExpressway/components/Video/index.vue | 104 ++++-
 .../images/camera-control-icon.svg            |   3 +
 .../images/dialog/icon-control.png            | Bin 950 -> 0 bytes
 .../images/dialog/icon-monitor.png            | Bin 572 -> 0 bytes
 .../images/dialog/icon-photo.png              | Bin 584 -> 0 bytes
 .../images/dialog/icon-video.png              | Bin 595 -> 0 bytes
 .../images/home-filter/filter.svg             |   5 +
 .../components/BroadcastReleases.vue          | 193 ++++++++
 .../components/Dialogs/Broadcast/index.vue    | 157 +++++++
 .../Dialogs/Camera/Descriptions.vue           | 122 -----
 .../Camera/components/CameraControlDialog.vue | 202 ++++++++
 .../{ControlCamera => Camera}/images/add.svg  |   2 +-
 .../images/bottom.svg                         |   1 -
 .../{ControlCamera => Camera}/images/left.svg |   1 -
 .../images/right.svg                          |   1 -
 .../{ControlCamera => Camera}/images/sub.svg  |   2 +-
 .../{ControlCamera => Camera}/images/top.svg  |   1 -
 .../Home/components/Dialogs/Camera/index.vue  |  92 +++-
 .../Dialogs/DrivingGuidance/index.vue         |  19 +-
 .../Home/components/RoadAndEvents/index.vue   |  12 +-
 .../RoadAndEvents/utils/buttonEvent.js        | 436 +++++++++++-------
 .../RoadAndEvents/utils/httpList.js           | 129 ++++--
 .../components/RoadAndEvents/utils/map.js     |  41 +-
 .../views/JiHeExpressway/pages/Home/index.vue |  74 +--
 29 files changed, 1296 insertions(+), 426 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/components/Dialog/utils.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/components/Video/Video.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/camera-control-icon.svg
 delete mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-control.png
 delete mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-monitor.png
 delete mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-photo.png
 delete mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-video.png
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/home-filter/filter.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue
 delete mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/Descriptions.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/components/CameraControlDialog.vue
 rename ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/{ControlCamera => Camera}/images/add.svg (93%)
 rename ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/{ControlCamera => Camera}/images/bottom.svg (85%)
 rename ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/{ControlCamera => Camera}/images/left.svg (84%)
 rename ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/{ControlCamera => Camera}/images/right.svg (84%)
 rename ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/{ControlCamera => Camera}/images/sub.svg (87%)
 rename ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/{ControlCamera => Camera}/images/top.svg (85%)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
index e35c600c..ca9e5cfd 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Adaptation" :style="transformStyle">
+  <div class="Adaptation" :style="transformStyle" ref="AdaptationRef">
     <slot />
   </div>
 </template>
@@ -81,8 +81,10 @@ export default {
         cssGlobalVariable[2][1] = `scaleX(${1 - (scaleY - scaleX) / 2})`;
       }
 
+      const AdaptationDom = this.$refs.AdaptationRef;
+
       cssGlobalVariable.forEach((data) => {
-        document.documentElement.style.setProperty(...data);
+        AdaptationDom.style.setProperty(...data);
       });
 
     }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue
index d6bad9c8..54957f65 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue
@@ -56,7 +56,7 @@ export default {
     itemStyle: {
       type: [String, Object],
       default: null
-    },
+    }
   },
   computed: {
     gridStyle() {
@@ -71,7 +71,7 @@ export default {
 
         if (item.enum) return EnumMap[item.enum][result]?.text;
 
-        const templateResult = item.key?.replace(/\$\{[^}]+\}/g, (key) => this.data[key.slice(2, -1)]);
+        const templateResult = item.key?.replace(/\$\{[^}]+\}/g, (key) => this.data[key.slice(2, -1)] || "-");
 
         if (templateResult && templateResult != item.key) return templateResult
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
index 3bbe6885..f6d8e21f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
@@ -1,11 +1,11 @@
 <template>
   <Teleport>
     <Transition name="fade">
-      <div class="mask-layer" v-if="modelVisible">
+      <div :class="['mask-layer', { 'none-mask': noneMask }]" v-if="modelVisible">
         <BackgroundClip class='dialog'
           clipPath="polygon(calc(100% - var(--clip-width)) 0, 100% var(--clip-width), 100% 100%, var(--clip-width) 100%, 0 calc(100% - var(--clip-width)), 0 0)"
           borderColor="linear-gradient(180deg, rgba(78, 174, 204, .9), rgba(78, 174, 204, 0))"
-          bgColor="linear-gradient(180deg, rgba(14, 69, 92, 0.9) 0%, rgba(20, 89, 119, 0.9) 100%)">
+          bgColor="linear-gradient(180deg, rgba(14, 69, 92, 0.9) 0%, rgba(20, 89, 119, 0.9) 100%)" ref="DialogContentRef">
           <div class="dialog-title">
             <img class="title-icon" src="@screen/images/dialog/title-icon.svg" />
             <span>{{ title }}</span>
@@ -29,7 +29,8 @@
 
 <script>
 import Teleport from '../Teleport.vue';
-import BackgroundClip from "@screen/components/Decorations/BackgroundClip.vue"
+import BackgroundClip from "@screen/components/Decorations/BackgroundClip.vue";
+import { moveable } from "./utils"
 
 export default {
   components: {
@@ -45,7 +46,27 @@ export default {
     title: {
       type: String
     },
-    visible: Boolean
+    visible: Boolean,
+    noneMask: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    visible: {
+      deep: true,
+      handler(bool) {
+        this.$nextTick(() => {
+          if (!bool) return this.destroyMoveable?.()
+
+          const container = this.$refs.DialogContentRef.$el;
+
+          this.destroyMoveable = moveable(container, { target: container.querySelector(".dialog-title") });
+
+          this.$once("hook:beforeDestroy", () => this.destroyMoveable?.());
+        })
+      }
+    }
   },
   computed: {
     modelVisible: {
@@ -56,7 +77,7 @@ export default {
         this.$emit('update:value', val)
       }
     }
-  }
+  },
 }
 </script>
 
@@ -78,6 +99,11 @@ export default {
   --clip-width: calc(var(--clip-width-num) * 1px);
 }
 
+.none-mask {
+  background: rgba(0, 0, 0, 0);
+  pointer-events: none;
+}
+
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity .24s;
@@ -96,6 +122,8 @@ export default {
   box-sizing: border-box;
   margin: calc(var(--border-width) / 2);
 
+  pointer-events: all;
+
   .dialog-title {
     position: relative;
     width: calc(100% - 2px);
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/utils.js b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/utils.js
new file mode 100644
index 00000000..b5948243
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/utils.js
@@ -0,0 +1,45 @@
+/**
+ *
+ * @param {HTMLElement} container
+ * @param {{ target: HTMLElement }} param1
+ */
+export function moveable(container, { target } = {}) {
+  if (!target) target = container;
+
+  target.style.cursor = "move";
+
+  /**
+   * @type { { clientX: number; clientY: number } }
+   */
+  let lastPosition = { clientX: 0, clientY: 0 };
+
+  const down = (e) => {
+    const { clientX: x, clientY: y } = e;
+
+    const move = (e) => {
+      const { clientX, clientY } = e;
+
+      console.log(clientX, clientY, "move");
+
+      container.style.transform = `translate3d(${
+        clientX - x + lastPosition.clientX
+      }px, ${clientY - y + lastPosition.clientY}px, 0)`;
+    };
+
+    const up = (e) => {
+      const { clientX, clientY } = e;
+      lastPosition.clientX += clientX - x;
+      lastPosition.clientY += clientY - y;
+
+      document.removeEventListener("pointermove", move);
+      document.removeEventListener("pointerup", up);
+    };
+
+    document.addEventListener("pointermove", move);
+    document.addEventListener("pointerup", up);
+  };
+
+  target.addEventListener("pointerdown", down);
+
+  return () => target.removeEventListener("pointerdown", down);
+}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Video/Video.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Video/Video.vue
new file mode 100644
index 00000000..d0041669
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Video/Video.vue
@@ -0,0 +1,32 @@
+<template>
+  <video controls autoplay muted class="video-stream" v-bind="$attrs" ref="videoContainerRef" />
+</template>
+
+<script>
+import { HttpLivePlayer } from "./videoStream.js"
+
+export default {
+  name: 'Video',
+  props: {
+    camId: {
+      type: String,
+      default: null
+    },
+    url: {
+      type: String,
+      default: null
+    }
+  },
+  mounted() {
+    const player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.camId, url: this.url });
+
+    this.$once("hook:beforeDestroy", () => player.destroy());
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.video-stream {
+  background-color: #000;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue
index 18e2fb64..6f008dec 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue
@@ -1,13 +1,29 @@
 <template>
-  <!-- <video controls :src='require("@/assets/Example/d1.mp4")' autoplay muted class="video-stream" v-bind="$attrs" -->
-  <video controls autoplay muted class="video-stream" v-bind="$attrs" ref="videoContainerRef" />
+  <div class="video-container">
+    <div class="header">
+      <div class="left">
+        <div class="radio">
+          <span>图像</span>
+          <span class="active">视频</span>
+        </div>
+      </div>
+      <div class="right">
+        <div class="btn">2X</div>
+        <div class="btn">全屏</div>
+      </div>
+    </div>
+    <Video class="video-stream" />
+  </div>
 </template>
 
 <script>
-import { HttpLivePlayer } from "./videoStream.js"
+import Video from "./Video.vue"
 
 export default {
-  name: 'Video',
+  name: 'VideoControls',
+  components: {
+    Video
+  },
   props: {
     camId: {
       type: String,
@@ -17,17 +33,85 @@ export default {
       type: String,
       default: null
     }
-  },
-  mounted() {
-    const player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.camId, url: this.url });
-
-    this.$once("hook:beforeDestroy", () => player.destroy());
   }
 }
 </script>
 
 <style lang='scss' scoped>
-.video-stream {
+.video-container {
+  position: relative;
   background-color: #000;
+
+  .header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 999;
+    display: flex;
+    padding: 3px 6px;
+    justify-content: space-between;
+
+    .left,
+    .right {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+    }
+
+    .radio {
+      background: #265A70;
+      border-radius: 41px 41px 41px 41px;
+      overflow: hidden;
+      opacity: 1;
+      border: 1px solid #3DE8FF;
+      font-size: 12px;
+      // font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 14px;
+      height: fit-content;
+
+      // -webkit-background-clip: text;
+      // -webkit-text-fill-color: transparent;
+
+      .active {
+        background-color: rgba(61, 232, 255, 1);
+      }
+
+      span {
+        background-color: rgba(38, 90, 112, 1);
+        padding: 4px 9px;
+        display: inline-block;
+        cursor: pointer;
+
+        &:hover {
+          background-color: rgba(61, 232, 255, 1);
+        }
+      }
+    }
+
+    .btn {
+      background: #265A70;
+      border-radius: 6px 6px 6px 6px;
+      opacity: 1;
+      border: 1px solid #3DE8FF;
+      font-size: 12px;
+      // font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 14px;
+      padding: 3px 9px;
+      cursor: pointer;
+      // -webkit-background-clip: text;
+      // -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .video-stream {
+    width: 100%;
+    // height: 100%;
+    height: 240px;
+  }
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/camera-control-icon.svg b/ruoyi-ui/src/views/JiHeExpressway/images/camera-control-icon.svg
new file mode 100644
index 00000000..a401d9d7
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/camera-control-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M16.5844 18.1269C12.8224 21.4244 7.17792 21.4245 3.41589 18.1272L10.0003 11.5428L16.5844 18.1269ZM17.5272 17.1841C20.8243 13.4222 20.8243 7.77788 17.5271 4.01597L10.9431 10.6L17.5272 17.1841ZM10.0003 9.65718L16.5843 3.07316C12.8224 -0.224179 7.17799 -0.224255 3.416 3.07292L10.0003 9.65718ZM2.99826 3.46036C2.97507 3.48312 2.95197 3.506 2.92894 3.52903C2.90592 3.55205 2.88303 3.57516 2.86028 3.59835L2.99826 3.46036ZM2.47316 4.01571C-0.824341 7.7777 -0.824373 13.4223 2.47307 17.1844L9.05744 10.6L2.47316 4.01571ZM17.0711 3.52903L17.1128 3.57105L17.0291 3.48725L17.0711 3.52903ZM18 10.4885L15 12.2205L15 8.75643L18 10.4885ZM11.6207 5.59981L9.88868 2.59981L8.15663 5.59981L11.6207 5.59981ZM10 18.5998L11.7321 15.5998L8.26796 15.5998L10 18.5998ZM2.33399 12.2205L5.33399 10.4885L2.33399 8.75643L2.33399 12.2205Z" fill="#3DE8FF"/>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-control.png b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-control.png
deleted file mode 100644
index 99bbd08349453e237cf45a3e56e5b56534e7740f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 950
zcmV;n14;aeP)<h;3K|Lk000e1NJLTq000yK000#T1^@s6M%B)!00001b5ch_0Itp)
z=>Px&a7jc#R5(w4lwD{XWfX>=v$H=9S`bTjCP6PmQ1L=72!Y~kc8M2?wwfq5R2!lw
zO)D)0F-471N>!)|MWIIgsa9H2ZKd_9r431TiXuwAQqhV95j(R>1TQq{{(Q&IWVYR%
zw0>8^dCz&z`QG=NBmB?l|3g<SSlnTy=n2zIlewJX+o>C5?rLRnCBUuf12owN+<TS6
z85LeVZOf@7-a+V|*OdtG0}mw<{|2rFtVH~nm11-zFMccDLD*N-HKxgDz_N})!zP3x
z!ny?Ef*J-+_sH=M!u!u^?w{p+SnpzMW`UwA2Z3Ci^qc3%&AoxzS>+ti6~`}#VSW7?
zX43P#*{JjE*Eh<1G+|$$JB{+P2;XNjlxhv`Q^S5Bi?T(8*~k=ST!hDfn!s>2%kf&B
zX;oIC?Do24yR7y#Z^5s?@~}wYyHtu&Q+XKp2qn{TO`%Scr>rzbjbU2h?hsd{mTS@@
zZlKSH><MkYY1AoMIfleUCbi6Hs`5;;!DKqaG|-!9HYTpGC!^;fG*Hr)5`?ej@|0Ev
zj5OihFm4$(RlE6kMTKdU)d&V9)n>>^xyM&uz!qghg^h97C`km*&Ql7ijB=6Hc9;k%
zk!Eg0Qs+*|azYg+mMaJ+)Cd#?JX?+yD|(mFsOY-5^Ni<6Dg1VQ4X;^jP2@Qend+X`
z5rlmajqB@t^zMX#T!u5X3!G5l)<u6pwHfoe<&CH?p?64F^!34pazupeB4MCEquhe<
z3(8G!*;O%&m%Dk*4frxl_H5P`0$x<u6<_fuh1=Si{~l_1Kwy2s<#4i{p2LoU&tVk?
zBLd}%vcscpg&iobBx@87iu<QNLW;u)@O5v3ad(shz)%94^d@-R-OMfwFSKI<LsC4a
z%bH!$FSY2D@>bbltl+axh2bTWFXrqoJ3Lvauv?YqVpGprKXQ8{e8Jas7qyr~d8glD
z+f=}Nz|%3=2aPVahu`Uc*@Lj574Ns%I2Eu5*b+`xcI42dZBqzz(4OU3;PSQ#o7*O<
z8)cPcQB%VY9i}OJZHKLuDuc6m`8+o2a%o?n8;nLvq4Ow5kjVYDNhl=@&)V{7E52l7
z$B%Sx+nTzPjNvQz3*{xRM<x=+EX@yhU(WD^3Tse$k$B-M3kYXYa43`IlT+7AxXC-t
Yf8kG6bf)vL#Q*>R07*qoM6N<$g89P7(*OVf

diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-monitor.png b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-monitor.png
deleted file mode 100644
index dfe22e50c1ad0475613621ed9b0a07bebe46120f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 572
zcmV-C0>k}@P)<h;3K|Lk000e1NJLTq000vJ000mO1^@s6^u$DB00001b5ch_0Itp)
z=>Px$_DMuRR5(wSk}*isVHk&>-}k>tXy_ot(;+Ab8XBU`A-vP5#-b=3tgXDjHNqik
zs1OT_TGPg$Nt~pThD#G66ly5jD!Bfq)No*!c6Z-fC!Psj{`FhF;d|caec$hW#mY&~
z*;$NX#JoJcV@<kOecSA<3V1BE`m$pNsILYZd<{hB>qbp(N!B)NPYf>C2=X!>x<zhe
z_i8aps`k9Kc=2{aP!!B_<xPSiB>z8Ft)cC4j#t3`$jst-+0ix8ps*HO{j+2lF3OQH
z*cl;RGNUh+pf@X(*0MU0v)#oQ9}sm013(-j6ICVf-g~+xnl)8rmn%CO+JSB2wuug4
zM&hm+mw@(7NCyMY^=z|#C>2_t9P@F{qXMLHRQBs2@C+Ce^c(Do7*NiYxuA63rV)n&
zPeaAt8d}mht^%hF7M#%o?DOKLz^#*tB1V7ki#zLNsk{wIoI|_-K4WzM-Ro@N$dt<T
z%5feeSdosJ=$5B$yh$HdWfFx7U`8DH8N_JG*6UO1yB$%92Z(kVx6GI{M+e5sx*d!z
z6*-CV)Rj2CDg#D<>ZnJ?6B=CGQtF$Xb}<ILr{KhWgUohu=C>_xz#)lu>)MQ(UfY~q
zGw2iyj5X?Ug-_4g)ObS4Ez4>p`zH%+7{`}|96i%X6{9NKNcIQ7)z!*$-NrTm0000<
KMNUMnLSTZ84+!P}

diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-photo.png b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-photo.png
deleted file mode 100644
index 557b38992e1e0f08c0bb349d76721203944a0a99..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 584
zcmV-O0=NB%P)<h;3K|Lk000e1NJLTq000*N000#T1^@s6t>Sg700001b5ch_0Itp)
z=>Px%0!c(cR7gv$l)q~eVHn3h&s{E!6_iFz8b}ZnT)OF^(8M2gaO<T00ZzJf5JSdp
zRR=8&x^*bHC@!udYNCjOx;Uw%QEQtF5slKOF?WyNk;s)cdYAN_-n;ktex8T-{XUQ2
zThpqB|GS_4w20HyiMz>F^{m3}$PUbYfPRfCI6s&xj><VXzN};H<ZZh_6XB&Q_8<ua
z#>60@4%cP8sxxMkLVJx9&r<Se5O7zUt!fLXNVcX|j2QV=gY@%^d<hFbwxqjlVV@b}
z-QyAY=IXP{T0yV}gR9EX29C1^RvcP&_CHNZc}w8AC7sa-1-kwaE|ijTYfIoqKI^uK
z#dk5V)PYu;%!{-v{uh4wj+%GRNFe7-Eb6X@X{rBx&|Y_*t7}GWK8b)RQ%@3dBkUt@
zTDe4tSwnnqnm(NJx|EVbVG?YB|5_z!!U8b70rZaq;~#ZIqD)SVGT&|e_3$C`_6nE9
zq=5FQQMp!1$wmKZwx+LugYG|Zr;>7@n2`7D;3#?T2)tRd>2lw|V6wPJ?t6_=)e5lJ
zA1f9(CUI%<20BgDfd{(Q6^HG^!aamjJp`_6-1cAfIy4L%_zJ`WR8sB-9)RnGl-;Q~
zD=-yQ5hBj3{3^<&5Tc-=3oiWppW%K}12uY3uIIa=XT5Aq9{?wNdOQTP6Z$iv9R3Zh
W8wDLpu3@?W0000<MNUMnLSTaL9}q$S

diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-video.png b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-video.png
deleted file mode 100644
index 8185dbd4ea2b67716ff33a554f2087bd05bc47dc..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 595
zcmV-Z0<8UsP)<h;3K|Lk000e1NJLTq000{R000yS1^@s6e1b-R00001b5ch_0Itp)
z=>Px%4M{{nR7gv`l}$@jVHC%I=iZsCHi<Yb9El3D=w)G)tJFJFeS+GAA0TqoszqQB
zL=n`YpiLkVK?X(i@(qe^%M5DQ>!ujzw#dNL8OM81JnDeb%za7gSzi9<{LcS5=Q&pZ
zTwjM!#u4_T=1b~R7P$4YAeW;eWw@*ZnND5@v#9}V0>lChIOp}swN{y=SkWg6C)S5r
zj<z?!OefByNWED;DNgAd6%K9`Y;l_Ws~s}k6y{FpB*LMMf)UXDqFa8Nd`F&ZCfLVC
zJI7cs%Y;P21PFO&=jadS;>$7DIA5o0d!DLa;R;#KY5+?^r#y~^!56O}eZ#&UAmoPK
z&e5>e8frNZE^ym&I2D?%t)A>ynDW8vl|7C0gJmsR7I(y=k1*cp8bw-IBe?Wk&xFc#
zluTme-@+OIx1tL`HW6?=Ft?&3z<t2_XRxBLgQ`4`4BK=u5oTEw>r8m>^~heMJ@!?%
z)*T*N4nt8BiFq!~_G>H*e%Me7;Jm$=k>FRf6RQn^8soOZ>GY#-8qyA7HQ9AF9`#I~
zYToCj-N9%$zY?3kSu)Cs%D`5ytAWqjmCJF}>R>dO<L-Z1#JfIf+o#=96StyIf#azx
zv=C?Wu;m$<M<>N>#6OO>zV_QW-o`aQu9&5tr*gsTkxQ+#W>6{ldN@=ju-KV;=a~e;
hH<Wu`LB^tr`VIZ<?6mtB1M~m@002ovPDHLkV1k@r8Q}l`

diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/home-filter/filter.svg b/ruoyi-ui/src/views/JiHeExpressway/images/home-filter/filter.svg
new file mode 100644
index 00000000..f9910d8b
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/home-filter/filter.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" d="M22.0361 2.7998C22.2601 2.7998 22.4477 2.8838 22.6031 3.0322C22.6772 3.10301 22.7364 3.18791 22.7773 3.2819C22.8182 3.3759 22.8398 3.47711 22.8411 3.5796C22.8411 3.7616 22.7739 3.945 22.6535 4.0948L15.4267 11.8648V24.42C15.425 24.5241 15.4029 24.6268 15.3616 24.7223C15.3202 24.8178 15.2605 24.9042 15.1857 24.9767C15.111 25.0491 15.0227 25.106 14.9259 25.1443C14.8291 25.1826 14.7258 25.2015 14.6217 25.1998C14.4555 25.2012 14.2934 25.1487 14.1597 25.05C14.1232 25.0227 14.0873 24.9947 14.0519 24.966L13.8377 24.7896C13.791 24.7509 13.7443 24.7122 13.6977 24.6734L13.3617 24.3934L12.5399 23.7074L12.0947 23.3336L10.1851 21.7292C10.1107 21.6585 10.0512 21.5737 10.0101 21.4797C9.96902 21.3857 9.94711 21.2844 9.94569 21.1818V11.8494L2.97369 4.0612C2.90779 3.98157 2.85889 3.8893 2.83 3.79006C2.80111 3.69082 2.79283 3.58671 2.80568 3.48415C2.81854 3.38159 2.85224 3.28275 2.90473 3.19371C2.95722 3.10467 3.02738 3.02731 3.11089 2.9664C3.25601 2.8621 3.42923 2.80404 3.60789 2.7998H22.0375H22.0361ZM25.7643 22.397C26.2263 22.397 26.6001 22.7526 26.6001 23.1922C26.5977 23.2995 26.5742 23.4053 26.5309 23.5035C26.4876 23.6017 26.4254 23.6905 26.3477 23.7646C26.2701 23.8387 26.1786 23.8968 26.0785 23.9355C25.9784 23.9742 25.8716 23.9928 25.7643 23.9902H19.2935C19.0747 23.9887 18.8649 23.9035 18.7069 23.7522C18.6297 23.6805 18.5678 23.594 18.525 23.4977C18.4821 23.4015 18.4592 23.2975 18.4577 23.1922C18.4577 22.7526 18.8315 22.397 19.2935 22.397H25.7643ZM25.7643 17.4158C26.2263 17.4158 26.6001 17.7714 26.6001 18.2124C26.5975 18.3196 26.5739 18.4252 26.5305 18.5233C26.4871 18.6214 26.4249 18.7099 26.3472 18.7839C26.2696 18.8579 26.1782 18.9158 26.0782 18.9544C25.9781 18.9931 25.8715 19.0116 25.7643 19.009H19.2935C19.1862 19.0116 19.0794 18.993 18.9793 18.9543C18.8792 18.9156 18.7877 18.8575 18.7101 18.7834C18.6324 18.7093 18.5702 18.6205 18.5269 18.5223C18.4836 18.4241 18.4601 18.3183 18.4577 18.211C18.4577 17.7714 18.8315 17.4158 19.2935 17.4158H25.7643ZM25.7461 12.4878C26.2081 12.4878 26.5819 12.8434 26.5819 13.2844C26.5764 13.5006 26.4853 13.7059 26.3286 13.855C26.1718 14.0041 25.9623 14.0849 25.7461 14.0796H19.2935C18.8315 14.0796 18.4577 13.7072 18.4759 13.2676C18.4759 12.8266 18.8497 12.4878 19.2935 12.4878H25.7475H25.7461Z" fill="white"/>
+</g>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue
new file mode 100644
index 00000000..cc8d5262
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue
@@ -0,0 +1,193 @@
+<template>
+  <Dialog v-model="modelVisible" title="广播发布">
+    <div class='BroadcastReleases'>
+      <div class="body">
+        <div class="left">
+          <div class="title">路测广播列表</div>
+          <CheckboxGroup class="checkbox-group" :value="[]" :options="options" />
+        </div>
+        <div class="right">
+          <div class="top-content">
+            <Video class="item-video" />
+
+            <label>发布内容: </label>
+            <ElInput type="textarea" :autosize="{ minRows: 3, maxRows: 3 }" :maxlength="150" showWordLimit />
+          </div>
+
+          <div class="footer">
+            <Button style="background-color: rgba(0, 179, 204, .3);"
+              @click.native="modelVisible = false, submitting = false">
+              取消
+            </Button>
+            <Button @click.native="handleSubmit" :loading="submitting">
+              确定
+            </Button>
+          </div>
+        </div>
+      </div>
+      <!-- <Form class="form" ref="FormConfigRef" :formList="formList" column="1" style="flex: 1;" labelWidth="120px" /> -->
+
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index.vue";
+import Button from "@screen/components/Buttons/Button.vue"
+import Form from '@screen/components/FormConfig';
+import Video from "@screen/components/Video"
+import CheckboxGroup from "@screen/components/FormConfig/components/ElCheckboxGroup.vue"
+
+import { delay } from "@screen/utils/common.js"
+import request from "@/utils/request";
+
+import { Message } from "element-ui";
+// import { axiosIns } from "@screen/utils/axios/auth.js";
+
+export default {
+  name: 'BroadcastReleases',
+  components: {
+    Dialog,
+    Button,
+    Form,
+    Video,
+    CheckboxGroup
+  },
+  model: {
+    prop: 'visible',
+    event: "update:value"
+  },
+  props: {
+    visible: Boolean,
+    deviceId: String
+  },
+  data() {
+    return {
+      submitting: false,
+      options: Array.from({ length: 24 }).map((_, index) => ({
+        key: index,
+        label: "阿发"
+      }))
+    }
+  },
+  computed: {
+    modelVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:value', val)
+      }
+    }
+  },
+  watch: {
+    modelVisible: {
+      immediate: true,
+      handler(bool) {
+        if (!bool) return;
+
+        this.reDisplay();
+      }
+    }
+  },
+  methods: {
+    reDisplay() {
+    },
+    handleSubmit() {
+      const result = {}, formData = this.$refs.FormConfigRef?.formData;
+
+      let functionId = 51;
+
+      result.mode = formData.controlType === 'manual' ? "00" : "01";
+
+      delete result.controlType;
+
+      if (result.mode === '01') {
+        if (!formData.displayTime?.length) return Message.error(`时间不能为空!`);
+        result.startDisplayTime = formData.displayTime[0];
+        result.endDisplayTime = formData.displayTime[1];
+        delete result.displayTime;
+      } else {
+        if (!formData.onWorkStatus || !formData.inWorkStatus) return Message.error(`工作状态不能为空!`);
+
+        result.onWorkStatus = formData.onWorkStatus
+        result.inWorkStatus = formData.inWorkStatus
+      }
+
+      this.submitting = true;
+
+      // this.submitting = false;
+      // return;
+    }
+  },
+}
+</script>
+
+<style lang='scss' scoped>
+.BroadcastReleases {
+  // width: 450px;
+  height: 397px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  .body {
+    display: flex;
+    gap: 9px;
+    height: 100%;
+
+    .left {
+      width: 251px;
+      border-radius: 3px 3px 3px 3px;
+      border: 1px solid #3DE8FF;
+      padding: 3px 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 9px;
+
+      .checkbox-group {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        overflow: auto;
+        height: 100%;
+        flex: 1;
+        flex-wrap: nowrap;
+      }
+    }
+
+    .right {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .top-content {
+        display: flex;
+        flex-direction: column;
+        gap: 9px;
+
+        .item-video {
+          width: 545px;
+          height: 216px;
+        }
+
+        label {
+          font-size: 16px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          color: #3DE8FF;
+          line-height: 19px;
+        }
+      }
+
+    }
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 9px;
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue
new file mode 100644
index 00000000..85bd9c3a
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue
@@ -0,0 +1,157 @@
+<template>
+  <Dialog v-model="obverseVisible" title="行车诱导">
+    <Video class="item-video" />
+
+    <div class="Broadcast">
+      <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
+        <ElTabPane label="详细设计" name="first">
+          <Descriptions :list="list" :data="data" style="gap: 18px" />
+        </ElTabPane>
+        <ElTabPane label="设备参数" name="second">设备参数</ElTabPane>
+      </ElTabs>
+
+      <div class="bottom">
+        <Button @click.native="releaseVisible = true">广播发布</Button>
+      </div>
+    </div>
+
+    <BroadcastReleases v-model="releaseVisible" :deviceId="dialogData.iotDeviceId || '8697-1'" />
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index.vue";
+import Button from "@screen/components/Buttons/Button.vue"
+import Descriptions from '@screen/components/Descriptions.vue';
+import CustomControlVideo from '@screen/components/CustomControlVideo/index.vue';
+import BroadcastReleases from "./components/BroadcastReleases.vue"
+import Video from "@screen/components/Video"
+
+import { getRoadInfoByStakeMark, getOrganizationName, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
+import { dialogDelayVisible } from "./../mixin"
+
+// 广播发布
+export default {
+  name: 'Broadcast',
+  mixins: [dialogDelayVisible],
+  components: {
+    Dialog,
+    Button,
+    Descriptions,
+    CustomControlVideo,
+    BroadcastReleases,
+    Video
+  },
+  data() {
+    return {
+      activeName: 'first',
+      releaseVisible: false,
+      data: {
+        deviceName: "LH24",
+        roadName: "G35济泽高速",
+        stakeMarkId: "k094+079",
+        direction: "1",
+        organizationName: "山东高速济南发展公司",
+        brand: "XXX厂家",
+        deviceState: "0",
+      },
+      list: [
+        {
+          label: '设备名称',
+          key: "deviceName",
+        },
+        {
+          label: '道路名称',
+          key: "roadName",
+        },
+        {
+          label: '设备桩号',
+          key: "stakeMarkId",
+        },
+        {
+          label: '所属方向',
+          key: "direction",
+          enum: "CameraDirectionEnum"
+        },
+        {
+          label: '所属机构',
+          key: "organizationName",
+        },
+        {
+          label: '设备厂商',
+          key: "brand",
+        },
+        {
+          label: '设备状态',
+          key: "deviceState",
+          enum: "DeviceTypeEnum"
+        },
+      ]
+    }
+  },
+  async created() {
+    this.data = { ...this.dialogData, roadName: null }
+
+    getProduct(this.dialogData.productId)
+      .then(data => {
+        this.dialogData.brand = data.brand;
+      })
+
+    getOrganizationName(this.dialogData.iotDeviceId)
+      .then(data => {
+        this.dialogData.organizationName = data.organizationName;
+      })
+
+    const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMarkId);
+    console.log("%c [ roadInfo ]-103-「index.vue」", "font-size:15px; background:#36347c; color:#7a78c0;", roadInfo.roadName);
+
+    if (roadInfo) this.data.roadName = roadInfo.roadName;
+  },
+  methods: {
+    handleClickTabs() { }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.Broadcast {
+  width: 600px;
+  height: 240px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+
+  .camera-video {
+    flex: 1.5;
+  }
+
+  .tabs {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    ::v-deep {
+      .el-tabs__content {
+        flex: 1;
+
+        .el-tab-pane {
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .bottom {
+    margin-top: 12px;
+    display: flex;
+    gap: 9px;
+    align-items: center;
+    justify-content: end;
+
+    >div {
+      font-size: 16px;
+      padding: 6px 12px;
+    }
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/Descriptions.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/Descriptions.vue
deleted file mode 100644
index 5bdd5278..00000000
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/Descriptions.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <div class='Descriptions'>
-    <p class="desc-item">
-      <span>设备类型：</span>
-      <span>
-        {{ cameraType || '-' }}
-        <img src="@screen/images/dialog/icon-control.png">
-      </span>
-    </p>
-    <p class="desc-item">
-      <span>道路名称：</span>
-      <span>{{ roadName || '-' }}</span>
-    </p>
-    <p class="desc-item">
-      <span>所属机构：</span>
-      <span>{{ organizationName || '-' }}</span>
-    </p>
-    <p class="desc-item">
-      <span>设备桩号：</span>
-      <span>{{ data.stakeMarkId || '-' }}</span>
-    </p>
-    <p class="desc-item">
-      <span>上行相机：</span>
-      <span>
-        米
-        <img src="@screen/images/dialog/icon-monitor.png">
-      </span>
-    </p>
-    <p class="desc-item">
-      <span>下行相机：</span>
-      <span>
-        米
-        <img src="@screen/images/dialog/icon-monitor.png">
-      </span>
-    </p>
-    <p class="desc-item singleline">
-      <span>设备状态：</span>
-      <span :style="{ color: statusEnum.color || '#19E1B1' }">{{ statusEnum.text }}</span>
-    </p>
-    <p class="desc-item singleline">
-      <span>状态更新时间:</span>
-      <span>{{ data.updateTime }}</span>
-    </p>
-  </div>
-</template>
-
-<script>
-import { CameraStatusEnum, CameraControlTypeEnum } from "@screen/utils/enum.js"
-import { getRoadInfoByStakeMark } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
-import request from "@/utils/request";
-
-export default {
-  name: 'Descriptions',
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      statusEnum: CameraStatusEnum[this.data.status] || {},
-      cameraType: CameraControlTypeEnum[this.data.ptzCtrl]?.text,
-      organizationName: null,
-      roadName: ""
-    }
-  },
-  async created() {
-    request({
-      url: `/business/organization/${id}`,
-      method: "get",
-    })
-      .then(({ code, data }) => {
-        if (code != 200) return;
-
-        this.organizationName = data.organizationName;
-      })
-      .catch((err) => {
-
-      });
-
-
-    const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMarkId);
-
-    if (roadInfo) this.roadName = roadInfo.roadName;
-  },
-}
-</script>
-
-<style lang='scss' scoped>
-.Descriptions {
-  height: 100%;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  font-size: 16px;
-  // font-family: PingFang SC, PingFang SC;
-  font-weight: 400;
-  line-height: 19px;
-  grid-auto-rows: min-content;
-  gap: 15px;
-  // -webkit-background-clip: text;
-  // -webkit-text-fill-color: transparent;
-
-  >p {
-    >span {
-      &:first-child {
-        color: #3DE8FF;
-      }
-
-      &:last-child {
-        display: inline-flex;
-        align-items: center;
-        gap: 9px;
-      }
-    }
-  }
-
-  .singleline {
-    grid-column: span 2;
-  }
-}
-</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/components/CameraControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/components/CameraControlDialog.vue
new file mode 100644
index 00000000..87fade17
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/components/CameraControlDialog.vue
@@ -0,0 +1,202 @@
+<template>
+  <Dialog v-model="modelVisible" title="相机控制" noneMask>
+    <div class='CameraControlDialog'>
+      <div class="direction">
+        <div class="control-container top" @click="controlClick(21)">
+          <div class="icon-horizontal" />
+          <img src="../images/top.svg">
+        </div>
+        <div class="control-container right" @click="controlClick(24)">
+          <div class="icon-vertical" />
+          <img src="../images/right.svg">
+        </div>
+        <div class="center"></div>
+        <div class="control-container bottom" @click="controlClick(22)">
+          <div class="icon-horizontal" style="transform: rotate(180deg);" />
+          <img src="../images/bottom.svg">
+        </div>
+        <div class="control-container left" @click="controlClick(23)">
+          <div class="icon-vertical" style="transform: rotate(180deg);" />
+          <img src="../images/left.svg">
+        </div>
+      </div>
+
+      <div class="options">
+        <div v-for="item in options" :key="item.key">
+          <img src="../images/sub.svg" @click="controlClick(item.sub)">
+          <span>{{ item.label }}</span>
+          <img src="../images/add.svg" @click="controlClick(item.add)">
+        </div>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index.vue";
+import { controlCamera } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
+import { throttle } from "lodash"
+
+export default {
+  name: 'CameraControlDialog',
+  components: {
+    Dialog
+  },
+  model: {
+    prop: 'visible',
+    event: "update:value"
+  },
+  props: {
+    visible: Boolean,
+    deviceId: String
+  },
+  data() {
+    return {
+      options: [
+        {
+          label: "变倍",
+          key: "zoom",
+          add: "12",
+          sub: "11"
+        },
+        {
+          label: "光圈",
+          key: "aperture",
+          add: "15",
+          sub: "16"
+        },
+        {
+          label: "聚焦",
+          key: "focus",
+          add: "13",
+          sub: "14"
+        },
+      ]
+    }
+  },
+  computed: {
+    modelVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:value', val)
+      }
+    }
+  },
+  methods: {
+    controlClick: throttle(function (type) {
+      controlCamera(this.deviceId, type)
+    }, 150)
+  },
+}
+</script>
+
+<style lang='scss' scoped>
+.CameraControlDialog {
+  width: 360px;
+  height: 210px;
+  display: flex;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: 36px;
+
+  img {
+    cursor: pointer;
+  }
+
+  .control-container {
+    position: relative;
+    width: min-content;
+
+    &:active {
+      [class^="icon"] {
+        background-color: #48B0CB;
+      }
+    }
+
+    .icon-horizontal,
+    .icon-vertical {
+      position: absolute;
+      left: 0;
+      top: 0;
+      background-color: #006A96;
+      z-index: -1;
+    }
+
+    .icon-horizontal {
+      clip-path: path('M53.807 19.0734C51.1049 21.3657 47.1722 21.2685 44.0948 19.512C35.7042 14.7227 25.2544 13.7636 15.6704 17.82C14.5092 18.3114 13.3921 18.8632 12.321 19.4703C9.23352 21.2201 5.29428 21.3087 2.59447 19.0054V19.0054C-0.433686 16.4219 -0.827317 11.8122 2.24787 9.28482C4.93936 7.07281 7.91063 5.2081 11.093 3.74265C16.4653 1.26882 22.3109 -0.00817108 28.2253 6.86646e-05C34.1398 0.0083065 39.9818 1.30157 45.3471 3.79036C48.527 5.26539 51.4944 7.13947 54.1807 9.36039C57.2464 11.8949 56.8402 16.5002 53.807 19.0734V19.0734Z');
+      width: 57px;
+      height: 21px;
+    }
+
+    .icon-vertical {
+      clip-path: path('M2.33992 53.8068C0.0475853 51.1047 0.14481 47.172 1.90137 44.0945C6.69064 35.7039 7.64974 25.2542 3.59338 15.6702C3.10192 14.509 2.55008 13.3918 1.94307 12.3208C0.193261 9.23327 0.1046 5.29403 2.40796 2.59423V2.59423C4.99146 -0.433928 9.60116 -0.827561 12.1285 2.24762C14.3405 4.93912 16.2052 7.91038 17.6707 11.0928C20.1445 16.465 21.4215 22.3106 21.4133 28.2251C21.405 34.1395 20.1117 39.9816 17.623 45.3469C16.1479 48.5267 14.2738 51.4941 12.0529 54.1805C9.51843 57.2461 4.91315 56.84 2.33992 53.8068V53.8068Z');
+      width: 21px;
+      height: 57px;
+    }
+  }
+
+  .direction {
+    display: grid;
+    grid-template-columns: 0.3fr 1fr 0.3fr;
+    grid-template-rows: 0.3fr 1fr 0.3fr;
+    align-items: center;
+    justify-items: center;
+
+    gap: 3px;
+
+
+    .top {
+      grid-area: 1/2/1/2;
+    }
+
+    .right {
+      grid-area: 2/3/2/3;
+    }
+
+    .bottom {
+      grid-area: 3/2/3/2;
+    }
+
+    .left {
+      grid-area: 2/1/2/1;
+    }
+
+    .center {
+      grid-area: 2/2/2/2;
+
+      width: 66px;
+      height: 66px;
+      background: #006A96;
+      border-radius: 50%;
+      opacity: 1;
+      border: 1px solid #3DE8FF
+    }
+  }
+
+  .options {
+    display: flex;
+    flex-direction: column;
+
+    gap: 18px;
+
+    >div {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+
+      img {
+        background-color: #006A96;
+        border-radius: 50%;
+
+        &:active {
+          background-color: #48B0CB;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/add.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/add.svg
similarity index 93%
rename from ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/add.svg
rename to ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/add.svg
index 549881ed..c2f714eb 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/add.svg
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/add.svg
@@ -1,6 +1,6 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Group 1142814646">
-<circle id="Ellipse 2023" cx="11" cy="11" r="10.5" fill="#006A96" stroke="#00BBD4"/>
+<circle id="Ellipse 2023" cx="11" cy="11" r="10.5" stroke="#00BBD4"/>
 <g id="Frame" clip-path="url(#clip0_322_126)">
 <path id="Vector" d="M10.7889 5.07715C10.9572 5.07715 11.1186 5.13955 11.2377 5.25063C11.3567 5.36171 11.4235 5.51237 11.4235 5.66946V16.331C11.4235 16.4881 11.3567 16.6387 11.2377 16.7498C11.1186 16.8609 10.9572 16.9233 10.7889 16.9233C10.6206 16.9233 10.4592 16.8609 10.3402 16.7498C10.2212 16.6387 10.1543 16.4881 10.1543 16.331V5.66946C10.1543 5.51237 10.2212 5.36171 10.3402 5.25063C10.4592 5.13955 10.6206 5.07715 10.7889 5.07715Z" fill="white"/>
 <path id="Vector_2" d="M16.9233 10.7887C16.9233 10.957 16.8609 11.1184 16.7498 11.2374C16.6387 11.3564 16.4881 11.4233 16.331 11.4233H5.66946C5.51237 11.4233 5.36171 11.3564 5.25063 11.2374C5.13955 11.1184 5.07715 10.957 5.07715 10.7887C5.07715 10.6204 5.13955 10.4589 5.25063 10.3399C5.36171 10.2209 5.51237 10.1541 5.66946 10.1541H16.331C16.4881 10.1541 16.6387 10.2209 16.7498 10.3399C16.8609 10.4589 16.9233 10.6204 16.9233 10.7887Z" fill="white"/>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/bottom.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/bottom.svg
similarity index 85%
rename from ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/bottom.svg
rename to ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/bottom.svg
index 19acff7a..bfc60815 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/bottom.svg
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/bottom.svg
@@ -4,7 +4,6 @@
 <mask id="path-1-inside-1_330_220" fill="white">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M53.807 2.34017C51.1049 0.047834 47.1722 0.145058 44.0948 1.90162C35.7042 6.69089 25.2544 7.64999 15.6704 3.59362C14.5092 3.10216 13.3921 2.55033 12.321 1.94332C9.23352 0.193509 5.29428 0.104847 2.59447 2.40821V2.40821C-0.433686 4.99171 -0.827317 9.60141 2.24787 12.1288C4.93936 14.3408 7.91063 16.2055 11.093 17.6709C16.4653 20.1448 22.3109 21.4217 28.2253 21.4135C34.1398 21.4053 39.9818 20.112 45.3471 17.6232C48.527 16.1482 51.4944 14.2741 54.1807 12.0532C57.2464 9.51869 56.8402 4.9134 53.807 2.34017V2.34017Z"/>
 </mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M53.807 2.34017C51.1049 0.047834 47.1722 0.145058 44.0948 1.90162C35.7042 6.69089 25.2544 7.64999 15.6704 3.59362C14.5092 3.10216 13.3921 2.55033 12.321 1.94332C9.23352 0.193509 5.29428 0.104847 2.59447 2.40821V2.40821C-0.433686 4.99171 -0.827317 9.60141 2.24787 12.1288C4.93936 14.3408 7.91063 16.2055 11.093 17.6709C16.4653 20.1448 22.3109 21.4217 28.2253 21.4135C34.1398 21.4053 39.9818 20.112 45.3471 17.6232C48.527 16.1482 51.4944 14.2741 54.1807 12.0532C57.2464 9.51869 56.8402 4.9134 53.807 2.34017V2.34017Z" fill="#006A96"/>
 <path d="M15.6704 3.59362L15.2806 4.51454L15.6704 3.59362ZM11.093 17.6709L10.6748 18.5792L10.6748 18.5792L11.093 17.6709ZM28.2253 21.4135L28.2239 20.4135L28.2239 20.4135L28.2253 21.4135ZM45.3471 17.6232L45.7679 18.5304L45.7679 18.5304L45.3471 17.6232ZM54.1807 12.0532L53.5436 11.2825L54.1807 12.0532ZM12.321 1.94332L11.8279 2.81331L12.321 1.94332ZM44.0948 1.90162L43.599 1.03314L44.0948 1.90162ZM43.599 1.03314C35.4676 5.67447 25.3448 6.60238 16.0602 2.67271L15.2806 4.51454C25.164 8.69759 35.9407 7.7073 44.5905 2.7701L43.599 1.03314ZM16.0602 2.67271C14.9345 2.19626 13.8518 1.66143 12.8141 1.07332L11.8279 2.81331C12.9324 3.43922 14.084 4.00807 15.2806 4.51454L16.0602 2.67271ZM11.5113 16.7626C8.40685 15.333 5.50837 13.514 2.8828 11.3562L1.61293 12.9013C4.37036 15.1675 7.4144 17.0779 10.6748 18.5792L11.5113 16.7626ZM28.2239 20.4135C22.4544 20.4215 16.7519 19.1758 11.5113 16.7626L10.6748 18.5792C16.1786 21.1137 22.1674 22.4219 28.2267 22.4135L28.2239 20.4135ZM44.9263 16.7161C39.6924 19.1439 33.9935 20.4055 28.2239 20.4135L28.2267 22.4135C34.286 22.4051 40.2712 21.0801 45.7679 18.5304L44.9263 16.7161ZM53.5436 11.2825C50.923 13.449 48.0283 15.2772 44.9263 16.7161L45.7679 18.5304C49.0257 17.0192 52.0658 15.0992 54.8179 12.8239L53.5436 11.2825ZM1.94543 1.64746C-1.45788 4.55102 -2.03825 9.9006 1.61293 12.9013L2.8828 11.3562C0.383611 9.30223 0.590509 5.43239 3.24352 3.16896L1.94543 1.64746ZM54.8179 12.8239C58.4581 9.81444 57.8632 4.4699 54.4539 1.57761L53.1601 3.10273C55.8172 5.35691 56.0347 9.22294 53.5436 11.2825L54.8179 12.8239ZM12.8141 1.07332C9.46142 -0.826764 5.04499 -0.996955 1.94543 1.64746L3.24352 3.16896C5.54357 1.20665 9.00562 1.21378 11.8279 2.81331L12.8141 1.07332ZM44.5905 2.7701C47.4025 1.16503 50.8583 1.15001 53.1601 3.10273L54.4539 1.57761C51.3515 -1.05434 46.9419 -0.874918 43.599 1.03314L44.5905 2.7701Z" fill="#3DE8FF" mask="url(#path-1-inside-1_330_220)"/>
 </g>
 <path id="Vector" d="M29.062 15.7275L32.3536 12.3756C32.4076 12.3206 32.4504 12.2553 32.4797 12.1834C32.5089 12.1115 32.5239 12.0344 32.5239 11.9566C32.5239 11.8787 32.5089 11.8017 32.4797 11.7298C32.4504 11.6579 32.4076 11.5926 32.3536 11.5376C32.1259 11.3062 31.7582 11.3062 31.531 11.5376L28.6359 14.4853L25.7409 11.5376C25.5309 11.3238 25.2015 11.3074 24.9732 11.4882L24.9177 11.5376L24.9171 11.5387C24.8086 11.6499 24.7477 11.8004 24.7479 11.9574C24.7481 12.1143 24.8094 12.2647 24.9182 12.3756L28.2099 15.7275C28.3106 15.8303 28.4449 15.8916 28.587 15.8999L28.6848 15.8999C28.822 15.892 28.957 15.8341 29.0625 15.7275L29.062 15.7275Z" fill="white"/>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/left.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/left.svg
similarity index 84%
rename from ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/left.svg
rename to ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/left.svg
index 6fae5c9d..dba61caf 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/left.svg
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/left.svg
@@ -4,7 +4,6 @@
 <mask id="path-1-inside-1_330_228" fill="white">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M19.073 53.8067C21.3654 51.1046 21.2682 47.1718 19.5116 44.0943C14.7224 35.7038 13.7634 25.2541 17.8197 15.6702C18.3111 14.5091 18.8629 13.392 19.4699 12.321C21.2197 9.23347 21.3083 5.29421 19.0049 2.59438V2.59438C16.4214 -0.433814 11.8116 -0.82745 9.28428 2.24778C7.0723 4.93926 5.20761 7.9105 3.74217 11.0929C1.26833 16.4651 -0.0086527 22.3107 -0.000413216 28.2252C0.00782436 34.1396 1.30109 39.9817 3.78988 45.347C5.26489 48.5268 7.13894 51.4941 9.35982 54.1805C11.8944 57.2462 16.4997 56.84 19.073 53.8067V53.8067Z"/>
 </mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.073 53.8067C21.3654 51.1046 21.2682 47.1718 19.5116 44.0943C14.7224 35.7038 13.7634 25.2541 17.8197 15.6702C18.3111 14.5091 18.8629 13.392 19.4699 12.321C21.2197 9.23347 21.3083 5.29421 19.0049 2.59438V2.59438C16.4214 -0.433814 11.8116 -0.82745 9.28428 2.24778C7.0723 4.93926 5.20761 7.9105 3.74217 11.0929C1.26833 16.4651 -0.0086527 22.3107 -0.000413216 28.2252C0.00782436 34.1396 1.30109 39.9817 3.78988 45.347C5.26489 48.5268 7.13894 51.4941 9.35982 54.1805C11.8944 57.2462 16.4997 56.84 19.073 53.8067V53.8067Z" fill="#006A96"/>
 <path d="M17.8197 15.6702L18.7406 16.0599L18.7406 16.0599L17.8197 15.6702ZM3.74217 11.0929L2.83385 10.6746L2.83385 10.6746L3.74217 11.0929ZM-0.000413216 28.2252L0.999586 28.2238L0.999586 28.2238L-0.000413216 28.2252ZM9.28428 2.24778L8.51171 1.61284L9.28428 2.24778ZM20.3801 43.5986C15.7388 35.4672 14.811 25.3445 18.7406 16.0599L16.8988 15.2804C12.7158 25.1637 13.706 35.9403 18.6431 44.59L20.3801 43.5986ZM18.7406 16.0599C19.217 14.9343 19.7518 13.8517 20.3399 12.8141L18.5999 11.8279C17.974 12.9323 17.4052 14.0839 16.8988 15.2804L18.7406 16.0599ZM4.65049 11.5111C6.08003 8.40672 7.89904 5.50826 10.0568 2.88271L8.51171 1.61284C6.24555 4.37025 4.33518 7.41427 2.83385 10.6746L4.65049 11.5111ZM0.999586 28.2238C0.991548 22.4542 2.23726 16.7518 4.65049 11.5111L2.83385 10.6746C0.299414 16.1784 -1.00885 22.1672 -1.00041 28.2266L0.999586 28.2238ZM4.69703 44.9262C2.26921 39.6923 1.00762 33.9933 0.999586 28.2238L-1.00041 28.2266C-0.991973 34.2859 0.33297 40.271 2.88273 45.7678L4.69703 44.9262ZM10.1305 53.5433C7.96406 50.9228 6.13591 48.0281 4.69703 44.9262L2.88273 45.7678C4.39386 49.0255 6.31383 52.0655 8.5891 54.8177L10.1305 53.5433ZM19.7657 1.94534C16.8621 -1.45801 11.5125 -2.03838 8.51171 1.61284L10.0568 2.88271C12.1108 0.38348 15.9807 0.590381 18.2442 3.24343L19.7657 1.94534ZM8.5891 54.8177C11.5986 58.4579 16.9432 57.863 19.8356 54.4537L18.3105 53.1598C16.0562 55.817 12.1901 56.0345 10.1305 53.5433L8.5891 54.8177ZM20.3399 12.8141C22.2399 9.46136 22.4101 5.04491 19.7657 1.94534L18.2442 3.24343C20.2065 5.5435 20.1994 9.00558 18.5999 11.8279L20.3399 12.8141ZM18.6431 44.59C20.2482 47.4021 20.2632 50.858 18.3105 53.1598L19.8356 54.4537C22.4676 51.3512 22.2881 46.9415 20.3801 43.5986L18.6431 44.59Z" fill="#3DE8FF" mask="url(#path-1-inside-1_330_228)"/>
 </g>
 <path id="Vector" d="M5.68603 29.0617L9.03801 32.3534C9.09299 32.4074 9.1583 32.4502 9.23019 32.4794C9.30209 32.5086 9.37916 32.5237 9.457 32.5237C9.53484 32.5237 9.61191 32.5086 9.68381 32.4794C9.75571 32.4502 9.82102 32.4074 9.876 32.3534C10.1073 32.1257 10.1073 31.7579 9.876 31.5308L6.92828 28.6357L9.876 25.7406C10.0898 25.5306 10.1062 25.2013 9.92533 24.973L9.876 24.9174L9.87487 24.9169C9.76372 24.8083 9.61313 24.7475 9.4562 24.7477C9.29927 24.7479 9.14885 24.8091 9.03801 24.918L5.68603 28.2096C5.5833 28.3104 5.52196 28.4446 5.51367 28.5868L5.51367 28.6846C5.52161 28.8218 5.57944 28.9567 5.68603 29.0623L5.68603 29.0617Z" fill="white"/>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/right.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/right.svg
similarity index 84%
rename from ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/right.svg
rename to ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/right.svg
index 86239f83..b6470c01 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/right.svg
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/right.svg
@@ -4,7 +4,6 @@
 <mask id="path-1-inside-1_330_233" fill="white">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M2.33992 53.8068C0.0475853 51.1047 0.14481 47.172 1.90137 44.0945C6.69064 35.7039 7.64974 25.2542 3.59338 15.6702C3.10192 14.509 2.55008 13.3918 1.94307 12.3208C0.193261 9.23327 0.1046 5.29403 2.40796 2.59423V2.59423C4.99146 -0.433928 9.60116 -0.827561 12.1285 2.24762C14.3405 4.93912 16.2052 7.91038 17.6707 11.0928C20.1445 16.465 21.4215 22.3106 21.4133 28.2251C21.405 34.1395 20.1117 39.9816 17.623 45.3469C16.1479 48.5267 14.2738 51.4941 12.0529 54.1805C9.51843 57.2461 4.91315 56.84 2.33992 53.8068V53.8068Z"/>
 </mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.33992 53.8068C0.0475853 51.1047 0.14481 47.172 1.90137 44.0945C6.69064 35.7039 7.64974 25.2542 3.59338 15.6702C3.10192 14.509 2.55008 13.3918 1.94307 12.3208C0.193261 9.23327 0.1046 5.29403 2.40796 2.59423V2.59423C4.99146 -0.433928 9.60116 -0.827561 12.1285 2.24762C14.3405 4.93912 16.2052 7.91038 17.6707 11.0928C20.1445 16.465 21.4215 22.3106 21.4133 28.2251C21.405 34.1395 20.1117 39.9816 17.623 45.3469C16.1479 48.5267 14.2738 51.4941 12.0529 54.1805C9.51843 57.2461 4.91315 56.84 2.33992 53.8068V53.8068Z" fill="#006A96"/>
 <path d="M3.59338 15.6702L2.67247 16.0599L3.59338 15.6702ZM17.6707 11.0928L16.7623 11.5111L16.7623 11.5111L17.6707 11.0928ZM21.4133 28.2251L22.4133 28.2265L22.4133 28.2265L21.4133 28.2251ZM17.623 45.3469L16.7158 44.9261L16.7158 44.9261L17.623 45.3469ZM1.03289 43.5988C5.67423 35.4674 6.60214 25.3446 2.67247 16.0599L4.51429 15.2804C8.69735 25.1637 7.70706 35.9405 2.76986 44.5902L1.03289 43.5988ZM2.67247 16.0599C2.19601 14.9342 1.66118 13.8515 1.07307 12.8138L2.81306 11.8277C3.43898 12.9321 4.00782 14.0838 4.51429 15.2804L2.67247 16.0599ZM16.7623 11.5111C15.3328 8.40661 13.5138 5.50813 11.3559 2.88255L12.9011 1.61268C15.1673 4.37011 17.0776 7.41416 18.579 10.6745L16.7623 11.5111ZM20.4133 28.2237C20.4213 22.4541 19.1756 16.7517 16.7623 11.5111L18.579 10.6745C21.1134 16.1783 22.4217 22.1672 22.4133 28.2265L20.4133 28.2237ZM16.7158 44.9261C19.1436 39.6922 20.4052 33.9933 20.4133 28.2237L22.4133 28.2265C22.4048 34.2858 21.0799 40.2709 18.5301 45.7677L16.7158 44.9261ZM11.2822 53.5433C13.4487 50.9228 15.2769 48.0281 16.7158 44.9261L18.5301 45.7677C17.019 49.0254 15.099 52.0655 12.8236 54.8177L11.2822 53.5433ZM1.64721 1.94518C4.55077 -1.45812 9.90034 -2.03849 12.9011 1.61268L11.3559 2.88255C9.30197 0.383368 5.43214 0.590267 3.16871 3.24327L1.64721 1.94518ZM12.8236 54.8177C9.81418 58.4578 4.46965 57.863 1.57736 54.4537L3.10248 53.1599C5.35666 55.817 9.22268 56.0345 11.2822 53.5433L12.8236 54.8177ZM1.07307 12.8138C-0.827012 9.46117 -0.997201 5.04474 1.64721 1.94518L3.16871 3.24327C1.2064 5.54332 1.21353 9.00537 2.81306 11.8277L1.07307 12.8138ZM2.76986 44.5902C1.16479 47.4023 1.14976 50.8581 3.10248 53.1599L1.57736 54.4537C-1.05459 51.3513 -0.875166 46.9416 1.03289 43.5988L2.76986 44.5902Z" fill="#3DE8FF" mask="url(#path-1-inside-1_330_233)"/>
 </g>
 <path id="Vector" d="M15.7271 29.0617L12.3751 32.3534C12.3201 32.4074 12.2548 32.4502 12.1829 32.4794C12.111 32.5086 12.0339 32.5237 11.9561 32.5237C11.8782 32.5237 11.8012 32.5086 11.7293 32.4794C11.6574 32.4502 11.5921 32.4074 11.5371 32.3534C11.3058 32.1257 11.3058 31.7579 11.5371 31.5308L14.4848 28.6357L11.5371 25.7406C11.3233 25.5306 11.3069 25.2013 11.4878 24.973L11.5371 24.9174L11.5382 24.9169C11.6494 24.8083 11.8 24.7475 11.9569 24.7477C12.1138 24.7479 12.2642 24.8091 12.3751 24.918L15.7271 28.2096C15.8298 28.3104 15.8911 28.4446 15.8994 28.5868L15.8994 28.6846C15.8915 28.8218 15.8336 28.9567 15.7271 29.0623L15.7271 29.0617Z" fill="white"/>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/sub.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/sub.svg
similarity index 87%
rename from ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/sub.svg
rename to ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/sub.svg
index 8e180bf5..18cd3dcf 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/sub.svg
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/sub.svg
@@ -1,6 +1,6 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Group 1142814647">
-<circle id="Ellipse 2023" cx="11" cy="11" r="10.5" fill="#006A96" stroke="#00BBD4"/>
+<circle id="Ellipse 2023" cx="11" cy="11" r="10.5"  stroke="#00BBD4"/>
 <path id="Vector" d="M16.9233 11.6346C16.9233 11.8029 16.8609 11.9643 16.7498 12.0834C16.6387 12.2024 16.4881 12.2692 16.331 12.2692H5.66946C5.51237 12.2692 5.36171 12.2024 5.25063 12.0834C5.13955 11.9643 5.07715 11.8029 5.07715 11.6346C5.07715 11.4663 5.13955 11.3049 5.25063 11.1859C5.36171 11.0669 5.51237 11 5.66946 11H16.331C16.4881 11 16.6387 11.0669 16.7498 11.1859C16.8609 11.3049 16.9233 11.4663 16.9233 11.6346Z" fill="white"/>
 </g>
 </svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/top.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/top.svg
similarity index 85%
rename from ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/top.svg
rename to ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/top.svg
index 0df27c4a..ec7f2a0d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/images/top.svg
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/images/top.svg
@@ -4,7 +4,6 @@
 <mask id="path-1-inside-1_330_221" fill="white">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M53.807 19.0734C51.1049 21.3657 47.1722 21.2685 44.0948 19.512C35.7042 14.7227 25.2544 13.7636 15.6704 17.82C14.5092 18.3114 13.3921 18.8632 12.321 19.4703C9.23352 21.2201 5.29428 21.3087 2.59447 19.0054V19.0054C-0.433686 16.4219 -0.827317 11.8122 2.24787 9.28482C4.93936 7.07281 7.91063 5.2081 11.093 3.74265C16.4653 1.26882 22.3109 -0.00817108 28.2253 6.86646e-05C34.1398 0.0083065 39.9818 1.30157 45.3471 3.79036C48.527 5.26539 51.4944 7.13947 54.1807 9.36039C57.2464 11.8949 56.8402 16.5002 53.807 19.0734V19.0734Z"/>
 </mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M53.807 19.0734C51.1049 21.3657 47.1722 21.2685 44.0948 19.512C35.7042 14.7227 25.2544 13.7636 15.6704 17.82C14.5092 18.3114 13.3921 18.8632 12.321 19.4703C9.23352 21.2201 5.29428 21.3087 2.59447 19.0054V19.0054C-0.433686 16.4219 -0.827317 11.8122 2.24787 9.28482C4.93936 7.07281 7.91063 5.2081 11.093 3.74265C16.4653 1.26882 22.3109 -0.00817108 28.2253 6.86646e-05C34.1398 0.0083065 39.9818 1.30157 45.3471 3.79036C48.527 5.26539 51.4944 7.13947 54.1807 9.36039C57.2464 11.8949 56.8402 16.5002 53.807 19.0734V19.0734Z" fill="#006A96"/>
 <path d="M15.6704 17.82L15.2806 16.899L15.6704 17.82ZM11.093 3.74265L10.6748 2.83433L10.6748 2.83433L11.093 3.74265ZM28.2253 6.86646e-05L28.2239 1.00007L28.2239 1.00007L28.2253 6.86646e-05ZM45.3471 3.79036L45.7679 2.88321L45.7679 2.88321L45.3471 3.79036ZM54.1807 9.36039L53.5436 10.1311L54.1807 9.36039ZM12.321 19.4703L11.8279 18.6003L12.321 19.4703ZM44.0948 19.512L43.599 20.3804L44.0948 19.512ZM43.599 20.3804C35.4676 15.7391 25.3448 14.8112 16.0602 18.7409L15.2806 16.899C25.164 12.716 35.9407 13.7063 44.5905 18.6435L43.599 20.3804ZM16.0602 18.7409C14.9345 19.2173 13.8518 19.7521 12.8141 20.3403L11.8279 18.6003C12.9324 17.9744 14.084 17.4055 15.2806 16.899L16.0602 18.7409ZM11.5113 4.65097C8.40685 6.08053 5.50837 7.89956 2.8828 10.0574L1.61293 8.51225C4.37036 6.24606 7.4144 4.33567 10.6748 2.83433L11.5113 4.65097ZM28.2239 1.00007C22.4544 0.99203 16.7519 2.23774 11.5113 4.65097L10.6748 2.83433C16.1786 0.299895 22.1674 -1.00837 28.2267 -0.99993L28.2239 1.00007ZM44.9263 4.69752C39.6924 2.26969 33.9935 1.0081 28.2239 1.00007L28.2267 -0.99993C34.286 -0.991491 40.2712 0.333453 45.7679 2.88321L44.9263 4.69752ZM53.5436 10.1311C50.923 7.96459 48.0283 6.13641 44.9263 4.69752L45.7679 2.88321C49.0257 4.39437 52.0658 6.31436 54.8179 8.58968L53.5436 10.1311ZM1.94543 19.7661C-1.45788 16.8626 -2.03825 11.513 1.61293 8.51225L2.8828 10.0574C0.383611 12.1113 0.590509 15.9812 3.24352 18.2446L1.94543 19.7661ZM54.8179 8.58968C58.4581 11.5991 57.8632 16.9437 54.4539 19.836L53.1601 18.3108C55.8172 16.0567 56.0347 12.1906 53.5436 10.1311L54.8179 8.58968ZM12.8141 20.3403C9.46142 22.2403 5.04499 22.4105 1.94543 19.7661L3.24352 18.2446C5.54357 20.2069 9.00562 20.1998 11.8279 18.6003L12.8141 20.3403ZM44.5905 18.6435C47.4025 20.2485 50.8583 20.2636 53.1601 18.3108L54.4539 19.836C51.3515 22.4679 46.9419 22.2885 43.599 20.3804L44.5905 18.6435Z" fill="#3DE8FF" mask="url(#path-1-inside-1_330_221)"/>
 </g>
 <path id="Vector" d="M29.062 5.68603L32.3536 9.03801C32.4076 9.09299 32.4504 9.1583 32.4797 9.23019C32.5089 9.30209 32.5239 9.37916 32.5239 9.457C32.5239 9.53484 32.5089 9.61191 32.4797 9.68381C32.4504 9.75571 32.4076 9.82102 32.3536 9.876C32.1259 10.1073 31.7582 10.1073 31.531 9.876L28.6359 6.92828L25.7409 9.876C25.5309 10.0898 25.2015 10.1062 24.9732 9.92533L24.9177 9.876L24.9171 9.87487C24.8086 9.76372 24.7477 9.61313 24.7479 9.4562C24.7481 9.29927 24.8094 9.14885 24.9182 9.03801L28.2099 5.68603C28.3106 5.5833 28.4449 5.52196 28.587 5.51367L28.6848 5.51367C28.822 5.52161 28.957 5.57944 29.0625 5.68603L29.062 5.68603Z" fill="white"/>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue
index a05e58e4..450c08ea 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue
@@ -1,25 +1,29 @@
 <template>
-  <Dialog v-model="obverseVisible" :title="dialogData.camName">
+  <Dialog v-model="obverseVisible" :title="dialogData.deviceName">
     <div class="Camera">
-      <div class="icon-content">
-        <img src="@screen/images/dialog/icon-photo.png" />
-        <img src="@screen/images/dialog/icon-video.png" />
-      </div>
-
       <Video class="video-stream" :camId="dialogData.iotDeviceId" />
 
-      <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
+      <ElTabs v-model="activeName" class="tabs">
         <ElTabPane label="详细设计" name="first">
-          <Descriptions :data="dialogData" />
+          <Descriptions :list="list" :data="data" style="gap: 18px">
+            <template #content-deviceName>
+              <span>{{ dialogData.deviceName || '-' }}</span>
+              <img @click="controlDialogVisible = true"
+                v-if="[0].includes(dialogData.parseOtherConfig && dialogData.parseOtherConfig.ptzCtrl)"
+                src="@screen/images/camera-control-icon.svg" width="18px" height="18px" style="cursor: pointer;">
+            </template>
+          </Descriptions>
         </ElTabPane>
         <ElTabPane label="摄相机参数" name="second">摄相机参数</ElTabPane>
       </ElTabs>
 
       <div class="bottom">
-        <Button>感知事件</Button>
+        <!-- <Button>云台控制</Button> -->
         <Button> 录像查看</Button>
       </div>
     </div>
+
+    <CameraControlDialog :deviceId="dialogData.iotDeviceId" v-model="controlDialogVisible" />
   </Dialog>
 </template>
 
@@ -27,11 +31,14 @@
 import Dialog from "@screen/components/Dialog/index.vue";
 import Button from "@screen/components/Buttons/Button.vue"
 import Video from "@screen/components/Video"
-import Descriptions from "./Descriptions.vue"
+import Descriptions from '@screen/components/Descriptions.vue';
+import CameraControlDialog from "./components/CameraControlDialog.vue";
+
+import { getRoadInfoByStakeMark, getOrganizationName } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
 
 import { dialogDelayVisible } from "./../mixin"
 
-// 摄像机 G35 K094+079
+// 摄像机弹窗
 export default {
   name: 'Camera',
   mixins: [dialogDelayVisible],
@@ -39,15 +46,70 @@ export default {
     Dialog,
     Button,
     Descriptions,
-    Video
+    Video,
+    CameraControlDialog
   },
   data() {
     return {
-      activeName: 'first'
+      activeName: 'first',
+      controlDialogVisible: false,
+      data: {},
+      list: [
+        {
+          label: '设备名称',
+          key: "deviceName",
+        },
+        {
+          label: '道路名称',
+          key: "roadName",
+        },
+        {
+          label: '设备编号',
+          key: "deviceCode",
+        },
+        {
+          label: '所属机构',
+          key: "organizationName",
+        },
+        {
+          label: '设备桩号',
+          key: "stakeMarkId",
+        },
+        {
+          label: '设备方向',
+          key: "direction",
+          enum: "CameraDirectionEnum"
+        },
+        {
+          label: '设备状态',
+          key: "deviceState",
+          enum: "DeviceTypeEnum",
+          gridColumn: 2,
+        },
+        {
+          label: '状态更新时间',
+          key: "updateTime",
+          gridColumn: 2,
+          // enum: "CameraDirectionEnum"
+        },
+        // {
+        //   label: '经/纬度',
+        //   key: "${longitude} / ${latitude}",
+        // },
+      ],
     }
   },
-  methods: {
-    handleClickTabs() { }
+  async created() {
+    this.data = { ...this.dialogData, organizationName: null, roadName: null };
+
+    getOrganizationName(this.dialogData.iotDeviceId)
+      .then((data) => {
+        this.data.organizationName = data.organizationName;
+      });
+
+    const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMarkId);
+
+    if (roadInfo) this.data.roadName = roadInfo.roadName;
   }
 }
 </script>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue
index 7b557162..8b80d616 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue
@@ -1,7 +1,7 @@
 <template>
   <Dialog v-model="obverseVisible" title="行车诱导">
     <div class="DrivingGuidance">
-      <!-- <CustomControlVideo class="camera-video" /> -->
+      <Video class="video-stream" :camId="dialogData.iotDeviceId" />
 
       <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
         <ElTabPane label="详细设计" name="first">
@@ -25,8 +25,8 @@ import Button from "@screen/components/Buttons/Button.vue"
 import Descriptions from '@screen/components/Descriptions.vue';
 import CustomControlVideo from '@screen/components/CustomControlVideo/index.vue';
 import DeviceControlDialog from "./components/DeviceControlDialog.vue"
-import request from "@/utils/request";
-import { getRoadInfoByStakeMark } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
+import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
+import Video from "@screen/components/Video"
 
 import { dialogDelayVisible } from "./../mixin"
 
@@ -39,7 +39,8 @@ export default {
     Button,
     Descriptions,
     CustomControlVideo,
-    DeviceControlDialog
+    DeviceControlDialog,
+    Video
   },
   data() {
     return {
@@ -86,13 +87,8 @@ export default {
   async created() {
     this.data = { ...this.dialogData, roadName: null }
 
-    request({
-      url: `/business/product/${this.dialogData.productId}`,
-      method: "get",
-    })
-      .then(({ code, data }) => {
-        if (code != 200) return;
-
+    getProduct(this.dialogData.productId)
+      .then(data => {
         this.dialogData.brand = data.brand;
       })
       .catch((err) => {
@@ -113,7 +109,6 @@ export default {
 <style lang='scss' scoped>
 .DrivingGuidance {
   width: 600px;
-  height: 240px;
   color: #fff;
   display: flex;
   flex-direction: column;
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 51b0d404..ab2c2002 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
@@ -36,21 +36,23 @@
 <script>
 import { getLayerData } from "./utils/layerImages";
 import { debounce } from "lodash";
-import { eventMap, cacheRemoveFunc } from "./utils/buttonEvent";
+import { eventMap, cacheRemoveFunc, getHandleDeviceType } from "./utils/buttonEvent";
 
 import Bg1 from "@screen/components/Decorations/bg-1.vue"
-import ControlCamera from "./../Dialogs/ControlCamera/index.vue"
+// import ControlCamera from "./../Dialogs/ControlCamera/index.vue"
 import DrivingGuidance from "./../Dialogs/DrivingGuidance/index.vue"
 import Camera from "./../Dialogs/Camera/index.vue";
+import Broadcast from "./../Dialogs/Broadcast/index.vue";
 import InfoBoard from "./../InfoBoard"
 
 export default {
   name: 'RoadAndEvents',
   components: {
-    ControlCamera,
+    // ControlCamera,
     Camera,
     DrivingGuidance,
     InfoBoard,
+    Broadcast,
     Bg1
   },
   data() {
@@ -86,7 +88,7 @@ export default {
         // 0 有 可控（球机） ControlCamera | 1 ⽆ 不可控（枪机） Camera
         component: void 0,
         data: void 0,
-        // component: "DrivingGuidance",
+        // component: "Camera",
         // data: {
         //   camId: "57937",
         // }
@@ -124,7 +126,7 @@ export default {
       this.tabContentData = item.children;
     },
     handleDevice: debounce(function (item) {
-      const key = `${this.active}/${item.title}`;
+      const key = getHandleDeviceType(item) || `${this.active}/${item.title}`;
 
       const status = item.status;
 
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 38a5c421..5709241e 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
@@ -2,189 +2,303 @@ import { getDeviceList } from "./httpList";
 
 import { setMarkToMap } from "./map";
 
-// 0 有 可控（球机）ControlCamera | 1 ⽆ 不可控（枪机）Camera
-const cameraCtrlMap = {
-  0: "ControlCamera",
-  1: "Camera",
+const cameraIcon = {
+  // 球机
+  "00": require("@screen/images/deviceType/ball.svg"),
+  "01": require("@screen/images/deviceType/ball_fault.svg"),
 };
 
-export const cacheRemoveFunc = {
-  DriveTestEquipment_Camera_Remove: null,
-};
-
-export const eventMap = {
-  async "路测设备/摄像机"(item) {
-    // https://lbs.amap.com/demo/javascript-api-v2/example/mass-markers/labelmarker-mass
-
-    // {
-    //   camId: "57937",
-    //   camLat: "0",
-    //   camLong: "0",
-    //   camName: "G35 K055+565 (可控)",
-    //   camOrientation: "2",
-    //   camStatus: "0",
-    //   camType: "1",
-    //   deptId: "1751",
-    //   deptName: "G35济菏改扩建",
-    //   firmType: "2",
-    //   pileNum: "K055+565",
-    //   ptzCtrl: "0",
-    //   road: "G35",
-    //   status: "0",
-    // };
-
-    const ballFault = require("@screen/images/deviceType/ball_fault.svg");
-    const ball = require("@screen/images/deviceType/ball.svg");
-
-    const data = await getDeviceList(1);
-    // const data = [
-    //   {
-    //     longitude: 116.268564,
-    //     latitude: 35.73115,
-    //     otherConfig: '{"ptzCtrl":0}',
-    //   },
-    //   {
-    //     longitude: 116.258178,
-    //     latitude: 35.720996,
-    //   },
-    //   {
-    //     longitude: 116.255542,
-    //     latitude: 35.717335,
-    //   },
-    //   {
-    //     longitude: 116.252883,
-    //     latitude: 35.713114,
-    //   },
-    //   {
-    //     longitude: 116.249416,
-    //     latitude: 35.707627,
-    //   },
-    // ];
+export const cacheRemoveFunc = {};
 
-    if (!data) return;
-
-    cacheRemoveFunc.DriveTestEquipment_Camera_Remove?.();
+export const DeviceForMap = {
+  摄像机: {
+    deviceType: "1",
+    dialog: "Camera",
+    options: {
+      iconCallback(bool, item) {
+        /**
+         * 0 球机 可控
+         * 1 枪机 不可控
+         */
+        const type = JSON.parse(item.otherConfig)?.ptzCtrl;
 
-    cacheRemoveFunc.DriveTestEquipment_Camera_Remove = await setMarkToMap.call(
-      this,
-      item,
-      data,
-      (extData) => {
-        try {
-          this.dialogConfig = {
-            // 0 有（球机） 1 ⽆（枪机）
-            component: cameraCtrlMap[JSON.parse(extData.otherConfig)?.ptzCtrl],
-            data: extData,
-          };
-        } catch (error) {}
+        return cameraIcon[`${type}${!bool}`];
       },
-      null,
-      {
-        iconCallback(bool, item) {
-          const type = JSON.parse(item.otherConfig)?.ptzCtrl;
-
-          switch (type) {
-            case "0":
-            case 0:
-              return bool ? ball : ballFault;
-          }
-        },
-      }
-    );
+    },
+  },
+  行车诱导: {
+    deviceType: "12",
+    dialog: "DrivingGuidance",
   },
-  async "路测设备/摄像机_close"() {
-    cacheRemoveFunc.DriveTestEquipment_Camera_Remove?.();
+  情报板: {
+    deviceType: "2",
+    dialog: "InfoBoard",
   },
-  async "路测设备/行车诱导_close"() {
-    cacheRemoveFunc.Driving_Guidance_Remove?.();
+  语音广播: {
+    deviceType: "5",
+    dialog: "Broadcast",
   },
-  async "路测设备/行车诱导"(item) {
-    const data = await getDeviceList(12);
-
-    // const data = [
-    //   {
-    //     longitude: 116.268564,
-    //     latitude: 35.73115,
-    //     otherConfig: '{"ptzCtrl":0}',
-    //   },
-    //   {
-    //     longitude: 116.258178,
-    //     latitude: 35.720996,
-    //   },
-    //   {
-    //     longitude: 116.255542,
-    //     latitude: 35.717335,
-    //   },
-    //   {
-    //     longitude: 116.252883,
-    //     latitude: 35.713114,
-    //   },
-    //   {
-    //     longitude: 116.249416,
-    //     latitude: 35.707627,
-    //   },
-    // ];
+};
+
+export function getHandleDeviceType(item) {
+  if (DeviceForMap[item.title]) return "地图设备/map";
+}
+
+export const eventMap = {
+  // 需要在地图显示的
+  async "地图设备/map"(item) {
+    const config = DeviceForMap[item.title];
+
+    const data = await getDeviceList(config.deviceType);
 
     if (!data) return;
 
-    cacheRemoveFunc.Driving_Guidance_Remove?.();
+    eventMap[`地图设备/map_close`](item);
 
-    cacheRemoveFunc.Driving_Guidance_Remove = await setMarkToMap.call(
+    cacheRemoveFunc[`地图设备/${item.title}`] = await setMarkToMap.call(
       this,
       item,
       data,
       (extData) => {
         this.dialogConfig = {
-          component: "DrivingGuidance",
-          data: extData,
+          component: config.dialog,
+          data: {
+            ...extData,
+            parseOtherConfig: JSON.parse(extData.otherConfig || "{}"),
+          },
         };
-      }
+      },
+      config.options
     );
   },
-  async "路测设备/情报板_close"() {
-    cacheRemoveFunc.Info_Board_Remove?.();
+  "地图设备/map_close"(item) {
+    cacheRemoveFunc[`地图设备/${item.title}`]?.();
   },
-  async "路测设备/情报板"(item) {
-    const data = await getDeviceList(2);
-
-    // const data = [
-    //   {
-    //     longitude: 116.268564,
-    //     latitude: 35.73115,
-    //     otherConfig: '{"ptzCtrl":0}',
-    //   },
-    //   {
-    //     longitude: 116.258178,
-    //     latitude: 35.720996,
-    //   },
-    //   {
-    //     longitude: 116.255542,
-    //     latitude: 35.717335,
-    //   },
-    //   {
-    //     longitude: 116.252883,
-    //     latitude: 35.713114,
-    //   },
-    //   {
-    //     longitude: 116.249416,
-    //     latitude: 35.707627,
-    //   },
-    // ];
 
-    if (!data) return;
+  // async "路测设备/摄像机"(item) {
+  //   // https://lbs.amap.com/demo/javascript-api-v2/example/mass-markers/labelmarker-mass
 
-    cacheRemoveFunc.Info_Board_Remove?.();
+  //   // {
+  //   //   camId: "57937",
+  //   //   camLat: "0",
+  //   //   camLong: "0",
+  //   //   camName: "G35 K055+565 (可控)",
+  //   //   camOrientation: "2",
+  //   //   camStatus: "0",
+  //   //   camType: "1",
+  //   //   deptId: "1751",
+  //   //   deptName: "G35济菏改扩建",
+  //   //   firmType: "2",
+  //   //   pileNum: "K055+565",
+  //   //   ptzCtrl: "0",
+  //   //   road: "G35",
+  //   //   status: "0",
+  //   // };
 
-    cacheRemoveFunc.Info_Board_Remove = await setMarkToMap.call(
-      this,
-      item,
-      data,
-      (extData) => {
-        this.dialogConfig = {
-          component: "InfoBoard",
-          data: extData,
-        };
-      }
-    );
-  },
+  //   const ballFault = require("@screen/images/deviceType/ball_fault.svg");
+  //   const ball = require("@screen/images/deviceType/ball.svg");
+
+  //   const data = await getDeviceList(1);
+  //   // const data = [
+  //   //   {
+  //   //     longitude: 116.268564,
+  //   //     latitude: 35.73115,
+  //   //     otherConfig: '{"ptzCtrl":0}',
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.258178,
+  //   //     latitude: 35.720996,
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.255542,
+  //   //     latitude: 35.717335,
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.252883,
+  //   //     latitude: 35.713114,
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.249416,
+  //   //     latitude: 35.707627,
+  //   //   },
+  //   // ];
+
+  //   if (!data) return;
+
+  //   cacheRemoveFunc.DriveTestEquipment_Camera_Remove?.();
+
+  //   cacheRemoveFunc.DriveTestEquipment_Camera_Remove = await setMarkToMap.call(
+  //     this,
+  //     item,
+  //     data,
+  //     (extData) => {
+  //       try {
+  //         this.dialogConfig = {
+  //           // 0 有（球机） 1 ⽆（枪机）
+  //           component: cameraCtrlMap[JSON.parse(extData.otherConfig)?.ptzCtrl],
+  //           data: extData,
+  //         };
+  //       } catch (error) {}
+  //     },
+  //     null,
+  //     {
+  //       iconCallback(bool, item) {
+  //         const type = JSON.parse(item.otherConfig)?.ptzCtrl;
+
+  //         switch (type) {
+  //           case "0":
+  //           case 0:
+  //             return bool ? ball : ballFault;
+  //         }
+  //       },
+  //     }
+  //   );
+  // },
+  // async "路测设备/摄像机_close"() {
+  //   cacheRemoveFunc.DriveTestEquipment_Camera_Remove?.();
+  // },
+  // async "路测设备/行车诱导_close"() {
+  //   cacheRemoveFunc.Driving_Guidance_Remove?.();
+  // },
+  // async "路测设备/行车诱导"(item) {
+  //   const data = await getDeviceList(12);
+
+  //   // const data = [
+  //   //   {
+  //   //     longitude: 116.268564,
+  //   //     latitude: 35.73115,
+  //   //     otherConfig: '{"ptzCtrl":0}',
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.258178,
+  //   //     latitude: 35.720996,
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.255542,
+  //   //     latitude: 35.717335,
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.252883,
+  //   //     latitude: 35.713114,
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.249416,
+  //   //     latitude: 35.707627,
+  //   //   },
+  //   // ];
+
+  //   if (!data) return;
+
+  //   cacheRemoveFunc.Driving_Guidance_Remove?.();
+
+  //   cacheRemoveFunc.Driving_Guidance_Remove = await setMarkToMap.call(
+  //     this,
+  //     item,
+  //     data,
+  //     (extData) => {
+  //       this.dialogConfig = {
+  //         component: "DrivingGuidance",
+  //         data: extData,
+  //       };
+  //     }
+  //   );
+  // },
+  // async "路测设备/情报板_close"() {
+  //   cacheRemoveFunc.Info_Board_Remove?.();
+  // },
+  // async "路测设备/情报板"(item) {
+  //   const data = await getDeviceList(2);
+
+  //   // const data = [
+  //   //   {
+  //   //     longitude: 116.268564,
+  //   //     latitude: 35.73115,
+  //   //     otherConfig: '{"ptzCtrl":0}',
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.258178,
+  //   //     latitude: 35.720996,
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.255542,
+  //   //     latitude: 35.717335,
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.252883,
+  //   //     latitude: 35.713114,
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.249416,
+  //   //     latitude: 35.707627,
+  //   //   },
+  //   // ];
+
+  //   if (!data) return;
+
+  //   cacheRemoveFunc.Info_Board_Remove?.();
+
+  //   cacheRemoveFunc.Info_Board_Remove = await setMarkToMap.call(
+  //     this,
+  //     item,
+  //     data,
+  //     (extData) => {
+  //       this.dialogConfig = {
+  //         component: "InfoBoard",
+  //         data: extData,
+  //       };
+  //     }
+  //   );
+  // },
+  // async "路测设备/语音广播_close"() {
+  //   // cacheRemoveFunc.Info_Board_Remove?.();
+  // },
+  // async "路测设备/语音广播"(item) {
+  //   console.log(
+  //     "%c [ item ]-194-「buttonEvent.js」",
+  //     "font-size:15px; background:#31100b; color:#75544f;",
+  //     item
+  //   );
+  //   return;
+  //   const data = await getDeviceList(2);
+
+  //   // const data = [
+  //   //   {
+  //   //     longitude: 116.268564,
+  //   //     latitude: 35.73115,
+  //   //     otherConfig: '{"ptzCtrl":0}',
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.258178,
+  //   //     latitude: 35.720996,
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.255542,
+  //   //     latitude: 35.717335,
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.252883,
+  //   //     latitude: 35.713114,
+  //   //   },
+  //   //   {
+  //   //     longitude: 116.249416,
+  //   //     latitude: 35.707627,
+  //   //   },
+  //   // ];
+
+  //   if (!data) return;
+
+  //   // cacheRemoveFunc.Info_Board_Remove?.();
+
+  //   // cacheRemoveFunc.Info_Board_Remove = await setMarkToMap.call(
+  //   //   this,
+  //   //   item,
+  //   //   data,
+  //   //   (extData) => {
+  //   //     this.dialogConfig = {
+  //   //       component: "InfoBoard",
+  //   //       data: extData,
+  //   //     };
+  //   //   }
+  //   // );
+  // },
 };
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
index 49e4b9c3..713401dd 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
@@ -69,47 +69,58 @@ export function controlCamera(camId, cmdType) {
 
 /**
  * 通过 桩号获取 道路信息
+ * @param {*} stakeMarkId 桩号
  * @returns
  */
-export async function getRoadInfoByStakeMark(stakeMarkId) {
-  const stakeMarkInfo = await request({
-    // url: `/business/stakeMark/${stakeMarkId}`,
-    url: `/business/stakeMark/query`,
-    method: "get",
-    params: {
-      id: stakeMarkId,
-      direction: 1,
-    },
-  });
+export function getRoadInfoByStakeMark(stakeMarkId) {
+  return new Promise(async (resolve, reject) => {
+    if (!stakeMarkId) return reject();
 
-  console.log(
-    "%c [ stakeMarkInfo ]-86-「httpList.js」",
-    "font-size:15px; background:#4f7740; color:#93bb84;",
-    stakeMarkInfo
-  );
+    // 获取桩号信息
+    const stakeMarkInfo = await request({
+      // url: `/business/stakeMark/${stakeMarkId}`,
+      url: `/business/stakeMark/query`,
+      method: "get",
+      params: {
+        id: stakeMarkId,
+        direction: 1,
+      },
+    })
+      .then(({ code, data }) => {
+        if (code != 200) return;
 
-  if (!stakeMarkInfo.data[0]?.sectionId) return {};
+        return data[0];
+      })
+      .catch(() => {});
 
-  const roadSectionInfo = await request({
-    url: `/business/roadSection/${stakeMarkInfo.data[0].sectionId}`,
-    method: "get",
-  });
+    if (!stakeMarkInfo?.sectionId) return reject();
+
+    // 获取 管辖路段信息
+    const roadSectionInfo = await request({
+      url: `/business/roadSection/${stakeMarkInfo.sectionId}`,
+      method: "get",
+    })
+      .then(({ code, data }) => {
+        if (code != 200) return;
 
-  console.log(
-    "%c [ roadSectionInfo ]-95-「httpList.js」",
-    "font-size:15px; background:#b16336; color:#f5a77a;",
-    roadSectionInfo
-  );
-  if (!roadSectionInfo.data?.roadId) return {};
-
-  return (
-    (
-      await request({
-        url: `/business/road/${roadSectionInfo.data.roadId}`,
-        method: "get",
+        return data;
       })
-    ).data || {}
-  );
+      .catch(() => {});
+
+    if (!roadSectionInfo?.roadId) return reject();
+
+    // 获取 道路信息
+    request({
+      url: `/business/road/${roadSectionInfo.roadId}`,
+      method: "get",
+    })
+      .then(({ code, data }) => {
+        if (code != 200) return reject();
+
+        resolve(data);
+      })
+      .catch(() => reject());
+  });
 }
 
 const DeviceTypeMap = {
@@ -165,3 +176,53 @@ export function getDeviceList(deviceType) {
       Message.error(`${DeviceTypeMap[deviceType]}设备加载失败!`);
     });
 }
+
+/**
+ * 获取 所属机构
+ * @param {*} iotDeviceId 设备ID iotDeviceId
+ * @returns
+ */
+export function getOrganizationName(iotDeviceId) {
+  return new Promise((resolve, reject) => {
+    if (!iotDeviceId) return reject();
+
+    request({
+      url: `/business/organization/${iotDeviceId}`,
+      method: "get",
+    })
+      .then(({ code, data }) => {
+        if (code != 200) return reject();
+
+        // organizationName
+        resolve(data);
+      })
+      .catch(() => {
+        reject();
+      });
+  });
+}
+
+/**
+ * 获取 产品 设备厂商
+ * @param {*} iotDeviceId 设备ID iotDeviceId
+ * @returns
+ */
+export function getProduct(productId) {
+  return new Promise((resolve, reject) => {
+    if (!productId) return reject();
+
+    request({
+      url: `/business/product/${productId}`,
+      method: "get",
+    })
+      .then(({ code, data }) => {
+        if (code != 200) return reject();
+
+        // brand
+        resolve(data);
+      })
+      .catch(() => {
+        reject();
+      });
+  });
+}
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 e984a9d3..25d637c7 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
@@ -101,8 +101,7 @@ export async function setMarkToMap(
   item,
   data,
   _markerClick,
-  content,
-  { iconCallback } = {}
+  { iconCallback, content } = {}
 ) {
   const { mapIns } = this.getMap();
 
@@ -146,23 +145,27 @@ export async function setMarkToMap(
         content:
           content ||
           `<div style="
-          background-image: url(${item.deviceState == 1 ? normalBg : faultBg});
-          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='${
-            deviceIcon ? deviceIcon : item.deviceState == 1 ? normal : fault
-          }'>
+            background-image: url(${
+              item.deviceState == 1 ? normalBg : faultBg
+            });
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            width: 51px;
+            height: 51px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          ">
+          <img style="
+            min-width: 18px;
+            min-height: 18px;
+            max-width: 18px;
+            max-height: 18px;
+            margin-bottom: 12px;
+            " src='${
+              deviceIcon ? deviceIcon : item.deviceState == 1 ? normal : fault
+            }'
+          >
         </div>`,
       };
     }),
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
index 169bdf1d..a1838491 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
@@ -8,20 +8,26 @@
         <FocusedMonitoring class="card-menu" />
 
         <!-- 下 -->
-        <RoadAndEvents class="content-l-b card-menu" @onClickItem="onClickItem" />
+        <RoadAndEvents class="content-l-b card-menu" />
       </div>
 
       <!-- 右侧 -->
-      <ConditionStatistics class="content-r card-menu" />
+      <div class="content-r">
+        <div class="filter">
+          <ElPopover trigger="click" disabled placement="left">
+            <Button class="btn" slot="reference">
+              <img src="@screen/images/home-filter/filter.svg">
+            </Button>
+          </ElPopover>
+        </div>
+        <ConditionStatistics class="right card-menu" />
+      </div>
     </section>
 
-    <!-- <InfoBoard :visible.sync="isShowInfoBoard" :device="selectedDevice"></InfoBoard> -->
-
     <footer class="footer card-menu">
       <div class="footer-title">
         <span>济菏高速缩略图</span>
         <i class="el-icon-s-fold" style="color: #2AD9FD; transform: rotate(-90deg);" @click.stop="handleShrink" />
-        <!-- <img src="@screen/images/icon/icon-vector.png" @click.stop="handleShrink" /> -->
       </div>
       <div class="footer-content">
         <Thumbnail />
@@ -36,6 +42,7 @@ import Thumbnail from "./components/Thumbnail/index.vue";
 import ConditionStatistics from "./components/ConditionStatistics/index.vue";
 import RoadAndEvents from "./components/RoadAndEvents/index.vue";
 import AMapContainer from "./components/AMapContainer/index.vue";
+import Button from '@screen/components/Buttons/Button.vue';
 
 // import InfoBoard from "./components/InfoBoard"
 
@@ -47,12 +54,14 @@ export default {
     Thumbnail,
     RoadAndEvents,
     AMapContainer,
+    Button
     // InfoBoard
   },
   data() {
     return {
       isShowInfoBoard: false,
-      selectedDevice: null
+      selectedDevice: null,
+
     }
   },
   provide() {
@@ -75,32 +84,6 @@ export default {
         translateXElement.style.transform = `translateY(0)`
         translateXElement.style.position = `relative`;
       }
-    },
-    onClickItem(item) {
-      // if (item.title.includes("情报板")) {
-      //   this.isShowInfoBoard = true;
-      //   this.selectedDevice = {
-      //     "id": 904,
-      //     "iotDeviceId": "81221-65535",
-      //     "groupId": null,
-      //     "productId": 0,
-      //     "stakeMarkId": "k71+600",
-      //     "direction": "1",
-      //     "deviceName": "大学城入口站前板",
-      //     "deviceType": 2,
-      //     "installationDate": null,
-      //     "productionDate": null,
-      //     "durableYears": null,
-      //     "installationSite": null,
-      //     "useState": null,
-      //     "otherConfig": "{\"screenSize\":\"160*80\"}",
-      //     "remark": null,
-      //     "createTime": "2024-01-17T22:50:56.000+08:00",
-      //     "updateTime": null,
-      //     "longitude": null,
-      //     "latitude": null
-      //   }
-      // }
     }
   }
 }
@@ -156,7 +139,32 @@ export default {
     }
 
     .content-r {
-      width: 459px;
+      display: flex;
+      gap: 9px;
+
+      .btn {
+        padding: 9px;
+        background: linear-gradient(180deg, #152E3C 0%, #163A45 100%);
+        border-radius: 4px;
+        overflow: hidden;
+        height: unset;
+        border: 1px solid rgba(40, 144, 167, 1);
+      }
+
+      .btn-active {
+        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+      }
+
+      .filter {
+        display: flex;
+        flex-direction: column;
+        gap: 9px;
+        padding-top: 15px;
+      }
+
+      .right {
+        width: 459px;
+      }
     }
   }