项目信息总览页面接口对接

src/api/modules/projectLargeSreen.ts

@@ -0,0 +1,18 @@
+import http from "@/api";
+
+const BASEURL = import.meta.env.VITE_API_URL;
+
+// 获取项目信息
+export const getProjectInfo = () => {
+	return http.get(BASEURL + `/hzxm/index/projectInfo`);
+};
+
+// 获取安全质量信息
+export const getInspectInfo = () => {
+	return http.get(BASEURL + `/hzxm/index/inspect`);
+};
+
+// 获取里程碑数据
+export const getSubItem = () => {
+	return http.get(BASEURL + `/hzxm/index/subItem`);
+};

src/views/hz-project/largeScreen/largeScreenOne/components/maps.vue

@@ -2,12 +2,20 @@
 	<div class="mapBox" id="mapBox" ref="AMapRef"></div>
 </template>
 <script setup lang="tsx" name="pieChart">
-import { ref, reactive, onMounted, shallowRef } from "vue";
+import { ref, onMounted, shallowRef, watch } from "vue";
 import initAMap from "@/components/AMap/AMap";
 import zhongkai from "../point.js";
 const AMapRef = ref();
 const areas = zhongkai();
 const map = shallowRef<AMap.Map>();
+const props = defineProps<{
+	projectData: Object;
+}>();
+const setProjectData = async () => {
+	addMarker();
+};
+watch(() => props.projectData, setProjectData, { deep: true });
+
 // 调用地图
 const mapData = async () => {
 	const AMap = await initAMap();
@@ -43,31 +51,34 @@ const createArea = () => {
 	map.value?.setFitView([bezierCurve]);
 };
 // 地图增加坐标点
-// const addMarker = () => {
-// 	const createMarkerImage = (state: string) => new URL(`../../../../../assets/images/hzImg/xm/${state}`, import.meta.url).href;
-// 	map.value?.clearMap();
-// 	markerList.forEach((item: any) => {
-// 		// 创建一个 Icon
-// 		let startIcon = new AMapRef.value.Icon({
-// 			// 图标尺寸
-// 			size: new AMapRef.value.Size(52, 52),
-// 			// 图标的取图地址
-// 			image: createMarkerImage("marker.png"),
-// 			// 图标所用图片大小
-// 			imageSize: new AMapRef.value.Size(52, 52)
-// 		});
+const addMarker = () => {
+	if (!props.projectData.longitude) {
+		return;
+	}
+	const createMarkerImage = (state: string) => new URL(`../../../../../assets/images/hzImg/xm/${state}`, import.meta.url).href;
+	// map.value?.clearMap();
+	// markerList.forEach((item: any) => {
+	// 创建一个 Icon
+	let startIcon = new AMapRef.value.Icon({
+		// 图标尺寸
+		size: new AMapRef.value.Size(52, 52),
+		// 图标的取图地址
+		image: createMarkerImage("marker.png"),
+		// 图标所用图片大小
+		imageSize: new AMapRef.value.Size(52, 52)
+	});
 
-// 		// 将 icon 传入 marker
-// 		let startMarker = new AMapRef.value.Marker({
-// 			position: new AMapRef.value.LngLat(Number(item[0]) || 113, Number(item[1]) || 21),
-// 			// position: new AMapRef.value.LngLat(113, 21),
-// 			icon: startIcon,
-// 			offset: new AMapRef.value.Pixel(-13, -30)
-// 		});
-// 		map.value?.add([startMarker]);
-// 		map.value?.setFitView();
-// 	});
-// };
+	// 将 icon 传入 marker
+	let startMarker = new AMapRef.value.Marker({
+		position: new AMapRef.value.LngLat(Number(props.projectData.longitude), Number(props.projectData.latitude)),
+		// position: new AMapRef.value.LngLat(113, 21),
+		icon: startIcon,
+		offset: new AMapRef.value.Pixel(-13, -30)
+	});
+	map.value?.add([startMarker]);
+	// map.value?.setFitView();
+	// });
+};
 onMounted(async () => {
 	await mapData();
 	createArea();

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

@@ -3,25 +3,38 @@
 		<div class="numContent">
 			<div class="item">
 				<span class="name">项目总天数</span>
-				<div class="numBox">645</div>
+				<div class="numBox">{{ $props.projectData.totalDay }}</div>
 				<span class="unit">天</span>
 			</div>
 			<div class="item">
 				<span class="name">项目剩余天数</span>
-				<div class="numBox">32</div>
+				<div class="numBox">-</div>
 				<span class="unit">天</span>
 			</div>
 		</div>
 		<div class="listBox">
-			<div class="item" v-for="(item, index) in ['1', '8']" :key="index">
-				<div class="img"></div>
-				<p class="name">基础工程</p>
+			<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, reactive, onMounted } from "vue";
+import { ref, onMounted } from "vue";
+import { getSubItem } from "@/api/modules/projectLargeSreen";
+const props = defineProps<{
+	projectData: Object;
+}>();
+// 获取里程碑信息
+let objData = ref([]);
+const getSubItemFn = async () => {
+	const res: any = await getSubItem();
+	objData.value = res.result;
+};
+onMounted(async () => {
+	await getSubItemFn();
+});
 </script>
 <style scoped lang="scss">
 .numContent {
@@ -68,13 +81,21 @@ import { ref, reactive, onMounted } from "vue";
 			bottom: 8px;
 			width: 60px;
 			content: "";
-			border-bottom: 1px dashed #4cc4f8;
+			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");
 		}
 		.img {
 			width: 46.5px;
 			height: 64px;
 			margin: auto;
-			background-image: url("../../../../../assets/images/hzImg/xm/greyMarker.png");
 			background-position: center bottom;
 			background-size: 100% 100%;
 		}
@@ -82,5 +103,18 @@ import { ref, reactive, onMounted } from "vue";
 			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-project/largeScreen/largeScreenOne/components/pieChart.vue

@@ -2,36 +2,31 @@
 	<div class="chart" ref="chartDom"></div>
 </template>
 <script setup lang="tsx" name="pieChart">
-import { ref, reactive, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import * as echarts from "echarts";
-const chartDom = ref();
 const props = defineProps<{
 	colorArr: Array<string>;
-	chartData?: {
-		name: string;
-		value: Number;
-	};
+	title: string;
+	total?: any;
+	chartData?: Array<Object>;
 }>();
-onMounted(() => {
-	init();
-});
-const init = () => {
-	let myChart = echarts.init(chartDom.value);
-	let data = [
-		{
-			name: "请款报审",
-			value: 50
+const chartDom = ref();
+let option = {
+	title: {
+		text: props.total,
+		subtext: props.title,
+		top: 60,
+		left: "center",
+		subtextStyle: {
+			color: "white",
+			fontSize: 12
 		},
-		{
-			name: "审定应付",
-			value: 60
+		textStyle: {
+			color: "white",
+			fontSize: 24
 		}
-	];
-	myChart.setOption({
+	},
 	color: props.colorArr,
-		// tooltip: {
-		// 	show: true
-		// },
 	series: [
 		// 主要展示层的
 		{
@@ -50,11 +45,28 @@ const init = () => {
 			// 	}
 			// },
 			name: "请款请款",
-				data: data
+			data: props.chartData
 		}
 	]
-	});
 };
+let myChart = null;
+const setChartData = (newValue, oldValue) => {
+	console.log("图表数据变化", props.total, props.chartData);
+	option.series[0].data = props.chartData;
+	option.title.text = props.total;
+	init();
+};
+watch(() => props.chartData, setChartData, { deep: true });
+watch(() => props.total, setChartData);
+
+const init = () => {
+	myChart = echarts.init(chartDom.value);
+	// let data = props.chartData;
+	myChart.setOption(option);
+};
+onMounted(() => {
+	init();
+});
 </script>
 <style scoped lang="scss">
 .chart {

src/views/hz-project/largeScreen/largeScreenOne/components/projectInfo.vue

@@ -2,52 +2,131 @@
 	<div class="projectInfoBox">
 		<div class="item">
 			<span class="label">项目名称:</span>
-			<span class="value"></span>
+			<span class="value">{{ objData.project_name || "-" }}</span>
 		</div>
 		<div class="item">
 			<span class="label">项目地址:</span>
-			<span class="value"></span>
+			<span class="value">{{ objData.project_address || "-" }}</span>
 		</div>
 		<div class="item">
 			<span class="label">项目经理:</span>
-			<span class="value"></span>
+			<span class="value">{{ objData.project_manage || "-" }}</span>
 		</div>
 		<div class="item">
 			<span class="label">联系电话:</span>
-			<span class="value"></span>
+			<span class="value">{{ objData.project_tel || "-" }}</span>
 		</div>
 		<div class="item">
 			<span class="label">建筑面积:</span>
-			<span class="value"></span>
+			<span class="value">{{ objData.project_acreage || "-" }}</span>
 		</div>
 		<div class="item">
 			<span class="label">开工日期:</span>
-			<span class="value"></span>
+			<span class="value">{{ objData.start_work_date || "-" }}</span>
 		</div>
 		<div class="item">
 			<span class="label">项目编号:</span>
-			<span class="value"></span>
+			<span class="value">{{ objData.project_number || "-" }}</span>
 		</div>
 		<div class="item">
 			<span class="label">工程类别:</span>
-			<span class="value"></span>
+			<span class="value">{{ parseProjectType(objData.project_type) || "-" }}</span>
 		</div>
 		<div class="item">
 			<span class="label">工程用途:</span>
-			<span class="value"></span>
+			<span class="value">{{ objData.engineering_purpose || "-" }}</span>
 		</div>
 		<div class="item">
 			<span class="label">结构类型:</span>
-			<span class="value"></span>
+			<span class="value">{{ objData.structure_type || "-" }}</span>
 		</div>
 		<div class="item">
 			<span class="label">工程状态: </span>
-			<span class="value"></span>
+			<span class="value">{{ parseProjectStatus(objData.build_status) || "-" }}</span>
 		</div>
 	</div>
 </template>
 <script setup lang="tsx" name="projectInfo">
 import { ref, reactive, onMounted } from "vue";
+import { getProjectInfo } from "@/api/modules/projectLargeSreen";
+
+// 项目信息 --- start
+let objData = ref({
+	project_name: "",
+	project_address: "",
+	project_manage: "",
+	project_tel: "",
+	project_acreage: "",
+	start_work_date: "",
+	project_number: "",
+	project_type: "",
+	engineering_purpose: "",
+	structure_type: "",
+	build_status: "",
+	latitude: "",
+	longitude: "",
+	totalDay: ""
+});
+// 定义要发送的emit事件
+const emit = defineEmits(["projectData"]);
+const sendData = (data: any) => {
+	emit("projectData", data);
+};
+// 获取项目信息
+const getProject = async () => {
+	const res: any = await getProjectInfo();
+	objData.value = reactive({ ...res.result });
+	sendData(res.result);
+};
+// 项目信息 --- end
+//解析工程类别
+const parseProjectType = (key: any) => {
+	let name = "";
+	switch (key) {
+		case 1:
+			name = "桥梁";
+			break;
+		case 2:
+			name = "隧道";
+			break;
+		case 3:
+			name = "站场";
+			break;
+		case 4:
+			name = "住宅";
+			break;
+		default:
+			break;
+	}
+	return name;
+};
+//解析工程类别
+const parseProjectStatus = (key: any) => {
+	let name = "";
+	switch (key) {
+		case 0:
+			name = "未开工";
+			break;
+		case 1:
+			name = "在建";
+			break;
+		case 2:
+			name = "停工";
+			break;
+		case 3:
+			name = "验收";
+			break;
+		case 4:
+			name = "完工";
+			break;
+		default:
+			break;
+	}
+	return name;
+};
+onMounted(async () => {
+	await getProject();
+});
 </script>
 <style scoped lang="scss">
 .projectInfoBox {
@@ -58,10 +137,18 @@ import { ref, reactive, onMounted } from "vue";
 	line-height: 14px;
 	color: rgb(255 255 255 / 80%);
 	.item {
-		margin-bottom: 8px;
+		display: flex;
+		margin-bottom: 7px;
 		&:last-child {
 			margin-bottom: 0;
 		}
+		.label {
+			width: 60px;
+			margin-right: 5px;
+		}
+		.value {
+			width: calc(100% - 65px);
+		}
 	}
 }
 </style>

src/views/hz-project/largeScreen/largeScreenOne/components/projectInfoDialog.vue

@@ -109,7 +109,7 @@
 	</div>
 </template>
 <script setup lang="tsx" name="pieChart">
-import { ref, defineEmits, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 // const chartDom = ref();
 // const props = defineProps<{
 // 	colorArr: Array<string>;

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

@@ -6,7 +6,7 @@
 					<img src="@/assets/images/hzImg/xm/xmxx.png" alt="" class="title" />
 				</div>
 				<div class="blockContent" @click="showProjectDialog">
-					<projectInfo></projectInfo>
+					<projectInfo @projectData="getProjectData"></projectInfo>
 				</div>
 			</div>
 			<projectInfoDialog v-show="projectDialog" @close="closeProjectDialog"></projectInfoDialog>
@@ -16,7 +16,7 @@
 				</div>
 				<div class="blockContent chartContent">
 					<div class="chartBox">
-						<pieChart :colorArr="['#EEA959', '#4CC4F8']"></pieChart>
+						<pieChart :colorArr="['#EEA959', '#4CC4F8']" title="支付率" :chartData="payData" :total="payRatio"></pieChart>
 					</div>
 					<div class="detailBox">
 						<div class="item">
@@ -51,14 +51,14 @@
 		</div>
 		<div class="centerBox">
 			<div class="mapBox">
-				<maps></maps>
+				<maps :projectData="projectData"></maps>
 			</div>
 			<div class="blockBox">
 				<div class="blockTitle blockTitle2">
 					<img src="@/assets/images/hzImg/xm/lcb.png" alt="" class="title" />
 				</div>
 				<div class="blockContent">
-					<milestone></milestone>
+					<milestone :projectData="projectData"></milestone>
 				</div>
 			</div>
 		</div>
@@ -69,18 +69,23 @@
 				</div>
 				<div class="blockContent chartContent">
 					<div class="chartBox">
-						<pieChart :colorArr="['#6375C7', '#EC6266']"></pieChart>
+						<pieChart
+							:colorArr="['#6375C7', '#EC6266']"
+							:chartData="saftyData"
+							title="安全问题总数"
+							:total="safetyTotal"
+						></pieChart>
 					</div>
 					<div class="detailBox">
 						<div class="item">
 							<i class="color3 rect"></i>
 							<span class="name">已整改安全问题</span>
-							<span>0</span>
+							<span>{{ saftyData[0].value }}</span>
 						</div>
 						<div class="item">
 							<i class="color4 rect"></i>
 							<span class="name">未整改安全问题</span>
-							<span>0</span>
+							<span>{{ saftyData[1].value }}</span>
 						</div>
 					</div>
 				</div>
@@ -91,18 +96,23 @@
 				</div>
 				<div class="blockContent chartContent">
 					<div class="chartBox">
-						<pieChart :colorArr="['#82FBEA', '#4CC4F8']"></pieChart>
+						<pieChart
+							:colorArr="['#82FBEA', '#4CC4F8']"
+							:chartData="qualityData"
+							title="质量问题总数"
+							:total="qualityTotal"
+						></pieChart>
 					</div>
 					<div class="detailBox">
 						<div class="item">
 							<i class="color5 rect"></i>
 							<span class="name">已整改质量问题</span>
-							<span>0</span>
+							<span>{{ qualityData[0].value }}</span>
 						</div>
 						<div class="item">
 							<i class="color6 rect"></i>
 							<span class="name">未整改质量问题</span>
-							<span>0</span>
+							<span>{{ qualityData[1].value }}</span>
 						</div>
 					</div>
 				</div>
@@ -127,6 +137,19 @@ import milestone from "./components/milestone.vue";
 import maps from "./components/maps.vue";
 import environment from "./components/environment.vue";
 import projectInfoDialog from "./components/projectInfoDialog.vue";
+import { getInspectInfo } from "@/api/modules/projectLargeSreen";
+
+//获取项目信息
+const projectData = ref({
+	latitude: "",
+	longitude: "",
+	totalDay: ""
+});
+const getProjectData = (data: any) => {
+	projectData.value = data;
+};
+
+// 视频弹框 --- start
 const projectDialog = ref(false);
 const showProjectDialog = () => {
 	projectDialog.value = true;
@@ -134,6 +157,60 @@ const showProjectDialog = () => {
 const closeProjectDialog = () => {
 	projectDialog.value = false;
 };
+// 视频弹框 --- end
+
+// 支付管理 --- start
+const payRatio = ref("0%");
+let payData = ref([
+	{
+		name: "审批支付",
+		value: 0
+	},
+	{
+		name: "实际支付",
+		value: 0
+	}
+]);
+// 支付管理 --- end
+
+// 安全质量 --- start
+const safetyTotal = ref(0);
+let saftyData = ref([
+	{
+		name: "已整改安全问题",
+		value: 0
+	},
+	{
+		name: "未整改安全问题",
+		value: 0
+	}
+]);
+const qualityTotal = ref(0);
+let qualityData = ref([
+	{
+		name: "已整改质量问题",
+		value: 0
+	},
+	{
+		name: "未整改质量问题",
+		value: 0
+	}
+]);
+// 获取安全质量信息
+const getInspect = async () => {
+	const res: any = await getInspectInfo();
+	safetyTotal.value = res.result.safetyTotal;
+	saftyData.value[0].value = res.result.safetyCompleted;
+	saftyData.value[1].value = res.result.safetyUnCompleted;
+	qualityTotal.value = res.result.qualityTotal;
+	qualityData.value[0].value = res.result.qualityCompleted;
+	qualityData.value[1].value = res.result.qualityUnCompleted;
+};
+// 安全质量 --- end
+
+onMounted(async () => {
+	await getInspect();
+});
 </script>
 <style scoped lang="scss">
 @import url("./style.scss");