From 76598d96c0e09ee541334a18ea4a74069c8c433e Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Fri, 1 Mar 2024 16:50:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20BUG=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/headNoise.ts                  |  14 +-
 src/assets/images/videoFour.png               | Bin 0 -> 511 bytes
 src/assets/images/videoFour1.png              | Bin 0 -> 470 bytes
 .../sevenLargeScreen/headNoise/centerTop.vue  |  22 +-
 .../headNoise/data-dialog.vue                 | 122 ++++++++
 .../headNoise/history-alarm-list.vue          | 263 +++++++++++++++++
 .../headNoise/history-list.vue                | 262 +++++++++++++++++
 .../sevenLargeScreen/headNoise/index.vue      |  26 +-
 .../headNoise/rightCenter.vue                 |  49 +++-
 src/views/sevenLargeScreen/indexL.vue         |   8 +-
 .../laborManagement/data-dialog.vue           | 118 ++++++++
 .../laborManagement/index.vue                 |  21 +-
 .../laborManagement/leftTop.vue               |  11 +-
 .../laborManagement/member-count-list.vue     | 271 ++++++++++++++++++
 .../videoManagement/index.vue                 |  15 +
 15 files changed, 1165 insertions(+), 37 deletions(-)
 create mode 100644 src/assets/images/videoFour.png
 create mode 100644 src/assets/images/videoFour1.png
 create mode 100644 src/views/sevenLargeScreen/headNoise/data-dialog.vue
 create mode 100644 src/views/sevenLargeScreen/headNoise/history-alarm-list.vue
 create mode 100644 src/views/sevenLargeScreen/headNoise/history-list.vue
 create mode 100644 src/views/sevenLargeScreen/laborManagement/data-dialog.vue
 create mode 100644 src/views/sevenLargeScreen/laborManagement/member-count-list.vue

diff --git a/src/api/modules/headNoise.ts b/src/api/modules/headNoise.ts
index 2554015..e1905e9 100644
--- a/src/api/modules/headNoise.ts
+++ b/src/api/modules/headNoise.ts
@@ -9,6 +9,10 @@ export const getCurrentDayAirQualityApi = (params: {}) => {
 export const environmentDevList = (params: {}) => {
 	return http.post(BASEURL + `/xmgl/environmentDev/list`, params);
 };
+//设备情况-实时数据
+export const environmentDevRealData = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/dustNoiseData/selectDustNoisePageList`, params);
+};
 
 //趋势图-查询环境设备实时数据---近24小时数据
 // export const selectDustNoiseDataApi = (params: {}) => {
@@ -38,7 +42,15 @@ export const getAirQualityStatisticsApi = (params: {}) => {
 	return http.post(BASEURL + `/xmgl/airQualityAnalysis/getAirQualityStatistics`, params);
 };
 
-//今日报警统计
+//历史报警统计
 export const getAlarmCountTotalApi = (params: {}) => {
 	return http.post(BASEURL + `/xmgl/environmentAlarm/selectEnvironmentAlarmCountTotal`, params);
 };
+//历史报警统计数据
+export const getAlarmCountTotalList = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/environmentAlarm/list`, params);
+};
+//历史报警类型列表
+export const getAlarmTypeList = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/environmentAlarmType/list`, params);
+};
diff --git a/src/assets/images/videoFour.png b/src/assets/images/videoFour.png
new file mode 100644
index 0000000000000000000000000000000000000000..aac3d920d07fb954b7f50052564e47a9b8c5263c
GIT binary patch
literal 511
zcmV<b0RaAqP)<h;3K|Lk000e1NJLTq001Wd0015c1^@s6uhs`p0005TNkl<ZScUDD
z?@hxn5XIk}@*TQC%OZtN024qqfDQs1AVy#U3X4!SXj#BU4NiMW?rf)jq<rW}RbA_s
z^Hbb=ceGf1dJHo>4^&tc#ct_u0Q~3}EdY$2^H0op*9hlu$4t)vmVlob=S=|m2<J^w
zj1X4|GsJCU9bwk3Tv|{cCgWPE@yod`(cPmil*p?^LY$sJiqXU#OJJdI_emTp_QM$E
z&1Jl9CUu<_*^l8A5EFK4fzpIyl{yaJ>sD3DxD21%Tq(vEt&LPj0kO!*m1MT!nCa0u
z_p4*{5=6ZL{!1gg$2Ae%16TomZk#s)Dx=;!QKlGit(9Y29by?eM9I7n*bV1UGSh45
z5Ld>*8~6VX=UIQkn#t*{XA@Rq&{Ii5obLY2`a0*?K1{}&YbMadboUMyhNhM9t!*X$
z-o{K*QDu$nM3@Tp!N@Zb>m)PiF<o|uWdy9J)|F^q?NU2-`)Z8oGk~lIY7?F_lVQSM
zm@o_z_QHf=jOjb3^;b^cuyb8T+fxqh%_z0kPvEJ9!JdR`Fy`Q=6II9Ag!d7K*0oMD
zy7fp@StC0$Ux+PhkQ^Ipl^MJV?<+26CfYv$`~k;rq&lM}r*;4U002ovPDHLkV1mT5
B=0yMi

literal 0
HcmV?d00001

diff --git a/src/assets/images/videoFour1.png b/src/assets/images/videoFour1.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee362076408f43a3fbc95563c91c3b17f84a24cc
GIT binary patch
literal 470
zcmV;{0V)28P)<h;3K|Lk000e1NJLTq001Wd0015c1^@s6uhs`p0004<Nkl<ZScUDE
zUrxd>9LGOpygP0HUIgI;dIIIy1cZaQgv3|F5jcUw8(@5Q+<^H?GHP1NHf)zIi<pt@
zo3QlHckM6j`uP>XTuSOG*{W$^TJ5A1GXOSDm&Xd|0#jm^Ii5S<83>6PTKz(;1wB08
z%zV8fPdn4KVJh6g&6AyvoSqk{CX14~%d?WO*3*~v)OuT+;Hs(#uBuW9%N&fLU0qX(
zkeO3?>hVGU%8ga*k+secDd!|l?D=-uJOZ;S3u4}#o)$L<?tv{avz!S#cpB7-i=!e>
zx^jxx`4A3Gh8Qsx3#<PCVKv#S&Jbg9ZFvrWRrLST^|25Io_gojCb+7)kSi1B!*(fl
zcpmNV`Fz2(xMi1%65o{i?97!W$nbHe-|w3qpFloXW32VFlhjLiE(XG3u1%O*t7NNF
z*s=9gzDZ$!mA*3Dx@TAjVZp2vgeN5+JQ4Oa{g<afNmVt$RaJT*g!v#{`pmQ)J%j&*
zu=+E*w(xL}my|mCG~s}7n=6hjf$UmieCTJ|Ucys*2v-g6y!#6L0K*BKG%+FN)&Kwi
M07*qoM6N<$f)NbdRR910

literal 0
HcmV?d00001

diff --git a/src/views/sevenLargeScreen/headNoise/centerTop.vue b/src/views/sevenLargeScreen/headNoise/centerTop.vue
index 86003b3..f2abe49 100644
--- a/src/views/sevenLargeScreen/headNoise/centerTop.vue
+++ b/src/views/sevenLargeScreen/headNoise/centerTop.vue
@@ -1,6 +1,9 @@
 <template>
 	<div class="CenterBox">
-		<div class="title"><i>实时数据</i></div>
+		<div class="title">
+			<i>实时数据</i>
+			<span class="show-more" @click="openHistoryData">历史数据</span>
+		</div>
 		<div class="content">
 			<div class="selectRight">
 				<el-select v-model="deviceName" class="m-2" placeholder="Select" size="small">
@@ -33,6 +36,7 @@ import { GlobalStore } from "@/stores";
 import { environmentDevList, getRealTimeDustNoiseDataApi } from "@/api/modules/headNoise";
 import mitts from "@/utils/bus"; //兄弟组件传值
 import { ref, reactive, onMounted } from "vue";
+const emits = defineEmits(["openDialog"])
 const store = GlobalStore();
 let deviceName = ref("");
 let noiseList = ref([]);
@@ -53,6 +57,10 @@ let plantCap = ref({
 	sprayStatus: "--"
 });
 let currentDevDetail = reactive({});
+// 打开历史数据弹框
+const openHistoryData = () => {
+	emits("openDialog",{type: 1})
+}
 //切换设备
 const realTimeMonitor = val => {
 	console.log("切换设备", val);
@@ -112,7 +120,9 @@ onMounted(() => {
 	background-size: 100% 100%;
 	.title {
 		height: 7%;
-		line-height: 33px;
+		// line-height: 33px;
+		display: flex;
+		align-items: center;
 		text-align: left;
 		font-size: calc(100vw * 18 / 1920);
 		color: #ffffff;
@@ -122,6 +132,14 @@ onMounted(() => {
 		i {
 			margin-left: 50px;
 			font-family: OPPOSansH;
+			margin-right: auto;
+		}
+		.show-more{
+			cursor: pointer;
+			font-size: 12px;
+			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+			color: #4ac0f3;
+			margin-right: 20px;
 		}
 	}
 	.content{
diff --git a/src/views/sevenLargeScreen/headNoise/data-dialog.vue b/src/views/sevenLargeScreen/headNoise/data-dialog.vue
new file mode 100644
index 0000000..91f7c9c
--- /dev/null
+++ b/src/views/sevenLargeScreen/headNoise/data-dialog.vue
@@ -0,0 +1,122 @@
+<template>
+	<div class="list-detail" v-if="showDialog">
+		<div class="dialog-content">
+			<div class="dialog-title">
+				<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
+				<div class="title-text">
+					<i>{{ dialogTitle }}</i>
+				</div>
+			</div>
+			<div class="political-outlook" v-if="postData.type == 1">
+				<historyList ref="historyList"></historyList>
+			</div>
+			<div class="political-outlook" v-if="postData.type == 2">
+				<historyAlarmList ref="historyAlarmList" :typeId="postData.id"></historyAlarmList>
+			</div>
+			<div class="close-icon" @click="showDialog = false">
+				<el-icon><Close /></el-icon>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import historyList from "./history-list.vue";
+import historyAlarmList from "./history-alarm-list.vue";
+import { GlobalStore } from "@/stores";
+let showDialog = ref(false as any);
+const postData = ref({} as any);
+let dialogTitle = ref("" as any);
+function openDialog(obj: any) {
+	console.log("type", obj);
+	if(obj.type == 1){
+		dialogTitle.value = "历史数据";
+	} else if(obj.type == 2) {
+		dialogTitle.value = "历史报警数据";
+	}
+	postData.value = obj
+	showDialog.value = true;
+}
+
+// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
+defineExpose({
+	openDialog
+});
+
+onMounted(async () => {
+	console.log("Mount_type", postData.value.type);
+});
+</script>
+
+<style lang="scss" scoped>
+.list-detail {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0%;
+	left: 0%;
+	background: rgba(7, 28, 49, 0.5);
+	z-index: 20;
+	.dialog-content {
+		position: absolute;
+		box-sizing: border-box;
+		padding: 1%;
+		left: 17%;
+		top: 21%;
+		width: 70%;
+		height: 60%;
+		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
+		background-size: 100% 100%;
+		z-index: 21;
+		.political-outlook {
+			height: 95%;
+		}
+		.dialog-article {
+			height: 95%;
+		}
+		.close-icon {
+			position: absolute;
+			right: 3%;
+			top: 3%;
+			cursor: pointer;
+			color: #ffffff;
+			font-size: 18px;
+		}
+		.dialog-title {
+			color: #ffffff;
+			font-weight: bold;
+			font-size: 18px;
+			font-family: "OPPOSans-Bold";
+			display: flex;
+			align-items: center;
+			.title-img {
+				width: 3%;
+				height: 3%;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.title-text {
+				margin-left: 1%;
+			}
+		}
+	}
+}
+.notoDta {
+	top: 73%;
+	width: 12%;
+	left: 44%;
+	position: absolute;
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+	p {
+		color: #fff;
+		font-size: 14px;
+		margin: -6% 37%;
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/headNoise/history-alarm-list.vue b/src/views/sevenLargeScreen/headNoise/history-alarm-list.vue
new file mode 100644
index 0000000..177b41f
--- /dev/null
+++ b/src/views/sevenLargeScreen/headNoise/history-alarm-list.vue
@@ -0,0 +1,263 @@
+<template>
+	<div class="political-outlook">
+		<div class="content">
+			<div class="top-search">
+				<div class="search-item">
+					<span>报警类型</span>
+					<el-select class="m-2" placeholder="请选择" size="small" v-model="searchForm.alarmType" 
+						:clearable="true">
+						<el-option
+							v-for="(item, index) in alarmTypeList"
+							:key="index"
+							:label="item"
+            				:value="index"
+						/>
+					</el-select>
+				</div>
+				<div class="search-item">
+					<span>设备名称</span>
+					<el-select class="m-2" placeholder="请选择" size="small" v-model="searchForm.name" 
+						:clearable="true">
+						<el-option
+							v-for="(item, index) in deviceList"
+							:key="index"
+							:label="item.deviceName"
+            				:value="item.deviceId"
+						/>
+					</el-select>
+				</div>
+				<div class="search-item">
+					<span>时间筛选</span>
+					<el-date-picker
+						v-model="searchForm.rangeTime"
+						type="daterange"
+						range-separator="至"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						value-format="YYYY-MM-DD"
+						:clearable="true"
+					/>
+				</div>
+				<el-button @click="getHistoryAlarmList('search')">查询</el-button>
+			</div>
+			<div class="tabList">
+				<div>报警类型</div>
+				<div>报警名称</div>
+				<div>设备名称</div>
+				<div>报警值</div>
+				<div>阈值</div>
+				<div>超标时间</div>
+				<div>超标量</div>
+			</div>
+
+			<el-scrollbar class="listBox" ref="refScrollbar">
+				<div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
+					<div>{{alarmTypeList[item.type]}}</div>
+					<div>{{item.alarmTypeName}}</div>
+					<div>{{item.deviceName}}</div>
+					<div>{{item.avgData}}</div>
+					<div>{{item.alarmValue}}</div>
+					<div>{{item.tempAlarmTime}}</div>
+					<div>{{item.exceedVal}}</div>
+				</div>
+				<div class="notoDta" v-if="partyMemberList.length == 0">
+					<img src="@/assets/images/noData.png" alt="" />
+					<p>暂无数据</p>
+				</div>
+			</el-scrollbar>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { GlobalStore } from "@/stores";
+import { environmentDevList, getAlarmCountTotalList } from "@/api/modules/headNoise";
+const store = GlobalStore();
+const props = defineProps(["typeId"])
+const alarmTypeList = ref(['报警', '预警'])
+let pageNo = ref(1 as any);
+let moreScroll = ref(true as any);
+const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
+const deviceList = ref([] as any); // 设备列表
+const searchForm = ref({
+	alarmType: '',
+	name: "",
+	rangeTime: ""
+})
+
+const partyMemberList = ref({} as any);
+//获取设备下拉
+const getDevList = async () => {
+	const res:any = await environmentDevList({ projectSn: store.sn });
+	console.log("获取设备下拉", res);
+	if (res.result.length > 0) {
+		deviceList.value = res.result;
+		searchForm.value.name = res.result[0].deviceId
+	}
+};
+//获取历史报警数据
+const getHistoryAlarmList = async (tip:any) => {
+	let requestData:any = {
+		deviceId: searchForm.value.name,
+		projectSn: store.sn,
+		alarmTypeId: props.typeId,
+		type: searchForm.value.alarmType,
+		pageNo: tip == 'search'?1:pageNo.value,
+		pageSize: 100
+	}
+	if(searchForm.value.rangeTime){
+		requestData.startTime = searchForm.value.rangeTime[0];
+		requestData.endTime = searchForm.value.rangeTime[1];
+	}
+	const res: any = await getAlarmCountTotalList(requestData);
+	console.log("获取历史数据", res);
+	if(tip == 'more'){
+		partyMemberList.value = partyMemberList.value.concat(res.result.records);
+	} else {
+		partyMemberList.value = res.result.records;
+	}
+	if (res.result.pages == pageNo.value) {
+		moreScroll.value = false;
+	} else {
+		pageNo.value = pageNo.value + 1;
+	}
+};
+
+onMounted(async () => {
+	await getDevList();
+	await getHistoryAlarmList('search');
+	refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
+		// console.log("滚动容器", e);
+		const scrollTop = e.target.scrollTop;
+		const scrollHeight = e.target.scrollHeight;
+		const clientHeight = e.target.clientHeight;
+		// console.log("滚动容器", scrollTop, scrollHeight, clientHeight);
+		// 向上加载更多
+		if (scrollTop >= scrollHeight - clientHeight - 1) {
+			// console.log("加载更多");
+			if (moreScroll.value) {
+				getHistoryAlarmList('more');
+			}
+		}
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+@mixin flex{
+	display: flex;
+	align-items: center;
+}
+.political-outlook {
+	width: 100%;
+	height: 100%;
+	.content {
+		height: 95%;
+		width: 100%;
+		margin-top: 10px;
+		// background: url("@/assets/images/cardImg.png") no-repeat;
+		background-size: 100% 100%;
+		.top-search{
+			@include flex;
+			justify-content: flex-end;
+			margin-bottom: 15px;
+			.search-item{
+				@include flex;
+				margin-right: 20px;
+				span{
+					color: white;
+					margin-right: 10px;
+				}
+			}
+		}
+		.tabList {
+			display: flex;
+			width: 100%;
+			height: 5%;
+			background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
+			background-size: 100% 100%;
+			// position: absolute;
+			left: 75.5%;
+			top: 75%;
+			color: #ccc;
+			font-size: calc(100vw * 14 / 1920);
+			line-height: 30px;
+			align-items: center;
+			div {
+				text-align: center;
+				width: 15%;
+			}
+		}
+		.listBox {
+			overflow-x: scroll;
+			height: 90%;
+			.listStyle {
+				display: flex;
+				align-items: center;
+				text-align: center;
+				color: #fff;
+				font-size: 12px;
+				margin-bottom: 5px;
+				.list-img {
+					.el-img {
+						width: 30px;
+						height: 30px;
+						img {
+							display: flex;
+							align-items: center;
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+				div {
+					width: 15%;
+					white-space: nowrap; //单行
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+			.listStyle:hover {
+				background: #091f3f;
+			}
+		}
+	}
+}
+.notoDta {
+	top: 35%;
+	width: 20%;
+	left: 40%;
+	position: absolute;
+	text-align: center;
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+	p {
+		color: #fff;
+		font-size: calc(100vw * 14 / 1920);
+		margin: -6% 37%;
+	}
+}
+// element 组件样式
+:deep(){
+.el-date-editor .el-range-input,.el-range-separator{
+	color: #fff;
+}
+.el-input__wrapper {
+	background: #112d59;
+}
+.el-input__inner {
+	color: #fff;
+}
+.el-button{
+	background-color: #2758C0;
+	color: white;
+	border-color: transparent;
+}
+}
+// ::v-deep .el-select .el-input .el-select__caret {
+// 	color: #fff;
+// }
+</style>
diff --git a/src/views/sevenLargeScreen/headNoise/history-list.vue b/src/views/sevenLargeScreen/headNoise/history-list.vue
new file mode 100644
index 0000000..1a27323
--- /dev/null
+++ b/src/views/sevenLargeScreen/headNoise/history-list.vue
@@ -0,0 +1,262 @@
+<template>
+	<div class="political-outlook">
+		<div class="content">
+			<div class="top-search">
+				<div class="search-item">
+					<span>设备名称</span>
+					<el-select class="m-2" placeholder="请选择" size="small" v-model="searchForm.name" 
+						:clearable="true">
+						<el-option
+							v-for="(item, index) in deviceList"
+							:key="index"
+							:label="item.deviceName"
+            				:value="item.deviceId"
+						/>
+					</el-select>
+				</div>
+				<div class="search-item">
+					<span>时间筛选</span>
+					<el-date-picker
+						v-model="searchForm.rangeTime"
+						type="daterange"
+						range-separator="至"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						value-format="YYYY-MM-DD"
+						:clearable="true"
+					/>
+				</div>
+				<el-button @click="getHistoryList('search')">查询</el-button>
+			</div>
+			<div class="tabList">
+				<div>设备名称</div>
+				<div>crc校验值</div>
+				<div>湿度</div>
+				<div>噪音</div>
+				<div>板载湿度</div>
+				<div>板载温度</div>
+				<div>pm10</div>
+				<div>pm25</div>
+				<div>大气压</div>
+				<div>温度</div>
+				<div>tsp测试值</div>
+				<div style="width: 5%;">电压</div>
+				<div style="width: 5%;">风向</div>
+				<div style="width: 5%;">风速</div>
+				<div style="width: 13%;">上传时间</div>
+			</div>
+
+			<el-scrollbar class="listBox" ref="refScrollbar">
+				<div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
+					<div>{{item.deviceName}}</div>
+					<div>{{item.crc}}</div>
+					<div>{{item.humidity}}</div>
+					<div>{{item.noise}}</div>
+					<div>{{item.plateHumidity}}</div>
+					<div>{{item.plateTemperature}}</div>
+					<div>{{item.pm10}}</div>
+					<div>{{item.pm25}}</div>
+					<div>{{item.pressure}}</div>
+					<div>{{item.temperature}}</div>
+					<div>{{item.tsp}}</div>
+					<div style="width: 5%;">{{item.voltage}}</div>
+					<div style="width: 5%;">{{item.winddirection}}</div>
+					<div style="width: 5%;">{{item.windspeed}}</div>
+					<div style="width: 13%;">{{item.uploadDate}}</div>
+				</div>
+				<div class="notoDta" v-if="partyMemberList.length == 0">
+					<img src="@/assets/images/noData.png" alt="" />
+					<p>暂无数据</p>
+				</div>
+			</el-scrollbar>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { GlobalStore } from "@/stores";
+import { environmentDevList, environmentDevRealData } from "@/api/modules/headNoise";
+const store = GlobalStore();
+let pageNo = ref(1 as any);
+let moreScroll = ref(true as any);
+const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
+const deviceList = ref([] as any); // 设备列表
+const searchForm = ref({
+	name: "",
+	rangeTime: ""
+})
+
+const partyMemberList = ref({} as any);
+//获取设备下拉
+const getDevList = async () => {
+	const res:any = await environmentDevList({ projectSn: store.sn });
+	console.log("获取设备下拉", res);
+	if (res.result.length > 0) {
+		deviceList.value = res.result;
+		searchForm.value.name = res.result[0].deviceId
+	}
+};
+//获取历史数据
+const getHistoryList = async (tip:any) => {
+	let requestData:any = {
+		deviceId: searchForm.value.name,
+		projectSn: store.sn,
+		pageNo: tip == 'search'?1:pageNo.value,
+		pageSize: 100
+	}
+	if(searchForm.value.rangeTime){
+		requestData.startTime = searchForm.value.rangeTime[0];
+		requestData.endTime = searchForm.value.rangeTime[1];
+	}
+	const res: any = await environmentDevRealData(requestData);
+	console.log("获取历史数据", res);
+	if(tip == 'more'){
+		partyMemberList.value = partyMemberList.value.concat(res.result.records);
+	} else {
+		partyMemberList.value = res.result.records;
+	}
+	if (res.result.pages == pageNo.value) {
+		moreScroll.value = false;
+	} else {
+		pageNo.value = pageNo.value + 1;
+	}
+};
+
+onMounted(async () => {
+	await getDevList();
+	await getHistoryList('search');
+	refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
+		// console.log("滚动容器", e);
+		const scrollTop = e.target.scrollTop;
+		const scrollHeight = e.target.scrollHeight;
+		const clientHeight = e.target.clientHeight;
+		// console.log("滚动容器", scrollTop, scrollHeight, clientHeight);
+		// 向上加载更多
+		if (scrollTop >= scrollHeight - clientHeight - 1) {
+			// console.log("加载更多");
+			if (moreScroll.value) {
+				getHistoryList('more');
+			}
+		}
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+@mixin flex{
+	display: flex;
+	align-items: center;
+}
+.political-outlook {
+	width: 100%;
+	height: 100%;
+	.content {
+		height: 95%;
+		width: 100%;
+		margin-top: 10px;
+		// background: url("@/assets/images/cardImg.png") no-repeat;
+		background-size: 100% 100%;
+		.top-search{
+			@include flex;
+			justify-content: flex-end;
+			margin-bottom: 15px;
+			.search-item{
+				@include flex;
+				margin-right: 20px;
+				span{
+					color: white;
+					margin-right: 10px;
+				}
+			}
+		}
+		.tabList {
+			display: flex;
+			width: 100%;
+			height: 5%;
+			background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
+			background-size: 100% 100%;
+			// position: absolute;
+			left: 75.5%;
+			top: 75%;
+			color: #ccc;
+			font-size: calc(100vw * 14 / 1920);
+			line-height: 30px;
+			align-items: center;
+			div {
+				text-align: center;
+				width: 7%;
+			}
+		}
+		.listBox {
+			overflow-x: scroll;
+			height: 90%;
+			.listStyle {
+				display: flex;
+				align-items: center;
+				text-align: center;
+				color: #fff;
+				font-size: 12px;
+				margin-bottom: 5px;
+				.list-img {
+					.el-img {
+						width: 30px;
+						height: 30px;
+						img {
+							display: flex;
+							align-items: center;
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+				div {
+					width: 7%;
+					white-space: nowrap; //单行
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+			.listStyle:hover {
+				background: #091f3f;
+			}
+		}
+	}
+}
+.notoDta {
+	top: 35%;
+	width: 20%;
+	left: 40%;
+	position: absolute;
+	text-align: center;
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+	p {
+		color: #fff;
+		font-size: calc(100vw * 14 / 1920);
+		margin: -6% 37%;
+	}
+}
+// element 组件样式
+:deep(){
+.el-date-editor .el-range-input,.el-range-separator{
+	color: #fff;
+}
+.el-input__wrapper {
+	background: #112d59;
+}
+.el-input__inner {
+	color: #fff;
+}
+.el-button{
+	background-color: #2758C0;
+	color: white;
+	border-color: transparent;
+}
+}
+// ::v-deep .el-select .el-input .el-select__caret {
+// 	color: #fff;
+// }
+</style>
diff --git a/src/views/sevenLargeScreen/headNoise/index.vue b/src/views/sevenLargeScreen/headNoise/index.vue
index 9a16c73..457d8a0 100644
--- a/src/views/sevenLargeScreen/headNoise/index.vue
+++ b/src/views/sevenLargeScreen/headNoise/index.vue
@@ -7,18 +7,19 @@
 			<div class="leftBottom"><LeftBottom /></div>
 		</div>
 		<div class="center">
-			<div class="centerTop"><CenterTop /></div>
+			<div class="centerTop"><CenterTop @openDialog="openPeopleCountDialog"/></div>
 			<div class="centerBottom"><CenterBottom /></div>
 		</div>
 		<div class="right">
 			<div class="rightTop"><RightTop /></div>
-			<div class="rightCenter"><RightCenter /></div>
+			<div class="rightCenter"><RightCenter @openDialog="openPeopleCountDialog"/></div>
 			<div class="rightbottom"><RightBottom /></div>
 		</div>
+		<dataDialog ref="partyBuildRef"></dataDialog>
 	</div>
 </template>
 
-<script>
+<script lang="ts" setup>
 import LeftTop from "@/views/sevenLargeScreen/headNoise/leftTop.vue";
 import LeftCenter from "@/views/sevenLargeScreen/headNoise/leftCenter.vue";
 import LeftBottom from "@/views/sevenLargeScreen/headNoise/leftBottom.vue";
@@ -27,17 +28,14 @@ import CenterBottom from "@/views/sevenLargeScreen/headNoise/centerBottom.vue";
 import RightTop from "@/views/sevenLargeScreen/headNoise/rightTop.vue";
 import RightCenter from "@/views/sevenLargeScreen/headNoise/rightCenter.vue";
 import RightBottom from "@/views/sevenLargeScreen/headNoise/rightBottom.vue";
-export default {
-	components: {
-		LeftTop,
-		LeftCenter,
-		LeftBottom,
-		CenterTop,
-		CenterBottom,
-		RightTop,
-		RightCenter,
-		RightBottom
-	}
+import dataDialog from "./data-dialog.vue";
+import { ref } from "vue";
+
+// 弹窗
+const partyBuildRef = ref();
+const openPeopleCountDialog = (type:any) => {
+	partyBuildRef.value.openDialog(type);
+	// console.log(partyBuildRef.value);
 };
 </script>
 
diff --git a/src/views/sevenLargeScreen/headNoise/rightCenter.vue b/src/views/sevenLargeScreen/headNoise/rightCenter.vue
index f5df40e..3a630d2 100644
--- a/src/views/sevenLargeScreen/headNoise/rightCenter.vue
+++ b/src/views/sevenLargeScreen/headNoise/rightCenter.vue
@@ -1,5 +1,5 @@
 <template>
-	<Card title="今日报警统计">
+	<Card title="历史报警统计">
 		<div class="top-bg">
 			<!-- <div class="num">{{ totalAlarm }}</div> -->
 			<div class="styleImg"></div>
@@ -12,13 +12,15 @@
 import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
 import * as echarts from "echarts";
 import Card from "@/components/card.vue";
-import { getAlarmCountTotalApi } from "@/api/modules/headNoise";
+import { getAlarmCountTotalApi, getAlarmTypeList } from "@/api/modules/headNoise";
 import { GlobalStore } from "@/stores";
+const emits = defineEmits(["openDialog"]);
 const store = GlobalStore();
 // let timer = ref(null);
 // //角度，用来做简单的动画效果的
 // let angle = ref(0);
 // let value = ref(55.33);
+const alarmTypeList = ref([] as any);
 const totalAlarm = ref(0);
 //图形右侧数据
 let totalData = ref([
@@ -410,7 +412,11 @@ let option = ref({
 	},
 	series: seriesOption.value
 });
-
+// 获取报警的类型列表
+const getTypeList = async () => {
+	const res = await getAlarmTypeList({});
+	alarmTypeList.value = res.result;
+};
 function _pie3() {
 	let dataArr = [];
 	for (var i = 0; i < 100; i++) {
@@ -493,9 +499,46 @@ function draw() {
 	console.log("绘图数据", option.value);
 	let echartsTest = echarts.init(document.getElementById("echartsTest"));
 	echartsTest.setOption(option.value);
+	// 监听legend的点击事件
+	echartsTest.on("legendselectchanged", function (params: any) {
+		echartsTest.setOption({
+			legend: { selected: { [params.name]: true } }
+		});
+		console.log("点击了", params.name);
+		let typeName = "";
+		switch (params.name) {
+			case "噪声报警":
+				typeName = "噪声";
+				break;
+			case "PM2.5超标报警":
+				typeName = "pm2.5";
+				break;
+			case "PM10超标报警":
+				typeName = "pm10";
+				break;
+			case "TSP报警":
+				typeName = "TSP";
+				break;
+			case "温度报警":
+				typeName = "温度";
+				break;
+			case "湿度报警":
+				typeName = "湿度";
+				break;
+			case "风速报警":
+				typeName = "风速";
+				break;
+		}
+		let findItem = alarmTypeList.value.find((item:any) => {
+			return item.alarmType == typeName
+		})
+		emits("openDialog", { type: 2, id: findItem.id });
+		// do something
+	});
 }
 onMounted(async () => {
 	getList();
+	await getTypeList();
 	// setTimeout(function () {
 	// 	timer = setInterval(function () {
 	// 		// 	//用setInterval做动画感觉有问题
diff --git a/src/views/sevenLargeScreen/indexL.vue b/src/views/sevenLargeScreen/indexL.vue
index 85b8e92..bf2155c 100644
--- a/src/views/sevenLargeScreen/indexL.vue
+++ b/src/views/sevenLargeScreen/indexL.vue
@@ -196,10 +196,10 @@ let menuList = ref([
 			// 	menuName: "仓库管理",
 			// 	companyPath: "/warehouseManage"
 			// },
-			{
-				menuName: "工牌定位",
-				companyPath: "/smartWorkCard"
-			},
+			//{
+			//	menuName: "工牌定位",
+			//	companyPath: "/smartWorkCard"
+			//},
 			{
 				menuName: "AI预警",
 				companyPath: "/aIEarlyWarning"
diff --git a/src/views/sevenLargeScreen/laborManagement/data-dialog.vue b/src/views/sevenLargeScreen/laborManagement/data-dialog.vue
new file mode 100644
index 0000000..8493ae6
--- /dev/null
+++ b/src/views/sevenLargeScreen/laborManagement/data-dialog.vue
@@ -0,0 +1,118 @@
+<template>
+	<div class="list-detail" v-if="showDialog">
+		<div class="dialog-content">
+			<div class="dialog-title">
+				<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
+				<div class="title-text">
+					<i>{{ dialogTitle }}</i>
+				</div>
+			</div>
+			<div class="political-outlook" v-if="postData.type == 1">
+				<memberCountList ref="historyAlarmList" :tip="postData.tip"></memberCountList>
+			</div>
+			<div class="close-icon" @click="showDialog = false">
+				<el-icon><Close /></el-icon>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import memberCountList from "./member-count-list.vue";
+import { GlobalStore } from "@/stores";
+let showDialog = ref(false as any);
+const postData = ref({} as any);
+let dialogTitle = ref("" as any);
+function openDialog(obj: any) {
+	console.log("type", obj);
+	if(obj.type == 1){
+		dialogTitle.value = "人数统计数据";
+	} else if(obj.type == 2) {
+		dialogTitle.value = "历史报警数据";
+	}
+	postData.value = obj
+	showDialog.value = true;
+}
+
+// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
+defineExpose({
+	openDialog
+});
+
+onMounted(async () => {
+	console.log("Mount_type", postData.value.type);
+});
+</script>
+
+<style lang="scss" scoped>
+.list-detail {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0%;
+	left: 0%;
+	background: rgba(7, 28, 49, 0.5);
+	z-index: 20;
+	.dialog-content {
+		position: absolute;
+		box-sizing: border-box;
+		padding: 1%;
+		left: 17%;
+		top: 21%;
+		width: 70%;
+		height: 60%;
+		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
+		background-size: 100% 100%;
+		z-index: 21;
+		.political-outlook {
+			height: 95%;
+		}
+		.dialog-article {
+			height: 95%;
+		}
+		.close-icon {
+			position: absolute;
+			right: 3%;
+			top: 3%;
+			cursor: pointer;
+			color: #ffffff;
+			font-size: 18px;
+		}
+		.dialog-title {
+			color: #ffffff;
+			font-weight: bold;
+			font-size: 18px;
+			font-family: "OPPOSans-Bold";
+			display: flex;
+			align-items: center;
+			.title-img {
+				width: 3%;
+				height: 3%;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.title-text {
+				margin-left: 1%;
+			}
+		}
+	}
+}
+.notoDta {
+	top: 73%;
+	width: 12%;
+	left: 44%;
+	position: absolute;
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+	p {
+		color: #fff;
+		font-size: 14px;
+		margin: -6% 37%;
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/laborManagement/index.vue b/src/views/sevenLargeScreen/laborManagement/index.vue
index 2137f20..a975063 100644
--- a/src/views/sevenLargeScreen/laborManagement/index.vue
+++ b/src/views/sevenLargeScreen/laborManagement/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="laboorBox">
 		<div class="left">
-			<LeftTop class="leftTop"></LeftTop>
+			<LeftTop class="leftTop" @openDialog="openPeopleCountDialog"></LeftTop>
 			<LeftBottom class="leftBottom"></LeftBottom>
 		</div>
 		<div class="right">
@@ -9,23 +9,24 @@
 			<RightCenter class="rightCenter"></RightCenter>
 			<RightBottom class="rightBottom"></RightBottom>
 		</div>
+		<dataDialog ref="partyBuildRef"></dataDialog>
 	</div>
 </template>
 
-<script>
+<script  lang="ts" setup>
 import LeftTop from "@/views/sevenLargeScreen/laborManagement/leftTop.vue";
 import LeftBottom from "@/views/sevenLargeScreen/laborManagement/leftBottom.vue";
 import RightTop from "@/views/sevenLargeScreen/laborManagement/rightTop.vue";
 import RightCenter from "@/views/sevenLargeScreen/laborManagement/rightCenter.vue";
 import RightBottom from "@/views/sevenLargeScreen/laborManagement/rightBottom.vue";
-export default {
-	components: {
-		LeftTop,
-		LeftBottom,
-		RightTop,
-		RightCenter,
-		RightBottom
-	}
+import dataDialog from "./data-dialog.vue";
+import { ref } from "vue";
+
+// 弹窗
+const partyBuildRef = ref();
+const openPeopleCountDialog = (obj:any) => {
+	partyBuildRef.value.openDialog(obj);
+	// console.log(partyBuildRef.value);
 };
 </script>
 
diff --git a/src/views/sevenLargeScreen/laborManagement/leftTop.vue b/src/views/sevenLargeScreen/laborManagement/leftTop.vue
index a0fec7a..4d77b41 100644
--- a/src/views/sevenLargeScreen/laborManagement/leftTop.vue
+++ b/src/views/sevenLargeScreen/laborManagement/leftTop.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="LeftTopBox">
 		<div class="leftData">
-			<div class="numberPeople">
+			<div class="numberPeople" @click="openDialogData('实时')">
 				<div class="text">
 					<i>实时人数</i>
 				</div>
@@ -9,13 +9,13 @@
 					<i>{{ presencePerson }}</i>
 				</div>
 			</div>
-			<div class="numberPeople">
+			<div class="numberPeople" @click="openDialogData('日累积')">
 				<div class="text"><i>日累积人数</i></div>
 				<div class="num">
 					<i>{{ attendancePerson }}</i>
 				</div>
 			</div>
-			<div class="numberPeople">
+			<div class="numberPeople" @click="openDialogData('总人数')">
 				<div class="text"><i>总人数</i></div>
 				<div class="num">
 					<i>{{ toaltPerson }}</i>
@@ -38,6 +38,7 @@ import { onMounted, reactive, ref } from "vue";
 import { getPersonTypeAndEduStatisticsApi, getQueryTodayAttendanceTrendApi } from "@/api/modules/labor";
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
+const emits = defineEmits(["openDialog"])
 const presencePerson = ref(0); //实时人数
 const attendancePerson = ref(0); //日累计人数
 const toaltPerson = ref(0); //总人数
@@ -221,6 +222,10 @@ const option = reactive({
 		}
 	]
 });
+// 打开弹窗
+const openDialogData = (tip:any) => {
+	emits("openDialog",{type: 1, tip})
+}
 function drawChart() {
 	let myEchartsNum = echarts.init(document.getElementById("myEchartsNum"));
 	myEchartsNum.setOption(option);
diff --git a/src/views/sevenLargeScreen/laborManagement/member-count-list.vue b/src/views/sevenLargeScreen/laborManagement/member-count-list.vue
new file mode 100644
index 0000000..c611a63
--- /dev/null
+++ b/src/views/sevenLargeScreen/laborManagement/member-count-list.vue
@@ -0,0 +1,271 @@
+<template>
+	<div class="political-outlook">
+		<div class="content">
+			<div class="top-search">
+				<div class="search-item">
+					<span>人员类型</span>
+					<el-select class="m-2" placeholder="请选择" size="small" v-model="searchForm.alarmType" 
+						:clearable="true" style="width: 150px;">
+						<el-option
+							v-for="(item, index) in alarmTypeList"
+							:key="index"
+							:label="item"
+            				:value="index"
+						/>
+					</el-select>
+				</div>
+				<div class="search-item">
+					<span>所属企业</span>
+					<el-select class="m-2" placeholder="请选择" size="small" v-model="searchForm.name" 
+						:clearable="true" style="width: 150px;">
+						<el-option
+							v-for="(item, index) in deviceList"
+							:key="index"
+							:label="item.deviceName"
+            				:value="item.deviceId"
+						/>
+					</el-select>
+				</div>
+				<div class="search-item">
+					<span>在职状态</span>
+					<el-select class="m-2" placeholder="请选择" size="small" v-model="searchForm.name" 
+						:clearable="true" style="width: 150px;">
+						<el-option
+							v-for="(item, index) in deviceList"
+							:key="index"
+							:label="item.deviceName"
+            				:value="item.deviceId"
+						/>
+					</el-select>
+				</div>
+				<div class="search-item">
+					<span>姓名</span>
+					<el-input placeholder="请输入" v-model="searchForm.name" style="width: 150px;"/>
+				</div>
+				<div class="search-item">
+					<span>身份证号</span>
+					<el-input placeholder="请输入" v-model="searchForm.name" style="width: 180px;"/>
+				</div>
+				<el-button @click="getHistoryAlarmList('search')">查询</el-button>
+			</div>
+			<div class="tabList">
+				<div>报警类型</div>
+				<div>报警名称</div>
+				<div>设备名称</div>
+				<div>报警值</div>
+				<div>阈值</div>
+				<div>超标时间</div>
+				<div>超标量</div>
+			</div>
+
+			<el-scrollbar class="listBox" ref="refScrollbar">
+				<div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
+					<div>{{alarmTypeList[item.type]}}</div>
+					<div>{{item.alarmTypeName}}</div>
+					<div>{{item.deviceName}}</div>
+					<div>{{item.avgData}}</div>
+					<div>{{item.alarmValue}}</div>
+					<div>{{item.tempAlarmTime}}</div>
+					<div>{{item.exceedVal}}</div>
+				</div>
+				<div class="notoDta" v-if="partyMemberList.length == 0">
+					<img src="@/assets/images/noData.png" alt="" />
+					<p>暂无数据</p>
+				</div>
+			</el-scrollbar>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { GlobalStore } from "@/stores";
+import { environmentDevList, getAlarmCountTotalList } from "@/api/modules/headNoise";
+const store = GlobalStore();
+const props = defineProps(["tip"])
+const alarmTypeList = ref(['报警', '预警'])
+let pageNo = ref(1 as any);
+let moreScroll = ref(true as any);
+const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
+const deviceList = ref([] as any); // 设备列表
+const searchForm = ref({
+	alarmType: '',
+	name: "",
+	rangeTime: ""
+})
+
+const partyMemberList = ref({} as any);
+//获取设备下拉
+const getDevList = async () => {
+	const res:any = await environmentDevList({ projectSn: store.sn });
+	console.log("获取设备下拉", res);
+	if (res.result.length > 0) {
+		deviceList.value = res.result;
+		searchForm.value.name = res.result[0].deviceId
+	}
+};
+//获取历史报警数据
+const getHistoryAlarmList = async (tip:any) => {
+	let requestData:any = {
+		deviceId: searchForm.value.name,
+		projectSn: store.sn,
+		alarmTypeId: props.tip,
+		type: searchForm.value.alarmType,
+		pageNo: tip == 'search'?1:pageNo.value,
+		pageSize: 100
+	}
+	if(searchForm.value.rangeTime){
+		requestData.startTime = searchForm.value.rangeTime[0];
+		requestData.endTime = searchForm.value.rangeTime[1];
+	}
+	const res: any = await getAlarmCountTotalList(requestData);
+	console.log("获取历史数据", res);
+	if(tip == 'more'){
+		partyMemberList.value = partyMemberList.value.concat(res.result.records);
+	} else {
+		partyMemberList.value = res.result.records;
+	}
+	if (res.result.pages == pageNo.value) {
+		moreScroll.value = false;
+	} else {
+		pageNo.value = pageNo.value + 1;
+	}
+};
+
+onMounted(async () => {
+	await getDevList();
+	await getHistoryAlarmList('search');
+	refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
+		// console.log("滚动容器", e);
+		const scrollTop = e.target.scrollTop;
+		const scrollHeight = e.target.scrollHeight;
+		const clientHeight = e.target.clientHeight;
+		// console.log("滚动容器", scrollTop, scrollHeight, clientHeight);
+		// 向上加载更多
+		if (scrollTop >= scrollHeight - clientHeight - 1) {
+			// console.log("加载更多");
+			if (moreScroll.value) {
+				getHistoryAlarmList('more');
+			}
+		}
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+@mixin flex{
+	display: flex;
+	align-items: center;
+}
+.political-outlook {
+	width: 100%;
+	height: 100%;
+	.content {
+		height: 95%;
+		width: 100%;
+		margin-top: 10px;
+		// background: url("@/assets/images/cardImg.png") no-repeat;
+		background-size: 100% 100%;
+		.top-search{
+			@include flex;
+			justify-content: flex-end;
+			margin-bottom: 15px;
+			.search-item{
+				@include flex;
+				margin-right: 20px;
+				span{
+					color: white;
+					margin-right: 10px;
+				}
+			}
+		}
+		.tabList {
+			display: flex;
+			width: 100%;
+			height: 5%;
+			background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
+			background-size: 100% 100%;
+			// position: absolute;
+			left: 75.5%;
+			top: 75%;
+			color: #ccc;
+			font-size: calc(100vw * 14 / 1920);
+			line-height: 30px;
+			align-items: center;
+			div {
+				text-align: center;
+				width: 15%;
+			}
+		}
+		.listBox {
+			overflow-x: scroll;
+			height: 90%;
+			.listStyle {
+				display: flex;
+				align-items: center;
+				text-align: center;
+				color: #fff;
+				font-size: 12px;
+				margin-bottom: 5px;
+				.list-img {
+					.el-img {
+						width: 30px;
+						height: 30px;
+						img {
+							display: flex;
+							align-items: center;
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+				div {
+					width: 15%;
+					white-space: nowrap; //单行
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+			.listStyle:hover {
+				background: #091f3f;
+			}
+		}
+	}
+}
+.notoDta {
+	top: 35%;
+	width: 20%;
+	left: 40%;
+	position: absolute;
+	text-align: center;
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+	p {
+		color: #fff;
+		font-size: calc(100vw * 14 / 1920);
+		margin: -6% 37%;
+	}
+}
+// element 组件样式
+:deep(){
+.el-date-editor .el-range-input,.el-range-separator{
+	color: #fff;
+}
+.el-input__wrapper {
+	background: #112d59;
+}
+.el-input__inner {
+	color: #fff;
+}
+.el-button{
+	background-color: #2758C0;
+	color: white;
+	border-color: transparent;
+}
+}
+// ::v-deep .el-select .el-input .el-select__caret {
+// 	color: #fff;
+// }
+</style>
diff --git a/src/views/sevenLargeScreen/videoManagement/index.vue b/src/views/sevenLargeScreen/videoManagement/index.vue
index 408f078..2985bc7 100644
--- a/src/views/sevenLargeScreen/videoManagement/index.vue
+++ b/src/views/sevenLargeScreen/videoManagement/index.vue
@@ -65,6 +65,13 @@
 											class="shrink-0 image_4 cursorPointer"
 											src="@/assets/images/videoThree.png"
 										/>
+										<img v-show="showType == 12" class="shrink-0 image_4" src="@/assets/images/videoFour1.png" />
+										<img
+											v-show="showType != 12"
+											@click="changeShowType(12)"
+											class="shrink-0 image_4 cursorPointer"
+											src="@/assets/images/videoFour.png"
+										/>
 									</div>
 								</div>
 								<div class="flex-row items-start relative group_2 space-x-16">
@@ -362,6 +369,14 @@ onMounted(async () => {
 					//   margin-right: 0;
 					// }
 				}
+				&.showType12 .section_9 {
+					width: 23%;
+					height: 30%;
+					margin: 15px;
+					// &:nth-child(4n) {
+					//   margin-right: 0;
+					// }
+				}
 				.space-y-7 {
 					& > *:not(:first-child) {
 						margin-top: 7px;