diff --git a/src/api/MonitorAssetsOnMap.js b/src/api/MonitorAssetsOnMap.js
index 8795d6a..891804d 100644
--- a/src/api/MonitorAssetsOnMap.js
+++ b/src/api/MonitorAssetsOnMap.js
@@ -183,6 +183,16 @@
     params: query,
   });
 }
+
+// 视频单独的弹框菜单
+export function drainageDispatchGetMenuVidoe(query) {
+  return request({
+    url: `/business/drainageMap/getMenu`,
+    method: 'get',
+    params: query,
+  });
+}
+
 // 汇水分区查询关联7类数据  get  id
 export function getWaterRegionData(query) {
   return request({
@@ -380,4 +390,4 @@
     method: 'get',
     params: query,
   });
-}
\ No newline at end of file
+}

diff --git a/src/api/MonitorAssetsOnMap.js b/src/api/MonitorAssetsOnMap.js
index 8795d6a..891804d 100644
--- a/src/api/MonitorAssetsOnMap.js
+++ b/src/api/MonitorAssetsOnMap.js
@@ -183,6 +183,16 @@
     params: query,
   });
 }
+
+// 视频单独的弹框菜单
+export function drainageDispatchGetMenuVidoe(query) {
+  return request({
+    url: `/business/drainageMap/getMenu`,
+    method: 'get',
+    params: query,
+  });
+}
+
 // 汇水分区查询关联7类数据  get  id
 export function getWaterRegionData(query) {
   return request({
@@ -380,4 +390,4 @@
     method: 'get',
     params: query,
   });
-}
\ No newline at end of file
+}
diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue
index 8a8109e..97065bf 100644
--- a/src/components/videoDHone/index.vue
+++ b/src/components/videoDHone/index.vue
@@ -13,7 +13,7 @@
   // 内网、公网 4个配置
   channelId: {
     type: String,
-    default: () => '1000131$1$0$0',
+    default: () => '',
   },
 });
 
@@ -26,16 +26,16 @@
   pluginLoginInfo: {
     // 传入 icc 平台的登录信息
     // 内网端口
-    // host: '172.28.41.16', // icc 平台ip
-    // port: '443', // icc 平台端口 https 默认 443
-    // username: 'sfduijie', // icc 平台用户名
-    // password: 'sfduijie@123', // icc 平台密码
-
-    // 外网端口
-    host: '220.249.115.224', // icc 平台ip
-    port: '1443', // icc 平台端口 https 默认 443
+    host: '172.28.41.16', // icc 平台ip
+    port: '443', // icc 平台端口 https 默认 443
     username: 'sfduijie', // icc 平台用户名
     password: 'sfduijie@123', // icc 平台密码
+
+    // 外网端口
+    // host: '220.249.115.224', // icc 平台ip
+    // port: '1443', // icc 平台端口 https 默认 443
+    // username: 'sfduijie', // icc 平台用户名
+    // password: 'sfduijie@123', // icc 平台密码
   },
 });
 
@@ -77,11 +77,13 @@
     createSuccess: versionInfo => {
       // 该回调触发后，我们可以进行实时预览/录像回放等操作
       // desc.value = '创建成功!!!' + versionInfo.message;
+      console.log('准备进入', AllData.channelId);
       AllData.Getchajian = 1;
       startReal();
     },
     // 创建播放器失败回调
     createError: err => {
+      console.log('错误', JSON.stringify(err));
       // 有错误码，可打印查看错误信息
       // desc.value = '创建失败!!!' + JSON.stringify(err);
       AllData.Getchajian = null;
@@ -158,6 +160,7 @@
 
 // 实时预览
 function startReal() {
+  console.log('开始实时预览', AllData.channelId);
   AllData.myVideoPlayer.startReal([
     // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码) <br />可在ICC平台设备管理页面查看到通道id
     {
@@ -217,7 +220,7 @@
   listConfig(paramas).then(res => {
     AllData.URL = res.data[0].configValue;
 
-    desc.value = `插件启动失败，请检查插件是否安装！
+    desc.value = `插件启动失败，正在重试，请检查插件是否安装！
     <a href=${AllData.URL} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
   });
 }

diff --git a/src/api/MonitorAssetsOnMap.js b/src/api/MonitorAssetsOnMap.js
index 8795d6a..891804d 100644
--- a/src/api/MonitorAssetsOnMap.js
+++ b/src/api/MonitorAssetsOnMap.js
@@ -183,6 +183,16 @@
     params: query,
   });
 }
+
+// 视频单独的弹框菜单
+export function drainageDispatchGetMenuVidoe(query) {
+  return request({
+    url: `/business/drainageMap/getMenu`,
+    method: 'get',
+    params: query,
+  });
+}
+
 // 汇水分区查询关联7类数据  get  id
 export function getWaterRegionData(query) {
   return request({
@@ -380,4 +390,4 @@
     method: 'get',
     params: query,
   });
-}
\ No newline at end of file
+}
diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue
index 8a8109e..97065bf 100644
--- a/src/components/videoDHone/index.vue
+++ b/src/components/videoDHone/index.vue
@@ -13,7 +13,7 @@
   // 内网、公网 4个配置
   channelId: {
     type: String,
-    default: () => '1000131$1$0$0',
+    default: () => '',
   },
 });
 
@@ -26,16 +26,16 @@
   pluginLoginInfo: {
     // 传入 icc 平台的登录信息
     // 内网端口
-    // host: '172.28.41.16', // icc 平台ip
-    // port: '443', // icc 平台端口 https 默认 443
-    // username: 'sfduijie', // icc 平台用户名
-    // password: 'sfduijie@123', // icc 平台密码
-
-    // 外网端口
-    host: '220.249.115.224', // icc 平台ip
-    port: '1443', // icc 平台端口 https 默认 443
+    host: '172.28.41.16', // icc 平台ip
+    port: '443', // icc 平台端口 https 默认 443
     username: 'sfduijie', // icc 平台用户名
     password: 'sfduijie@123', // icc 平台密码
+
+    // 外网端口
+    // host: '220.249.115.224', // icc 平台ip
+    // port: '1443', // icc 平台端口 https 默认 443
+    // username: 'sfduijie', // icc 平台用户名
+    // password: 'sfduijie@123', // icc 平台密码
   },
 });
 
@@ -77,11 +77,13 @@
     createSuccess: versionInfo => {
       // 该回调触发后，我们可以进行实时预览/录像回放等操作
       // desc.value = '创建成功!!!' + versionInfo.message;
+      console.log('准备进入', AllData.channelId);
       AllData.Getchajian = 1;
       startReal();
     },
     // 创建播放器失败回调
     createError: err => {
+      console.log('错误', JSON.stringify(err));
       // 有错误码，可打印查看错误信息
       // desc.value = '创建失败!!!' + JSON.stringify(err);
       AllData.Getchajian = null;
@@ -158,6 +160,7 @@
 
 // 实时预览
 function startReal() {
+  console.log('开始实时预览', AllData.channelId);
   AllData.myVideoPlayer.startReal([
     // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码) <br />可在ICC平台设备管理页面查看到通道id
     {
@@ -217,7 +220,7 @@
   listConfig(paramas).then(res => {
     AllData.URL = res.data[0].configValue;
 
-    desc.value = `插件启动失败，请检查插件是否安装！
+    desc.value = `插件启动失败，正在重试，请检查插件是否安装！
     <a href=${AllData.URL} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
   });
 }
diff --git a/src/views/pictureOnMap/index.vue b/src/views/pictureOnMap/index.vue
index 4b84aaf..cfbc3ac 100644
--- a/src/views/pictureOnMap/index.vue
+++ b/src/views/pictureOnMap/index.vue
@@ -2,11 +2,7 @@
   <div class="pictureOnMap">
     <TopTab />
     <div class="mainContentBox">
-      <MapBox
-        :initJson="`/static/libs/mapbox/style/wh_dhgx.json`"
-        :loadCallback="loadCallback"
-        @mapClick1="mapClick1"
-      ></MapBox>
+      <MapBox :initJson="`/static/libs/mapbox/style/wh_dhgx.json`" :loadCallback="loadCallback" @mapClick1="mapClick1"></MapBox>
       <router-view></router-view>
       <recordPage></recordPage>
       <LayerControl></LayerControl>
@@ -32,6 +28,7 @@
         :title="dialogConfig.title"
         :arrstcode="arrstcode"
         :arrid="arrid"
+        :videoList="videoList"
         :Getproperties="Getproperties"
         :Getmenuarr="Getmenuarr"
         @closeFun="closeFun"
@@ -40,23 +37,23 @@
   </div>
 </template>
 <script setup>
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router';
 
-import line from "../../../public/static/libs/mapbox/json/line.json";
-import point from "../../../public/static/libs/mapbox/json/point.json";
-import { ref, reactive, onMounted, nextTick } from "vue";
-import TopTab from "./TopTab/index.vue";
-import MapBox from "../../components/Map/MapBox";
-import bus from "@/bus";
-import useUserStore from "@/store/modules/user";
-import DialogTabs from "@/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue";
-import { drainageDispatchGetMenu } from "@/api/MonitorAssetsOnMap";
-import recordPage from "@/views/voice/recordPage/index";
-import usepartitionStore from "@/store/modules/partition";
+import line from '../../../public/static/libs/mapbox/json/line.json';
+import point from '../../../public/static/libs/mapbox/json/point.json';
+import { ref, reactive, onMounted, nextTick } from 'vue';
+import TopTab from './TopTab/index.vue';
+import MapBox from '../../components/Map/MapBox';
+import bus from '@/bus';
+import useUserStore from '@/store/modules/user';
+import DialogTabs from '@/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue';
+import { drainageDispatchGetMenu, drainageDispatchGetMenuVidoe } from '@/api/MonitorAssetsOnMap';
+import recordPage from '@/views/voice/recordPage/index';
+import usepartitionStore from '@/store/modules/partition';
 
-import LayerControl from "@/views/pictureOnMap/LayerControl.vue";
-import inputSearch from "@/views/pictureOnMap/inputSearch.vue";
-import { FALSE } from "ol/functions";
+import LayerControl from '@/views/pictureOnMap/LayerControl.vue';
+import inputSearch from '@/views/pictureOnMap/inputSearch.vue';
+import { FALSE } from 'ol/functions';
 
 const useStore = usepartitionStore();
 const router = useRouter();
@@ -69,14 +66,14 @@
 const GetcomIDs = ref([]);
 const dialogConfig = reactive({
   visible: false,
-  dataID: "",
-  dataCode: "",
+  dataID: '',
+  dataCode: '',
   data: {},
   comIDs: [],
   customData: [],
-  RefName: "",
-  title: "详情",
-  typeName: "",
+  RefName: '',
+  title: '详情',
+  typeName: '',
 });
 const closediaMeth = () => {
   dialogConfig.visible = false;
@@ -84,89 +81,91 @@
 // 站点数组
 const arrstcode = ref([
   // 站点类型名称: 编码
-  "outlet_water_level", // 排口流量
-  "outlet_quality", // 排口水质
-  "channel_quality", // 港渠水质
-  "channel_water_level", // 港渠水位
-  "lake_water_level", // 湖泊水位
-  "waterlogging", // 渍水监测点（注意：这里编码没有后缀，可能是特例或故意为之）
-  "rain", // 雨量站
-  "rainwater_pipeline_quality", // 雨水管网水质
-  "rainwater_pipeline_quality_city", // 雨水管网水质
-  "sewage_pipeline_quality", // 污水管网水质
-  "sewage_pipeline_quality_city", // 污水管网水质
-  "rainwater_pipeline_quality_area", // 接驳口
-  "rainwater_pipeline_water_level", // 雨水管网液位
-  "reservoir_water_level", //水库水位
-  "rainPumpStation", //雨水泵站
-  "dirtyPumpStation", //污水泵站
-  "sewageStation", //污水厂
-  "gateStation", //闸门
-  "pump_water_level", //泵站液位
-  "outlet_water_level_city", //排口流量
+  'outlet_water_level', // 排口流量
+  'outlet_quality', // 排口水质
+  'channel_quality', // 港渠水质
+  'channel_water_level', // 港渠水位
+  'lake_water_level', // 湖泊水位
+  'waterlogging', // 渍水监测点（注意：这里编码没有后缀，可能是特例或故意为之）
+  'rain', // 雨量站
+  'rainwater_pipeline_quality', // 雨水管网水质
+  'rainwater_pipeline_quality_city', // 雨水管网水质
+  'sewage_pipeline_quality', // 污水管网水质
+  'sewage_pipeline_quality_city', // 污水管网水质
+  'rainwater_pipeline_quality_area', // 接驳口
+  'rainwater_pipeline_water_level', // 雨水管网液位
+  'reservoir_water_level', //水库水位
+  'rainPumpStation', //雨水泵站
+  'dirtyPumpStation', //污水泵站
+  'sewageStation', //污水厂
+  'gateStation', //闸门
+  'pump_water_level', //泵站液位
+  'outlet_water_level_city', //排口流量
 ]);
 // 基本数据
 const arrid = ref([
-  "diversion_well_info", // 分流井
-  "drainage_info", // 排水户
-  "lake_info", // 湖泊
-  "outlet_info", // 排口
-  "port_channel_info", // 港渠
-  "rain_water_pump_station_info", // 雨水泵站
-  "region_info", // 分区信息
-  "reservoir_info", // 水库
-  "sewage_factory_info", // 污水处理厂
-  "sewage_factory_station_info", //污水处理站
-  "sewage_pump_station_info", // 污水泵站
-  "storage_tank_info", // 调蓄池
-  "water_gate_info", // 水闸
-  "waterlogging_point_info", // 渍水点
-  "water_region_info", // 水系汇水分区
-  "storehouse", //物资仓库
-  "dikeGood", //堤防备料
+  'diversion_well_info', // 分流井
+  'drainage_info', // 排水户
+  'lake_info', // 湖泊
+  'outlet_info', // 排口
+  'port_channel_info', // 港渠
+  'rain_water_pump_station_info', // 雨水泵站
+  'region_info', // 分区信息
+  'reservoir_info', // 水库
+  'sewage_factory_info', // 污水处理厂
+  'sewage_factory_station_info', //污水处理站
+  'sewage_pump_station_info', // 污水泵站
+  'storage_tank_info', // 调蓄池
+  'water_gate_info', // 水闸
+  'waterlogging_point_info', // 渍水点
+  'water_region_info', // 水系汇水分区
+  'storehouse', //物资仓库
+  'dikeGood', //堤防备料
+]);
+// 视频点
+const videoList = ref([
+  'gangqu_video', // 港渠视频
+  'water_logging_video', // 渍水点视频
+  'pump_video', // 泵站视频
 ]);
 // 基础数据
 const switchStcode = (Name, type) => {
-  if (type == "outlet_info") {
+  if (type == 'outlet_info') {
     pkClick(Getproperties.value);
   }
-  console.log("GetcomIDs.value", GetcomIDs.value);
+  console.log('GetcomIDs.value', GetcomIDs.value);
   // 去除排水体系泵站通用弹框,通过ReturnPSTX来判断是否不打开公共弹窗
-  console.log("arrid.value", arrid.value);
+  console.log('arrid.value', arrid.value);
   // debugger;
   if (
-    (type == "rain_water_pump_station_info" || type == "sewage_pump_station_info") &&
-    router.currentRoute.value.fullPath == "/DrainageSystem" &&
-    localStorage.getItem("ReturnPSTX") == "off"
+    (type == 'rain_water_pump_station_info' || type == 'sewage_pump_station_info') &&
+    router.currentRoute.value.fullPath == '/DrainageSystem' &&
+    localStorage.getItem('ReturnPSTX') == 'off'
   ) {
     // 使用一次后恢复默认值:false
-    localStorage.setItem("ReturnPSTX", "off"); //On打开公共弹窗 off不打开公共弹窗  默认为On
+    localStorage.setItem('ReturnPSTX', 'off'); //On打开公共弹窗 off不打开公共弹窗  默认为On
     return;
   }
 
   // 使用一次后恢复默认值:false
-  localStorage.setItem("ReturnPSTX", "off"); //On打开公共弹窗 off不打开公共弹窗  默认为On
+  localStorage.setItem('ReturnPSTX', 'off'); //On打开公共弹窗 off不打开公共弹窗  默认为On
   if (arrid.value.includes(type)) {
     dialogConfig.visible = true;
     dialogConfig.dataCode = type;
     dialogConfig.comIDs = GetcomIDs.value;
-    dialogConfig.dataID = Getproperties.value.pid
-      ? Getproperties.value.pid
-      : Getproperties.value.id;
+    dialogConfig.dataID = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
   } else {
     return;
   }
 };
 // 类型弹框判断
-const typecodeswitch = (type) => {
+const typecodeswitch = type => {
   if (diabox[type]) {
     // console.log('diabox[type]', diabox[type]);
-    window[type + "_map"] = diabox[type]
-      .filter((i) => i.geometry)
+    window[type + '_map'] = diabox[type]
+      .filter(i => i.geometry)
       .map((item, index) => {
-        let coordinates = turf.getCoords(
-          turf.center(Terraformer.WKT.parse(item.geometry))
-        );
+        let coordinates = turf.getCoords(turf.center(Terraformer.WKT.parse(item.geometry)));
         const popup = new mapboxgl1.Popup({
           closeButton: false,
           closeOnClick: false,
@@ -180,7 +179,7 @@
       });
 
     nextTick(() => {
-      window[type + "_map"].forEach((i) => i._setOpacity(0));
+      window[type + '_map'].forEach(i => i._setOpacity(0));
     });
   }
 };
@@ -188,7 +187,7 @@
   let typearr = [];
   for (var k in diabox) {
     typearr.push(k);
-    appStore.MapData.map((item) => {
+    appStore.MapData.map(item => {
       if (item.pointType == k) {
         diabox[k] = item.data;
       }
@@ -213,53 +212,78 @@
   }
 };
 // 智慧水务大脑一张图 特定大屏动态菜单
-const specificFun = (type) => {
+const specificFun = type => {
   // 监测预警模块弹框
   // value值 统一菜单类型
   //name值 特指智慧水务大脑获取的动态菜单类型
   let arr = [
     {
-      name: "dp_zsfx", //渍水点
-      value: "waterlogging",
+      name: 'dp_zsfx', //渍水点
+      value: 'waterlogging',
     },
     {
-      name: "dp_hhsq", //河湖水情
-      value: "lake_water_level",
+      name: 'dp_hhsq', //河湖水情
+      value: 'lake_water_level',
     },
     {
-      name: "dp_bzgq", //泵站工情
-      value: "rainPumpStation", //雨水泵站
+      name: 'dp_bzgq', //泵站工情
+      value: 'rainPumpStation', //雨水泵站
     },
     {
-      name: "dp_gwfx", //管网风险
-      value: "rainwater_pipeline_water_level", //雨水管网液位
+      name: 'dp_gwfx', //管网风险
+      value: 'rainwater_pipeline_water_level', //雨水管网液位
     },
     {
-      name: "dp_gwfx", //管网风险
-      value: "rainwater_pipeline_quality", //雨水管网水质
+      name: 'dp_gwfx', //管网风险
+      value: 'rainwater_pipeline_quality', //雨水管网水质
     },
     {
-      name: "dp_gwfx", //接驳口
-      value: "rainwater_pipeline_quality_area", //接驳口
+      name: 'dp_gwfx', //接驳口
+      value: 'rainwater_pipeline_quality_area', //接驳口
     },
     {
-      name: "dp_wsgwfx", //大屏污水管网风险分析弹框
-      value: "sewage_pipeline_quality", //雨水管网水质
+      name: 'dp_wsgwfx', //大屏污水管网风险分析弹框
+      value: 'sewage_pipeline_quality', //雨水管网水质
     },
     // {
     //   name: "dp_ysgwfx", //大屏雨水管网风险分析弹框
     //   value: "rainwater_pipeline_quality", //雨水管网水质
     // },
   ];
-  return arr.find((item) => item.value == type)?.name || null;
+  return arr.find(item => item.value == type)?.name || null;
 };
 
 // 获取动态弹框菜单
 const GetBoxmenu = (Name, type) => {
-  console.log("name", Name);
-  console.log("type", type);
+  console.log('name', Name);
+  console.log('type', type);
   GetcomIDs.value = [];
-  let dataId = "";
+  let dataId = '';
+
+  if (videoList.value.includes(type)) {
+    // 视频单独的获取菜单的
+    let params = {
+      dataCode: type,
+      scene: 'basis_monitor',
+    };
+    drainageDispatchGetMenuVidoe(params).then(res => {
+      console.log('获得的菜单', res.data);
+      Getmenuarr.value = res.data;
+      if (res.data && res.data.length) {
+        res.data.map(item => {
+          GetcomIDs.value.push(item.moduleName);
+        });
+      }
+
+      dialogConfig.visible = true;
+      dialogConfig.dataCode = type;
+      dialogConfig.dataID = Getproperties.value.stCode;
+      dialogConfig.comIDs = GetcomIDs.value;
+    });
+
+    return;
+  }
+
   if (arrstcode.value.includes(type)) {
     dataId = Getproperties.value.stCode;
   }
@@ -267,42 +291,43 @@
   if (arrid.value.includes(type)) {
     dataId = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
   }
-  console.log("dataId", dataId);
+
+  console.log('dataId', dataId);
   if (!dataId) {
     //渍水调度
-    if (type == "waterlog_point") {
-      bus.emit("showZSdispatch", Getproperties.value);
+    if (type == 'waterlog_point') {
+      bus.emit('showZSdispatch', Getproperties.value);
     }
     // proxy.$modal.msgSuccess('');
     return;
   }
   // debugger;
   // 没有注释 不理解前面的代码意义,只能在这里写死
-  if (type == "rainwater_pipeline_quality_area") {
-    type = "rainwater_pipeline_quality";
-    dialogConfig.RefName = "jiancefenxiGWFX";
+  if (type == 'rainwater_pipeline_quality_area') {
+    type = 'rainwater_pipeline_quality';
+    dialogConfig.RefName = 'jiancefenxiGWFX';
   }
-  if (type == "outlet_water_level_city") {
-    type = "outlet_water_level";
+  if (type == 'outlet_water_level_city') {
+    type = 'outlet_water_level';
   }
-  if (type == "rainwater_pipeline_quality_city") {
-    type = "rainwater_pipeline_quality";
+  if (type == 'rainwater_pipeline_quality_city') {
+    type = 'rainwater_pipeline_quality';
   }
-  if (type == "sewage_pipeline_quality_city") {
-    type = "sewage_pipeline_quality";
+  if (type == 'sewage_pipeline_quality_city') {
+    type = 'sewage_pipeline_quality';
   }
 
   let params = {
     dataCode: type,
-    scene: specificFun(type) || "basis_monitor",
+    scene: specificFun(type) || 'basis_monitor',
     // scene: "basis_monitor",
     dataId: dataId,
   };
-  drainageDispatchGetMenu(params).then((res) => {
-    console.log("获得的菜单", res.data);
+  drainageDispatchGetMenu(params).then(res => {
+    console.log('获得的菜单', res.data);
     Getmenuarr.value = res.data;
     if (res.data && res.data.length) {
-      res.data.map((item) => {
+      res.data.map(item => {
         GetcomIDs.value.push(item.moduleName);
       });
     }
@@ -317,132 +342,117 @@
 const pointandlineOpen = (type, properties) => {
   dialogConfig.visible = true;
   switch (type) {
-    case "pipeline_info_text":
-      dialogConfig.title = "管线信息";
+    case 'pipeline_info_text':
+      dialogConfig.title = '管线信息';
       break;
-    case "pipeline_info":
-      dialogConfig.title = "管线信息";
+    case 'pipeline_info':
+      dialogConfig.title = '管线信息';
       break;
-    case "pipeline_point":
-      dialogConfig.title = "管点信息";
+    case 'pipeline_point':
+      dialogConfig.title = '管点信息';
       break;
-    case "point":
-      dialogConfig.title = "问题管线";
+    case 'point':
+      dialogConfig.title = '问题管线';
       break;
   }
 
   Getmenuarr.value = [
     {
-      menuName: "管网信息",
+      menuName: '管网信息',
       show: true,
-      moduleName: "PointAndLine",
+      moduleName: 'PointAndLine',
     },
   ];
   // debugger;
   // dialogConfig.dataID = '0371000003';
-  dialogConfig.comIDs = ["PointAndLine"];
-  dialogConfig.RefName = "PointAndLine";
+  dialogConfig.comIDs = ['PointAndLine'];
+  dialogConfig.RefName = 'PointAndLine';
 };
 const loadCallback = () => {};
 // 排口溯源
-const pkClick = async (properties) => {
+const pkClick = async properties => {
   // debugger;
   if (!properties.wellCode) return;
   let results = await upStreamAnalyse({ endPointNumber: properties.wellCode });
   let pipelines = results.data.pipelineInfoList
-    .map((i) =>
+    .map(i =>
       turf.feature(Terraformer.WKT.parse(i.geometrys), {
         ...i,
-        area: i.pipelineType == "Rain" ? "雨水" : "污水",
+        area: i.pipelineType == 'Rain' ? '雨水' : '污水',
       })
     )
-    .map((i) =>
-      i.properties.flowDirection == 0
-        ? turf.lineString(turf.getCoords(i).reverse(), i.properties)
-        : i
-    );
+    .map(i => (i.properties.flowDirection == 0 ? turf.lineString(turf.getCoords(i).reverse(), i.properties) : i));
   newfiberMap
     .getLayers()
-    .filter((i) => i.newfiberId == "水系流向")[0]
+    .filter(i => i.newfiberId == '水系流向')[0]
     .getSource()
     .setData(turf.featureCollection(pipelines));
 };
 
-const a = (properties) => {
-  const keys_ = ["雨水", "污水"];
-  const keys = ["1_泵站", "1_污水处理厂", "分区流向", "分区流向1"];
-  bus.emit("removeMapDatas", keys);
+const a = properties => {
+  const keys_ = ['雨水', '污水'];
+  const keys = ['1_泵站', '1_污水处理厂', '分区流向', '分区流向1'];
+  bus.emit('removeMapDatas', keys);
   newfiberMap
     .getLayers()
-    .filter((i) => i.newfiberId == keys[3])[0]
+    .filter(i => i.newfiberId == keys[3])[0]
     .getSource()
     .setData(turf.featureCollection([]));
   const key = properties.c_layer.includes(keys_[0]) ? keys_[0] : keys_[1];
   const nameKey = properties.name.substring(0, 2);
-  let features = line.features.filter(
-    (i) => i.properties.area.includes(key) && i.properties.name.includes(nameKey)
-  );
-  let features1 = point.features.filter(
-    (i) => i.properties.area.includes(key) && i.properties.system.includes(nameKey)
-  );
-  let points = _.groupBy(features1, (a) => a.properties.type);
-  features.forEach((i) => {
+  let features = line.features.filter(i => i.properties.area.includes(key) && i.properties.name.includes(nameKey));
+  let features1 = point.features.filter(i => i.properties.area.includes(key) && i.properties.system.includes(nameKey));
+  let points = _.groupBy(features1, a => a.properties.type);
+  features.forEach(i => {
     i.properties.type = keys[2];
-    i.properties.color = key == keys_[0] ? "rgba(21,127,176,1)" : "rgba(255,0,0,1)";
+    i.properties.color = key == keys_[0] ? 'rgba(21,127,176,1)' : 'rgba(255,0,0,1)';
   });
-  Object.keys(points).map((key) =>
-    bus.emit("setGeoJSON", {
+  Object.keys(points).map(key =>
+    bus.emit('setGeoJSON', {
       json: turf.featureCollection(
-        points[key].map((i) => ({
+        points[key].map(i => ({
           type: i.type,
           geometry: i.geometry,
-          properties: { ...i.properties, type: "1_" + key },
+          properties: { ...i.properties, type: '1_' + key },
         }))
       ),
-      key: "1_" + key,
+      key: '1_' + key,
     })
   );
-  bus.emit("setGeoJSON", { json: turf.featureCollection(features), key: keys[2] });
+  bus.emit('setGeoJSON', { json: turf.featureCollection(features), key: keys[2] });
   newfiberMap
     .getLayers()
-    .filter((i) => i.newfiberId == keys[3])[0]
+    .filter(i => i.newfiberId == keys[3])[0]
     .getSource()
     .setData(turf.featureCollection(features));
 };
 
 const mapClick1 = (lngLat, properties = {}, layerId) => {
-  console.log("经纬度", lngLat);
-  console.log("数据", properties);
-  console.log("layerid", layerId);
+  console.log('经纬度', lngLat);
+  console.log('数据', properties);
+  console.log('layerid', layerId);
   dialogConfig.title = properties.stName || properties.name;
 
   // 处理标注
   Getproperties.value = properties;
-  let type = properties ? properties.type : "" || 1;
-  let Name = properties ? properties.pointTypeName : "" || "";
+  let type = properties ? properties.type : '' || 1;
+  let Name = properties ? properties.pointTypeName : '' || '';
   // Annotation(properties);
-  console.log("1111", type, layerId);
-  if (properties.layer == "排水分区") {
+  console.log('1111', type, layerId);
+  if (properties.layer == '排水分区') {
     return;
   }
-  let layerIdarr = [
-    "湖泊",
-    "湖泊_text",
-    "港渠",
-    "港渠_text",
-    "水库管理范围",
-    "水库管理范围_text",
-  ];
+  let layerIdarr = ['湖泊', '湖泊_text', '港渠', '港渠_text', '水库管理范围', '水库管理范围_text'];
   let newsetarr = [
-    { name: "湖泊", value: "lake_info" },
-    { name: "湖泊_text", value: "lake_info" },
-    { name: "港渠", value: "port_channel_info" },
-    { name: "港渠_text", value: "port_channel_info" },
-    { name: "水库管理范围", value: "reservoir_info" },
-    { name: "水库管理范围_text", value: "reservoir_info" },
+    { name: '湖泊', value: 'lake_info' },
+    { name: '湖泊_text', value: 'lake_info' },
+    { name: '港渠', value: 'port_channel_info' },
+    { name: '港渠_text', value: 'port_channel_info' },
+    { name: '水库管理范围', value: 'reservoir_info' },
+    { name: '水库管理范围_text', value: 'reservoir_info' },
   ];
   if (layerIdarr.includes(layerId)) {
-    type = newsetarr.find((item) => {
+    type = newsetarr.find(item => {
       return layerId == item.name;
     }).value;
     GetBoxmenu(layerId, type);
@@ -450,15 +460,15 @@
     return;
   }
 
-  let arr = ["pipeline_point", "pipeline_info", "pipeline_info_text"];
+  let arr = ['pipeline_point', 'pipeline_info', 'pipeline_info_text'];
 
   if (arr.includes(layerId)) {
-    console.log("进了方法");
+    console.log('进了方法');
     pointandlineOpen(layerId);
     dialogConfig.dataCode = layerId;
-  } else if (properties.type && properties.type == "问题管线") {
-    pointandlineOpen("point");
-    dialogConfig.dataCode = "point";
+  } else if (properties.type && properties.type == '问题管线') {
+    pointandlineOpen('point');
+    dialogConfig.dataCode = 'point';
   } else {
     if (type) {
       GetBoxmenu(Name, type);
@@ -468,30 +478,27 @@
 
 // 根据类型处理接口返回的标注内容
 const AnnotationArr = ref([]);
-const StringName = ref("");
-const Annotation = (properties) => {
+const StringName = ref('');
+const Annotation = properties => {
   if (properties.siteData && properties.siteData.length) {
     let arr = JSON.parse(properties.siteData);
     AnnotationArr.value = arr;
-    console.log("数据", arr);
-    let string = "";
+    console.log('数据', arr);
+    let string = '';
 
     switch (properties.type) {
-      case "rain":
-        AnnotationArr.value = [
-          { valueName: "监测时间", value: properties.recordTime },
-          ...arr,
-        ];
+      case 'rain':
+        AnnotationArr.value = [{ valueName: '监测时间', value: properties.recordTime }, ...arr];
         break;
     }
     string = Methtion(string);
-    console.log("数据", string);
+    console.log('数据', string);
   }
 };
 
-const Methtion = (StringName) => {
+const Methtion = StringName => {
   if (AnnotationArr.value.length) {
-    AnnotationArr.value.map((item) => {
+    AnnotationArr.value.map(item => {
       StringName += `${item.valueName}:${item.value}+'/n' `;
     });
     return StringName;
@@ -508,7 +515,7 @@
     domElement.webkitRequestFullScreen();
   }
 };
-const closeFun = (is) => {
+const closeFun = is => {
   dialogConfig.visible = is;
 };
 function anotherMeht(item) {
@@ -519,10 +526,10 @@
   Getproperties.value.wellCode = item.wellCode || item.dataName || item.pipeLine;
   Getproperties.value.id = item.id;
   Getproperties.value.gwMonitorId = item.gwMonitorId || item.id; //管网坡面
-  Getproperties.value.dataId = item.dataId || "";
+  Getproperties.value.dataId = item.dataId || '';
   Getproperties.value.stType = item.stType;
 
-  Getproperties.value.geometry = item.geometry || item.geometrys || "";
+  Getproperties.value.geometry = item.geometry || item.geometrys || '';
   // Terraformer.WKT.convert(turf.point(item.lonLat.split(",").map(Number)).geometry);
 
   Getproperties.value.waterRegionCode = item.lakeCode || item.waterRegionCode; //河湖水情  查询水系分区详情
@@ -532,7 +539,7 @@
   } else {
     Getproperties.value.daterange = null;
   }
-  console.log("Getproperties", Getproperties.value);
+  console.log('Getproperties', Getproperties.value);
   if (arrstcode.value.includes(item.stType)) {
     properties.stCode = item.stCode;
   }
@@ -540,15 +547,15 @@
   if (arrid.value.includes(item.stType)) {
     properties.id = item.pid || item.id;
   }
-  GetBoxmenu("", item.stType);
+  GetBoxmenu('', item.stType);
 }
 
 onMounted(() => {
   allScreen();
   useStore.getsewageData();
-  bus.on("DynamicBus", (item) => {
-    console.log("item", item);
-    dialogConfig.RefName = item.RefName || "";
+  bus.on('DynamicBus', item => {
+    console.log('item', item);
+    dialogConfig.RefName = item.RefName || '';
     dialogConfig.title = item.stName || item.name;
     // debugger;
     if (!!!item.NoPromise) {
@@ -561,24 +568,23 @@
       dialogConfig.dataID = item.pid ? item.pid : item.id;
       Getproperties.value.stCode = item.stCode;
       Getproperties.value.dataCode = item.dataCode;
-      Getproperties.value.wellcode =
-        item.wellCode || item.dataName || item.startPointNumber;
+      Getproperties.value.wellcode = item.wellCode || item.dataName || item.startPointNumber;
       Getproperties.value.id = item.relationId || item.id; //item.relationId监测告警的普通id
-      Getproperties.value.dataId = item.dataId || "";
+      Getproperties.value.dataId = item.dataId || '';
       Getproperties.value.stType = item.stType;
       Getproperties.value.geometry = item.geometry || item.geometrys;
       dialogConfig.visible = true;
     }
   });
-  bus.on("closedia", (e) => {
+  bus.on('closedia', e => {
     closediaMeth();
   });
-  bus.on("changeData", (e) => {
+  bus.on('changeData', e => {
     // switchArr();
   });
   // 部分公共弹窗需要使用一个查询时间,目前不确定后期有没有人使用同类型的弹窗,在此初始化,增加公共弹窗的兼容性
   // localStorage.setItem("JCFXDialogTimer", moment().format("YYYY-MM-DD"));
-  bus.on("xiaofeifei", (e) => {
+  bus.on('xiaofeifei', e => {
     // lngLat, properties = {}, layerId
 
     mapClick1(e.geometry.coordinates, e.properties, e.geometry.type);
@@ -586,18 +592,18 @@
 });
 
 onBeforeUnmount(() => {
-  bus.off("DynamicBus");
-  bus.off("closedia");
-  bus.off("changeData");
-  bus.off("xiaofeifei");
+  bus.off('DynamicBus');
+  bus.off('closedia');
+  bus.off('changeData');
+  bus.off('xiaofeifei');
 });
 </script>
 <style lang="scss">
-@import "@/assets/styles/pictureOnMap.scss";
+@import '@/assets/styles/pictureOnMap.scss';
 .pictureOnMap {
   width: 100%;
   height: 100%;
-  background: url("@/assets/images/pictureOnMap/maxBgc.png") no-repeat center;
+  background: url('@/assets/images/pictureOnMap/maxBgc.png') no-repeat center;
   background-size: 100% 100%;
   color: #fff;
   overflow: hidden;

diff --git a/src/api/MonitorAssetsOnMap.js b/src/api/MonitorAssetsOnMap.js
index 8795d6a..891804d 100644
--- a/src/api/MonitorAssetsOnMap.js
+++ b/src/api/MonitorAssetsOnMap.js
@@ -183,6 +183,16 @@
     params: query,
   });
 }
+
+// 视频单独的弹框菜单
+export function drainageDispatchGetMenuVidoe(query) {
+  return request({
+    url: `/business/drainageMap/getMenu`,
+    method: 'get',
+    params: query,
+  });
+}
+
 // 汇水分区查询关联7类数据  get  id
 export function getWaterRegionData(query) {
   return request({
@@ -380,4 +390,4 @@
     method: 'get',
     params: query,
   });
-}
\ No newline at end of file
+}
diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue
index 8a8109e..97065bf 100644
--- a/src/components/videoDHone/index.vue
+++ b/src/components/videoDHone/index.vue
@@ -13,7 +13,7 @@
   // 内网、公网 4个配置
   channelId: {
     type: String,
-    default: () => '1000131$1$0$0',
+    default: () => '',
   },
 });
 
@@ -26,16 +26,16 @@
   pluginLoginInfo: {
     // 传入 icc 平台的登录信息
     // 内网端口
-    // host: '172.28.41.16', // icc 平台ip
-    // port: '443', // icc 平台端口 https 默认 443
-    // username: 'sfduijie', // icc 平台用户名
-    // password: 'sfduijie@123', // icc 平台密码
-
-    // 外网端口
-    host: '220.249.115.224', // icc 平台ip
-    port: '1443', // icc 平台端口 https 默认 443
+    host: '172.28.41.16', // icc 平台ip
+    port: '443', // icc 平台端口 https 默认 443
     username: 'sfduijie', // icc 平台用户名
     password: 'sfduijie@123', // icc 平台密码
+
+    // 外网端口
+    // host: '220.249.115.224', // icc 平台ip
+    // port: '1443', // icc 平台端口 https 默认 443
+    // username: 'sfduijie', // icc 平台用户名
+    // password: 'sfduijie@123', // icc 平台密码
   },
 });
 
@@ -77,11 +77,13 @@
     createSuccess: versionInfo => {
       // 该回调触发后，我们可以进行实时预览/录像回放等操作
       // desc.value = '创建成功!!!' + versionInfo.message;
+      console.log('准备进入', AllData.channelId);
       AllData.Getchajian = 1;
       startReal();
     },
     // 创建播放器失败回调
     createError: err => {
+      console.log('错误', JSON.stringify(err));
       // 有错误码，可打印查看错误信息
       // desc.value = '创建失败!!!' + JSON.stringify(err);
       AllData.Getchajian = null;
@@ -158,6 +160,7 @@
 
 // 实时预览
 function startReal() {
+  console.log('开始实时预览', AllData.channelId);
   AllData.myVideoPlayer.startReal([
     // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码) <br />可在ICC平台设备管理页面查看到通道id
     {
@@ -217,7 +220,7 @@
   listConfig(paramas).then(res => {
     AllData.URL = res.data[0].configValue;
 
-    desc.value = `插件启动失败，请检查插件是否安装！
+    desc.value = `插件启动失败，正在重试，请检查插件是否安装！
     <a href=${AllData.URL} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
   });
 }
diff --git a/src/views/pictureOnMap/index.vue b/src/views/pictureOnMap/index.vue
index 4b84aaf..cfbc3ac 100644
--- a/src/views/pictureOnMap/index.vue
+++ b/src/views/pictureOnMap/index.vue
@@ -2,11 +2,7 @@
   <div class="pictureOnMap">
     <TopTab />
     <div class="mainContentBox">
-      <MapBox
-        :initJson="`/static/libs/mapbox/style/wh_dhgx.json`"
-        :loadCallback="loadCallback"
-        @mapClick1="mapClick1"
-      ></MapBox>
+      <MapBox :initJson="`/static/libs/mapbox/style/wh_dhgx.json`" :loadCallback="loadCallback" @mapClick1="mapClick1"></MapBox>
       <router-view></router-view>
       <recordPage></recordPage>
       <LayerControl></LayerControl>
@@ -32,6 +28,7 @@
         :title="dialogConfig.title"
         :arrstcode="arrstcode"
         :arrid="arrid"
+        :videoList="videoList"
         :Getproperties="Getproperties"
         :Getmenuarr="Getmenuarr"
         @closeFun="closeFun"
@@ -40,23 +37,23 @@
   </div>
 </template>
 <script setup>
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router';
 
-import line from "../../../public/static/libs/mapbox/json/line.json";
-import point from "../../../public/static/libs/mapbox/json/point.json";
-import { ref, reactive, onMounted, nextTick } from "vue";
-import TopTab from "./TopTab/index.vue";
-import MapBox from "../../components/Map/MapBox";
-import bus from "@/bus";
-import useUserStore from "@/store/modules/user";
-import DialogTabs from "@/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue";
-import { drainageDispatchGetMenu } from "@/api/MonitorAssetsOnMap";
-import recordPage from "@/views/voice/recordPage/index";
-import usepartitionStore from "@/store/modules/partition";
+import line from '../../../public/static/libs/mapbox/json/line.json';
+import point from '../../../public/static/libs/mapbox/json/point.json';
+import { ref, reactive, onMounted, nextTick } from 'vue';
+import TopTab from './TopTab/index.vue';
+import MapBox from '../../components/Map/MapBox';
+import bus from '@/bus';
+import useUserStore from '@/store/modules/user';
+import DialogTabs from '@/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue';
+import { drainageDispatchGetMenu, drainageDispatchGetMenuVidoe } from '@/api/MonitorAssetsOnMap';
+import recordPage from '@/views/voice/recordPage/index';
+import usepartitionStore from '@/store/modules/partition';
 
-import LayerControl from "@/views/pictureOnMap/LayerControl.vue";
-import inputSearch from "@/views/pictureOnMap/inputSearch.vue";
-import { FALSE } from "ol/functions";
+import LayerControl from '@/views/pictureOnMap/LayerControl.vue';
+import inputSearch from '@/views/pictureOnMap/inputSearch.vue';
+import { FALSE } from 'ol/functions';
 
 const useStore = usepartitionStore();
 const router = useRouter();
@@ -69,14 +66,14 @@
 const GetcomIDs = ref([]);
 const dialogConfig = reactive({
   visible: false,
-  dataID: "",
-  dataCode: "",
+  dataID: '',
+  dataCode: '',
   data: {},
   comIDs: [],
   customData: [],
-  RefName: "",
-  title: "详情",
-  typeName: "",
+  RefName: '',
+  title: '详情',
+  typeName: '',
 });
 const closediaMeth = () => {
   dialogConfig.visible = false;
@@ -84,89 +81,91 @@
 // 站点数组
 const arrstcode = ref([
   // 站点类型名称: 编码
-  "outlet_water_level", // 排口流量
-  "outlet_quality", // 排口水质
-  "channel_quality", // 港渠水质
-  "channel_water_level", // 港渠水位
-  "lake_water_level", // 湖泊水位
-  "waterlogging", // 渍水监测点（注意：这里编码没有后缀，可能是特例或故意为之）
-  "rain", // 雨量站
-  "rainwater_pipeline_quality", // 雨水管网水质
-  "rainwater_pipeline_quality_city", // 雨水管网水质
-  "sewage_pipeline_quality", // 污水管网水质
-  "sewage_pipeline_quality_city", // 污水管网水质
-  "rainwater_pipeline_quality_area", // 接驳口
-  "rainwater_pipeline_water_level", // 雨水管网液位
-  "reservoir_water_level", //水库水位
-  "rainPumpStation", //雨水泵站
-  "dirtyPumpStation", //污水泵站
-  "sewageStation", //污水厂
-  "gateStation", //闸门
-  "pump_water_level", //泵站液位
-  "outlet_water_level_city", //排口流量
+  'outlet_water_level', // 排口流量
+  'outlet_quality', // 排口水质
+  'channel_quality', // 港渠水质
+  'channel_water_level', // 港渠水位
+  'lake_water_level', // 湖泊水位
+  'waterlogging', // 渍水监测点（注意：这里编码没有后缀，可能是特例或故意为之）
+  'rain', // 雨量站
+  'rainwater_pipeline_quality', // 雨水管网水质
+  'rainwater_pipeline_quality_city', // 雨水管网水质
+  'sewage_pipeline_quality', // 污水管网水质
+  'sewage_pipeline_quality_city', // 污水管网水质
+  'rainwater_pipeline_quality_area', // 接驳口
+  'rainwater_pipeline_water_level', // 雨水管网液位
+  'reservoir_water_level', //水库水位
+  'rainPumpStation', //雨水泵站
+  'dirtyPumpStation', //污水泵站
+  'sewageStation', //污水厂
+  'gateStation', //闸门
+  'pump_water_level', //泵站液位
+  'outlet_water_level_city', //排口流量
 ]);
 // 基本数据
 const arrid = ref([
-  "diversion_well_info", // 分流井
-  "drainage_info", // 排水户
-  "lake_info", // 湖泊
-  "outlet_info", // 排口
-  "port_channel_info", // 港渠
-  "rain_water_pump_station_info", // 雨水泵站
-  "region_info", // 分区信息
-  "reservoir_info", // 水库
-  "sewage_factory_info", // 污水处理厂
-  "sewage_factory_station_info", //污水处理站
-  "sewage_pump_station_info", // 污水泵站
-  "storage_tank_info", // 调蓄池
-  "water_gate_info", // 水闸
-  "waterlogging_point_info", // 渍水点
-  "water_region_info", // 水系汇水分区
-  "storehouse", //物资仓库
-  "dikeGood", //堤防备料
+  'diversion_well_info', // 分流井
+  'drainage_info', // 排水户
+  'lake_info', // 湖泊
+  'outlet_info', // 排口
+  'port_channel_info', // 港渠
+  'rain_water_pump_station_info', // 雨水泵站
+  'region_info', // 分区信息
+  'reservoir_info', // 水库
+  'sewage_factory_info', // 污水处理厂
+  'sewage_factory_station_info', //污水处理站
+  'sewage_pump_station_info', // 污水泵站
+  'storage_tank_info', // 调蓄池
+  'water_gate_info', // 水闸
+  'waterlogging_point_info', // 渍水点
+  'water_region_info', // 水系汇水分区
+  'storehouse', //物资仓库
+  'dikeGood', //堤防备料
+]);
+// 视频点
+const videoList = ref([
+  'gangqu_video', // 港渠视频
+  'water_logging_video', // 渍水点视频
+  'pump_video', // 泵站视频
 ]);
 // 基础数据
 const switchStcode = (Name, type) => {
-  if (type == "outlet_info") {
+  if (type == 'outlet_info') {
     pkClick(Getproperties.value);
   }
-  console.log("GetcomIDs.value", GetcomIDs.value);
+  console.log('GetcomIDs.value', GetcomIDs.value);
   // 去除排水体系泵站通用弹框,通过ReturnPSTX来判断是否不打开公共弹窗
-  console.log("arrid.value", arrid.value);
+  console.log('arrid.value', arrid.value);
   // debugger;
   if (
-    (type == "rain_water_pump_station_info" || type == "sewage_pump_station_info") &&
-    router.currentRoute.value.fullPath == "/DrainageSystem" &&
-    localStorage.getItem("ReturnPSTX") == "off"
+    (type == 'rain_water_pump_station_info' || type == 'sewage_pump_station_info') &&
+    router.currentRoute.value.fullPath == '/DrainageSystem' &&
+    localStorage.getItem('ReturnPSTX') == 'off'
   ) {
     // 使用一次后恢复默认值:false
-    localStorage.setItem("ReturnPSTX", "off"); //On打开公共弹窗 off不打开公共弹窗  默认为On
+    localStorage.setItem('ReturnPSTX', 'off'); //On打开公共弹窗 off不打开公共弹窗  默认为On
     return;
   }
 
   // 使用一次后恢复默认值:false
-  localStorage.setItem("ReturnPSTX", "off"); //On打开公共弹窗 off不打开公共弹窗  默认为On
+  localStorage.setItem('ReturnPSTX', 'off'); //On打开公共弹窗 off不打开公共弹窗  默认为On
   if (arrid.value.includes(type)) {
     dialogConfig.visible = true;
     dialogConfig.dataCode = type;
     dialogConfig.comIDs = GetcomIDs.value;
-    dialogConfig.dataID = Getproperties.value.pid
-      ? Getproperties.value.pid
-      : Getproperties.value.id;
+    dialogConfig.dataID = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
   } else {
     return;
   }
 };
 // 类型弹框判断
-const typecodeswitch = (type) => {
+const typecodeswitch = type => {
   if (diabox[type]) {
     // console.log('diabox[type]', diabox[type]);
-    window[type + "_map"] = diabox[type]
-      .filter((i) => i.geometry)
+    window[type + '_map'] = diabox[type]
+      .filter(i => i.geometry)
       .map((item, index) => {
-        let coordinates = turf.getCoords(
-          turf.center(Terraformer.WKT.parse(item.geometry))
-        );
+        let coordinates = turf.getCoords(turf.center(Terraformer.WKT.parse(item.geometry)));
         const popup = new mapboxgl1.Popup({
           closeButton: false,
           closeOnClick: false,
@@ -180,7 +179,7 @@
       });
 
     nextTick(() => {
-      window[type + "_map"].forEach((i) => i._setOpacity(0));
+      window[type + '_map'].forEach(i => i._setOpacity(0));
     });
   }
 };
@@ -188,7 +187,7 @@
   let typearr = [];
   for (var k in diabox) {
     typearr.push(k);
-    appStore.MapData.map((item) => {
+    appStore.MapData.map(item => {
       if (item.pointType == k) {
         diabox[k] = item.data;
       }
@@ -213,53 +212,78 @@
   }
 };
 // 智慧水务大脑一张图 特定大屏动态菜单
-const specificFun = (type) => {
+const specificFun = type => {
   // 监测预警模块弹框
   // value值 统一菜单类型
   //name值 特指智慧水务大脑获取的动态菜单类型
   let arr = [
     {
-      name: "dp_zsfx", //渍水点
-      value: "waterlogging",
+      name: 'dp_zsfx', //渍水点
+      value: 'waterlogging',
     },
     {
-      name: "dp_hhsq", //河湖水情
-      value: "lake_water_level",
+      name: 'dp_hhsq', //河湖水情
+      value: 'lake_water_level',
     },
     {
-      name: "dp_bzgq", //泵站工情
-      value: "rainPumpStation", //雨水泵站
+      name: 'dp_bzgq', //泵站工情
+      value: 'rainPumpStation', //雨水泵站
     },
     {
-      name: "dp_gwfx", //管网风险
-      value: "rainwater_pipeline_water_level", //雨水管网液位
+      name: 'dp_gwfx', //管网风险
+      value: 'rainwater_pipeline_water_level', //雨水管网液位
     },
     {
-      name: "dp_gwfx", //管网风险
-      value: "rainwater_pipeline_quality", //雨水管网水质
+      name: 'dp_gwfx', //管网风险
+      value: 'rainwater_pipeline_quality', //雨水管网水质
     },
     {
-      name: "dp_gwfx", //接驳口
-      value: "rainwater_pipeline_quality_area", //接驳口
+      name: 'dp_gwfx', //接驳口
+      value: 'rainwater_pipeline_quality_area', //接驳口
     },
     {
-      name: "dp_wsgwfx", //大屏污水管网风险分析弹框
-      value: "sewage_pipeline_quality", //雨水管网水质
+      name: 'dp_wsgwfx', //大屏污水管网风险分析弹框
+      value: 'sewage_pipeline_quality', //雨水管网水质
     },
     // {
     //   name: "dp_ysgwfx", //大屏雨水管网风险分析弹框
     //   value: "rainwater_pipeline_quality", //雨水管网水质
     // },
   ];
-  return arr.find((item) => item.value == type)?.name || null;
+  return arr.find(item => item.value == type)?.name || null;
 };
 
 // 获取动态弹框菜单
 const GetBoxmenu = (Name, type) => {
-  console.log("name", Name);
-  console.log("type", type);
+  console.log('name', Name);
+  console.log('type', type);
   GetcomIDs.value = [];
-  let dataId = "";
+  let dataId = '';
+
+  if (videoList.value.includes(type)) {
+    // 视频单独的获取菜单的
+    let params = {
+      dataCode: type,
+      scene: 'basis_monitor',
+    };
+    drainageDispatchGetMenuVidoe(params).then(res => {
+      console.log('获得的菜单', res.data);
+      Getmenuarr.value = res.data;
+      if (res.data && res.data.length) {
+        res.data.map(item => {
+          GetcomIDs.value.push(item.moduleName);
+        });
+      }
+
+      dialogConfig.visible = true;
+      dialogConfig.dataCode = type;
+      dialogConfig.dataID = Getproperties.value.stCode;
+      dialogConfig.comIDs = GetcomIDs.value;
+    });
+
+    return;
+  }
+
   if (arrstcode.value.includes(type)) {
     dataId = Getproperties.value.stCode;
   }
@@ -267,42 +291,43 @@
   if (arrid.value.includes(type)) {
     dataId = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
   }
-  console.log("dataId", dataId);
+
+  console.log('dataId', dataId);
   if (!dataId) {
     //渍水调度
-    if (type == "waterlog_point") {
-      bus.emit("showZSdispatch", Getproperties.value);
+    if (type == 'waterlog_point') {
+      bus.emit('showZSdispatch', Getproperties.value);
     }
     // proxy.$modal.msgSuccess('');
     return;
   }
   // debugger;
   // 没有注释 不理解前面的代码意义,只能在这里写死
-  if (type == "rainwater_pipeline_quality_area") {
-    type = "rainwater_pipeline_quality";
-    dialogConfig.RefName = "jiancefenxiGWFX";
+  if (type == 'rainwater_pipeline_quality_area') {
+    type = 'rainwater_pipeline_quality';
+    dialogConfig.RefName = 'jiancefenxiGWFX';
   }
-  if (type == "outlet_water_level_city") {
-    type = "outlet_water_level";
+  if (type == 'outlet_water_level_city') {
+    type = 'outlet_water_level';
   }
-  if (type == "rainwater_pipeline_quality_city") {
-    type = "rainwater_pipeline_quality";
+  if (type == 'rainwater_pipeline_quality_city') {
+    type = 'rainwater_pipeline_quality';
   }
-  if (type == "sewage_pipeline_quality_city") {
-    type = "sewage_pipeline_quality";
+  if (type == 'sewage_pipeline_quality_city') {
+    type = 'sewage_pipeline_quality';
   }
 
   let params = {
     dataCode: type,
-    scene: specificFun(type) || "basis_monitor",
+    scene: specificFun(type) || 'basis_monitor',
     // scene: "basis_monitor",
     dataId: dataId,
   };
-  drainageDispatchGetMenu(params).then((res) => {
-    console.log("获得的菜单", res.data);
+  drainageDispatchGetMenu(params).then(res => {
+    console.log('获得的菜单', res.data);
     Getmenuarr.value = res.data;
     if (res.data && res.data.length) {
-      res.data.map((item) => {
+      res.data.map(item => {
         GetcomIDs.value.push(item.moduleName);
       });
     }
@@ -317,132 +342,117 @@
 const pointandlineOpen = (type, properties) => {
   dialogConfig.visible = true;
   switch (type) {
-    case "pipeline_info_text":
-      dialogConfig.title = "管线信息";
+    case 'pipeline_info_text':
+      dialogConfig.title = '管线信息';
       break;
-    case "pipeline_info":
-      dialogConfig.title = "管线信息";
+    case 'pipeline_info':
+      dialogConfig.title = '管线信息';
       break;
-    case "pipeline_point":
-      dialogConfig.title = "管点信息";
+    case 'pipeline_point':
+      dialogConfig.title = '管点信息';
       break;
-    case "point":
-      dialogConfig.title = "问题管线";
+    case 'point':
+      dialogConfig.title = '问题管线';
       break;
   }
 
   Getmenuarr.value = [
     {
-      menuName: "管网信息",
+      menuName: '管网信息',
       show: true,
-      moduleName: "PointAndLine",
+      moduleName: 'PointAndLine',
     },
   ];
   // debugger;
   // dialogConfig.dataID = '0371000003';
-  dialogConfig.comIDs = ["PointAndLine"];
-  dialogConfig.RefName = "PointAndLine";
+  dialogConfig.comIDs = ['PointAndLine'];
+  dialogConfig.RefName = 'PointAndLine';
 };
 const loadCallback = () => {};
 // 排口溯源
-const pkClick = async (properties) => {
+const pkClick = async properties => {
   // debugger;
   if (!properties.wellCode) return;
   let results = await upStreamAnalyse({ endPointNumber: properties.wellCode });
   let pipelines = results.data.pipelineInfoList
-    .map((i) =>
+    .map(i =>
       turf.feature(Terraformer.WKT.parse(i.geometrys), {
         ...i,
-        area: i.pipelineType == "Rain" ? "雨水" : "污水",
+        area: i.pipelineType == 'Rain' ? '雨水' : '污水',
       })
     )
-    .map((i) =>
-      i.properties.flowDirection == 0
-        ? turf.lineString(turf.getCoords(i).reverse(), i.properties)
-        : i
-    );
+    .map(i => (i.properties.flowDirection == 0 ? turf.lineString(turf.getCoords(i).reverse(), i.properties) : i));
   newfiberMap
     .getLayers()
-    .filter((i) => i.newfiberId == "水系流向")[0]
+    .filter(i => i.newfiberId == '水系流向')[0]
     .getSource()
     .setData(turf.featureCollection(pipelines));
 };
 
-const a = (properties) => {
-  const keys_ = ["雨水", "污水"];
-  const keys = ["1_泵站", "1_污水处理厂", "分区流向", "分区流向1"];
-  bus.emit("removeMapDatas", keys);
+const a = properties => {
+  const keys_ = ['雨水', '污水'];
+  const keys = ['1_泵站', '1_污水处理厂', '分区流向', '分区流向1'];
+  bus.emit('removeMapDatas', keys);
   newfiberMap
     .getLayers()
-    .filter((i) => i.newfiberId == keys[3])[0]
+    .filter(i => i.newfiberId == keys[3])[0]
     .getSource()
     .setData(turf.featureCollection([]));
   const key = properties.c_layer.includes(keys_[0]) ? keys_[0] : keys_[1];
   const nameKey = properties.name.substring(0, 2);
-  let features = line.features.filter(
-    (i) => i.properties.area.includes(key) && i.properties.name.includes(nameKey)
-  );
-  let features1 = point.features.filter(
-    (i) => i.properties.area.includes(key) && i.properties.system.includes(nameKey)
-  );
-  let points = _.groupBy(features1, (a) => a.properties.type);
-  features.forEach((i) => {
+  let features = line.features.filter(i => i.properties.area.includes(key) && i.properties.name.includes(nameKey));
+  let features1 = point.features.filter(i => i.properties.area.includes(key) && i.properties.system.includes(nameKey));
+  let points = _.groupBy(features1, a => a.properties.type);
+  features.forEach(i => {
     i.properties.type = keys[2];
-    i.properties.color = key == keys_[0] ? "rgba(21,127,176,1)" : "rgba(255,0,0,1)";
+    i.properties.color = key == keys_[0] ? 'rgba(21,127,176,1)' : 'rgba(255,0,0,1)';
   });
-  Object.keys(points).map((key) =>
-    bus.emit("setGeoJSON", {
+  Object.keys(points).map(key =>
+    bus.emit('setGeoJSON', {
       json: turf.featureCollection(
-        points[key].map((i) => ({
+        points[key].map(i => ({
           type: i.type,
           geometry: i.geometry,
-          properties: { ...i.properties, type: "1_" + key },
+          properties: { ...i.properties, type: '1_' + key },
         }))
       ),
-      key: "1_" + key,
+      key: '1_' + key,
     })
   );
-  bus.emit("setGeoJSON", { json: turf.featureCollection(features), key: keys[2] });
+  bus.emit('setGeoJSON', { json: turf.featureCollection(features), key: keys[2] });
   newfiberMap
     .getLayers()
-    .filter((i) => i.newfiberId == keys[3])[0]
+    .filter(i => i.newfiberId == keys[3])[0]
     .getSource()
     .setData(turf.featureCollection(features));
 };
 
 const mapClick1 = (lngLat, properties = {}, layerId) => {
-  console.log("经纬度", lngLat);
-  console.log("数据", properties);
-  console.log("layerid", layerId);
+  console.log('经纬度', lngLat);
+  console.log('数据', properties);
+  console.log('layerid', layerId);
   dialogConfig.title = properties.stName || properties.name;
 
   // 处理标注
   Getproperties.value = properties;
-  let type = properties ? properties.type : "" || 1;
-  let Name = properties ? properties.pointTypeName : "" || "";
+  let type = properties ? properties.type : '' || 1;
+  let Name = properties ? properties.pointTypeName : '' || '';
   // Annotation(properties);
-  console.log("1111", type, layerId);
-  if (properties.layer == "排水分区") {
+  console.log('1111', type, layerId);
+  if (properties.layer == '排水分区') {
     return;
   }
-  let layerIdarr = [
-    "湖泊",
-    "湖泊_text",
-    "港渠",
-    "港渠_text",
-    "水库管理范围",
-    "水库管理范围_text",
-  ];
+  let layerIdarr = ['湖泊', '湖泊_text', '港渠', '港渠_text', '水库管理范围', '水库管理范围_text'];
   let newsetarr = [
-    { name: "湖泊", value: "lake_info" },
-    { name: "湖泊_text", value: "lake_info" },
-    { name: "港渠", value: "port_channel_info" },
-    { name: "港渠_text", value: "port_channel_info" },
-    { name: "水库管理范围", value: "reservoir_info" },
-    { name: "水库管理范围_text", value: "reservoir_info" },
+    { name: '湖泊', value: 'lake_info' },
+    { name: '湖泊_text', value: 'lake_info' },
+    { name: '港渠', value: 'port_channel_info' },
+    { name: '港渠_text', value: 'port_channel_info' },
+    { name: '水库管理范围', value: 'reservoir_info' },
+    { name: '水库管理范围_text', value: 'reservoir_info' },
   ];
   if (layerIdarr.includes(layerId)) {
-    type = newsetarr.find((item) => {
+    type = newsetarr.find(item => {
       return layerId == item.name;
     }).value;
     GetBoxmenu(layerId, type);
@@ -450,15 +460,15 @@
     return;
   }
 
-  let arr = ["pipeline_point", "pipeline_info", "pipeline_info_text"];
+  let arr = ['pipeline_point', 'pipeline_info', 'pipeline_info_text'];
 
   if (arr.includes(layerId)) {
-    console.log("进了方法");
+    console.log('进了方法');
     pointandlineOpen(layerId);
     dialogConfig.dataCode = layerId;
-  } else if (properties.type && properties.type == "问题管线") {
-    pointandlineOpen("point");
-    dialogConfig.dataCode = "point";
+  } else if (properties.type && properties.type == '问题管线') {
+    pointandlineOpen('point');
+    dialogConfig.dataCode = 'point';
   } else {
     if (type) {
       GetBoxmenu(Name, type);
@@ -468,30 +478,27 @@
 
 // 根据类型处理接口返回的标注内容
 const AnnotationArr = ref([]);
-const StringName = ref("");
-const Annotation = (properties) => {
+const StringName = ref('');
+const Annotation = properties => {
   if (properties.siteData && properties.siteData.length) {
     let arr = JSON.parse(properties.siteData);
     AnnotationArr.value = arr;
-    console.log("数据", arr);
-    let string = "";
+    console.log('数据', arr);
+    let string = '';
 
     switch (properties.type) {
-      case "rain":
-        AnnotationArr.value = [
-          { valueName: "监测时间", value: properties.recordTime },
-          ...arr,
-        ];
+      case 'rain':
+        AnnotationArr.value = [{ valueName: '监测时间', value: properties.recordTime }, ...arr];
         break;
     }
     string = Methtion(string);
-    console.log("数据", string);
+    console.log('数据', string);
   }
 };
 
-const Methtion = (StringName) => {
+const Methtion = StringName => {
   if (AnnotationArr.value.length) {
-    AnnotationArr.value.map((item) => {
+    AnnotationArr.value.map(item => {
       StringName += `${item.valueName}:${item.value}+'/n' `;
     });
     return StringName;
@@ -508,7 +515,7 @@
     domElement.webkitRequestFullScreen();
   }
 };
-const closeFun = (is) => {
+const closeFun = is => {
   dialogConfig.visible = is;
 };
 function anotherMeht(item) {
@@ -519,10 +526,10 @@
   Getproperties.value.wellCode = item.wellCode || item.dataName || item.pipeLine;
   Getproperties.value.id = item.id;
   Getproperties.value.gwMonitorId = item.gwMonitorId || item.id; //管网坡面
-  Getproperties.value.dataId = item.dataId || "";
+  Getproperties.value.dataId = item.dataId || '';
   Getproperties.value.stType = item.stType;
 
-  Getproperties.value.geometry = item.geometry || item.geometrys || "";
+  Getproperties.value.geometry = item.geometry || item.geometrys || '';
   // Terraformer.WKT.convert(turf.point(item.lonLat.split(",").map(Number)).geometry);
 
   Getproperties.value.waterRegionCode = item.lakeCode || item.waterRegionCode; //河湖水情  查询水系分区详情
@@ -532,7 +539,7 @@
   } else {
     Getproperties.value.daterange = null;
   }
-  console.log("Getproperties", Getproperties.value);
+  console.log('Getproperties', Getproperties.value);
   if (arrstcode.value.includes(item.stType)) {
     properties.stCode = item.stCode;
   }
@@ -540,15 +547,15 @@
   if (arrid.value.includes(item.stType)) {
     properties.id = item.pid || item.id;
   }
-  GetBoxmenu("", item.stType);
+  GetBoxmenu('', item.stType);
 }
 
 onMounted(() => {
   allScreen();
   useStore.getsewageData();
-  bus.on("DynamicBus", (item) => {
-    console.log("item", item);
-    dialogConfig.RefName = item.RefName || "";
+  bus.on('DynamicBus', item => {
+    console.log('item', item);
+    dialogConfig.RefName = item.RefName || '';
     dialogConfig.title = item.stName || item.name;
     // debugger;
     if (!!!item.NoPromise) {
@@ -561,24 +568,23 @@
       dialogConfig.dataID = item.pid ? item.pid : item.id;
       Getproperties.value.stCode = item.stCode;
       Getproperties.value.dataCode = item.dataCode;
-      Getproperties.value.wellcode =
-        item.wellCode || item.dataName || item.startPointNumber;
+      Getproperties.value.wellcode = item.wellCode || item.dataName || item.startPointNumber;
       Getproperties.value.id = item.relationId || item.id; //item.relationId监测告警的普通id
-      Getproperties.value.dataId = item.dataId || "";
+      Getproperties.value.dataId = item.dataId || '';
       Getproperties.value.stType = item.stType;
       Getproperties.value.geometry = item.geometry || item.geometrys;
       dialogConfig.visible = true;
     }
   });
-  bus.on("closedia", (e) => {
+  bus.on('closedia', e => {
     closediaMeth();
   });
-  bus.on("changeData", (e) => {
+  bus.on('changeData', e => {
     // switchArr();
   });
   // 部分公共弹窗需要使用一个查询时间,目前不确定后期有没有人使用同类型的弹窗,在此初始化,增加公共弹窗的兼容性
   // localStorage.setItem("JCFXDialogTimer", moment().format("YYYY-MM-DD"));
-  bus.on("xiaofeifei", (e) => {
+  bus.on('xiaofeifei', e => {
     // lngLat, properties = {}, layerId
 
     mapClick1(e.geometry.coordinates, e.properties, e.geometry.type);
@@ -586,18 +592,18 @@
 });
 
 onBeforeUnmount(() => {
-  bus.off("DynamicBus");
-  bus.off("closedia");
-  bus.off("changeData");
-  bus.off("xiaofeifei");
+  bus.off('DynamicBus');
+  bus.off('closedia');
+  bus.off('changeData');
+  bus.off('xiaofeifei');
 });
 </script>
 <style lang="scss">
-@import "@/assets/styles/pictureOnMap.scss";
+@import '@/assets/styles/pictureOnMap.scss';
 .pictureOnMap {
   width: 100%;
   height: 100%;
-  background: url("@/assets/images/pictureOnMap/maxBgc.png") no-repeat center;
+  background: url('@/assets/images/pictureOnMap/maxBgc.png') no-repeat center;
   background-size: 100% 100%;
   color: #fff;
   overflow: hidden;
diff --git a/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue b/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue
index 16f461f..fb0456c 100644
--- a/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue
+++ b/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="shipingjiankong">
-    <div class="leftbox">
+    <div class="leftbox" v-if="!videoList.includes(dataCode)">
       <div
         class="boxitem"
         :class="item.cameraId == AllData.cameraIndexCode ? 'actived' : ''"
@@ -12,25 +12,13 @@
         {{ item.cameraName }}
       </div>
     </div>
-    <div class="rightbox">
-      <!-- <HKVideo
-        ref="video"
-        :appkey="videoConfig.appKey"
-        :secret="videoConfig.appSecret"
-        :ip="videoConfig.ip"
-        :port="videoConfig.port"
-        :cameraIndexCode="AllData.cameraIndexCode"
-        :layout="AllData.layout"
-        :defaultList="AllData.defaultList"
-      ></HKVideo> -->
+    <div :class="videoList.includes(dataCode) ? 'onebox' : 'rightbox'">
       <videoDHone :channelId="AllData.cameraIndexCode"></videoDHone>
     </div>
   </div>
 </template>
 
 <script setup name="shipingjiankong">
-// import HKVideo from '@/components/videoHK/index.vue';
-import { HKconfig } from '@/utils/HKConfig';
 import { getdataCamera } from '@/api/MonitorAssetsOnMap';
 import videoDHone from '@/components/videoDHone/index.vue'; //实时视频
 
@@ -58,6 +46,9 @@
   arrid: {
     type: Array,
   },
+  videoList: {
+    type: Array,
+  },
 });
 
 const AllData = reactive({
@@ -69,26 +60,7 @@
   ],
 });
 const cameraName = ref('');
-const videoConfig = reactive({
-  appKey: HKconfig.appkey,
-  appSecret: HKconfig.secret,
-  ip: HKconfig.ip,
-  port: HKconfig.port,
-});
-const leftList = ref([
-  {
-    name: '视频1',
-    value: '1',
-  },
-  {
-    name: '视频2',
-    value: '2',
-  },
-  {
-    name: '视频3',
-    value: '3',
-  },
-]);
+const leftList = ref([]);
 
 // 左侧点击
 function leftclick(item) {
@@ -97,6 +69,13 @@
 
 // 获取监控视频列表
 function GetcameraList() {
+  console.log('props.videoList', props.videoList);
+  // 如果是单独视频站点的类型 就没有多个 不用查询 直接赋值点击地图获取到的stcode
+  if (props.videoList.includes(props.dataCode)) {
+    AllData.cameraIndexCode = props.dataID;
+    return;
+  }
+
   let params = {};
   // 站点的参数
   if (props.arrstcode.includes(props.dataCode)) {
@@ -123,8 +102,14 @@
 }
 
 onMounted(() => {
+  console.log('搞什么啊', props, props.dataId);
   GetcameraList();
-  console.log('props', props);
+});
+onBeforeUnmount(() => {
+  if (AllData.myVideoPlayer) {
+    hideDHPlayer();
+    AllData.myVideoPlayer.destroy();
+  }
 });
 </script>
 
@@ -165,4 +150,8 @@
 .rightbox {
   width: calc(100% - 200px);
 }
+
+.onebox {
+  width: 100%;
+}
 </style>

diff --git a/src/api/MonitorAssetsOnMap.js b/src/api/MonitorAssetsOnMap.js
index 8795d6a..891804d 100644
--- a/src/api/MonitorAssetsOnMap.js
+++ b/src/api/MonitorAssetsOnMap.js
@@ -183,6 +183,16 @@
     params: query,
   });
 }
+
+// 视频单独的弹框菜单
+export function drainageDispatchGetMenuVidoe(query) {
+  return request({
+    url: `/business/drainageMap/getMenu`,
+    method: 'get',
+    params: query,
+  });
+}
+
 // 汇水分区查询关联7类数据  get  id
 export function getWaterRegionData(query) {
   return request({
@@ -380,4 +390,4 @@
     method: 'get',
     params: query,
   });
-}
\ No newline at end of file
+}
diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue
index 8a8109e..97065bf 100644
--- a/src/components/videoDHone/index.vue
+++ b/src/components/videoDHone/index.vue
@@ -13,7 +13,7 @@
   // 内网、公网 4个配置
   channelId: {
     type: String,
-    default: () => '1000131$1$0$0',
+    default: () => '',
   },
 });
 
@@ -26,16 +26,16 @@
   pluginLoginInfo: {
     // 传入 icc 平台的登录信息
     // 内网端口
-    // host: '172.28.41.16', // icc 平台ip
-    // port: '443', // icc 平台端口 https 默认 443
-    // username: 'sfduijie', // icc 平台用户名
-    // password: 'sfduijie@123', // icc 平台密码
-
-    // 外网端口
-    host: '220.249.115.224', // icc 平台ip
-    port: '1443', // icc 平台端口 https 默认 443
+    host: '172.28.41.16', // icc 平台ip
+    port: '443', // icc 平台端口 https 默认 443
     username: 'sfduijie', // icc 平台用户名
     password: 'sfduijie@123', // icc 平台密码
+
+    // 外网端口
+    // host: '220.249.115.224', // icc 平台ip
+    // port: '1443', // icc 平台端口 https 默认 443
+    // username: 'sfduijie', // icc 平台用户名
+    // password: 'sfduijie@123', // icc 平台密码
   },
 });
 
@@ -77,11 +77,13 @@
     createSuccess: versionInfo => {
       // 该回调触发后，我们可以进行实时预览/录像回放等操作
       // desc.value = '创建成功!!!' + versionInfo.message;
+      console.log('准备进入', AllData.channelId);
       AllData.Getchajian = 1;
       startReal();
     },
     // 创建播放器失败回调
     createError: err => {
+      console.log('错误', JSON.stringify(err));
       // 有错误码，可打印查看错误信息
       // desc.value = '创建失败!!!' + JSON.stringify(err);
       AllData.Getchajian = null;
@@ -158,6 +160,7 @@
 
 // 实时预览
 function startReal() {
+  console.log('开始实时预览', AllData.channelId);
   AllData.myVideoPlayer.startReal([
     // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码) <br />可在ICC平台设备管理页面查看到通道id
     {
@@ -217,7 +220,7 @@
   listConfig(paramas).then(res => {
     AllData.URL = res.data[0].configValue;
 
-    desc.value = `插件启动失败，请检查插件是否安装！
+    desc.value = `插件启动失败，正在重试，请检查插件是否安装！
     <a href=${AllData.URL} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
   });
 }
diff --git a/src/views/pictureOnMap/index.vue b/src/views/pictureOnMap/index.vue
index 4b84aaf..cfbc3ac 100644
--- a/src/views/pictureOnMap/index.vue
+++ b/src/views/pictureOnMap/index.vue
@@ -2,11 +2,7 @@
   <div class="pictureOnMap">
     <TopTab />
     <div class="mainContentBox">
-      <MapBox
-        :initJson="`/static/libs/mapbox/style/wh_dhgx.json`"
-        :loadCallback="loadCallback"
-        @mapClick1="mapClick1"
-      ></MapBox>
+      <MapBox :initJson="`/static/libs/mapbox/style/wh_dhgx.json`" :loadCallback="loadCallback" @mapClick1="mapClick1"></MapBox>
       <router-view></router-view>
       <recordPage></recordPage>
       <LayerControl></LayerControl>
@@ -32,6 +28,7 @@
         :title="dialogConfig.title"
         :arrstcode="arrstcode"
         :arrid="arrid"
+        :videoList="videoList"
         :Getproperties="Getproperties"
         :Getmenuarr="Getmenuarr"
         @closeFun="closeFun"
@@ -40,23 +37,23 @@
   </div>
 </template>
 <script setup>
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router';
 
-import line from "../../../public/static/libs/mapbox/json/line.json";
-import point from "../../../public/static/libs/mapbox/json/point.json";
-import { ref, reactive, onMounted, nextTick } from "vue";
-import TopTab from "./TopTab/index.vue";
-import MapBox from "../../components/Map/MapBox";
-import bus from "@/bus";
-import useUserStore from "@/store/modules/user";
-import DialogTabs from "@/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue";
-import { drainageDispatchGetMenu } from "@/api/MonitorAssetsOnMap";
-import recordPage from "@/views/voice/recordPage/index";
-import usepartitionStore from "@/store/modules/partition";
+import line from '../../../public/static/libs/mapbox/json/line.json';
+import point from '../../../public/static/libs/mapbox/json/point.json';
+import { ref, reactive, onMounted, nextTick } from 'vue';
+import TopTab from './TopTab/index.vue';
+import MapBox from '../../components/Map/MapBox';
+import bus from '@/bus';
+import useUserStore from '@/store/modules/user';
+import DialogTabs from '@/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue';
+import { drainageDispatchGetMenu, drainageDispatchGetMenuVidoe } from '@/api/MonitorAssetsOnMap';
+import recordPage from '@/views/voice/recordPage/index';
+import usepartitionStore from '@/store/modules/partition';
 
-import LayerControl from "@/views/pictureOnMap/LayerControl.vue";
-import inputSearch from "@/views/pictureOnMap/inputSearch.vue";
-import { FALSE } from "ol/functions";
+import LayerControl from '@/views/pictureOnMap/LayerControl.vue';
+import inputSearch from '@/views/pictureOnMap/inputSearch.vue';
+import { FALSE } from 'ol/functions';
 
 const useStore = usepartitionStore();
 const router = useRouter();
@@ -69,14 +66,14 @@
 const GetcomIDs = ref([]);
 const dialogConfig = reactive({
   visible: false,
-  dataID: "",
-  dataCode: "",
+  dataID: '',
+  dataCode: '',
   data: {},
   comIDs: [],
   customData: [],
-  RefName: "",
-  title: "详情",
-  typeName: "",
+  RefName: '',
+  title: '详情',
+  typeName: '',
 });
 const closediaMeth = () => {
   dialogConfig.visible = false;
@@ -84,89 +81,91 @@
 // 站点数组
 const arrstcode = ref([
   // 站点类型名称: 编码
-  "outlet_water_level", // 排口流量
-  "outlet_quality", // 排口水质
-  "channel_quality", // 港渠水质
-  "channel_water_level", // 港渠水位
-  "lake_water_level", // 湖泊水位
-  "waterlogging", // 渍水监测点（注意：这里编码没有后缀，可能是特例或故意为之）
-  "rain", // 雨量站
-  "rainwater_pipeline_quality", // 雨水管网水质
-  "rainwater_pipeline_quality_city", // 雨水管网水质
-  "sewage_pipeline_quality", // 污水管网水质
-  "sewage_pipeline_quality_city", // 污水管网水质
-  "rainwater_pipeline_quality_area", // 接驳口
-  "rainwater_pipeline_water_level", // 雨水管网液位
-  "reservoir_water_level", //水库水位
-  "rainPumpStation", //雨水泵站
-  "dirtyPumpStation", //污水泵站
-  "sewageStation", //污水厂
-  "gateStation", //闸门
-  "pump_water_level", //泵站液位
-  "outlet_water_level_city", //排口流量
+  'outlet_water_level', // 排口流量
+  'outlet_quality', // 排口水质
+  'channel_quality', // 港渠水质
+  'channel_water_level', // 港渠水位
+  'lake_water_level', // 湖泊水位
+  'waterlogging', // 渍水监测点（注意：这里编码没有后缀，可能是特例或故意为之）
+  'rain', // 雨量站
+  'rainwater_pipeline_quality', // 雨水管网水质
+  'rainwater_pipeline_quality_city', // 雨水管网水质
+  'sewage_pipeline_quality', // 污水管网水质
+  'sewage_pipeline_quality_city', // 污水管网水质
+  'rainwater_pipeline_quality_area', // 接驳口
+  'rainwater_pipeline_water_level', // 雨水管网液位
+  'reservoir_water_level', //水库水位
+  'rainPumpStation', //雨水泵站
+  'dirtyPumpStation', //污水泵站
+  'sewageStation', //污水厂
+  'gateStation', //闸门
+  'pump_water_level', //泵站液位
+  'outlet_water_level_city', //排口流量
 ]);
 // 基本数据
 const arrid = ref([
-  "diversion_well_info", // 分流井
-  "drainage_info", // 排水户
-  "lake_info", // 湖泊
-  "outlet_info", // 排口
-  "port_channel_info", // 港渠
-  "rain_water_pump_station_info", // 雨水泵站
-  "region_info", // 分区信息
-  "reservoir_info", // 水库
-  "sewage_factory_info", // 污水处理厂
-  "sewage_factory_station_info", //污水处理站
-  "sewage_pump_station_info", // 污水泵站
-  "storage_tank_info", // 调蓄池
-  "water_gate_info", // 水闸
-  "waterlogging_point_info", // 渍水点
-  "water_region_info", // 水系汇水分区
-  "storehouse", //物资仓库
-  "dikeGood", //堤防备料
+  'diversion_well_info', // 分流井
+  'drainage_info', // 排水户
+  'lake_info', // 湖泊
+  'outlet_info', // 排口
+  'port_channel_info', // 港渠
+  'rain_water_pump_station_info', // 雨水泵站
+  'region_info', // 分区信息
+  'reservoir_info', // 水库
+  'sewage_factory_info', // 污水处理厂
+  'sewage_factory_station_info', //污水处理站
+  'sewage_pump_station_info', // 污水泵站
+  'storage_tank_info', // 调蓄池
+  'water_gate_info', // 水闸
+  'waterlogging_point_info', // 渍水点
+  'water_region_info', // 水系汇水分区
+  'storehouse', //物资仓库
+  'dikeGood', //堤防备料
+]);
+// 视频点
+const videoList = ref([
+  'gangqu_video', // 港渠视频
+  'water_logging_video', // 渍水点视频
+  'pump_video', // 泵站视频
 ]);
 // 基础数据
 const switchStcode = (Name, type) => {
-  if (type == "outlet_info") {
+  if (type == 'outlet_info') {
     pkClick(Getproperties.value);
   }
-  console.log("GetcomIDs.value", GetcomIDs.value);
+  console.log('GetcomIDs.value', GetcomIDs.value);
   // 去除排水体系泵站通用弹框,通过ReturnPSTX来判断是否不打开公共弹窗
-  console.log("arrid.value", arrid.value);
+  console.log('arrid.value', arrid.value);
   // debugger;
   if (
-    (type == "rain_water_pump_station_info" || type == "sewage_pump_station_info") &&
-    router.currentRoute.value.fullPath == "/DrainageSystem" &&
-    localStorage.getItem("ReturnPSTX") == "off"
+    (type == 'rain_water_pump_station_info' || type == 'sewage_pump_station_info') &&
+    router.currentRoute.value.fullPath == '/DrainageSystem' &&
+    localStorage.getItem('ReturnPSTX') == 'off'
   ) {
     // 使用一次后恢复默认值:false
-    localStorage.setItem("ReturnPSTX", "off"); //On打开公共弹窗 off不打开公共弹窗  默认为On
+    localStorage.setItem('ReturnPSTX', 'off'); //On打开公共弹窗 off不打开公共弹窗  默认为On
     return;
   }
 
   // 使用一次后恢复默认值:false
-  localStorage.setItem("ReturnPSTX", "off"); //On打开公共弹窗 off不打开公共弹窗  默认为On
+  localStorage.setItem('ReturnPSTX', 'off'); //On打开公共弹窗 off不打开公共弹窗  默认为On
   if (arrid.value.includes(type)) {
     dialogConfig.visible = true;
     dialogConfig.dataCode = type;
     dialogConfig.comIDs = GetcomIDs.value;
-    dialogConfig.dataID = Getproperties.value.pid
-      ? Getproperties.value.pid
-      : Getproperties.value.id;
+    dialogConfig.dataID = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
   } else {
     return;
   }
 };
 // 类型弹框判断
-const typecodeswitch = (type) => {
+const typecodeswitch = type => {
   if (diabox[type]) {
     // console.log('diabox[type]', diabox[type]);
-    window[type + "_map"] = diabox[type]
-      .filter((i) => i.geometry)
+    window[type + '_map'] = diabox[type]
+      .filter(i => i.geometry)
       .map((item, index) => {
-        let coordinates = turf.getCoords(
-          turf.center(Terraformer.WKT.parse(item.geometry))
-        );
+        let coordinates = turf.getCoords(turf.center(Terraformer.WKT.parse(item.geometry)));
         const popup = new mapboxgl1.Popup({
           closeButton: false,
           closeOnClick: false,
@@ -180,7 +179,7 @@
       });
 
     nextTick(() => {
-      window[type + "_map"].forEach((i) => i._setOpacity(0));
+      window[type + '_map'].forEach(i => i._setOpacity(0));
     });
   }
 };
@@ -188,7 +187,7 @@
   let typearr = [];
   for (var k in diabox) {
     typearr.push(k);
-    appStore.MapData.map((item) => {
+    appStore.MapData.map(item => {
       if (item.pointType == k) {
         diabox[k] = item.data;
       }
@@ -213,53 +212,78 @@
   }
 };
 // 智慧水务大脑一张图 特定大屏动态菜单
-const specificFun = (type) => {
+const specificFun = type => {
   // 监测预警模块弹框
   // value值 统一菜单类型
   //name值 特指智慧水务大脑获取的动态菜单类型
   let arr = [
     {
-      name: "dp_zsfx", //渍水点
-      value: "waterlogging",
+      name: 'dp_zsfx', //渍水点
+      value: 'waterlogging',
     },
     {
-      name: "dp_hhsq", //河湖水情
-      value: "lake_water_level",
+      name: 'dp_hhsq', //河湖水情
+      value: 'lake_water_level',
     },
     {
-      name: "dp_bzgq", //泵站工情
-      value: "rainPumpStation", //雨水泵站
+      name: 'dp_bzgq', //泵站工情
+      value: 'rainPumpStation', //雨水泵站
     },
     {
-      name: "dp_gwfx", //管网风险
-      value: "rainwater_pipeline_water_level", //雨水管网液位
+      name: 'dp_gwfx', //管网风险
+      value: 'rainwater_pipeline_water_level', //雨水管网液位
     },
     {
-      name: "dp_gwfx", //管网风险
-      value: "rainwater_pipeline_quality", //雨水管网水质
+      name: 'dp_gwfx', //管网风险
+      value: 'rainwater_pipeline_quality', //雨水管网水质
     },
     {
-      name: "dp_gwfx", //接驳口
-      value: "rainwater_pipeline_quality_area", //接驳口
+      name: 'dp_gwfx', //接驳口
+      value: 'rainwater_pipeline_quality_area', //接驳口
     },
     {
-      name: "dp_wsgwfx", //大屏污水管网风险分析弹框
-      value: "sewage_pipeline_quality", //雨水管网水质
+      name: 'dp_wsgwfx', //大屏污水管网风险分析弹框
+      value: 'sewage_pipeline_quality', //雨水管网水质
     },
     // {
     //   name: "dp_ysgwfx", //大屏雨水管网风险分析弹框
     //   value: "rainwater_pipeline_quality", //雨水管网水质
     // },
   ];
-  return arr.find((item) => item.value == type)?.name || null;
+  return arr.find(item => item.value == type)?.name || null;
 };
 
 // 获取动态弹框菜单
 const GetBoxmenu = (Name, type) => {
-  console.log("name", Name);
-  console.log("type", type);
+  console.log('name', Name);
+  console.log('type', type);
   GetcomIDs.value = [];
-  let dataId = "";
+  let dataId = '';
+
+  if (videoList.value.includes(type)) {
+    // 视频单独的获取菜单的
+    let params = {
+      dataCode: type,
+      scene: 'basis_monitor',
+    };
+    drainageDispatchGetMenuVidoe(params).then(res => {
+      console.log('获得的菜单', res.data);
+      Getmenuarr.value = res.data;
+      if (res.data && res.data.length) {
+        res.data.map(item => {
+          GetcomIDs.value.push(item.moduleName);
+        });
+      }
+
+      dialogConfig.visible = true;
+      dialogConfig.dataCode = type;
+      dialogConfig.dataID = Getproperties.value.stCode;
+      dialogConfig.comIDs = GetcomIDs.value;
+    });
+
+    return;
+  }
+
   if (arrstcode.value.includes(type)) {
     dataId = Getproperties.value.stCode;
   }
@@ -267,42 +291,43 @@
   if (arrid.value.includes(type)) {
     dataId = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
   }
-  console.log("dataId", dataId);
+
+  console.log('dataId', dataId);
   if (!dataId) {
     //渍水调度
-    if (type == "waterlog_point") {
-      bus.emit("showZSdispatch", Getproperties.value);
+    if (type == 'waterlog_point') {
+      bus.emit('showZSdispatch', Getproperties.value);
     }
     // proxy.$modal.msgSuccess('');
     return;
   }
   // debugger;
   // 没有注释 不理解前面的代码意义,只能在这里写死
-  if (type == "rainwater_pipeline_quality_area") {
-    type = "rainwater_pipeline_quality";
-    dialogConfig.RefName = "jiancefenxiGWFX";
+  if (type == 'rainwater_pipeline_quality_area') {
+    type = 'rainwater_pipeline_quality';
+    dialogConfig.RefName = 'jiancefenxiGWFX';
   }
-  if (type == "outlet_water_level_city") {
-    type = "outlet_water_level";
+  if (type == 'outlet_water_level_city') {
+    type = 'outlet_water_level';
   }
-  if (type == "rainwater_pipeline_quality_city") {
-    type = "rainwater_pipeline_quality";
+  if (type == 'rainwater_pipeline_quality_city') {
+    type = 'rainwater_pipeline_quality';
   }
-  if (type == "sewage_pipeline_quality_city") {
-    type = "sewage_pipeline_quality";
+  if (type == 'sewage_pipeline_quality_city') {
+    type = 'sewage_pipeline_quality';
   }
 
   let params = {
     dataCode: type,
-    scene: specificFun(type) || "basis_monitor",
+    scene: specificFun(type) || 'basis_monitor',
     // scene: "basis_monitor",
     dataId: dataId,
   };
-  drainageDispatchGetMenu(params).then((res) => {
-    console.log("获得的菜单", res.data);
+  drainageDispatchGetMenu(params).then(res => {
+    console.log('获得的菜单', res.data);
     Getmenuarr.value = res.data;
     if (res.data && res.data.length) {
-      res.data.map((item) => {
+      res.data.map(item => {
         GetcomIDs.value.push(item.moduleName);
       });
     }
@@ -317,132 +342,117 @@
 const pointandlineOpen = (type, properties) => {
   dialogConfig.visible = true;
   switch (type) {
-    case "pipeline_info_text":
-      dialogConfig.title = "管线信息";
+    case 'pipeline_info_text':
+      dialogConfig.title = '管线信息';
       break;
-    case "pipeline_info":
-      dialogConfig.title = "管线信息";
+    case 'pipeline_info':
+      dialogConfig.title = '管线信息';
       break;
-    case "pipeline_point":
-      dialogConfig.title = "管点信息";
+    case 'pipeline_point':
+      dialogConfig.title = '管点信息';
       break;
-    case "point":
-      dialogConfig.title = "问题管线";
+    case 'point':
+      dialogConfig.title = '问题管线';
       break;
   }
 
   Getmenuarr.value = [
     {
-      menuName: "管网信息",
+      menuName: '管网信息',
       show: true,
-      moduleName: "PointAndLine",
+      moduleName: 'PointAndLine',
     },
   ];
   // debugger;
   // dialogConfig.dataID = '0371000003';
-  dialogConfig.comIDs = ["PointAndLine"];
-  dialogConfig.RefName = "PointAndLine";
+  dialogConfig.comIDs = ['PointAndLine'];
+  dialogConfig.RefName = 'PointAndLine';
 };
 const loadCallback = () => {};
 // 排口溯源
-const pkClick = async (properties) => {
+const pkClick = async properties => {
   // debugger;
   if (!properties.wellCode) return;
   let results = await upStreamAnalyse({ endPointNumber: properties.wellCode });
   let pipelines = results.data.pipelineInfoList
-    .map((i) =>
+    .map(i =>
       turf.feature(Terraformer.WKT.parse(i.geometrys), {
         ...i,
-        area: i.pipelineType == "Rain" ? "雨水" : "污水",
+        area: i.pipelineType == 'Rain' ? '雨水' : '污水',
       })
     )
-    .map((i) =>
-      i.properties.flowDirection == 0
-        ? turf.lineString(turf.getCoords(i).reverse(), i.properties)
-        : i
-    );
+    .map(i => (i.properties.flowDirection == 0 ? turf.lineString(turf.getCoords(i).reverse(), i.properties) : i));
   newfiberMap
     .getLayers()
-    .filter((i) => i.newfiberId == "水系流向")[0]
+    .filter(i => i.newfiberId == '水系流向')[0]
     .getSource()
     .setData(turf.featureCollection(pipelines));
 };
 
-const a = (properties) => {
-  const keys_ = ["雨水", "污水"];
-  const keys = ["1_泵站", "1_污水处理厂", "分区流向", "分区流向1"];
-  bus.emit("removeMapDatas", keys);
+const a = properties => {
+  const keys_ = ['雨水', '污水'];
+  const keys = ['1_泵站', '1_污水处理厂', '分区流向', '分区流向1'];
+  bus.emit('removeMapDatas', keys);
   newfiberMap
     .getLayers()
-    .filter((i) => i.newfiberId == keys[3])[0]
+    .filter(i => i.newfiberId == keys[3])[0]
     .getSource()
     .setData(turf.featureCollection([]));
   const key = properties.c_layer.includes(keys_[0]) ? keys_[0] : keys_[1];
   const nameKey = properties.name.substring(0, 2);
-  let features = line.features.filter(
-    (i) => i.properties.area.includes(key) && i.properties.name.includes(nameKey)
-  );
-  let features1 = point.features.filter(
-    (i) => i.properties.area.includes(key) && i.properties.system.includes(nameKey)
-  );
-  let points = _.groupBy(features1, (a) => a.properties.type);
-  features.forEach((i) => {
+  let features = line.features.filter(i => i.properties.area.includes(key) && i.properties.name.includes(nameKey));
+  let features1 = point.features.filter(i => i.properties.area.includes(key) && i.properties.system.includes(nameKey));
+  let points = _.groupBy(features1, a => a.properties.type);
+  features.forEach(i => {
     i.properties.type = keys[2];
-    i.properties.color = key == keys_[0] ? "rgba(21,127,176,1)" : "rgba(255,0,0,1)";
+    i.properties.color = key == keys_[0] ? 'rgba(21,127,176,1)' : 'rgba(255,0,0,1)';
   });
-  Object.keys(points).map((key) =>
-    bus.emit("setGeoJSON", {
+  Object.keys(points).map(key =>
+    bus.emit('setGeoJSON', {
       json: turf.featureCollection(
-        points[key].map((i) => ({
+        points[key].map(i => ({
           type: i.type,
           geometry: i.geometry,
-          properties: { ...i.properties, type: "1_" + key },
+          properties: { ...i.properties, type: '1_' + key },
         }))
       ),
-      key: "1_" + key,
+      key: '1_' + key,
     })
   );
-  bus.emit("setGeoJSON", { json: turf.featureCollection(features), key: keys[2] });
+  bus.emit('setGeoJSON', { json: turf.featureCollection(features), key: keys[2] });
   newfiberMap
     .getLayers()
-    .filter((i) => i.newfiberId == keys[3])[0]
+    .filter(i => i.newfiberId == keys[3])[0]
     .getSource()
     .setData(turf.featureCollection(features));
 };
 
 const mapClick1 = (lngLat, properties = {}, layerId) => {
-  console.log("经纬度", lngLat);
-  console.log("数据", properties);
-  console.log("layerid", layerId);
+  console.log('经纬度', lngLat);
+  console.log('数据', properties);
+  console.log('layerid', layerId);
   dialogConfig.title = properties.stName || properties.name;
 
   // 处理标注
   Getproperties.value = properties;
-  let type = properties ? properties.type : "" || 1;
-  let Name = properties ? properties.pointTypeName : "" || "";
+  let type = properties ? properties.type : '' || 1;
+  let Name = properties ? properties.pointTypeName : '' || '';
   // Annotation(properties);
-  console.log("1111", type, layerId);
-  if (properties.layer == "排水分区") {
+  console.log('1111', type, layerId);
+  if (properties.layer == '排水分区') {
     return;
   }
-  let layerIdarr = [
-    "湖泊",
-    "湖泊_text",
-    "港渠",
-    "港渠_text",
-    "水库管理范围",
-    "水库管理范围_text",
-  ];
+  let layerIdarr = ['湖泊', '湖泊_text', '港渠', '港渠_text', '水库管理范围', '水库管理范围_text'];
   let newsetarr = [
-    { name: "湖泊", value: "lake_info" },
-    { name: "湖泊_text", value: "lake_info" },
-    { name: "港渠", value: "port_channel_info" },
-    { name: "港渠_text", value: "port_channel_info" },
-    { name: "水库管理范围", value: "reservoir_info" },
-    { name: "水库管理范围_text", value: "reservoir_info" },
+    { name: '湖泊', value: 'lake_info' },
+    { name: '湖泊_text', value: 'lake_info' },
+    { name: '港渠', value: 'port_channel_info' },
+    { name: '港渠_text', value: 'port_channel_info' },
+    { name: '水库管理范围', value: 'reservoir_info' },
+    { name: '水库管理范围_text', value: 'reservoir_info' },
   ];
   if (layerIdarr.includes(layerId)) {
-    type = newsetarr.find((item) => {
+    type = newsetarr.find(item => {
       return layerId == item.name;
     }).value;
     GetBoxmenu(layerId, type);
@@ -450,15 +460,15 @@
     return;
   }
 
-  let arr = ["pipeline_point", "pipeline_info", "pipeline_info_text"];
+  let arr = ['pipeline_point', 'pipeline_info', 'pipeline_info_text'];
 
   if (arr.includes(layerId)) {
-    console.log("进了方法");
+    console.log('进了方法');
     pointandlineOpen(layerId);
     dialogConfig.dataCode = layerId;
-  } else if (properties.type && properties.type == "问题管线") {
-    pointandlineOpen("point");
-    dialogConfig.dataCode = "point";
+  } else if (properties.type && properties.type == '问题管线') {
+    pointandlineOpen('point');
+    dialogConfig.dataCode = 'point';
   } else {
     if (type) {
       GetBoxmenu(Name, type);
@@ -468,30 +478,27 @@
 
 // 根据类型处理接口返回的标注内容
 const AnnotationArr = ref([]);
-const StringName = ref("");
-const Annotation = (properties) => {
+const StringName = ref('');
+const Annotation = properties => {
   if (properties.siteData && properties.siteData.length) {
     let arr = JSON.parse(properties.siteData);
     AnnotationArr.value = arr;
-    console.log("数据", arr);
-    let string = "";
+    console.log('数据', arr);
+    let string = '';
 
     switch (properties.type) {
-      case "rain":
-        AnnotationArr.value = [
-          { valueName: "监测时间", value: properties.recordTime },
-          ...arr,
-        ];
+      case 'rain':
+        AnnotationArr.value = [{ valueName: '监测时间', value: properties.recordTime }, ...arr];
         break;
     }
     string = Methtion(string);
-    console.log("数据", string);
+    console.log('数据', string);
   }
 };
 
-const Methtion = (StringName) => {
+const Methtion = StringName => {
   if (AnnotationArr.value.length) {
-    AnnotationArr.value.map((item) => {
+    AnnotationArr.value.map(item => {
       StringName += `${item.valueName}:${item.value}+'/n' `;
     });
     return StringName;
@@ -508,7 +515,7 @@
     domElement.webkitRequestFullScreen();
   }
 };
-const closeFun = (is) => {
+const closeFun = is => {
   dialogConfig.visible = is;
 };
 function anotherMeht(item) {
@@ -519,10 +526,10 @@
   Getproperties.value.wellCode = item.wellCode || item.dataName || item.pipeLine;
   Getproperties.value.id = item.id;
   Getproperties.value.gwMonitorId = item.gwMonitorId || item.id; //管网坡面
-  Getproperties.value.dataId = item.dataId || "";
+  Getproperties.value.dataId = item.dataId || '';
   Getproperties.value.stType = item.stType;
 
-  Getproperties.value.geometry = item.geometry || item.geometrys || "";
+  Getproperties.value.geometry = item.geometry || item.geometrys || '';
   // Terraformer.WKT.convert(turf.point(item.lonLat.split(",").map(Number)).geometry);
 
   Getproperties.value.waterRegionCode = item.lakeCode || item.waterRegionCode; //河湖水情  查询水系分区详情
@@ -532,7 +539,7 @@
   } else {
     Getproperties.value.daterange = null;
   }
-  console.log("Getproperties", Getproperties.value);
+  console.log('Getproperties', Getproperties.value);
   if (arrstcode.value.includes(item.stType)) {
     properties.stCode = item.stCode;
   }
@@ -540,15 +547,15 @@
   if (arrid.value.includes(item.stType)) {
     properties.id = item.pid || item.id;
   }
-  GetBoxmenu("", item.stType);
+  GetBoxmenu('', item.stType);
 }
 
 onMounted(() => {
   allScreen();
   useStore.getsewageData();
-  bus.on("DynamicBus", (item) => {
-    console.log("item", item);
-    dialogConfig.RefName = item.RefName || "";
+  bus.on('DynamicBus', item => {
+    console.log('item', item);
+    dialogConfig.RefName = item.RefName || '';
     dialogConfig.title = item.stName || item.name;
     // debugger;
     if (!!!item.NoPromise) {
@@ -561,24 +568,23 @@
       dialogConfig.dataID = item.pid ? item.pid : item.id;
       Getproperties.value.stCode = item.stCode;
       Getproperties.value.dataCode = item.dataCode;
-      Getproperties.value.wellcode =
-        item.wellCode || item.dataName || item.startPointNumber;
+      Getproperties.value.wellcode = item.wellCode || item.dataName || item.startPointNumber;
       Getproperties.value.id = item.relationId || item.id; //item.relationId监测告警的普通id
-      Getproperties.value.dataId = item.dataId || "";
+      Getproperties.value.dataId = item.dataId || '';
       Getproperties.value.stType = item.stType;
       Getproperties.value.geometry = item.geometry || item.geometrys;
       dialogConfig.visible = true;
     }
   });
-  bus.on("closedia", (e) => {
+  bus.on('closedia', e => {
     closediaMeth();
   });
-  bus.on("changeData", (e) => {
+  bus.on('changeData', e => {
     // switchArr();
   });
   // 部分公共弹窗需要使用一个查询时间,目前不确定后期有没有人使用同类型的弹窗,在此初始化,增加公共弹窗的兼容性
   // localStorage.setItem("JCFXDialogTimer", moment().format("YYYY-MM-DD"));
-  bus.on("xiaofeifei", (e) => {
+  bus.on('xiaofeifei', e => {
     // lngLat, properties = {}, layerId
 
     mapClick1(e.geometry.coordinates, e.properties, e.geometry.type);
@@ -586,18 +592,18 @@
 });
 
 onBeforeUnmount(() => {
-  bus.off("DynamicBus");
-  bus.off("closedia");
-  bus.off("changeData");
-  bus.off("xiaofeifei");
+  bus.off('DynamicBus');
+  bus.off('closedia');
+  bus.off('changeData');
+  bus.off('xiaofeifei');
 });
 </script>
 <style lang="scss">
-@import "@/assets/styles/pictureOnMap.scss";
+@import '@/assets/styles/pictureOnMap.scss';
 .pictureOnMap {
   width: 100%;
   height: 100%;
-  background: url("@/assets/images/pictureOnMap/maxBgc.png") no-repeat center;
+  background: url('@/assets/images/pictureOnMap/maxBgc.png') no-repeat center;
   background-size: 100% 100%;
   color: #fff;
   overflow: hidden;
diff --git a/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue b/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue
index 16f461f..fb0456c 100644
--- a/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue
+++ b/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="shipingjiankong">
-    <div class="leftbox">
+    <div class="leftbox" v-if="!videoList.includes(dataCode)">
       <div
         class="boxitem"
         :class="item.cameraId == AllData.cameraIndexCode ? 'actived' : ''"
@@ -12,25 +12,13 @@
         {{ item.cameraName }}
       </div>
     </div>
-    <div class="rightbox">
-      <!-- <HKVideo
-        ref="video"
-        :appkey="videoConfig.appKey"
-        :secret="videoConfig.appSecret"
-        :ip="videoConfig.ip"
-        :port="videoConfig.port"
-        :cameraIndexCode="AllData.cameraIndexCode"
-        :layout="AllData.layout"
-        :defaultList="AllData.defaultList"
-      ></HKVideo> -->
+    <div :class="videoList.includes(dataCode) ? 'onebox' : 'rightbox'">
       <videoDHone :channelId="AllData.cameraIndexCode"></videoDHone>
     </div>
   </div>
 </template>
 
 <script setup name="shipingjiankong">
-// import HKVideo from '@/components/videoHK/index.vue';
-import { HKconfig } from '@/utils/HKConfig';
 import { getdataCamera } from '@/api/MonitorAssetsOnMap';
 import videoDHone from '@/components/videoDHone/index.vue'; //实时视频
 
@@ -58,6 +46,9 @@
   arrid: {
     type: Array,
   },
+  videoList: {
+    type: Array,
+  },
 });
 
 const AllData = reactive({
@@ -69,26 +60,7 @@
   ],
 });
 const cameraName = ref('');
-const videoConfig = reactive({
-  appKey: HKconfig.appkey,
-  appSecret: HKconfig.secret,
-  ip: HKconfig.ip,
-  port: HKconfig.port,
-});
-const leftList = ref([
-  {
-    name: '视频1',
-    value: '1',
-  },
-  {
-    name: '视频2',
-    value: '2',
-  },
-  {
-    name: '视频3',
-    value: '3',
-  },
-]);
+const leftList = ref([]);
 
 // 左侧点击
 function leftclick(item) {
@@ -97,6 +69,13 @@
 
 // 获取监控视频列表
 function GetcameraList() {
+  console.log('props.videoList', props.videoList);
+  // 如果是单独视频站点的类型 就没有多个 不用查询 直接赋值点击地图获取到的stcode
+  if (props.videoList.includes(props.dataCode)) {
+    AllData.cameraIndexCode = props.dataID;
+    return;
+  }
+
   let params = {};
   // 站点的参数
   if (props.arrstcode.includes(props.dataCode)) {
@@ -123,8 +102,14 @@
 }
 
 onMounted(() => {
+  console.log('搞什么啊', props, props.dataId);
   GetcameraList();
-  console.log('props', props);
+});
+onBeforeUnmount(() => {
+  if (AllData.myVideoPlayer) {
+    hideDHPlayer();
+    AllData.myVideoPlayer.destroy();
+  }
 });
 </script>
 
@@ -165,4 +150,8 @@
 .rightbox {
   width: calc(100% - 200px);
 }
+
+.onebox {
+  width: 100%;
+}
 </style>
diff --git a/src/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue b/src/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue
index 7396b2a..c8ef81e 100644
--- a/src/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue
+++ b/src/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue
@@ -5,17 +5,8 @@
       <div class="closeIcon" @click="closeFun"></div>
     </div>
     <div class="contentBox flex-1">
-      <el-tabs
-        v-model="AllData.editableTabsValue"
-        :stretch="true"
-        @tab-click="TabsChange"
-      >
-        <el-tab-pane
-          v-for="item in AllData.editableTabs"
-          :key="item.name"
-          :label="item.title"
-          :name="item.name"
-        >
+      <el-tabs v-model="AllData.editableTabsValue" :stretch="true" @tab-click="TabsChange">
+        <el-tab-pane v-for="item in AllData.editableTabs" :key="item.name" :label="item.title" :name="item.name">
           <component
             :is="item.content"
             :dataID="dataID"
@@ -28,6 +19,7 @@
             v-if="AllData.RefreshName == item.name"
             :arrstcode="arrstcode"
             :arrid="arrid"
+            :videoList="videoList"
             :Getproperties="Getproperties"
           ></component>
         </el-tab-pane>
@@ -37,9 +29,9 @@
 </template>
 
 <script setup name="NewdialogTabs">
-import { ref, reactive, toRefs, onMounted } from "vue";
-const emit = defineEmits(["closeFun"]);
-import Config from "./DialogConfig";
+import { ref, reactive, toRefs, onMounted } from 'vue';
+const emit = defineEmits(['closeFun']);
+import Config from './DialogConfig';
 // 父元素传值
 // debugger;
 const props = defineProps({
@@ -80,16 +72,19 @@
   Getmenuarr: {
     type: Array,
   },
+  videoList: {
+    type: Array,
+  },
 });
 
 // 声明本页面中的变量
 const AllData = reactive({
-  editableTabsValue: "",
+  editableTabsValue: '',
   editableTabs: [],
-  RefreshName: "",
+  RefreshName: '',
 });
 
-const updateTabsType = (name) => {
+const updateTabsType = name => {
   AllData.editableTabsValue = name;
   AllData.RefreshName = name;
 };
@@ -99,16 +94,17 @@
   // console.log(tab, AllData.RefreshName);
 };
 const closeFun = () => {
-  emit("closeFun", false);
+  emit('closeFun', false);
 };
 onMounted(() => {
+  console.log('搞什么啊', props);
   // 获取当前组件已分配的组件ID与配置文件中的公共组件ID进行对比,控制展示的tab选项
   let ComparisonTable = Config.ComparisonTable;
   AllData.editableTabs = [];
   Promise.all(
     ComparisonTable.map(function (element) {
       // 动态修改后台返回的组件名称
-      props.Getmenuarr.map((item) => {
+      props.Getmenuarr.map(item => {
         if (item.moduleName == element.name) {
           element.title = item.menuName;
           element.show = item.show;
@@ -120,13 +116,13 @@
       }
     })
   ).then(function (data) {
-    data = data.filter((n) => n);
+    data = data.filter(n => n);
     //赋值其拥有的公共组件
     AllData.editableTabs = AllData.editableTabs.concat(data);
-    console.log(AllData.editableTabs, "公共组件");
+    console.log(AllData.editableTabs, '公共组件');
     //对自定义组件进行插入
-    props.customComponents.forEach((element) => {
-      if (element.sort && element.sort != "") {
+    props.customComponents.forEach(element => {
+      if (element.sort && element.sort != '') {
         // 如果有排序,就按照排序顺序插入到editableTabs中
         AllData.editableTabs.splice(element.sort, 0, element);
       } else if (element.sort == 0) {
@@ -137,11 +133,7 @@
         AllData.editableTabs.push(element);
       }
     });
-    if (
-      props.RefName == "" ||
-      props.RefName == undefined ||
-      !props.comIDs.includes(props.RefName)
-    ) {
+    if (props.RefName == '' || props.RefName == undefined || !props.comIDs.includes(props.RefName)) {
       // 默认展示第一个
       AllData.editableTabsValue = AllData.editableTabs[0].name;
       AllData.RefreshName = AllData.editableTabs[0].name;

diff --git a/src/api/MonitorAssetsOnMap.js b/src/api/MonitorAssetsOnMap.js
index 8795d6a..891804d 100644
--- a/src/api/MonitorAssetsOnMap.js
+++ b/src/api/MonitorAssetsOnMap.js
@@ -183,6 +183,16 @@
     params: query,
   });
 }
+
+// 视频单独的弹框菜单
+export function drainageDispatchGetMenuVidoe(query) {
+  return request({
+    url: `/business/drainageMap/getMenu`,
+    method: 'get',
+    params: query,
+  });
+}
+
 // 汇水分区查询关联7类数据  get  id
 export function getWaterRegionData(query) {
   return request({
@@ -380,4 +390,4 @@
     method: 'get',
     params: query,
   });
-}
\ No newline at end of file
+}
diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue
index 8a8109e..97065bf 100644
--- a/src/components/videoDHone/index.vue
+++ b/src/components/videoDHone/index.vue
@@ -13,7 +13,7 @@
   // 内网、公网 4个配置
   channelId: {
     type: String,
-    default: () => '1000131$1$0$0',
+    default: () => '',
   },
 });
 
@@ -26,16 +26,16 @@
   pluginLoginInfo: {
     // 传入 icc 平台的登录信息
     // 内网端口
-    // host: '172.28.41.16', // icc 平台ip
-    // port: '443', // icc 平台端口 https 默认 443
-    // username: 'sfduijie', // icc 平台用户名
-    // password: 'sfduijie@123', // icc 平台密码
-
-    // 外网端口
-    host: '220.249.115.224', // icc 平台ip
-    port: '1443', // icc 平台端口 https 默认 443
+    host: '172.28.41.16', // icc 平台ip
+    port: '443', // icc 平台端口 https 默认 443
     username: 'sfduijie', // icc 平台用户名
     password: 'sfduijie@123', // icc 平台密码
+
+    // 外网端口
+    // host: '220.249.115.224', // icc 平台ip
+    // port: '1443', // icc 平台端口 https 默认 443
+    // username: 'sfduijie', // icc 平台用户名
+    // password: 'sfduijie@123', // icc 平台密码
   },
 });
 
@@ -77,11 +77,13 @@
     createSuccess: versionInfo => {
       // 该回调触发后，我们可以进行实时预览/录像回放等操作
       // desc.value = '创建成功!!!' + versionInfo.message;
+      console.log('准备进入', AllData.channelId);
       AllData.Getchajian = 1;
       startReal();
     },
     // 创建播放器失败回调
     createError: err => {
+      console.log('错误', JSON.stringify(err));
       // 有错误码，可打印查看错误信息
       // desc.value = '创建失败!!!' + JSON.stringify(err);
       AllData.Getchajian = null;
@@ -158,6 +160,7 @@
 
 // 实时预览
 function startReal() {
+  console.log('开始实时预览', AllData.channelId);
   AllData.myVideoPlayer.startReal([
     // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码) <br />可在ICC平台设备管理页面查看到通道id
     {
@@ -217,7 +220,7 @@
   listConfig(paramas).then(res => {
     AllData.URL = res.data[0].configValue;
 
-    desc.value = `插件启动失败，请检查插件是否安装！
+    desc.value = `插件启动失败，正在重试，请检查插件是否安装！
     <a href=${AllData.URL} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
   });
 }
diff --git a/src/views/pictureOnMap/index.vue b/src/views/pictureOnMap/index.vue
index 4b84aaf..cfbc3ac 100644
--- a/src/views/pictureOnMap/index.vue
+++ b/src/views/pictureOnMap/index.vue
@@ -2,11 +2,7 @@
   <div class="pictureOnMap">
     <TopTab />
     <div class="mainContentBox">
-      <MapBox
-        :initJson="`/static/libs/mapbox/style/wh_dhgx.json`"
-        :loadCallback="loadCallback"
-        @mapClick1="mapClick1"
-      ></MapBox>
+      <MapBox :initJson="`/static/libs/mapbox/style/wh_dhgx.json`" :loadCallback="loadCallback" @mapClick1="mapClick1"></MapBox>
       <router-view></router-view>
       <recordPage></recordPage>
       <LayerControl></LayerControl>
@@ -32,6 +28,7 @@
         :title="dialogConfig.title"
         :arrstcode="arrstcode"
         :arrid="arrid"
+        :videoList="videoList"
         :Getproperties="Getproperties"
         :Getmenuarr="Getmenuarr"
         @closeFun="closeFun"
@@ -40,23 +37,23 @@
   </div>
 </template>
 <script setup>
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router';
 
-import line from "../../../public/static/libs/mapbox/json/line.json";
-import point from "../../../public/static/libs/mapbox/json/point.json";
-import { ref, reactive, onMounted, nextTick } from "vue";
-import TopTab from "./TopTab/index.vue";
-import MapBox from "../../components/Map/MapBox";
-import bus from "@/bus";
-import useUserStore from "@/store/modules/user";
-import DialogTabs from "@/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue";
-import { drainageDispatchGetMenu } from "@/api/MonitorAssetsOnMap";
-import recordPage from "@/views/voice/recordPage/index";
-import usepartitionStore from "@/store/modules/partition";
+import line from '../../../public/static/libs/mapbox/json/line.json';
+import point from '../../../public/static/libs/mapbox/json/point.json';
+import { ref, reactive, onMounted, nextTick } from 'vue';
+import TopTab from './TopTab/index.vue';
+import MapBox from '../../components/Map/MapBox';
+import bus from '@/bus';
+import useUserStore from '@/store/modules/user';
+import DialogTabs from '@/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue';
+import { drainageDispatchGetMenu, drainageDispatchGetMenuVidoe } from '@/api/MonitorAssetsOnMap';
+import recordPage from '@/views/voice/recordPage/index';
+import usepartitionStore from '@/store/modules/partition';
 
-import LayerControl from "@/views/pictureOnMap/LayerControl.vue";
-import inputSearch from "@/views/pictureOnMap/inputSearch.vue";
-import { FALSE } from "ol/functions";
+import LayerControl from '@/views/pictureOnMap/LayerControl.vue';
+import inputSearch from '@/views/pictureOnMap/inputSearch.vue';
+import { FALSE } from 'ol/functions';
 
 const useStore = usepartitionStore();
 const router = useRouter();
@@ -69,14 +66,14 @@
 const GetcomIDs = ref([]);
 const dialogConfig = reactive({
   visible: false,
-  dataID: "",
-  dataCode: "",
+  dataID: '',
+  dataCode: '',
   data: {},
   comIDs: [],
   customData: [],
-  RefName: "",
-  title: "详情",
-  typeName: "",
+  RefName: '',
+  title: '详情',
+  typeName: '',
 });
 const closediaMeth = () => {
   dialogConfig.visible = false;
@@ -84,89 +81,91 @@
 // 站点数组
 const arrstcode = ref([
   // 站点类型名称: 编码
-  "outlet_water_level", // 排口流量
-  "outlet_quality", // 排口水质
-  "channel_quality", // 港渠水质
-  "channel_water_level", // 港渠水位
-  "lake_water_level", // 湖泊水位
-  "waterlogging", // 渍水监测点（注意：这里编码没有后缀，可能是特例或故意为之）
-  "rain", // 雨量站
-  "rainwater_pipeline_quality", // 雨水管网水质
-  "rainwater_pipeline_quality_city", // 雨水管网水质
-  "sewage_pipeline_quality", // 污水管网水质
-  "sewage_pipeline_quality_city", // 污水管网水质
-  "rainwater_pipeline_quality_area", // 接驳口
-  "rainwater_pipeline_water_level", // 雨水管网液位
-  "reservoir_water_level", //水库水位
-  "rainPumpStation", //雨水泵站
-  "dirtyPumpStation", //污水泵站
-  "sewageStation", //污水厂
-  "gateStation", //闸门
-  "pump_water_level", //泵站液位
-  "outlet_water_level_city", //排口流量
+  'outlet_water_level', // 排口流量
+  'outlet_quality', // 排口水质
+  'channel_quality', // 港渠水质
+  'channel_water_level', // 港渠水位
+  'lake_water_level', // 湖泊水位
+  'waterlogging', // 渍水监测点（注意：这里编码没有后缀，可能是特例或故意为之）
+  'rain', // 雨量站
+  'rainwater_pipeline_quality', // 雨水管网水质
+  'rainwater_pipeline_quality_city', // 雨水管网水质
+  'sewage_pipeline_quality', // 污水管网水质
+  'sewage_pipeline_quality_city', // 污水管网水质
+  'rainwater_pipeline_quality_area', // 接驳口
+  'rainwater_pipeline_water_level', // 雨水管网液位
+  'reservoir_water_level', //水库水位
+  'rainPumpStation', //雨水泵站
+  'dirtyPumpStation', //污水泵站
+  'sewageStation', //污水厂
+  'gateStation', //闸门
+  'pump_water_level', //泵站液位
+  'outlet_water_level_city', //排口流量
 ]);
 // 基本数据
 const arrid = ref([
-  "diversion_well_info", // 分流井
-  "drainage_info", // 排水户
-  "lake_info", // 湖泊
-  "outlet_info", // 排口
-  "port_channel_info", // 港渠
-  "rain_water_pump_station_info", // 雨水泵站
-  "region_info", // 分区信息
-  "reservoir_info", // 水库
-  "sewage_factory_info", // 污水处理厂
-  "sewage_factory_station_info", //污水处理站
-  "sewage_pump_station_info", // 污水泵站
-  "storage_tank_info", // 调蓄池
-  "water_gate_info", // 水闸
-  "waterlogging_point_info", // 渍水点
-  "water_region_info", // 水系汇水分区
-  "storehouse", //物资仓库
-  "dikeGood", //堤防备料
+  'diversion_well_info', // 分流井
+  'drainage_info', // 排水户
+  'lake_info', // 湖泊
+  'outlet_info', // 排口
+  'port_channel_info', // 港渠
+  'rain_water_pump_station_info', // 雨水泵站
+  'region_info', // 分区信息
+  'reservoir_info', // 水库
+  'sewage_factory_info', // 污水处理厂
+  'sewage_factory_station_info', //污水处理站
+  'sewage_pump_station_info', // 污水泵站
+  'storage_tank_info', // 调蓄池
+  'water_gate_info', // 水闸
+  'waterlogging_point_info', // 渍水点
+  'water_region_info', // 水系汇水分区
+  'storehouse', //物资仓库
+  'dikeGood', //堤防备料
+]);
+// 视频点
+const videoList = ref([
+  'gangqu_video', // 港渠视频
+  'water_logging_video', // 渍水点视频
+  'pump_video', // 泵站视频
 ]);
 // 基础数据
 const switchStcode = (Name, type) => {
-  if (type == "outlet_info") {
+  if (type == 'outlet_info') {
     pkClick(Getproperties.value);
   }
-  console.log("GetcomIDs.value", GetcomIDs.value);
+  console.log('GetcomIDs.value', GetcomIDs.value);
   // 去除排水体系泵站通用弹框,通过ReturnPSTX来判断是否不打开公共弹窗
-  console.log("arrid.value", arrid.value);
+  console.log('arrid.value', arrid.value);
   // debugger;
   if (
-    (type == "rain_water_pump_station_info" || type == "sewage_pump_station_info") &&
-    router.currentRoute.value.fullPath == "/DrainageSystem" &&
-    localStorage.getItem("ReturnPSTX") == "off"
+    (type == 'rain_water_pump_station_info' || type == 'sewage_pump_station_info') &&
+    router.currentRoute.value.fullPath == '/DrainageSystem' &&
+    localStorage.getItem('ReturnPSTX') == 'off'
   ) {
     // 使用一次后恢复默认值:false
-    localStorage.setItem("ReturnPSTX", "off"); //On打开公共弹窗 off不打开公共弹窗  默认为On
+    localStorage.setItem('ReturnPSTX', 'off'); //On打开公共弹窗 off不打开公共弹窗  默认为On
     return;
   }
 
   // 使用一次后恢复默认值:false
-  localStorage.setItem("ReturnPSTX", "off"); //On打开公共弹窗 off不打开公共弹窗  默认为On
+  localStorage.setItem('ReturnPSTX', 'off'); //On打开公共弹窗 off不打开公共弹窗  默认为On
   if (arrid.value.includes(type)) {
     dialogConfig.visible = true;
     dialogConfig.dataCode = type;
     dialogConfig.comIDs = GetcomIDs.value;
-    dialogConfig.dataID = Getproperties.value.pid
-      ? Getproperties.value.pid
-      : Getproperties.value.id;
+    dialogConfig.dataID = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
   } else {
     return;
   }
 };
 // 类型弹框判断
-const typecodeswitch = (type) => {
+const typecodeswitch = type => {
   if (diabox[type]) {
     // console.log('diabox[type]', diabox[type]);
-    window[type + "_map"] = diabox[type]
-      .filter((i) => i.geometry)
+    window[type + '_map'] = diabox[type]
+      .filter(i => i.geometry)
       .map((item, index) => {
-        let coordinates = turf.getCoords(
-          turf.center(Terraformer.WKT.parse(item.geometry))
-        );
+        let coordinates = turf.getCoords(turf.center(Terraformer.WKT.parse(item.geometry)));
         const popup = new mapboxgl1.Popup({
           closeButton: false,
           closeOnClick: false,
@@ -180,7 +179,7 @@
       });
 
     nextTick(() => {
-      window[type + "_map"].forEach((i) => i._setOpacity(0));
+      window[type + '_map'].forEach(i => i._setOpacity(0));
     });
   }
 };
@@ -188,7 +187,7 @@
   let typearr = [];
   for (var k in diabox) {
     typearr.push(k);
-    appStore.MapData.map((item) => {
+    appStore.MapData.map(item => {
       if (item.pointType == k) {
         diabox[k] = item.data;
       }
@@ -213,53 +212,78 @@
   }
 };
 // 智慧水务大脑一张图 特定大屏动态菜单
-const specificFun = (type) => {
+const specificFun = type => {
   // 监测预警模块弹框
   // value值 统一菜单类型
   //name值 特指智慧水务大脑获取的动态菜单类型
   let arr = [
     {
-      name: "dp_zsfx", //渍水点
-      value: "waterlogging",
+      name: 'dp_zsfx', //渍水点
+      value: 'waterlogging',
     },
     {
-      name: "dp_hhsq", //河湖水情
-      value: "lake_water_level",
+      name: 'dp_hhsq', //河湖水情
+      value: 'lake_water_level',
     },
     {
-      name: "dp_bzgq", //泵站工情
-      value: "rainPumpStation", //雨水泵站
+      name: 'dp_bzgq', //泵站工情
+      value: 'rainPumpStation', //雨水泵站
     },
     {
-      name: "dp_gwfx", //管网风险
-      value: "rainwater_pipeline_water_level", //雨水管网液位
+      name: 'dp_gwfx', //管网风险
+      value: 'rainwater_pipeline_water_level', //雨水管网液位
     },
     {
-      name: "dp_gwfx", //管网风险
-      value: "rainwater_pipeline_quality", //雨水管网水质
+      name: 'dp_gwfx', //管网风险
+      value: 'rainwater_pipeline_quality', //雨水管网水质
     },
     {
-      name: "dp_gwfx", //接驳口
-      value: "rainwater_pipeline_quality_area", //接驳口
+      name: 'dp_gwfx', //接驳口
+      value: 'rainwater_pipeline_quality_area', //接驳口
     },
     {
-      name: "dp_wsgwfx", //大屏污水管网风险分析弹框
-      value: "sewage_pipeline_quality", //雨水管网水质
+      name: 'dp_wsgwfx', //大屏污水管网风险分析弹框
+      value: 'sewage_pipeline_quality', //雨水管网水质
     },
     // {
     //   name: "dp_ysgwfx", //大屏雨水管网风险分析弹框
     //   value: "rainwater_pipeline_quality", //雨水管网水质
     // },
   ];
-  return arr.find((item) => item.value == type)?.name || null;
+  return arr.find(item => item.value == type)?.name || null;
 };
 
 // 获取动态弹框菜单
 const GetBoxmenu = (Name, type) => {
-  console.log("name", Name);
-  console.log("type", type);
+  console.log('name', Name);
+  console.log('type', type);
   GetcomIDs.value = [];
-  let dataId = "";
+  let dataId = '';
+
+  if (videoList.value.includes(type)) {
+    // 视频单独的获取菜单的
+    let params = {
+      dataCode: type,
+      scene: 'basis_monitor',
+    };
+    drainageDispatchGetMenuVidoe(params).then(res => {
+      console.log('获得的菜单', res.data);
+      Getmenuarr.value = res.data;
+      if (res.data && res.data.length) {
+        res.data.map(item => {
+          GetcomIDs.value.push(item.moduleName);
+        });
+      }
+
+      dialogConfig.visible = true;
+      dialogConfig.dataCode = type;
+      dialogConfig.dataID = Getproperties.value.stCode;
+      dialogConfig.comIDs = GetcomIDs.value;
+    });
+
+    return;
+  }
+
   if (arrstcode.value.includes(type)) {
     dataId = Getproperties.value.stCode;
   }
@@ -267,42 +291,43 @@
   if (arrid.value.includes(type)) {
     dataId = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
   }
-  console.log("dataId", dataId);
+
+  console.log('dataId', dataId);
   if (!dataId) {
     //渍水调度
-    if (type == "waterlog_point") {
-      bus.emit("showZSdispatch", Getproperties.value);
+    if (type == 'waterlog_point') {
+      bus.emit('showZSdispatch', Getproperties.value);
     }
     // proxy.$modal.msgSuccess('');
     return;
   }
   // debugger;
   // 没有注释 不理解前面的代码意义,只能在这里写死
-  if (type == "rainwater_pipeline_quality_area") {
-    type = "rainwater_pipeline_quality";
-    dialogConfig.RefName = "jiancefenxiGWFX";
+  if (type == 'rainwater_pipeline_quality_area') {
+    type = 'rainwater_pipeline_quality';
+    dialogConfig.RefName = 'jiancefenxiGWFX';
   }
-  if (type == "outlet_water_level_city") {
-    type = "outlet_water_level";
+  if (type == 'outlet_water_level_city') {
+    type = 'outlet_water_level';
   }
-  if (type == "rainwater_pipeline_quality_city") {
-    type = "rainwater_pipeline_quality";
+  if (type == 'rainwater_pipeline_quality_city') {
+    type = 'rainwater_pipeline_quality';
   }
-  if (type == "sewage_pipeline_quality_city") {
-    type = "sewage_pipeline_quality";
+  if (type == 'sewage_pipeline_quality_city') {
+    type = 'sewage_pipeline_quality';
   }
 
   let params = {
     dataCode: type,
-    scene: specificFun(type) || "basis_monitor",
+    scene: specificFun(type) || 'basis_monitor',
     // scene: "basis_monitor",
     dataId: dataId,
   };
-  drainageDispatchGetMenu(params).then((res) => {
-    console.log("获得的菜单", res.data);
+  drainageDispatchGetMenu(params).then(res => {
+    console.log('获得的菜单', res.data);
     Getmenuarr.value = res.data;
     if (res.data && res.data.length) {
-      res.data.map((item) => {
+      res.data.map(item => {
         GetcomIDs.value.push(item.moduleName);
       });
     }
@@ -317,132 +342,117 @@
 const pointandlineOpen = (type, properties) => {
   dialogConfig.visible = true;
   switch (type) {
-    case "pipeline_info_text":
-      dialogConfig.title = "管线信息";
+    case 'pipeline_info_text':
+      dialogConfig.title = '管线信息';
       break;
-    case "pipeline_info":
-      dialogConfig.title = "管线信息";
+    case 'pipeline_info':
+      dialogConfig.title = '管线信息';
       break;
-    case "pipeline_point":
-      dialogConfig.title = "管点信息";
+    case 'pipeline_point':
+      dialogConfig.title = '管点信息';
       break;
-    case "point":
-      dialogConfig.title = "问题管线";
+    case 'point':
+      dialogConfig.title = '问题管线';
       break;
   }
 
   Getmenuarr.value = [
     {
-      menuName: "管网信息",
+      menuName: '管网信息',
       show: true,
-      moduleName: "PointAndLine",
+      moduleName: 'PointAndLine',
     },
   ];
   // debugger;
   // dialogConfig.dataID = '0371000003';
-  dialogConfig.comIDs = ["PointAndLine"];
-  dialogConfig.RefName = "PointAndLine";
+  dialogConfig.comIDs = ['PointAndLine'];
+  dialogConfig.RefName = 'PointAndLine';
 };
 const loadCallback = () => {};
 // 排口溯源
-const pkClick = async (properties) => {
+const pkClick = async properties => {
   // debugger;
   if (!properties.wellCode) return;
   let results = await upStreamAnalyse({ endPointNumber: properties.wellCode });
   let pipelines = results.data.pipelineInfoList
-    .map((i) =>
+    .map(i =>
       turf.feature(Terraformer.WKT.parse(i.geometrys), {
         ...i,
-        area: i.pipelineType == "Rain" ? "雨水" : "污水",
+        area: i.pipelineType == 'Rain' ? '雨水' : '污水',
       })
     )
-    .map((i) =>
-      i.properties.flowDirection == 0
-        ? turf.lineString(turf.getCoords(i).reverse(), i.properties)
-        : i
-    );
+    .map(i => (i.properties.flowDirection == 0 ? turf.lineString(turf.getCoords(i).reverse(), i.properties) : i));
   newfiberMap
     .getLayers()
-    .filter((i) => i.newfiberId == "水系流向")[0]
+    .filter(i => i.newfiberId == '水系流向')[0]
     .getSource()
     .setData(turf.featureCollection(pipelines));
 };
 
-const a = (properties) => {
-  const keys_ = ["雨水", "污水"];
-  const keys = ["1_泵站", "1_污水处理厂", "分区流向", "分区流向1"];
-  bus.emit("removeMapDatas", keys);
+const a = properties => {
+  const keys_ = ['雨水', '污水'];
+  const keys = ['1_泵站', '1_污水处理厂', '分区流向', '分区流向1'];
+  bus.emit('removeMapDatas', keys);
   newfiberMap
     .getLayers()
-    .filter((i) => i.newfiberId == keys[3])[0]
+    .filter(i => i.newfiberId == keys[3])[0]
     .getSource()
     .setData(turf.featureCollection([]));
   const key = properties.c_layer.includes(keys_[0]) ? keys_[0] : keys_[1];
   const nameKey = properties.name.substring(0, 2);
-  let features = line.features.filter(
-    (i) => i.properties.area.includes(key) && i.properties.name.includes(nameKey)
-  );
-  let features1 = point.features.filter(
-    (i) => i.properties.area.includes(key) && i.properties.system.includes(nameKey)
-  );
-  let points = _.groupBy(features1, (a) => a.properties.type);
-  features.forEach((i) => {
+  let features = line.features.filter(i => i.properties.area.includes(key) && i.properties.name.includes(nameKey));
+  let features1 = point.features.filter(i => i.properties.area.includes(key) && i.properties.system.includes(nameKey));
+  let points = _.groupBy(features1, a => a.properties.type);
+  features.forEach(i => {
     i.properties.type = keys[2];
-    i.properties.color = key == keys_[0] ? "rgba(21,127,176,1)" : "rgba(255,0,0,1)";
+    i.properties.color = key == keys_[0] ? 'rgba(21,127,176,1)' : 'rgba(255,0,0,1)';
   });
-  Object.keys(points).map((key) =>
-    bus.emit("setGeoJSON", {
+  Object.keys(points).map(key =>
+    bus.emit('setGeoJSON', {
       json: turf.featureCollection(
-        points[key].map((i) => ({
+        points[key].map(i => ({
           type: i.type,
           geometry: i.geometry,
-          properties: { ...i.properties, type: "1_" + key },
+          properties: { ...i.properties, type: '1_' + key },
         }))
       ),
-      key: "1_" + key,
+      key: '1_' + key,
     })
   );
-  bus.emit("setGeoJSON", { json: turf.featureCollection(features), key: keys[2] });
+  bus.emit('setGeoJSON', { json: turf.featureCollection(features), key: keys[2] });
   newfiberMap
     .getLayers()
-    .filter((i) => i.newfiberId == keys[3])[0]
+    .filter(i => i.newfiberId == keys[3])[0]
     .getSource()
     .setData(turf.featureCollection(features));
 };
 
 const mapClick1 = (lngLat, properties = {}, layerId) => {
-  console.log("经纬度", lngLat);
-  console.log("数据", properties);
-  console.log("layerid", layerId);
+  console.log('经纬度', lngLat);
+  console.log('数据', properties);
+  console.log('layerid', layerId);
   dialogConfig.title = properties.stName || properties.name;
 
   // 处理标注
   Getproperties.value = properties;
-  let type = properties ? properties.type : "" || 1;
-  let Name = properties ? properties.pointTypeName : "" || "";
+  let type = properties ? properties.type : '' || 1;
+  let Name = properties ? properties.pointTypeName : '' || '';
   // Annotation(properties);
-  console.log("1111", type, layerId);
-  if (properties.layer == "排水分区") {
+  console.log('1111', type, layerId);
+  if (properties.layer == '排水分区') {
     return;
   }
-  let layerIdarr = [
-    "湖泊",
-    "湖泊_text",
-    "港渠",
-    "港渠_text",
-    "水库管理范围",
-    "水库管理范围_text",
-  ];
+  let layerIdarr = ['湖泊', '湖泊_text', '港渠', '港渠_text', '水库管理范围', '水库管理范围_text'];
   let newsetarr = [
-    { name: "湖泊", value: "lake_info" },
-    { name: "湖泊_text", value: "lake_info" },
-    { name: "港渠", value: "port_channel_info" },
-    { name: "港渠_text", value: "port_channel_info" },
-    { name: "水库管理范围", value: "reservoir_info" },
-    { name: "水库管理范围_text", value: "reservoir_info" },
+    { name: '湖泊', value: 'lake_info' },
+    { name: '湖泊_text', value: 'lake_info' },
+    { name: '港渠', value: 'port_channel_info' },
+    { name: '港渠_text', value: 'port_channel_info' },
+    { name: '水库管理范围', value: 'reservoir_info' },
+    { name: '水库管理范围_text', value: 'reservoir_info' },
   ];
   if (layerIdarr.includes(layerId)) {
-    type = newsetarr.find((item) => {
+    type = newsetarr.find(item => {
       return layerId == item.name;
     }).value;
     GetBoxmenu(layerId, type);
@@ -450,15 +460,15 @@
     return;
   }
 
-  let arr = ["pipeline_point", "pipeline_info", "pipeline_info_text"];
+  let arr = ['pipeline_point', 'pipeline_info', 'pipeline_info_text'];
 
   if (arr.includes(layerId)) {
-    console.log("进了方法");
+    console.log('进了方法');
     pointandlineOpen(layerId);
     dialogConfig.dataCode = layerId;
-  } else if (properties.type && properties.type == "问题管线") {
-    pointandlineOpen("point");
-    dialogConfig.dataCode = "point";
+  } else if (properties.type && properties.type == '问题管线') {
+    pointandlineOpen('point');
+    dialogConfig.dataCode = 'point';
   } else {
     if (type) {
       GetBoxmenu(Name, type);
@@ -468,30 +478,27 @@
 
 // 根据类型处理接口返回的标注内容
 const AnnotationArr = ref([]);
-const StringName = ref("");
-const Annotation = (properties) => {
+const StringName = ref('');
+const Annotation = properties => {
   if (properties.siteData && properties.siteData.length) {
     let arr = JSON.parse(properties.siteData);
     AnnotationArr.value = arr;
-    console.log("数据", arr);
-    let string = "";
+    console.log('数据', arr);
+    let string = '';
 
     switch (properties.type) {
-      case "rain":
-        AnnotationArr.value = [
-          { valueName: "监测时间", value: properties.recordTime },
-          ...arr,
-        ];
+      case 'rain':
+        AnnotationArr.value = [{ valueName: '监测时间', value: properties.recordTime }, ...arr];
         break;
     }
     string = Methtion(string);
-    console.log("数据", string);
+    console.log('数据', string);
   }
 };
 
-const Methtion = (StringName) => {
+const Methtion = StringName => {
   if (AnnotationArr.value.length) {
-    AnnotationArr.value.map((item) => {
+    AnnotationArr.value.map(item => {
       StringName += `${item.valueName}:${item.value}+'/n' `;
     });
     return StringName;
@@ -508,7 +515,7 @@
     domElement.webkitRequestFullScreen();
   }
 };
-const closeFun = (is) => {
+const closeFun = is => {
   dialogConfig.visible = is;
 };
 function anotherMeht(item) {
@@ -519,10 +526,10 @@
   Getproperties.value.wellCode = item.wellCode || item.dataName || item.pipeLine;
   Getproperties.value.id = item.id;
   Getproperties.value.gwMonitorId = item.gwMonitorId || item.id; //管网坡面
-  Getproperties.value.dataId = item.dataId || "";
+  Getproperties.value.dataId = item.dataId || '';
   Getproperties.value.stType = item.stType;
 
-  Getproperties.value.geometry = item.geometry || item.geometrys || "";
+  Getproperties.value.geometry = item.geometry || item.geometrys || '';
   // Terraformer.WKT.convert(turf.point(item.lonLat.split(",").map(Number)).geometry);
 
   Getproperties.value.waterRegionCode = item.lakeCode || item.waterRegionCode; //河湖水情  查询水系分区详情
@@ -532,7 +539,7 @@
   } else {
     Getproperties.value.daterange = null;
   }
-  console.log("Getproperties", Getproperties.value);
+  console.log('Getproperties', Getproperties.value);
   if (arrstcode.value.includes(item.stType)) {
     properties.stCode = item.stCode;
   }
@@ -540,15 +547,15 @@
   if (arrid.value.includes(item.stType)) {
     properties.id = item.pid || item.id;
   }
-  GetBoxmenu("", item.stType);
+  GetBoxmenu('', item.stType);
 }
 
 onMounted(() => {
   allScreen();
   useStore.getsewageData();
-  bus.on("DynamicBus", (item) => {
-    console.log("item", item);
-    dialogConfig.RefName = item.RefName || "";
+  bus.on('DynamicBus', item => {
+    console.log('item', item);
+    dialogConfig.RefName = item.RefName || '';
     dialogConfig.title = item.stName || item.name;
     // debugger;
     if (!!!item.NoPromise) {
@@ -561,24 +568,23 @@
       dialogConfig.dataID = item.pid ? item.pid : item.id;
       Getproperties.value.stCode = item.stCode;
       Getproperties.value.dataCode = item.dataCode;
-      Getproperties.value.wellcode =
-        item.wellCode || item.dataName || item.startPointNumber;
+      Getproperties.value.wellcode = item.wellCode || item.dataName || item.startPointNumber;
       Getproperties.value.id = item.relationId || item.id; //item.relationId监测告警的普通id
-      Getproperties.value.dataId = item.dataId || "";
+      Getproperties.value.dataId = item.dataId || '';
       Getproperties.value.stType = item.stType;
       Getproperties.value.geometry = item.geometry || item.geometrys;
       dialogConfig.visible = true;
     }
   });
-  bus.on("closedia", (e) => {
+  bus.on('closedia', e => {
     closediaMeth();
   });
-  bus.on("changeData", (e) => {
+  bus.on('changeData', e => {
     // switchArr();
   });
   // 部分公共弹窗需要使用一个查询时间,目前不确定后期有没有人使用同类型的弹窗,在此初始化,增加公共弹窗的兼容性
   // localStorage.setItem("JCFXDialogTimer", moment().format("YYYY-MM-DD"));
-  bus.on("xiaofeifei", (e) => {
+  bus.on('xiaofeifei', e => {
     // lngLat, properties = {}, layerId
 
     mapClick1(e.geometry.coordinates, e.properties, e.geometry.type);
@@ -586,18 +592,18 @@
 });
 
 onBeforeUnmount(() => {
-  bus.off("DynamicBus");
-  bus.off("closedia");
-  bus.off("changeData");
-  bus.off("xiaofeifei");
+  bus.off('DynamicBus');
+  bus.off('closedia');
+  bus.off('changeData');
+  bus.off('xiaofeifei');
 });
 </script>
 <style lang="scss">
-@import "@/assets/styles/pictureOnMap.scss";
+@import '@/assets/styles/pictureOnMap.scss';
 .pictureOnMap {
   width: 100%;
   height: 100%;
-  background: url("@/assets/images/pictureOnMap/maxBgc.png") no-repeat center;
+  background: url('@/assets/images/pictureOnMap/maxBgc.png') no-repeat center;
   background-size: 100% 100%;
   color: #fff;
   overflow: hidden;
diff --git a/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue b/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue
index 16f461f..fb0456c 100644
--- a/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue
+++ b/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="shipingjiankong">
-    <div class="leftbox">
+    <div class="leftbox" v-if="!videoList.includes(dataCode)">
       <div
         class="boxitem"
         :class="item.cameraId == AllData.cameraIndexCode ? 'actived' : ''"
@@ -12,25 +12,13 @@
         {{ item.cameraName }}
       </div>
     </div>
-    <div class="rightbox">
-      <!-- <HKVideo
-        ref="video"
-        :appkey="videoConfig.appKey"
-        :secret="videoConfig.appSecret"
-        :ip="videoConfig.ip"
-        :port="videoConfig.port"
-        :cameraIndexCode="AllData.cameraIndexCode"
-        :layout="AllData.layout"
-        :defaultList="AllData.defaultList"
-      ></HKVideo> -->
+    <div :class="videoList.includes(dataCode) ? 'onebox' : 'rightbox'">
       <videoDHone :channelId="AllData.cameraIndexCode"></videoDHone>
     </div>
   </div>
 </template>
 
 <script setup name="shipingjiankong">
-// import HKVideo from '@/components/videoHK/index.vue';
-import { HKconfig } from '@/utils/HKConfig';
 import { getdataCamera } from '@/api/MonitorAssetsOnMap';
 import videoDHone from '@/components/videoDHone/index.vue'; //实时视频
 
@@ -58,6 +46,9 @@
   arrid: {
     type: Array,
   },
+  videoList: {
+    type: Array,
+  },
 });
 
 const AllData = reactive({
@@ -69,26 +60,7 @@
   ],
 });
 const cameraName = ref('');
-const videoConfig = reactive({
-  appKey: HKconfig.appkey,
-  appSecret: HKconfig.secret,
-  ip: HKconfig.ip,
-  port: HKconfig.port,
-});
-const leftList = ref([
-  {
-    name: '视频1',
-    value: '1',
-  },
-  {
-    name: '视频2',
-    value: '2',
-  },
-  {
-    name: '视频3',
-    value: '3',
-  },
-]);
+const leftList = ref([]);
 
 // 左侧点击
 function leftclick(item) {
@@ -97,6 +69,13 @@
 
 // 获取监控视频列表
 function GetcameraList() {
+  console.log('props.videoList', props.videoList);
+  // 如果是单独视频站点的类型 就没有多个 不用查询 直接赋值点击地图获取到的stcode
+  if (props.videoList.includes(props.dataCode)) {
+    AllData.cameraIndexCode = props.dataID;
+    return;
+  }
+
   let params = {};
   // 站点的参数
   if (props.arrstcode.includes(props.dataCode)) {
@@ -123,8 +102,14 @@
 }
 
 onMounted(() => {
+  console.log('搞什么啊', props, props.dataId);
   GetcameraList();
-  console.log('props', props);
+});
+onBeforeUnmount(() => {
+  if (AllData.myVideoPlayer) {
+    hideDHPlayer();
+    AllData.myVideoPlayer.destroy();
+  }
 });
 </script>
 
@@ -165,4 +150,8 @@
 .rightbox {
   width: calc(100% - 200px);
 }
+
+.onebox {
+  width: 100%;
+}
 </style>
diff --git a/src/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue b/src/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue
index 7396b2a..c8ef81e 100644
--- a/src/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue
+++ b/src/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue
@@ -5,17 +5,8 @@
       <div class="closeIcon" @click="closeFun"></div>
     </div>
     <div class="contentBox flex-1">
-      <el-tabs
-        v-model="AllData.editableTabsValue"
-        :stretch="true"
-        @tab-click="TabsChange"
-      >
-        <el-tab-pane
-          v-for="item in AllData.editableTabs"
-          :key="item.name"
-          :label="item.title"
-          :name="item.name"
-        >
+      <el-tabs v-model="AllData.editableTabsValue" :stretch="true" @tab-click="TabsChange">
+        <el-tab-pane v-for="item in AllData.editableTabs" :key="item.name" :label="item.title" :name="item.name">
           <component
             :is="item.content"
             :dataID="dataID"
@@ -28,6 +19,7 @@
             v-if="AllData.RefreshName == item.name"
             :arrstcode="arrstcode"
             :arrid="arrid"
+            :videoList="videoList"
             :Getproperties="Getproperties"
           ></component>
         </el-tab-pane>
@@ -37,9 +29,9 @@
 </template>
 
 <script setup name="NewdialogTabs">
-import { ref, reactive, toRefs, onMounted } from "vue";
-const emit = defineEmits(["closeFun"]);
-import Config from "./DialogConfig";
+import { ref, reactive, toRefs, onMounted } from 'vue';
+const emit = defineEmits(['closeFun']);
+import Config from './DialogConfig';
 // 父元素传值
 // debugger;
 const props = defineProps({
@@ -80,16 +72,19 @@
   Getmenuarr: {
     type: Array,
   },
+  videoList: {
+    type: Array,
+  },
 });
 
 // 声明本页面中的变量
 const AllData = reactive({
-  editableTabsValue: "",
+  editableTabsValue: '',
   editableTabs: [],
-  RefreshName: "",
+  RefreshName: '',
 });
 
-const updateTabsType = (name) => {
+const updateTabsType = name => {
   AllData.editableTabsValue = name;
   AllData.RefreshName = name;
 };
@@ -99,16 +94,17 @@
   // console.log(tab, AllData.RefreshName);
 };
 const closeFun = () => {
-  emit("closeFun", false);
+  emit('closeFun', false);
 };
 onMounted(() => {
+  console.log('搞什么啊', props);
   // 获取当前组件已分配的组件ID与配置文件中的公共组件ID进行对比,控制展示的tab选项
   let ComparisonTable = Config.ComparisonTable;
   AllData.editableTabs = [];
   Promise.all(
     ComparisonTable.map(function (element) {
       // 动态修改后台返回的组件名称
-      props.Getmenuarr.map((item) => {
+      props.Getmenuarr.map(item => {
         if (item.moduleName == element.name) {
           element.title = item.menuName;
           element.show = item.show;
@@ -120,13 +116,13 @@
       }
     })
   ).then(function (data) {
-    data = data.filter((n) => n);
+    data = data.filter(n => n);
     //赋值其拥有的公共组件
     AllData.editableTabs = AllData.editableTabs.concat(data);
-    console.log(AllData.editableTabs, "公共组件");
+    console.log(AllData.editableTabs, '公共组件');
     //对自定义组件进行插入
-    props.customComponents.forEach((element) => {
-      if (element.sort && element.sort != "") {
+    props.customComponents.forEach(element => {
+      if (element.sort && element.sort != '') {
         // 如果有排序,就按照排序顺序插入到editableTabs中
         AllData.editableTabs.splice(element.sort, 0, element);
       } else if (element.sort == 0) {
@@ -137,11 +133,7 @@
         AllData.editableTabs.push(element);
       }
     });
-    if (
-      props.RefName == "" ||
-      props.RefName == undefined ||
-      !props.comIDs.includes(props.RefName)
-    ) {
+    if (props.RefName == '' || props.RefName == undefined || !props.comIDs.includes(props.RefName)) {
       // 默认展示第一个
       AllData.editableTabsValue = AllData.editableTabs[0].name;
       AllData.RefreshName = AllData.editableTabs[0].name;
diff --git a/vite.config.js b/vite.config.js
index 6093014..65ccb59 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -10,6 +10,8 @@
 // let ipLink = 'https://dhgx.wh-nf.cn:8201/prod-api';
 // let ipLink = 'http://192.168.16.124:9100';
 // let ipLink = 'http://192.168.20.43:9100'; // 刘总
+// let ipLink = 'http://192.168.16.43:9100';
+
 /*  */
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {