fix: 完成智慧党建页面及其弹窗（6个）

src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomCenter.vue

@@ -17,7 +17,7 @@
 </template>
 <script lang="ts" setup>
 import Card from "@/components/card.vue";
-import driverPhoto from "@/assets/images/towerCraneMonitoring/driverPhoto.png";
+import driverPhoto from "@/assets/images/comprehensiveManage/project3.png";
 import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
 const list = reactive([
 	{

src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/dialog-article.vue

@@ -0,0 +1,165 @@
+<template>
+	<div class="dialog-article">
+		<div class="dialog-input"></div>
+		<div class="main-article">
+			<div class="left-content">
+				<div class="content-tab">
+					<div
+						class="tab-box"
+						:style="boxStyle(item)"
+						v-for="(item, index) in topText"
+						:key="item.id"
+						@click="activeBtn(item, index)"
+					>
+						<div class="text" :style="getStyle(item)">学习贯彻习近平新时代中国特色社会主义思想主题教育深入开展</div>
+						<div class="time">时间: 2023-09-01 12:00:00</div>
+					</div>
+				</div>
+			</div>
+			<div class="right-content">
+				<div class="content-right" v-if="tabIndex === 1 || tabIndex === 3 || tabIndex === 5">
+					<div class="right-title">学习贯彻习近平新时代中国特色社会主义思想主题教育深入开展（学思想 强党性 重实践 建新功）</div>
+					<div class="right-time">时间: 2023-09-01 12:00:00</div>
+					<div class="right-textarea">
+						不断提高运用马克思主义分析和解决实际问题的能力，不断提高运用习近平新时代中国特色社会主义思想指导我们应对重大挑战、抵御重大风险、克服重大阻力、化解重大矛盾、解决重大问题的能力。
+					</div>
+					<div class="right-textarea">
+						坚持学思用贯通、知信行统一，把习近平新时代中国特色社会主义思想转化为坚定理想、锤炼党性和指导实践、推动工作的强大力量。
+					</div>
+					<div class="right-textarea">
+						国新办涉税经营主体343.4万户，同比增长7.2%；住宿餐饮、文体娱乐、居民服务等接触类服务业销售收入同比分别增长22.8%、13.7%和9.4%；风能、太阳能光伏等清洁能源发电同比增长21.8%……今年一季度，中国经济运行稳步改善。广大党员、干部深入学习贯彻习近平新时代中国特色社会主义思想，贯彻落实党中央决策部署，以实绩助力中国经济开局向好。
+					</div>
+					<div class="right-textarea">
+						开展任何一项工作，首先看态度，关键看行动，最终看效果。在学习贯彻习近平新时代中国特色社会主义思想主题教育工作会议上，习近平总书记对开展主题教育的总要求作出深刻阐释，其中一个方面就是“建新功”。开展这次主题教育，就要从习近平新时代中国特色社会主义思想中汲取奋发进取的智慧和力量，熟练掌握其中蕴含的领导方法、思想方法、工作方法，不断提高履职尽责的能力和水平，凝心聚力促发展，驰而不息抓落实，立足岗位作贡献，努力创造经得起历史和人民检验的实绩。
+					</div>
+				</div>
+				<div class="content-right" v-if="tabIndex === 2 || tabIndex === 4">
+					<div class="right-title">学习贯彻习近平新时代中国特色社会主义思想主题教育深入开展（学思想 强党性 重实践 建新功）</div>
+					<div class="right-time">时间: 2023-09-01 12:00:00</div>
+					<div class="right-textarea">
+						坚持学思用贯通、知信行统一，把习近平新时代中国特色社会主义思想转化为坚定理想、锤炼党性和指导实践、推动工作的强大力量。
+					</div>
+					<div class="right-textarea">
+						不断提高运用马克思主义分析和解决实际问题的能力，不断提高运用习近平新时代中国特色社会主义思想指导我们应对重大挑战、抵御重大风险、克服重大阻力、化解重大矛盾、解决重大问题的能力。
+					</div>
+					<div class="right-textarea">
+						开展任何一项工作，首先看态度，关键看行动，最终看效果。在学习贯彻习近平新时代中国特色社会主义思想主题教育工作会议上，习近平总书记对开展主题教育的总要求作出深刻阐释，其中一个方面就是“建新功”。开展这次主题教育，就要从习近平新时代中国特色社会主义思想中汲取奋发进取的智慧和力量，熟练掌握其中蕴含的领导方法、思想方法、工作方法，不断提高履职尽责的能力和水平，凝心聚力促发展，驰而不息抓落实，立足岗位作贡献，努力创造经得起历史和人民检验的实绩。
+					</div>
+					<div class="right-textarea">
+						国新办涉税经营主体343.4万户，同比增长7.2%；住宿餐饮、文体娱乐、居民服务等接触类服务业销售收入同比分别增长22.8%、13.7%和9.4%；风能、太阳能光伏等清洁能源发电同比增长21.8%……今年一季度，中国经济运行稳步改善。广大党员、干部深入学习贯彻习近平新时代中国特色社会主义思想，贯彻落实党中央决策部署，以实绩助力中国经济开局向好。
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup>
+import { ref, watch, onMounted } from "vue";
+import firstIcon from "@/assets/images/smartPartyBuilding/contentBox.png";
+
+let tabIndex = ref(1 as any);
+let topText = ref([
+	{ id: 1, title: "起重机械", isActive: true },
+	{ id: 2, title: "高支模", isActive: false },
+	{ id: 3, title: "深基坑", isActive: false },
+	{ id: 4, title: "危大工程", isActive: false },
+	{ id: 5, title: "危大工程", isActive: false }
+]);
+
+function boxStyle(item: any) {
+	if (item.isActive) {
+		let choiseStyle = {
+			background: `url(${firstIcon}) no-repeat`,
+			backgroundSize: "100% 100%"
+		};
+		return choiseStyle;
+	}
+	return {};
+}
+
+function getStyle(item: any) {
+	if (item.isActive) {
+		let choiseStyle = {
+			color: "#4AC0F3"
+		};
+		return choiseStyle;
+	}
+	return {};
+}
+
+function activeBtn(item: any) {
+	let currentState = item.isActive;
+	if (!currentState) {
+		topText.value.forEach(el => {
+			el.isActive = false;
+		});
+		item.isActive = !currentState;
+		tabIndex.value = item.id;
+	}
+}
+</script>
+<style lang="scss" scoped>
+.dialog-article {
+	width: 100%;
+	height: 100%;
+	.dialog-input {
+	}
+	.main-article {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		.left-content {
+			width: 25%;
+			height: 100%;
+			border-right: 2px solid #405e97;
+			.content-tab {
+				width: 90%;
+				height: 100%;
+				.tab-box {
+					box-sizing: border-box;
+					padding: 5%;
+					width: 100%;
+					height: 17%;
+					margin-top: 5%;
+					// background: url("@/assets/images/smartPartyBuilding/contentBox.png") no-repeat;
+					// background-size: 100% 100%;
+					.text {
+						font-size: 14px;
+						color: rgba(255, 255, 255, 0.8);
+						cursor: pointer;
+					}
+					.time {
+						margin-top: 5%;
+						color: #a1accb;
+						font-size: 12px;
+					}
+				}
+			}
+		}
+		.right-content {
+			box-sizing: border-box;
+			padding: 0 2%;
+			width: 75%;
+			height: 100%;
+			.content-right {
+				.right-title {
+					margin-top: 1%;
+					font-size: 14px;
+					color: rgba(255, 255, 255, 0.8);
+				}
+				.right-time {
+					margin-top: 2%;
+					color: #a1accb;
+					font-size: 12px;
+				}
+				.right-textarea {
+					font-size: 12px;
+					margin-top: 3%;
+					color: rgba(255, 255, 255, 0.8);
+					text-indent: 2em;
+				}
+			}
+		}
+	}
+}
+</style>

src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftCenter.vue

@@ -3,6 +3,7 @@
 		<div class="leftBottomBox">
 			<div id="politicalOutlook" style="width: 100%; height: 100%"></div>
 		</div>
+		<party-build-dialog ref="partyBuildRef"></party-build-dialog>
 	</Card>
 </template>
 
@@ -10,10 +11,17 @@
 import { onMounted, ref } from "vue";
 import * as echarts from "echarts";
 import Card from "@/components/card.vue";
+import partyBuildDialog from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/party-build-dialog.vue";
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
 const airType = ref(1);
 let rangeTime = ref("" as any);
+// 政治面貌弹窗
+const partyBuildRef = ref();
+const openPeopleCountDialog = (type: any) => {
+	partyBuildRef.value.openDialog(type);
+	console.log(partyBuildRef.value);
+};
 let dataList = ref([
 	{
 		value: 37,
@@ -51,7 +59,7 @@ let dataList = ref([
 ]);
 function Pie() {
 	let dataArr = [];
-	for (var i = 0; i < 150; i++) {
+	for (let i = 0; i < 150; i++) {
 		if (i % 2 === 0) {
 			dataArr.push({
 				name: (i + 1).toString(),
@@ -91,6 +99,21 @@ function drawEchart() {
 		max = max + item.value;
 	});
 	let echartsTest = echarts.init(document.getElementById("politicalOutlook"));
+	echartsTest.on("legendselectchanged", function (params) {
+		openPeopleCountDialog(4);
+		// 判断点击的元素类型
+		// console.log(params, "输出点击数据");
+		// if (params.componentType === "series") {
+		// 	// 获取点击的柱状图数据
+		// 	let clickedData = params.data;
+		// 	// 在控制台输出点击的柱状图数据
+		// 	console.log(clickedData, "输出点击的数据");
+		// 	// openQualitySafeDialog(1);
+		// 	// 在这里可以根据需要执行自定义的点击事件操作
+		// 	// 例如根据柱状图数据加载相关数据，跳转到其他页面等
+		// 	// ...
+		// }
+	});
 	let option = {
 		tooltip: {
 			trigger: "item"
@@ -115,7 +138,7 @@ function drawEchart() {
 			}
 		},
 		legend: {
-			selectedMode: false, // 取消图例上的点击事件
+			selectedMode: true, // 取消图例上的点击事件
 			icon: "rect",
 			type: "plain",
 			orient: "vertical",

src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/party-build-dialog.vue

@@ -7,6 +7,15 @@
 					<i>{{ dialogTitle }}</i>
 				</div>
 			</div>
+			<div class="dialog-article" v-if="dialogIndex === 1 || dialogIndex === 2 || dialogIndex === 3 || dialogIndex === 6">
+				<dialog-article ref="dialogArticleRef"></dialog-article>
+			</div>
+			<div class="political-outlook" v-if="dialogIndex === 4">
+				<political-outlook></political-outlook>
+			</div>
+			<div class="political-outlook" v-if="dialogIndex === 5">
+				<party-member-demeanor ref="memberDemeanorRef"></party-member-demeanor>
+			</div>
 			<div class="close-icon" @click="showDialog = false">
 				<el-icon><Close /></el-icon>
 			</div>
@@ -16,7 +25,9 @@
 
 <script lang="ts" setup>
 import { reactive, ref, onMounted } from "vue";
-import textIcon from "@/assets/images/vehicleManagement/car.png";
+import partyMemberDemeanor from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/party-member-demeanor.vue";
+import politicalOutlook from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/political-outlook.vue";
+import dialogArticle from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/dialog-article.vue";
 import { GlobalStore } from "@/stores";
 let showDialog = ref(false as any);
 
@@ -26,9 +37,11 @@ function handleClick(event: any) {
 		showDialog.value = false;
 	}
 }
+let dialogIndex = ref(null as any);
 let dialogTitle = ref("" as any);
 function openDialog(type: any) {
 	console.log(type);
+	dialogIndex.value = type;
 	showDialog.value = true;
 	if (type === 1) {
 		dialogTitle.value = "员工关怀";
@@ -78,6 +91,12 @@ onMounted(async () => {});
 		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%;

src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/party-member-demeanor.vue

@@ -0,0 +1,409 @@
+<template>
+	<div class="political-outlook">
+		<div class="content">
+			<div class="tabList">
+				<div>序号</div>
+				<div>照片</div>
+				<div style="width: 5%">姓名</div>
+				<div style="width: 8%">性别</div>
+				<div>民族</div>
+				<div>出生日期</div>
+				<div>文化程度</div>
+				<div>岗位</div>
+				<div>政治面貌</div>
+				<div style="width: 11%">联系电话</div>
+				<div>入党誓言</div>
+			</div>
+
+			<div class="listBox">
+				<div v-for="(item, index) in list" class="listStyle" :key="item.id">
+					<div>{{ index + 1 }}</div>
+					<div class="list-img">
+						<img src="@/assets/images/comprehensiveManage/project3.png" alt="" />
+					</div>
+					<!-- <div>{{ item.dev }}</div> -->
+					<div style="width: 5%">{{ item.name }}</div>
+					<div style="width: 8%">{{ item.sex }}</div>
+					<div>{{ item.nation }}</div>
+					<div>{{ item.birthday }}</div>
+					<div>{{ item.education }}</div>
+					<div>{{ item.post }}</div>
+					<div>{{ item.politicalOutlook }}</div>
+					<div style="width: 11%">{{ item.phone }}</div>
+					<div>{{ item.declaration }}</div>
+				</div>
+				<div class="notoDta" v-if="list.length == 0">
+					<img src="@/assets/images/noData.png" alt="" />
+					<p>暂无数据</p>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="list-detail" v-if="showDialog" @click="handleClick">
+		<div class="dialog-content">
+			<div class="dialog-title"><i>抓拍详情</i></div>
+			<div class="dialog-detail">
+				<div class="small-pic">
+					<img src="@/assets/images/vehicleManagement/car.png" alt="" />
+				</div>
+				<div class="detail-text">
+					<div class="text-box">
+						<div class="type">告警类型</div>
+						<div class="text">未穿反光衣</div>
+					</div>
+					<div class="text-box" style="margin-top: 4%">
+						<div class="type">设备名称</div>
+						<div class="text">青金山隧道钢筋加场枪机</div>
+					</div>
+					<div class="text-box" style="margin-top: 4%">
+						<div class="type">记录时间</div>
+						<div class="text">2023-01-01 12:00:00</div>
+					</div>
+				</div>
+			</div>
+			<div class="pic-title"><i>抓拍大图</i></div>
+			<div class="big-pic">
+				<img src="@/assets/images/vehicleManagement/car.png" alt="" />
+			</div>
+			<div class="close-icon" @click="showDialog = false">
+				<el-icon><Close /></el-icon>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, onMounted } from "vue";
+import textIcon from "@/assets/images/vehicleManagement/car.png";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+let showDialog = ref(false as any);
+const list = reactive([
+	{
+		id: 1,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566",
+		declaration: "遵纪守法,与时俱进..."
+	},
+	{
+		id: 2,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566",
+		declaration: "遵纪守法,与时俱进..."
+	},
+	{
+		id: 3,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566",
+		declaration: "遵纪守法,与时俱进..."
+	},
+	{
+		id: 4,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566",
+		declaration: "遵纪守法,与时俱进..."
+	},
+	{
+		id: 5,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566",
+		declaration: "遵纪守法,与时俱进..."
+	},
+	{
+		id: 6,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566",
+		declaration: "遵纪守法,与时俱进..."
+	},
+	{
+		id: 7,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566",
+		declaration: "遵纪守法,与时俱进..."
+	},
+
+	{
+		id: 8,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566",
+		declaration: "遵纪守法,与时俱进..."
+	},
+	{
+		id: 9,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566",
+		declaration: "遵纪守法,与时俱进..."
+	},
+	{
+		id: 10,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566",
+		declaration: "遵纪守法,与时俱进..."
+	},
+	{
+		id: 11,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566",
+		declaration: "遵纪守法,与时俱进..."
+	},
+	{
+		id: 12,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566",
+		declaration: "遵纪守法,与时俱进..."
+	}
+]);
+
+function handleClick(event: any) {
+	console.log("点击", event.target.className);
+	if (event.target.className == "list-detail") {
+		showDialog.value = false;
+	}
+}
+
+onMounted(async () => {});
+</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: 38%;
+		top: 30%;
+		width: 25%;
+		height: 45%;
+		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
+		background-size: 100% 100%;
+		z-index: 21;
+		.close-icon {
+			position: absolute;
+			right: 3%;
+			top: 3%;
+			cursor: pointer;
+			color: #ffffff;
+			font-size: calc(100vw * 18 / 1920);
+		}
+		.dialog-title {
+			color: #ffffff;
+			font-weight: bold;
+			font-size: calc(100vw * 18 / 1920);
+			font-family: "OPPOSans-Bold";
+		}
+		.dialog-detail {
+			width: 100%;
+			height: 25%;
+			display: flex;
+			justify-content: space-between;
+			margin-top: 5%;
+			.small-pic {
+				width: 18%;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.detail-text {
+				width: 80%;
+				.text-box {
+					height: 25%;
+					display: flex;
+					align-items: center;
+					background: url("@/assets/images/aIEarlyWarning/contentBg.png") no-repeat;
+					background-size: 100% 100%;
+					.type {
+						width: 25%;
+						margin-left: 3%;
+						color: #a1accb;
+						font-size: calc(100vw * 12 / 1920);
+					}
+					.text {
+						font-size: calc(100vw * 12 / 1920);
+						color: #ffffff;
+					}
+				}
+			}
+		}
+		.pic-title {
+			color: #ffffff;
+			font-weight: bold;
+			font-size: calc(100vw * 18 / 1920);
+			font-family: "OPPOSans-Bold";
+			margin-top: 5%;
+		}
+		.big-pic {
+			width: 100%;
+			height: 50%;
+			margin-top: 5%;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+.political-outlook {
+	width: 100%;
+	height: 100%;
+	.title {
+		height: 10%;
+		line-height: 35px;
+		text-align: left;
+		font-size: calc(100vw * 18 / 1920);
+		color: #ffffff;
+		background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
+		background-size: 100% 100%;
+		i {
+			margin-left: 50px;
+			font-family: OPPOSansH;
+		}
+	}
+	.content {
+		height: 95%;
+		width: 100%;
+		margin-top: 10px;
+		// background: url("@/assets/images/cardImg.png") no-repeat;
+		background-size: 100% 100%;
+		.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: 9%;
+			}
+		}
+		.listBox {
+			height: 90%;
+			overflow: scroll;
+			.listStyle {
+				display: flex;
+				align-items: center;
+				text-align: center;
+				color: #fff;
+				height: 6%;
+				font-size: calc(100vw * 12 / 1920);
+				.list-img {
+					height: 50%;
+					box-sizing: border-box;
+					img {
+						width: 30%;
+						height: 100%;
+					}
+				}
+				div {
+					width: 9%;
+					white-space: nowrap;
+				}
+			}
+			.listStyle:hover {
+				background: #091f3f;
+			}
+		}
+	}
+}
+.notoDta {
+	top: 73%;
+	width: 12%;
+	left: 44%;
+	position: absolute;
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+	p {
+		color: #fff;
+		font-size: calc(100vw * 14 / 1920);
+		margin: -6% 37%;
+	}
+}
+</style>

src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/political-outlook.vue

@@ -0,0 +1,397 @@
+<template>
+	<div class="political-outlook">
+		<div class="content">
+			<div class="tabList">
+				<div>序号</div>
+				<div>姓名</div>
+				<div>性别</div>
+				<div>民族</div>
+				<div>出生日期</div>
+				<div>文化程度</div>
+				<div>岗位</div>
+				<div>政治面貌</div>
+				<div>联系电话</div>
+			</div>
+
+			<div class="listBox">
+				<div v-for="(item, index) in list" class="listStyle" :key="item.id">
+					<div>{{ index + 1 }}</div>
+					<!-- <div class="list-img">
+						<img src="@/assets/images/noData.png" alt="" />
+					</div> -->
+					<!-- <div>{{ item.dev }}</div> -->
+					<div>{{ item.name }}</div>
+					<div style="padding-left: 1%">{{ item.sex }}</div>
+					<div>{{ item.nation }}</div>
+					<div>{{ item.birthday }}</div>
+					<div>{{ item.education }}</div>
+					<div>{{ item.post }}</div>
+					<div>{{ item.politicalOutlook }}</div>
+					<div>{{ item.phone }}</div>
+				</div>
+				<div class="notoDta" v-if="list.length == 0">
+					<img src="@/assets/images/noData.png" alt="" />
+					<p>暂无数据</p>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="list-detail" v-if="showDialog" @click="handleClick">
+		<div class="dialog-content">
+			<div class="dialog-title"><i>抓拍详情</i></div>
+			<div class="dialog-detail">
+				<div class="small-pic">
+					<img src="@/assets/images/vehicleManagement/car.png" alt="" />
+				</div>
+				<div class="detail-text">
+					<div class="text-box">
+						<div class="type">告警类型</div>
+						<div class="text">未穿反光衣</div>
+					</div>
+					<div class="text-box" style="margin-top: 4%">
+						<div class="type">设备名称</div>
+						<div class="text">青金山隧道钢筋加场枪机</div>
+					</div>
+					<div class="text-box" style="margin-top: 4%">
+						<div class="type">记录时间</div>
+						<div class="text">2023-01-01 12:00:00</div>
+					</div>
+				</div>
+			</div>
+			<div class="pic-title"><i>抓拍大图</i></div>
+			<div class="big-pic">
+				<img src="@/assets/images/vehicleManagement/car.png" alt="" />
+			</div>
+			<div class="close-icon" @click="showDialog = false">
+				<el-icon><Close /></el-icon>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, onMounted } from "vue";
+import textIcon from "@/assets/images/vehicleManagement/car.png";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+let showDialog = ref(false as any);
+const list = reactive([
+	{
+		id: 1,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566"
+	},
+	{
+		id: 2,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566"
+	},
+	{
+		id: 3,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566"
+	},
+	{
+		id: 4,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566"
+	},
+	{
+		id: 5,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566"
+	},
+	{
+		id: 6,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566"
+	},
+	{
+		id: 7,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566"
+	},
+
+	{
+		id: 8,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566"
+	},
+	{
+		id: 9,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566"
+	},
+	{
+		id: 10,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566"
+	},
+	{
+		id: 11,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566"
+	},
+	{
+		id: 12,
+		name: "汪江瑶",
+		sex: "男",
+		nation: "汉",
+		birthday: "2023-01-01",
+		education: "本科",
+		post: "项目经理",
+		politicalOutlook: "中共党员",
+		phone: "13509455566"
+	}
+]);
+
+function handleClick(event: any) {
+	console.log("点击", event.target.className);
+	if (event.target.className == "list-detail") {
+		showDialog.value = false;
+	}
+}
+
+onMounted(async () => {});
+</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: 38%;
+		top: 30%;
+		width: 25%;
+		height: 45%;
+		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
+		background-size: 100% 100%;
+		z-index: 21;
+		.close-icon {
+			position: absolute;
+			right: 3%;
+			top: 3%;
+			cursor: pointer;
+			color: #ffffff;
+			font-size: calc(100vw * 18 / 1920);
+		}
+		.dialog-title {
+			color: #ffffff;
+			font-weight: bold;
+			font-size: calc(100vw * 18 / 1920);
+			font-family: "OPPOSans-Bold";
+		}
+		.dialog-detail {
+			width: 100%;
+			height: 25%;
+			display: flex;
+			justify-content: space-between;
+			margin-top: 5%;
+			.small-pic {
+				width: 18%;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.detail-text {
+				width: 80%;
+				.text-box {
+					height: 25%;
+					display: flex;
+					align-items: center;
+					background: url("@/assets/images/aIEarlyWarning/contentBg.png") no-repeat;
+					background-size: 100% 100%;
+					.type {
+						width: 25%;
+						margin-left: 3%;
+						color: #a1accb;
+						font-size: calc(100vw * 12 / 1920);
+					}
+					.text {
+						font-size: calc(100vw * 12 / 1920);
+						color: #ffffff;
+					}
+				}
+			}
+		}
+		.pic-title {
+			color: #ffffff;
+			font-weight: bold;
+			font-size: calc(100vw * 18 / 1920);
+			font-family: "OPPOSans-Bold";
+			margin-top: 5%;
+		}
+		.big-pic {
+			width: 100%;
+			height: 50%;
+			margin-top: 5%;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+.political-outlook {
+	width: 100%;
+	height: 100%;
+	.title {
+		height: 10%;
+		line-height: 35px;
+		text-align: left;
+		font-size: calc(100vw * 18 / 1920);
+		color: #ffffff;
+		background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
+		background-size: 100% 100%;
+		i {
+			margin-left: 50px;
+			font-family: OPPOSansH;
+		}
+	}
+	.content {
+		height: 95%;
+		width: 100%;
+		margin-top: 10px;
+		// background: url("@/assets/images/cardImg.png") no-repeat;
+		background-size: 100% 100%;
+		.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;
+			justify-content: space-around;
+			div {
+				text-align: center;
+				width: 10%;
+			}
+		}
+		.listBox {
+			height: 90%;
+			overflow: scroll;
+			.listStyle {
+				display: flex;
+				align-items: center;
+				text-align: center;
+				justify-content: space-around;
+				color: #fff;
+				height: 6%;
+				font-size: calc(100vw * 12 / 1920);
+				.list-img {
+					width: 10%;
+					height: 50%;
+					box-sizing: border-box;
+					img {
+						width: 50%;
+						height: 100%;
+					}
+				}
+				div {
+					width: 5%;
+					white-space: nowrap;
+				}
+			}
+			.listStyle:hover {
+				background: #091f3f;
+			}
+		}
+	}
+}
+.notoDta {
+	top: 73%;
+	width: 12%;
+	left: 44%;
+	position: absolute;
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+	p {
+		color: #fff;
+		font-size: calc(100vw * 14 / 1920);
+		margin: -6% 37%;
+	}
+}
+</style>