feat: 项目大屏页面修改

.env.development

@@ -2,11 +2,11 @@
 NODE_ENV = 'development'
 
 # 本地环境接口地址(/api/index.ts文件中使用)
-VITE_API_URL = 'http://192.168.34.155:6688'
+# VITE_API_URL = 'http://192.168.34.155:6688'
 # VITE_API_URL = 'http://183.63.230.59:6090'
 # VITE_API_URL = 'http://2xliv7gs.shenzhuo.vip:55296'
 VITE_WPAPI_URL = "http://jxjzw.zhgdyun.com:8081"
-# VITE_API_URL = "http://jxjzw.zhgdyun.com:9013"
+VITE_API_URL = "http://jxjzw.zhgdyun.com:9013"
 # VITE_API_URL = 'https://xmglcs.hyjgxt.cn:6090'
 
 # 上传

src/views/goverment/huizhou/largeScreen/largeScreenOne/components/right.vue

@@ -123,17 +123,19 @@ const threeDOption = (val: any[] | ResponseSame<ScreenResponse.ProjectAllRespons
 		// 	}
 		// }
 	];
-	percentList.value.map((item: any) => {
-		data.push({ name: item.name, value: 0 });
-	});
+	const colorList = ["#3c6fb6", "#53d5a3", "#f6bc05", "#EA4916"];
 	let temp = 0;
 	val.forEach((item2: { dict_value: string; num: number }, index: number) => {
 		temp += Number(item2.num);
-		data.forEach((item, index) => {
-			if (item.name == item2.dict_value) {
-				item.value = Number(item2.num);
-			}
-		});
+		if (Number(item2.num) > 0) {
+			data.push({
+				name: item2.dict_value,
+				value: Number(item2.num),
+				itemStyle: {
+					color: colorList[index % colorList.length]
+				}
+			});
+		}
 	});
 	allNumber = temp;
 	console.log(allNumber, data, "777888");
@@ -318,29 +320,29 @@ const threeDOption = (val: any[] | ResponseSame<ScreenResponse.ProjectAllRespons
 
 		// 准备待返回的配置项，把准备好的 legendData、series 传入。
 		let option = {
-			// color: ["#3c6fb6", "#53d5a3", "#f6bc05", "#EA4916"],
+			color: ["#3c6fb6", "#53d5a3", "#f6bc05", "#EA4916"],
 			//animation: false,
-			labelLine: {
-				show: true,
-				lineStyle: {
-					color: "#7BC0CB"
-				}
-			},
-			label: {
-				show: true,
-				position: "outside",
-				rich: {
-					b: {
-						color: "#7BC0CB",
-						fontSize: 12,
-						lineHeight: 20
-					},
-					c: {
-						fontSize: 16
-					}
-				},
-				formatter: "{b|{b} \n}{c|{c}}{b|  亩}"
-			},
+			// labelLine: {
+			// 	show: false,
+			// 	lineStyle: {
+			// 		color: "#7BC0CB"
+			// 	}
+			// },
+			// label: {
+			// 	show: false,
+			// 	position: "outside",
+			// 	rich: {
+			// 		b: {
+			// 			color: "#7BC0CB",
+			// 			fontSize: 12,
+			// 			lineHeight: 20
+			// 		},
+			// 		c: {
+			// 			fontSize: 16
+			// 		}
+			// 	},
+			// 	formatter: "{b|{b} \n}{c|{c}}{b|  亩}"
+			// },
 			legend: {
 				show: false,
 				// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） | 'vertical'（垂直）
@@ -405,21 +407,21 @@ const threeDOption = (val: any[] | ResponseSame<ScreenResponse.ProjectAllRespons
 					zoomSensitivity: 0,
 					panSensitivity: 0,
 					autoRotate: false
-				},
-				//后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
-				postEffect: {
-					//配置这项会出现锯齿，请自己去查看官方配置有办法解决
-					enable: true,
-					bloom: {
-						enable: true,
-						bloomIntensity: 0.1
-					},
-					SSAO: {
-						enable: true,
-						quality: "medium",
-						radius: 2
-					}
 				}
+				//后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+				// postEffect: {
+				// 	//配置这项会出现锯齿，请自己去查看官方配置有办法解决
+				// 	enable: true,
+				// 	bloom: {
+				// 		enable: true,
+				// 		bloomIntensity: 0.1
+				// 	},
+				// 	SSAO: {
+				// 		enable: true,
+				// 		quality: "medium",
+				// 		radius: 2
+				// 	}
+				// }
 			},
 			series: series
 		};
@@ -433,55 +435,41 @@ const threeDOption = (val: any[] | ResponseSame<ScreenResponse.ProjectAllRespons
 		name: "pie2d",
 		type: "pie",
 		labelLine: {
-			length: 20,
-			length2: 20,
 			show: true,
+			length: 20,
+			length2: 30,
 			lineStyle: {
-				color: "#7BC0CB"
+				width: 2 //设置线条粗细
 			}
 		},
-		// label: {
-		// 	show: true,
-		// 	position: "outside",
-		// 	rich: {
-		// 		b: {
-		// 			color: "#7BC0CB",
-		// 			fontSize: 12,
-		// 			lineHeight: 20
-		// 		},
-		// 		c: {
-		// 			fontSize: 16
-		// 		}
-		// 	},
-		// 	formatter: "{b|{b} \n}{c|{c}}{b|  亩}"
-		// },
+		label: {
+			show: true,
+			position: "outside",
+			opacity: 1,
+			rich: {
+				b: {
+					color: "#7BC0CB",
+					fontSize: 12,
+					lineHeight: 20
+				},
+				c: {
+					color: "#7BC0CB",
+					fontSize: 12,
+					lineHeight: 20
+				},
+				d: {
+					color: "#7BC0CB",
+					fontSize: 12,
+					lineHeight: 20
+				}
+			},
+			formatter: "{b|{b}}  {c|{c} \n}{d|{d}%}"
+		},
 		startAngle: 0, //起始角度，支持范围[0, 360]。
 		clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
 		radius: ["20%", "50%"],
-		center: ["50%", "50%"],
-		data: [
-			{
-				name: "林地面积统计",
-				value: 10000,
-				itemStyle: {
-					color: "#22c4ff"
-				}
-			},
-			{
-				name: "草地面积统计",
-				value: 12116,
-				itemStyle: {
-					color: "#aaff00"
-				}
-			},
-			{
-				name: "耕地地面积统计",
-				value: 16616,
-				itemStyle: {
-					color: "#ffaaff"
-				}
-			}
-		],
+		center: ["50%", "52%"],
+		data: data,
 		itemStyle: {
 			opacity: 0
 		}

src/views/goverment/huizhou/largeScreen/largeScreenTwo/components/RigthBottRigthView.vue

@@ -10,12 +10,20 @@
 					<img src="@/assets/images/xmgl/little_01.png" alt="" />
 					<div class="toggle">企业类型切换</div>
 					<div class="a_select_div">
-						<el-select class="a_select" v-model="tableParams.searchvalue" placeholder="搜索" style="width: 200px" filterable>
+						<el-select
+							class="a_select"
+							v-model="tableParams.searchvalue"
+							placeholder="搜索"
+							style="width: 200px"
+							filterable
+							clearable
+							@change="selectChange"
+						>
 							<el-option v-for="item in DicMainList" :key="item.dictLabel" :label="item.dictValue" :value="item.dictLabel">
 							</el-option>
 						</el-select>
 					</div>
-					<el-input class="a_input" v-model="tableParams.enterpriseName" placeholder="请输入企业名称">
+					<el-input class="a_input" v-model="tableParams.enterpriseName" placeholder="请输入企业名称" @input="inputChange">
 						<template #prefix>
 							<img src="@/assets/images/xmgl/uzs.png" alt="" />
 						</template>
@@ -28,15 +36,25 @@
 					<div class="table_header_title" style="width: 30%">项目名称</div>
 					<div class="table_header_title" style="width: 10%">
 						<div>得分</div>
-						<div @click="sort = 0"></div>
-						<div @click="sort = 1"></div>
+						<div
+							@click="
+								tableParams.scoreSort = 0;
+								getAllCountList();
+							"
+						></div>
+						<div
+							@click="
+								tableParams.scoreSort = 1;
+								getAllCountList();
+							"
+						></div>
 					</div>
 				</div>
-				<div>
+				<div class="table-content">
 					<vue3-seamless-scroll
 						v-if="rankList.length > 0"
 						:list="rankList"
-						class="scroll"
+						class="phb_scroll"
 						:hover="true"
 						:step="0.2"
 						:singleWaitTime="3000"
@@ -46,13 +64,13 @@
 							<div style="width: 10%" class="scroll_in_div">{{ index + 1 }}</div>
 							<div style="width: 30%" class="scroll_in_div">
 								<div class="scroll_in_div_in">
-									<a href="" :title="item.enterpriseName">{{ item.enterpriseName }}</a>
+									<a href="javascript: void(0)" :title="item.enterpriseName">{{ item.enterpriseName }}</a>
 								</div>
 							</div>
 							<div style="width: 20%" class="scroll_in_div">{{ item.enterpriseTypeName }}</div>
 							<div style="width: 30%" class="scroll_in_div">
 								<div class="scroll_in_div_in">
-									<a href="" :title="item.engineeringName">{{ item.engineeringName }}</a>
+									<a href="javascript: void(0)" :title="item.engineeringName">{{ item.engineeringName }}</a>
 								</div>
 							</div>
 							<div style="width: 10%" class="scroll_in_div">{{ item.score }}</div>
@@ -120,17 +138,45 @@ import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 import { getEnvironmentAlarmStat, getEnvironmentAlarm } from "@/api/modules/largeScreenTwo";
 import { useRouter } from "vue-router";
 import { getDicList } from "@/api/modules/jxjview";
+import { rankScoreList } from "@/api/modules/huizhou";
 
 const router = useRouter();
 const tableParams = ref({
 	searchvalue: null,
-	enterpriseName: ""
+	enterpriseName: "",
+	scoreSort: 1
 });
-const rankList = ref([]);
+const rankList = ref([
+	{ enterpriseName: "123", enterpriseTypeName: "123", engineeringName: "123", score: "123" },
+	{ enterpriseName: "123", enterpriseTypeName: "123", engineeringName: "123", score: "123" }
+]);
 const DicMainList = ref([]);
 // import pinia from "@/store/index";
 // import { useStore } from "@/store/module";
 // const store = useStore(pinia);
+// input输入切换
+const inputChange = () => {
+	getAllCountList();
+};
+// select切换
+const selectChange = () => {
+	getAllCountList();
+};
+// 排行榜数据
+const getAllCountList = async () => {
+	let requestData = {
+		enterpriseName: tableParams.value.enterpriseName,
+		enterpriseType: tableParams.value.searchvalue,
+		scoreSort: tableParams.value.scoreSort,
+		scoreType: 0
+	};
+	const res = await rankScoreList(requestData);
+	if (res && res.result && res.result.length > 0) {
+		rankList.value = res.result;
+	} else {
+		rankList.value = [];
+	}
+};
 // 企业类型
 const getDicMainList = async () => {
 	const { result } = await getDicList({ dictType: "enterprise_main" });
@@ -252,6 +298,7 @@ onMounted(() => {
 	getEnvironmentAlarmStatFn();
 	getEnvironmentAlarmFn();
 	getDicMainList();
+	getAllCountList();
 });
 const goDataManagement = val => {
 	router.push("/goverment/huizhou/siteSupervision/environmentalMonitoring/index");
@@ -428,7 +475,6 @@ const settxa = (arr1, arr2) => {
 		margin: 0 auto;
 		margin-top: 45px;
 		display: flex;
-		flex-wrap: wrap;
 		flex-direction: column;
 		.phb_content {
 			display: flex;
@@ -502,7 +548,7 @@ const settxa = (arr1, arr2) => {
 			display: flex;
 			background: #1b2557;
 			color: #c5d0d4;
-			height: 35px;
+			height: 40px;
 			justify-content: space-around;
 			.table_header_title {
 				font-size: 14px;
@@ -539,6 +585,9 @@ const settxa = (arr1, arr2) => {
 				border-right: none;
 			}
 		}
+		.table-content {
+			height: 72%;
+		}
 		.phb_scroll {
 			overflow: hidden;
 			width: 100%;

src/views/goverment/huizhou/progressManagement/investmentPayment/index.vue

@@ -4,6 +4,7 @@
 			v-model="active"
 			:tabs="['项目名称', '工程名称']"
 			:records="records"
+			:activeIndex="modelActive"
 			@change-page="onCurChange"
 			@search="onSearchInput"
 			:pageable="pages"
@@ -142,6 +143,7 @@ import {
 import { sendIframeMessage } from "@/utils/util";
 import divDialogComponent from "@/components/divDialogComponent/index.vue";
 const route = useRoute();
+const modelActive = ref(0);
 const detailsDialog = ref(false);
 const relativeId = ref("");
 
@@ -515,7 +517,17 @@ onMounted(async () => {
 	searchSn.value = records.value[0].projectSn;
 	searchName.value = records.value[0].projectName;
 	searchId.value = records.value[0].id;
-	onSearch(records.value[0]);
+	if (route.query.projectName) {
+		let defaultActive = records.value.findIndex((item: any) => {
+			return route.query.projectName == item.engineeringName;
+		});
+		if (defaultActive != -1) {
+			modelActive.value = defaultActive;
+			onSearch(records.value[defaultActive]);
+		}
+	} else {
+		onSearch(records.value[0]);
+	}
 	await sendIframeMessage({ obj: { path: route.path } }, 2, undefined);
 });
 </script>

src/views/goverment/huizhou/siteSupervision/environmentalMonitoring/index.vue

@@ -4,6 +4,7 @@
 			v-model="active"
 			:tabs="['项目名称', '工程名称']"
 			:records="records"
+			:activeIndex="modelActive"
 			@change-page="onCurChange"
 			@search="onSearchInput"
 			:pageable="pages"
@@ -73,6 +74,7 @@ import ProTable from "@/components/ProTable/index.vue";
 import { ColumnProps } from "@/components/ProTable/interface";
 import { getRealTimePage } from "@/api/modules/project";
 import { sendIframeMessage } from "@/utils/util";
+const modelActive = ref(0);
 const proTable = ref();
 const route = useRoute();
 const pages = ref({
@@ -273,7 +275,17 @@ onMounted(async () => {
 	await getEngPage();
 	searchSn.value = (records.value as ResAiProjectPage[])[0].engineeringSn;
 	searchName.value = (records.value as ResAiProjectPage[])[0].engineeringSnName;
-	onSearch(records.value[0]);
+	if (route.query.projectName) {
+		let defaultActive = records.value.findIndex((item: any) => {
+			return route.query.projectName == item.engineeringName;
+		});
+		if (defaultActive != -1) {
+			modelActive.value = defaultActive;
+			onSearch(records.value[defaultActive]);
+		}
+	} else {
+		onSearch(records.value[0]);
+	}
 	await sendIframeMessage({ obj: { path: route.path } }, 2, undefined);
 });
 </script>

src/views/hz-enterprise/largeScreen/largeScreenOne/components/milestone copy.vue

@@ -0,0 +1,130 @@
+<template>
+	<div class="milestoneBox">
+		<div class="numContent">
+			<div class="item">
+				<span class="name">项目总天数</span>
+				<div class="numBox">{{ props.projectData.totalDay }}</div>
+				<span class="unit">天</span>
+			</div>
+			<div class="item">
+				<span class="name">项目剩余天数</span>
+				<div class="numBox">{{ props.projectData.residueDay }}</div>
+				<span class="unit">天</span>
+			</div>
+		</div>
+		<div class="listBox">
+			<div class="item" :class="'item' + item.state" v-for="(item, index) in objData" :key="index">
+				<div class="img" :class="'img' + item.state"></div>
+				<p class="name">{{ item.name }}</p>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { getEntSubItem } from "@/api/modules/huizhou";
+const props = defineProps<{
+	projectData: Object;
+	engineeringSn: String;
+}>();
+// 获取里程碑信息
+let objData = ref([]);
+const getSubItemFn = async () => {
+	const res: any = await getEntSubItem({ engineeringSn: props.engineeringSn });
+	objData.value = res.result;
+};
+onMounted(async () => {
+	await getSubItemFn();
+});
+</script>
+<style scoped lang="scss">
+.numContent {
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	margin: 26px 0 47px;
+	.item {
+		display: inline-flex;
+		align-items: center;
+		font-size: 18px;
+		.numBox {
+			width: 147px;
+			height: 46px;
+			margin: 0 12px;
+			font-size: 40px;
+			font-weight: 400;
+			line-height: 42px;
+			color: #4cc4f8;
+			text-align: center;
+			background-image: url("../../../../../assets/images/hzImg/xm/numBg.png");
+			background-size: 100% 100%;
+		}
+	}
+}
+.listBox {
+	display: flex;
+	align-items: center;
+	margin: 0 26px 20px;
+	.item {
+		position: relative;
+		margin-right: 80px;
+		font-size: 18px;
+		text-align: center;
+		&:last-child {
+			margin-right: 0;
+			&::after {
+				display: none;
+			}
+		}
+		&::after {
+			position: absolute;
+			right: -70px;
+			bottom: 8px;
+			width: 60px;
+			content: "";
+			border-bottom: 1px dashed rgb(255 255 255 / 20%);
+		}
+		.img1 {
+			background-image: url("../../../../../assets/images/hzImg/xm/greyMarker.png");
+		}
+		.img3 {
+			background-image: url("../../../../../assets/images/hzImg/xm/blueMarker.png");
+		}
+		.img2 {
+			background-image: url("../../../../../assets/images/hzImg/xm/yellowMarker.png");
+		}
+		.img4 {
+			background-image: url("../../../../../assets/images/hzImg/xm/greyMarker.png");
+		}
+		.img5 {
+			background-image: url("../../../../../assets/images/hzImg/xm/blueMarker.png");
+		}
+		.img6 {
+			background-image: url("../../../../../assets/images/hzImg/xm/yellowMarker.png");
+		}
+		.img {
+			width: 46.5px;
+			height: 64px;
+			margin: auto;
+			background-position: center bottom;
+			background-size: 100% 100%;
+		}
+		.name {
+			margin: 12px 0 0;
+		}
+	}
+	.item2 {
+		&::after {
+			border-bottom: 1px dashed #ffbb38;
+		}
+		.name {
+			color: #ffbb38;
+		}
+	}
+	.item3 {
+		&::after {
+			border-bottom: 1px dashed #4cc4f8;
+		}
+	}
+}
+</style>

src/views/hz-enterprise/largeScreen/largeScreenOne/components/milestone.vue

@@ -1,21 +1,90 @@
 <template>
 	<div class="milestoneBox">
-		<div class="numContent">
-			<div class="item">
-				<span class="name">项目总天数</span>
-				<div class="numBox">{{ props.projectData.totalDay }}</div>
-				<span class="unit">天</span>
-			</div>
-			<div class="item">
-				<span class="name">项目剩余天数</span>
-				<div class="numBox">{{ props.projectData.residueDay }}</div>
-				<span class="unit">天</span>
-			</div>
+		<div class="milestone-title">里程碑</div>
+		<div class="milestone-sub-title">
+			<img src="@/assets/images/xmgl/projectScreenIcon.png" alt="" srcset="" />
+			<span>项目里程碑</span>
 		</div>
-		<div class="listBox">
-			<div class="item" :class="'item' + item.state" v-for="(item, index) in objData" :key="index">
-				<div class="img" :class="'img' + item.state"></div>
-				<p class="name">{{ item.name }}</p>
+		<div class="milestone-stage">
+			<img src="@/assets/images/xmgl/projectScreenIcon2.png" alt="" srcset="" class="left-arrow" />
+			<img src="@/assets/images/xmgl/projectScreenIcon2.png" alt="" srcset="" class="right-arrow" />
+			<div class="stage-content">
+				<div class="stage-head">
+					<span>开始时间</span>
+					<span>结束时间</span>
+				</div>
+				<div class="stage-box">
+					<span>完成建议书</span>
+					<span>2024年</span>
+					<span>05-15</span>
+					<div class="stage-circle">建议书</div>
+					<span>2024年</span>
+					<span>05-15</span>
+					<span>如期完成</span>
+				</div>
+				<div class="stage-box">
+					<span>完成立项</span>
+					<span>2024年</span>
+					<span>05-15</span>
+					<div class="stage-circle">立项</div>
+					<span>2024年</span>
+					<span>05-15</span>
+					<span>如期完成</span>
+				</div>
+				<div class="stage-box">
+					<span>完成用地</span>
+					<span>2024年</span>
+					<span>05-15</span>
+					<div class="stage-circle">用地</div>
+					<span>2024年</span>
+					<span>05-15</span>
+					<span>如期完成</span>
+				</div>
+				<div class="stage-box">
+					<span>完成设计</span>
+					<span>2024年</span>
+					<span>05-15</span>
+					<div class="stage-circle">设计</div>
+					<span>2024年</span>
+					<span>05-15</span>
+					<span>如期完成</span>
+				</div>
+				<div class="stage-box">
+					<span>完成概算</span>
+					<span>2024年</span>
+					<span>05-15</span>
+					<div class="stage-circle">概算</div>
+					<span style="color: #938e6c">2024年</span>
+					<span style="color: #938e6c">05-15</span>
+					<span style="color: #9f8a42">如期完成</span>
+				</div>
+				<div class="stage-box">
+					<span>完成施工图</span>
+					<span>2024年</span>
+					<span>05-15</span>
+					<div class="stage-circle">施工图</div>
+					<span style="color: #884754">2024年</span>
+					<span style="color: #884754">05-15</span>
+					<span style="color: #a8433d">如期完成</span>
+				</div>
+				<div class="stage-box">
+					<span>完成预算</span>
+					<span>2024年</span>
+					<span>05-15</span>
+					<div class="stage-circle">预算</div>
+					<span style="color: #5e6581">/</span>
+					<span style="color: #5e6581">/</span>
+					<span style="color: #5e6581">待执行</span>
+				</div>
+				<div class="stage-box">
+					<span>完成招投标</span>
+					<span>2024年</span>
+					<span>05-15</span>
+					<div class="stage-circle">招投标</div>
+					<span style="color: #5e6581">/</span>
+					<span style="color: #5e6581">/</span>
+					<span style="color: #5e6581">待执行</span>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -38,92 +107,99 @@ onMounted(async () => {
 });
 </script>
 <style scoped lang="scss">
-.numContent {
-	display: flex;
-	align-items: center;
-	justify-content: space-around;
-	margin: 26px 0 47px;
-	.item {
-		display: inline-flex;
-		align-items: center;
-		font-size: 18px;
-		.numBox {
-			width: 147px;
-			height: 46px;
-			margin: 0 12px;
-			font-size: 40px;
-			font-weight: 400;
-			line-height: 42px;
-			color: #4cc4f8;
-			text-align: center;
-			background-image: url("../../../../../assets/images/hzImg/xm/numBg.png");
-			background-size: 100% 100%;
-		}
-	}
-}
-.listBox {
-	display: flex;
-	align-items: center;
-	margin: 0 26px 20px;
-	.item {
-		position: relative;
-		margin-right: 80px;
-		font-size: 18px;
+.milestoneBox {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	.milestone-title {
+		width: 296px;
+		height: 36px;
 		text-align: center;
-		&:last-child {
-			margin-right: 0;
-			&::after {
-				display: none;
-			}
+		line-height: 36px;
+		background: url("@/assets/images/xmgl/projectScreenBg2.png") no-repeat center;
+		background-size: 100% 100%;
+		margin: 0 auto;
+		// position: absolute;
+		// left: calc(50% - 149px);
+	}
+	.milestone-sub-title {
+		display: flex;
+		align-items: center;
+		margin-top: 10px;
+		margin-left: 60px;
+		img {
+			margin-right: 20px;
 		}
-		&::after {
+		span {
+			color: #328bc7;
+		}
+	}
+	.milestone-stage {
+		height: 200px;
+		margin-top: 20px;
+		margin-left: 30px;
+		position: relative;
+		display: flex;
+		.left-arrow,
+		.right-arrow {
 			position: absolute;
-			right: -70px;
-			bottom: 8px;
-			width: 60px;
-			content: "";
-			border-bottom: 1px dashed rgb(255 255 255 / 20%);
+			top: 35%;
+			width: 26px;
+			height: 24px;
 		}
-		.img1 {
-			background-image: url("../../../../../assets/images/hzImg/xm/greyMarker.png");
+		.right-arrow {
+			right: 30px;
+			transform: rotate(180deg);
 		}
-		.img3 {
-			background-image: url("../../../../../assets/images/hzImg/xm/blueMarker.png");
-		}
-		.img2 {
-			background-image: url("../../../../../assets/images/hzImg/xm/yellowMarker.png");
-		}
-		.img4 {
-			background-image: url("../../../../../assets/images/hzImg/xm/greyMarker.png");
-		}
-		.img5 {
-			background-image: url("../../../../../assets/images/hzImg/xm/blueMarker.png");
-		}
-		.img6 {
-			background-image: url("../../../../../assets/images/hzImg/xm/yellowMarker.png");
-		}
-		.img {
-			width: 46.5px;
-			height: 64px;
-			margin: auto;
-			background-position: center bottom;
-			background-size: 100% 100%;
-		}
-		.name {
-			margin: 12px 0 0;
-		}
-	}
-	.item2 {
-		&::after {
-			border-bottom: 1px dashed #ffbb38;
-		}
-		.name {
-			color: #ffbb38;
-		}
-	}
-	.item3 {
-		&::after {
-			border-bottom: 1px dashed #4cc4f8;
+		.stage-content {
+			width: 88%;
+			height: 90%;
+			margin-left: 4%;
+			display: flex;
+			font-size: 14px;
+			.stage-head {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				span {
+					writing-mode: vertical-lr;
+					color: #1c7986;
+				}
+			}
+			.stage-box {
+				height: 100%;
+				display: flex;
+				align-items: center;
+				flex-direction: column;
+				justify-content: space-between;
+				margin-top: -5px;
+				margin-left: 12px;
+				span:nth-child(1) {
+					color: #307689;
+				}
+				span:nth-child(2),
+				span:nth-child(3) {
+					color: #88adc2;
+				}
+				.stage-circle {
+					width: 76px;
+					height: 76px;
+					text-align: center;
+					line-height: 76px;
+					background: url("@/assets/images/xmgl/projectScreenIcon3.png") no-repeat center;
+					background-size: 100% 100%;
+					color: #3eadb0;
+					font-size: 16px;
+				}
+				span:nth-child(5),
+				span:nth-child(6) {
+					color: #356646;
+				}
+				span:nth-child(7) {
+					color: #1cb12a;
+				}
+			}
 		}
 	}
 }

src/views/hz-enterprise/largeScreen/largeScreenOne/index.vue

@@ -13,7 +13,7 @@
 				</div>
 			</div>
 			<projectInfoDialog v-show="projectDialog" @close="closeProjectDialog" :projectData="projectData"></projectInfoDialog>
-			<div class="blockBox">
+			<div class="blockBox" @click="toRelativeModule(1)">
 				<div class="blockTitle">
 					<img src="@/assets/images/hzImg/xm/zfgl.png" alt="" class="title" />
 				</div>
@@ -83,16 +83,16 @@
 				<BDmaps :projectData="projectData"></BDmaps>
 			</div>
 			<div class="blockBox">
-				<div class="blockTitle blockTitle2">
+				<!-- <div class="blockTitle blockTitle2">
 					<img src="@/assets/images/hzImg/xm/lcb.png" alt="" class="title" />
-				</div>
+				</div> -->
 				<div class="blockContent">
 					<milestone :engineeringSn="engineeringSn" :projectData="projectData"></milestone>
 				</div>
 			</div>
 		</div>
 		<div class="rightBox">
-			<div class="blockBox">
+			<div class="blockBox" @click="toRelativeModule(2)">
 				<div class="blockTitle">
 					<img src="@/assets/images/hzImg/xm/aqgl.png" alt="" class="title" />
 				</div>
@@ -119,7 +119,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="blockBox">
+			<div class="blockBox" @click="toRelativeModule(3)">
 				<div class="blockTitle">
 					<img src="@/assets/images/hzImg/xm/zlgl.png" alt="" class="title" />
 				</div>
@@ -146,7 +146,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="blockBox">
+			<div class="blockBox" @click="toRelativeModule(4)">
 				<div class="blockTitle">
 					<img src="@/assets/images/hzImg/xm/hjjc.png" alt="" class="title" />
 				</div>
@@ -171,8 +171,10 @@ import { screenEntPayment, getEntInspectInfo } from "@/api/modules/huizhou";
 import { getpreviewURL } from "@/api/modules/common";
 import { GlobalStore } from "@/stores";
 import { getvideoEngTreeList } from "@/api/modules/goverment";
+import { useRouter } from "vue-router";
 
 const store = GlobalStore();
+const router = useRouter();
 const playWndBox = ref(null);
 //获取项目信息
 const projectData = ref<any>({});
@@ -187,6 +189,27 @@ const emits = defineEmits(["change"]);
 const changeScreen = () => {
 	emits("change");
 };
+// 跳转到相关模块
+const toRelativeModule = (index: number) => {
+	let url = "";
+	switch (index) {
+		case 1:
+			url = "/goverment/huizhou/progressManagement/investmentPayment/index?projectName=" + projectData.value.engineering_name;
+			break;
+		case 2:
+			url = "/goverment/huizhou/projectMonitoring/safetyManagement/index?projectName=" + projectData.value.engineering_name;
+			break;
+		case 3:
+			url = "/goverment/huizhou/projectMonitoring/qualityControl/index?projectName=" + projectData.value.engineering_name;
+			break;
+		case 4:
+			url = "/goverment/huizhou/siteSupervision/environmentalMonitoring/index?projectName=" + projectData.value.engineering_name;
+			break;
+		default:
+			break;
+	}
+	router.push(url);
+};
 const getProjectData = (data: any) => {
 	projectData.value = data;
 };

src/views/hz-enterprise/largeScreen/largeScreenOne/style.scss

@@ -28,6 +28,21 @@
 	float: left;
 	width: 858px;
 	margin: 0 20px;
+	display: flex;
+	flex-direction: column;
+	.blockBox {
+		flex: 1;
+		.blockContent {
+			height: 100%;
+			padding: 0;
+			background: transparent;
+			border: 0;
+			border-radius: 0;
+			box-shadow: none;
+			background: url("@/assets/images/xmgl/projectScreenBg.png") no-repeat center;
+			background-size: 100% 100%;
+		}
+	}
 }
 .mapBox {
 	height: 630px;