fix: AI报警弹窗样式修改以及人员总览样式修改

src/views/commandScreen/dialogCompnnents/ai-alarm.vue

@@ -3,8 +3,8 @@
 		<div class="content">
 			<!-- v-show="topDangerList.length > 0" -->
 			<div class="top-statistics">
-				<div class="top-statistics-left" v-show="topDangerList.length > 0">
+				<div class="top-statistics-left">
-					<el-scrollbar class="statistics-listBox" ref="refAlarmScrollbar">
+					<el-scrollbar class="statistics-listBox" ref="refAlarmScrollbar" v-if="topDangerList.length > 0">
 						<div
 							class="statistics-item"
 							:style="{
@@ -20,10 +20,16 @@
 							<span class="statistics-item-content">历史报警次数：{{ item.alarmNum }}</span>
 						</div>
 					</el-scrollbar>
+					<div style="position: relative; width: 500px; height: 100%;" v-else>
+						<div class="notoDta">
+							<img src="@/assets/images/noData.png" alt="" />
+							<p>暂无数据</p>
+						</div>
+					</div>
 				</div>
 				<div class="top-statistics-right">
 					<!-- 播放海康 -->
-					<div ref="playWndBox" style="width: 85%; height: 88%;">
+					<div ref="playWndBox" style="width: 85%; height: 88%">
 						<div id="playWnd" class="playWnd" style="width: 100%; height: 100%"></div>
 						<!-- :style="{
 								height: playWndHeight + 'px',
@@ -32,26 +38,20 @@
 					</div>
 				</div>
 			</div>
-			<div style="position: relative; height: 180px" v-if="topDangerList.length == 0">
-				<div class="notoDta">
-					<img src="@/assets/images/noData.png" alt="" />
-					<p>暂无数据</p>
-				</div>
-			</div>
 			<div class="top-search">
 				<div class="search-item">
 					<span>设备名称</span>
-					<el-input style="width: 150px;" size="small" v-model="searchForm.hardwareName" placeholder="请输入内容" clearable></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-select
+					<el-select placeholder="请选择" size="small" v-model="searchForm.alarmType" :clearable="true" style="width: 150px">
-						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> -->
@@ -59,7 +59,7 @@
 				<div class="search-item">
 					<span>警告时间</span>
 					<el-date-picker
-						style="width: 240px;"
+						style="width: 240px"
 						size="small"
 						v-model="searchForm.dateRange"
 						type="daterange"
@@ -108,14 +108,14 @@
 					</div>
 				</el-scrollbar>
 				<el-pagination
-			v-if="partyMemberList.length != 0"
+					v-if="partyMemberList.length != 0"
-				background
+					background
-				:page-size="10"
+					:page-size="10"
-				style="justify-content: center"
+					style="justify-content: center"
-				@current-change="onCurrentChange"
+					@current-change="onCurrentChange"
-				layout="prev, pager, next"
+					layout="prev, pager, next"
-				:total="total"
+					:total="total"
-			/>
+				/>
 			</div>
 		</div>
 		<div class="list-detail" v-if="showDialog" @click="handleDetailClick">
@@ -173,9 +173,9 @@ const store = GlobalStore();
 // eslint-disable-next-line vue/require-prop-types, @typescript-eslint/no-unused-vars
 const props = defineProps(["tip"]);
 const searchForm = ref({
-	hardwareName: '',
+	hardwareName: "",
-	alarmType: '',
+	alarmType: "",
-	dateRange: [],
+	dateRange: []
 });
 const playWndBox = ref(null);
 let playWndHeight = ref("");
@@ -305,9 +305,9 @@ const getMemberCountList = async (tip: any) => {
 		pageSize: 10,
 		isPushed: 1
 	};
-	if(searchForm.value.dateRange && searchForm.value.dateRange.length > 0){
+	if (searchForm.value.dateRange && searchForm.value.dateRange.length > 0) {
-		requestData.startTime = searchForm.value.dateRange[0]
+		requestData.startTime = searchForm.value.dateRange[0];
-		requestData.endTime = searchForm.value.dateRange[1]
+		requestData.endTime = searchForm.value.dateRange[1];
 	}
 	const res: any = await getAlarmRecordApi(requestData);
 	partyMemberList.value = res.result.records;
@@ -363,7 +363,7 @@ onMounted(async () => {
 		// }
 	});
 	setTimeout(() => {
-		previewVideo(cameraIndexCode.value)
+		previewVideo(cameraIndexCode.value);
 	}, 1500);
 	await getCompanyList();
 	await getMemberCountList("search");
@@ -555,7 +555,7 @@ const getPubKey = (callback: { (): void; (): void }) => {
 // 调用这个函数可进行视频播放
 // 视频预览功能
 const previewVideo = (data: string | null) => {
-	console.log(data,666777)
+	console.log(data, 666777);
 	let cameraIndexCode = data; // 获取输入的监控点编号值，必填
 	let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
 	let transMode = 1; // 传输协议：0-UDP，1-TCP
@@ -596,9 +596,9 @@ const previewVideo = (data: string | null) => {
 		position: absolute;
 		box-sizing: border-box;
 		padding: 1%;
-		left: 38%;
+		left: 36%;
 		top: 30%;
-		width: 25%;
+		width: 32%;
 		height: 45%;
 		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
 		background-size: 100% 100%;
@@ -691,7 +691,7 @@ const previewVideo = (data: string | null) => {
 	.content {
 		height: 95%;
 		width: 100%;
-		margin-top: 10px;
+		margin-top: 60px;
 		// background: url("@/assets/images/cardImg.png") no-repeat;
 		background-size: 100% 100%;
 		padding: 20px 15px;
@@ -751,6 +751,22 @@ const previewVideo = (data: string | null) => {
 					// 	margin-top: 8%;
 					// }
 				}
+				.notoDta {
+					top: 25%;
+					width: 50%;
+					left: 20%;
+					position: absolute;
+					text-align: center;
+					img {
+						width: 40%;
+						margin: 5% 30%;
+					}
+					p {
+						color: #fff;
+						font-size: calc(100vw * 14 / 1920);
+						margin: -6% 37%;
+					}
+				}
 			}
 			&-right {
 				width: 45%;
@@ -793,7 +809,7 @@ const previewVideo = (data: string | null) => {
 				}
 			}
 			.listBox {
-				height: 86%;
+				height: 73%;
 				.listStyle {
 					display: flex;
 					align-items: center;

src/views/commandScreen/dialogCompnnents/member-all-show.vue

@@ -236,12 +236,10 @@ const createdBarCharts = (xData: any, yData1: any, yData2: any, yData3: any, el:
 		dataZoom: [
 			{
 				type: "slider", // 使用滑动条形式的数据区域缩放组件
-				// start: 0, // 数据窗口范围的起始百分比
+				start: 0, // 数据窗口范围的起始百分比
-				// end: 50, // 数据窗口范围的结束百分比
+            	end: 25, // 数据窗口范围的结束百分比
 				// startValue: xData.length - 1,
 				// endValue: xData.length - 9,
-				startValue: 0,
-				endValue: xData.length - 2,
 				height: 10, // 滑动条组件高度
 				bottom: 0, // 距离图表区域下边的距离
 				showDetail: false, // 拖拽时是否显示详情
@@ -269,18 +267,6 @@ const createdBarCharts = (xData: any, yData1: any, yData2: any, yData3: any, el:
 				color: "#9fa2ad"
 			}
 		},
-		// dataZoom: [
-		//   {
-		//     show: true,
-		//     start: 50,
-		//     end: 100,
-		//     height: 8,
-		//     borderColor: "transparent",
-		//     backgroundColor: "#fff",
-		//     filterColor: "#999999",
-		//     bottom: 0,
-		//   },
-		// ],
 		series: [
 			{
 				name: legendData[1],