项目信息总览页面开发

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

@@ -188,7 +188,7 @@ const init = () => {
 				},
 				data: [
 					{
-						value: 40
+						value: 86.2
 					}
 				]
 			},

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

@@ -12,7 +12,10 @@ const props = defineProps<{
 	projectData: Object;
 }>();
 const setProjectData = async () => {
-	addMarker();
+	console.log("setProjectData");
+	if (AMapRef.value) {
+		addMarker();
+	}
 };
 watch(() => props.projectData, setProjectData, { deep: true });
 
@@ -80,8 +83,10 @@ const addMarker = () => {
 	// });
 };
 onMounted(async () => {
+	console.log("onMounted");
 	await mapData();
 	createArea();
+	addMarker();
 });
 </script>
 <style scoped lang="scss">

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

@@ -3,7 +3,7 @@
 		<div class="numContent">
 			<div class="item">
 				<span class="name">项目总天数</span>
-				<div class="numBox">{{ $props.projectData.totalDay }}</div>
+				<div class="numBox">{{ props.projectData.totalDay }}</div>
 				<span class="unit">天</span>
 			</div>
 			<div class="item">

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

@@ -50,8 +50,8 @@ let option = {
 	]
 };
 let myChart = null;
-const setChartData = (newValue, oldValue) => {
+const setChartData = () => {
-	console.log("图表数据变化", props.total, props.chartData);
+	// console.log("图表数据变化", props.total, props.chartData);
 	option.series[0].data = props.chartData;
 	option.title.text = props.total;
 	init();

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

@@ -8,14 +8,14 @@
 					<div class="item">
 						<img src="@/assets/images/hzImg/xm/xmmc.png" alt="" />
 						<div>
-							<div class="name">xxx</div>
+							<div class="name">{{ props.projectData.project_name }}</div>
 							<div>项目名称</div>
 						</div>
 					</div>
 					<div class="item">
 						<img src="@/assets/images/hzImg/xm/htje.png" alt="" />
 						<div>
-							<div class="name">xxx</div>
+							<div class="name">8,000,000.00元</div>
 							<div>合同金额</div>
 						</div>
 					</div>
@@ -24,61 +24,61 @@
 					<div class="item">
 						<div class="itemInner">
 							<span class="label">项目编号</span>
-							<span>xxx</span>
+							<span>{{ props.projectData.project_number || "-" }}</span>
 						</div>
 						<div class="itemInner">
 							<span class="label">项目负责人</span>
-							<span>xxx</span>
+							<span>{{ props.projectData.project_manage || "-" }}</span>
 						</div>
 					</div>
 					<div class="item">
 						<div class="itemInner">
 							<span class="label">项目地点</span>
-							<span>xxx</span>
+							<span class="address">{{ props.projectData.project_address || "-" }}</span>
 						</div>
 						<div class="itemInner">
 							<span class="label">项目类型</span>
-							<span>xxx</span>
+							<span>-</span>
 						</div>
 					</div>
 					<div class="item">
 						<div class="itemInner">
 							<span class="label">合同金额</span>
-							<span>xxx</span>
+							<span>8,000,000.00元</span>
 						</div>
 						<div class="itemInner">
 							<span class="label">起止时间</span>
-							<span>xxx</span>
+							<span>{{ props.projectData.start_work_date || "-" }}</span>
 						</div>
 					</div>
 					<div class="item">
 						<div class="itemInner">
 							<span class="label">设计单位</span>
-							<span>xxx</span>
+							<span>-</span>
 						</div>
 						<div class="itemInner">
 							<span class="label">联系人</span>
-							<span>xxx</span>
+							<span>-</span>
 						</div>
 					</div>
 					<div class="item">
 						<div class="itemInner">
 							<span class="label">承建单位</span>
-							<span>xxx</span>
+							<span>-</span>
 						</div>
 						<div class="itemInner">
 							<span class="label">联系人</span>
-							<span>xxx</span>
+							<span>-</span>
 						</div>
 					</div>
 					<div class="item">
 						<div class="itemInner">
 							<span class="label">监理单位</span>
-							<span>xxx</span>
+							<span>-</span>
 						</div>
 						<div class="itemInner">
 							<span class="label">联系人</span>
-							<span>xxx</span>
+							<span>-</span>
 						</div>
 					</div>
 				</div>
@@ -93,13 +93,13 @@
 						</div>
 					</div>
 				</div>
-				<div class="intro">xxx</div>
+				<div class="intro">-</div>
 				<div class="fieList">
 					<img src="@/assets/images/hzImg/xm/icon-left.png" alt="" class="icon-left" />
 					<div class="fileBox">
-						<div class="item" v-for="item in 9" :key="index">
+						<div class="item" v-for="item in 9" :key="item">
 							<img src="@/assets/images/hzImg/xm/pdf.png" alt="" class="icon-left" />
-							<div class="name">xxx</div>
+							<div class="name">-</div>
 						</div>
 					</div>
 					<img src="@/assets/images/hzImg/xm/icon-right.png" alt="" class="icon-right" />
@@ -110,14 +110,9 @@
 </template>
 <script setup lang="tsx" name="pieChart">
 import { ref, onMounted } from "vue";
-// const chartDom = ref();
+const props = defineProps<{
-// const props = defineProps<{
+	projectData: Object;
-// 	colorArr: Array<string>;
+}>();
-// 	chartData?: {
-// 		name: string;
-// 		value: Number;
-// 	};
-// }>();
 
 onMounted(() => {
 	// init();
@@ -204,6 +199,14 @@ const closeFn = () => {
 				border-right: 1px solid #1e3758;
 			}
 		}
+		.address {
+			display: inline-block;
+			width: 150px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			vertical-align: top;
+		}
 	}
 }
 .intro {

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

@@ -9,7 +9,7 @@
 					<projectInfo @projectData="getProjectData"></projectInfo>
 				</div>
 			</div>
-			<projectInfoDialog v-show="projectDialog" @close="closeProjectDialog"></projectInfoDialog>
+			<projectInfoDialog v-show="projectDialog" @close="closeProjectDialog" :projectData="projectData"></projectInfoDialog>
 			<div class="blockBox">
 				<div class="blockTitle">
 					<img src="@/assets/images/hzImg/xm/zfgl.png" alt="" class="title" />
@@ -22,22 +22,22 @@
 						<div class="item">
 							<i class="rect"></i>
 							<span class="name">请款金额</span>
-							<span>0</span>
+							<span>607.5万</span>
 						</div>
 						<div class="item">
 							<i class="rect"></i>
 							<span class="name">变更金额</span>
-							<span>0</span>
+							<span>7.5万</span>
 						</div>
 						<div class="item">
 							<i class="color1 rect"></i>
 							<span class="name">审批支付</span>
-							<span>0</span>
+							<span>600万</span>
 						</div>
 						<div class="item">
 							<i class="color2 rect"></i>
 							<span class="name">实际支付</span>
-							<span>0</span>
+							<span>582万</span>
 						</div>
 					</div>
 				</div>
@@ -46,7 +46,9 @@
 				<div class="blockTitle">
 					<img src="@/assets/images/hzImg/xm/gdxcsp.png" alt="" class="title" />
 				</div>
-				<div class="blockContent" style="height: 236px"></div>
+				<div class="blockContent" style="height: 236px">
+					<img src="@/assets/images/hzImg/xm/video.png" alt="" width="100%" height="100%" />
+				</div>
 			</div>
 		</div>
 		<div class="centerBox">
@@ -160,15 +162,15 @@ const closeProjectDialog = () => {
 // 视频弹框 --- end
 
 // 支付管理 --- start
-const payRatio = ref("0%");
+const payRatio = ref("97%");
 let payData = ref([
 	{
 		name: "审批支付",
-		value: 0
+		value: 600
 	},
 	{
 		name: "实际支付",
-		value: 0
+		value: 582
 	}
 ]);
 // 支付管理 --- end