diff --git a/.env.development b/.env.development
index 000102f..3c96a29 100644
--- a/.env.development
+++ b/.env.development
@@ -46,7 +46,7 @@ VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
 # 包头化工
 # VITE_API_URL = 'http://jxj.zhgdyun.com:18000'
 # 大连金笔
-VITE_API_URL = 'http://101.43.164.214:11126'
+# VITE_API_URL = 'http://101.43.164.214:11126'
 
 # 上传
 VITE_ULD_API_URL = 'http://192.168.34.155:8012/onlinePreview?url='
diff --git a/package-lock.json b/package-lock.json
index f8d8cdc..e75f586 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,7 +45,6 @@
 				"print-js": "^1.6.0",
 				"qs": "^6.11.0",
 				"sortablejs": "^1.15.0",
-				"vite-plugin-optimizer": "^1.4.3",
 				"vue": "^3.2.47",
 				"vue-i18n": "^9.1.9",
 				"vue-router": "^4.1.6",
@@ -96,6 +95,7 @@
 				"vite-plugin-eslint": "^1.6.0",
 				"vite-plugin-html": "^3.2.0",
 				"vite-plugin-mars3d": "^2.1.0",
+				"vite-plugin-optimizer": "^1.4.3",
 				"vite-plugin-svg-icons": "^2.0.1",
 				"vite-plugin-vue-setup-extend-plus": "^0.1.0",
 				"vue-tsc": "^1.0.24"
@@ -16005,7 +16005,8 @@
 		"node_modules/vite-plugin-optimizer": {
 			"version": "1.4.3",
 			"resolved": "https://registry.npmmirror.com/vite-plugin-optimizer/-/vite-plugin-optimizer-1.4.3.tgz",
-			"integrity": "sha512-m1AFakemDxSNIwxsTYykBFuQxkKJLI8207RNAg33N5km2aE29cP+Jt41xbfdrALOU2VKYWGFlBz64GMbIser4A=="
+			"integrity": "sha512-m1AFakemDxSNIwxsTYykBFuQxkKJLI8207RNAg33N5km2aE29cP+Jt41xbfdrALOU2VKYWGFlBz64GMbIser4A==",
+			"dev": true
 		},
 		"node_modules/vite-plugin-svg-icons": {
 			"version": "2.0.1",
@@ -28280,7 +28281,8 @@
 		"vite-plugin-optimizer": {
 			"version": "1.4.3",
 			"resolved": "https://registry.npmmirror.com/vite-plugin-optimizer/-/vite-plugin-optimizer-1.4.3.tgz",
-			"integrity": "sha512-m1AFakemDxSNIwxsTYykBFuQxkKJLI8207RNAg33N5km2aE29cP+Jt41xbfdrALOU2VKYWGFlBz64GMbIser4A=="
+			"integrity": "sha512-m1AFakemDxSNIwxsTYykBFuQxkKJLI8207RNAg33N5km2aE29cP+Jt41xbfdrALOU2VKYWGFlBz64GMbIser4A==",
+			"dev": true
 		},
 		"vite-plugin-svg-icons": {
 			"version": "2.0.1",
diff --git a/package.json b/package.json
index 067533c..f4fcca2 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,6 @@
 		"print-js": "^1.6.0",
 		"qs": "^6.11.0",
 		"sortablejs": "^1.15.0",
-		"vite-plugin-optimizer": "^1.4.3",
 		"vue": "^3.2.47",
 		"vue-i18n": "^9.1.9",
 		"vue-router": "^4.1.6",
@@ -108,6 +107,7 @@
 		"vite-plugin-eslint": "^1.6.0",
 		"vite-plugin-html": "^3.2.0",
 		"vite-plugin-mars3d": "^2.1.0",
+		"vite-plugin-optimizer": "^1.4.3",
 		"vite-plugin-svg-icons": "^2.0.1",
 		"vite-plugin-vue-setup-extend-plus": "^0.1.0",
 		"vue-tsc": "^1.0.24"
diff --git a/src/assets/images/mapimg/Frame.png b/src/assets/images/mapimg/Frame.png
new file mode 100644
index 0000000..6057806
Binary files /dev/null and b/src/assets/images/mapimg/Frame.png differ
diff --git a/src/assets/images/mapimg/Group 1000015760.png b/src/assets/images/mapimg/Group 1000015760.png
new file mode 100644
index 0000000..2904bb4
Binary files /dev/null and b/src/assets/images/mapimg/Group 1000015760.png differ
diff --git a/src/assets/images/mapimg/Group 1000015762.png b/src/assets/images/mapimg/Group 1000015762.png
new file mode 100644
index 0000000..af72854
Binary files /dev/null and b/src/assets/images/mapimg/Group 1000015762.png differ
diff --git a/src/assets/images/mapimg/Group 1000015780.png b/src/assets/images/mapimg/Group 1000015780.png
new file mode 100644
index 0000000..afb141d
Binary files /dev/null and b/src/assets/images/mapimg/Group 1000015780.png differ
diff --git a/src/assets/images/mapimg/Group 1000015795.png b/src/assets/images/mapimg/Group 1000015795.png
new file mode 100644
index 0000000..78ac581
Binary files /dev/null and b/src/assets/images/mapimg/Group 1000015795.png differ
diff --git a/src/assets/images/mapimg/Group 1000015799.png b/src/assets/images/mapimg/Group 1000015799.png
new file mode 100644
index 0000000..a4cdd8d
Binary files /dev/null and b/src/assets/images/mapimg/Group 1000015799.png differ
diff --git a/src/assets/images/mapimg/Group 1000015822.png b/src/assets/images/mapimg/Group 1000015822.png
new file mode 100644
index 0000000..78ac581
Binary files /dev/null and b/src/assets/images/mapimg/Group 1000015822.png differ
diff --git a/src/assets/images/mapimg/Group 1000015823.png b/src/assets/images/mapimg/Group 1000015823.png
new file mode 100644
index 0000000..0147391
Binary files /dev/null and b/src/assets/images/mapimg/Group 1000015823.png differ
diff --git a/src/assets/images/mapimg/Group 4064.png b/src/assets/images/mapimg/Group 4064.png
new file mode 100644
index 0000000..04cb56e
Binary files /dev/null and b/src/assets/images/mapimg/Group 4064.png differ
diff --git a/src/assets/images/mapimg/Group 4225.png b/src/assets/images/mapimg/Group 4225.png
new file mode 100644
index 0000000..664f96e
Binary files /dev/null and b/src/assets/images/mapimg/Group 4225.png differ
diff --git a/src/assets/images/mapimg/Rectangle 34624241.png b/src/assets/images/mapimg/Rectangle 34624241.png
new file mode 100644
index 0000000..56eae42
Binary files /dev/null and b/src/assets/images/mapimg/Rectangle 34624241.png differ
diff --git a/src/assets/images/mapimg/image 66.png b/src/assets/images/mapimg/image 66.png
new file mode 100644
index 0000000..e64d466
Binary files /dev/null and b/src/assets/images/mapimg/image 66.png differ
diff --git a/src/assets/images/mapimg/头部右.png b/src/assets/images/mapimg/头部右.png
new file mode 100644
index 0000000..14c0a52
Binary files /dev/null and b/src/assets/images/mapimg/头部右.png differ
diff --git a/src/assets/images/mapimg/实时视频.png b/src/assets/images/mapimg/实时视频.png
new file mode 100644
index 0000000..4546cd6
Binary files /dev/null and b/src/assets/images/mapimg/实时视频.png differ
diff --git a/src/assets/images/mapimg/编组.png b/src/assets/images/mapimg/编组.png
new file mode 100644
index 0000000..354f82f
Binary files /dev/null and b/src/assets/images/mapimg/编组.png differ
diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index d0cedfd..4baa9e2 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -87,6 +87,11 @@ export const staticRouter: RouteRecordRaw[] = [
 				name: "工程概况",
 				component: () => import("@/views/sevenLargeScreen/comprehensiveManage/projectOverview/index.vue")
 			},
+			{
+				path: "/projectOverviewer",
+				name: "工程概况-1",
+				component: () => import("@/views/sevenLargeScreen/comprehensiveManage/projectOverview/indexer.vue")
+			},
 			{
 				path: "/smartPartyBuilding",
 				name: "智慧党建",
@@ -124,6 +129,12 @@ export const staticRouter: RouteRecordRaw[] = [
 				name: "智能安全帽",
 				component: () => import("@/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue")
 			},
+			{
+				path: "/smartSafeHater",
+				// path: "/carPosition",
+				name: "新智能安全帽",
+				component: () => import("@/views/sevenLargeScreen/digitalConstruction/smartSafeHat/indexer.vue")
+			},
 			{
 				path: "/edgeProtection",
 				name: "临边防护网",
diff --git a/src/stores/modules/map3D.ts b/src/stores/modules/map3D.ts
new file mode 100644
index 0000000..7e931c2
--- /dev/null
+++ b/src/stores/modules/map3D.ts
@@ -0,0 +1,30 @@
+import { defineStore, createPinia } from "pinia"
+// import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+
+// 定义 MapViewdata 的类型
+interface MapViewdata {
+    Mapswitch: boolean;
+}
+
+export const MapViewdata = defineStore({
+    id: "MapViewdata",
+
+    // 数据
+    state: (): MapViewdata => ({
+        Mapswitch: true
+    }),
+
+    // 方法
+    actions: {
+        async toggleMapSwitch() {
+            this.Mapswitch = !this.Mapswitch;
+        }
+    }
+
+})
+
+// piniaPersist(持久化)
+// const pinia = createPinia();
+// pinia.use(piniaPluginPersistedstate);
+
+// export default pinia;
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerTop.vue b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerTop.vue
index 2ef733c..d8f0da8 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerTop.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerTop.vue
@@ -8,9 +8,7 @@
 					v-for="(item, index) in topText2"
 					:key="item.id"
 					@click="activeBtn(item, index)"
-				>
-					{{ item.title }}
-				</div>
+				>{{ item.title }}</div>
 			</div>
 			<div class="top-tab" v-else>
 				<div
@@ -19,25 +17,28 @@
 					v-for="(item, index) in topText"
 					:key="item.id"
 					@click="activeBtn(item, index)"
-				>
-					{{ item.title }}
-				</div>
+				>{{ item.title }}</div>
 			</div>
-			
+
 			<div class="href-content" v-if="showVideo == 1">
 				<el-carousel indicator-position="none" height="450px" style="width: 76%;">
 					<el-carousel-item v-for="(item, index) in videoList" :key="item.id">
 						<ckplayerComp
-								:name="index"
-								:poster="''"
-								:deviceIp="`http://${item.account}:${item.password}`"
-								:videoUrls="item.serialNumber"
-								:autoPlay="true"
-							></ckplayerComp>
+							:name="index"
+							:poster="''"
+							:deviceIp="`http://${item.account}:${item.password}`"
+							:videoUrls="item.serialNumber"
+							:autoPlay="true"
+						></ckplayerComp>
 					</el-carousel-item>
 				</el-carousel>
 			</div>
-			<div class="videoBox" v-if="showVideo == 2" @mouseenter="showChangeVideo = true" @mouseleave="showChangeVideo = false">
+			<div
+				class="videoBox"
+				v-if="showVideo == 2"
+				@mouseenter="showChangeVideo = true"
+				@mouseleave="showChangeVideo = false"
+			>
 				<el-upload
 					:action="BASEURL + '/upload/image'"
 					:on-success="file => handleSuccessTwo(file, 1)"
@@ -64,14 +65,22 @@
 						<!-- 更换图片 -->
 						<span class="change-video" v-if="showChangeImg">更换图片</span>
 					</el-upload>
-					<img :src="BASEURL + '/image/' + picUrl" alt="" />
+					<img :src="BASEURL + '/image/' + picUrl" alt />
 				</div>
 			</div>
 		</Card>
+		<!-- 
+		<Card title="项目展示">
+			地图页面
+			<ProjectShow />
+		</Card>-->
 	</div>
 </template>
 
 <script setup lang="ts">
+// 大屏
+import ProjectShow from "@/views/sevenLargeScreen/projectshow/index.vue";
+
 import Card from "@/components/card.vue";
 import { ref, onMounted, watch } from "vue";
 import { GlobalStore } from "@/stores";
@@ -132,14 +141,14 @@ const getVideoList = async () => {
 	let res: any = await selectLiveVideoListApi({
 		projectSn: store.sn
 	});
-		console.log(res,'445566')
-	if(res.result && res.result.extend1){
+	console.log(res, "445566");
+	if (res.result && res.result.extend1) {
 		videoList.value = JSON.parse(res.result.extend1).result.videoList;
-		console.log(videoList.value,'112233')
+		console.log(videoList.value, "112233");
 		// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
 		setTimeout(() => {
 			// 获取所有的 video 元素
-			var videos = document.querySelectorAll(".href-content video")
+			var videos = document.querySelectorAll(".href-content video");
 			// var videos = document.getElementsByTagName("video");
 			// 遍历所有的 video 元素
 			for (var i = 0; i < videos.length; i++) {
@@ -171,7 +180,7 @@ function activeBtn(item: any) {
 		tabIndex.value = item.id;
 	}
 	showVideo.value = item.id;
-	console.log(showVideo.value)
+	console.log(showVideo.value);
 }
 
 const uploadFail = () => {
@@ -288,12 +297,12 @@ function saveOrDeleteVideo(url) {
 //将方法暴露给父组件
 defineExpose({
 	getQueryBySnData
-})
+});
 onMounted(async () => {
-	if(COMPANY !== 'agjt') showVideo.value = 2
+	if (COMPANY !== "agjt") showVideo.value = 2;
 	await getVideoList();
 	getQueryBySnData();
-	if(COMPANY != 'agjt'){
+	if (COMPANY != "agjt") {
 		showVideo.value = 2;
 	}
 });
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerToper.vue b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerToper.vue
new file mode 100644
index 0000000..516ea9d
--- /dev/null
+++ b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerToper.vue
@@ -0,0 +1,402 @@
+<template>
+	<div class="leftTop">
+		<!-- <Card title="项目展示"> -->
+		<!-- <div class="top-tab" v-if="COMPANY === 'agjt'">
+				<div
+					class="tab-box"
+					:style="boxStyle(item)"
+					v-for="(item, index) in topText2"
+					:key="item.id"
+					@click="activeBtn(item, index)"
+				>
+					{{ item.title }}
+				</div>
+			</div>
+			<div class="top-tab" v-else>
+				<div
+					class="tab-box"
+					:style="boxStyle(item)"
+					v-for="(item, index) in topText"
+					:key="item.id"
+					@click="activeBtn(item, index)"
+				>
+					{{ item.title }}
+				</div>
+			</div>
+			
+			<div class="href-content" v-if="showVideo == 1">
+				<el-carousel indicator-position="none" height="450px" style="width: 76%;">
+					<el-carousel-item v-for="(item, index) in videoList" :key="item.id">
+						<ckplayerComp
+								:name="index"
+								:poster="''"
+								:deviceIp="`http://${item.account}:${item.password}`"
+								:videoUrls="item.serialNumber"
+								:autoPlay="true"
+							></ckplayerComp>
+					</el-carousel-item>
+				</el-carousel>
+		</div>-->
+		<!-- <div class="videoBox" v-if="showVideo == 2" @mouseenter="showChangeVideo = true" @mouseleave="showChangeVideo = false">
+				<el-upload
+					:action="BASEURL + '/upload/image'"
+					:on-success="file => handleSuccessTwo(file, 1)"
+					:on-error="file => handleError(file, 1)"
+					:beforeUpload="file => handleBeforeUploadVideo(file, 1)"
+					name="files"
+					:show-file-list="false"
+				>
+					更换视频
+					<span class="change-video" v-if="showChangeVideo">更换视频</span>
+				</el-upload>
+				<video :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
+		</div>-->
+		<!-- <div class="imgBox" v-if="showVideo == 3">
+				<div class="imgs" @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false">
+					<el-upload
+						:action="BASEURL + '/upload/image'"
+						:on-success="file => handleSuccess(file, 1)"
+						:on-error="file => handleError(file, 1)"
+						:beforeUpload="file => handleBeforeUploadPic(file, 1)"
+						name="files"
+						:show-file-list="false"
+					>
+						更换图片
+						<span class="change-video" v-if="showChangeImg">更换图片</span>
+					</el-upload>
+					<img :src="BASEURL + '/image/' + picUrl" alt="" />
+				</div>
+		</div>-->
+		<!-- </Card> -->
+
+		<Card title="项目展示" @click="toggleMapSwitch">
+			<!-- 地图页面 -->
+			<ProjectShow />
+		</Card>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { MapViewdata } from "@/stores/modules/map3D";
+const EntityMap = MapViewdata();
+
+const toggleMapSwitch = () => {
+	EntityMap.toggleMapSwitch();
+};
+
+
+// 大屏
+import ProjectShow from "@/views/sevenLargeScreen/projectshow/index.vue";
+
+import Card from "@/components/card.vue";
+import { ref, onMounted, watch } from "vue";
+import { GlobalStore } from "@/stores";
+import { ElMessage } from "element-plus";
+
+import { editProjectInfo, eidtProjectShowConfig, queryBySnData } from "@/api/modules/projectOverview";
+import { selectLiveVideoListApi } from "@/api/modules/video";
+import ckplayerComp from "./ckplayerComp.vue";
+import { COMPANY } from "@/config/config";
+
+const store = GlobalStore();
+const videoList = ref([] as any);
+// ts
+type Props = {
+	projectData?: any; // 传入项目信息
+};
+// withDefaults 定义默认值(传入的数据类型同默认值)
+const props = withDefaults(defineProps<Props>(), {
+	projectData: {}
+});
+// 项目信息
+const projectData = ref({} as any);
+
+watch(
+	() => props.projectData,
+	newVal => {
+		// console.log(newVal, "newVal");
+		if (newVal) {
+			// props.xData = newVal;
+			projectData.value = newVal;
+		}
+	}
+);
+//效果图
+const picUrl = ref("" as any);
+
+const BASEURL = import.meta.env.VITE_API_URL;
+// 显示视频
+const showVideo = ref(1 as any);
+
+// 显示更换图片
+const showChangeImg = ref(false as any);
+
+// 显示更换视频
+const showChangeVideo = ref(false as any);
+
+let topText2 = ref([
+	{ id: 1, title: "现场视频", isActive: true },
+	{ id: 2, title: "宣传视频", isActive: false },
+	{ id: 3, title: "效果图", isActive: false }
+]);
+let topText = ref([
+	// { id: 1, title: "现场视频", isActive: true },
+	{ id: 2, title: "宣传视频", isActive: true },
+	{ id: 3, title: "效果图", isActive: false }
+]);
+const getVideoList = async () => {
+	let res: any = await selectLiveVideoListApi({
+		projectSn: store.sn
+	});
+	console.log(res, "445566");
+	if (res.result && res.result.extend1) {
+		videoList.value = JSON.parse(res.result.extend1).result.videoList;
+		console.log(videoList.value, "112233");
+		// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
+		setTimeout(() => {
+			// 获取所有的 video 元素
+			var videos = document.querySelectorAll(".href-content video");
+			// var videos = document.getElementsByTagName("video");
+			// 遍历所有的 video 元素
+			for (var i = 0; i < videos.length; i++) {
+				// 修改视频元素的样式
+				videos[i].style.width = "99.9%";
+				videos[i].style.height = "99.9%";
+			}
+		}, 2000);
+	}
+};
+
+function boxStyle(item: any) {
+	if (item.isActive) {
+		let choiseStyle = {
+			color: "#fff"
+		};
+		return choiseStyle;
+	}
+	return {};
+}
+let tabIndex = ref(1 as any);
+function activeBtn(item: any) {
+	let currentState = item.isActive;
+	if (!currentState) {
+		topText.value.forEach(el => {
+			el.isActive = false;
+		});
+		item.isActive = !currentState;
+		tabIndex.value = item.id;
+	}
+	showVideo.value = item.id;
+	console.log(showVideo.value);
+}
+
+const uploadFail = () => {
+	ElMessage({
+		showClose: true,
+		message: "上传失败，请重试",
+		type: "warning"
+	});
+};
+
+const fileTypeFail = (text: any) => {
+	ElMessage({
+		showClose: true,
+		message: text,
+		type: "warning"
+	});
+};
+
+const uploadSuccess = () => {
+	ElMessage({
+		showClose: true,
+		message: "上传成功",
+		type: "success"
+	});
+};
+
+// 视频文件上传 之前
+function handleBeforeUploadVideo(file: any) {
+	console.log(file, "上传之前");
+	let fileType = file.type.split("/")[0];
+	if (fileType == "video") {
+		return true;
+	} else {
+		fileTypeFail("请选择正确的视频文件"); //"请选择正确的文件"
+		return false;
+	}
+}
+
+// 图片文件上传 之前
+function handleBeforeUploadPic(file: any) {
+	console.log(file, "上传之前");
+	let fileType = file.type.split("/")[0];
+	if (fileType == "image") {
+		return true;
+	} else {
+		fileTypeFail("请选择正确的图片文件"); //"请选择正确的文件"
+		return false;
+	}
+}
+
+//上传失败
+function handleError(file: any) {
+	console.log(file, "上传失败");
+	uploadFail(); //"上传失败，请重试"
+}
+// 效果图上传成功
+function handleSuccess(file: any) {
+	console.log("效果图上传成功", file);
+	if (file.code == 200 || file.status == "SUCCESS") {
+		console.log(file);
+		let url = file.data[0].imageUrl;
+		saveEffectData(url);
+	}
+}
+
+// 视频上传成功
+function handleSuccessTwo(file: any) {
+	if (file.code == 200 || file.status == "SUCCESS") {
+		console.log(file, "上传成功");
+		let url = file.data[0].imageUrl;
+		// this.imgUrl = url;
+		saveOrDeleteVideo(url);
+	}
+}
+//效果图 保存
+function saveEffectData(url: any) {
+	// let configValue = JSON.stringify(url);
+	let data = {
+		projectSn: store.sn,
+		showType: 3,
+		showTitle: "效果图", //'效果图'
+		configValue: url
+	};
+	eidtProjectShowConfig(data).then((res: any) => {
+		if (res.code == 200) {
+			getQueryBySnData();
+		}
+	});
+}
+
+// 查询效果图
+function getQueryBySnData() {
+	queryBySnData({
+		projectSn: store.sn,
+		showType: 3
+	}).then((res: any) => {
+		console.log(res, "效果图");
+		if (res.result) {
+			picUrl.value = res.result.configValue;
+		}
+	});
+}
+// //保存或删除宣传视频
+function saveOrDeleteVideo(url) {
+	editProjectInfo({
+		projectSn: store.sn,
+		videoUrl: url
+	}).then(res => {
+		console.log("保存成功", res);
+		uploadSuccess(); //"上传成功"
+		projectData.value.videoUrl = url;
+	});
+}
+//将方法暴露给父组件
+defineExpose({
+	getQueryBySnData
+});
+onMounted(async () => {
+	if (COMPANY !== "agjt") showVideo.value = 2;
+	await getVideoList();
+	getQueryBySnData();
+	if (COMPANY != "agjt") {
+		showVideo.value = 2;
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.leftTop {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	.videoBox {
+		width: 100%;
+		height: 92%;
+		margin-top: 8%;
+		background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
+		background-size: 100% 100%;
+		.videos {
+			width: 78%;
+			height: 90%;
+			margin-left: 11%;
+			margin-top: 1%;
+		}
+	}
+	.imgBox {
+		width: 100%;
+		height: 92%;
+		margin-top: 8%;
+		background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
+		background-size: 100% 100%;
+		.imgs {
+			width: 78%;
+			height: 82%;
+			margin: 3% 11%;
+			img {
+				width: 100%;
+				height: 100%;
+				margin-top: 5%;
+			}
+		}
+	}
+	.href-content {
+		width: 100%;
+		height: 92%;
+		margin-top: 8%;
+		background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
+		background-size: 100% 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+// .href-content {
+// 	width: 95%;
+// 	height: 92%;
+// 	margin: 0 auto;
+// 	margin-top: 8%;
+// }
+
+.change-video {
+	position: absolute;
+	background: url("@/assets/images/cardImg.png") no-repeat;
+	background-size: 100% 100%;
+	color: #fff;
+	padding: 1% 2%;
+	font-size: 16px;
+	left: 45%;
+	top: 55%;
+	z-index: 10;
+}
+
+.top-tab {
+	position: absolute;
+	top: 12%;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0 30%;
+	display: flex;
+	justify-content: space-around;
+	.tab-box {
+		font-size: 16px;
+		color: rgba(255, 255, 255, 0.3);
+		cursor: pointer;
+	}
+}
+
+::v-deep .h-card .content {
+	background: none;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/indexer.vue b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/indexer.vue
new file mode 100644
index 0000000..02c1ff0
--- /dev/null
+++ b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/indexer.vue
@@ -0,0 +1,140 @@
+<template>
+	<div class="projectContent">
+		<div class="left">
+			<leftTop :projectData="projectData" class="leftTop" ref="leftTopRef"></leftTop>
+			<leftCenter :statisticsCount="statisticsCount" class="leftCenter"></leftCenter>
+			<leftBottom :statisticsCount="statisticsCount" class="leftBottom"></leftBottom>
+		</div>
+		<div class="center">
+			<centerTop :projectData="projectData" class="centerTop" ref="centerTopRef"></centerTop>
+			<centerBottom :projectData="projectData" class="centerBottom" ref="centerBottomRef"></centerBottom>
+		</div>
+		<div class="right">
+			<rightTop class="rightTop" ref="rightTopRef"></rightTop>
+			<rightCenter class="rightCenter" ref="rightCenterRef"></rightCenter>
+			<rightBottom class="rightBottom" ref="rightBottomRef"></rightBottom>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import leftTop from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftTop.vue";
+import leftCenter from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftCenter.vue";
+import leftBottom from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftBottom.vue";
+import centerTop from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerToper.vue";
+import centerBottom from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerBottom.vue";
+import rightTop from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightTop.vue";
+import rightCenter from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightCenter.vue";
+import rightBottom from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightBottom.vue";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+import { getWorkerStatisticsCountApi, getProjectDetail } from "@/api/modules/projectOverview";
+import { ref, onMounted, onBeforeUnmount,nextTick } from "vue";
+const statisticsCount = ref(null as any);
+
+const projectData = ref(null as any);
+//获取项目信息
+const getProjectInfo = async () => {
+	const res = await getProjectDetail({ projectSn: store.sn });
+	// console.log("获取项目信息", res);
+	// console.log("获取工程类别", projectTypeEnum);
+	projectData.value = res.result;
+};
+
+//获取人员概览
+const getPersonDetail = async () => {
+	const res = await getWorkerStatisticsCountApi({ sn: store.sn });
+	statisticsCount.value = res.result;
+};
+
+const leftTopRef = ref();
+const centerTopRef = ref();
+const centerBottomRef = ref();
+const rightTopRef = ref();
+const rightCenterRef = ref();
+const rightBottomRef = ref();
+const callChildFn = async () => {
+	nextTick( async ()=>{
+		leftTopRef.value.projectTypeEnum()
+		centerTopRef.value.getQueryBySnData()
+		centerBottomRef.value.getProgressOption()
+		rightTopRef.value.getSafeInfo()
+		rightCenterRef.value.qualityInfo()
+		rightBottomRef.value.getList()
+	})
+}
+//定时器
+const interval = ref(null as any);
+//定时调用
+const startInterval = async () => {
+	interval.value= setInterval(() => {
+		getPersonDetail();
+		getProjectInfo();
+		callChildFn();
+	}, 30 * 1000);
+}
+// 在组件销毁时清除 interval
+const destroyInterval = () => {
+	if (interval.value) {
+		clearInterval(interval.value);
+  }
+}
+// 在组件销毁时调用 destroyInterval 方法清除 interval
+onBeforeUnmount(() => {
+	destroyInterval();
+})
+window.onbeforeunload = (e) => {
+	destroyInterval();
+}
+onMounted( async () => {
+	getPersonDetail();
+	getProjectInfo();
+	startInterval();
+});
+</script>
+<style lang="scss" scoped>
+.projectContent {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	.left {
+		width: 26%;
+		.leftTop {
+			height: 32%;
+		}
+		.leftCenter {
+			height: 33%;
+			margin: 3% 0 3% 0;
+		}
+		.leftBottom {
+			height: 32%;
+		}
+	}
+	.center {
+		width: 46%;
+		margin: 0 1%;
+
+		.centerTop {
+			height: 66%;
+			margin-bottom: 2.1%;
+		}
+		.centerBottom {
+			height: 32%;
+		}
+	}
+	.right {
+		width: 26%;
+
+		.rightTop {
+			height: 32%;
+		}
+		.rightCenter {
+			height: 33%;
+			margin: 3% 0 3% 0;
+		}
+		.rightBottom {
+			height: 32%;
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/indexer.vue b/src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/indexer.vue
new file mode 100644
index 0000000..f67724a
--- /dev/null
+++ b/src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/indexer.vue
@@ -0,0 +1,2869 @@
+<template>
+	<div class="data-ledger">
+		<div class="left-data">
+			<div class="top-data">
+				<Card title="定位设备列表" style="width: 100%">
+					<div class="left-menu">
+						<div class="left-top">
+							<div
+								class="realTime-data"
+								@click="selectChange(1)"
+								:class="checked == 1 ? 'top-active' : ''"
+							>
+								<span>列表</span>
+							</div>
+							<div class="alarm-data" @click="selectChange(2)" :class="checked == 2 ? 'top-active' : ''">
+								<span>轨迹</span>
+							</div>
+						</div>
+						<div v-if="checked === 1" style="width: 100%; height: 100%">
+							<div class="list-tool">
+								<el-form
+									:inline="true"
+									size="medium"
+									:model="queryInfo"
+									class="demo-form-inline"
+									style="margin-left: 15px"
+								>
+									<el-form-item>
+										<el-select filterable v-model="queryInfo.devSn" placeholder="请选择或搜索" @change="devChange">
+											<el-option
+												v-for="(item, index) in nameOptions"
+												:key="index"
+												:label="item.label"
+												:value="item.value"
+											></el-option>
+											<!-- <el-option v-for="(item, index) in devList" :key="index" :label="item.workerName" :value="item.devSn" ></el-option> -->
+										</el-select>
+									</el-form-item>
+								</el-form>
+								<div class="tool-btn">
+									<img src="@/assets/images/carPosition/refrush.png" alt @click="refreshDev" />
+								</div>
+							</div>
+							<div class="labor-type">
+								<div
+									class="type-box"
+									@click="laborChange('')"
+									:class="laborType === '' ? 'laborActive' : ''"
+								>全部({{ devTypeTotal.count || 0 }})</div>
+								<div
+									class="type-box"
+									@click="laborChange(1)"
+									:class="laborType === 1 ? 'laborActive' : ''"
+								>在线({{ devTypeTotal.onlineCount || 0 }})</div>
+								<div
+									class="type-box"
+									@click="laborChange(0)"
+									:class="laborType === 0 ? 'laborActive' : ''"
+								>离线({{ devTypeTotal.offlineCount || 0 }})</div>
+							</div>
+							<div class="dev-list" v-if="devList.length > 0">
+								<el-checkbox
+									:indeterminate="isIndeterminate"
+									v-model="checkAll"
+									@change="handleCheckAllChange"
+									style="margin-left: 55px; color: #fff"
+								>全选</el-checkbox>
+								<el-scrollbar>
+									<div style="margin: 15px 0"></div>
+									<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+										<div v-for="item in devList" class="choice-item" :key="item.id">
+											<div class="list-type">
+												<img :src="personOn" v-if="item.online === 1" />
+												<img :src="personOff" v-if="item.online === 0" />
+											</div>
+											<el-checkbox :label="item.devSn" :key="item.devSn" class="dev-check">
+												<!-- {{ item.numberPlate || "" }}{{ item.personName || "" }} -->
+												{{ item.workerName }}
+											</el-checkbox>
+											<!-- <div class="choice-speed" v-if="item.speed">{{ item.speed }}km/h</div> -->
+										</div>
+									</el-checkbox-group>
+								</el-scrollbar>
+							</div>
+							<div v-else style="text-align: center; margin-top: 130px; color: #fff; font-size: 20px">暂无设备</div>
+						</div>
+						<div v-if="checked === 2">
+							<div class="top-select">
+								<el-form :inline="true" size="medium" :model="queryInfo" class="demo-form-inline">
+									<el-form-item>
+										<span style="color: #fff; margin-left: 25px; margin-right: 10px">人员名称</span>
+										<el-select
+											filterable
+											v-model="queryInfo.devSn"
+											placeholder="请选择或搜索"
+											@change="devChange"
+											clearable
+										>
+											<el-option
+												v-for="(item, index) in nameOptions"
+												:key="index"
+												:label="item.label"
+												:value="item.value"
+											></el-option>
+											<!-- <el-option v-for="(item, index) in devList" :key="index" :label="item.workerName" :value="item.workerInfoId" ></el-option> -->
+										</el-select>
+									</el-form-item>
+								</el-form>
+							</div>
+							<div class="track-calendar">
+								<el-calendar v-model="dayValue" class="custom-hover">
+									<template #dateCell="{ data }">
+										<!-- <span>{{ dealMyDate(data.day, data) }}</span> -->
+										<div :class="data.styleFlag == true ? 'preventClick' : ''" style="font-size: 14px">
+											{{ data.day.split("-").slice(2).join("") }}
+											<br />
+										</div>
+										<!-- <div class="greenStyle"> -->
+										<!-- <span class="redStyle">{{data}}</span> -->
+										<!-- <span> {{ getTodayMeter(data.day) }}</span> -->
+										<!-- </div> -->
+									</template>
+								</el-calendar>
+							</div>
+						</div>
+					</div>
+				</Card>
+			</div>
+			<div class="bottom-data">
+				<Card title="围栏信息">
+					<div class="left-content">
+						<div class="tab-list">
+							<div style="width: 50%">围栏名称</div>
+							<div style="width: 50%">围栏内的人数</div>
+						</div>
+						<el-scrollbar class="list-box">
+							<div v-for="(item, index) in fenceList" class="list-style" :key="item.id">
+								<div
+									style="width: 100%;display: flex;justify-content: space-between;align-items: center;"
+									@click="openDetail(item)"
+								>
+									<div style="width: 50%">{{ item.fenceName }}</div>
+									<div style="width: 50%">{{ item.workerNum }}</div>
+								</div>
+							</div>
+							<div class="not-data" style="top: 20%" v-if="fenceList.length == 0">
+								<img src="@/assets/images/noData.png" alt />
+								<p>暂无数据</p>
+							</div>
+						</el-scrollbar>
+					</div>
+				</Card>
+			</div>
+		</div>
+
+		<!-- 围栏信息详情 -->
+		<div id="welanMaskContainer" class="welanMask" v-show="isOpenDetail">
+			<div class="weilanDetail">
+				<div class="detailTitle">
+					<div class="leftTitle">
+						<img src="@/assets/images/titleIcon.png" />围栏中的人员
+					</div>
+					<div class="rightTitle">
+						<div class="closeDetail" @click="closeDetail">
+							<el-icon :size="25" :color="'#657280'">
+								<Close />
+							</el-icon>
+						</div>
+					</div>
+				</div>
+				<div class="detailContent">
+					<div class="tab-list">
+						<div style="width: 33%">序号</div>
+						<div style="width: 33%">人员名称</div>
+						<div style="width: 33%">身份证号</div>
+					</div>
+					<el-scrollbar class="list-box">
+						<div v-for="(item, index) in workerListInFence" class="list-style" :key="item.id">
+							<div style="width: 33%">{{ index + 1 }}</div>
+							<div style="width: 33%">{{ item.workerName }}</div>
+							<div style="width: 33%">{{ item.idCard }}</div>
+						</div>
+						<div class="not-data" v-if="workerListInFence.length == 0">
+							<img src="@/assets/images/noData.png" alt />
+							<p>暂无数据</p>
+						</div>
+					</el-scrollbar>
+				</div>
+			</div>
+		</div>
+
+		<div class="right-data">
+			<div class="map-top" :style="enlarge ? 'height:105%' : ''">
+				<Card title="定位地图-1111" style="width: 100%">
+					<div class="map-box" id="mapContainer"></div>
+				</Card>
+			</div>
+			<!-- **********报警数据*********** -->
+			<div class="right-bottom" v-show="!enlarge">
+				<!-- <div class="hat-bottom">
+					<Card title="帽子总数">
+						<div class="hat-container">
+							<div class="hat-image">
+								<div class="hat-info">
+									<div class="hat-text">帽子总数</div>
+									<div class="hat-count">{{ devTypeTotal.count }}</div>
+								</div>
+							</div>
+						</div>
+					</Card>
+				</div>-->
+				<div class="week-bottom">
+					<Card title="近七天报警数据">
+						<div id="weekAlarmLine" ref="weekAlarmLine" style="width: 100%; height: 100%"></div>
+					</Card>
+				</div>
+				<div class="alarm-bottom">
+					<Card title="报警信息">
+						<div class="bottom-left">
+							<div class="left-content">
+								<div class="tab-list">
+									<div style="width: 7%">序号</div>
+									<div style="width: 13%">人员名称</div>
+									<div style="width: 17%">围栏名称</div>
+									<div style="width: 15%">设备序号</div>
+									<div style="width: 20%">报警时间</div>
+									<div style="width: 30%">报警信息</div>
+								</div>
+								<el-scrollbar class="list-box">
+									<div v-for="(item, index) in listData" class="list-style" :key="item.id">
+										<div style="width: 7%">{{ index + 1 }}</div>
+										<div style="width: 13%">{{ item.workerName }}</div>
+										<div style="width: 17%">{{ item.fenceName }}</div>
+										<div style="width: 15%">{{ item.devSn }}</div>
+										<div style="width: 20%">{{ item.alarmTime }}</div>
+										<div style="width: 30%">{{ item.alarmInfo }}</div>
+									</div>
+									<div class="not-data" v-if="listData.length == 0">
+										<img src="@/assets/images/noData.png" alt />
+										<p>暂无数据</p>
+									</div>
+								</el-scrollbar>
+							</div>
+						</div>
+					</Card>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+// import { getWorkerInfoList } from "@/assets/js/api/laborPerson";
+import {
+	getAlarmRecordInfoApi,
+	getHatDevOptionApi,
+	addstandardDevApi,
+	getRealtimeRecordInfo,
+	getRealtimeRecordList,
+	getVehiclePositionDayRecord,
+	getWeekAlarmDataApi,
+	getRealtimeDataApi,
+	getSafeHatDayRecordApi,
+	deleteSafehatFence,
+	addSafeHatPositionFence
+} from "@/api/modules/smartSafeHat";
+// 围栏相关API
+import {
+	//智能安全帽--查询围栏信息
+	getSuroundInfoApi,
+	getSafeHatTypeTotalApi,
+	getVehiclePositionFence,
+	addVehiclePositionFence,
+	getRegionListApi
+} from "@/api/modules/smartSafeHat";
+// import carIcon from "@/assets/images/carPosition/carIcon.png";
+import carOn from "@/assets/images/carPosition/carOn2.png";
+import carOff from "@/assets/images/carPosition/carOff2.png";
+import smartSafeHat from "@/assets/images/carPosition/person.png";
+import smartSafeHat2 from "@/assets/images//carPosition/person2.png";
+import personOff from "@/assets/images/carPosition/personOff.png";
+import startIcon from "@/assets/images/carPosition/startIcon.png";
+import endIcon from "@/assets/images/carPosition/endIcon.png";
+import personOn from "@/assets/images/carPosition/personOn.png";
+import { GlobalStore } from "@/stores";
+import { ElMessage, ElMessageBox } from "element-plus";
+import type { FormInstance, FormRules } from "element-plus";
+import Card from "@/components/card.vue";
+import * as echarts from "echarts";
+const store = GlobalStore();
+import { computed, reactive, ref, onMounted, onBeforeMount, watch } from "vue";
+var mouseTool;
+var marker;
+var lineArr;
+var mapInstance;
+var map;
+let choiceMonth = ref("2023-11");
+let dayRunRecord = ref([]); // 日行数据
+let hasRealTime = ref(false);
+let circleMapData = ref([]); // 圆形围栏存放
+let shapeMapData = ref([]); // 多边形围栏存放
+let devTypeTotal = ref({});
+let fenceCreateShow = ref(false); //创建围栏弹窗
+let fenceList = ref(["围栏1", "围栏2", "围栏3", "围栏4", "围栏5"]);
+let fenceSearch = ref(""); // 围栏搜索
+let fenceShow = ref(false); //打开围栏弹窗
+let enlarge = ref(false); //放大地图
+// let fenceShow = ref(true); //打开围栏弹窗
+let dayValue = ref(new Date());
+let nameOptions = ref([]) as any;
+let checkAll = ref(false);
+let checkAllFence = ref(false);
+let checkedCities = ref([]);
+let checkedFence = ref([]);
+let devList = ref(["鲁U6675", "刘江", "蒋东", "鲁U9675"]);
+let isIndeterminate = ref(true);
+let isIndeterminateFence = ref(true);
+let checked = ref(1);
+let devName = ref("");
+let locationList = ref([]);
+interface RuleForm {
+	// fenceName: string
+	// areaRadius: number
+}
+let addFormRef = ref<FormInstance>();
+// const addForm = reactive<RuleForm>({
+let addForm = ref({
+	areaRadius: 100, //区域半径
+	fenceName: "", //围栏名称
+	addr: "",
+	rangeType: 1,
+	locationList: [
+		{
+			fenceId: 0,
+			id: 0,
+			latitude: "",
+			longitude: "",
+			sortNum: 0
+		}
+	],
+	projectSn: "",
+	enterpriseId: ""
+});
+let pagInfo = ref({
+	pageNo: 1, //页数
+	pageSize: 10, //条数
+	total: 0 //总条数
+});
+let pagLabor = ref({
+	pageSize: 10,
+	pageNo: 1,
+	total: 0
+});
+let tableListData = ref([]); // 劳务列表
+let choicePerson = ref(false);
+let laborRadio = ref(""); //选择
+let laborInfo = ref(""); //选中劳务信息
+let laborType = ref(""); //劳务人员类型  1、劳务人员 2、管理人员 3、临时人员
+let fileUrl = ref(""); //文件上传地址
+let queryInfo = ref({
+	devSn: ""
+});
+let alarmDevSn = ref(" " as any);
+let listData = ref([]);
+let Popup = ref({
+	type: "add",
+	show: false
+});
+let addEditForm = ref({
+	personName: "",
+	numberPlate: "",
+	devSn: "",
+	type: 1,
+	driver: ""
+});
+// const formFenceRules = 	reactive<FormRules<RuleForm>({
+let formFenceRules = ref({
+	region: [
+		{
+			required: true,
+			message: "必填",
+			trigger: "blur"
+		}
+	],
+	fenceName: [
+		{
+			required: true,
+			message: "必填",
+			trigger: "blur"
+		},
+		{ min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
+	], //
+	areaRadius: [
+		{
+			required: true,
+			message: "必填",
+			trigger: "change"
+		}
+	]
+});
+let formRules = ref({
+	numberPlate: [
+		{
+			required: true,
+			message: "必填",
+			trigger: "blur"
+		},
+		{ min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
+	], // 长度在 1 到 20 个字符
+	devSn: [
+		{
+			required: true,
+			message: "必填",
+			trigger: "blur"
+		}
+	]
+});
+onMounted(async () => {
+	// choiceMonth.value = formatMonthTime(dayValue.value);
+	// console.log("当前月份", choiceMonth.value);
+	initMap();
+	// 智能安全帽--查询报警信息
+	getProgressListData();
+	// 智能安全帽--分类查询设备列表
+	getCrewListData();
+	// 智能安全帽--查询围栏信息
+	getFenceList();
+	// 智能安全帽--查询设备状态
+	getFenceType();
+	// 智能安全帽--查询近7天报警信息
+	getWeekAlarmData();
+
+	// clearFn();
+	resetMapSize();
+	window.addEventListener("resize", e => {
+		resetMapSize();
+	});
+	getRegionList();
+});
+const resetMapSize = () => {
+	console.log(666);
+	setTimeout(() => {
+		let mapContent: any = document.getElementById("mapContainer");
+		console.log(mapContent);
+		mapContent.style.transform = `scale(${1 / store.globalScale})`;
+	}, 200);
+};
+onBeforeMount(() => {
+	window.removeEventListener("resize", e => {
+		resetMapSize();
+	});
+});
+
+watch(dayValue, newVal => {
+	// console.log(newVal, "切换日期");
+	if (newVal) {
+		let newMonth = formatMonthTime(newVal);
+		let newDay = formatDayTime(newVal);
+		getTodayTrack(newDay);
+		choiceMonth.value = newMonth;
+	}
+});
+
+watch(choiceMonth, newVal => {
+	// console.log(newVal, "切换月份");
+	if (newVal) {
+		getDayRunData();
+	}
+});
+function enlargeMap() {
+	enlarge.value = true;
+}
+function notEnlargeMap() {
+	enlarge.value = false;
+}
+let isOpenDetail = ref(false);
+let workerListInFence = ref([]);
+function openDetail(item) {
+	// let data = {
+	// 	id: fenceId,
+	// 	projectSn: store.sn
+	// };
+	// getFencePersonApi(data).then(res => {
+	// 	if (res.success) {
+	// 		workerListInFence.value = res.result.workerListInFence
+	// 	}
+	// });
+	let welanBox = document.getElementById("welanMaskContainer");
+	if (welanBox) {
+		welanBox.style.zIndex = "999";
+	}
+	workerListInFence.value = item.workerListInFence;
+	isOpenDetail.value = true;
+}
+function closeDetail() {
+	let welanBox = document.getElementById("welanMaskContainer");
+	if (welanBox) {
+		welanBox.style.zIndex = "-1";
+	}
+	isOpenDetail.value = false;
+}
+
+function handleCancel() {
+	fenceCreateShow.value = false;
+	clearFn();
+}
+
+let addressStr = ref("");
+function localtionLotLat(longitude: number | null, latitude: number | null) {
+	if (longitude && latitude) {
+		const fixedLongitude = longitude.toFixed(6);
+		const fixedLatitude = latitude.toFixed(6);
+		return `经纬度 ${fixedLongitude}, ${fixedLatitude}`;
+	}
+	return "未知位置";
+}
+
+const resolveAddStr = computed(() => async (longitude: any, latitude: any) => {
+	//计算属性传递参数
+	console.log("👇传参");
+	console.log(longitude, latitude);
+	if (longitude && latitude) {
+		var addressResolve = new AMap.LngLat(longitude, latitude);
+		let geocoder2 = new AMap.Geocoder();
+		await geocoder2.getAddress(addressResolve, function (status, result) {
+			console.log("👇解析地址");
+			console.log(status, result);
+			if (status === "complete") {
+				addressStr.value = result.regeocode.formattedAddress;
+				// console.log(result.regeocode.formattedAddress);
+				console.log(addressStr);
+				return addressStr.value;
+			} else {
+				return `未知位置1`;
+			}
+		});
+	}
+
+	return "未知位置2";
+});
+
+let regionList = ref([] as any);
+function getRegionList() {
+	let data = {
+		projectSn: store.sn
+	};
+	getRegionListApi(data).then(res => {
+		if (res.success) {
+			checkedFence.value = [];
+			regionList.value = res.result;
+			console.log(regionList.value, 777777777777777777777);
+		}
+	});
+}
+
+function areaRadiusChange() {
+	if (addForm.value.locationList.length === 1) {
+		drawCircle();
+	}
+}
+
+function deleteFence() {
+	if (checkedFence.value.length === 0) {
+		ElMessage({
+			showClose: true,
+			message: "请选择删除围栏",
+			type: "error"
+		});
+		return;
+	}
+	console.log("删除围栏", checkedFence);
+	ElMessageBox.confirm("此操作将永久删除该围栏, 是否继续?", "提示", {
+		confirmButtonText: "确定",
+		cancelButtonText: "取消",
+		type: "warning"
+	})
+		.then(() => {
+			let idString = "";
+			for (let index = 0; index < checkedFence.value.length; index++) {
+				const element = checkedFence.value[index];
+				if (checkedFence.value.length - 1 > index) {
+					idString = idString + element + ",";
+				} else {
+					idString = idString + element;
+				}
+			}
+			deleteFenceInfo(idString);
+		})
+		.catch(() => {
+			ElMessage({
+				type: "info",
+				message: "已取消删除"
+			});
+		});
+}
+
+function deleteFenceInfo(idGroups) {
+	console.log("删除id", idGroups);
+	let data = {
+		ids: idGroups,
+		projectSn: store.sn
+	};
+	deleteSafehatFence(data).then(res => {
+		if (res.success) {
+			// console.log('删除成功', res)
+			getFenceList();
+			checkedFence.value = [];
+			fenceCitiesChange(checkedFence);
+			ElMessage({
+				type: "success",
+				message: "删除成功"
+			});
+		}
+	});
+}
+const submitFence = async (formEL: FormInstance | undefined) => {
+	if (locationList.value.length === 0) {
+		ElMessage({
+			showClose: true,
+			message: "未设置围栏区域!",
+			type: "error"
+		});
+		return;
+	}
+	addForm.value.locationList = locationList.value;
+	console.log("新增围栏", addForm);
+	let longitude = "";
+	let latitude = "";
+	let fenceShape = "";
+	if (addForm.value.locationList.length === 1) {
+		longitude = addForm.value.locationList[0].longitude;
+		latitude = addForm.value.locationList[0].latitude;
+	}
+	if (addForm.value.locationList.length > 1) {
+		for (let index = 0; index < addForm.value.locationList.length; index++) {
+			const element = addForm.value.locationList[index];
+			// let currentStr = element.latitude + "|" + element.longitude;
+			let currentStr = element.longitude + "|" + element.latitude;
+			if (addForm.value.locationList.length - 1 > index) {
+				currentStr = currentStr + ",";
+			}
+			fenceShape = fenceShape + currentStr;
+		}
+	}
+	console.log("多边形", fenceShape);
+
+	if (!formEL) return;
+	await formEL.validate((valid, fields) => {
+		if (valid) {
+			let params = {
+				qualityRegionId: addForm.value.region.id,
+				regionName: addForm.value.region.regionName,
+				fenceName: addForm.value.region.regionName,
+				// fenceName: addForm.value.fenceName,
+				areaRadius: addForm.value.areaRadius,
+				fenceShapeArr: JSON.stringify(addForm.value.locationList),
+				fenceShape: fenceShape,
+				latitude: latitude,
+				longitude: longitude,
+				rangeType: addForm.value.rangeType,
+				projectSn: store.sn
+			};
+			// params.alarmPushWorkerId = this.addForm.alarmPushWorkerId.join(',');
+
+			console.log("新增信息", params);
+			addSafeHatPositionFence(params).then(res => {
+				if (res.success) {
+					ElMessage({
+						showClose: true,
+						message: res.message,
+						type: "success"
+					});
+					getFenceList();
+				}
+			});
+			closeFenceCreate();
+		} else {
+			console.log("error submit!!");
+			return false;
+		}
+	});
+};
+
+// 智能安全帽--查询近七天报警信息
+let xData = ref([] as any);
+let yData1 = ref([0, 0, 0, 0, 0, 0, 0] as any); //SOS报警
+let yData2 = ref([0, 0, 0, 0, 0, 0, 0] as any); //静默报警
+let yData3 = ref([0, 0, 0, 0, 0, 0, 0] as any); //围栏报警
+function getWeekAlarmData() {
+	let data = {
+		type: 1, // 设备类型(1：安全帽;2:安全带)
+		projectSn: store.sn
+	};
+	getWeekAlarmDataApi(data).then(res => {
+		console.log("👇智能安全帽--近7天报警数据");
+		console.log(res);
+		if (res.success) {
+			res.result.forEach(element1 => {
+				// if(element1.name.includes("SOS报警")){
+				// 	console.log(element1)
+				// }
+				if (element1.name.includes("SOS报警")) {
+					element1.oneTrendList.forEach((element2, index) => {
+						xData.value[index] = element2.x;
+						console.log(xData.value);
+						let num = parseInt(element2.y);
+						yData1.value[index] += num;
+					});
+				}
+				if (element1.name.includes("静默报警")) {
+					element1.oneTrendList.forEach((element2, index) => {
+						let num = parseInt(element2.y);
+						yData2.value[index] += num;
+					});
+				}
+				if (element1.name.includes("围栏报警")) {
+					element1.oneTrendList.forEach((element2, index) => {
+						let num = parseInt(element2.y);
+						yData3.value[index] += num;
+					});
+				}
+			});
+			console.log("👇智能安全帽--近7天报警筛选后的数据");
+			console.log(xData);
+			console.log("👇智能安全帽--SOS报警");
+			console.log(yData1);
+			console.log("👇智能安全帽--静默报警");
+			console.log(yData2);
+			console.log("👇智能安全帽--围栏报警");
+			console.log(yData3);
+
+			// 智能安全帽--获取折线图
+			getLineEcharts();
+		}
+	});
+}
+
+// 智能安全帽--获取折线图
+function getLineEcharts() {
+	var chartDom = document.getElementById("weekAlarmLine");
+	var myChart = echarts.init(chartDom);
+	var option;
+	option = {
+		textStyle: { color: "white" },
+		tooltip: {
+			trigger: "axis"
+		},
+		legend: {
+			data: ["SOS报警", "静默报警", "围栏报警"],
+			textStyle: { color: "white" }
+		},
+		grid: {
+			left: "3%",
+			right: "4%",
+			bottom: "3%",
+			// show: true,
+			// borderColor: '#ccc',
+			containLabel: true
+		},
+		xAxis: {
+			type: "category",
+			boundaryGap: true,
+			// data: [ "2024-03-02", "2024-03-05", "2024-03-08", "2024-03-11", "2024-03-14", "2024-03-17", "2024-03-20", ],
+			data: xData.value,
+			axisLine: {
+				lineStyle: {
+					color: "#15356F" // 设置线的颜色
+				}
+			}
+		},
+		yAxis: {
+			type: "value",
+			splitLine: {
+				lineStyle: {
+					color: "#15356F" // 设置线的颜色
+				}
+			}
+		},
+		series: [
+			{
+				name: "SOS报警",
+				type: "line",
+				// stack: "Total",
+				// data: [120, 132, 101, 134, 90, 230, 210],
+				// data: [0, 0, 0, 0, 0, 0, 0],
+				data: yData1.value,
+				smooth: true,
+				symbol: "circle",
+				symbolSize: 10,
+				lineStyle: { color: "#F13333", width: 2 },
+				itemStyle: { color: "white", borderColor: "#F13333", borderWidth: 1 }
+			},
+			{
+				name: "静默报警",
+				type: "line",
+				// stack: "Total",
+				// data: [220, 182, 191, 234, 290, 330, 310],
+				// data: [0, 0, 0, 0, 0, 0, 0],
+				data: yData2.value,
+				smooth: true,
+				symbol: "circle",
+				symbolSize: 10,
+				lineStyle: { color: "#4AC0F3", width: 2 },
+				itemStyle: { color: "white", borderColor: "#4AC0F3", borderWidth: 1 }
+			},
+			{
+				name: "围栏报警",
+				type: "line",
+				// stack: "Total",
+				// data: [150, 232, 201, 154, 190, 330, 410],
+				// data: [0, 0, 0, 0, 1, 0, 0],
+				data: yData3.value,
+				smooth: true,
+				symbol: "circle",
+				symbolSize: 10,
+				lineStyle: { color: "#81F279", width: 2 },
+				itemStyle: { color: "white", borderColor: "#81F279", borderWidth: 1 }
+			}
+		]
+	};
+
+	option && myChart.setOption(option);
+}
+
+function refreshDev() {
+	alarmDevSn.value = "";
+	checkAll.value = false;
+	checkedFence.value = [];
+	fenceSearch.value = "";
+	checkedCities.value = [];
+	laborType.value = "";
+	queryInfo.value.devSn = "";
+	clearFn();
+	getCrewListData();
+	getProgressListData();
+	getLineEcharts();
+	getFenceList();
+}
+
+// 格式化时间
+function formatMonthTime(date) {
+	let year = date.getFullYear();
+	let month = date.getMonth() + 1; // 月份从0开始，需要加1
+	month = month < 10 ? "0" + month : month; // 如果月份小于10，补0
+	// console.log(formattedTime) // 输出格式化后的时间
+	return year + "-" + month;
+}
+
+function formatDayTime(date) {
+	let year = date.getFullYear();
+	let month = date.getMonth() + 1; // 月份从0开始，需要加1
+	month = month < 10 ? "0" + month : month; // 如果月份小于10，补0
+	let day = String(date.getDate()).padStart(2, "0");
+	// console.log(formattedTime) // 输出格式化后的时间
+	return year + "-" + month + "-" + day;
+}
+
+// 获取车辆今日轨迹
+function getTodayTrack(day) {
+	clearFn();
+	let data = {
+		devSn: queryInfo.value.devSn,
+		createTime_begin: day,
+		createTime_end: day,
+		projectSn: store.sn
+	};
+
+	getRealtimeDataApi(data).then((res: any) => {
+		let path = [];
+		let currentData = {};
+		if (res.result.length > 0) {
+			console.log("实时数据", res);
+			currentData = res.result[0];
+			for (let index = 0; index < res.result.length; index++) {
+				const element = res.result[index];
+				path.unshift([element.longitude, element.latitude]);
+			}
+			trackMapInit(path, currentData);
+		}
+		console.log("当前数据", path, currentData);
+	});
+}
+
+// 日行数据
+function getDayRunData() {
+	let data = {
+		projectSn: store.sn,
+		devSn: queryInfo.value.devSn,
+		month: choiceMonth.value
+		// day: dayValue.value
+	};
+	console.log("👇日行数据月份查询参数");
+	console.log(data);
+	getSafeHatDayRecordApi(data).then(res => {
+		if (res.success) {
+			console.log("日行数据", res);
+			dayRunRecord.value = res.result;
+		}
+		let newDay = formatDayTime(dayValue.value);
+		console.log(newDay);
+		getTodayTrack(newDay);
+	});
+}
+
+// 计算当前的行驶里程
+function getTodayMeter(day: any) {
+	// console.log("当前里程", day);
+	if (dayRunRecord.value.length === 0) {
+		return "-";
+	}
+	let currentDayRecord: any = dayRunRecord.value.find(function (item: any) {
+		return item.day === day;
+		checkedCities;
+	});
+	// console.log("当前里程", currentDayRecord);
+	if (currentDayRecord && currentDayRecord.trackDistanceDay) {
+		return currentDayRecord.trackDistanceDay;
+	} else {
+		return "-";
+	}
+}
+// 切换设备
+function devChange(e) {
+	console.log("设备改变", e);
+	getProgressListData();
+	if (checked.value === 2) {
+		getDayRunData();
+	}
+	if (checked.value === 1) {
+		let devArr = [queryInfo.value.devSn];
+		checkedCities.value = devArr;
+		handleCheckedCitiesChange(devArr);
+	}
+}
+// 获取车辆实时数据
+// 智能安全帽--获取实时数据
+function getRealTimeData(e) {
+	let name = "";
+	let data = {
+		devSn: e.devSn,
+		// devSn: "866652021371993",
+		projectSn: store.sn
+	};
+	getRealtimeDataApi(data).then(res => {
+		if (res.result.length > 0) {
+			// if (res.result.records[0].type === 1) {
+			// 	echoCarMarker(res.result.records[0]);
+			// }
+			// if (res.result.records[0].type === 2) {
+			// 	echoPersonMarker(res.result.records[0]);
+			// }
+			// echoCarMarker(res.result[0]);
+			echoPersonMarker(res.result[0]);
+		} else {
+			console.log("设备暂无数据", res);
+		}
+		console.log("实时数据", res);
+	});
+}
+
+// 智能安全帽--获取围栏列表数据
+function getFenceList() {
+	let data = {
+		fenceName: fenceSearch.value,
+		projectSn: store.sn
+	};
+	// getVehiclePositionFence(data).then(res => {
+	getSuroundInfoApi(data).then(res => {
+		if (res.success) {
+			fenceList.value = res.result;
+
+			// fenceList.value[0].fenceName = "深圳";
+			// fenceList.value[0].longitude = 114.12124287733712;
+			// fenceList.value[0].latitude = 30.6517077553546;
+
+			// fenceList.value[1].fenceName = "广州";
+			// fenceList.value[1].longitude = 113.2644;
+			// fenceList.value[1].latitude = 23.1291;
+
+			// console.log("👇智能安全帽--围栏信息--转换数据");
+			// let testArr = ref([{longitude: '',latitude: ''}])
+			// fenceList.value.forEach(element => {
+			// 	testArr.value[0].longitude = element.longitude
+			// 	testArr.value[0].latitude = element.latitude
+			// 	element.fenceShapeArr = JSON.stringify(testArr._value)
+			// 	console.log(element.fenceShapeArr)
+			// });
+			console.log(fenceList);
+			circleMapData.value = res.result.filter(item => item.rangeType === 1);
+			shapeMapData.value = res.result.filter(item => item.rangeType === 2);
+			console.log("围栏", circleMapData.value, shapeMapData.value);
+		}
+	});
+}
+// 智能安全帽--查询设备状态
+function getFenceType() {
+	let data = {
+		type: 1, // 设备类型(1：安全帽;2:安全带)
+		projectSn: store.sn
+	};
+	getSafeHatTypeTotalApi(data).then(res => {
+		console.log("👇智能安全帽--查询设备各状态数量");
+		console.log(res);
+		if (res.success) {
+			devTypeTotal.value = res.result;
+		}
+	});
+}
+// 打开创建围栏弹窗
+function openFenceCreate() {
+	fenceCreateShow.value = true;
+}
+// 关闭创建围栏弹窗
+function closeFenceCreate() {
+	fenceCreateShow.value = false;
+	addForm.value = {
+		areaRadius: 100, //区域半径
+		fenceName: "", //围栏名称
+		addr: "",
+		rangeType: 1,
+		locationList: [
+			{
+				fenceId: 0,
+				id: 0,
+				latitude: "",
+				longitude: "",
+				sortNum: 0
+			}
+		],
+		projectSn: "",
+		enterpriseId: ""
+	};
+	exitEditFn();
+	clearFn();
+}
+// 打开围栏弹窗
+function openFence() {
+	fenceShow.value = true;
+}
+// 关闭围栏弹窗
+function closeFence() {
+	fenceShow.value = false;
+}
+function close() {
+	addEditForm.value = {
+		personName: "",
+		numberPlate: "",
+		devSn: "",
+		type: 1,
+		driver: ""
+	};
+}
+//获取查询下拉
+function getCrewListData() {
+	let onlineType = "";
+	if (laborType.value !== "") {
+		onlineType = laborType.value;
+	}
+	let data = {
+		online: onlineType,
+		type: 1, // 设备类型(1：安全帽;2:安全带)
+		projectSn: store.sn
+	};
+	console.log("👇智能安全帽--分类查询设备列表--查询参数");
+	console.log(data);
+	getHatDevOptionApi(data).then(res => {
+		console.log("👇智能安全帽--分类查询设备列表");
+		console.log(res);
+		if (res.code == 200) {
+			console.log("👇智能安全帽--分类查询设备列表--结果集");
+			console.log(res.result);
+
+			const filterArray = res.result
+				.filter(item => item.workerName !== "")
+				.map(item => ({ devSn: item.devSn, workerName: item.workerName }));
+			let nameOption = filterArray.map(item => {
+				return {
+					label: item.workerName,
+					value: item.devSn
+				};
+			});
+			// const filteredArray = res.result
+			// 	.filter(item => item.personName == null)
+			// 	.map(item => ({ devSn: item.devSn, numberPlate: item.numberPlate }));
+			// let carOption = filteredArray.map(item => {
+			// 	return {
+			// 		label: item.numberPlate,
+			// 		value: item.devSn
+			// 	};
+			// });
+			// nameOptions.value = nameOption.concat(carOption);
+			nameOptions.value = nameOption.concat([]);
+
+			devList.value = res.result;
+		} else {
+			ElMessage.error(res.message);
+		}
+	});
+}
+// 智能安全帽--查询报警信息
+function getProgressListData() {
+	let data = {
+		// pageNo: pagInfo.value.pageNo,
+		// pageSize: pagInfo.value.pageSize,
+		devSns: alarmDevSn.value,
+		type: 1, // 设备类型(1：安全帽;2:安全带)
+		projectSn: store.sn
+	};
+	getAlarmRecordInfoApi(data).then(res => {
+		console.log("👇智能安全帽--查询报警信息");
+		console.log(res);
+		if (res.code == 200) {
+			listData.value = res.result;
+			pagInfo.value.total = res.result.total;
+		}
+	});
+}
+function fenceNameChange(e) {
+	console.log("围栏名称", e);
+	fenceSearch.value = e;
+	getFenceList();
+}
+function laborChange(e) {
+	laborType.value = e;
+	getCrewListData();
+}
+function handleCheckAllChange(val) {
+	clearFn();
+	let nameArr = devList.value.map(item => item.devSn);
+	checkedCities.value = val ? nameArr : [];
+	isIndeterminate.value = false;
+	if (val) {
+		listData;
+		pointAllSelect();
+	} else {
+		queryInfo.value.devSn = "";
+	}
+	alarmDevSn.value = "";
+	getProgressListData();
+	drawFencePoint();
+}
+function handleCheckedCitiesChange(value) {
+	console.log("设备选中", value);
+	clearFn();
+	let checkedCount = value.length;
+	checkAll.value = checkedCount === devList.value.length;
+	isIndeterminate.value = checkedCount > 0 && checkedCount < devList.value.length;
+	pointSelectChange();
+	drawFencePoint();
+}
+function pointAllSelect() {
+	for (let index = 0; index < devList.value.length; index++) {
+		const element = devList.value[index];
+		// console.log('选中某条', currentRecord)
+		// if (element.type === 1) {
+		// 	getRealTimeData(element);
+		// }
+		// if (element.type === 2) {
+		// 	getRealTimeData(element);
+		// }
+		getRealTimeData(element);
+	}
+}
+function pointSelectChange() {
+	let warnDevSn = "";
+	for (let index = 0; index < checkedCities.value.length; index++) {
+		const element = checkedCities.value[index];
+		let currentRecord = devList.value.filter(item => item.devSn === element)[0];
+		console.log("选中某条", currentRecord);
+		// if (currentRecord.type === 1) {
+		// 	getRealTimeData(currentRecord);
+		// }
+		// if (currentRecord.type === 2) {
+		// 	getRealTimeData(currentRecord);
+		// }
+		getRealTimeData(currentRecord);
+		if (checkedCities.value.length - 1 > index) {
+			warnDevSn = warnDevSn + element + ",";
+		} else {
+			warnDevSn = warnDevSn + element;
+		}
+	}
+	alarmDevSn.value = warnDevSn;
+	console.log("当前devSn", alarmDevSn.value);
+	getProgressListData();
+}
+
+function fenceAllChange(val) {
+	clearFn();
+	let nameArr = fenceList.value.map(item => item.id);
+	checkedFence.value = val ? nameArr : [];
+	isIndeterminateFence.value = false;
+	console.log("全选", val, checkedFence.value);
+	if (val) {
+		drawAllFencePoint();
+	}
+	pointSelectChange();
+	map.setFitView();
+}
+function fenceCitiesChange(value) {
+	clearFn();
+	console.log("👇围栏数据");
+	console.log(value);
+	let checkedCount = value.length;
+	checkAllFence.value = checkedCount === fenceList.value.length;
+	isIndeterminateFence.value = checkedCount > 0 && checkedCount < fenceList.value.length;
+	drawFencePoint();
+	pointSelectChange();
+	// circleMapData.value =
+	// console.log('选中', value)
+}
+function drawAllFencePoint() {
+	for (let index = 0; index < fenceList.value.length; index++) {
+		const element = fenceList.value[index];
+		// console.log('选中某条', currentRecord)
+		if (element.rangeType === 1) {
+			echoCircle(element);
+		}
+		if (element.rangeType === 2) {
+			echoDrawPolygon(element);
+		}
+	}
+}
+//下到上
+function drawFencePoint() {
+	for (let index = 0; index < checkedFence.value.length; index++) {
+		const element = checkedFence.value[index];
+		let currentRecord = fenceList.value.filter(item => item.id === element)[0];
+		console.log("drawFencePoint选中某条", currentRecord);
+		if (currentRecord.rangeType === 1) {
+			echoCircle(currentRecord);
+		}
+		if (currentRecord.rangeType === 2) {
+			echoDrawPolygon(currentRecord);
+		}
+	}
+}
+
+function selectChange(e) {
+	if (checked.value === e) {
+		return;
+	}
+	clearFn();
+	checked.value = e;
+	if (e === 1) {
+		refreshDev();
+	}
+	if (e === 2) {
+		// console.log("👇日行数据查询参数");
+		// console.log(nameOptions.value[0]);
+		queryInfo.value.devSn = nameOptions.value[0].value;
+		// queryInfo.value.devSn = devList.value[0].devSn;
+		// alarmDevSn.value = "";
+		getProgressListData();
+		getDayRunData();
+	}
+}
+
+// 轨迹绘制地图
+function trackMapInit(path: any, item: any) {
+	lineArr = path;
+	// lineArr = [
+	//   [116.478935, 39.997761],
+	//   [116.478939, 39.997825],
+	//   [116.478912, 39.998549],
+	//   [116.478912, 39.998549],
+	//   [116.478998, 39.998555],
+	//   [116.478998, 39.998555],
+	//   [116.479282, 39.99856],
+	//   [116.479658, 39.998528],
+	//   [116.480151, 39.998453],
+	//   [116.480784, 39.998302],
+	//   [116.480784, 39.998302],
+	//   [116.481149, 39.998184],
+	//   [116.481573, 39.997997],
+	//   [116.481863, 39.997846],
+	//   [116.482072, 39.997718],
+	//   [116.482362, 39.997718],
+	//   [116.483633, 39.998935],
+	//   [116.48367, 39.998968],
+	//   [116.484648, 39.999861]
+	// ]
+	// let markIcon = "https://webapi.amap.com/images/car.png";
+	let markIcon = "src/assets/images/smartSafeHat.png";
+	// let markIcon = "@/assets/images/carPosition/carIcon.png";
+	// let markIcon = "src/assets/images/carPosition/carIcon.png";
+	if (item.type === 2) {
+		markIcon = personOn;
+	}
+
+	// 创建一个 Icon
+	let startPointIcon = new AMap.Icon({
+		// 图标的取图地址
+		image: startIcon,
+		size: new AMap.Size(52, 52), //图标大小
+		// 图标所用图片大小
+		imageSize: new AMap.Size(35, 35)
+	});
+
+	// 将 icon 传入 marker
+	let startMarker = new AMap.Marker({
+		position: path[0],
+		icon: startPointIcon
+	});
+
+	// 创建一个 icon
+	let endPointIcon = new AMap.Icon({
+		image: endIcon,
+		size: new AMap.Size(52, 52), //图标大小
+		imageSize: new AMap.Size(35, 35)
+	});
+
+	// 将 icon 传入 marker
+	let endMarker = new AMap.Marker({
+		position: path[path.length - 1],
+		icon: endPointIcon,
+		offset: new AMap.Pixel(-15, -20)
+	});
+
+	// 将 markers 添加到地图
+	map.add([startMarker, endMarker]);
+
+	// 绘制轨迹
+	let polyline = new AMap.Polyline({
+		map: map,
+		path: lineArr,
+		showDir: true,
+		strokeColor: "#28F", //线颜色
+		// strokeOpacity: 1,     //线透明度
+		strokeWeight: 6 //线宽
+		// strokeStyle: "solid"  //线样式
+	});
+
+	let passedPolyline = new AMap.Polyline({
+		map: map,
+		// path: lineArr,
+		strokeColor: "#AF5", //线颜色
+		// strokeOpacity: 1,     //线透明度
+		strokeWeight: 6 //线宽
+		// strokeStyle: "solid"  //线样式
+	});
+
+	function createMarkerAndInfoWindow() {
+		AMap.plugin("AMap.MoveAnimation", function () {
+			marker = new AMap.Marker({
+				map: map,
+				position: path[0],
+				// icon: "https://webapi.amap.com/images/car.png",
+				// icon: "src/assets/images/smartSafeHat.png", // 自定义图标
+				icon: smartSafeHat, // 自定义图标
+				// icon: "@/assets/images/carPosition/carIcon.png", // 自定义图标
+				// icon: "src/assets/images/carPosition/carIcon.png", // 自定义图标
+				offset: new AMap.Pixel(-26, -13),
+				autoRotation: true,
+				angle: 90
+			});
+			marker.on("click", markerClick);
+			marker.emit("click", { target: marker });
+			marker.on("moving", function (e) {
+				passedPolyline.setPath(e.passedPath);
+			});
+		});
+	}
+
+	// 使用逆地理编码获取地址信息
+	let address = "未知";
+	AMap.plugin("AMap.Geocoder", function () {
+		let geocoder = new AMap.Geocoder();
+
+		geocoder.getAddress(path[0], function (status, result) {
+			if (status === "complete" && result.info === "OK") {
+				address = result.regeocode.formattedAddress; // 获取中文地址名称
+				console.log("位置", address);
+				createMarkerAndInfoWindow();
+			} else {
+				console.log("获取地址信息失败");
+				createMarkerAndInfoWindow();
+			}
+		});
+	});
+
+	function markerClick(e) {
+		let lnglat = e.target.getPosition();
+
+		//构建信息窗体中显示的内容
+		// console.log(e);
+		let info = [];
+
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
+		// info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.uploadTime + "</div>");
+		info.push(
+			'<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' +
+				item.longitude.toFixed(6) +
+				"|" +
+				item.latitude.toFixed(6) +
+				"</div>"
+		);
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">位置:</text> ' + address + "</div>");
+		var infoWindow = new AMap.InfoWindow({
+			offset: new AMap.Pixel(30, -30),
+			content: info.join("") //使用默认信息窗体框样式，显示信息内容
+		});
+		infoWindow.open(map, e.target.getPosition());
+	}
+
+	map.setFitView();
+}
+function startAnimation() {
+	marker.moveAlong(lineArr, {
+		duration: 500
+	});
+}
+
+var placeSearch = ref();
+
+const logisticsInfoList = ref([
+	{ latitude: "23.129152403638752", longitude: "113.42775362698366" },
+	{ latitude: "30.454012", longitude: "114.42659" },
+	{ latitude: "31.93182", longitude: "118.633415" },
+	{ latitude: "31.035032", longitude: "121.611504" }
+]);
+
+function initMap() {
+	// 初始化地图
+	map = new AMap.Map("mapContainer", {
+		resizeEnable: true,
+		center: [113.42775362698366, 23.129152403638752], // 设置地图中心点
+		zoom: 5 // 设置地图缩放级别
+	});
+
+	// 添加点和路径
+	const markers = logisticsInfoList.value.map(info => {
+		const marker = new AMap.Marker({
+			position: [parseFloat(info.longitude), parseFloat(info.latitude)],
+			map: map
+		});
+
+		// 添加弹窗
+		const infoWindow = new AMap.InfoWindow({
+			content: `纬度: ${info.latitude}, 经度: ${info.longitude}`,
+			offset: new AMap.Pixel(0, -30)
+		});
+
+		marker.on("click", () => {
+			infoWindow.open(map, marker.getPosition());
+		});
+
+		return marker;
+	});
+
+	// 添加路径
+	const path = logisticsInfoList.value.map(info => [parseFloat(info.longitude), parseFloat(info.latitude)]);
+	const polyline = new AMap.Polyline({
+		path: path,
+		strokeColor: "#FF33FF",
+		strokeWeight: 6,
+		strokeOpacity: 0.9,
+		map: map
+	});
+
+	// 调整地图视野以包含所有点
+	map.setFitView();
+}
+
+function select(e) {
+	console.log("select", e);
+	placeSearch.setCity(e.poi.adcode);
+	placeSearch.search(e.poi.name); //关键字查询查询
+}
+
+//清空地图
+function clearFn() {
+	map.clearMap();
+}
+function changeAreaType(e) {
+	// console.log("切换选项",e);
+	if (e === 1) {
+		drawCircle();
+	} else {
+		drawPolygon();
+	}
+	locationList.value = [];
+}
+//添加点标记
+function addMarker() {
+	// 创建一个 Icon
+	var startIcon = new AMap.Icon({
+		// 图标尺寸
+		size: new AMap.Size(25, 34),
+		// 图标的取图地址
+		image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+		// 图标所用图片大小
+		imageSize: new AMap.Size(25, 34)
+		// 图标取图偏移量
+		// imageOffset: new AMap.Pixel(-9, -3)
+	});
+	var marker = new AMap.Marker({
+		icon: startIcon,
+		position: [locationList.value[0].longitude, locationList.value[0].latitude],
+		size: new AMap.Size(25, 34),
+		offset: new AMap.Pixel(-12, -29)
+	});
+	marker.setMap(map);
+}
+function exitEditFn() {
+	mouseTool.close();
+}
+//画圆
+function drawCircle() {
+	if (locationList.value.length == 0) {
+		return;
+	}
+	clearFn();
+	addMarker();
+	var circle = new AMap.Circle({
+		center: [locationList.value[0].longitude, locationList.value[0].latitude],
+		radius: addForm.value.areaRadius, //半径
+		borderWeight: 2,
+		strokeColor: "#6caffc",
+		strokeOpacity: 1,
+		strokeWeight: 2,
+		fillOpacity: 0.6,
+		strokeStyle: "solid",
+		// strokeDasharray: [10, 10],
+		// 线样式还支持 'dashed'
+		fillColor: "#6caffc",
+		zIndex: 50
+	});
+
+	circle.setMap(map);
+	// 缩放地图到合适的视野级别
+	map.setFitView([circle]);
+}
+//绘制多边形
+function drawPolygon() {
+	clearFn();
+	console.log("自定义绘制");
+	mouseTool.polygon({
+		strokeColor: "#6caffc",
+		strokeOpacity: 1,
+		strokeWeight: 2,
+		// strokeOpacity: 0.2,
+		fillColor: "#6caffc",
+		fillOpacity: 0.6,
+		// 线样式还支持 'dashed'
+		strokeStyle: "solid"
+		// strokeStyle是dashed时有效
+		// strokeDasharray: [30,10],
+	});
+}
+
+// 回显图形模块
+
+// 圆
+function echoCircle(item) {
+	// console.log("画圆",item)
+	// 创建纯文本标记
+	let text = new AMap.Text({
+		text: item.fenceName,
+		anchor: "center", // 设置文本标记锚点
+		// draggable: true, // 是否拖拽
+		cursor: "pointer",
+		angle: 10,
+		style: {
+			padding: "10px",
+			"border-radius": "10px",
+			"background-color": "white",
+			"border-width": 0,
+			"box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
+			"text-align": "center",
+			"font-size": "20px",
+			color: "blue"
+		},
+		position: [item.longitude, item.latitude]
+	});
+
+	let circle = new AMap.Circle({
+		center: [item.longitude, item.latitude],
+		radius: item.areaRadius, //半径
+		borderWeight: 2,
+		strokeColor: "#6caffc",
+		strokeOpacity: 1,
+		strokeWeight: 2,
+		fillOpacity: 0.6,
+		strokeStyle: "solid",
+		// strokeDasharray: [10, 10],
+		// 线样式还支持 'dashed'
+		fillColor: "#6caffc",
+		zIndex: 50
+	});
+	text.setMap(map);
+	circle.setMap(map);
+	// 缩放地图到合适的视野级别
+	map.setFitView([circle]);
+}
+function echoDrawPolygon(item) {
+	// console.log("画多边形",item)
+	let polygonPath = [];
+	let polygonArr = JSON.parse(item.fenceShapeArr);
+	for (let index = 0; index < polygonArr.length; index++) {
+		const element = polygonArr[index];
+		polygonPath.push([element.longitude, element.latitude]);
+	}
+	// console.log("多边形位置",polygonPath)
+
+	// let path = [
+	//   [116.403322, 39.920255],
+	//   [116.410703, 39.897555],
+	//   [116.402292, 39.892353],
+	//   [116.389846, 39.891365]
+	// ]
+	let path = polygonPath;
+
+	// 创建纯文本标记
+	let text = new AMap.Text({
+		text: item.fenceName,
+		anchor: "center", // 设置文本标记锚点
+		// draggable: true, // 是否拖拽
+		cursor: "pointer",
+		angle: 10,
+		style: {
+			padding: "10px",
+			"border-radius": "10px",
+			"background-color": "white",
+			"border-width": 0,
+			"box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
+			"text-align": "center",
+			"font-size": "20px",
+			color: "blue"
+		},
+		position: path[0]
+	});
+
+	let polygon = new AMap.Polygon({
+		path: path,
+		strokeColor: "#FF33FF",
+		strokeWeight: 6,
+		strokeOpacity: 0.2,
+		fillOpacity: 0.4,
+		fillColor: "#1791fc",
+		zIndex: 50
+	});
+	text.setMap(map);
+	map.add(polygon);
+	// 缩放地图到合适的视野级别
+	map.setFitView([polygon]);
+}
+function echoCarMarker(item) {
+	console.log("👇开始加载地图数据");
+	//初始化地图对象，加载地图
+	// let map = new AMap.Map("mapContainer", {resizeEnable: true});
+	let lnglats = [[item.longitude, item.latitude]];
+
+	function drawCarMaker() {
+		for (let i = 0; i < lnglats.length; i++) {
+			marker = new AMap.Marker({
+				position: lnglats[i],
+				map: map,
+				// icon: "https://webapi.amap.com/images/car.png" // 自定义图标
+				// icon: "src/assets/images/smartSafeHat.png" // 自定义图标
+				icon: smartSafeHat // 自定义图标
+				// icon: "@/assets/images/carPosition/carIcon.png" // 自定义图标
+				// icon: "src/assets/images/carPosition/carIcon.png" // 自定义图标
+			});
+			// marker.content = '我是第' + (i + 1) + '个Marker';
+			marker.on("click", markerClick);
+			marker.emit("click", { target: marker });
+		}
+	}
+
+	// 使用逆地理编码获取地址信息
+	let address = "未知";
+	AMap.plugin("AMap.Geocoder", function () {
+		let geocoder = new AMap.Geocoder();
+		geocoder.getAddress(lnglats[0], function (status, result) {
+			if (status === "complete" && result.info === "OK") {
+				address = result.regeocode.formattedAddress; // 获取中文地址名称
+				console.log("位置", address);
+				drawCarMaker();
+			} else {
+				console.log("获取地址信息失败");
+				drawCarMaker();
+			}
+		});
+	});
+
+	function markerClick(e) {
+		let lnglat = e.target.getPosition();
+
+		//构建信息窗体中显示的内容
+		// console.log(e)
+		let info = [];
+
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
+		// info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.uploadTime + "</div>");
+		info.push(
+			'<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' +
+				item.longitude.toFixed(6) +
+				"|" +
+				item.latitude.toFixed(6) +
+				"</div>"
+		);
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">位置:</text> ' + address + "</div>");
+
+		let infoWindow = new AMap.InfoWindow({
+			offset: new AMap.Pixel(30, -30),
+			content: info.join("") //使用默认信息窗体框样式，显示信息内容
+		});
+		// console.log("信息窗体",infoWindow)
+		infoWindow.open(map, e.target.getPosition());
+	}
+	map.setFitView();
+}
+function echoPersonMarker(item) {
+	let lnglats = [[item.longitude, item.latitude]];
+
+	function drawPersonMarker() {
+		for (let i = 0; i < lnglats.length; i++) {
+			let marker = new AMap.Marker({
+				// position: lnglats[i],
+				position: lnglats[0],
+				map: map,
+				// icon: personOn // 自定义图标
+				icon: smartSafeHat2 // 自定义图标
+			});
+			marker.on("click", markerClick);
+			marker.emit("click", { target: marker });
+		}
+	}
+	let address = "<text style='color: darkred;font-weight:bolder'>未知</text>";
+	AMap.plugin("AMap.Geocoder", function () {
+		let geocoder = new AMap.Geocoder();
+
+		geocoder.getAddress(lnglats[0], function (status, result) {
+			if (status === "complete" && result.info === "OK") {
+				address = result.regeocode.formattedAddress; // 获取中文地址名称
+				console.log("位置", address);
+				drawPersonMarker();
+				// createMarkerAndInfoWindow();
+			} else {
+				console.log("获取地址信息失败");
+				drawPersonMarker();
+				// createMarkerAndInfoWindow()
+			}
+		});
+	});
+
+	function markerClick(e) {
+		let lnglat = e.target.getPosition();
+
+		// 使用逆地理编码获取地址信息
+
+		//构建信息窗体中显示的内容
+		console.log(e);
+		let info = [];
+
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
+		// info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.uploadTime + "</div>");
+		info.push(
+			'<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' +
+				item.longitude.toFixed(6) +
+				"|" +
+				item.latitude.toFixed(6) +
+				"</div>"
+		);
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">位置:</text> ' + address + "</div>");
+
+		var infoWindow = new AMap.InfoWindow({
+			offset: new AMap.Pixel(10, -30),
+			content: info.join("") //使用默认信息窗体框样式，显示信息内容
+		});
+
+		// infoWindow.open(map, e.target.getPosition());
+		infoWindow.open(map, lnglat);
+	}
+	map.setFitView();
+}
+</script>
+
+<!-- 组件自定义样式（需嵌套外层class） -->
+
+<style type="text/css">
+.amap-logo {
+	display: none;
+	opacity: 0 !important;
+}
+.amap-copyright {
+	opacity: 0;
+}
+.content {
+}
+</style>
+
+<style lang="scss" scoped>
+:deep(.h-card .content) {
+	overflow: hidden;
+}
+// :deep(.h-card .content) {
+// 	background: none;
+// }
+.welanMask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
+	z-index: -1; /* 确保遮罩层位于其他内容上方 */
+
+	// position: absolute;
+	// width: 99%;
+	// height: 120%;
+	// background: rgba(0, 0, 0, 0.9);
+	// z-index: -1;
+	// transform: transformY(-100%);
+	.weilanDetail {
+		position: absolute;
+		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
+		// background: url("@/assets/images/cardImg.png") no-repeat;
+		// background: black;
+		background-size: 100% 100%;
+		box-sizing: border-box;
+		width: 35%;
+		top: 20%;
+		left: 32.5%;
+		height: 65%;
+		padding: 0 1%;
+		.detailTitle {
+			width: 100%;
+			height: 10%;
+			display: flex;
+			justify-content: space-between;
+			.leftTitle {
+				width: auto;
+				height: 100%;
+				// background-color: #fff;
+				display: flex;
+				justify-content: start;
+				align-items: center;
+				color: #fff;
+				font-size: 26px;
+				font-family: OPPOSansH;
+				font-style: italic;
+				letter-spacing: 2px;
+			}
+			.rightTitle {
+				width: 20%;
+				height: 100%;
+				// background-color: black;
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+				.closeDetail {
+					cursor: pointer;
+				}
+			}
+		}
+		.detailContent {
+			height: 90%;
+			width: 100%;
+			.tab-list {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				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;
+				color: #fff;
+				font-size: calc(100vw * 16 / 1920);
+				line-height: 30px;
+				div {
+					text-align: center;
+					width: 24%;
+				}
+			}
+			.list-box {
+				height: 90%;
+				.list-style:nth-child(even) {
+					background: rgba(39, 88, 192, 0.06);
+				}
+				.list-style {
+					display: flex;
+					align-items: center;
+					color: #fff;
+					line-height: 24px;
+					font-size: 16px;
+					div {
+						text-align: center;
+						width: 24%;
+						white-space: nowrap;
+					}
+				}
+				.list-style:hover {
+					background: #091f3f;
+				}
+				.not-data {
+					top: -10%;
+					width: 100%;
+					height: 100%;
+					// left: 20%;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					position: absolute;
+					img {
+						width: 20%;
+						margin: 5% 30%;
+					}
+					p {
+						color: #fff;
+						font-size: calc(100vw * 14 / 1920);
+						margin: -1% 37%;
+					}
+				}
+			}
+		}
+	}
+}
+// 多边形表单
+.fence-shape {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 74px;
+	height: 34px;
+	background: #ffffff;
+	border-radius: 4px 4px 4px 4px;
+	border: 1px solid #d8dbe8;
+}
+// 围栏弹窗
+.fenceDialog {
+	position: absolute;
+	background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
+	background-size: 100% 100%;
+	box-sizing: border-box;
+	padding: 25px;
+	left: 5%;
+	top: 15%;
+	width: 330px;
+	height: 380px;
+	.fence-dialog-modal {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0%;
+		left: 0%;
+		z-index: 3;
+		background: rgba(39, 45, 69, 0.5);
+	}
+	.close-icon {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		cursor: pointer;
+	}
+	.fence-title {
+		border-left: 4px solid #5c81ee;
+		font-size: 15px;
+		color: #272d45;
+		padding-left: 10px;
+		margin-bottom: 20px;
+		font-weight: 600;
+		font-family: Source Han Sans CN, Source Han Sans CN;
+	}
+}
+.fenceCreate {
+	position: absolute;
+	background: url("@/assets/images/cbg.png") no-repeat;
+	background-size: 100% 100%;
+	box-sizing: border-box;
+	padding: 25px;
+	width: 360px;
+	height: 380px;
+	left: 40px;
+	top: 40px;
+	z-index: 5;
+	// .fence-modal {
+	//   position: absolute;
+	//   width: 330px;
+	//   height: 90px;
+	//   top: -90px;
+	//   left: 0%;
+	//   background: rgba(39, 45, 69, 0.5);
+	// }
+	.fenceCrete-box {
+		position: relative;
+		.create-footer {
+			margin: 100px 0 0 50px;
+		}
+		.close-icon {
+			position: absolute;
+			right: 0%;
+			top: 0%;
+			cursor: pointer;
+			color: rgba(255, 255, 255, 0.6);
+			font-size: 18px;
+		}
+		:deep(.el-form-item__label) {
+			color: #fff;
+		}
+		:deep(.el-radio__label) {
+			color: #fff;
+		}
+		.cFooter {
+			width: 70%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-left: 15%;
+			margin-top: 15%;
+			.tool {
+				width: 20%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				width: 80px;
+				height: 33px;
+				font-size: 14px;
+				cursor: pointer;
+				// background: #ffffff;23,46,70
+				// background: rgba(23, 46, 70, 0.3);
+				// background-color: rgba(0, 0, 255, 0.5);
+				color: #fff;
+				border-radius: 2px 2px 2px 2px;
+				border: 1px solid #5181f6;
+			}
+			.tool1 {
+				background: url("@/assets/images/cancel.png") no-repeat;
+				background-size: 100% 100%;
+			}
+			.tool2 {
+				background: url("@/assets/images/confirm.png") no-repeat;
+				background-size: 100% 100%;
+			}
+		}
+		.bigFormBox {
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			color: #fff;
+			font-size: 15px;
+			.itemBox1 {
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-top: 10%;
+				.itemBox11 {
+					width: 30%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					margin-top: 10%;
+				}
+				.itemBox12 {
+					width: 60%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					margin-top: 10%;
+				}
+			}
+			.itemBox2 {
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-top: 5%;
+				.itemBox21 {
+					width: 30%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+				.itemBox22 {
+					width: 60%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+			}
+			.itemBox3 {
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-top: 5%;
+				.itemBox31 {
+					width: 30%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+				.itemBox32 {
+					width: 60%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+			}
+			.itemBox4 {
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-top: 5%;
+				.itemBox41 {
+					width: 30%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+				.itemBox42 {
+					width: 60%;
+					display: flex;
+					justify-content: flex-start;
+					align-items: flex-start;
+					color: black;
+					margin-right: 50%;
+				}
+			}
+		}
+	}
+}
+.fence-box {
+	position: relative;
+	.dialog-title {
+		color: #ffffff;
+		font-weight: bold;
+		font-size: 18px;
+		font-family: "OPPOSans-Bold";
+		display: flex;
+		align-items: center;
+		.title-img {
+			width: 10%;
+			height: 10%;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.title-text {
+			margin-left: 1%;
+		}
+	}
+	.close-icon {
+		position: absolute;
+		right: 0%;
+		top: 0%;
+		cursor: pointer;
+		color: rgba(255, 255, 255, 0.6);
+		font-size: 18px;
+	}
+	.fence-tool {
+		display: flex;
+		justify-content: space-around;
+		padding: 0 25px;
+		.tool {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 80px;
+			height: 33px;
+			font-size: 14px;
+			cursor: pointer;
+			// background: #ffffff;
+			color: #5181f6;
+			border-radius: 2px 2px 2px 2px;
+			border: 1px solid #5181f6;
+		}
+	}
+	.fence-select {
+		margin: 15px 0;
+	}
+	.fence-radio {
+		height: 160px;
+	}
+}
+.choice-type {
+	display: flex;
+	align-items: center;
+	height: 50px;
+	justify-content: center;
+}
+.greenStyle {
+	font-size: 12px;
+	margin-top: 8px;
+	color: #fff;
+}
+#mapContainer {
+	width: 100%;
+	height: 100%;
+}
+.labor-type {
+	display: flex;
+	justify-content: space-around;
+	margin-top: 20px;
+	margin-bottom: 20px;
+	font-size: 14px;
+	.type-box {
+		width: 92px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 28px;
+		cursor: pointer;
+		color: rgba(255, 255, 255, 0.6);
+		background: url("@/assets/images/carPosition/noChioce.png") no-repeat;
+		// background: #e2e8f8;
+		border-radius: 2px 2px 2px 2px;
+	}
+	.laborActive {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 92px;
+		height: 28px;
+		color: #fff;
+		// background: #5181f6;
+		background: url("@/assets/images/carPosition/chioceType.png") no-repeat;
+		border-radius: 2px 2px 2px 2px;
+	}
+}
+
+.dev-list {
+	width: 100%;
+	height: 55%;
+	.choice-item {
+		display: flex;
+		align-items: center;
+		position: relative;
+		height: 33px;
+		cursor: pointer;
+		.list-type {
+			position: absolute;
+			width: 15px;
+			height: 15px;
+			margin-left: 20px;
+			margin-right: 10px;
+			z-index: 2;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.choice-speed {
+			display: flex;
+			align-items: center;
+			width: 50px;
+			font-size: 14px;
+			position: absolute;
+			right: 5%;
+			color: #fff;
+		}
+	}
+}
+.top-active {
+	color: #fff;
+}
+.data-ledger {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: space-between;
+	.left-data {
+		width: 21%;
+		height: 100%;
+		// :deep(.h-card) {
+		// 	.content {
+		// 		height: 94% !important;
+		// 	}
+		// }
+		.top-data {
+			height: 58.5%;
+			.left-menu {
+				width: 100%;
+				height: 100%;
+				.left-top {
+					display: flex;
+					font-size: 20px;
+					font-family: OPPOSansH;
+					letter-spacing: 2px; /* 设置文字间距为2像素 */
+					color: rgba(255, 255, 255, 0.6);
+					transform: skewX(-10deg);
+					// border-bottom: 2px solid #dce6fd;
+					.realTime-data {
+						display: flex;
+						align-items: center;
+						width: 50%;
+						height: 20px;
+						padding: 10px 0;
+						justify-content: center;
+						cursor: pointer;
+					}
+					.alarm-data {
+						display: flex;
+						align-items: center;
+						width: 50%;
+						height: 20px;
+						padding: 10px 0;
+						justify-content: center;
+						cursor: pointer;
+					}
+				}
+				.list-tool {
+					display: flex;
+					// margin-top: 10px;
+					margin-left: 30px;
+					.tool-btn {
+						width: 33px;
+						height: 32px;
+						margin-left: 20px;
+						cursor: pointer;
+						img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+			}
+		}
+		.bottom-data {
+			margin-top: 1%;
+			height: 38%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 4% !important;
+				}
+			}
+			.left-content {
+				height: 100%;
+				width: 100%;
+				// background-color: #fff;
+				.tab-list {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					width: 100%;
+					height: 10%;
+					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;
+					div {
+						text-align: center;
+						width: 24%;
+					}
+				}
+				.list-box {
+					height: 90%;
+					.list-style:nth-child(even) {
+						background: rgba(39, 88, 192, 0.06);
+					}
+					.list-style {
+						display: flex;
+						align-items: center;
+						color: #fff;
+						line-height: 24px;
+						font-size: 12px;
+						div {
+							text-align: center;
+							width: 24%;
+							white-space: nowrap;
+						}
+					}
+					.list-style:hover {
+						background: #091f3f;
+					}
+					.not-data {
+						top: 23%;
+						// width: 16%;
+						left: 20%;
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						justify-content: center;
+						position: absolute;
+						img {
+							width: 40%;
+							margin: 5% 30%;
+						}
+						p {
+							color: #fff;
+							font-size: calc(100vw * 14 / 1920);
+							margin: -6% 37%;
+						}
+					}
+				}
+			}
+		}
+	}
+	.right-data {
+		width: 78%;
+		height: 100%;
+		.map-top {
+			height: 58%;
+			position: relative;
+			:deep(.h-card) {
+				.content {
+					margin-top: 1% !important;
+				}
+			}
+			:deep(.titltText) {
+				margin: 0 0 0 0;
+				height: 100%;
+				margin-left: 0.08rem;
+				margin-top: -0.03rem;
+				display: flex;
+				align-items: center;
+				letter-spacing: 0.01rem;
+			}
+			.wei-lan {
+				.icon-off {
+					position: absolute;
+					padding-top: 5px;
+					top: 15%;
+					left: 1%;
+					width: 48px;
+					height: 48px;
+					cursor: pointer;
+					font-size: 14px;
+					background: #ffffff;
+					text-align: center;
+					border-radius: 2px 2px 2px 2px;
+					img {
+						width: 20px;
+						height: 20px;
+						margin: 0 auto;
+					}
+				}
+				.icon-on {
+					position: absolute;
+					padding-top: 5px;
+					top: 15%;
+					left: 1%;
+					text-align: center;
+					width: 48px;
+					height: 48px;
+					cursor: pointer;
+					font-size: 14px;
+					background: #ffffff;
+					color: #5181f6;
+					border-radius: 2px 2px 2px 2px;
+					img {
+						width: 20px;
+						height: 20px;
+						margin: 0 auto;
+					}
+				}
+				.enlargeIconOff {
+					position: absolute;
+					// padding-top: 5px;
+					bottom: 5%;
+					right: 1%;
+					text-align: center;
+					width: 38px;
+					height: 38px;
+					cursor: pointer;
+					font-size: 14px;
+					background: #ffffff;
+					// color: #5181f6;
+					border-radius: 2px 2px 2px 2px;
+					img {
+						width: 20px;
+						height: 22px;
+						margin: 8px auto;
+					}
+				}
+				.enlargeIconOn {
+					position: absolute;
+					// padding-top: 5px;
+					bottom: 8%;
+					right: 1%;
+					text-align: center;
+					width: 38px;
+					height: 38px;
+					cursor: pointer;
+					font-size: 14px;
+					background: #ffffff;
+					// color: #5181f6;
+					border-radius: 2px 2px 2px 2px;
+					img {
+						width: 20px;
+						height: 22px;
+						margin: 8px auto;
+					}
+				}
+			}
+			.start-track {
+				position: absolute;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				// padding: 20px;
+				width: 108px;
+				height: 38px;
+				cursor: pointer;
+				font-size: 14px;
+				background: #ffffff;
+				box-shadow: 0px 0px 10px 0px rgba(39, 45, 69, 0.2);
+				bottom: 8%;
+				right: 5%;
+			}
+			.start-track-isEnlage {
+				position: absolute;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				// padding: 20px;
+				width: 38px;
+				height: 38px;
+				cursor: pointer;
+				font-size: 14px;
+				background: #ffffff;
+				box-shadow: 0px 0px 10px 0px rgba(39, 45, 69, 0.2);
+				bottom: 8%;
+				right: 1%;
+				img {
+					width: 20px;
+					height: 22px;
+					margin: 6px auto;
+				}
+			}
+		}
+
+		.right-bottom {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: 38%;
+			.hat-bottom {
+				width: 23%;
+				margin-top: 20px;
+				height: 100%;
+				position: relative;
+				:deep(.h-card) {
+					.content {
+						margin-top: 4.65% !important;
+						// margin-top: 0;
+					}
+				}
+				.hat-container {
+					width: 100%;
+					height: 100%;
+					display: flex;
+					align-items: center;
+					.hat-image {
+						width: 100%;
+						height: 50%;
+						// margin-top: 15%;
+						background: url("@/assets/images/hatCount.png") no-repeat;
+						background-size: contain;
+						.hat-info {
+							margin-left: 45%;
+							margin-top: 5%;
+							width: 100%;
+							height: 100%;
+							color: #fff;
+							font-style: italic;
+							.hat-text {
+								font-size: 16px;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+								width: 50%;
+								height: 25%;
+								background: url("@/assets/images/dustNoise/menuImg.png") no-repeat;
+								background-size: 100% 100%;
+							}
+							.hat-count {
+								font-size: 20px;
+								width: 50%;
+								height: 25%;
+								font-weight: bolder;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+							}
+						}
+					}
+				}
+			}
+			.week-bottom {
+				width: 48.75%;
+				// margin-top: 20px;
+				// // height: 90%;
+				// // position: relative;
+				// :deep(.content) {
+				// 	margin-top: 2.1% !important;
+				// }
+				// div {
+				// }
+				// width: 50%;
+				margin-top: 20px;
+				height: 100%;
+				position: relative;
+				:deep(.h-card) {
+					.content {
+						margin-top: 2.1% !important;
+					}
+				}
+			}
+
+			.alarm-bottom {
+				width: 50%;
+				margin-top: 20px;
+				height: 100%;
+				position: relative;
+				:deep(.h-card) {
+					.content {
+						margin-top: 2.1% !important;
+					}
+				}
+				:deep(.titltText) {
+					// margin: 0 0 0 0;
+					// height: 100%;
+					// margin-left: 0.08rem;
+					// margin-top: -0.025rem;
+					// display: flex;
+					// align-items: center;
+					// letter-spacing: 0.01rem;
+				}
+				.bottom-left {
+					width: 100%;
+					height: 100%;
+					box-sizing: border-box;
+					// padding: 0 2%;
+					.left-content {
+						height: 100%;
+						width: 100%;
+						// background: url("@/assets/images/cardImg.png") no-repeat;
+						// background-size: 100% 100%;
+						.tab-list {
+							display: flex;
+							align-items: center;
+							width: 100%;
+							height: 10%;
+							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;
+							div {
+								text-align: center;
+								width: 24%;
+							}
+						}
+						.list-box {
+							height: 90%;
+							.list-style:nth-child(even) {
+								background: rgba(39, 88, 192, 0.06);
+							}
+							.list-style {
+								display: flex;
+								align-items: center;
+								color: #fff;
+								line-height: 24px;
+								font-size: 12px;
+								div {
+									text-align: center;
+									width: 24%;
+									white-space: nowrap;
+								}
+							}
+							.list-style:hover {
+								background: #091f3f;
+							}
+						}
+					}
+				}
+				.not-data {
+					top: 23%;
+					// width: 16%;
+					left: 33%;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					position: absolute;
+					img {
+						width: 40%;
+						margin: 5% 30%;
+					}
+					p {
+						color: #fff;
+						font-size: calc(100vw * 14 / 1920);
+						margin: -6% 37%;
+					}
+				}
+			}
+		}
+	}
+}
+
+.top-select {
+	margin: 0 0 0px 30px;
+}
+.track-calendar {
+	:deep(.el-calendar) {
+		background: none;
+		.el-calendar__header {
+			color: #fff;
+			.el-button-group {
+				button {
+					background: url("@/assets/images/carPosition/noChioce.png") no-repeat;
+					color: #fff;
+					padding: 5px;
+					width: 80px;
+				}
+			}
+		}
+	}
+	:deep(.el-calendar-table .el-calendar-day:hover) {
+		background-color: #3e5c94;
+	}
+	:deep(.el-calendar-table .el-calendar-day) {
+		height: 40px !important;
+		text-align: center;
+		// padding: 1px;
+		box-sizing: border-box;
+		:hover {
+			background: none;
+		}
+	}
+	:deep(.el-calendar-table) {
+		border: 1px solid #3e5c94;
+		tbody {
+			background: rgba(81, 129, 246, 0.2);
+			color: #fff;
+		}
+		thead {
+			background: rgba(81, 129, 246, 0.5);
+			th {
+				color: #fff;
+			}
+		}
+	}
+	:deep(.el-calendar__header) {
+		border: none;
+	}
+	:deep(.is-selected) {
+		background: #5181f6;
+		color: #fff;
+		:hover {
+			// background: #5181f6;
+		}
+	}
+}
+
+:deep(.el-input__wrapper) {
+	background: #112d59;
+}
+:deep(.el-input__inner) {
+	color: #fff;
+}
+:deep(.el-select .el-input .el-select__caret) {
+	color: #fff;
+}
+
+.dev-list {
+	:deep(.el-checkbox) {
+		.el-checkbox__label {
+			color: #fff;
+		}
+		.el-checkbox__input {
+			&.is-indeterminate {
+				background: #5181f6;
+			}
+			&.is-checked {
+				// border-left: 2px solid #5181f6;
+				// background: #e2e8f8;
+				background: rgba(81, 129, 246, 0.3);
+				// background: url("@/assets/images/carPosition/chioceType.png") no-repeat;
+				.el-checkbox__inner {
+					background: #5181f6;
+				}
+			}
+			.el-checkbox__inner {
+				border: 1px solid #224ea8;
+				background: none;
+				&:hover {
+				}
+			}
+		}
+	}
+}
+
+.fence-radio {
+	:deep(.el-checkbox) {
+		.el-checkbox__label {
+			color: #fff;
+		}
+		.el-checkbox__input {
+			&.is-indeterminate {
+				background: #5181f6;
+			}
+			&.is-checked {
+				// border-left: 2px solid #5181f6;
+				// background: #e2e8f8;
+				background: rgba(81, 129, 246, 0.3);
+				// background: url("@/assets/images/carPosition/chioceType.png") no-repeat;
+				.el-checkbox__inner {
+					background: #5181f6;
+				}
+			}
+			.el-checkbox__inner {
+				border: 1px solid #224ea8;
+				background: none;
+				&:hover {
+				}
+			}
+		}
+	}
+}
+
+.choice-item {
+	:deep(.el-checkbox) {
+		.el-checkbox__label {
+			position: absolute;
+			left: 70px;
+			padding-top: 3px;
+			color: #fff;
+		}
+		.el-checkbox__input {
+			width: 330px;
+			padding-top: 10px;
+			padding-bottom: 10px;
+			padding-left: 55px;
+			&.is-checked {
+				// border-left: 2px solid #5181f6;
+				// background: #e2e8f8;
+				background: rgba(81, 129, 246, 0.3);
+				// background: url("@/assets/images/carPosition/chioceType.png") no-repeat;
+				.el-checkbox__inner {
+					background: #5181f6;
+				}
+			}
+			.el-checkbox__inner {
+				border: 1px solid #224ea8;
+				background: none;
+				&:hover {
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/indexL.vue b/src/views/sevenLargeScreen/indexL.vue
index fef5a0a..9ef49d1 100644
--- a/src/views/sevenLargeScreen/indexL.vue
+++ b/src/views/sevenLargeScreen/indexL.vue
@@ -1,5 +1,12 @@
 <template>
-	<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false" @scaleChange="scaleChange">
+	<ScaleBox
+		:width="1920"
+		:height="1080"
+		bgc="transparent"
+		:delay="100"
+		:isFlat="false"
+		@scaleChange="scaleChange"
+	>
 		<!-- <div class="container"> -->
 		<div class="largeScreen" ref="dataScreenRef" style="width: 100%; height: 100%">
 			<div class="header">
@@ -27,12 +34,12 @@
 				</div>
 				<div class="Icon">
 					<img src="@/assets/images/dustNoise/dpIcon.png" alt="" />
-				</div> -->
+					</div>-->
 					<div class="Icon">
-						<img src="@/assets/images/dustNoise/tbsjIcon.png" alt="" />
+						<img src="@/assets/images/dustNoise/tbsjIcon.png" alt />
 					</div>
 					<div class="Icon" @click="showUserBox = !showUserBox">
-						<img src="@/assets/images/dustNoise/ryIcon.png" alt="" />
+						<img src="@/assets/images/dustNoise/ryIcon.png" alt />
 					</div>
 
 					<!-- <el-dropdown trigger="click">
@@ -40,13 +47,15 @@
 					<template #dropdown>
 						<div class="userDialog" @click="loginOut">退出登录</div>
 					</template>
-				</el-dropdown> -->
+					</el-dropdown>-->
 				</div>
 				<div class="userBox" v-show="showUserBox">
 					<div class="userItem">
 						<div class="sanJiao"></div>
-						<div class="userIcon">
-							<div class="icon"><img src="@/assets/images/dustNoise/userIcon.png" /></div>
+						<div class="userIcon" @click="toggleMapSwitch">
+							<div class="icon">
+								<img src="@/assets/images/dustNoise/userIcon.png" />
+							</div>
 							<div class="userName">{{ adminName }}</div>
 						</div>
 						<div class="loginOut" @click="jumpBgd">
@@ -64,39 +73,56 @@
 					</div>
 				</div>
 			</div>
-			<div class="menuList">
-				<div v-for="(item, index) in menuList" :key="index" class="menStyle">
-					<div class="subMenu" :index="item.modulePath" :class="{ active: activeTab === item.modulePath }">
-						<span @click="navigateTo(item, 1)">{{ item.moduleName }}</span>
+
+			<!-- 原项目 -->
+			<template v-if="EntityMap.Mapswitch">
+				<div class="menuList">
+					<div v-for="(item, index) in menuList" :key="index" class="menStyle">
+						<div
+							class="subMenu"
+							:index="item.modulePath"
+							:class="{ active: activeTab === item.modulePath }"
+						>
+							<span @click="navigateTo(item, 1)">{{ item.moduleName }}</span>
+						</div>
+					</div>
+					<div class="subMenuList" v-if="itemList != null && itemList.length >= 1">
+						<el-scrollbar class="scrollItem">
+							<div class="subMenuItem">
+								<div
+									class="subItem"
+									:style="COMPANY === 'hfqc' ? 'width:120px' : ''"
+									v-for="(data, i) in itemList"
+									:key="i"
+									:index="data.companyPath"
+									@click="navigateTo(data, 2)"
+								>
+									<span
+										style="white-space: nowrap"
+										:class="{ active2: activeTab2 === data.companyPath }"
+									>{{ data.menuName }}</span>
+								</div>
+							</div>
+						</el-scrollbar>
 					</div>
 				</div>
-				<div class="subMenuList" v-if="itemList != null && itemList.length >= 1">
-					<el-scrollbar class="scrollItem">
-						<div class="subMenuItem">
-							<div
-								class="subItem"
-								:style="COMPANY === 'hfqc' ? 'width:120px' : ''"
-								v-for="(data, i) in itemList"
-								:key="i"
-								:index="data.companyPath"
-								@click="navigateTo(data, 2)"
-							>
-								<span style="white-space: nowrap" :class="{ active2: activeTab2 === data.companyPath }">{{ data.menuName }}</span>
-							</div>
-						</div>
-					</el-scrollbar>
+				<div class="contentDate" v-if="itemList != null && itemList.length >= 1">
+					<span>
+						自{{ projectTimeInfo.contractPeriodStartTime }}起开始计算，至今日{{ nowDate }}为
+						<span class="numColor">
+							{{
+							projectPassDay
+							}}
+						</span>个日历天
+					</span>
 				</div>
-			</div>
-			<div class="contentDate" v-if="itemList != null && itemList.length >= 1">
-				<span
-					>自{{ projectTimeInfo.contractPeriodStartTime }}起开始计算，至今日{{ nowDate }}为<span class="numColor">{{
-						projectPassDay
-					}}</span
-					>个日历天</span
-				>
-			</div>
-			<div class="dataBoardContent">
-				<router-view></router-view>
+				<div class="dataBoardContent">
+					<router-view></router-view>
+				</div>
+			</template>
+
+			<div v-show="!EntityMap.Mapswitch" class="map-box">
+				<ProjectShow />
 			</div>
 		</div>
 		<!-- </div> -->
@@ -104,6 +130,17 @@
 </template>
 
 <script lang="ts" setup>
+// 大屏模块--
+import ProjectShow from "@/views/sevenLargeScreen/projectshow/index.vue";
+
+import { MapViewdata } from "@/stores/modules/map3D";
+const EntityMap = MapViewdata();
+
+const toggleMapSwitch = () => {
+	EntityMap.toggleMapSwitch();
+};
+
+// 大屏模块--
 import ScaleBox from "vue3-scale-box";
 import { ref, reactive, onMounted, onBeforeUnmount, computed } from "vue";
 import { getTaskTimeDetail } from "@/api/modules/schedulePlan";
@@ -239,6 +276,10 @@ let menuList = ref([
 			{
 				menuName: "智慧党建",
 				companyPath: "/smartPartyBuilding"
+			},
+			{
+				menuName: "工程概况-1",
+				companyPath: "/projectOverviewer"
 			}
 		]
 	},
@@ -281,6 +322,10 @@ let menuList = ref([
 			{
 				menuName: "智能安全帽",
 				companyPath: "/smartSafeHat"
+			},
+			{
+				menuName: "新智能安全帽",
+				companyPath: "/smartSafeHater"
 			}
 		]
 	},
@@ -497,7 +542,7 @@ const navigateTo = (path, type) => {
 
 // 获取动态菜单
 const getModuleMenu = async () => {
-	const res = await getAllModule({ moduleType: 8, userId: store.userId, projectSn: store.sn })
+	const res = await getAllModule({ moduleType: 8, userId: store.userId, projectSn: store.sn });
 	console.info(res, "allModule");
 	if (res.code == 200) {
 		const { moduleList } = res.result;
@@ -533,7 +578,7 @@ onMounted(async () => {
 		store.setAccountType(data.result.accountType);
 		store.setProjectDateAuth(data.menuAuthority);
 	}
-	await getModuleMenu();
+	// await getModuleMenu();
 	if (COMPANY === "jsyc") {
 		menuList.value = JSYCMenu;
 	}
@@ -712,11 +757,21 @@ function jumpBgd() {
 	background-size: 100% 100%;
 	position: relative;
 
+	.map-box {
+		height: 96.5%;
+		// background: skyblue;
+		transform: translateY(-8.5%);
+		position: relative;
+		z-index: 2;
+	}
+
 	.header {
 		width: 100%;
 		height: 12%;
 		background: url("@/assets/images/headerImg.webp") no-repeat;
 		background-size: 100% 100%;
+		position: relative;
+		z-index: 6;
 
 		// .projectTitle {
 		// 	display: flex;
@@ -778,6 +833,8 @@ function jumpBgd() {
 		line-height: 55px;
 		margin: -4% auto 0 2%;
 		font-family: pmzd;
+		position: relative;
+		z-index: 6;
 
 		> div {
 			position: relative;
@@ -898,7 +955,7 @@ function jumpBgd() {
 		width: 110px;
 		height: 100px;
 		right: 2%;
-		top: 4%;
+		top: 35%;
 		background: #112d59;
 		border-radius: 0px 0px 0px 0px;
 		border: 0px solid #405e97;
diff --git a/src/views/sevenLargeScreen/projectshow/components/MapBack.vue b/src/views/sevenLargeScreen/projectshow/components/MapBack.vue
new file mode 100644
index 0000000..aa38e64
--- /dev/null
+++ b/src/views/sevenLargeScreen/projectshow/components/MapBack.vue
@@ -0,0 +1,73 @@
+<template>
+	<div ref="mars3dContainer" style="width: 100%; height: 100%"></div>
+</template>
+ 
+<script setup>
+import { onMounted, ref, onBeforeUnmount } from "vue";
+import * as mars3d from "mars3d";
+import { Cesium } from "mars3d"
+import "mars3d/dist/mars3d.css";
+import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
+
+
+const mars3dContainer = ref(null);
+let map;
+
+onMounted(() => {
+	// 初始化Mars3D地图
+	map = new mars3d.Map(mars3dContainer.value, {
+		scene: {
+			center: { lat: 30.054604, lng: 108.885436, alt: 17036414, heading: 0, pitch: -90 },
+			showSun: true,
+			showMoon: true,
+			showSkyBox: true,
+			showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
+			fog: true,
+			fxaa: true,
+			globe: {
+				showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）
+				depthTestAgainstTerrain: false,
+				baseColor: "#546a53"
+			},
+			cameraController: {
+				zoomFactor: 3.0,
+				minimumZoomDistance: 1,
+				maximumZoomDistance: 50000000,
+				enableRotate: true,
+				enableZoom: true
+			},
+			mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
+			mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL // 2D下左右一直可以滚动重复世界地图
+		},
+		control: {
+			baseLayerPicker: true, // basemaps底图切换按钮
+			homeButton: true, // 视角复位按钮
+			sceneModePicker: true, // 二三维切换按钮
+			navigationHelpButton: true, // 帮助按钮
+			fullscreenButton: true, // 全屏按钮
+			contextmenu: { hasDefault: true } // 右键菜单
+		},
+		terrain: {
+			url: "//data.mars3d.cn/terrain",
+			show: true
+		},
+		basemaps: [
+			{
+				name: "天地图影像",
+				icon: "img/basemaps/tdt_img.png",
+				type: "tdt",
+				layer: "img_d",
+				show: true
+			}
+		]
+	});
+});
+
+// 组件销毁前，销毁地图
+onBeforeUnmount(() => {
+	map.destroy();
+});
+</script>
+ 
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/projectshow/components/MapDialog.vue b/src/views/sevenLargeScreen/projectshow/components/MapDialog.vue
new file mode 100644
index 0000000..21a6606
--- /dev/null
+++ b/src/views/sevenLargeScreen/projectshow/components/MapDialog.vue
@@ -0,0 +1,1275 @@
+<template>
+	<div class="MapDia-box direction-map">
+		<!-- 定位-删除框 -->
+		<div class="po-delete"></div>
+		<!-- 定位-装饰 -->
+		<div class="po-decorate"></div>
+
+		<!-- 顶部-简介 -->
+		<div class="title-data">
+			<!-- 信息 -->
+			<div class="title-box">
+				<div class="pic-left">
+					<img
+						src="https://img2.baidu.com/it/u=630825659,1674314339&fm=253&fmt=auto&app=138&f=JPEG?w=840&h=480"
+						alt
+					/>
+				</div>
+
+				<div class="right-data">
+					<div class="data-one">1号风机</div>
+					<div class="back-data"></div>
+					<div class="data-tep">
+						风机编号：ZM03
+						<p>在线</p>
+					</div>
+				</div>
+			</div>
+
+			<!-- 视频 -->
+			<div class="video-box">
+				<div class="video-title">
+					<div class="left-icon" />
+					<div class="left-shi" />
+				</div>
+				<div class="video-con">
+					<VideoPreview v-if="!EntityMap.Mapswitch" ref="videoPreviewRef" />
+				</div>
+			</div>
+
+			<!-- 定位 -->
+			<div class="area-data justifycenter-map" :class="{ areasmall : EntityMap.Mapswitch }">
+				<div class="area-icon"></div>
+				<div class="area-content">当前区域人数</div>
+				<div class="area-right">6人</div>
+			</div>
+		</div>
+
+		<!--表格  -->
+		<div class="tablemap-box direction-map">
+			<div class="table-title">
+				<div class="tabitem justifycenter-map" @click="onswtich('1')">工作票信息</div>
+				<div class="tabitem justifycenter-map" @click="onswtich('2')">人员信息列表</div>
+				<div class="tabitem justifycenter-map" @click="onswtich('3')">安全隐患</div>
+			</div>
+			<div class="back-line"></div>
+
+			<!--工作票信息  -->
+			<template v-if="tablecut == 1">
+				<div class="table-con direction-map">
+					<div class="searching-tab justifyitems-map">
+						<div class="searchingitem justifyitems-map">
+							工作编号 &nbsp
+							<el-input v-model="serialnumbert" placeholder />
+						</div>&nbsp&nbsp&nbsp&nbsp
+						<div class="searchingitem justifyitems-map">
+							施工单位 &nbsp
+							<el-select v-model="unitduty" class="m-2" placeholder>
+								<el-option
+									v-for="item in unitdutydata"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+								/>
+							</el-select>
+						</div>&nbsp&nbsp&nbsp&nbsp
+						<div class="searchingitem justifyitems-map">
+							吊装班组&nbsp
+							<el-select v-model="hoisgroup" class="m-2" placeholder>
+								<el-option
+									v-for="item in unitdutydata"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+								/>
+							</el-select>
+						</div>
+						<div class="searchingicon justifycenter-map" @click="onticket(true)">新增</div>
+					</div>
+					<div class="con-tab">
+						<el-table
+							:data="worktableData"
+							style="width: 100%"
+							:height="EntityMap.Mapswitch ? '130' : '260'"
+							:row-class-name="tableRowClassName"
+							:cell-style="cellStyle"
+							:header-cell-style="{backgroundColor:'#1c4785',color:'#fff',border: '1px solid #204c78'}"
+						>
+							<el-table-column prop="date" label="工作票编号" width="200" align="center" />
+							<el-table-column prop="name" label="施工单位" width="180" align="center" />
+							<el-table-column prop="name" label="吊装班组" align="center" />
+							<el-table-column prop="name" label="工作负责人" width="180" align="center" />
+							<el-table-column prop="name" label="计划工作时间" width="180" align="center" />
+							<el-table-column prop="address" label="操作" width="240" align="center">
+								<template #default="scope">
+									<el-button
+										type="primary"
+										link
+										icon="VideoCameraFilled"
+										@click="handleEdit(scope.$index, scope.row)"
+									>查看视频</el-button>
+									<el-button
+										type="primary"
+										link
+										icon="Folder"
+										@click="handleEdit(scope.$index, scope.row)"
+									>PDF下载</el-button>
+								</template>
+							</el-table-column>
+						</el-table>
+					</div>
+				</div>
+			</template>
+
+			<!-- 人员信息列表 -->
+			<template v-if="tablecut == 2">
+				<div class="table-con direction-map">
+					<div class="searching-tab justifyitems-map">
+						<div class="searchingitem justifyitems-map">
+							所属企业 &nbsp
+							<el-select v-model="enterpriseduty" class="m-2" placeholder>
+								<el-option
+									v-for="item in unitdutydata"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+								/>
+							</el-select>
+						</div>&nbsp&nbsp&nbsp&nbsp
+						<div class="searchingitem justifyitems-map">
+							所属班组/部门 &nbsp
+							<el-select v-model="teamduty" class="m-2" placeholder>
+								<el-option
+									v-for="item in unitdutydata"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+								/>
+							</el-select>
+						</div>&nbsp&nbsp&nbsp&nbsp
+						<div class="searchingitem justifyitems-map">
+							人员姓名&nbsp
+							<el-select v-model="nameduty" class="m-2" placeholder>
+								<el-option
+									v-for="item in unitdutydata"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+								/>
+							</el-select>
+						</div>
+						<div class="searchingname justifycenter-map">
+							<el-checkbox v-model="allperson" label="项目全部人员" size="large" />
+							<el-checkbox v-model="nowperson" label="当前区域人员" size="large" />
+						</div>
+					</div>
+					<div class="con-tab">
+						<el-table
+							:data="nametabledata"
+							style="width: 100%"
+							:height="EntityMap.Mapswitch ? '130' : '260'"
+							:row-class-name="tableRowClassName"
+							:cell-style="cellStyle"
+							:header-cell-style="{backgroundColor:'#1c4785',color:'#fff',border: '1px solid #204c78'}"
+						>
+							<el-table-column prop="a" label="所属企业" align="center" />
+							<el-table-column prop="b" label="所属班组/部门" align="center" />
+							<el-table-column prop="c" label="人员姓名" align="center" />
+							<el-table-column label="照片" align="center">
+								<template #default="scope">
+									<el-popover placement="top" trigger="click" width="auto">
+										<template #reference>
+											<el-image style="width: 50px; height: 50px" :src="scope.row.d" fit="cover" />
+										</template>
+										<el-image :src="scope.row.d" fit="contain" style="max-width: 80vw; max-height: 80vh" />
+									</el-popover>
+								</template>
+							</el-table-column>
+						</el-table>
+					</div>
+				</div>
+			</template>
+
+			<!-- 安全隐患 -->
+			<template v-if="tablecut == 3">
+				<div class="table-con direction-map">
+					<div class="searching-tab justifyitems-map">
+						<div class="searchingitem justifyitems-map">
+							安全检查类型 &nbsp
+							<el-select v-model="safetytype" class="m-2" placeholder>
+								<el-option
+									v-for="item in unitdutydata"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+								/>
+							</el-select>
+						</div>&nbsp&nbsp&nbsp&nbsp
+						<div class="searchingitem justifyitems-map">
+							检查结果 &nbsp
+							<el-select v-model="examresult" class="m-2" placeholder>
+								<el-option
+									v-for="item in unitdutydata"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+								/>
+							</el-select>
+						</div>&nbsp&nbsp&nbsp&nbsp
+						<div class="searchingitem justifyitems-map">
+							检查人&nbsp
+							<el-select v-model="rummager" class="m-2" placeholder>
+								<el-option
+									v-for="item in unitdutydata"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+								/>
+							</el-select>
+						</div>
+						<div class="searchingitem justifyitems-map">
+							责任人&nbsp
+							<el-select v-model="personliable" class="m-2" placeholder>
+								<el-option
+									v-for="item in unitdutydata"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+								/>
+							</el-select>
+						</div>
+					</div>
+					<div class="con-tab">
+						<el-table
+							:data="safetytabledata"
+							style="width: 100%"
+							:height="EntityMap.Mapswitch ? '130' : '260'"
+							:row-class-name="tableRowClassName"
+							:cell-style="cellStyle"
+							:header-cell-style="{backgroundColor:'#1c4785',color:'#fff',border: '1px solid #204c78',fontSize:'18px'}"
+						>
+							<el-table-column prop="a" label="安全检查类型" align="center" />
+							<el-table-column prop="b" label="检查结果/整改时限" align="center" />
+
+							<el-table-column label="检查人/检查时间" align="center" width="200">
+								<template #default="scope">
+									{{scope.row.c}}
+									<p>{{scope.row.d}}</p>
+								</template>
+							</el-table-column>
+							<el-table-column prop="e" label="安全信息问题" align="center" />
+							<el-table-column prop="f" label="责任人" align="center" />
+							<el-table-column prop="g" label="复查人" align="center" />
+							<el-table-column prop="i" label="核验人" align="center" />
+							<el-table-column prop="address" label="操作" align="center">
+								<template #default="scope">
+									<el-button type="primary" link @click="ondirection(scope.$index, scope.row,true)">查看详情</el-button>
+								</template>
+							</el-table-column>
+						</el-table>
+					</div>
+				</div>
+			</template>
+		</div>
+
+		<!-- 定位表格-隐患记录- -->
+		<div class="dialog-potential dialog-box direction-map" v-if="potentialswitch">
+			<div class="dialog-title justifyitems-map">
+				隐患记录
+				<div class="but-rectify">超期整改</div>
+				<div class="delete-icon" @click="ondirection(1,1,false)"></div>
+			</div>
+
+			<div class="dialog-con warp-map">
+				<div class="con-item">
+					检查类型
+					<p>安全问题</p>
+				</div>
+				<div class="con-item">
+					分包单位
+					<p>上海租聘有限公司</p>
+				</div>
+				<div class="con-item">
+					整改结果
+					<p>待整改</p>
+				</div>
+				<div class="con-item">
+					检查时间
+					<p>2024-09-14 10:07:29</p>
+				</div>
+				<div class="con-item">
+					检查人员
+					<p>张某某</p>
+				</div>
+				<div class="con-item">
+					补充说明
+					<p>11111111</p>
+				</div>
+				<div class="con-item">
+					核验人员
+					<p>张某某</p>
+				</div>
+				<div class="con-item">
+					问题等级
+					<p>二级</p>
+				</div>
+				<div class="con-item">
+					检查部位
+					<p>生活区</p>
+				</div>
+				<div class="con-item">
+					事件描述
+					<p>11111111</p>
+				</div>
+
+				<div class="con-item">
+					现场整改
+					<p>未完成</p>
+				</div>
+				<div class="con-item">
+					紧急程度
+					<p>一般</p>
+				</div>
+				<div class="con-item">
+					问题描述
+					<p>11111111</p>
+				</div>
+				<div class="con-item">
+					责任人员
+					<p>张某某</p>
+				</div>
+				<div class="con-item">
+					复查人员
+					<p>张某某</p>
+				</div>
+				<div class="con-item">
+					整改时限
+					<p>2024-09-14 10:07:29</p>
+				</div>
+				<div class="con-item">
+					问题分类
+					<p>安全管理/安全生产责任制/为建立/</p>
+				</div>
+				<div class="con-item">
+					整改要求
+					<p>骄傲和数据结合实际暗黑世界按计划时间爱和关怀是哈公司</p>
+				</div>
+				<div class="con-item img-flex">
+					现场视频(点击图片查看)
+					<div class="item-data">
+						<el-image
+							style="width: 120px; height: 120px"
+							src="https://img2.baidu.com/it/u=34876831,1052472271&fm=253&fmt=auto&app=120&f=JPEG?w=691&h=500"
+							:preview-src-list="imgdata"
+						/>
+					</div>
+				</div>
+				<div class="con-item img-flex">
+					现场照片(点击图片查看)
+					<div class="item-data">
+						<el-image
+							style="width: 120px; height: 120px"
+							src="https://img2.baidu.com/it/u=34876831,1052472271&fm=253&fmt=auto&app=120&f=JPEG?w=691&h=500"
+							:preview-src-list="imgdata"
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- 定位表格-工作票新增 -->
+		<div class="dialog-ticket dialog-box direction-map" v-if="ticketswitch">
+			<div class="dialog-title justifyitems-map">
+				工作票新增
+				<div class="delete-icon" @click="onticket(false)"></div>
+			</div>
+
+			<div class="dialog-con">
+				<div class="tick-item">
+					<p>工作票编号</p>
+					<el-input v-model="input" placeholder="Please input" />
+				</div>
+				<div class="tick-item">
+					<p>施工单位</p>
+					<el-input v-model="input" placeholder="Please input" />
+				</div>
+				<div class="tick-item">
+					<p>吊装班组</p>
+					<el-input v-model="input" placeholder="Please input" />
+				</div>
+				<div class="tick-item">
+					<p>工作负责人</p>
+					<el-input v-model="input" placeholder="Please input" />
+				</div>
+				<div class="tick-item">
+					<p>计划工作事件</p>
+					<el-input v-model="input" placeholder="Please input" />
+				</div>
+				<div class="tick-item upload-item">
+					<p>PDF文件上传</p>
+					<div class="tick-upload">
+						<el-upload
+							v-model:file-list="fileList"
+							class="upload-demo"
+							action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+							multiple
+							:on-preview="handlePreview"
+							:on-remove="handleRemove"
+							:before-remove="beforeRemove"
+							:limit="3"
+							:on-exceed="handleExceed"
+						>
+							<!-- <el-button type="primary">Click to upload</el-button> -->
+
+							<img src="@/assets/images/mapimg/Frame.png" alt />
+							<!-- <template #tip>
+								<div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
+							</template>-->
+						</el-upload>
+					</div>
+				</div>
+
+				<div class="tick-but">
+					<el-button @click="resetForm(ruleFormRef)">取消</el-button>
+
+					<el-button type="success" @click="submitForm(ruleFormRef)">确定</el-button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+// 上传
+import { ElMessage, ElMessageBox } from "element-plus";
+
+import type { UploadProps, UploadUserFile } from "element-plus";
+
+const fileList = ref<UploadUserFile[]>([
+	{
+		name: "element-plus-logo.svg",
+		url: "https://element-plus.org/images/element-plus-logo.svg"
+	},
+	{
+		name: "element-plus-logo2.svg",
+		url: "https://element-plus.org/images/element-plus-logo.svg"
+	}
+]);
+
+const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
+	console.log(file, uploadFiles);
+};
+
+const handlePreview: UploadProps["onPreview"] = uploadFile => {
+	console.log(uploadFile);
+};
+
+const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
+	ElMessage.warning(
+		`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`
+	);
+};
+
+const beforeRemove: UploadProps["beforeRemove"] = (uploadFile, uploadFiles) => {
+	return ElMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then(
+		() => true,
+		() => false
+	);
+};
+
+// 摄像头
+const videoPreviewRef = ref(null);
+
+// 摄像头
+import VideoPreview from "./VideoPreview.vue";
+
+// store
+import { MapViewdata } from "@/stores/modules/map3D";
+const EntityMap = MapViewdata();
+
+// 表格部分-工作票信息
+const serialnumbert = ref("123");
+const unitduty = ref("");
+const hoisgroup = ref("");
+
+const worktableData = [
+	{
+		date: "2016-05-03",
+		name: "Tom",
+		address: "No. 189, Grove St, Los Angeles"
+	},
+	{
+		date: "2016-05-03",
+		name: "Tom",
+		address: "No. 189, Grove St, Los Angeles"
+	},
+	{
+		date: "2016-05-03",
+		name: "Tom",
+		address: "No. 189, Grove St, Los Angeles"
+	},
+	{
+		date: "2016-05-03",
+		name: "Tom",
+		address: "No. 189, Grove St, Los Angeles"
+	},
+	{
+		date: "2016-05-03",
+		name: "Tom",
+		address: "No. 189, Grove St, Los Angeles"
+	},
+	{
+		date: "2016-05-03",
+		name: "Tom",
+		address: "No. 189, Grove St, Los Angeles"
+	},
+	{
+		date: "2016-05-03",
+		name: "Tom",
+		address: "No. 189, Grove St, Los Angeles"
+	},
+	{
+		date: "2016-05-03",
+		name: "Tom",
+		address: "No. 189, Grove St, Los Angeles"
+	},
+	{
+		date: "2016-05-03",
+		name: "Tom",
+		address: "No. 189, Grove St, Los Angeles"
+	},
+	{
+		date: "2016-05-03",
+		name: "Tom",
+		address: "No. 189, Grove St, Los Angeles"
+	}
+];
+
+const unitdutydata = [
+	{
+		value: "Option1",
+		label: "Option1"
+	},
+	{
+		value: "Option2",
+		label: "Option2"
+	},
+	{
+		value: "Option3",
+		label: "Option3"
+	}
+];
+
+// 表格部分-人员信息列表
+const enterpriseduty = ref("123");
+const teamduty = ref("");
+const nameduty = ref("");
+const allperson = ref(true);
+const nowperson = ref(false);
+
+const nametabledata = [
+	{
+		a: "测试企业",
+		b: "维保一部门",
+		c: "张三三",
+		d: "https://img2.baidu.com/it/u=34876831,1052472271&fm=253&fmt=auto&app=120&f=JPEG?w=691&h=500"
+	},
+	{
+		a: "测试企业",
+		b: "维保一部门",
+		c: "张三三",
+		d: "https://img2.baidu.com/it/u=34876831,1052472271&fm=253&fmt=auto&app=120&f=JPEG?w=691&h=500"
+	},
+	{
+		a: "测试企业",
+		b: "维保一部门",
+		c: "张三三",
+		d: "https://img2.baidu.com/it/u=34876831,1052472271&fm=253&fmt=auto&app=120&f=JPEG?w=691&h=500"
+	},
+	{
+		a: "测试企业",
+		b: "维保一部门",
+		c: "张三三",
+		d: "https://img2.baidu.com/it/u=34876831,1052472271&fm=253&fmt=auto&app=120&f=JPEG?w=691&h=500"
+	},
+	{
+		a: "测试企业",
+		b: "维保一部门",
+		c: "张三三",
+		d: "https://img2.baidu.com/it/u=34876831,1052472271&fm=253&fmt=auto&app=120&f=JPEG?w=691&h=500"
+	},
+	{
+		a: "测试企业",
+		b: "维保一部门",
+		c: "张三三",
+		d: "https://img2.baidu.com/it/u=34876831,1052472271&fm=253&fmt=auto&app=120&f=JPEG?w=691&h=500"
+	}
+];
+
+// 表格部分-安全隐患
+const safetytype = ref();
+const examresult = ref();
+const rummager = ref();
+const personliable = ref();
+
+const safetytabledata = [
+	{
+		a: "排查记录",
+		b: "合格",
+		c: "张三",
+		d: "2024-10-12 11:24:00",
+		e: "安全管理",
+		f: "李四",
+		g: "复查人",
+		i: "核验人"
+	},
+	{
+		a: "排查记录",
+		b: "合格",
+		c: "张三",
+		d: "2024-10-12 11:24:00",
+		e: "安全管理",
+		f: "李四",
+		g: "复查人",
+		i: "核验人"
+	},
+	{
+		a: "排查记录",
+		b: "合格",
+		c: "张三",
+		d: "2024-10-12 11:24:00",
+		e: "安全管理",
+		f: "李四",
+		g: "复查人",
+		i: "核验人"
+	},
+	{
+		a: "排查记录",
+		b: "合格",
+		c: "张三",
+		d: "2024-10-12 11:24:00",
+		e: "安全管理",
+		f: "李四",
+		g: "复查人",
+		i: "核验人"
+	},
+	{
+		a: "排查记录",
+		b: "合格",
+		c: "张三",
+		d: "2024-10-12 11:24:00",
+		e: "安全管理",
+		f: "李四",
+		g: "复查人",
+		i: "核验人"
+	},
+	{
+		a: "排查记录",
+		b: "合格",
+		c: "张三",
+		d: "2024-10-12 11:24:00",
+		e: "安全管理",
+		f: "李四",
+		g: "复查人",
+		i: "核验人"
+	}
+];
+
+// 表格样式-公共
+const tableRowClassName = ({ row, rowIndex }: { row: User; rowIndex: number }) => {
+	if (rowIndex % 2 === 0) {
+		return "odd-row";
+	} else {
+		return "even-row";
+	}
+};
+// 单元格边框颜色
+const cellStyle = ({ column }) => {
+	return {
+		fontSize: "15px",
+		borderTop: "1px solid #204c78",
+		borderBottom: "1px solid #204c78"
+	};
+};
+
+// 表格切换
+const tablecut = ref("1");
+
+const onswtich = item => {
+	tablecut.value = item;
+};
+
+// 弹框部分-隐患
+// 图片数据-
+const imgdata = [
+	"https://img2.baidu.com/it/u=34876831,1052472271&fm=253&fmt=auto&app=120&f=JPEG?w=691&h=500",
+	"https://img1.baidu.com/it/u=2774633396,25181221&fm=253&fmt=auto&app=138&f=JPEG?w=882&h=500"
+];
+
+const potentialswitch = ref(false);
+const potentialobj = ref({});
+
+const ondirection = (index, row, item) => {
+	if (EntityMap.Mapswitch) return;
+	potentialswitch.value = item;
+	if (item) {
+		videoPreviewRef.value.handleHide();
+	} else {
+		videoPreviewRef.value.handleShow();
+	}
+};
+
+// 弹框部分-新增
+const input = ref("");
+const ticketswitch = ref(false);
+
+const onticket = item => {
+	if (EntityMap.Mapswitch) return;
+	ticketswitch.value = item;
+	if (item) {
+		videoPreviewRef.value.handleHide();
+	} else {
+		videoPreviewRef.value.handleShow();
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.direction-map {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.justifycenter-map {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.justifyitems-map {
+	display: flex;
+	align-items: center;
+}
+
+.warp-map {
+	display: flex;
+	flex-wrap: wrap;
+	align-content: flex-start;
+}
+
+.img-flex {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start !important;
+}
+
+// 变化样式
+.areasmall {
+	transform: scale(0.6);
+}
+
+// 公共弹框
+.dialog-box {
+	background: url("@/assets/images/mapimg/Group 1000015762.png") no-repeat center center;
+	background-size: 100% 100%;
+	position: absolute;
+	z-index: 999;
+
+	.dialog-title {
+		width: 100%;
+		height: 40px;
+		background: url("@/assets/images/mapimg/Group 1000015760.png") no-repeat center center;
+		background-size: 100% 100%;
+		padding-left: 15px;
+		margin-bottom: 20px;
+		position: relative;
+
+		font-family: PingFang SC, PingFang SC;
+		font-weight: 500;
+		font-size: 17px;
+		color: #09e3e3;
+
+		.delete-icon {
+			width: 30px;
+			height: 30px;
+			background: url("@/assets/images/mapimg/Group 1000015795.png") no-repeat center center;
+			background-size: 100% 100%;
+			position: absolute;
+			top: 5px;
+			right: 15px;
+			cursor: pointer;
+		}
+	}
+
+	.dialog-con {
+		flex: 1;
+		background: linear-gradient(90deg, #003965 0%, #115a92 100%);
+		border: 1px solid #0d82a2;
+		border-radius: 8px;
+		box-shadow: 0 0 0 1px rgba(21, 221, 219, 1), 0 0 0 2px rgba(12, 218, 218, 1);
+	}
+}
+
+.MapDia-box {
+	width: 100%;
+	height: 100%;
+	background: url("@/assets/images/mapimg/Group 1000015823.png") no-repeat center center;
+	background-size: 100% 100%;
+	position: relative;
+	padding: 35px 30px 60px 70px;
+	overflow: hidden;
+
+	// .direction-map {
+	// 	display: flex;
+	// 	flex-direction: column;
+	// 	align-items: center;
+	// }
+
+	// 装饰
+	.po-delete {
+		width: 30px;
+		height: 30px;
+		position: absolute;
+		right: 15px;
+		top: 15px;
+		background: url("@/assets/images/mapimg/Group 1000015822.png") no-repeat center center;
+		background-size: 100% 100%;
+	}
+
+	.po-decorate {
+		height: 535px;
+		width: 21px;
+		position: absolute;
+		top: 20px;
+		left: 30px;
+		background: url("@/assets/images/mapimg/头部右.png") no-repeat center center;
+		background-size: 100% 100%;
+	}
+
+	// 顶部
+	.title-data {
+		width: 100%;
+		height: 350px;
+		//    background: yellow;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		// 定位
+		.area-data {
+			width: 320px;
+			height: 90px;
+			background: url("@/assets/images/mapimg/image 66.png") no-repeat center center;
+			background-size: 100% 100%;
+			padding: 5px 25px;
+			position: absolute;
+			top: 40px;
+			right: 80px;
+			justify-content: space-evenly;
+			transition: transform 2s ease;
+
+			.area-icon {
+				width: 38px;
+				height: 36px;
+				background: url("@/assets/images/mapimg/Frame.png") no-repeat center center;
+				background-size: 100% 100%;
+			}
+
+			.area-content {
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				font-size: 24px;
+				color: #ffffff;
+			}
+
+			.area-right {
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 600;
+				font-size: 32px;
+				color: #fec601;
+			}
+		}
+
+		.title-box {
+			width: 100%;
+			height: 70px;
+			// background: yellow;
+			// background: skyblue;
+			display: flex;
+
+			.pic-left {
+				width: 65px;
+				// background: skyblue;
+
+				img {
+					width: 56px;
+					height: 56px;
+					border-radius: 50%;
+					cursor: pointer;
+					// border: 3px solid #68D8FE;
+				}
+			}
+
+			.right-data {
+				flex: 1;
+				// background: yellow;
+				.data-one {
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					font-size: 20px;
+					color: #ffffff;
+				}
+
+				.back-data {
+					width: 150px;
+					height: 6px;
+					background: linear-gradient(90deg, #053f97 0%, #00d3ff 52%, #053f97 100%);
+					border-radius: 0px 0px 0px 0px;
+					filter: blur(4px);
+				}
+
+				.data-tep {
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					font-size: 14px;
+					color: #ffffff;
+					display: flex;
+					align-items: center;
+
+					p {
+						display: block;
+						width: 46px;
+						height: 16px;
+						background: #38af3d;
+						border-radius: 3px;
+						font-family: PingFang SC, PingFang SC;
+						font-weight: 500;
+						font-size: 10px;
+						color: #ffffff;
+						margin-left: 5px;
+						margin-top: 12px;
+						text-align: center;
+					}
+				}
+			}
+		}
+
+		.video-box {
+			width: 100%;
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.video-title {
+				width: 484px;
+				height: 39px;
+				background: url("@/assets/images/mapimg/Group 4064.png") no-repeat center center;
+				background-size: 100% 100%;
+				// line-height: 38px;
+				// background: yellow;
+				padding-left: 15px;
+				display: flex;
+				align-items: center;
+
+				.left-icon {
+					width: 29px;
+					height: 29px;
+					background: url("@/assets/images/mapimg/Group 4225.png") no-repeat center center;
+					background-size: 100% 100%;
+				}
+
+				.left-shi {
+					width: 100px;
+					height: 28px;
+					background: url("@/assets/images/mapimg/实时视频.png") no-repeat center center;
+					background-size: 100% 100%;
+					margin-top: 5px;
+				}
+			}
+
+			.video-con {
+				flex: 1;
+				// background: skyblue;
+				margin: 10px 0;
+			}
+		}
+	}
+
+	// 表格
+	.tablemap-box {
+		width: 100%;
+		flex: 1;
+
+		.table-title {
+			width: 100%;
+			height: 40px;
+			// background: yellow;
+			display: flex;
+			align-items: center;
+			padding-left: 50px;
+			margin: 20px 0 10px;
+
+			.tabitem {
+				width: 200px;
+				height: 36px;
+				background: url("@/assets/images/mapimg/Group 1000015780.png") no-repeat center center;
+				background-size: 100% 100%;
+				font-family: OPPOSans, OPPOSans;
+				font-weight: bold;
+				font-size: 20px;
+				color: #74eaf1;
+				margin-right: 40px;
+				cursor: pointer;
+			}
+		}
+		.back-line {
+			width: 1252px;
+			height: 2px;
+			background: linear-gradient(180deg, rgba(25, 60, 141, 0.6) 0%, rgba(25, 60, 141, 0.3) 100%);
+		}
+
+		.table-con {
+			width: 100%;
+			flex: 1;
+			// background: skyblue;
+
+			.searching-tab {
+				width: 100%;
+				height: 50px;
+				margin: 5px 0;
+				display: flex;
+				align-items: center;
+				position: relative;
+
+				.searchingitem {
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					font-size: 14px;
+					color: #ffffff;
+					white-space: nowrap;
+
+					::v-deep .el-input__wrapper {
+						background: #205182 !important;
+						color: #ffffff !important;
+						border: 1px solid #96c6ff !important;
+					}
+				}
+
+				.searchingicon {
+					width: 110px;
+					height: 110px;
+					background: url("@/assets/images/mapimg/Group 1000015799.png") no-repeat center center;
+					background-size: 100% 100%;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					font-size: 14px;
+					color: #0e0f0f;
+					line-height: 14px;
+					margin-top: 5px;
+					margin-left: 20px;
+					cursor: pointer;
+				}
+
+				// 人员信息
+				.searchingname {
+					display: flex;
+					float: right;
+					position: absolute;
+					top: 0;
+					right: 0;
+
+					::v-deep .el-checkbox {
+						color: #ffffff !important;
+					}
+				}
+			}
+
+			.con-tab {
+				width: 100%;
+				flex: 1;
+				// background: skyblue;
+				::v-deep .el-button {
+					font-size: 15px !important;
+				}
+
+				::v-deep .el-table {
+					// .el-table__body td,
+					// .el-table__header th {
+					// 	border-color: red !important; /* 设置边框颜色 */
+					// 	border-right-color: red !important; /* 设置横向边框颜色 */
+					// 	border-bottom-color: red !important; /* 设置纵向边框颜色 */
+					// }
+
+					// /* 设置最后一列无右边框 */
+					// .el-table__body td:last-child,
+					// .el-table__header th:last-child {
+					// 	border-right: none !important;
+					// }
+
+					// /* 设置表格最后一行无底边框 */
+					// .el-table__body tr:last-child td,
+					// .el-table__footer tr:last-child td {
+					// 	border-bottom: none !important;
+					// }
+
+					// /* 设置表格标题的边框颜色 */
+					// .el-table__header th {
+					// 	border-bottom-color: red !important; /* 设置标题下边框颜色 */
+					// }
+					// background: yellow !important;
+					border-bottom: 1px solid #063368;
+					.el-table__header-wrapper {
+						// background: #1d4582 !important;
+					}
+
+					color: #e0dddd;
+					/* 单数行颜色 */
+					.odd-row {
+						background-color: #245083;
+					}
+
+					/* 双数行颜色 */
+					.even-row {
+						background-color: #255390;
+					}
+				}
+			}
+		}
+	}
+
+	// 隐患记录
+	.dialog-potential {
+		width: 700px;
+		height: 670px;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -60%);
+		padding: 30px;
+
+		.dialog-title {
+			.but-rectify {
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				font-size: 14px;
+				color: #ffffff;
+				line-height: 28px;
+				margin-left: 40px;
+				background: #ff0000;
+				padding: 0 10px;
+				border-radius: 2px;
+				cursor: pointer;
+
+				&:hover {
+					color: #cccccc;
+				}
+			}
+		}
+
+		.dialog-con {
+			padding: 20px !important;
+			.con-item {
+				width: 50%;
+				height: 30px;
+				// background: skyblue !important;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				font-size: 16px;
+				color: #ffffff;
+				display: flex;
+				align-items: center;
+				margin-bottom: 15px;
+
+				p {
+					width: 210px;
+					// background: skyblue;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					font-size: 14px;
+					color: #6ddcf3;
+					margin: 0 0 0 20px;
+					white-space: nowrap; /* 防止文本换行 */
+					overflow: hidden; /* 隐藏超出部分 */
+					text-overflow: ellipsis; /* 显示省略号 */
+				}
+
+				.item-data {
+					width: 50%;
+					// background: skyblue;
+					display: flex;
+					margin-top: 15px;
+
+					img {
+						width: 120px;
+						height: 120px;
+						margin-right: 20px;
+						border-radius: 7px;
+					}
+				}
+			}
+		}
+	}
+
+	// 工作票新增
+	.dialog-ticket {
+		width: 600px;
+		height: 580px;
+		padding: 30px;
+		z-index: 999 !important;
+
+		.dialog-con {
+			width: 570px;
+
+			// width: 100%;
+			padding: 20px;
+			// background: skyblue;
+
+			.tick-item {
+				height: 35px;
+				margin-bottom: 20px;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				font-size: 16px;
+				color: #ffffff;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				white-space: nowrap;
+
+				p {
+					width: 135px;
+					margin-right: 50px;
+				}
+			}
+
+			.upload-item {
+				// justify-content: flex-start !important;
+				align-items: flex-start !important;
+				margin-top: -23px;
+				.tick-upload {
+					padding-top: 20px;
+					width: 550px;
+					height: 150px;
+					// background: skyblue;
+					margin-bottom: 15px;
+				}
+				img {
+					width: 114px;
+					height: 114px;
+					background: rgba(17, 90, 146, 0.7);
+					border-radius: 8px 8px 8px 8px;
+					border: 0px solid #09e3e3;
+				}
+			}
+
+			.tick-but {
+				position: absolute;
+				right: 50px;
+				bottom: 50px;
+				text-align: right;
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/projectshow/components/VideoPreview.vue b/src/views/sevenLargeScreen/projectshow/components/VideoPreview.vue
new file mode 100644
index 0000000..3c6941b
--- /dev/null
+++ b/src/views/sevenLargeScreen/projectshow/components/VideoPreview.vue
@@ -0,0 +1,253 @@
+<!-- 视频播放组件 -->
+<template>
+	<div id="playWnd" class="playWnd" ref="playWndBox" style="width: 100%; height: 100%"></div>
+	<!-- :style="{
+        height: playWndHeight + 'px',
+	width: playWndWidth + 'px',-->
+</template>
+ 
+<script setup>
+import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from "vue";
+
+const playWndBox = ref(null);
+let playWndHeight = ref("190");
+let playWndWidth = ref("800");
+let pubKey = ref("");
+let oWebControl = ref(null);
+let objData = ref({
+	appkey: "25323788", //海康平台提供的appkey
+	ip: "222.80.185.228", //平台地址
+	secret: "JCBkUhwcXnaGJoTc1ikn", //海康平台提供的secret
+	port: 1443,
+	playMode: 0, // 0 预览 1回放
+	layout: "1x4" //页面展示的模块数【16】
+});
+
+onMounted(() => {
+	// 获取页面的实例对象
+	const pageInstance = getCurrentInstance();
+	// 获取dom节点对象
+	const tagDomObj = pageInstance.refs.playWndBox;
+	console.log("tagDomObj", tagDomObj);
+	console.log("tagDomObj", tagDomObj.clientHeight);
+	console.log("tagDomObj", tagDomObj.clientWidth);
+	playWndHeight.value = tagDomObj.clientHeight - 20;
+	// playWndWidth.value = tagDomObj.clientWidth - 202;
+	playWndWidth.value = tagDomObj.clientWidth - 202;
+
+	// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
+	window.addEventListener("scroll", () => {
+		console.log(5);
+
+		// return
+		if (oWebControl.value != null) {
+			oWebControl.JS_Resize(tagDomObj.clientWidth, tagDomObj.clientHeight);
+			this.setWndCover();
+		}
+	});
+
+	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+	window.addEventListener("resize", e => {
+		console.log(0);
+
+		if (oWebControl.value != null) {
+			oWebControl.JS_Resize(tagDomObj.clientWidth, tagDomObj.clientHeight);
+			this.setWndCover();
+		}
+	});
+
+	// 初始化播放器插件
+	nextTick(() => {
+		initPlugin();
+	});
+});
+
+onBeforeUnmount(() => {
+	if (oWebControl.value != null) {
+		// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+		oWebControl.JS_HideWnd();
+		// 销毁当前播放的视频
+		oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
+		// 断开与插件服务连接
+		oWebControl.JS_Disconnect();
+	}
+});
+
+const initPlugin = () => {
+	oWebControl = new WebControl({
+		szPluginContainer: "playWnd", // 指定容器id
+		iServicePortStart: 15900, // 指定起止端口号，建议使用该值
+		iServicePortEnd: 15900,
+		szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
+		cbConnectSuccess: () => {
+			// 创建WebControl实例成功
+			oWebControl
+				.JS_StartService("window", {
+					// WebControl实例创建成功后需要启动服务
+					// 值"./VideoPluginConnect.dll"写死
+					dllPath: "./VideoPluginConnect.dll"
+				})
+				.then(
+					function () {
+						// 设置消息回调
+						oWebControl.JS_SetWindowControlCallback({
+							// cbIntegrationCallBack: cbIntegrationCallBack,
+						});
+						//JS_CreateWnd创建视频播放窗口，宽高可设定
+						oWebControl
+							.JS_CreateWnd("playWnd", 1143, 188, { bEmbed: true }) //这一部分很重要，两个参数为你盒子的宽高，这样是写死是防止组件加载之前出现白屏；bEmbed: true 防止窗口闪烁
+							.then(function () {
+								// 创建播放实例成功后初始化
+								init();
+							});
+					},
+					function () {
+						// 启动插件服务失败
+					}
+				);
+		},
+		// 创建WebControl实例失败
+		cbConnectError: function () {
+			// 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！
+			// console.log(0);
+			// oWebControl.value = null;
+			// // 程序未启动时执行error函数，采用wakeup来启动程序
+			// window.WebControl.JS_WakeUp("VideoWebPlugin://");
+			// initCount++;
+			// if (initCount < 3) {
+			//   setTimeout(function () {
+			//     initPlugin();
+			//   }, 3000);
+			// } else {
+			//   setTimeout(function () {
+			//     setTimeout(function () {
+			//       $router.push('/home/PlugDown')
+			//     }, 4000)
+			//   }, 4000)
+			// }
+		},
+		cbConnectClose: () => {
+			// 异常断开：bNormalClose = false
+			// JS_Disconnect正常断开：bNormalClose = true
+			// console.log("cbConnectClose");
+			oWebControl.value = null;
+		}
+	});
+	// oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);
+};
+
+// 初始化
+const init = callback => {
+	getPubKey(() => {
+		let appkey = objData.value.appkey; //综合安防管理平台提供的appkey，必填
+		let secret = setEncrypt(objData.value.secret); //综合安防管理平台提供的secret，必填
+		let ip = objData.value.ip; //综合安防管理平台IP地址，必填
+		let playMode = objData.value.playMode; //初始播放模式：0-预览，1-回放
+		let port = objData.value.port; //综合安防管理平台端口，若启用HTTPS协议，默认443
+		let snapDir = "D:\\SnapDir"; //抓图存储路径
+		let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
+		let layout = objData.value.layout; //playMode指定模式的布局
+		let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
+		let encryptedFields = "secret"; //加密字段，默认加密领域为secret
+		let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
+		let showSmart = 0; //是否显示移动框线框，0-不显示，非0-显示
+		let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
+		// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
+		oWebControl
+			.JS_RequestInterface({
+				funcName: "init",
+				argument: JSON.stringify({
+					appkey: appkey, //API网关提供的appkey
+					secret: secret, //API网关提供的secret
+					ip: ip, //API网关IP地址
+					playMode: playMode, //播放模式（决定显示预览还是回放界面）
+					port: port, //端口
+					snapDir: snapDir, //抓图存储路径
+					videoDir: videoDir, //紧急录像或录像剪辑存储路径
+					layout: layout, //布局
+					enableHTTPS: enableHTTPS, //是否启用HTTPS协议
+					encryptedFields: encryptedFields, //加密字段
+					showToolbar: showToolbar, //是否显示工具栏
+					showSmart: showSmart, //是否显示智能信息
+					buttonIDs //自定义工具条按钮
+				})
+			})
+			.then(function (oData) {
+				oWebControl.JS_Resize(playWndWidth.value, playWndHeight.value); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+				if (callback) {
+					callback();
+				}
+				// 隐藏
+				// oWebControl.JS_HideWnd()
+			});
+	});
+};
+
+// RSA 加密
+let setEncrypt = value => {
+	let encrypt = new window.JSEncrypt();
+	encrypt.setPublicKey(pubKey);
+	return encrypt.encrypt(value);
+};
+// 获取公钥
+const getPubKey = callback => {
+	oWebControl
+		.JS_RequestInterface({
+			funcName: "getRSAPubKey",
+			argument: JSON.stringify({
+				keyLength: 1024
+			})
+		})
+		.then(function (oData) {
+			if (oData.responseMsg.data) {
+				pubKey = oData.responseMsg.data;
+				callback();
+			}
+		});
+};
+
+// 调用这个函数可进行视频播放
+// 视频预览功能
+const previewVideo = data => {
+	let cameraIndexCode = data; // 获取输入的监控点编号值，必填
+	let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
+	let transMode = 1; // 传输协议：0-UDP，1-TCP
+	let gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用
+	let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口）
+
+	oWebControl
+		.JS_RequestInterface({
+			funcName: "startPreview",
+			argument: JSON.stringify({
+				cameraIndexCode: cameraIndexCode, // 监控点编号
+				streamMode: streamMode, // 主子码流标识
+				transMode: transMode, // 传输协议
+				gpuMode: gpuMode, // 是否开启GPU硬解
+				wndId: wndId // 可指定播放窗口
+			})
+		})
+		.then(function () {
+			oWebControl.JS_SetWindowControlCallback({});
+		});
+};
+
+const handleHide = () => {
+    console.log('执行隐藏');
+	oWebControl.JS_HideWnd();
+};
+
+const handleShow = () => {
+    console.log('执行显示');
+	// 显示视频插件
+	oWebControl.JS_ShowWnd();
+};
+
+// 导出方法，以便父组件可以访问
+defineExpose({
+	handleHide,
+	handleShow
+});
+</script>
+ 
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/projectshow/components/map.ts b/src/views/sevenLargeScreen/projectshow/components/map.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/sevenLargeScreen/projectshow/index.vue b/src/views/sevenLargeScreen/projectshow/index.vue
new file mode 100644
index 0000000..6f03e88
--- /dev/null
+++ b/src/views/sevenLargeScreen/projectshow/index.vue
@@ -0,0 +1,58 @@
+<template>
+	<div class="project-box">
+		<!-- 地图背景 -->
+		<MapBack />
+
+		<div class="dialog-box">
+			<!-- <MapDialog /> -->
+		</div>
+
+		<!-- 底部 -->
+		<!-- <div class="project-but" v-if="!EntityMap.Mapswitch"></div> -->
+	</div>
+</template>
+
+<script lang="ts" setup>
+
+import { ref } from "vue";
+
+// store
+import { MapViewdata } from "@/stores/modules/map3D";
+const EntityMap = MapViewdata();
+
+
+// 背景
+import MapBack from "./components/MapBack.vue"
+// 弹框
+import MapDialog from "./components/MapDialog.vue";
+</script>
+
+<style lang="scss" scoped>
+.project-box {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	// background: skyblue;
+
+	.dialog-box {
+		width: 70%;
+		height: 72%;
+		position: absolute;
+		left: 48%;
+		top: 47%;
+		transform: translate(-50%, -50%);
+		// background: yellow;
+	}
+
+	// 底部
+	.project-but {
+        width: 100%;
+		height: 145px;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+		background: url("@/assets/images/mapimg/编组.png") no-repeat center center;
+		background-size: 100% 100%;
+	}
+}
+</style>
diff --git a/vite.config.ts b/vite.config.ts
index 2dfb6e3..c6051c3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,7 +15,7 @@ import optimizer from "vite-plugin-optimizer";
 // import AutoImport from "unplugin-auto-import/vite";
 // import Components from "unplugin-vue-components/vite";
 // import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
-// import { vitePluginMars3d } from "vite-plugin-mars3d";
+import { vitePluginMars3d } from "vite-plugin-mars3d";
 // @see: https://vitejs.dev/config/
 // export const BASE_IMAGE_URL = import.meta.env.NODE_ENV === "development" ? "./src" : "";
 //在vite.config.ts中增加
@@ -74,7 +74,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
 		},
 		plugins: [
 			vue(),
-			// vitePluginMars3d(),
+			vitePluginMars3d(),
 			createHtmlPlugin({
 				inject: {
 					data: {