diff --git a/package.json b/package.json
new file mode 100644
index 00000000..04a37ae9
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "flv.js": "^1.6.2"
+  }
+}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Teleport.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Teleport.vue
index 9d9036d3..f8a74228 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Teleport.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Teleport.vue
@@ -21,7 +21,7 @@ export default {
     this.queryParentDom.appendChild(this.addDom = this.$el);
   },
   beforeDestroy() {
-    if (!this.queryParentDom) return;
+    if (!this.queryParentDom || !this.queryParentDom.contains(this.addDom)) return;
 
     this.queryParentDom.removeChild(this.addDom);
   },
diff --git a/ruoyi-ui/src/views/JiHeExpressway/index.vue b/ruoyi-ui/src/views/JiHeExpressway/index.vue
index 0baa296f..a30a6fc5 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/index.vue
@@ -32,6 +32,41 @@ export default {
 };
 </script>
 
+<style lang="less">
+body {
+  div {
+
+    /* 滚动条整体部分 */
+    &::-webkit-scrollbar {
+      width: 6px !important;
+      height: 6px !important;
+      padding: 15px;
+    }
+
+    /* 滚动条的轨道 */
+    &::-webkit-scrollbar-track {
+      background: rgba(17, 72, 90, .4);
+      border-radius: 4px;
+    }
+
+    /* 滚动条的滑块按钮 */
+    &::-webkit-scrollbar-thumb {
+      background: #3785A0;
+      border-radius: 4px;
+    }
+
+    /* 上下箭头 */
+    &::-webkit-scrollbar-button {
+      display: none;
+    }
+
+    /* 滚动条角 */
+    &::-webkit-scrollbar-corner {
+      display: none;
+    }
+  }
+}
+</style>
 <style scoped lang="less">
 .pageBox {
   background: #13272F;
@@ -69,6 +104,7 @@ export default {
         top: -6px;
         z-index: -1;
         pointer-events: auto;
+        height: calc(100% + 6px);
       }
     }
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/data/lcz.json b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/data/lcz.json
index 7c6da393..6541763e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/data/lcz.json
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/data/lcz.json
@@ -1,161 +1,384 @@
-[
-  {"code":"K54","lng":116.864504,"lat":36.580292},
-  {"code":"K55","lng":116.857721,"lat":36.580915},
-  {"code":"K56","lng":116.84603,"lat":36.582315},
-  {"code":"K57","lng":116.835372,"lat":36.583456},
-  {"code":"K58","lng":116.823809,"lat":36.582523},
-  {"code":"K59","lng":116.813668,"lat":36.578892},
-  {"code":"K60","lng":116.805077,"lat":36.57303},
-  {"code":"K61","lng":116.798876,"lat":36.565715},
-  {"code":"K62","lng":116.794871,"lat":36.55731},
-  {"code":"K63","lng":116.791447,"lat":36.5488},
-  {"code":"K64","lng":116.786995,"lat":36.540406},
-  {"code":"K65","lng":116.781607,"lat":36.532641},
-  {"code":"K66","lng":116.774733,"lat":36.525493},
-  {"code":"K67","lng":116.767455,"lat":36.51867},
-  {"code":"K68","lng":116.760581,"lat":36.511521},
-  {"code":"K69","lng":116.754112,"lat":36.504046},
-  {"code":"K70","lng":116.747238,"lat":36.497221},
-  {"code":"K71","lng":116.739556,"lat":36.49072},
-  {"code":"K72","lng":116.731874,"lat":36.483893},
-  {"code":"K73","lng":116.725809,"lat":36.476416},
-  {"code":"K74","lng":116.71934,"lat":36.469262},
-  {"code":"K75","lng":116.714648,"lat":36.460906},
-  {"code":"K76","lng":116.709238,"lat":36.453097},
-  {"code":"K77","lng":116.704245,"lat":36.444952},
-  {"code":"K78","lng":116.699945,"lat":36.436583},
-  {"code":"K78","lng":116.696894,"lat":36.428437},
-  {"code":"K80","lng":116.694674,"lat":36.419397},
-  {"code":"K81","lng":116.691207,"lat":36.410914},
-  {"code":"K82","lng":116.683856,"lat":36.403992},
-  {"code":"K83","lng":116.674701,"lat":36.398969},
-  {"code":"K84","lng":116.664021,"lat":36.396401},
-  {"code":"K85","lng":116.653895,"lat":36.392381},
-  {"code":"K86","lng":116.644645,"lat":36.38743},
-  {"code":"K87","lng":116.634658,"lat":36.383633},
-  {"code":"K88","lng":116.623839,"lat":36.381065},
-  {"code":"K89","lng":116.613991,"lat":36.37738},
-  {"code":"K90","lng":116.604421,"lat":36.372466},
-  {"code":"K91","lng":116.596376,"lat":36.366212},
-  {"code":"K92","lng":116.588952,"lat":36.359622},
-  {"code":"K93","lng":116.58166,"lat":36.35263},
-  {"code":"K94","lng":116.572283,"lat":36.348155},
-  {"code":"K95","lng":116.561518,"lat":36.345358},
-  {"code":"K96","lng":116.5511,"lat":36.342001},
-  {"code":"K97","lng":116.543113,"lat":36.335847},
-  {"code":"K98","lng":116.535473,"lat":36.329413},
-  {"code":"K99","lng":116.530959,"lat":36.321019},
-  {"code":"K100","lng":116.524816,"lat":36.313313},
-  {"code":"K101","lng":116.517853,"lat":36.30658},
-  {"code":"K102","lng":116.50741,"lat":36.303214},
-  {"code":"K103","lng":116.498011,"lat":36.298164},
-  {"code":"K104","lng":116.492789,"lat":36.290588},
-  {"code":"K105","lng":116.487915,"lat":36.282451},
-  {"code":"K106","lng":116.48513,"lat":36.273751},
-  {"code":"K107","lng":116.484434,"lat":36.26477},
-  {"code":"K108","lng":116.482346,"lat":36.256068},
-  {"code":"K109","lng":116.479909,"lat":36.247085},
-  {"code":"K110","lng":116.480953,"lat":36.238381},
-  {"code":"K111","lng":116.474687,"lat":36.220971},
-  {"code":"K112","lng":116.474687,"lat":36.220971},
-  {"code":"K113","lng":116.468073,"lat":36.213388},
-  {"code":"K114","lng":116.462155,"lat":36.206085},
-  {"code":"K1150","lng":116.456585,"lat":36.198501},
-  {"code":"K116","lng":116.454844,"lat":36.189511},
-  {"code":"K117","lng":116.454322,"lat":36.18052},
-  {"code":"K118","lng":116.453278,"lat":36.171489},
-  {"code":"K119","lng":116.450073,"lat":36.163385},
-  {"code":"K120","lng":116.447643,"lat":36.154871},
-  {"code":"K121","lng":116.442917,"lat":36.146339},
-  {"code":"K122","lng":116.441756,"lat":36.137402},
-  {"code":"K123","lng":116.440466,"lat":36.128509},
-  {"code":"K124","lng":116.438119,"lat":36.119675},
-  {"code":"K125","lng":116.43906,"lat":36.110446},
-  {"code":"K126","lng":116.441559,"lat":36.10191},
-  {"code":"K127","lng":116.442922,"lat":36.093098},
-  {"code":"K128","lng":116.4419,"lat":36.084075},
-  {"code":"K129","lng":116.440991,"lat":36.075077},
-  {"code":"K130","lng":116.441446,"lat":36.065987},
-  {"code":"K131","lng":116.444513,"lat":36.057446},
-  {"code":"K132","lng":116.445182,"lat":36.048615},
-  {"code":"K133","lng":116.443483,"lat":36.039641},
-  {"code":"K134","lng":116.439746,"lat":36.031215},
-  {"code":"K135","lng":116.433857,"lat":36.023613},
-  {"code":"K136","lng":116.431252,"lat":36.014834},
-
-  {"code":"K137","lng":116.431365,"lat":36.014834},
-
-  {"code":"K138","lng":116.431139,"lat":36.015009},
-  {"code":"K139","lng":116.431139,"lat":36.005848},
-  {"code":"K140","lng":116.428873,"lat":35.996948},
-  {"code":"K141","lng":116.42302,"lat":35.989299},
-  {"code":"K142","lng":116.416678,"lat":35.981876},
-  {"code":"K143","lng":116.412148,"lat":35.973628},
-  {"code":"K144","lng":116.40875,"lat":35.96492},
-  {"code":"K145","lng":116.407618,"lat":35.955936},
-  {"code":"K146","lng":116.406938,"lat":35.946886},
-  {"code":"K147","lng":116.409203,"lat":35.937992},
-  {"code":"K148","lng":116.412261,"lat":35.929188},
-  {"code":"K149","lng":116.415192,"lat":35.920454},
-  {"code":"K150","lng":116.416236,"lat":35.911326},
-  {"code":"K151","lng":116.415818,"lat":35.902197},
-  {"code":"K152","lng":116.413314,"lat":35.893405},
-  {"code":"K153","lng":116.409974,"lat":35.884612},
-  {"code":"K154","lng":116.403712,"lat":35.877171},
-  {"code":"K155","lng":116.397451,"lat":35.869729},
-  {"code":"K156","lng":116.390771,"lat":35.862527},
-  {"code":"K157","lng":116.384802,"lat":35.854733},
-  {"code":"K158","lng":116.381264,"lat":35.846193},
-  {"code":"K159","lng":116.375815,"lat":35.838318},
-  {"code":"K160","lng":116.370209,"lat":35.830526},
-  {"code":"K161","lng":116.366206,"lat":35.822089},
-  {"code":"K162","lng":116.361747,"lat":35.814167},
-  {"code":"K163","lng":116.356086,"lat":35.806346},
-  {"code":"K164","lng":116.348957,"lat":35.799374},
-  {"code":"K165","lng":116.341619,"lat":35.792402},
-  {"code":"K166","lng":116.3347,"lat":35.785089},
-  {"code":"K167","lng":116.326943,"lat":35.778456},
-  {"code":"K168","lng":116.317299,"lat":35.773863},
-  {"code":"K169","lng":116.309751,"lat":35.767229},
-  {"code":"K170","lng":116.30388,"lat":35.759573},
-  {"code":"K171","lng":116.298219,"lat":35.751746},
-  {"code":"K172","lng":116.290881,"lat":35.74494},
-  {"code":"K173","lng":116.282076,"lat":35.739154},
-  {"code":"K174","lng":116.272431,"lat":35.734389},
-  {"code":"K175","lng":116.264045,"lat":35.728432},
-  {"code":"K176","lng":116.257545,"lat":35.720943},
-  {"code":"K177","lng":116.252886,"lat":35.71273},
-  {"code":"K178","lng":116.247407,"lat":35.704879},
-  {"code":"K179","lng":116.241238,"lat":35.697371},
-  {"code":"K180","lng":116.234196,"lat":35.6904},
-  {"code":"K181","lng":116.226049,"lat":35.684243},
-  {"code":"K182","lng":116.217362,"lat":35.678514},
-  {"code":"K183","lng":116.208758,"lat":35.672627},
-  {"code":"K184","lng":116.200902,"lat":35.666283},
-  {"code":"K185","lng":116.194434,"lat":35.658863},
-  {"code":"K186","lng":116.189724,"lat":35.650712},
-  {"code":"K187","lng":116.183941,"lat":35.642973},
-  {"code":"K188","lng":116.176385,"lat":35.636248},
-  {"code":"K189","lng":116.167679,"lat":35.63058},
-  {"code":"K190","lng":116.158725,"lat":35.625216},
-  {"code":"K191","lng":116.151916,"lat":35.617975},
-  {"code":"K192","lng":116.1452,"lat":35.610178},
-  {"code":"K193","lng":116.140303,"lat":35.602095},
-  {"code":"K194","lng":116.137598,"lat":35.593248},
-  {"code":"K195","lng":116.136944,"lat":35.584263},
-  {"code":"K196","lng":116.137909,"lat":35.575207},
-  {"code":"K197","lng":116.139862,"lat":35.566291},
-  {"code":"K198","lng":116.140001,"lat":35.557251},
-  {"code":"K199","lng":116.139095,"lat":35.548242},
-  {"code":"K200","lng":116.136445,"lat":35.539503},
-  {"code":"K201","lng":116.132262,"lat":35.531164},
-  {"code":"K202","lng":116.126964,"lat":35.523226},
-  {"code":"K203","lng":116.120062,"lat":35.516206},
-  {"code":"K204","lng":116.112765,"lat":35.509378},
-  {"code":"K205","lng":116.106769,"lat":35.501773},
-  {"code":"K206","lng":116.101471,"lat":35.493727},
-  {"code":"K207","lng":116.096033,"lat":35.485894},
-  {"code":"K208","lng":116.088962,"lat":35.478935},
-  {"code":"K209","lng":116.08151,"lat":35.472134},
-  {"code":"K210","lng":116.074572,"lat":35.465123}
-]
\ No newline at end of file
+{
+  "K55+0": { "lng": 116.858085, "lat": 36.580743 },
+  "K55+565": { "lng": 116.851819, "lat": 36.581497 },
+  "K56+0": { "lng": 116.847046, "lat": 36.582167 },
+  "K56+582": { "lng": 116.840587, "lat": 36.582971 },
+  "K56+806": { "lng": 116.838086, "lat": 36.583243 },
+  "K56+994": { "lng": 116.835986, "lat": 36.583361 },
+  "K57+216": { "lng": 116.833504, "lat": 36.583385 },
+  "K57+403": { "lng": 116.831414, "lat": 36.583329 },
+  "K57+595": { "lng": 116.829275, "lat": 36.583156 },
+  "K57+851": { "lng": 116.826456, "lat": 36.582761 },
+  "K58+9": { "lng": 116.82473, "lat": 36.582464 },
+  "K58+221": { "lng": 116.822455, "lat": 36.581941 },
+  "K58+524": { "lng": 116.819274, "lat": 36.580994 },
+  "K58+789": { "lng": 116.816579, "lat": 36.580005 },
+  "K59+98": { "lng": 116.813566, "lat": 36.57864 },
+  "K59+210": { "lng": 116.812525, "lat": 36.578087 },
+  "K59+500": { "lng": 116.809892, "lat": 36.576563 },
+  "K59+778": { "lng": 116.807565, "lat": 36.574903 },
+  "K60+52": { "lng": 116.805422, "lat": 36.573145 },
+  "K60+440": { "lng": 116.802665, "lat": 36.570453 },
+  "K60+823": { "lng": 116.800326, "lat": 36.56757 },
+  "K61+44": { "lng": 116.799218, "lat": 36.565796 },
+  "K61+176": { "lng": 116.798531, "lat": 36.564745 },
+  "K62+36": { "lng": 116.795234, "lat": 36.557483 },
+  "K63+40": { "lng": 116.791494, "lat": 36.54898 },
+  "K63+582": { "lng": 116.789466, "lat": 36.544392 },
+  "K63+985": { "lng": 116.787646, "lat": 36.541076 },
+  "K64+300": { "lng": 116.78605, "lat": 36.538554 },
+  "K64+894": { "lng": 116.782863, "lat": 36.533872 },
+  "K65+300": { "lng": 116.780402, "lat": 36.530811 },
+  "K65+843": { "lng": 116.776858, "lat": 36.52685 },
+  "K66+270": { "lng": 116.773773, "lat": 36.523927 },
+  "K66+825": { "lng": 116.769683, "lat": 36.520233 },
+  "K67+240": { "lng": 116.766404, "lat": 36.517598 },
+  "K67+803": { "lng": 116.76247, "lat": 36.513646 },
+  "K68+148": { "lng": 116.76024, "lat": 36.511116 },
+  "K68+300": { "lng": 116.759303, "lat": 36.509981 },
+  "K68+994": { "lng": 116.755204, "lat": 36.504684 },
+  "K69+330": { "lng": 116.753116, "lat": 36.502173 },
+  "K69+867": { "lng": 116.749683, "lat": 36.498211 },
+  "K70+330": { "lng": 116.746341, "lat": 36.495033 },
+  "K71+16": { "lng": 116.741174, "lat": 36.490483 },
+  "K71+330": { "lng": 116.738695, "lat": 36.488489 },
+  "K72+330": { "lng": 116.731022, "lat": 36.481963 },
+  "K73+112": { "lng": 116.725641, "lat": 36.476429 },
+  "K73+500": { "lng": 116.723391, "lat": 36.473447 },
+  "K74+565": { "lng": 116.717441, "lat": 36.465165 },
+  "K75+500": { "lng": 116.712405, "lat": 36.4578 },
+  "K77+260": { "lng": 116.70341, "lat": 36.443765 },
+  "K78+300": { "lng": 116.699772, "lat": 36.434892 },
+  "K78+900": { "lng": 116.698353, "lat": 36.429623 },
+  "K79+912": { "lng": 116.695347, "lat": 36.420863 },
+  "K80+360": { "lng": 116.694128, "lat": 36.41696 },
+  "K80+777": { "lng": 116.692337, "lat": 36.413506 },
+  "K81+17": { "lng": 116.691115, "lat": 36.411586 },
+  "K81+350": { "lng": 116.689137, "lat": 36.409058 },
+  "K81+687": { "lng": 116.686751, "lat": 36.406717 },
+  "K82+35": { "lng": 116.684006, "lat": 36.404501 },
+  "K82+464": { "lng": 116.680347, "lat": 36.402012 },
+  "K82+849": { "lng": 116.676666, "lat": 36.400222 },
+  "K83+32": { "lng": 116.674849, "lat": 36.399466 },
+  "K83+391": { "lng": 116.671145, "lat": 36.398242 },
+  "K83+889": { "lng": 116.665886, "lat": 36.396791 },
+  "K84+30": { "lng": 116.664403, "lat": 36.396359 },
+  "K84+239": { "lng": 116.662229, "lat": 36.395677 },
+  "K84+508": { "lng": 116.659487, "lat": 36.394693 },
+  "K84+640": { "lng": 116.658165, "lat": 36.394165 },
+  "K85+133": { "lng": 116.653361, "lat": 36.392006 },
+  "K85+815": { "lng": 116.647178, "lat": 36.388439 },
+  "K86+183": { "lng": 116.643702, "lat": 36.386687 },
+  "K86+520": { "lng": 116.640386, "lat": 36.385256 },
+  "K86+680": { "lng": 116.638794, "lat": 36.384615 },
+  "K87+139": { "lng": 116.634003, "lat": 36.383166 },
+  "K87+695": { "lng": 116.628006, "lat": 36.381894 },
+  "K88+251": { "lng": 116.622072, "lat": 36.38045 },
+  "K88+680": { "lng": 116.617665, "lat": 36.378947 },
+  "K88+974": { "lng": 116.614735, "lat": 36.377777 },
+  "K89+279": { "lng": 116.61178, "lat": 36.376424 },
+  "K89+680": { "lng": 116.607975, "lat": 36.374521 },
+  "K90+29": { "lng": 116.604872, "lat": 36.372632 },
+  "K90+600": { "lng": 116.6001, "lat": 36.369228 },
+  "K91+14": { "lng": 116.596889, "lat": 36.366561 },
+  "K91+480": { "lng": 116.593544, "lat": 36.363356 },
+  "K91+964": { "lng": 116.590299, "lat": 36.359881 },
+  "K92+266": { "lng": 116.588125, "lat": 36.357807 },
+  "K92+430": { "lng": 116.586921, "lat": 36.356703 },
+  "K92+862": { "lng": 116.583435, "lat": 36.354029 },
+  "K93+266": { "lng": 116.579921, "lat": 36.351764 },
+  "K93+480": { "lng": 116.577871, "lat": 36.350779 },
+  "K93+832": { "lng": 116.57444, "lat": 36.349234 },
+  "K94+64": { "lng": 116.572087, "lat": 36.34836 },
+  "K94+370": { "lng": 116.568887, "lat": 36.347408 },
+  "K95+155": { "lng": 116.560609, "lat": 36.345114 },
+  "K95+682": { "lng": 116.555179, "lat": 36.343298 },
+  "K96+77": { "lng": 116.551328, "lat": 36.341575 },
+  "K96+426": { "lng": 116.548083, "lat": 36.339838 },
+  "K96+930": { "lng": 116.54372, "lat": 36.33699 },
+  "K97+430": { "lng": 116.539829, "lat": 36.333767 },
+  "K97+930": { "lng": 116.536371, "lat": 36.330245 },
+  "K98+471": { "lng": 116.533253, "lat": 36.326084 },
+  "K99+20": { "lng": 116.530339, "lat": 36.32175 },
+  "K100+240": { "lng": 116.523922, "lat": 36.312082 },
+  "K100+310": { "lng": 116.523458, "lat": 36.311577 },
+  "K100+590": { "lng": 116.521715, "lat": 36.309494 },
+  "K100+871": { "lng": 116.519489, "lat": 36.307724 },
+  "K101+58": { "lng": 116.517924, "lat": 36.306609 },
+  "K101+300": { "lng": 116.515728, "lat": 36.305348 },
+  "K101+662": { "lng": 116.51211, "lat": 36.303898 },
+  "K102+18": { "lng": 116.508405, "lat": 36.30275 },
+  "K102+287": { "lng": 116.505682, "lat": 36.30174 },
+  "K102+681": { "lng": 116.50197, "lat": 36.299851 },
+  "K103+9": { "lng": 116.499248, "lat": 36.297883 },
+  "K103+320": { "lng": 116.497006, "lat": 36.295754 },
+  "K103+520": { "lng": 116.495805, "lat": 36.294237 },
+  "K103+854": { "lng": 116.494124, "lat": 36.291559 },
+  "K104+140": { "lng": 116.492843, "lat": 36.289204 },
+  "K105+82": { "lng": 116.48852, "lat": 36.281492 },
+  "K105+410": { "lng": 116.487053, "lat": 36.278795 },
+  "K105+711": { "lng": 116.485989, "lat": 36.276228 },
+  "K105+840": { "lng": 116.485657, "lat": 36.275116 },
+  "K106+119": { "lng": 116.485103, "lat": 36.272652 },
+  "K106+540": { "lng": 116.484732, "lat": 36.268883 },
+  "K107+7": { "lng": 116.484467, "lat": 36.264695 },
+  "K107+565": { "lng": 116.483309, "lat": 36.259766 },
+  "K108+477": { "lng": 116.480606, "lat": 36.251867 },
+  "K108+874": { "lng": 116.479842, "lat": 36.248351 },
+  "K109+149": { "lng": 116.479733, "lat": 36.245886 },
+  "K109+480": { "lng": 116.480228, "lat": 36.24294 },
+  "K109+753": { "lng": 116.48087, "lat": 36.240542 },
+  "K110+64": { "lng": 116.48155, "lat": 36.237799 },
+  "K110+300": { "lng": 116.481872, "lat": 36.235691 },
+  "K110+583": { "lng": 116.481836, "lat": 36.23315 },
+  "K110+911": { "lng": 116.481327, "lat": 36.23023 },
+  "K111+107": { "lng": 116.480723, "lat": 36.228542 },
+  "K111+394": { "lng": 116.479561, "lat": 36.226142 },
+  "K111+641": { "lng": 116.478259, "lat": 36.224192 },
+  "K112+57": { "lng": 116.475562, "lat": 36.221153 },
+  "K112+980": { "lng": 116.469395, "lat": 36.21452 },
+  "K113+760": { "lng": 116.46422, "lat": 36.208894 },
+  "K114+427": { "lng": 116.4598, "lat": 36.204074 },
+  "K114+582": { "lng": 116.458863, "lat": 36.202905 },
+  "K114+931": { "lng": 116.457118, "lat": 36.200103 },
+  "K115+30": { "lng": 116.456694, "lat": 36.199286 },
+  "K115+391": { "lng": 116.455378, "lat": 36.196218 },
+  "K115+815": { "lng": 116.45465, "lat": 36.192457 },
+  "K116+837": { "lng": 116.454353, "lat": 36.183281 },
+  "K117+770": { "lng": 116.454315, "lat": 36.174901 },
+  "K118+249": { "lng": 116.454215, "lat": 36.1706 },
+  "K118+581": { "lng": 116.453775, "lat": 36.167636 },
+  "K118+866": { "lng": 116.453188, "lat": 36.165118 },
+  "K119+377": { "lng": 116.451681, "lat": 36.160688 },
+  "K119+855": { "lng": 116.449634, "lat": 36.156722 },
+  "K120+181": { "lng": 116.447906, "lat": 36.154151 },
+  "K120+553": { "lng": 116.445768, "lat": 36.151286 },
+  "K120+855": { "lng": 116.444221, "lat": 36.148876 },
+  "K121+117": { "lng": 116.443192, "lat": 36.146676 },
+  "K121+401": { "lng": 116.442376, "lat": 36.144211 },
+  "K121+615": { "lng": 116.442009, "lat": 36.14231 },
+  "K122+33": { "lng": 116.441769, "lat": 36.138558 },
+  "K122+324": { "lng": 116.441823, "lat": 36.135945 },
+  "K122+515": { "lng": 116.441686, "lat": 36.134233 },
+  "K122+843": { "lng": 116.441286, "lat": 36.131307 },
+  "K123+304": { "lng": 116.440083, "lat": 36.127281 },
+  "K123+574": { "lng": 116.439241, "lat": 36.124951 },
+  "K123+947": { "lng": 116.438387, "lat": 36.121671 },
+  "K124+129": { "lng": 116.438184, "lat": 36.12004 },
+  "K124+349": { "lng": 116.437997, "lat": 36.118065 },
+  "K124+505": { "lng": 116.43798, "lat": 36.116666 },
+  "K124+832": { "lng": 116.438151, "lat": 36.11373 },
+  "K125+64": { "lng": 116.438532, "lat": 36.111672 },
+  "K125+296": { "lng": 116.439045, "lat": 36.109629 },
+  "K125+440": { "lng": 116.439406, "lat": 36.10837 },
+  "K126+33": { "lng": 116.441175, "lat": 36.103239 },
+  "K126+335": { "lng": 116.441821, "lat": 36.100581 },
+  "K126+690": { "lng": 116.442366, "lat": 36.097421 },
+  "K127+237": { "lng": 116.442782, "lat": 36.092516 },
+  "K127+730": { "lng": 116.442605, "lat": 36.08809 },
+  "K128+180": { "lng": 116.442109, "lat": 36.084072 },
+  "K128+730": { "lng": 116.441173, "lat": 36.079187 },
+  "K129+512": { "lng": 116.44081, "lat": 36.072169 },
+  "K129+710": { "lng": 116.441053, "lat": 36.070404 },
+  "K129+948": { "lng": 116.441215, "lat": 36.068272 },
+  "K130+341": { "lng": 116.441892, "lat": 36.064784 },
+  "K130+550": { "lng": 116.442369, "lat": 36.062951 },
+  "K131+140": { "lng": 116.44386, "lat": 36.05779 },
+  "K131+587": { "lng": 116.444699, "lat": 36.053834 },
+  "K131+868": { "lng": 116.444946, "lat": 36.051321 },
+  "K132+136": { "lng": 116.445025, "lat": 36.048914 },
+  "K132+557": { "lng": 116.444729, "lat": 36.045142 },
+  "K132+880": { "lng": 116.44423, "lat": 36.042271 },
+  "K133+268": { "lng": 116.44323, "lat": 36.038883 },
+  "K133+461": { "lng": 116.442121, "lat": 36.0374 },
+  "K133+528": { "lng": 116.441679, "lat": 36.036915 },
+  "K133+961": { "lng": 116.440131, "lat": 36.033228 },
+  "K134+380": { "lng": 116.438225, "lat": 36.029792 },
+  "K134+453": { "lng": 116.437925, "lat": 36.029179 },
+  "K134+975": { "lng": 116.435073, "lat": 36.025093 },
+  "K135+160": { "lng": 116.434155, "lat": 36.023607 },
+  "K135+353": { "lng": 116.433359, "lat": 36.02201 },
+  "K135+515": { "lng": 116.432763, "lat": 36.020636 },
+  "K135+773": { "lng": 116.432007, "lat": 36.018402 },
+  "K136+82": { "lng": 116.431394, "lat": 36.015675 },
+  "K136+255": { "lng": 116.431198, "lat": 36.014131 },
+  "K136+583": { "lng": 116.431108, "lat": 36.011183 },
+  "K136+984": { "lng": 116.431371, "lat": 36.007589 },
+  "K137+190": { "lng": 116.431371, "lat": 36.005739 },
+  "K137+424": { "lng": 116.431127, "lat": 36.003647 },
+  "K137+698": { "lng": 116.430659, "lat": 36.001214 },
+  "K138+203": { "lng": 116.428788, "lat": 35.996934 },
+  "K138+513": { "lng": 116.427265, "lat": 35.994433 },
+  "K139+230": { "lng": 116.422837, "lat": 35.989076 },
+  "K139+784": { "lng": 116.419435, "lat": 35.984939 },
+  "K140+253": { "lng": 116.41674, "lat": 35.981333 },
+  "K140+420": { "lng": 116.41581, "lat": 35.980034 },
+  "K141+120": { "lng": 116.412642, "lat": 35.974296 },
+  "K141+980": { "lng": 116.40972, "lat": 35.966937 },
+  "K143+0": { "lng": 116.407667, "lat": 35.957925 },
+  "K143+763": { "lng": 116.407351, "lat": 35.95108 },
+  "K144+280": { "lng": 116.40757, "lat": 35.946438 },
+  "K144+454": { "lng": 116.407745, "lat": 35.94488 },
+  "K144+980": { "lng": 116.408522, "lat": 35.940193 },
+  "K145+290": { "lng": 116.409185, "lat": 35.937461 },
+  "K146+450": { "lng": 116.412368, "lat": 35.927365 },
+  "K147+247": { "lng": 116.414646, "lat": 35.920443 },
+  "K147+450": { "lng": 116.415195, "lat": 35.918667 },
+  "K147+715": { "lng": 116.415759, "lat": 35.916342 },
+  "K148+135": { "lng": 116.416438, "lat": 35.912608 },
+  "K148+390": { "lng": 116.416647, "lat": 35.910321 },
+  "K148+862": { "lng": 116.416647, "lat": 35.906085 },
+  "K149+246.8": { "lng": 116.416403, "lat": 35.902639 },
+  "K149+707": { "lng": 116.415671, "lat": 35.898544 },
+  "K150+400": { "lng": 116.413826, "lat": 35.892499 },
+  "K150+845": { "lng": 116.41214, "lat": 35.888746 },
+  "K151+273": { "lng": 116.410209, "lat": 35.885233 },
+  "K151+665": { "lng": 116.408183, "lat": 35.882115 },
+  "K152+79": { "lng": 116.405688, "lat": 35.878998 },
+  "K152+680": { "lng": 116.401724, "lat": 35.874657 },
+  "K153+620": { "lng": 116.395359, "lat": 35.867971 },
+  "K154+670": { "lng": 116.388606, "lat": 35.860293 },
+  "K154+869": { "lng": 116.387499, "lat": 35.858745 },
+  "K155+231": { "lng": 116.385733, "lat": 35.855828 },
+  "K155+600": { "lng": 116.384172, "lat": 35.852764 },
+  "K156+223": { "lng": 116.381659, "lat": 35.847554 },
+  "K156+688": { "lng": 116.379778, "lat": 35.843662 },
+  "K157+445": { "lng": 116.375531, "lat": 35.837797 },
+  "K158+192": { "lng": 116.371476, "lat": 35.83195 },
+  "K158+650": { "lng": 116.369466, "lat": 35.828168 },
+  "K159+420": { "lng": 116.366228, "lat": 35.821773 },
+  "K159+675": { "lng": 116.365176, "lat": 35.819648 },
+  "K160+360": { "lng": 116.361809, "lat": 35.813956 },
+  "K160+888": { "lng": 116.358905, "lat": 35.809836 },
+  "K161+390": { "lng": 116.35578, "lat": 35.806107 },
+  "K161+788": { "lng": 116.353142, "lat": 35.80324 },
+  "K162+390": { "lng": 116.348823, "lat": 35.799117 },
+  "K163+423": { "lng": 116.341069, "lat": 35.792296 },
+  "K163+640": { "lng": 116.339577, "lat": 35.790773 },
+  "K164+47": { "lng": 116.336928, "lat": 35.787813 },
+  "K164+279": { "lng": 116.335527, "lat": 35.786069 },
+  "K164+504": { "lng": 116.334118, "lat": 35.784398 },
+  "K164+640": { "lng": 116.333187, "lat": 35.783435 },
+  "K164+920": { "lng": 116.331153, "lat": 35.781534 },
+  "K165+210": { "lng": 116.328834, "lat": 35.77973 },
+  "K165+467": { "lng": 116.326623, "lat": 35.77828 },
+  "K165+635": { "lng": 116.325107, "lat": 35.777407 },
+  "K166+297": { "lng": 116.318904, "lat": 35.774246 },
+  "K166+650": { "lng": 116.315829, "lat": 35.772284 },
+  "K166+965": { "lng": 116.313253, "lat": 35.770377 },
+  "K167+280": { "lng": 116.310939, "lat": 35.768261 },
+  "K167+674": { "lng": 116.30834, "lat": 35.765423 },
+  "K167+978": { "lng": 116.306609, "lat": 35.763079 },
+  "K168+500": { "lng": 116.303998, "lat": 35.758894 },
+  "K169+13": { "lng": 116.30124, "lat": 35.754863 },
+  "K169+530": { "lng": 116.297954, "lat": 35.751061 },
+  "K169+892": { "lng": 116.295425, "lat": 35.748552 },
+  "K170+300": { "lng": 116.29233, "lat": 35.745881 },
+  "K170+587": { "lng": 116.290025, "lat": 35.744112 },
+  "K170+955": { "lng": 116.286888, "lat": 35.742003 },
+  "K171+265": { "lng": 116.284116, "lat": 35.740356 },
+  "K171+962": { "lng": 116.277628, "lat": 35.736966 },
+  "K172+330": { "lng": 116.274297, "lat": 35.735067 },
+  "K172+680": { "lng": 116.271262, "lat": 35.733114 },
+  "K173+7": { "lng": 116.268564, "lat": 35.73115 },
+  "K173+330": { "lng": 116.266041, "lat": 35.729097 },
+  "K173+916": { "lng": 116.261767, "lat": 35.72514 },
+  "K174+480": { "lng": 116.258178, "lat": 35.720996 },
+  "K174+952": { "lng": 116.255542, "lat": 35.717335 },
+  "K175+480": { "lng": 116.252883, "lat": 35.713114 },
+  "K176+167": { "lng": 116.249416, "lat": 35.707627 },
+  "K176+350": { "lng": 116.248436, "lat": 35.706184 },
+  "K176+824": { "lng": 116.245759, "lat": 35.702527 },
+  "K177+285": { "lng": 116.2429, "lat": 35.699099 },
+  "K177+785": { "lng": 116.239541, "lat": 35.695528 },
+  "K178+200": { "lng": 116.236583, "lat": 35.692679 },
+  "K178+696": { "lng": 116.23289, "lat": 35.689381 },
+  "K178+950": { "lng": 116.230875, "lat": 35.687792 },
+  "K179+263": { "lng": 116.228354, "lat": 35.685869 },
+  "K179+534": { "lng": 116.226088, "lat": 35.684279 },
+  "K179+626": { "lng": 116.225306, "lat": 35.683756 },
+  "K180+627": { "lng": 116.21678, "lat": 35.678024 },
+  "K181+605": { "lng": 116.208457, "lat": 35.67242 },
+  "K181+838": { "lng": 116.206501, "lat": 35.671057 },
+  "K182+102": { "lng": 116.204428, "lat": 35.669383 },
+  "K182+378": { "lng": 116.202332, "lat": 35.667578 },
+  "K182+641": { "lng": 116.20042, "lat": 35.665792 },
+  "K182+765": { "lng": 116.199574, "lat": 35.664916 },
+  "K183+23": { "lng": 116.197869, "lat": 35.663054 },
+  "K183+353": { "lng": 116.195871, "lat": 35.660571 },
+  "K183+548": { "lng": 116.19476, "lat": 35.659074 },
+  "K183+800": { "lng": 116.193445, "lat": 35.657076 },
+  "K184+67": { "lng": 116.192156, "lat": 35.654922 },
+  "K184+477": { "lng": 116.190325, "lat": 35.651555 },
+  "K184+750": { "lng": 116.188981, "lat": 35.649362 },
+  "K185+134": { "lng": 116.186866, "lat": 35.646375 },
+  "K185+436": { "lng": 116.185049, "lat": 35.6441 },
+  "K185+858": { "lng": 116.182232, "lat": 35.641081 },
+  "K186+168": { "lng": 116.179999, "lat": 35.638974 },
+  "K186+446": { "lng": 116.177848, "lat": 35.637186 },
+  "K186+617": { "lng": 116.176491, "lat": 35.636111 },
+  "K186+768": { "lng": 116.175258, "lat": 35.635205 },
+  "K187+89": { "lng": 116.172528, "lat": 35.633363 },
+  "K187+300": { "lng": 116.17067, "lat": 35.632216 },
+  "K187+908": { "lng": 116.165049, "lat": 35.629223 },
+  "K188+206": { "lng": 116.162375, "lat": 35.627656 },
+  "K188+486": { "lng": 116.160021, "lat": 35.626017 },
+  "K188+694": { "lng": 116.158368, "lat": 35.624714 },
+  "K188+842": { "lng": 116.15725, "lat": 35.623739 },
+  "K188+995": { "lng": 116.156155, "lat": 35.622691 },
+  "K189+707": { "lng": 116.151438, "lat": 35.617576 },
+  "K190+20": { "lng": 116.149379, "lat": 35.615315 },
+  "K190+360": { "lng": 116.147183, "lat": 35.612834 },
+  "K190+740": { "lng": 116.144994, "lat": 35.609919 },
+  "K190+911": { "lng": 116.144064, "lat": 35.608581 },
+  "K191+246": { "lng": 116.142408, "lat": 35.605893 },
+  "K191+484": { "lng": 116.141405, "lat": 35.603921 },
+  "K191+735": { "lng": 116.140418, "lat": 35.601813 },
+  "K192+83": { "lng": 116.139228, "lat": 35.598845 },
+  "K192+376": { "lng": 116.138422, "lat": 35.596298 },
+  "K192+740": { "lng": 116.137651, "lat": 35.593086 },
+  "K193+164": { "lng": 116.13704, "lat": 35.589307 },
+  "K193+656": { "lng": 116.136812, "lat": 35.584889 },
+  "K193+740": { "lng": 116.136839, "lat": 35.584141 },
+  "K193+966": { "lng": 116.136931, "lat": 35.582102 },
+  "K194+215": { "lng": 116.137129, "lat": 35.579875 },
+  "K194+579": { "lng": 116.137654, "lat": 35.576637 },
+  "K194+980": { "lng": 116.138418, "lat": 35.57309 },
+  "K195+447": { "lng": 116.139262, "lat": 35.568951 },
+  "K195+691": { "lng": 116.139599, "lat": 35.566774 },
+  "K195+735": { "lng": 116.139629, "lat": 35.566379 },
+  "K196+56": { "lng": 116.139919, "lat": 35.563509 },
+  "K196+214": { "lng": 116.139996, "lat": 35.56209 },
+  "K196+589": { "lng": 116.140037, "lat": 35.558719 },
+  "K196+970": { "lng": 116.13991, "lat": 35.5553 },
+  "K197+467": { "lng": 116.139347, "lat": 35.550857 },
+  "K197+900": { "lng": 116.138555, "lat": 35.547024 },
+  "K198+460": { "lng": 116.137181, "lat": 35.542123 },
+  "K198+900": { "lng": 116.135736, "lat": 35.538348 },
+  "K199+495": { "lng": 116.13342, "lat": 35.533345 },
+  "K199+800": { "lng": 116.131944, "lat": 35.530886 },
+  "K200+56": { "lng": 116.130753, "lat": 35.528796 },
+  "K200+382": { "lng": 116.128974, "lat": 35.526253 },
+  "K200+700": { "lng": 116.127123, "lat": 35.523828 },
+  "K200+981": { "lng": 116.125406, "lat": 35.521723 },
+  "K201+289": { "lng": 116.123419, "lat": 35.519481 },
+  "K201+497": { "lng": 116.122015, "lat": 35.518007 },
+  "K201+735": { "lng": 116.120279, "lat": 35.516407 },
+  "K202+533": { "lng": 116.114505, "lat": 35.510996 },
+  "K202+630": { "lng": 116.113855, "lat": 35.510307 },
+  "K202+976": { "lng": 116.111552, "lat": 35.50783 },
+  "K203+536": { "lng": 116.108064, "lat": 35.503676 },
+  "K203+705": { "lng": 116.1071, "lat": 35.502374 },
+  "K204+121": { "lng": 116.10487, "lat": 35.499111 },
+  "K204+619": { "lng": 116.102413, "lat": 35.495111 },
+  "K204+780": { "lng": 116.101693, "lat": 35.493792 },
+  "K205+383": { "lng": 116.098413, "lat": 35.489082 },
+  "K205+770": { "lng": 116.096012, "lat": 35.486209 },
+  "K206+145": { "lng": 116.093558, "lat": 35.483499 },
+  "K206+694": { "lng": 116.08973, "lat": 35.479674 },
+  "K207+196": { "lng": 116.086239, "lat": 35.47617 },
+  "K207+950": { "lng": 116.080978, "lat": 35.470926 },
+  "K208+194": { "lng": 116.079281, "lat": 35.469224 },
+  "K208+622": { "lng": 116.076293, "lat": 35.466252 },
+  "K209+147": { "lng": 116.072668, "lat": 35.462576 }
+}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue
index d86f8d7a..0013e100 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue
@@ -9,7 +9,7 @@ import { onceObserver } from "@screen/utils/resizeObserver";
 import { loadAMap } from "./loadAMap";
 
 const acData = require("./data/ac.json");
-const lczData = require("./data/lcz.json");
+const lcz = require("./data/lcz.json");
 
 export default {
   name: "AMapContainer",
@@ -84,8 +84,8 @@ export default {
 
       //济菏高速
       let lczDatas = [];
-      for (let i = 0; i < lczData.length; i++) {
-        lczDatas.push([lczData[i].lng, lczData[i].lat]);
+      for (let key in lcz) {
+        lczDatas.push([lcz[key].lng, lcz[key].lat]);
       }
 
       let jhgsPl = drawingLine(this.AMap, lczDatas, 3);
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/loadAMap.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/loadAMap.js
index f10a0dcc..d13c6323 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/loadAMap.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/loadAMap.js
@@ -1,4 +1,5 @@
 import AMapLoader from "@amap/amap-jsapi-loader";
+// import { delay } from "@screen/utils/common";
 
 let LoadAMap;
 
@@ -6,20 +7,26 @@ export function loadAMap() {
   if (LoadAMap) return LoadAMap;
 
   try {
-    return AMapLoader.load({
-      key: "3b5479d9ad9f01d138fef5e70daed7bd", // 申请好的Web端开发者Key，首次调用 load 时必填
-      // key: "b8053e4abb974f8a4346209ff5af93e9", // 申请好的Web端开发者Key，首次调用 load 时必填
-      // version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-    })
-      .then((AMap) => {
-        console.log("地图加载成功");
+    return new Promise(async (resolve, reject) => {
+      // await delay(1500);
 
-        return (LoadAMap = AMap);
+      AMapLoader.load({
+        key: "3b5479d9ad9f01d138fef5e70daed7bd", // 申请好的Web端开发者Key，首次调用 load 时必填
+        // key: "b8053e4abb974f8a4346209ff5af93e9", // 申请好的Web端开发者Key，首次调用 load 时必填
+        // version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        // plugins: ["AMap.MarkerCluster"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        plugins: ["AMap.MarkerClusterer"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
       })
-      .catch((e) => {
-        console.log("地图加载失败", e);
-      });
+        .then((AMap) => {
+          console.log("地图加载成功");
+
+          resolve((LoadAMap = AMap));
+        })
+        .catch((e) => {
+          reject();
+          console.log("地图加载失败", e);
+        });
+    });
   } catch (error) {
     console.log(
       "%c [ try catch 地图加载失败 ]-27-「loadAMap.js」",
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
index 28968187..dc92eab4 100644
--- 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
@@ -3,21 +3,21 @@
     <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>G35济菏高速</span>
+      <span>{{ data.road || '-' }}</span>
     </p>
     <p class="desc-item">
       <span>所属机构：</span>
-      <span>山东高速济南发展公司</span>
+      <span>{{ data.deptName || '-' }}</span>
     </p>
     <p class="desc-item">
       <span>设备桩号：</span>
-      <span>K094+079</span>
+      <span>{{ data.pileNum || '-' }}</span>
     </p>
     <p class="desc-item">
       <span>上行相机：</span>
@@ -35,7 +35,7 @@
     </p>
     <p class="desc-item singleline">
       <span>设备状态：</span>
-      <span :style="{ color: '#19E1B1' }">在线</span>
+      <span :style="{ color: statusEnum.color || '#19E1B1' }">{{ statusEnum.text }}</span>
     </p>
     <p class="desc-item singleline">
       <span>状态更新时间:</span>
@@ -45,8 +45,22 @@
 </template>
 
 <script>
+import { CameraStatusEnum, CameraControlTypeEnum } from "@screen/utils/enum.js"
+
 export default {
   name: 'Descriptions',
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      statusEnum: CameraStatusEnum[this.data.status] || {},
+      cameraType: CameraControlTypeEnum[this.data.ptzCtrl]?.text
+    }
+  }
 }
 </script>
 
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 47339915..d057e761 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,16 +1,16 @@
 <template>
-  <Dialog v-model="obverseVisible" title="摄像机 G35 K094+079 下行（可控）">
+  <Dialog v-model="obverseVisible" :title="dialogData.camName">
     <div class="Camera">
       <div class="icon-content">
         <img src="@screen/images/dialog/icon-photo.png" />
         <img src="@screen/images/dialog/icon-video.png" />
       </div>
 
-      <div class="video-presentation"></div>
+      <video controls class="video-stream" ref="videoContainerRef" />
 
       <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
         <ElTabPane label="详细设计" name="first">
-          <Descriptions />
+          <Descriptions :data="dialogData" />
         </ElTabPane>
         <ElTabPane label="摄相机参数" name="second">摄相机参数</ElTabPane>
       </ElTabs>
@@ -26,6 +26,7 @@
 <script>
 import Dialog from "@screen/components/Dialog/index.vue";
 import Button from "@screen/components/Buttons/Button.vue"
+import { openVideoStream } from "@screen/pages/Home/components/RoadAndEvents/utils/videoStream.js"
 import Descriptions from "./Descriptions.vue"
 import { dialogDelayVisible } from "./../mixin"
 
@@ -43,6 +44,11 @@ export default {
       activeName: 'first'
     }
   },
+  mounted() {
+    this.$nextTick(() => {
+      openVideoStream(this.dialogData.camId, this.$refs.videoContainerRef)
+    })
+  },
   methods: {
     handleClickTabs() { }
   }
@@ -67,11 +73,11 @@ export default {
     }
   }
 
-  .video-presentation {
+  .video-stream {
     width: 100%;
     height: 216px;
     margin-top: 10px;
-    background: #00ebc1;
+    // background: #00ebc1;
 
     img {
       width: 100%;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/index.vue
index ab26e328..f5708dc0 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/index.vue
@@ -14,13 +14,14 @@
             <div class="btn">全屏</div>
           </div>
         </div>
+        <video controls class="videoStream" ref="videoContainerRef" />
       </div>
 
       <div class="content">
         <div class="left">
           <p class="desc-item">
             <span>设备名称: </span>
-            <span>疲劳唤醒设备1</span>
+            <span>{{ dialogData.camName || '-' }}</span>
           </p>
           <p class="desc-item">
             <span>设备编号: </span>
@@ -29,42 +30,42 @@
           <div>
             <p class="desc-item">
               <span>设备桩号: </span>
-              <span>k097+900</span>
+              <span>{{ dialogData.pileNum || '-' }}</span>
             </p>
             <p class="desc-item">
               <span>方向: </span>
-              <span class="color1">菏泽</span>
+              <span class="color1">{{ cameraDirection || '-' }}</span>
             </p>
           </div>
           <p class="desc-item">
             <span>经/纬度: </span>
-            <span>117.071152 / 35.910659</span>
+            <span>{{ dialogData.camLong || '-' }} / {{ dialogData.camLat || '-' }}</span>
           </p>
           <p class="desc-item">
             <span>道路名称: </span>
-            <span>G35济菏告诉</span>
+            <span>{{ dialogData.road }}</span>
           </p>
           <p class="desc-item">
-            <span>道路名称: </span>
-            <span class="color1">正常</span>
+            <span>设备状态: </span>
+            <span class="color1">{{ statusEnum.text || '-' }}</span>
           </p>
 
         </div>
         <div class="dash-line"></div>
         <div class="right">
           <div class="direction">
-            <img class="top" src="./images/top.svg">
-            <img class="right" src="./images/right.svg">
+            <img class="top" src="./images/top.svg" @click="controlClick(21)">
+            <img class="right" src="./images/right.svg" @click="controlClick(24)">
             <div class="center"></div>
-            <img class="bottom" src="./images/bottom.svg">
-            <img class="left" src="./images/left.svg">
+            <img class="bottom" src="./images/bottom.svg" @click="controlClick(22)">
+            <img class="left" src="./images/left.svg" @click="controlClick(23)">
           </div>
 
           <div class="options">
             <div v-for="item in options" :key="item.key">
-              <img src="./images/sub.svg">
+              <img src="./images/sub.svg" @click="controlClick(item.sub)">
               <span>{{ item.label }}</span>
-              <img src="./images/add.svg">
+              <img src="./images/add.svg" @click="controlClick(item.add)">
             </div>
           </div>
         </div>
@@ -81,6 +82,10 @@
 import Dialog from "@screen/components/Dialog/index.vue"
 import Button from "@screen/components/Buttons/Button.vue"
 import { dialogDelayVisible } from "./../mixin"
+import { CameraStatusEnum, CameraDirectionEnum } from "@screen/utils/enum.js"
+import { controlCamera } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
+import { throttle } from "lodash"
+import { openVideoStream } from "@screen/pages/Home/components/RoadAndEvents/utils/videoStream.js"
 
 export default {
   name: 'ControlCamera',
@@ -91,22 +96,40 @@ export default {
   },
   data() {
     return {
+      statusEnum: CameraStatusEnum[this.dialogData.status] || {},
+      cameraDirection: CameraDirectionEnum[this.dialogData.camOrientation]?.text,
       options: [
         {
           label: "变倍",
-          key: "zoom"
+          key: "zoom",
+          add: "12",
+          sub: "11"
         },
         {
           label: "光圈",
-          key: "aperture"
+          key: "aperture",
+          add: "15",
+          sub: "16"
         },
         {
           label: "聚焦",
-          key: "focus"
+          key: "focus",
+          add: "13",
+          sub: "14"
         },
       ]
     }
   },
+  mounted() {
+    this.$nextTick(() => {
+      openVideoStream(this.dialogData.camId, this.$refs.videoContainerRef)
+    })
+  },
+  methods: {
+    controlClick: throttle(function (type) {
+      controlCamera(this.dialogData.camId, type)
+    }, 360)
+  }
 }
 </script>
 
@@ -126,9 +149,18 @@ export default {
   .camera-video {
     position: relative;
     flex: 1;
-    background-color: #19E1B1;
+    // background-color: #19E1B1;
+
+    .videoStream {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
 
     .control-btns {
+      z-index: 1;
       position: absolute;
       padding: 6px 9px;
       width: 100%;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/mixin.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/mixin.js
index 5e12827f..27d6b690 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/mixin.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/mixin.js
@@ -1,9 +1,10 @@
 export const dialogDelayVisible = {
-  // props: {
-  //   visible: {
-  //     default: false,
-  //   },
-  // },
+  props: {
+    dialogData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
   data() {
     return {
       visibleData: false,
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 bbee4d86..e6b3dbd4 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
@@ -6,38 +6,36 @@
         {{ layer.title }}
       </div>
     </div>
-    <!-- <div class="tabs-content"> -->
-    <!-- <TransitionGroup name="fade-group" tag="div" class="absoluteBody"> -->
+
+    <!-- group -->
     <TransitionGroup name="fade-group" tag="div" class="tabs-content">
       <div class="device-item" v-for="(item, index) in tabContentData" :key="item.id" @click="handleDevice(item)"
         :style="getStart(index)">
-        <Transition name="fade">
-          <img v-if="!item.status" class="device-icon" key="normal"
-            :src="require(`@screen/images/layer/${active}/${item.title}.svg`)" />
-          <img v-else class="device-icon" key="fault"
-            :src="require(`@screen/images/layer/${active}/${item.title}${item.status}.svg`)" />
-        </Transition>
+        <div class="device-icon"
+          :style="{ backgroundImage: `url(${require(`@screen/images/layer/${active}/${item.title}${item.status}.svg`)})` }" />
         <span>{{ item.title }}</span>
       </div>
     </TransitionGroup>
-    <!-- </div> -->
-    <div class="cleared-btn" @click="handleCleared">
-      <img src="@screen/images/icon/icon_006.png" />
-      <span>清空图层</span>
+
+    <div class="bottom">
+      <div class="cleared-btn" @click="handleCleared">
+        <img src="@screen/images/icon/icon_006.png" />
+        <span>清空图层</span>
+      </div>
     </div>
 
     <!-- 摄像机设备 控制 弹窗  球机 可打开-->
     <!-- <ControlCamera :data="cameraDialogConfig.data" :visible="cameraDialogConfig.visibleType === 0" /> -->
     <!-- 摄像机 G35 K094+079 下行（可控） 枪机 可打开-->
     <!-- <Camera :data="cameraDialogConfig.data" :visible="cameraDialogConfig.visibleType === 1" /> -->
-    <component :data="cameraDialogConfig.data" :is="cameraDialogConfig.component" @change="handleCameraChange" />
+    <component :dialogData="cameraDialogConfig.data" :is="cameraDialogConfig.component" @change="handleCameraChange" />
   </div>
 </template>
 
 <script>
 import { getLayerData } from "./utils/layerImages";
 import { debounce } from "lodash";
-import { eventMap } from "./utils/buttonEvent";
+import { eventMap, cacheRemoveFunc } from "./utils/buttonEvent";
 
 import ControlCamera from "./../Dialogs/ControlCamera/index.vue"
 import Camera from "./../Dialogs/Camera/index.vue";
@@ -56,15 +54,19 @@ export default {
 
       // 路测设备-摄像机
       cameraDialogConfig: {
-        // 0 有 可控（球机）ControlCamera | 1 ⽆ 不可控（枪机）Camera
-        component: null,
-        data: null
+        // 0 有 可控（球机） ControlCamera | 1 ⽆ 不可控（枪机） Camera
+        component: void 0,
+        data: void 0,
+        // component: ControlCamera,
+        // data: {
+        //   camId: "57937",
+        // }
       }
     }
   },
   inject: ['getMap'],
   created() {
-    const defaultActive = 2;
+    const defaultActive = 0;
 
     const layerData = getLayerData();
     this.layerData = layerData;
@@ -86,10 +88,18 @@ export default {
     handleCleared() {
       const { mapIns } = this.getMap();
 
+      this.layerData.forEach(({ children }) => {
+        children.forEach(item => item.status = "")
+      });
+
       if (!mapIns) return;
 
-      mapIns.clearMap();
-      mapIns.getLayers().forEach((layer, index) => index && mapIns.remove(layer))
+      for (const key in cacheRemoveFunc) {
+        cacheRemoveFunc[key]?.();
+      }
+
+      // mapIns.clearMap();
+      mapIns.getLayers().forEach((layer, index) => index > 1 && mapIns.remove(layer))
     },
 
     // 摄像机 可控 不可控 弹窗 回调
@@ -115,7 +125,7 @@ export default {
 <style lang='scss' scoped>
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity .36s;
+  transition: opacity .24s;
 }
 
 .fade-enter,
@@ -125,7 +135,7 @@ export default {
 
 .fade-group-enter-active,
 .fade-group-leave-active {
-  transition: all 0.36s ease;
+  transition: all 0.24s ease;
 }
 
 .fade-group-enter-from,
@@ -136,11 +146,13 @@ export default {
 .fade-group-leave-active {
   // transform: translateY(24px);
   position: absolute !important;
+  overflow: hidden;
 }
 
 .RoadAndEvents {
   width: 100%;
   background: url("~@screen/images/bg/box_bg_002.png") no-repeat;
+  // clip-path: polygon(13% 0, 87% 0, 100% 14%, 100% 85%, 85% 100%, 11% 100%, 0 87%, 0 15%);
   background-size: 100% 100%;
   position: relative;
   display: flex;
@@ -148,34 +160,53 @@ export default {
   padding: 24px 18px;
   padding-bottom: 15px;
   overflow: hidden;
+  max-height: min-content;
 
   .tabs-content {
-    display: grid;
     margin-top: 15px;
     margin-bottom: 6px;
+    display: grid;
     grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: repeat(3, 66px);
+    // grid-template-rows: repeat(3, 1fr);
     flex: 1;
+    max-height: 100%;
     overflow: auto;
     position: relative;
     gap: 6px;
 
     .device-item {
-      position: absolute;
+      // position: absolute;
+      position: relative;
       width: 70px;
       cursor: pointer;
       display: flex;
       flex-direction: column;
       align-items: center;
       --height-svg: 24px;
-      --gap: 9px;
+      --gap: 12px;
       padding-top: calc(var(--height-svg) + var(--gap));
 
       .device-icon {
-        display: block;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         position: absolute;
         top: 0;
-        height: 24px;
+        height: 33px;
+        width: 100%;
+        background-repeat: no-repeat;
+        background-size: auto;
+        background-position: center;
+        transition: all .18s linear;
+
+        &::before {
+          content: "";
+          position: absolute;
+          width: 33px;
+          height: 33px;
+          border: 1px solid rgba(0, 209, 255, .5);
+          border-radius: 50%;
+        }
       }
 
       span {
@@ -220,25 +251,30 @@ export default {
     }
   }
 
-  .cleared-btn {
-    // position: absolute;
-    cursor: pointer;
-    width: 98px;
-    height: 31px;
-    border-radius: 20px;
-    border: 1px solid #25d8ff;
-    font-size: 12px;
-    font-family: PingFang SC, PingFang SC;
-    font-weight: 500;
-    color: #ffffff;
+  .bottom {
     display: flex;
-    align-items: center;
+    justify-content: end;
 
-    img {
-      width: 16px;
-      height: 16px;
-      display: inline-block;
-      margin: 0 10px;
+    .cleared-btn {
+      // position: absolute;
+      cursor: pointer;
+      width: 98px;
+      height: 31px;
+      border-radius: 20px;
+      border: 1px solid #25d8ff;
+      font-size: 12px;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        margin: 0 10px;
+      }
     }
   }
 }
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 eff0bc97..3202ae32 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
@@ -1,14 +1,18 @@
 import { axiosIns } from "@screen/utils/axios/auth.js";
 import { Message } from "element-ui";
 
+const PilePointJSON = require(`@screen/pages/Home/components/AMapContainer/data/lcz.json`);
+
+import { setMarkerCluster } from "./map";
+
 // 0 有 可控（球机）ControlCamera | 1 ⽆ 不可控（枪机）Camera
 const cameraCtrlMap = {
   0: "ControlCamera",
   1: "Camera",
 };
 
-const cacheData = {
-  DriveTestEquipment_Camera: null,
+export const cacheRemoveFunc = {
+  DriveTestEquipment_Camera_Remove: null,
 };
 
 export const eventMap = {
@@ -18,15 +22,32 @@ export const eventMap = {
 
     if (!mapIns) return Message.error("地图加载失败!");
 
-    // const { code, data } = await axiosIns
-    //   .get("/system/camera/camList")
-    //   // .get("/system/dept/camTreeselect")
-    //   .catch(() => ({}));
-    const { code, data } = { code: 200 };
+    // {
+    //   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 { code, data } = await axiosIns
+      .get("/system/camera/camList")
+      // .get("/system/dept/camTreeselect")
+      .catch(() => ({}));
+    // const { code, data } = { code: 200 };
 
     if (code != 200) return Message.error("摄像机加载失败!");
 
-    // cacheData.DriveTestEquipment_Camera?.clear();
+    cacheRemoveFunc.DriveTestEquipment_Camera_Remove?.();
 
     const normal = require(`@screen/images/layer${item.id.replace(".", "")}`);
     const fault = require(`@screen/images/layer${item.id.replace(
@@ -34,81 +55,52 @@ export const eventMap = {
       (data) => (data === "." ? "" : `${data}_fault`)
     )}`);
 
-    const size = 42;
+    const markers = [];
+
+    const markerClick = (e) => {
+      const {
+        target: {
+          w: { extData },
+        },
+      } = e;
+
+      this.cameraDialogConfig = {
+        // 0 有（球机） 1 ⽆（枪机）
+        component: cameraCtrlMap[extData.ptzCtrl],
+        data: extData,
+      };
 
-    const iconOption = {
-      type: "image",
-      size: [size, size],
-      anchor: "center",
+      console.log(this.cameraDialogConfig);
     };
 
-    const layer =
-      cacheData.DriveTestEquipment_Camera ||
-      (cacheData.DriveTestEquipment_Camera = new AMap.LabelsLayer({
-        zooms: [3, 20],
-        zIndex: 1000,
-        collision: false,
-      }));
-
-    mapIns.add(layer);
-
-    [
-      {
-        camLong: 116.471814,
-        camLat: 39.995856,
-        status: 0,
-        camName: "名称1",
-        camId: "666",
-        ptzCtrl: 0,
-      },
-      {
-        camLong: 116.456474,
-        camLat: 39.991563,
-        status: 1,
-        camName: "名称2",
-        camId: "333",
-        ptzCtrl: 1,
-      },
-    ].forEach((item) => {
-      iconOption.image = item.status ? fault : normal;
-
-      const labelMarker = new AMap.LabelMarker({
-        position: [item.camLong, item.camLat],
-        icon: { ...iconOption },
-        name: item.camId,
-        zooms: [3, 20],
-        zIndex: 36,
-        opacity: 1,
-        text: {
-          content: item.camName,
-          direction: "right",
-          offset: [(size / 2 + 18) * -1, (size / 2 + 12) * -1],
-          style: {
-            fontSize: 12,
-            fontWeight: "normal",
-            fillColor: "#fff",
-            strokeColor: "#fff",
-            strokeWidth: 1,
-            fold: true,
-            padding: "3, 6",
-          },
-        },
-      });
+    data.forEach((item) => {
+      const { lng, lat } = PilePointJSON[item.pileNum] || {};
+
+      if (!lat || !lng) return;
 
-      labelMarker.on("click", (e) => {
-        this.cameraDialogConfig = {
-          // 0 有（球机） 1 ⽆（枪机）
-          component: cameraCtrlMap[item.ptzCtrl],
-          data: item,
-        };
+      const marker = new AMap.Marker({
+        position: [lng, lat],
+        content: `<img style="width: 36px; height: 36px" src='${
+          item.status !== "0" ? fault : normal
+        }'>`,
+        offset: new AMap.Pixel(-15, -15),
+        extData: item,
+        clickable: true,
       });
 
-      layer.add(labelMarker);
+      marker.on("click", markerClick);
+
+      markers.push(marker);
     });
 
-    mapIns.setFitView();
+    const markerCluster = await setMarkerCluster(mapIns, markers);
+
+    cacheRemoveFunc.DriveTestEquipment_Camera_Remove = () =>
+      markerCluster.clearMarkers();
+
+    mapIns.setFitView(markers, false, [360, 360, 360, 360]);
   },
   async "路测设备/摄像机_close"() {
-    cacheData.DriveTestEquipment_Camera?.clear();
+    cacheRemoveFunc.DriveTestEquipment_Camera_Remove?.();
   },
 };
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
new file mode 100644
index 00000000..a12d0779
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
@@ -0,0 +1,60 @@
+import { Message } from "element-ui";
+import { axiosIns } from "@screen/utils/axios/auth.js";
+
+/**
+ *
+ * @param {string} camId 相机 ID
+ * @param {1 | 2 | 3} media 参数说明: 1: http+flv; 2: rtmp; 3: hls
+ * @returns
+ */
+export function getCameraStream(camId, media = 1) {
+  return axiosIns.post("/videoInfo/api/externalVideoStreaming", {
+    type: 1,
+    camId,
+    media,
+  });
+}
+
+/**
+ *  球机进行控制
+ * @param {string} camId 相机 ID
+ * @param {number} cmdType 12 /焦距变⼤(倍率变⼤)/
+11 /焦距变⼩(倍率变⼩)/
+13 /焦点前调/
+14 /焦点后调/
+15 /光圈扩⼤/
+16 /光圈缩⼩/
+21 /云台向上/
+22 /云台向下/
+23 /云台左转/
+24 /云台右转/
+50 /云台左上转/
+51 /云台左下转/
+52 /云台右上转/
+53 /云台右下转/
+8 /设置预置位/
+39 /调⽤预置位/
+49 /辅助开关开、如⾬刷/
+48 /辅助开关关、如⾬刷/
+51 /设置巡航起始点/
+52 /设置巡航结束点/
+53 /开始巡航/
+54 /停⽌巡航/
+(-1) /⾃动⾬刷/
+99 /各⽅向动作停⽌/
+ * @returns
+ */
+export function controlCamera(camId, cmdType) {
+  return axiosIns
+    .post("/videoInfo/api/PTZControl", {
+      msgType: 3,
+      camId,
+      cmdType,
+    })
+    .then((result) => {
+      if (result.code != 200) Message.error(`相机操作失败!`);
+    })
+    .catch((err) => {
+      Message.error(`相机操作失败!`);
+    });
+}
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
new file mode 100644
index 00000000..beefc276
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
@@ -0,0 +1,56 @@
+import { loadAMap } from "@screen/pages/Home/components/AMapContainer/loadAMap.js";
+
+/**
+ * @typedef {Object} Point
+ * @property {number} weight - The weight of the item.
+ * @property {number[]} lngLat - The longitude and latitude coordinates.
+ * @property {string} name - The name of the item.
+ * @property {string} icon - The icon of the item.
+ * @property {Object} extData - The icon of the item.
+ * @property {*} [x] - Additional properties of the item.
+ */
+
+/**
+ * https://lbs.amap.com/api/javascript-api-v2/documentation#markercluster 2.x
+ * https://lbs.amap.com/demo/javascript-api/example/marker/markerclusterer 1.x
+ * @param {*} map
+ * @param {Point[]} points
+ * @param {Marker[]} markers
+ * @param {*} options
+ * @returns
+ */
+export async function setMarkerCluster(map, markers, options) {
+  const AMap = await loadAMap();
+
+  return new AMap.MarkerClusterer(map, markers, {
+    // gridSize: 15,
+    maxZoom: 15,
+    ...options,
+    // 自定义聚合点样式
+    renderClusterMarker(context) {
+      // 聚合中点个数
+      const clusterCount = context.count;
+      const div = document.createElement("div");
+      let bgColor = "204,235,197";
+
+      div.style.backgroundColor = `rgba(${bgColor}, .5)`;
+
+      const size = Math.round(
+        25 + Math.pow(clusterCount / markers.length, 1 / 5) * 36
+      );
+
+      div.style.borderRadius =
+        div.style.lineHeight =
+        div.style.width =
+        div.style.height =
+          `${size}px`;
+      div.style.border = `solid 1px rgba(${bgColor}, 1)`;
+      div.innerHTML = context.count;
+      div.style.color = "#ffffff";
+      div.style.fontSize = "24px";
+      div.style.textAlign = "center";
+      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
+      context.marker.setContent(div);
+    },
+  });
+}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/videoStream.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/videoStream.js
new file mode 100644
index 00000000..ca6630e9
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/videoStream.js
@@ -0,0 +1,47 @@
+import flvJs from "flv.js";
+import { getCameraStream } from "./httpList";
+
+/**
+ *
+ * @param {string} camId 相机ID
+ * @param {HTMLElement} container 容器
+ * @param {DPlayerOptions?} options 配置项
+ * @returns
+ */
+export async function openVideoStream(camId, container) {
+  const { code, data } = await getCameraStream(camId).catch(() => ({}));
+
+  if (code != 200) return;
+
+  const flvPlayer = flvJs.createPlayer({
+    type: "flv",
+    url: data.liveUrl,
+    isLive: true,
+    hasVideo: true,
+    hasAudio: true,
+  });
+
+  console.log(
+    "%c [ flvPlayer ]-26-「videoStream.js」",
+    "font-size:15px; background:#b2b540; color:#f6f984;",
+    flvPlayer
+  );
+
+  flvPlayer.attachMediaElement(container);
+
+  flvPlayer.load();
+  flvPlayer.play();
+
+  return flvPlayer;
+  // return new DPlayer({
+  //   container,
+  //   autoplay: true,
+  //   ...options,
+  //   hotkey: false,
+  //   video: {
+  //     url: data.liveUrl,
+  //     type: "hls",
+  //     // type: "flv",
+  //   },
+  // });
+}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
index 19f0abb4..2b99f57c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
@@ -20,7 +20,8 @@
     <footer class="footer card-menu">
       <div class="footer-title">
         <span>济菏高速缩略图</span>
-        <img src="@screen/images/icon/icon-vector.png" @click.stop="handleShrink" />
+        <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 />
@@ -57,6 +58,10 @@ export default {
     handleShrink(e) {
       const translateXElement = e.target.parentElement.parentElement;
 
+      const result = (e.target.style.transform.match(/[-0-9]+/)?.[0] || -90) * -1
+
+      e.target.style.transform = `rotate(${result}deg)`;
+
       // translateXElement.style.transform = translateXElement.style.transform ? "" : `translateY(calc(100% - 36px))`
       translateXElement.style.height = translateXElement.style.height != "36px" ? "36px" : `100%`
     }
@@ -70,12 +75,12 @@ export default {
   z-index: 6;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 30px;
   padding: 19px 31px 0 25px;
   justify-content: space-between;
 
   .card-menu {
-    transition: all .6s linear;
+    transition: all .24s linear;
   }
 
   .content {
@@ -97,6 +102,8 @@ export default {
       display: flex;
       flex-direction: column;
       gap: 24px;
+      overflow: hidden;
+      height: 100%;
 
       >div {
         pointer-events: all;
@@ -105,6 +112,7 @@ export default {
 
       .content-l-b {
         height: 332px;
+        max-height: 332px;
         flex: 0.81;
       }
     }
@@ -120,6 +128,8 @@ export default {
     pointer-events: none;
     overflow: hidden;
     height: 100%;
+    // height: fit-content;
+    will-change: height;
 
     >div {
       pointer-events: all;
@@ -137,6 +147,10 @@ export default {
       justify-content: center;
       align-items: center;
       overflow: hidden;
+      display: flex;
+      align-items: center;
+
+      gap: 15px;
 
       span {
         font-size: 16px;
@@ -145,13 +159,18 @@ export default {
         color: #2ad9fd;
       }
 
-      img {
-        display: inline-block;
-        margin-left: 11px;
-        width: 16px;
-        height: 13px;
+      i {
+        transition: all .24s linear;
         cursor: pointer;
       }
+
+      // img {
+      //   display: inline-block;
+      //   margin-left: 11px;
+      //   width: 16px;
+      //   height: 13px;
+      //   cursor: pointer;
+      // }
     }
 
     .footer-content {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/utils/common.js b/ruoyi-ui/src/views/JiHeExpressway/utils/common.js
new file mode 100644
index 00000000..b0485ccf
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/utils/common.js
@@ -0,0 +1,3 @@
+export function delay(ms = 240) {
+  return new Promise((resolve) => setTimeout(() => resolve(void 0), ms));
+}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
new file mode 100644
index 00000000..f583188d
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
@@ -0,0 +1,52 @@
+/**
+ * color: 颜色
+ * text: 文字
+ * icon: 展示的图标
+ */
+
+// 相机的状态
+export const CameraStatusEnum = {
+  "-1": {
+    color: "",
+    text: "未启用",
+  },
+  0: {
+    color: "",
+    text: "正常",
+  },
+  1: {
+    color: "",
+    text: "网络中断",
+  },
+  2: {
+    color: "",
+    text: "网络正常无图像",
+  },
+  3: {
+    color: "",
+    text: "有图像, 图像存在问题",
+  },
+};
+
+// 摄像机方向
+export const CameraDirectionEnum = {
+  0: {
+    text: "上行",
+  },
+  1: {
+    text: "下行",
+  },
+  2: {
+    text: "上下行 (双向)",
+  },
+};
+
+// 摄像 是否可控 是否有云台控制 0 有（球机） 1 ⽆（枪机）
+export const CameraControlTypeEnum = {
+  0: {
+    text: "球机",
+  },
+  1: {
+    text: "枪机",
+  },
+};