From 24c880909090448e7eafaff79380cb9e692675df Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Mon, 8 Jul 2024 14:37:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9AI=E8=AD=A6=E6=8A=A5=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8ABUG=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   4 +-
 .../commandScreen/commandCenter/centerTop.vue |   2 +-
 .../dialogCompnnents/ai-alarm.vue             | 205 ++++++++----------
 .../dialogCompnnents/data-dialog.vue          |  23 +-
 .../dialogCompnnents/member-all-show.vue      |   8 +-
 .../videoManagement/index.vue                 |   2 +-
 6 files changed, 114 insertions(+), 130 deletions(-)

diff --git a/.env.development b/.env.development
index 67b2660..4f79e0e 100644
--- a/.env.development
+++ b/.env.development
@@ -4,7 +4,7 @@ NODE_ENV = 'development'
 # 本地环境接口地址(/api/index.ts文件中使用)
 # 后端本地
 # VITE_API_URL = 'http://192.168.34.155:19111'
-# VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
+VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
 # VITE_API_URL = 'http://182.90.224.237:51234'  #雄哥远程
 # VITE_API_URL = 'http://192.168.34.221:28889'
 # VITE_API_URL = 'http://121.196.214.246/api'
@@ -25,7 +25,7 @@ NODE_ENV = 'development'
 # 七参数标准版(演示平台)
 # VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
 # agjt
-VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
+# VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
 # VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
 # VITE_API_URL = 'http://jxj.zhgdyun.com:19812'
 # 苏立信/重庆市南岸区
diff --git a/src/views/commandScreen/commandCenter/centerTop.vue b/src/views/commandScreen/commandCenter/centerTop.vue
index 93321f0..51fec7c 100644
--- a/src/views/commandScreen/commandCenter/centerTop.vue
+++ b/src/views/commandScreen/commandCenter/centerTop.vue
@@ -101,7 +101,7 @@
 				<div class="classify-div-item" @click="openDialogData({ index: 99, title: '质量管理' })">
 					<span style="font-size: 12px">质量管理&nbsp;{{ statsDirectorateBigScreen.qualityInspectionRecordNum }}</span>
 				</div>
-				<div class="classify-div-item" @click="openDialogData({ index: 6, title: 'AI警报' })">
+				<div class="classify-div-item" @click="openDialogData({ index: 6, title: 'AI警报', type: 4 })">
 					<span style="font-size: 12px">AI警报&nbsp;{{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span>
 				</div>
 			</div>
diff --git a/src/views/commandScreen/dialogCompnnents/ai-alarm.vue b/src/views/commandScreen/dialogCompnnents/ai-alarm.vue
index 6d269ea..581ba8b 100644
--- a/src/views/commandScreen/dialogCompnnents/ai-alarm.vue
+++ b/src/views/commandScreen/dialogCompnnents/ai-alarm.vue
@@ -2,8 +2,8 @@
 	<div class="political-outlook">
 		<div class="content">
 			<!-- v-show="topDangerList.length > 0" -->
-			<div class="top-statistics" v-show="topDangerList.length > 0">
-				<div class="top-statistics-left">
+			<div class="top-statistics">
+				<div class="top-statistics-left" v-show="topDangerList.length > 0">
 					<el-scrollbar class="statistics-listBox" ref="refAlarmScrollbar">
 						<div
 							class="statistics-item"
@@ -21,17 +21,16 @@
 						</div>
 					</el-scrollbar>
 				</div>
-				<!-- <div class="top-statistics-right">
-					<div>sss</div>
-					播放海康
-					<div ref="playWndBox" style="width: 96%; height: 100%;">
+				<div class="top-statistics-right">
+					<!-- 播放海康 -->
+					<div ref="playWndBox" style="width: 85%; height: 88%;">
 						<div id="playWnd" class="playWnd" style="width: 100%; height: 100%"></div>
-						:style="{
+						<!-- :style="{
 								height: playWndHeight + 'px',
 								width: playWndWidth + 'px'
-							}"
+							}" -->
 					</div>
-				</div> -->
+				</div>
 			</div>
 			<div style="position: relative; height: 180px" v-if="topDangerList.length == 0">
 				<div class="notoDta">
@@ -42,11 +41,20 @@
 			<div class="top-search">
 				<div class="search-item">
 					<span>设备名称</span>
-					<el-input style="width: 150px;" size="small" v-model="searchForm.hardwareName" placeholder="请输入内容" @input="conditionSearch"></el-input>
+					<el-input style="width: 150px;" size="small" v-model="searchForm.hardwareName" placeholder="请输入内容" clearable></el-input>
 				</div>
 				<div class="search-item">
 					<span>不安全行为类型</span>
-					<el-input style="width: 150px;" size="small" v-model="searchForm.alarmTypeName" placeholder="请输入内容" @input="conditionSearch"></el-input>
+					<el-select
+						placeholder="请选择"
+						size="small"
+						v-model="searchForm.alarmType"
+						:clearable="true"
+						style="width: 150px"
+					>
+						<el-option v-for="(item, index) in aiAlarmTypeEnum" :key="index" :label="item.value" :value="item.id" />
+					</el-select>
+					<!-- <el-input style="width: 150px;" size="small" v-model="searchForm.alarmTypeName" placeholder="请输入内容"></el-input> -->
 				</div>
 				<div class="search-item">
 					<span>警告时间</span>
@@ -59,10 +67,9 @@
 						start-placeholder="开始日期"
 						end-placeholder="结束日期"
 						value-format="YYYY-MM-DD"
-						@change="conditionSearch"
 					/>
 				</div>
-				<!-- <el-button @click="getMemberCountList('search')">查询</el-button> -->
+				<el-button size="medium" @click="getMemberCountList('search')">查询</el-button>
 			</div>
 			<div class="table-one">
 				<div class="tabList">
@@ -145,7 +152,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeMount, onBeforeUnmount, getCurrentInstance } from "vue";
+import { ref, onMounted, onBeforeMount, onBeforeUnmount, getCurrentInstance, nextTick } from "vue";
 import { GlobalStore } from "@/stores";
 import { getCompanyDataList } from "@/api/modules/labor";
 // import type { TabsPaneContext } from "element-plus";
@@ -167,7 +174,7 @@ const store = GlobalStore();
 const props = defineProps(["tip"]);
 const searchForm = ref({
 	hardwareName: '',
-	alarmTypeName: '',
+	alarmType: '',
 	dateRange: [],
 });
 const playWndBox = ref(null);
@@ -176,19 +183,11 @@ let playWndWidth = ref("");
 let oWebControl = ref(null);
 let pubKey = ref("");
 let initCount = ref(0);
-// const objData = ref({
-// 	appkey: "23071374", //海康提供的appkey
-// 	ip: "42.180.188.17", //海康提供的ip
-// 	secret: "skaSIHSYPRIynnxz7o57", //海康提供的secret
-// 	port: 8443,
-// 	playMode: 0, // 0 预览 1回放
-// 	layout: "1x1" //页面展示的模块数【16】
-// });
 let objData = ref({
-	appkey: "23071374", //anjt的appkey
-	ip: "42.180.188.17", //anjt的ip
-	secret: "skaSIHSYPRIynnxz7o57", //anjt的secret
-	port: 8443,//anjt的端口
+	appkey: "", //海康提供的appkey
+	ip: "", //海康提供的ip
+	secret: "", //海康提供的secret
+	port: 443,
 	playMode: 0, // 0 预览 1回放
 	layout: "1x1" //页面展示的模块数【16】
 });
@@ -208,22 +207,18 @@ const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
 const detailData = ref({} as any);
 const partyMemberList = ref({} as any);
 let aiAlarmTypeEnum = ref([] as any);
-// 条件查询
-const conditionSearch = async () => {
-	getMemberCountList('search')
-}
 //获取视频列表
 const getVideoList = async () => {
-	// objData.value.appkey = "23071374";
-	// objData.value.ip = "42.180.188.17";
-	// objData.value.secret = "skaSIHSYPRIynnxz7o57";
-	// objData.value.port = 8443;
-	// cameraIndexCode.value = "210d4649ec0d4e6899b0394e5d8eeec2";
+	objData.value.appkey = "23071374";
+	objData.value.ip = "42.180.188.17";
+	objData.value.secret = "skaSIHSYPRIynnxz7o57";
+	objData.value.port = 8443;
+	cameraIndexCode.value = "210d4649ec0d4e6899b0394e5d8eeec2";
 	// objData.value.appkey = "24017757";
 	// objData.value.ip = "182.101.141.23";
 	// objData.value.secret = "VJz0FbzmE6drPQ7egsBi";
 	// objData.value.port = 18443;
-	// cameraIndexCode.value = "fa34ed90c1564841b14fed388741bbe2";
+	// cameraIndexCode.value = "c986b80158de4a5e8b332b1fb338e51a";
 };
 // 背景图设置
 const bgImgSet = (index: any) => {
@@ -270,10 +265,12 @@ function getWarnName(warnType: any) {
 function openDetailDialog(item: any) {
 	detailData.value = item;
 	showDialog.value = true;
+	oWebControl.JS_HideWnd();
 }
 // 关闭详情弹窗
 function closeDialog() {
 	showDialog.value = false;
+	oWebControl.JS_ShowWnd();
 	detailData.value = {};
 }
 function handleDetailClick(event: any) {
@@ -303,7 +300,7 @@ const getMemberCountList = async (tip: any) => {
 	let requestData: any = {
 		projectSn: store.sn,
 		hardwareName: searchForm.value.hardwareName,
-		alarmTypeName: searchForm.value.alarmTypeName,
+		alarmType: searchForm.value.alarmType,
 		pageNo: tip == "search" ? 1 : pageNo.value,
 		pageSize: 10,
 		isPushed: 1
@@ -330,10 +327,44 @@ const getMemberCountList = async (tip: any) => {
 	// 	pageNo.value = pageNo.value + 1;
 	// }
 };
-// onBeforeMount(async () => {
-// 	getVideoList();
-// });
+onBeforeMount(async () => {
+	getVideoList();
+});
 onMounted(async () => {
+	initPlugin();
+	// 获取页面的实例对象 ee
+	const pageInstance = getCurrentInstance();
+	// 获取dom节点对象
+	const tagDomObj = pageInstance?.refs.playWndBox;
+	playWndHeight.value = tagDomObj?.clientHeight;
+	playWndWidth.value = tagDomObj?.clientWidth;
+
+	// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
+	window.addEventListener("scroll", () => {
+		if (oWebControl.value == undefined) {
+			setTimeout(function () {
+				oWebControl.JS_Resize(playWndWidth.value * store.globalScale, playWndHeight.value * store.globalScale);
+			}, 200);
+		}
+	});
+
+	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+	window.addEventListener("resize", e => {
+		if (oWebControl.value == undefined) {
+			setTimeout(function () {
+				oWebControl.JS_Resize(playWndWidth.value * store.globalScale, playWndHeight.value * store.globalScale);
+			}, 200);
+		}
+		// if (oWebControl.value == undefined) {
+		// 	// console.log("wwwww", e);
+		// 	oWebControl.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
+		// 	// oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
+		// 	// setWndCover();
+		// }
+	});
+	setTimeout(() => {
+		previewVideo(cameraIndexCode.value)
+	}, 1500);
 	await getCompanyList();
 	await getMemberCountList("search");
 	await getQualityStatisticsNumDataFn("search");
@@ -360,49 +391,14 @@ onMounted(async () => {
 			}
 		}
 	});
-	// 加载海康插件
-	// setTimeout(() => {
-	// }, 2500);
-	// await initPlugin();
-	// 获取页面的实例对象 ee
-	// const pageInstance = getCurrentInstance();
-	// // 获取dom节点对象
-	// const tagDomObj = pageInstance?.refs.playWndBox;
-	// playWndHeight.value = tagDomObj?.clientHeight;
-	// playWndWidth.value = tagDomObj?.clientWidth;
-
-	// // 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
-	// window.addEventListener("scroll", () => {
-	// 	if (oWebControl.value == undefined) {
-	// 		setTimeout(function () {
-	// 			oWebControl.JS_Resize(playWndWidth.value * store.globalScale, playWndHeight.value * store.globalScale);
-	// 		}, 200);
-	// 	}
-	// });
-
-	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
-	// window.addEventListener("resize", e => {
-	// 	if (oWebControl.value == undefined) {
-	// 		setTimeout(function () {
-	// 			oWebControl.JS_Resize(playWndWidth.value * store.globalScale, playWndHeight.value * store.globalScale);
-	// 		}, 200);
-	// 	}
-	// 	// if (oWebControl.value == undefined) {
-	// 	// 	// console.log("wwwww", e);
-	// 	// 	oWebControl.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
-	// 	// 	// oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
-	// 	// 	// setWndCover();
-	// 	// }
-	// });
-	// previewVideo(cameraIndexCode.value)
 });
 onBeforeUnmount(() => {
 	// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
-	// oWebControl.JS_HideWnd();
-	// // 销毁当前播放的视频
-	// oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
-	// // 断开与插件服务连接
-	// oWebControl.JS_Disconnect();
+	oWebControl.JS_HideWnd();
+	// 销毁当前播放的视频
+	oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
+	// 断开与插件服务连接
+	oWebControl.JS_Disconnect();
 });
 
 const initPlugin = () => {
@@ -559,6 +555,7 @@ const getPubKey = (callback: { (): void; (): void }) => {
 // 调用这个函数可进行视频播放
 // 视频预览功能
 const previewVideo = (data: string | null) => {
+	console.log(data,666777)
 	let cameraIndexCode = data; // 获取输入的监控点编号值，必填
 	let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
 	let transMode = 1; // 传输协议：0-UDP，1-TCP
@@ -706,17 +703,17 @@ const previewVideo = (data: string | null) => {
 			display: flex;
 			justify-content: space-between;
 			&-left {
-				width: 100%;
+				// width: 100%;
 				height: 100%;
 				.statistics-listBox {
 					height: 100%;
 					:deep() {
 						.el-scrollbar__view {
 							display: grid;
-							grid-template-columns: repeat(3, 1fr);
-							grid-gap: 20px;
-							// grid-row-gap: 20px;
-							// grid-column-gap: 60px;
+							grid-template-columns: repeat(2, 1fr);
+							// grid-gap: 20px;
+							grid-row-gap: 20px;
+							grid-column-gap: 60px;
 						}
 					}
 				}
@@ -756,41 +753,9 @@ const previewVideo = (data: string | null) => {
 				}
 			}
 			&-right {
-				width: 390px;
+				width: 45%;
 				height: 100%;
 			}
-			// .statistics-item:nth-child(1){
-			// 	background: url("@/assets/images/commandScreen/bg6.png") no-repeat;
-			// 	background-size: 100% 100%;
-			// }
-			// .statistics-item:nth-child(2){
-			// 	background: url("@/assets/images/commandScreen/bg2.png") no-repeat;
-			// 	background-size: 100% 100%;
-			// }
-			// .statistics-item:nth-child(3){
-			// 	background: url("@/assets/images/commandScreen/bg7.png") no-repeat;
-			// 	background-size: 100% 100%;
-			// }
-			// .statistics-item:nth-child(4){
-			// 	background: url("@/assets/images/commandScreen/bg8.png") no-repeat;
-			// 	background-size: 100% 100%;
-			// }
-			// .statistics-item:nth-child(5){
-			// 	background: url("@/assets/images/commandScreen/bg1.png") no-repeat;
-			// 	background-size: 100% 100%;
-			// }
-			// .statistics-item:nth-child(6){
-			// 	background: url("@/assets/images/commandScreen/bg5.png") no-repeat;
-			// 	background-size: 100% 100%;
-			// }
-			// .statistics-item:nth-child(7){
-			// 	background: url("@/assets/images/commandScreen/bg4.png") no-repeat;
-			// 	background-size: 100% 100%;
-			// }
-			// .statistics-item:nth-child(8){
-			// 	background: url("@/assets/images/commandScreen/bg3.png") no-repeat;
-			// 	background-size: 100% 100%;
-			// }
 		}
 		.top-search {
 			@include flex;
@@ -828,7 +793,7 @@ const previewVideo = (data: string | null) => {
 				}
 			}
 			.listBox {
-				height: 68%;
+				height: 86%;
 				.listStyle {
 					display: flex;
 					align-items: center;
diff --git a/src/views/commandScreen/dialogCompnnents/data-dialog.vue b/src/views/commandScreen/dialogCompnnents/data-dialog.vue
index fd4781a..9fe07d2 100644
--- a/src/views/commandScreen/dialogCompnnents/data-dialog.vue
+++ b/src/views/commandScreen/dialogCompnnents/data-dialog.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="list-detail" v-if="showDialog && mapsDetail.length == 0">
 		<div
-			:class="postData.type == 1 ? 'dialog-content' : postData.type == 2 ? 'dialog-content-show' : postData.type == 3 ? 'dialog-content-three' : 'dialog-content-more'"
+			:class="postData.type == 1 ? 'dialog-content' : postData.type == 2 ? 'dialog-content-show' : postData.type == 3 ? 'dialog-content-three' : postData.type == 4 ? 'dialog-content-ai' : 'dialog-content-more'"
 			:style="
 				postData.index == 98
 					? { left: '5%', width: '90%', top: '5%', height: '90%' }
@@ -81,7 +81,7 @@
 	</div>
 	<div v-else-if="showIndex == 10">
 		<div class="list-detail" v-for="ele in mapsDetail.filter((option: any) => option.show)" :key="ele.id">
-			<div :class="postData.type == 1 ? 'dialog-content' : postData.type == 2 ? 'dialog-content-show' : postData.type == 3 ? 'dialog-content-three' : 'dialog-content-more'">
+			<div :class="postData.type == 1 ? 'dialog-content' : postData.type == 2 ? 'dialog-content-show' : postData.type == 3 ? 'dialog-content-three' : postData.type == 4 ? 'dialog-content-ai' : 'dialog-content-more'">
 				<div class="warning-bg"></div>
 				<div class="dialog-title">
 					<!-- <div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div> -->
@@ -303,6 +303,18 @@ onMounted(async () => {});
 		background-size: 100% 100%;
 		z-index: 21;
 	}
+	.dialog-content-ai{
+		position: absolute;
+		box-sizing: border-box;
+		padding: 1%;
+		left: 15%;
+		top: 5%;
+		width: 70%;
+		height: 90%;
+		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
+		background-size: 100% 100%;
+		z-index: 21;
+	}
 	.dialog-content-more {
 		position: absolute;
 		box-sizing: border-box;
@@ -319,7 +331,8 @@ onMounted(async () => {});
 	.dialog-content,
 	.dialog-content-show,
 	.dialog-content-more,
-	.dialog-content-three {
+	.dialog-content-three,
+	.dialog-content-ai {
 		padding-top: 50px;
 		position: relative;
 
@@ -378,6 +391,10 @@ onMounted(async () => {});
 		padding-top: 70px;
 		position: relative;
 	}
+	.dialog-content-ai {
+		padding-top: 70px;
+		position: relative;
+	}
 }
 
 .notoDta {
diff --git a/src/views/commandScreen/dialogCompnnents/member-all-show.vue b/src/views/commandScreen/dialogCompnnents/member-all-show.vue
index f60c35c..443ccbf 100644
--- a/src/views/commandScreen/dialogCompnnents/member-all-show.vue
+++ b/src/views/commandScreen/dialogCompnnents/member-all-show.vue
@@ -238,8 +238,10 @@ const createdBarCharts = (xData: any, yData1: any, yData2: any, yData3: any, el:
 				type: "slider", // 使用滑动条形式的数据区域缩放组件
 				// start: 0, // 数据窗口范围的起始百分比
 				// end: 50, // 数据窗口范围的结束百分比
-				startValue: xData.length - 1,
-				endValue: xData.length - 9,
+				// startValue: xData.length - 1,
+				// endValue: xData.length - 9,
+				startValue: 0,
+				endValue: xData.length - 2,
 				height: 10, // 滑动条组件高度
 				bottom: 0, // 距离图表区域下边的距离
 				showDetail: false, // 拖拽时是否显示详情
@@ -612,7 +614,7 @@ onMounted(async () => {
 			}
 		}
 		.listBox {
-			height: 78%;
+			height: 73%;
 			.listStyle {
 				display: flex;
 				align-items: center;
diff --git a/src/views/sevenLargeScreen/videoManagement/index.vue b/src/views/sevenLargeScreen/videoManagement/index.vue
index d6287fe..5277940 100644
--- a/src/views/sevenLargeScreen/videoManagement/index.vue
+++ b/src/views/sevenLargeScreen/videoManagement/index.vue
@@ -153,7 +153,7 @@ const checkVideo = async (item: any) => {
 // let firstVideoId = ref("" as any);
 //获取视频列表
 const getVideoList = async () => {
-	let res: any = await selectProjectVideoGroupApi({
+	let res: any = await selectProjectVideoListApi({
 		projectSn: store.sn
 		// all: 1
 		// all=1查全部