diff --git a/package-lock.json b/package-lock.json
index 1ec645d..c7cb05c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,6 +56,7 @@
 			"devDependencies": {
 				"@commitlint/cli": "^17.0.1",
 				"@commitlint/config-conventional": "^17.0.0",
+				"@types/echarts": "^4.9.22",
 				"@types/node": "^17.0.31",
 				"@types/sortablejs": "^1.15.0",
 				"@typescript-eslint/eslint-plugin": "^5.22.0",
@@ -3186,6 +3187,15 @@
 			"resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz",
 			"integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ=="
 		},
+		"node_modules/@types/echarts": {
+			"version": "4.9.22",
+			"resolved": "https://mirrors.huaweicloud.com/repository/npm/@types/echarts/-/echarts-4.9.22.tgz",
+			"integrity": "sha512-7Fo6XdWpoi8jxkwP7BARUOM7riq8bMhmsCtSG8gzUcJmFhLo387tihoBYS/y5j7jl3PENT5RxeWZdN9RiwO7HQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/zrender": "*"
+			}
+		},
 		"node_modules/@types/eslint": {
 			"version": "8.40.0",
 			"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.40.0.tgz",
@@ -3287,6 +3297,12 @@
 			"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
 			"integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
 		},
+		"node_modules/@types/zrender": {
+			"version": "4.0.6",
+			"resolved": "https://mirrors.huaweicloud.com/repository/npm/@types/zrender/-/zrender-4.0.6.tgz",
+			"integrity": "sha512-1jZ9bJn2BsfmYFPBHtl5o3uV+ILejAtGrDcYSpT4qaVKEI/0YY+arw3XHU04Ebd8Nca3SQ7uNcLaqiL+tTFVMg==",
+			"dev": true
+		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
 			"version": "5.59.7",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.7.tgz",
@@ -18822,6 +18838,15 @@
 			"resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz",
 			"integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ=="
 		},
+		"@types/echarts": {
+			"version": "4.9.22",
+			"resolved": "https://mirrors.huaweicloud.com/repository/npm/@types/echarts/-/echarts-4.9.22.tgz",
+			"integrity": "sha512-7Fo6XdWpoi8jxkwP7BARUOM7riq8bMhmsCtSG8gzUcJmFhLo387tihoBYS/y5j7jl3PENT5RxeWZdN9RiwO7HQ==",
+			"dev": true,
+			"requires": {
+				"@types/zrender": "*"
+			}
+		},
 		"@types/eslint": {
 			"version": "8.40.0",
 			"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.40.0.tgz",
@@ -18923,6 +18948,12 @@
 			"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
 			"integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
 		},
+		"@types/zrender": {
+			"version": "4.0.6",
+			"resolved": "https://mirrors.huaweicloud.com/repository/npm/@types/zrender/-/zrender-4.0.6.tgz",
+			"integrity": "sha512-1jZ9bJn2BsfmYFPBHtl5o3uV+ILejAtGrDcYSpT4qaVKEI/0YY+arw3XHU04Ebd8Nca3SQ7uNcLaqiL+tTFVMg==",
+			"dev": true
+		},
 		"@typescript-eslint/eslint-plugin": {
 			"version": "5.59.7",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.7.tgz",
diff --git a/package.json b/package.json
index 7397a4f..8020e6b 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
 	"devDependencies": {
 		"@commitlint/cli": "^17.0.1",
 		"@commitlint/config-conventional": "^17.0.0",
+		"@types/echarts": "^4.9.22",
 		"@types/node": "^17.0.31",
 		"@types/sortablejs": "^1.15.0",
 		"@typescript-eslint/eslint-plugin": "^5.22.0",
diff --git a/src/config/config.ts b/src/config/config.ts
index c061128..0501177 100644
--- a/src/config/config.ts
+++ b/src/config/config.ts
@@ -28,6 +28,7 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
 // export const COMPANY: string = "zsbf"; //中水北方
 // export const COMPANY: string = "as"; //鞍山项目
 // export const COMPANY: string = "agjt"; //鞍钢集团
+export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏
 // export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
 // export const COMPANY: string = "slx"; //苏立信项目
 // export const COMPANY: string = "hfqc"; //合肥启程项目
@@ -37,4 +38,4 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
 // export const COMPANY: string = "phmw"; //鄱湖美湾医疗、医美产业集群项目 (需要去src\routers\modules\staticRouter.ts更换首页)
 // export const COMPANY: string = "xjnb"; // 新建宁波项目
 // export const COMPANY: string = "ahsa"; // 安徽水安项目
-export const COMPANY: string = "zkax"; // 中科安信项目
+// export const COMPANY: string = "zkax"; // 中科安信项目
diff --git a/src/config/staticMenu.ts b/src/config/staticMenu.ts
index 69aea8e..59b0e7c 100644
--- a/src/config/staticMenu.ts
+++ b/src/config/staticMenu.ts
@@ -1321,7 +1321,7 @@ export const ZHZRFMenu: Array<any> = [
 	},
 	
 ]; //中海·臻如府
-// 中科安信大屏
+
 export const ZKAXMenu: Array<any> = [
 	{
 		moduleName: "首页概览",
@@ -1343,4 +1343,4 @@ export const ZKAXMenu: Array<any> = [
 		moduleName: "进度计划",
 		modulePath: "/schedulePlan"
 	}
-];
\ No newline at end of file
+]; //中科安信大屏
\ No newline at end of file
diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index 09a23d5..012a71b 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -24,8 +24,8 @@ export const staticRouter: RouteRecordRaw[] = [
 	{
 		path: "/large",
 		name: "大屏",
-		component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
-		// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
+		// component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
+		component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
 		// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
 		children: [
 			{
@@ -269,6 +269,11 @@ export const staticRouter: RouteRecordRaw[] = [
 				path: "/commandScreen",
 				name: "指挥部大屏",
 				component: () => import("@/views/commandScreen/commandCenter/index.vue")
+			},
+			{
+				path: "/liveScreen",
+				name: "现场大屏",
+				component: () => import("@/views/commandScreen/liveScreen/index.vue")
 			}
 		],
 		meta: {
diff --git a/src/views/commandScreen/indexCommand.vue b/src/views/commandScreen/indexCommand.vue
index 5bb09ce..383559a 100644
--- a/src/views/commandScreen/indexCommand.vue
+++ b/src/views/commandScreen/indexCommand.vue
@@ -5,6 +5,7 @@
 			<div class="header">
 				<span class="projectTitle">
 					<p v-if="COMPANY === 'agjtCommand'">指挥部大屏</p>
+					<p v-if="COMPANY === 'agjtLive'">现场大屏</p>
 				</span>
 				<div class="leftIcon">
 					<div class="info">数字化项目监管平台</div>
@@ -69,6 +70,13 @@ let agjtCommandList = ref([
 		modulePath: "/commandScreen"
 	}
 ]);
+// 鞍山现场大屏
+let agjtLiveList = ref([
+	{
+		moduleName: "现场大屏",
+		modulePath: "/liveScreen"
+	}
+]);
 
 const itemList = ref([]);
 const activeTab = ref(0);
@@ -100,6 +108,10 @@ onMounted(async () => {
 		// menuList.value = AGJTCommandMenu;
 		menuList.value = agjtCommandList.value;
 	}
+	if (COMPANY === "agjtLive") {
+		// menuList.value = AGJTCommandMenu;
+		menuList.value = agjtLiveList.value;
+	}
 	//这里是跳转过来后免登录的操作，接收token 登录 懂了
 	//数据看板跳转免登录
 	if (window.location.href.indexOf("token") != -1) {
@@ -194,6 +206,9 @@ function jumpBgd() {
 	if(COMPANY === "agjtCommand"){
 		window.location.replace("http://47.93.215.234:9809" + "/#/login?token=" + store.token);
 	}
+	if(COMPANY === "agjtLive"){
+		window.location.replace("http://47.93.215.234:9809" + "/#/login?token=" + store.token);
+	}
 }
 </script>
 
diff --git a/src/views/commandScreen/liveScreen/centerBottomLeft.vue b/src/views/commandScreen/liveScreen/centerBottomLeft.vue
new file mode 100644
index 0000000..d96752a
--- /dev/null
+++ b/src/views/commandScreen/liveScreen/centerBottomLeft.vue
@@ -0,0 +1,40 @@
+<template>
+	<div class="centerBottomLeft">
+		<Card title="劳务实名制">
+			
+		</Card>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+import { ref, watch, onMounted } from "vue";
+import { getStageOption } from "@/api/modules/projectOverview";
+import { GlobalStore } from "@/stores";
+
+</script>
+
+<style lang="scss" scoped>
+.centerBottomLeft {
+	width: 100%;
+	height: 100%;
+}
+::v-deep .h-card .content {
+	height: 80%;
+	margin-top: 4%;
+}
+.notoDta {
+	bottom: 10%;
+	width: 20%;
+	left: 35%;
+	text-align: center;
+	position: absolute;
+	img {
+		width: 40%;
+	}
+	div {
+		color: #fff;
+		font-size: 14px;
+	}
+}
+</style>
diff --git a/src/views/commandScreen/liveScreen/centerBottomRight.vue b/src/views/commandScreen/liveScreen/centerBottomRight.vue
new file mode 100644
index 0000000..de1ed4a
--- /dev/null
+++ b/src/views/commandScreen/liveScreen/centerBottomRight.vue
@@ -0,0 +1,40 @@
+<template>
+	<div class="centerBottomRight">
+		<Card title="质量待办">
+			
+		</Card>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+import { ref, watch, onMounted } from "vue";
+import { getStageOption } from "@/api/modules/projectOverview";
+import { GlobalStore } from "@/stores";
+
+</script>
+
+<style lang="scss" scoped>
+.centerBottomRight {
+	width: 100%;
+	height: 100%;
+}
+::v-deep .h-card .content {
+	height: 80%;
+	margin-top: 4%;
+}
+.notoDta {
+	bottom: 10%;
+	width: 20%;
+	left: 35%;
+	text-align: center;
+	position: absolute;
+	img {
+		width: 40%;
+	}
+	div {
+		color: #fff;
+		font-size: 14px;
+	}
+}
+</style>
diff --git a/src/views/commandScreen/liveScreen/centerTop.vue b/src/views/commandScreen/liveScreen/centerTop.vue
new file mode 100644
index 0000000..ce0c36a
--- /dev/null
+++ b/src/views/commandScreen/liveScreen/centerTop.vue
@@ -0,0 +1,374 @@
+<template>
+	<div class="centerTop">
+		<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>
+	</div>
+</template>
+
+<script setup lang="ts">
+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 => {
+		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 (showLoading: boolean) => {
+	let res: any = await selectLiveVideoListApi({
+		projectSn: store.sn
+	},showLoading);
+	if(res.result && res.result.extend1){
+		videoList.value = JSON.parse(res.result.extend1).result.videoList;
+		// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
+		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;
+}
+
+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) {
+	let fileType = file.type.split("/")[0];
+	if (fileType == "video") {
+		return true;
+	} else {
+		fileTypeFail("请选择正确的视频文件"); //"请选择正确的文件"
+		return false;
+	}
+}
+
+// 图片文件上传 之前
+function handleBeforeUploadPic(file: any) {
+	let fileType = file.type.split("/")[0];
+	if (fileType == "image") {
+		return true;
+	} else {
+		fileTypeFail("请选择正确的图片文件"); //"请选择正确的文件"
+		return false;
+	}
+}
+
+//上传失败
+function handleError(file: any) {
+	uploadFail(); //"上传失败，请重试"
+}
+// 效果图上传成功
+function handleSuccess(file: any) {
+	if (file.code == 200 || file.status == "SUCCESS") {
+		let url = file.data[0].imageUrl;
+		saveEffectData(url);
+	}
+}
+
+// 视频上传成功
+function handleSuccessTwo(file: any) {
+	if (file.code == 200 || file.status == "SUCCESS") {
+		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) => {
+		if (res.result) {
+			picUrl.value = res.result.configValue;
+		}
+	});
+}
+// //保存或删除宣传视频
+function saveOrDeleteVideo(url) {
+	editProjectInfo({
+		projectSn: store.sn,
+		videoUrl: url
+	}).then(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>
+.centerTop {
+	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/commandScreen/liveScreen/ckplayerComp.vue b/src/views/commandScreen/liveScreen/ckplayerComp.vue
new file mode 100644
index 0000000..9ffc5aa
--- /dev/null
+++ b/src/views/commandScreen/liveScreen/ckplayerComp.vue
@@ -0,0 +1,41 @@
+<!--ckplayer 视频播放-->
+<template>
+	<div style="width: 100%;height: 100%">
+		<video :id="'videoItem' + name" muted controls autoplay style="width: 100%;height: 100%;object-fit: fill;" />
+	</div>
+</template>
+
+<script>
+import Srs from "@/assets/js/srs.sdk";
+export default {
+	props: ["videoUrls", "autoPlay", "poster", "deviceIp", "name"],
+	data() {
+		return {
+			player: "",
+			rtcPlayer: null
+		};
+	},
+	mounted: function () {
+		this.player = document.getElementById("videoItem" + this.name);
+		//方法一：使用srs.sdk.js
+		this.rtcPlayer = new Srs.SrsRtcWhipWhepAsync();
+		this.rtcPlayer.play(this.videoUrls);
+		// video标签
+		this.player.srcObject = this.rtcPlayer.stream;
+		// 方法二：使用jswebrtc.min.js
+		// new JSWebrtc.Player(this.url, { video: player, autoplay: true, });
+	},
+	beforeDestroy: function () {
+		this.rtcPlayer.close();
+	},
+	watch: {
+		// watch第一次绑定值的时候不会执行监听，修改数据才会触发函数
+		videoUrls(newVal,oldVal) {
+			this.rtcPlayer = new Srs.SrsRtcWhipWhepAsync();
+			this.rtcPlayer.play(newVal);
+			this.player.srcObject = this.rtcPlayer.stream;
+		}
+	},
+	methods: {}
+};
+</script>
diff --git a/src/views/commandScreen/liveScreen/index.vue b/src/views/commandScreen/liveScreen/index.vue
new file mode 100644
index 0000000..e7e6dd0
--- /dev/null
+++ b/src/views/commandScreen/liveScreen/index.vue
@@ -0,0 +1,146 @@
+<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>
+			<div class="centerBottom">
+				<centerBottomLeft :projectData="projectData" class="centerBottomLeft" ref="centerBottomLeftRef"></centerBottomLeft>
+				<centerBottomRight :projectData="projectData" class="centerBottomRight" ref="centerBottomRightRef"></centerBottomRight>
+			</div>
+		</div>
+		<div class="right">
+			<rightTop class="rightTop" ref="rightTopRef"></rightTop>
+			<rightBottom class="rightBottom" ref="rightBottomRef"></rightBottom>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import leftTop from "@/views/commandScreen/liveScreen/leftTop.vue";
+import leftCenter from "@/views/commandScreen/liveScreen/leftCenter.vue";
+import leftBottom from "@/views/commandScreen/liveScreen/leftBottom.vue";
+import centerTop from "@/views/commandScreen/liveScreen/centerTop.vue";
+import centerBottomLeft from "@/views/commandScreen/liveScreen/centerBottomLeft.vue";
+import centerBottomRight from "@/views/commandScreen/liveScreen/centerBottomRight.vue";
+import rightTop from "@/views/commandScreen/liveScreen/rightTop.vue";
+import rightBottom from "@/views/commandScreen/liveScreen/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 (showLoading: boolean) => {
+	const res = await getProjectDetail({ projectSn: store.sn },showLoading);
+	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 centerBottomLeftRef = ref();
+const rightTopRef = ref();
+const rightBottomRef = ref();
+const callChildFn = async () => {
+	nextTick( async ()=>{
+		leftTopRef.value.projectTypeEnum()
+		centerTopRef.value.getQueryBySnData()
+		centerBottomLeftRef.value.getProgressOption()
+		rightTopRef.value.getSafeInfo()
+		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: 35.25%;
+		}
+	}
+	.center {
+		width: 46%;
+		margin: 0 1%;
+
+		.centerTop {
+			height: 66%;
+			margin-bottom: 2.1%;
+		}
+		.centerBottom{
+			height: 100%;
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			.centerBottomLeft {
+				width: 49%;
+				height: 35.23%;
+			}
+			.centerBottomRight {
+				width: 49%;
+				height: 35.23%;
+			}
+		}
+	}
+	.right {
+		width: 26%;
+
+		.rightTop {
+			height: 32%;
+		}
+		.rightBottom {
+			height: 78.636%;
+			margin: 3% 0 0 0;
+		}
+	}
+}
+</style>
diff --git a/src/views/commandScreen/liveScreen/leftBottom.vue b/src/views/commandScreen/liveScreen/leftBottom.vue
new file mode 100644
index 0000000..7ca8a29
--- /dev/null
+++ b/src/views/commandScreen/liveScreen/leftBottom.vue
@@ -0,0 +1,136 @@
+<template>
+	<div class="leftBottom">
+		<Card title="特殊作业情况">
+			<div class="mainContainer">
+				<div id="pieEchart" style="width:100%;height:100%"></div>
+			</div>
+		</Card>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+import { ref, onMounted, watch } from "vue";
+import * as echarts from 'echarts';
+
+function drawPie(){
+	type EChartsOption = echarts.EChartsOption;
+
+	var chartDom = document.getElementById('pieEchart')!;
+	var myChart = echarts.init(chartDom);
+	var option: EChartsOption;
+
+	option = {
+		tooltip: {
+			trigger: 'item',
+			formatter: '{a} <br/>{b}: {c} ({d}%)'
+		},
+		legend: {
+			data: [ 'Direct', 'Marketing', 'Search Engine', 'Email', 'Union Ads', 'Video Ads', 'Baidu', 'Google', 'Bing', 'Others' ]
+		},
+		
+		series: [
+			{
+				grid:{
+				left: '5%',
+				right: '5%',
+				bottom: '5%',
+				containLabel:true
+			},
+			name: 'Access From',
+			type: 'pie',
+			selectedMode: 'single',
+			radius: [0, '30%'],
+			label: {
+				position: 'inner',
+				fontSize: 14
+			},
+			labelLine: {
+				show: false
+			},
+			data: [
+				{ value: 1548, name: 'Search Engine' },
+				{ value: 775, name: 'Direct' },
+				{ value: 679, name: 'Marketing', selected: true }
+			]
+			},
+			{
+			name: 'Access From',
+			type: 'pie',
+			radius: ['45%', '60%'],
+			labelLine: {
+				length: 1
+			},
+			label: {
+				formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
+				backgroundColor: '#F6F8FC',
+				borderColor: '#8C8D8E',
+				borderWidth: 1,
+				borderRadius: 3,
+
+				rich: {
+				a: {
+					color: '#6E7079',
+					lineHeight: 10,
+					align: 'center'
+				},
+				hr: {
+					borderColor: '#8C8D8E',
+					width: '100%',
+					borderWidth: 1,
+					height: 0
+				},
+				b: {
+					color: '#4C5058',
+					fontSize: 10,
+					fontWeight: 'bold',
+					lineHeight: 12
+				},
+				per: {
+					color: '#fff',
+					backgroundColor: '#4C5058',
+					padding: [1, 1],
+					borderRadius: 1
+				}
+				}
+			},
+			data: [
+				{ value: 1048, name: 'Baidu' },
+				{ value: 335, name: 'Direct' },
+				{ value: 310, name: 'Email' },
+				{ value: 251, name: 'Google' },
+				{ value: 234, name: 'Union Ads' },
+				{ value: 147, name: 'Bing' },
+				{ value: 135, name: 'Video Ads' },
+				{ value: 102, name: 'Others' }
+			]
+			}
+		]
+		
+	};
+
+	option && myChart.setOption(option);
+}
+
+onMounted( async () => {
+	drawPie()
+});
+</script>
+
+<style lang="scss" scoped>
+.leftBottom {
+	width: 100%;
+	height: 100%;
+	.mainContainer{
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	
+}
+::v-deep .h-card .content {
+	height: 80%;
+}
+</style>
diff --git a/src/views/commandScreen/liveScreen/leftCenter.vue b/src/views/commandScreen/liveScreen/leftCenter.vue
new file mode 100644
index 0000000..139ddc0
--- /dev/null
+++ b/src/views/commandScreen/liveScreen/leftCenter.vue
@@ -0,0 +1,58 @@
+<template>
+	<div class="leftCenter">
+		<Card title="AI报警情况">
+			<div class="mainContainer">
+				<div class="imgBox"><img src="@\assets\images\vehicleManagement\goCar.png"/></div>
+				<div class="textBox">
+					<div>报警位置：东南口</div>
+					<div>报警事件：2024-03-01 12:00:00</div>
+				</div>
+			</div>
+		</Card>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+import { COMPANY } from "@/config/config";
+import { ref, onMounted, watch } from "vue";
+import { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor";
+const store = GlobalStore();
+// ts
+
+onMounted( async () => {
+});
+</script>
+
+<style lang="scss" scoped>
+.leftCenter {
+	width: 100%;
+	height: 100%;
+	.mainContainer{
+		width: calc(100% - 20px);
+		height: calc(100% - 20px);
+		color: #fff;
+		padding: 10px;
+		.imgBox{
+			width: 100%;
+			height: 85%;
+			img{
+				width: 100%;
+				height:100%;
+				background-size: 100% 100%;
+			}
+		}
+		.textBox{
+			height: 15%;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			line-height: 22px;
+		}
+	}
+}
+::v-deep .h-card .content {
+	height: 80%;
+}
+</style>
diff --git a/src/views/commandScreen/liveScreen/leftTop.vue b/src/views/commandScreen/liveScreen/leftTop.vue
new file mode 100644
index 0000000..3b947f4
--- /dev/null
+++ b/src/views/commandScreen/liveScreen/leftTop.vue
@@ -0,0 +1,140 @@
+<template>
+	<div class="leftTop">
+		<Card title="承包商项目信息">
+			<!-- <div class="projectInfo">
+				<div><span>项目名称：</span> {{ projectData.projectName || "" }}</div>
+				<div :title="projectLocal"><span>项目地址：</span> {{ projectLocal }}</div>
+				<div><span>项目经理：</span> {{ projectData.projectManage || "" }}</div>
+				<div><span>联系电话：</span> {{ projectData.projectTel || "" }}</div>
+				<div><span>建筑面积：</span> {{ projectData.projectAcreage || "" }} ㎡</div>
+				<div><span>开工日期：</span> {{ projectData.startWorkDate || "" }}</div>
+				<div><span>项目编号：</span> {{ projectData.projectNumber || "" }}</div>
+				<div><span>工程类别：</span> {{ projectData.projectType &&  projectTypeEnumList.length > 0 ? projectTypeEnumList[projectData.projectType - 1].name : "" }}</div>
+			</div> -->
+			<div class="mainContainer">
+				<div>承包商名称：辽宁五瞏</div>
+				<div class="lineBox"><div class="boxInner1">施工区域：东北角一区</div>	<div class="boxInner2">项目编号：002</div></div>
+				<div class="lineBox"><div class="boxInner1">项目经理：王海龙</div>	<div class="boxInner2">项目类型：epc总承包</div></div>
+				<div class="lineBox"><div class="boxInner1">联系电话：13312545623</div>	<div class="boxInner2">竣工日期：2024-03-01</div></div>
+				<div class="lineBox"><div class="boxInner1">建筑面积：12457㎡</div>	<div class="boxInner2">合同总额：230万元</div></div>
+				<div class="lineBox"><div class="boxInner1">投资总额：12457万元</div>	<div class="boxInner2">工程类别：矿山</div></div>
+				<div class="lineBox"><div class="boxInner1">开工日期：2024-03-01</div>	<div class="boxInner2">结构类型：混合结构</div></div>
+				<div class="lineBox"><div class="boxInner1">项目编号：鞍高开项备[2021]23号)</div>	<div class="boxInner2">施工阶段：主体施工</div></div>
+				<div class="lineBox"><div class="boxInner1">工程类别：矿山</div>	<div class="boxInner2">工程状态</div></div>
+			</div>
+		</Card>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+import { ref, onMounted, watch } from "vue";
+import { getStageOption } from "@/api/modules/projectOverview";
+
+// ts
+type Props = {
+	projectData?: any; // 传入项目信息
+};
+// withDefaults 定义默认值(传入的数据类型同默认值)
+const props = withDefaults(defineProps<Props>(), {
+	projectData: {}
+});
+// 项目信息
+const projectData = ref({} as any);
+
+const projectLocal = ref("" as any);
+const store = GlobalStore();
+const projectTypeEnumList:any = ref([]); //工程类别
+// 工程类别字典数据
+const projectTypeEnum = async () => {
+	const res: any = await getStageOption({ dictionaryEncoding: "project_type", projectSn: store.sn });
+	if (res.result.length > 0) {
+		let newArray = res.result.map((item: any) => {
+			return {
+				name: item.name,
+				id: Number(item.data)
+			};
+		});
+		projectTypeEnumList.value = newArray
+	} else {
+		projectTypeEnumList.value = []
+	}
+};
+//将方法暴露给父组件
+defineExpose({
+	projectTypeEnum
+})
+onMounted( async () => {
+	await projectTypeEnum();
+})
+watch(
+	() => props.projectData,
+	newVal => {
+		if (newVal) {
+			// props.xData = newVal;
+			projectData.value = newVal;
+			projectLocal.value =
+				projectData.value.provinceName +
+				projectData.value.cityName +
+				projectData.value.areaName +
+				projectData.value.projectAddress;
+		}
+	}
+);
+</script>
+
+<style lang="scss" scoped>
+.leftTop {
+	width: 100%;
+	height: 100%;
+	.mainContainer{
+		color: #fff;
+		padding: 10px;
+		.lineBox{
+			// background-color: #fff;
+			line-height: 18px;
+			height: 18px;
+			display: flex;
+			.boxInner1{
+				// width: 60%;
+				width: 50%;
+			}
+			.boxInner2{
+				// width: 40%;
+				width: 50%;
+			}
+		}
+	}
+
+
+
+
+
+	// .projectInfo {
+	// 	width: 100%;
+	// 	height: 100%;
+	// 	color: #fff;
+	// 	padding: 2% 0 0 4%;
+
+	// 	div {
+	// 		width: 95%;
+	// 		height: 12%;
+	// 		font-size: 15px;
+	// 		white-space: nowrap; //单行
+	// 		overflow: hidden;
+	// 		text-overflow: ellipsis;
+	// 		span {
+	// 			margin-right: 3%;
+	// 			color: #ccc;
+	// 		}
+	// 	}
+	// }
+}
+::v-deep .h-card .content {
+	height: 80%;
+}
+::v-deep .h-card {
+	position: relative;
+}
+</style>
diff --git a/src/views/commandScreen/liveScreen/rightBottom.vue b/src/views/commandScreen/liveScreen/rightBottom.vue
new file mode 100644
index 0000000..a55ebbf
--- /dev/null
+++ b/src/views/commandScreen/liveScreen/rightBottom.vue
@@ -0,0 +1,30 @@
+<template>
+	<div class="rightBottom">
+		<Card title="安全待办">
+			
+		</Card>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { GlobalStore } from "@/stores";
+import { getCurrentDayAirQualityApi } from "@/api/modules/projectOverview";
+import { ref, onMounted, reactive } from "vue";
+// import * as echarts from "echarts";
+import Card from "@/components/card.vue";
+const store = GlobalStore();
+
+onMounted( async () => {
+});
+</script>
+
+<style lang="scss" scoped>
+.rightBottom {
+	width: 100%;
+	height: 100%;
+}
+
+::v-deep .h-card .content {
+	height: 80%;
+}
+</style>
diff --git a/src/views/commandScreen/liveScreen/rightTop.vue b/src/views/commandScreen/liveScreen/rightTop.vue
new file mode 100644
index 0000000..d5e4311
--- /dev/null
+++ b/src/views/commandScreen/liveScreen/rightTop.vue
@@ -0,0 +1,31 @@
+<template>
+	<div class="rightTop">
+		<Card title="应急记录">
+
+		</Card>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Card from "@/components/card.vue";
+import { onMounted, ref } from "vue";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+import * as echarts from "echarts";
+
+onMounted(async () => {
+});
+</script>
+
+<style scoped>
+.rightTop {
+	width: 100%;
+	height: 100%;
+}
+::v-deep .h-card .content {
+	height: 80%;
+}
+::v-deep .h-card {
+	position: relative;
+}
+</style>