feat:完成现场大屏中上部分安全教育静态页面开发

fix:优化现场大屏左上部分承包商项目信息布局、优化现场大屏左下部分特殊作业情况嵌套环形图、调整现场大屏中下右部分质量待办、右上部分应急记录以及右下部分安全待办

.env.development

@@ -5,7 +5,7 @@ NODE_ENV = 'development'
 # 后端本地
 # VITE_API_URL = 'http://192.168.34.221:19111'
 # VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
-# VITE_API_URL = 'http://182.90.224.237:51234'  #雄哥远程
+VITE_API_URL = 'http://182.90.224.237:51234'  #雄哥远程
 # VITE_API_URL = 'http://192.168.34.221:28889'
 # VITE_API_URL = 'http://121.196.214.246/api'
 # VITE_API_URL = 'http://jxj.zhgdyun.com:100'
@@ -24,7 +24,7 @@ NODE_ENV = 'development'
 # VITE_API_URL = 'http://182.90.224.237:15551'
 # agjt
 # VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
-VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
+# VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
 # VITE_API_URL = 'http://jxj.zhgdyun.com:19812'
 # 苏立信
 # VITE_API_URL = 'http://101.43.164.214:11111'

src/config/config.ts

@@ -28,9 +28,9 @@ 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 = "agjtLive"; //鞍钢集团现场大屏
 // export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
-export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
+// export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
 // export const COMPANY: string = "slx"; //苏立信项目
 // export const COMPANY: string = "hfqc"; //合肥启程项目
 // export const COMPANY: string = "jsyc"; // 江苏盐城项目

src/routers/modules/staticRouter.ts

@@ -25,8 +25,8 @@ export const staticRouter: RouteRecordRaw[] = [
 		path: "/large",
 		name: "大屏",
 		// // component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
-		component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
-		// component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
+		// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
+		component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
 		// component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
 		// component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
 		// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
@@ -273,6 +273,11 @@ export const staticRouter: RouteRecordRaw[] = [
 				name: "指挥部大屏",
 				component: () => import("@/views/commandScreen/commandCenter/index.vue")
 			},
+			{
+				path: "/agjtLiveScreen",
+				name: "鞍钢现场大屏",
+				component: () => import("@/views/agjtLiveScreen/liveScreen/index.vue")
+			},
 			{
 				path: "/agjtProjectKanban",
 				name: "鞍钢项目看板大屏",

src/views/agjtLiveScreen/liveScreen/centerBottomRight.vue

@@ -2,26 +2,8 @@
 	<div class="centerBottomRight">
 		<Card title="质量待办">
 			<div class="mainContainer">
-				<div class="itemBox">
-					<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝的疯狂世界东方螺丝钉解放数量大幅减少的ask大理石看得见啊来看看是多久啊老师的课</div>
-					<div class="itemLine2">整改结果：<span style="color:#19bfef">已逾期</span></div>
-					<div class="itemLine3">
-						<div class="line3Inner1">整改人：<span style="color:#19bfef">李四</span></div>
-						<div class="line3Inner2">检查人：<span style="">张三</span></div>
-						<div class="line3Inner3">检查时间：<span style="">2024-03-01 12:00:00</span></div>
-					</div>
-				</div>
-				<div class="itemBox">
-					<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝的疯狂世界东方螺丝钉解放数量大幅减少的ask大理石看得见啊来看看是多久啊老师的课</div>
-					<div class="itemLine2">整改结果：<span style="color:#19bfef">已逾期</span></div>
-					<div class="itemLine3">
-						<div class="line3Inner1">整改人：<span style="color:#19bfef">李四</span></div>
-						<div class="line3Inner2">检查人：<span style="">张三</span></div>
-						<div class="line3Inner3">检查时间：<span style="">2024-03-01 12:00:00</span></div>
-					</div>
-				</div>
-				<div class="itemBox">
-					<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝的疯狂世界东方螺丝钉解放数量大幅减少的ask大理石看得见啊来看看是多久啊老师的课</div>
+				<div class="itemBox" v-for="(item,i) in 3" :key="i">
+					<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝</div>
 					<div class="itemLine2">整改结果：<span style="color:#19bfef">已逾期</span></div>
 					<div class="itemLine3">
 						<div class="line3Inner1">整改人：<span style="color:#19bfef">李四</span></div>

src/views/agjtLiveScreen/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>

src/views/agjtLiveScreen/liveScreen/centerTop.vue

@@ -1,85 +1,36 @@
 <template>
-	<div class="centerTop">
+	<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"
-				>
-					<!-- 更换视频 -->
+			<div class="set-icon" @click="openPeopleCountDialog"></div>
+			<div class="videoBox" @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>
+				</el-upload> -->
+				<!-- BASEURL + '/image/' + projectData.videoUrl -->
+				<video
+					src="https://v6.huanqiucdn.cn/4394989evodtranscq1500012236/77e4bc8a1253642698931109862/v.f100830.mp4"
+					class="videos"
+					autoplay
+					controls
+					loop
+				></video>
 			</div>
 		</Card>
+		<setVideoDialog ref="partyBuildRef"></setVideoDialog>
 	</div>
 </template>
 
 <script setup lang="ts">
 import Card from "@/components/card.vue";
+import setVideoDialog from "@/components/setVideoDialog.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();
@@ -95,9 +46,18 @@ const props = withDefaults(defineProps<Props>(), {
 // 项目信息
 const projectData = ref({} as any);
 
+// 弹窗
+const partyBuildRef = ref();
+const openPeopleCountDialog = () => {
+	partyBuildRef.value.openDialog({
+		title: "配置视频"
+	});
+};
+
 watch(
 	() => props.projectData,
 	newVal => {
+		// console.log(newVal, "newVal");
 		if (newVal) {
 			// props.xData = newVal;
 			projectData.value = newVal;
@@ -127,16 +87,18 @@ let topText = ref([
 	{ id: 2, title: "宣传视频", isActive: true },
 	{ id: 3, title: "效果图", isActive: false }
 ]);
-const getVideoList = async (showLoading: boolean) => {
+const getVideoList = async () => {
 	let res: any = await selectLiveVideoListApi({
 		projectSn: store.sn
-	},showLoading);
-	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");
 		// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
 		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++) {
@@ -168,6 +130,7 @@ function activeBtn(item: any) {
 		tabIndex.value = item.id;
 	}
 	showVideo.value = item.id;
+	console.log(showVideo.value);
 }
 
 const uploadFail = () => {
@@ -196,6 +159,7 @@ const uploadSuccess = () => {
 
 // 视频文件上传 之前
 function handleBeforeUploadVideo(file: any) {
+	console.log(file, "上传之前");
 	let fileType = file.type.split("/")[0];
 	if (fileType == "video") {
 		return true;
@@ -207,6 +171,7 @@ function handleBeforeUploadVideo(file: any) {
 
 // 图片文件上传 之前
 function handleBeforeUploadPic(file: any) {
+	console.log(file, "上传之前");
 	let fileType = file.type.split("/")[0];
 	if (fileType == "image") {
 		return true;
@@ -218,11 +183,14 @@ function handleBeforeUploadPic(file: any) {
 
 //上传失败
 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);
 	}
@@ -231,6 +199,7 @@ function handleSuccess(file: any) {
 // 视频上传成功
 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);
@@ -258,6 +227,7 @@ function getQueryBySnData() {
 		projectSn: store.sn,
 		showType: 3
 	}).then((res: any) => {
+		console.log(res, "效果图");
 		if (res.result) {
 			picUrl.value = res.result.configValue;
 		}
@@ -269,6 +239,7 @@ function saveOrDeleteVideo(url) {
 		projectSn: store.sn,
 		videoUrl: url
 	}).then(res => {
+		console.log("保存成功", res);
 		uploadSuccess(); //"上传成功"
 		projectData.value.videoUrl = url;
 	});
@@ -276,62 +247,48 @@ 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;
 	}
 });
 </script>
 
 <style lang="scss" scoped>
-.centerTop {
+.leftTop {
 	width: 100%;
 	height: 100%;
 	position: relative;
+	.set-icon {
+		width: 28px;
+		height: 28px;
+		background: url("@/assets/images/overviewScreen/set-icon.png") no-repeat;
+		background-size: 100% 100%;
+		position: absolute;
+		top: 1.2%;
+		right: 0;
+		cursor: pointer;
+	}
 	.videoBox {
 		width: 100%;
-		height: 92%;
-		margin-top: 8%;
-		background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
-		background-size: 100% 100%;
+		height: 100%;
+		// 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%;
+			width: 100%;
+			height: 100%;
+			object-fit: fill;
+			z-index: 9;
+			// 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 {
@@ -361,6 +318,7 @@ onMounted(async () => {
 	padding: 0 30%;
 	display: flex;
 	justify-content: space-around;
+
 	.tab-box {
 		font-size: 16px;
 		color: rgba(255, 255, 255, 0.3);
@@ -368,7 +326,9 @@ onMounted(async () => {
 	}
 }
 
-::v-deep .h-card .content {
+:deep(.h-card .content) {
+	margin-top: 1%;
+	height: 92%;
 	background: none;
 }
 </style>

src/views/agjtLiveScreen/liveScreen/leftBottom.vue

@@ -12,7 +12,22 @@
 import Card from "@/components/card.vue";
 import { ref, onMounted, watch } from "vue";
 import * as echarts from 'echarts';
+import { da } from "element-plus/es/locale";
 
+let tempList = ref([
+	{name:'高处作业',value:12,doing:10,per:'12.5'},{name:'断路作业',value:12,doing:10,per:'12.5'},{name:'吊装安全',value:12,doing:10,per:'12.5'},{name:'受限空间',value:12,doing:10,per:'12.5'},
+	{name:'动火作业',value:12,doing:10,per:'12.5'},{name:'盲板抽堵',value:12,doing:10,per:'12.5'},{name:'动土作业',value:12,doing:10,per:'12.5'},{name:'临时用电',value:12,doing:10,per:'12.5'},
+] as any)
+let tempList2 = ref([
+	{ value: 123, name: '高处作业' },
+	{ value: 123, name: '断路作业' },
+	{ value: 123, name: '吊装安全' },
+	{ value: 123, name: '受限空间' },
+	{ value: 123, name: '动火作业' },
+	{ value: 123, name: '盲板抽堵' },
+	{ value: 123, name: '动土作业' },
+	{ value: 123, name: '临时用电' }
+] as any)
 function drawPie(){
 	type EChartsOption = echarts.EChartsOption;
 
@@ -23,87 +38,102 @@ function drawPie(){
 	option = {
 		tooltip: {
 			trigger: 'item',
-			formatter: '{a} <br/>{b}: {c} ({d}%)'
+			// formatter: '{a} <br/>{b}: {c} ({d}%)'
+			formatter: function(params: any){
+				return "<div style='width:100px;height:65px'>"+
+							"<div>"+tempList.value[params.dataIndex].name+"  "+ tempList.value[params.dataIndex].per +"%</div>"+
+							"<div>已完成"+tempList.value[params.dataIndex].value+"</div>"+
+							"<div>进行中"+tempList.value[params.dataIndex].doing +"</div>"+
+						"</div>"
+			},
 		},
-		legend: {
-			data: [ 'Direct', 'Marketing', 'Search Engine', 'Email', 'Union Ads', 'Video Ads', 'Baidu', 'Google', 'Bing', 'Others' ]
-		},
-		
+		// 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 }
-			]
+					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: 96, name: '进行中' },
+					{ value: 80, name: '已完成' },
+				]
 			},
 			{
-			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'
+				name: 'Access From',
+				type: 'pie',
+				radius: ['45%', '60%'],
+				labelLine: {
+					length: 1
 				},
-				hr: {
-					borderColor: '#8C8D8E',
-					width: '100%',
-					borderWidth: 1,
-					height: 0
+				label: {
+					// formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
+					formatter: function(params: any){
+						return '{name|'+ tempList.value[params.dataIndex].name +'}{abg|}  {per|'+ tempList.value[params.dataIndex].per +'%}\n{hr|}\n已完成：' 
+						+ tempList.value[params.dataIndex].value+'  进行中：' + tempList.value[params.dataIndex].doing
+					},
+					// backgroundColor: '#1c447b',
+					backgroundColor: 'rgba(28,68,123,0.5)',
+					borderRadius: 3,
+					textStyle:{
+						color: '#FFF'
+					},
+					rich: {
+						name:{
+							align: 'center',
+							lineHeight: 10
+						},
+						// a: {
+						// 	color: '#fff',
+						// 	lineHeight: 10,
+						// 	align: 'center'
+						// },
+						hr: {
+							borderColor: '#8C8D8E',
+							width: '100%',
+							borderWidth: 1,
+							height: 0
+						},
+						// b: {
+						// 	color: '#fff',
+						// 	fontSize: 10,
+						// 	fontWeight: 'bold',
+						// 	lineHeight: 12
+						// },
+						per: {
+							color: '#fff',
+							backgroundColor: '#4C5058',
+							padding: [1, 1],
+							borderRadius: 1
+						}
+					}
 				},
-				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' }
-			]
+				data: tempList2.value
+				// data: [
+				// 	{ value: 104, name: '高处作业' },
+				// 	{ value: 335, name: '断路作业' },
+				// 	{ value: 310, name: '吊装安全' },
+				// 	{ value: 251, name: '受限空间' },
+				// 	{ value: 234, name: '动火作业' },
+				// 	{ value: 147, name: '盲板抽堵' },
+				// 	{ value: 135, name: '动土作业' },
+				// 	{ value: 102, name: '临时用电' }
+				// ]
 			}
 		]
 		

src/views/agjtLiveScreen/liveScreen/leftTop.vue

@@ -13,14 +13,30 @@
 			</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 class="lineBox">
+					<div class="boxInner1">施工区域：东北角一区</div><div class="boxInner2">工程状态：在建</div>
+				</div>
+				<div class="lineBox">
+					<div class="boxInner1">项目编号：鞍高开项备[2021]23号</div><div class="boxInner2">项目类编号：002</div>
+				</div>
+				<div class="lineBox">
+					<div class="boxInner1">项目经理：王海龙</div><div class="boxInner2">联系电话：13312545623</div>
+				</div>
+				<div class="lineBox">
+					<div class="boxInner1">项目类型：epc总承包</div><div class="boxInner2">工程类别：矿山</div>
+				</div>
+				<div class="lineBox">
+					<div class="boxInner1">开工日期：2024-03-01</div><div class="boxInner2">竣工日期：2024-03-01</div>
+				</div>
+				<div class="lineBox">
+					<div class="boxInner1">施工阶段：主体施工</div><div class="boxInner2">结构类型：混合结构</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>
 		</Card>
 	</div>
@@ -89,8 +105,13 @@ watch(
 	width: 100%;
 	height: 100%;
 	.mainContainer{
+		width: calc(100% - 20px);
+		height: calc(100% - 20px);
 		color: #fff;
 		padding: 10px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
 		.lineBox{
 			// background-color: #fff;
 			line-height: 18px;

src/views/agjtLiveScreen/liveScreen/rightBottom.vue

@@ -3,7 +3,7 @@
 		<Card title="安全待办">
 			<div class="mainContainer">
 				<div class="itemBox" v-for="(item,i) in 7" :key="i">
-					<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝的疯狂世界东方螺丝钉解放数量大幅减少的ask大理石看得见啊来看看是多久啊老师的课</div>
+					<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝</div>
 					<div class="itemLine2">整改结果：<span style="color:#19bfef">已逾期</span></div>
 					<div class="itemLine3">
 						<div class="line3Inner1">整改人：<span style="color:#19bfef">李四</span></div>

src/views/agjtLiveScreen/liveScreen/rightTop.vue

@@ -2,41 +2,13 @@
 	<div class="rightTop">
 		<Card title="应急记录">
 			<div class="mainContainer">
-				<div class="itemBox">
+				<div class="itemBox" v-for="(item,i) in 3" :key="i">
 					<div class="itemLeft">
 						<div style="font-size:24px;transform:translateY(-3px)">⚠</div>
 						<div style="margin-left:8px">事项</div>
 					</div>
 					<div class="itemRight">
-						<div class="rightTop">被困电梯，需要救援大幅简化了士大夫艰苦拉萨的封建士大夫地方势力的空间管理的飞机过来的开发工具奥斯卡大奖阿里山可见度拉克斯基的</div>
-						<div class="rightBottom">
-							<div class="rbInner1">处理状态：已处理</div>
-							<div class="rbInner2">处理报告：下载</div>
-							<div class="rbInner3">2024-03-01 12:00:00</div>
-						</div>
-					</div>
-				</div>
-				<div class="itemBox">
-					<div class="itemLeft">
-						<div style="font-size:24px;transform:translateY(-3px)">⚠</div>
-						<div style="margin-left:8px">事项</div>
-					</div>
-					<div class="itemRight">
-						<div class="rightTop">被困电梯，需要救援大幅简化了士大夫艰苦拉萨的封建士大夫地方势力的空间管理的飞机过来的开发工具奥斯卡大奖阿里山可见度拉克斯基的</div>
-						<div class="rightBottom">
-							<div class="rbInner1">处理状态：已处理</div>
-							<div class="rbInner2">处理报告：下载</div>
-							<div class="rbInner3">2024-03-01 12:00:00</div>
-						</div>
-					</div>
-				</div>
-				<div class="itemBox">
-					<div class="itemLeft">
-						<div style="font-size:24px;transform:translateY(-3px)">⚠</div>
-						<div style="margin-left:8px">事项</div>
-					</div>
-					<div class="itemRight">
-						<div class="rightTop">被困电梯，需要救援大幅简化了士大夫艰苦拉萨的封建士大夫地方势力的空间管理的飞机过来的开发工具奥斯卡大奖阿里山可见度拉克斯基的</div>
+						<div class="rightTop">被困电梯，需要救援</div>
 						<div class="rightBottom">
 							<div class="rbInner1">处理状态：已处理</div>
 							<div class="rbInner2">处理报告：下载</div>

src/views/login/index.vue

@@ -122,6 +122,17 @@ const login = (formEl: FormInstance | undefined) => {
 				}
 				// router.push("/commandScreen");
 				router.push("/agjtProjectKanban");
+			} else if (COMPANY === "agjtLive") {
+				router.push("/agjtLiveScreen");
+				if (![5, 10].includes(result.accountType)) {
+					ElMessage({
+						message: "账号类型不匹配",
+						type: "warning"
+					});
+					return;
+				}
+				// router.push("/commandScreen");
+				router.push("/agjtLiveScreen");
 			} else if (COMPANY === "agjtOverview") {
 				router.push("/overviewScreen");
 			} else {