From 4758a5d6d3621f938a61d162ceaefa5ddf9d2e3b Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Tue, 18 Jun 2024 19:01:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../largeScreenOne/components/milestone.vue   | 261 +++++++++++-------
 1 file changed, 156 insertions(+), 105 deletions(-)

diff --git a/src/views/hz-enterprise/largeScreen/largeScreenOne/components/milestone.vue b/src/views/hz-enterprise/largeScreen/largeScreenOne/components/milestone.vue
index 9744bad..ff58d51 100644
--- a/src/views/hz-enterprise/largeScreen/largeScreenOne/components/milestone.vue
+++ b/src/views/hz-enterprise/largeScreen/largeScreenOne/components/milestone.vue
@@ -6,84 +6,115 @@
 			<span>项目里程碑</span>
 		</div>
 		<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" />
+			<img src="@/assets/images/xmgl/projectScreenIcon2.png" alt="" srcset="" class="left-arrow" @click="reduceLeftDistance" />
+			<img src="@/assets/images/xmgl/projectScreenIcon2.png" alt="" srcset="" class="right-arrow" @click="addLeftDistance" />
 			<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 class="stage-body">
+					<div class="stage-body-content" :style="{ marginLeft: leftDistance + 'px' }">
+						<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 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 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>
 		</div>
@@ -92,12 +123,26 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { getEntSubItem } from "@/api/modules/huizhou";
+import { ElMessage } from "element-plus";
 const props = defineProps<{
 	projectData: Object;
 	engineeringSn: String;
 }>();
+const leftDistance = ref(0);
 // 获取里程碑信息
 let objData = ref([]);
+// 添加偏移距离
+const addLeftDistance = () => {
+	if (leftDistance.value == 0) {
+		ElMessage.warning("已经到底啦");
+	} else {
+		leftDistance.value = leftDistance.value + 20;
+	}
+};
+// 减少偏移距离
+const reduceLeftDistance = () => {
+	leftDistance.value = leftDistance.value - 20;
+};
 const getSubItemFn = async () => {
 	const res: any = await getEntSubItem({ engineeringSn: props.engineeringSn });
 	objData.value = res.result;
@@ -153,7 +198,7 @@ onMounted(async () => {
 		}
 		.stage-content {
 			width: 88%;
-			height: 90%;
+			height: 92%;
 			margin-left: 4%;
 			display: flex;
 			font-size: 14px;
@@ -167,37 +212,43 @@ onMounted(async () => {
 					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;
+			.stage-body {
+				overflow: hidden;
+				.stage-body-content {
+					display: flex;
+					.stage-box {
+						height: 100%;
+						display: flex;
+						align-items: center;
+						flex-direction: column;
+						justify-content: space-between;
+						margin-top: -3px;
+						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;
+						}
+					}
 				}
 			}
 		}