2024-9-23 路由-高德-摄像头

.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='

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",

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"

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: "临边防护网",

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;

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,9 +17,7 @@
 					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">
@@ -37,7 +33,12 @@
 					</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')
+	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;
 	}
 });

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>

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>

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">
@@ -29,10 +36,10 @@
 					<img src="@/assets/images/dustNoise/dpIcon.png" alt="" />
 					</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">
@@ -45,8 +52,10 @@
 				<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,9 +73,16 @@
 					</div>
 				</div>
 			</div>
+
+			<!-- 原项目 -->
+			<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 }">
+						<div
+							class="subMenu"
+							:index="item.modulePath"
+							:class="{ active: activeTab === item.modulePath }"
+						>
 							<span @click="navigateTo(item, 1)">{{ item.moduleName }}</span>
 						</div>
 					</div>
@@ -81,29 +97,50 @@
 									:index="data.companyPath"
 									@click="navigateTo(data, 2)"
 								>
-								<span style="white-space: nowrap" :class="{ active2: activeTab2 === data.companyPath }">{{ data.menuName }}</span>
+									<span
+										style="white-space: nowrap"
+										:class="{ active2: activeTab2 === data.companyPath }"
+									>{{ data.menuName }}</span>
 								</div>
 							</div>
 						</el-scrollbar>
 					</div>
 				</div>
 				<div class="contentDate" v-if="itemList != null && itemList.length >= 1">
-				<span
-					>自{{ projectTimeInfo.contractPeriodStartTime }}起开始计算，至今日{{ nowDate }}为<span class="numColor">{{
+					<span>
+						自{{ projectTimeInfo.contractPeriodStartTime }}起开始计算，至今日{{ nowDate }}为
+						<span class="numColor">
+							{{
 							projectPassDay
-					}}</span
-					>个日历天</span
-				>
+							}}
+						</span>个日历天
+					</span>
 				</div>
 				<div class="dataBoardContent">
 					<router-view></router-view>
 				</div>
+			</template>
+
+			<div v-show="!EntityMap.Mapswitch" class="map-box">
+				<ProjectShow />
+			</div>
 		</div>
 		<!-- </div> -->
 	</ScaleBox>
 </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;

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>

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>

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>

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: {