flx:提交大华icc

.env.development

@@ -53,7 +53,8 @@ VITE_API_URL = 'http://192.168.34.221:8111' #雄哥本地
 # 大连金笔
 # VITE_API_URL = 'http://101.43.164.214:11126'
 # 测试
-VITE_API_URL = 'http://jxj.zhgdyun.com:9500'
+# VITE_API_URL = 'http://jxj.zhgdyun.com:9500'
+VITE_API_URL = 'http://192.168.34.221:19112'
 # 上传
 VITE_ULD_API_URL = 'http://192.168.34.155:8012/onlinePreview?url='
 

src/views/sevenLargeScreen/videoManagement/dhPlayer.vue

@@ -0,0 +1,265 @@
+<template>
+  <div
+    id="dhplayer-dom"
+    :style="{ width: width, height: height, border: '1px solid #000' }"
+  >
+    <!-- <div class="shield-class" style="width: 100px; height: 100px;">测试遮挡</div> -->
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, watch } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import "./videoPlayer";
+import dayjs from "dayjs";
+const props = defineProps({
+  width: {
+    type: String,
+    default: "100%",
+  },
+  height: {
+    type: String,
+    default: "100%",
+  },
+  devList: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits([
+  "createSuccess",
+  "createError",
+  "realSuccess",
+  "realError",
+  // 可按需添加更多事件
+]);
+
+let myVideoPlayer = ref(null);
+let myVideoPlayer1 = ref(null);
+
+const pluginLoginInfo = ref({
+  host: "124.160.33.135",
+  port: "4077",
+  username: "TEST",
+  password: "OGR28u6_cc",
+});
+const windowType = ref(0);
+const division = ref(1);
+const snumType = ref(0);
+
+// 初始化并登录插件
+function initDHPlayer() {
+  myVideoPlayer.value = new VideoPlayer({
+    videoId: "dhplayer-dom", // 唯一标识，必填，不能重复
+    windowType: windowType.value, // 播放器类型，必传， 0 - 实时预览，3 - 录像回放，7- 录像回放（支持倒放）
+    usePluginLogin: true, // 采用登录 (请默认传true，插件内部自动拉流)
+    pluginLoginInfo: pluginLoginInfo.value,
+    division: division.value, // 默认展示的窗口数量， 必传
+    draggable: false, // 窗口拖拽 【暂不支持】
+    showBar: true, // 底部操作栏， 选传，【true - 显示, false - 隐藏】
+    shieldClass: ["shield-class", "select"], // 如果DOM元素被插件挡住了，把DOM元素的类名传入。
+    coverShieldClass: [], // 如果插件要在dom内滚动，需要把DOM元素的类名传入，请查看案例-遮挡
+    parentIframeShieldClass: [], // 有 iframe 时，top层 的 dom 元素被插件挡住了，把DOM元素的类名传入。
+    // 创建播放器成功回调
+    createSuccess: (versionInfo) => {
+      myVideoPlayer.value.changeDivision(9);
+      emit("createSuccess", versionInfo);
+      handleRealClick();
+    },
+    // 创建播放器失败回调
+    createError: (err) => {
+      console.log("创建失败!!!" + JSON.stringify(err));
+      emit("createError", err);
+    },
+    // 插件公共回调
+    dhPlayerMessage: (info, err) => {},
+    // 实时预览成功回调
+    realSuccess: (info) => {
+      emit("realSuccess", info);
+    },
+    // 实时预览失败回调
+    realError: (info, err) => {
+      emit("realError", info, err);
+    },
+    // ... 其他回调函数按需添加 emit 触发事件
+    // 抓图成功回调
+    snapshotSuccess: ({ base64Url, path }, info) => {
+      const byteCharacters = atob(
+        base64Url.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
+      );
+      const byteNumbers = new Array(byteCharacters.length);
+      for (let i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+      }
+      const byteArray = new Uint8Array(byteNumbers);
+      const blob = new Blob([byteArray], {
+        type: undefined,
+      });
+      const aLink = document.createElement("a");
+      aLink.download = "图片名称.jpg";
+      aLink.href = URL.createObjectURL(blob);
+      aLink.click();
+    },
+    // 本地录像下载成功回调
+    videoDownloadSuccess: (path, info) => {
+      hideDHPlayer();
+      ElMessageBox.alert("本地录像地址：" + path, "", {
+        confirmButtonText: "确定",
+        callback: (action) => {
+            console.log("确定");
+            showDHPlayer();
+        },
+      });
+    },
+    // 鼠标单击窗口回调
+    clickWindow: (snum) => {
+      snumType.value = snum;
+    },
+    // 关闭视频窗口回调
+	closeWindowSuccess: ({ isAll, snum, channelList }) => {
+        console.log("关闭窗口回调", isAll, snum, channelList);
+        snumType.value = snum;
+        dataVideoList.value = channelList.map(item => {
+            return {
+                serialNumber: item.channelId,
+                videoName: item.channelName,
+            }
+        });
+    },
+    // ... 其他回调函数保持不变
+  });
+}
+
+// 播放实时预览
+const handleRealClick = () => {
+  console.log("开始播放实时预览", windowType.value);
+  if (windowType.value == "0") {
+    startReal();
+  } else {
+    startPlayback();
+  }
+};
+
+// ... 其他函数按需修改，移除直接的 DOM 操作
+const dataVideoList = ref([]);
+// 实时预览
+function startReal() {
+  if (!myVideoPlayer.value) {
+    console.log("不能播放，请先初始化插件！！！！！");
+    return;
+  }
+  console.log("开始播放实时预览");
+  const resultList = props.devList.map((item) => {
+    return {
+      channelId: item.serialNumber,
+      channelName: item.videoName,
+      snum: snumType.value,
+      streamType: 1,
+      deviceType: 5,
+      cameraType: "1",
+      capability: "00000000000000000000000000000001",
+    };
+  });
+  snumType.value += 1;
+  myVideoPlayer.value.startReal(resultList);
+}
+
+// 录像回放
+function startPlayback() {
+  if (myVideoPlayer.value && date) {
+    const resultList = props.devList.map((item) => {
+      return {
+        channelId: item.serialNumber,
+        channelName: item.videoName,
+        startTime: dayjs().format("YYYY-MM-DD") + " 00:00:00",
+        endTime: dayjs().format("YYYY-MM-DD") + " 23:59:59",
+        recordSource: 3,
+        streamType: 0,
+        snum: snumType.value,
+      };
+    });
+    snumType.value += 1;
+    myVideoPlayer.value.startPlayback(resultList);
+  }
+}
+
+// 控制插件的显示，两种方式均试用
+function showDHPlayer() {
+  console.log("显示");
+  if (myVideoPlayer.value) {
+    // 1.
+    myVideoPlayer.value._update({
+      visible: true,
+    });
+    // 2.
+    // myVideoPlayer.value.show();
+  }
+}
+
+// 控制插件的隐藏，两种方式均试用
+function hideDHPlayer() {
+  console.log("隐藏");
+  if (myVideoPlayer.value) {
+    // 1.
+    myVideoPlayer.value._update({
+      visible: false,
+    });
+    // 2.
+    // myVideoPlayer.value.hide();
+  }
+}
+watch(
+  () => props.devList,
+  (newVal) => {
+    console.log(
+      "设备列表变化",
+      newVal[0].serialNumber,
+      dataVideoList.value[0].serialNumber
+    );
+    if (newVal && newVal.length > 0) {
+      const findIndex = dataVideoList.value.findIndex(
+        (item) => item.serialNumber == newVal[0].serialNumber
+      );
+      console.log("设备列表变化", findIndex);
+      if (findIndex > -1) return ElMessage.warning("设备已存在，无需重复添加");
+      dataVideoList.value.push(newVal[0]);
+      handleRealClick();
+    }
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  console.log("开始初始化插件", props.devList);
+  if (props.devList.length > 0) {
+    pluginLoginInfo.value.host = props.devList[0].account;
+    pluginLoginInfo.value.port = props.devList[0].password;
+    pluginLoginInfo.value.username = props.devList[0].appId;
+    pluginLoginInfo.value.password = props.devList[0].appSecret;
+    dataVideoList.value = props.devList;
+  }
+  initDHPlayer();
+});
+// 开启规则线
+const openivsRuleOutline = () => {
+  if (myVideoPlayer.value) {
+    myVideoPlayer.value.isEnableIvs({
+      snum: snumType.value,
+      isEnableIVS: true,
+      ivsType: 1,
+    });
+  }
+};
+// 开启规则线
+const closeivsRuleOutline = () => {
+  if (myVideoPlayer.value) {
+    myVideoPlayer.value.isEnableIvs({
+      snum: snumType.value,
+      isEnableIVS: false,
+      ivsType: 1,
+    });
+  }
+};
+</script>
+<style lang="less" scoped>
+</style>

src/views/sevenLargeScreen/videoManagement/index.vue

@@ -133,6 +133,7 @@
 						</div>
 						<ysyPlayer ref="ysy"></ysyPlayer>
 					</div>
+					<DHPlayer :devList="dhVideoList" v-else-if="videoType === 4" ref="dhplayer"></DHPlayer>
 					<!-- 播放海康 -->
 					<div ref="playWndBox" style="width: 100%; height: 100%">
 						<div id="playWnd" class="playWnd" style="width: 100%; height: 100%"></div>
@@ -151,6 +152,8 @@
 import Card from "@/components/card.vue";
 // import ysyPlayAndPlayback from "@/components/ysyPlayAndPlayback.vue";
 import ysyPlayer from "./ysy-player.vue";
+import DHPlayer from "./dhPlayer.vue";
+
 import { Fold, Expand, Search } from "@element-plus/icons-vue";
 import { ref, onMounted, onBeforeUnmount, computed, Ref, onBeforeMount, watch } from "vue";
 import { ElMessage } from "element-plus";
@@ -223,6 +226,7 @@ let pubKey = ref("");
 let initCount = ref(0);
 let oWebControl: any = null;
 let cameraIndexCode = ref<Array<string>>([]);
+const dhVideoList = ref([] as any);
 // let objData = ref({
 // 	appkey: "23914849", //海康提供的appkey
 // 	ip: "221.12.137.200", //海康提供的ip
@@ -327,7 +331,10 @@ const checkVideo = async (item: any) => {
 	if (item.serialNumber) {
 		ysyParams.value = item;
 		cameraIndexCode.value = item.serialNumber;
-		if (videoType.value !== 1) {
+		dhVideoList.value = [item];
+
+
+		if (videoType.value !== 1 && videoType.value !== 4) {
 			previewVideo(cameraIndexCode.value);
 		}
 		if (videoType.value === 1) {
@@ -395,6 +402,8 @@ const handleVideoConfig = (videoData: any) => {
 			oWebControl.JS_Disconnect();
 		}
 		// emitter.emit("selectMonitor", videoData);
+	} else if (videoData.videoType === 4) {
+		dhVideoList.value = [videoData];
 	} else {
 		initPlugin();
 	}