fix: 解决工程概况问题项，解决视频列表播放问题

src/api/modules/projectOverview.ts

@@ -41,3 +41,8 @@ export const eidtProjectShowConfig = (params: {}) => {
 export const queryBySnData = (params: {}) => {
 	return http.post(BASEURL + `/xmgl/projectShowConfig/queryBySn`, params);
 };
+
+// 里程碑字典
+export const getStageOption = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/dictionaryItem/list`, params);
+};

src/api/modules/smartBuild.ts

@@ -16,3 +16,8 @@ export const partyMemberLearn = (params: {}) => {
 export const getPartyVideo = (params: {}) => {
 	return http.get(BASEURL + `/xmgl/partyPromotionalVideo/page`, params);
 };
+
+// 宣传视频列表
+export const getPartyMemberList = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/partyMemberManage/page`, params);
+};

src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerBottom.vue

@@ -28,33 +28,33 @@
 						<span style="margin-left: 4%">天</span>
 					</div>
 				</div>
-				<div
+				<div style="display: flex; margin-top: 4%; margin-left: 2%; color: #fff; font-size: 16px; width: 30%">
-					style="display: flex; margin-top: 3%; margin-left: 0.5%; color: #fff; font-size: 16px; width: 30%; position: absolute"
-				>
 					<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
 					<div><i>里程碑</i></div>
 				</div>
-				<div class="progressData">
+				<el-scrollbar style="width: 94%; margin: 3% 0% 0% 3%; height: 30%">
-					<div class="data" v-for="item in progressList">
+					<div class="progressData">
-						<div v-if="item.status == 0" class="text" :title="item.name">{{ item.name }}</div>
+						<div class="data" v-for="item in progressList" :key="item.id">
-						<img v-if="item.status == 0" src="@/assets/images/comprehensiveManage/project7.png" alt="" />
+							<div v-if="item.status == 0" class="text" :title="item.name">{{ item.name }}</div>
-						<div
+							<img v-if="item.status == 0" src="@/assets/images/comprehensiveManage/project7.png" alt="" />
-							v-if="item.status == 1"
+							<div
-							style="color: #fff; font-size: 18px; margin-top: -8%"
+								v-if="item.status == 1"
-							:title="item.name"
+								style="color: #fff; font-size: 18px; margin-top: -5%"
-							class="statusImg1"
+								:title="item.name"
-						>
+								class="statusImg1"
-							{{ item.name }}
+							>
-							<div v-if="item.status == 1" class="statusImg"></div>
+								<div class="stage-name">{{ item.name }}</div>
+								<div v-if="item.status == 1" class="statusImg"></div>
+							</div>
+							<img
+								v-if="item.status == 1"
+								style="width: 40px; margin-top: 1%"
+								src="@/assets/images/comprehensiveManage/project11.png"
+								alt=""
+							/>
 						</div>
-						<img
-							v-if="item.status == 1"
-							style="width: 40px; margin-top: 2%"
-							src="@/assets/images/comprehensiveManage/project11.png"
-							alt=""
-						/>
 					</div>
-				</div>
+				</el-scrollbar>
 			</div>
 		</Card>
 	</div>
@@ -62,7 +62,9 @@
 
 <script setup lang="ts">
 import Card from "@/components/card.vue";
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
+import { getStageOption } from "@/api/modules/projectOverview";
+
 const progressList = ref([
 	{
 		name: "施工证获取",
@@ -91,12 +93,8 @@ const progressList = ref([
 	{
 		name: "工程达到预售条件",
 		status: 0
-	},
-	{
-		name: "主体施工",
-		status: 0
 	}
-]);
+] as any);
 // ts
 type Props = {
 	projectData?: any; // 传入项目信息
@@ -115,14 +113,44 @@ watch(
 		if (newVal) {
 			// props.xData = newVal;
 			projectData.value = newVal;
-			// console.log("当前阶段", projectData.value.constructionStage);
+			console.log("当前阶段", projectData.value.constructionStage);
 			progressList.value[projectData.value.constructionStage - 1].status = 1;
 		}
 	}
 );
+
+//获取里程碑option
+const getProgressOption = async () => {
+	const res: any = await getStageOption({ dictionaryEncoding: "project_construction_stage" });
+	if (res.success) {
+		let newArray = res.result.map((item: any) => {
+			return {
+				name: item.name,
+				status: 0
+			};
+		});
+		progressList.value = newArray;
+		// console.log(projectData.value, "里程碑option", newArray);
+		// progressList.value[projectData.value.constructionStage - 1].status = 1;
+	}
+};
+onMounted(() => {
+	getProgressOption();
+});
 </script>
 
 <style lang="scss" scoped>
+.el-scrollbar__wrap {
+	overflow-x: auto;
+	height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
+}
+
+.el-scrollbar {
+	background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
+	background-size: 100% 40%;
+	background-position-y: 30%;
+}
+
 .leftTop {
 	width: 100%;
 	height: 100%;
@@ -130,12 +158,13 @@ watch(
 .progressContent {
 	width: 100%;
 	height: 100%;
+	position: relative;
 	.totalDay {
 		width: 40%;
 		float: left;
 		color: #ccc;
 		font-size: 16px;
-		margin-left: 10%;
+		margin-left: 15%;
 	}
 	.residueDay {
 		width: 40%;
@@ -157,18 +186,29 @@ watch(
 		color: #4ac0f3;
 	}
 	.progressData {
-		width: 96%;
+		// position: absolute;
-		height: 15%;
+		// bottom: 3%;
-		margin: 13.5% 2% 0 2%;
+		// left: 3%;
-		background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
+		width: 100%;
-		background-size: 100% 100%;
+		height: 30%;
 		display: flex;
 		cursor: pointer;
+		// background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
+		// background-size: 100% 40%;
+		// background-position-y: 30%;
+		// .stage-bg {
+		// 	height: 50%;
+		// 	position: absolute;
+		// 	img {
+		// 		width: 100%;
+		// 		height: 100%;
+		// 	}
+		// }
 		.data {
 			color: #ccc;
 			font-size: 15px;
-			margin-top: -1%;
 			margin-left: 5%;
+			z-index: 1;
 			.text {
 				width: 60px;
 				white-space: nowrap;
@@ -184,16 +224,23 @@ watch(
 		.statusImg {
 			position: absolute;
 			top: 190%;
-			left: -40%;
+			left: -60%;
 			width: 120px;
-			height: 2px;
+			height: 1px;
 			background: url("@/assets/images/comprehensiveManage/project6.png") no-repeat;
 			background-size: 100% 100%;
 		}
 		.statusImg1 {
+			width: 50px;
 			position: relative;
 			background: url("@/assets/images/comprehensiveManage/project5.png") no-repeat;
 			background-size: 100% 100%;
+			.stage-name {
+				width: 80px;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
 		}
 	}
 }

src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerTop.vue

@@ -17,7 +17,7 @@
 					:action="BASEURL + '/upload/image'"
 					:on-success="file => handleSuccessTwo(file, 1)"
 					:on-error="file => handleError(file, 1)"
-					:beforeUpload="file => handleBeforeUpload(file, 1)"
+					:beforeUpload="file => handleBeforeUploadVideo(file, 1)"
 					name="files"
 					:show-file-list="false"
 				>
@@ -32,7 +32,7 @@
 						:action="BASEURL + '/upload/image'"
 						:on-success="file => handleSuccess(file, 1)"
 						:on-error="file => handleError(file, 1)"
-						:beforeUpload="file => handleBeforeUpload(file, 1)"
+						:beforeUpload="file => handleBeforeUploadPic(file, 1)"
 						name="files"
 						:show-file-list="false"
 					>
@@ -128,10 +128,10 @@ const uploadFail = () => {
 	});
 };
 
-const fileTypeFail = () => {
+const fileTypeFail = (text: any) => {
 	ElMessage({
 		showClose: true,
-		message: "请选择正确的文件",
+		message: text,
 		type: "warning"
 	});
 };
@@ -144,17 +144,30 @@ const uploadSuccess = () => {
 	});
 };
 
-// 文件上传 之前
+// 视频文件上传 之前
-function handleBeforeUpload(file, type) {
+function handleBeforeUploadVideo(file: any) {
 	console.log(file, "上传之前");
 	let fileType = file.type.split("/")[0];
-	if (fileType == "video" || fileType == "image") {
+	if (fileType == "video") {
 		return true;
 	} else {
-		fileTypeFail(); //"请选择正确的文件"
+		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, "上传失败");
@@ -248,13 +261,12 @@ onMounted(() => {
 		background-size: 100% 100%;
 		.imgs {
 			width: 78%;
-			height: 92%;
+			height: 82%;
 			margin: 3% 11%;
 			img {
 				width: 100%;
 				height: 100%;
-				margin-top: 1%;
+				margin-top: 5%;
-				object-fit: contain;
 			}
 		}
 	}

src/views/sevenLargeScreen/comprehensiveManage/projectOverview/index.vue

@@ -43,9 +43,7 @@ const getProjectInfo = async () => {
 
 //获取人员概览
 const getPersonDetail = async () => {
-	const res = await getWorkerStatisticsCountApi({ projectSn: store.sn });
+	const res = await getWorkerStatisticsCountApi({ sn: store.sn });
-	// console.log("获取人员概览", res);
-	// console.log("获取工程类别", projectTypeEnum);
 	statisticsCount.value = res.result;
 };
 onMounted(() => {

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

@@ -11,7 +11,7 @@
 				<div class="dataTlt">
 					<div class="text"><i>在场人数</i></div>
 					<div class="num">
-						<i>{{ statisticsCount.presencecount.lwPersonTotal || 0 }}</i>
+						<i>{{ statisticsCount.presencecount.totalPerson || 0 }}</i>
 					</div>
 				</div>
 			</div>

src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftTop.vue

@@ -3,14 +3,12 @@
 		<Card title="项目信息">
 			<div class="projectInfo">
 				<div><span>项目名称：</span> {{ projectData.projectName || "" }}</div>
-				<div>
+				<div :title="projectLocal"><span>项目地址：</span> {{ projectLocal }}</div>
-					<span>项目地址：</span> {{ projectData.provinceName || "" }}{{ projectData.cityName || "" }}
-					{{ projectData.areaName || "" }}{{ projectData.projectAddress || "" }}
-				</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 ? projectTypeEnum[projectData.projectType - 1].name : "" }}</div>
 			</div>
 		</Card>
@@ -33,6 +31,8 @@ const props = withDefaults(defineProps<Props>(), {
 // 项目信息
 const projectData = ref({} as any);
 
+const projectLocal = ref("" as any);
+
 watch(
 	() => props.projectData,
 	newVal => {
@@ -40,6 +40,11 @@ watch(
 		if (newVal) {
 			// props.xData = newVal;
 			projectData.value = newVal;
+			projectLocal.value =
+				projectData.value.provinceName +
+				projectData.value.cityName +
+				projectData.value.areaName +
+				projectData.value.projectAddress;
 		}
 	}
 );
@@ -53,11 +58,15 @@ watch(
 		width: 100%;
 		height: 100%;
 		color: #fff;
-		padding: 3% 0 0 4%;
+		padding: 2% 0 0 4%;
 
 		div {
-			height: 13%;
+			width: 95%;
+			height: 12%;
 			font-size: 14px;
+			white-space: nowrap; //单行
+			overflow: hidden;
+			text-overflow: ellipsis;
 			span {
 				color: #ccc;
 			}

src/views/sevenLargeScreen/videoManagement/index.vue

@@ -29,7 +29,7 @@
 		<div class="right">
 			<div class="videoPlayerBig">
 				<Card title="视频监控">
-					<div ref="playWndBox" style="width: 90%; height: 100%;margin: 0 5% 2% 5%;">
+					<div ref="playWndBox" style="width: 90%; height: 100%; margin: 0 5% 2% 5%">
 						<div
 							id="playWnd"
 							class="playWnd"
@@ -87,17 +87,19 @@ const checkVideo = async (item: any) => {
 // let firstVideoId = ref("" as any);
 //获取视频列表
 const getVideoList = async () => {
-	let res = await selectProjectVideoListApi({
+	let res: any = await selectProjectVideoListApi({
-		projectSn: store.sn
+		projectSn: store.sn,
+		all: 1
+		// all=1查全部
 	});
-	shipinList.value = res.result.videoList[0].list;
+	shipinList.value = res.result.videoList;
-	objData.value.appkey = res.result.videoList[0].list[0].appId;
+	objData.value.appkey = res.result.videoList[0].appId;
-	objData.value.ip = res.result.videoList[0].list[0].account;
+	objData.value.ip = res.result.videoList[0].account;
-	objData.value.secret = res.result.videoList[0].list[0].appSecret;
+	objData.value.secret = res.result.videoList[0].appSecret;
-	objData.value.port = +res.result.videoList[0].list[0].password;
+	objData.value.port = +res.result.videoList[0].password;
-	cameraIndexCode.value = res.result.videoList[0].list[0].serialNumber;
+	cameraIndexCode.value = res.result.videoList[0].serialNumber;
-	// firstVideoId.value = res.result.videoList[0].list[0].serialNumber;
+	// firstVideoId.value = res.result.videoList[0].serialNumber;
-	previewVideo(res.result.videoList[0].list[0].serialNumber);
+	previewVideo(res.result.videoList[0].serialNumber);
 	console.log(objData.value);
 	console.log("视频列表", res);
 };
@@ -404,7 +406,7 @@ const previewVideo = (data: string | null) => {
 ::v-deep .h-card .content {
 	background: none;
 }
-::v-deep .h-card .title .titltText{
+::v-deep .h-card .title .titltText {
 	margin-bottom: 0%;
 }
 </style>