flx:修改进度小数点问题

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

@@ -667,7 +667,7 @@ onMounted(() => {
 	width: 100%;
 	height: 500px;
 	// margin: 20px 0;
-	background-image: url("@/assets/images/bthgIcon/bgIndex_1.png");
+	background-image: url("@/assets/images/bthgIcon/bgIndex_2.png");
 	background-repeat: no-repeat;
 	background-size: 100% 100%;
 	position: relative;

src/views/sevenLargeScreen/qualityControl/schedulePlan/ganttChart.vue

@@ -21,30 +21,51 @@
 						</div>
 					</th>
 					<!-- <th rowspan="2">装置名称</th> -->
-					<th :colspan="monthListUp(item).length" v-for="(item, index) in props.yearList" :key="index">{{ item }}年</th>
+					<th 
+						v-for="(item, index) in props.yearList" 
+						:key="`year-${index}`"
+						:colspan="monthListUp(item).length"
+					>
+						{{ item }}年
+					</th>
 				</tr>
 				<tr>
 					<!-- <th>前期阶段</th> -->
-					<template v-for="item in props.yearList">
+					<template v-for="item in props.yearList" :key="`month-${item}`">
-						<th v-for="ele in monthListUp(item)" :key="item + '-' + ele">
+						<th 
+							v-for="ele in monthListUp(item)" 
+							:key="`${item}-${ele}`"
+						>
 							{{ ele }}
 						</th>
 					</template>
 				</tr>
-				<tr class="td_header_boxs" v-for="(item, index) in props.milestoneList" :key="item.id">
+				<tr 
+					class="td_header_boxs" 
+					v-for="(item, index) in props.milestoneList" 
+					:key="`milestone-${item.id}`"
+				>
 					<td class="th_sticky" colspan="3">里程碑</td>
-					<template v-for="(time, tIndex) in props.yearList">
+					<template v-for="(time, tIndex) in props.yearList" :key="`time-${time}`">
-						<td v-for="month in monthListUp(time)" :key="time + '-' + month">
+						<td 
+							v-for="month in monthListUp(time)" 
+							:key="`${time}-${month}`"
+						>
 							<div>
-								<template v-for="(ele, eindex) in getQuarterTime(`${time}-${month}-01`, 'month')">
+								<template v-for="(ele, eindex) in getQuarterTime(`${time}-${month}-01`, 'month')" :key="`quarter-${ele}`">
 									<div>
-										<template v-for="option in item.firstQuarterList">
+										<template v-for="option in item.firstQuarterList" :key="`option-${option.id}`">
 											<div
 												class="triangle_box"
-												v-if="ele - 1 == getCurrentQuarterTime(option.beginDate, `${time}-${month}`, 'month')"
+												v-if="Number(ele) - 1 === getCurrentQuarterTime(option.beginDate, `${time}-${month}`, 'month')"
 											>
 												<div></div>
-												<el-tooltip class="item" effect="dark" :content="option.name" placement="top">
+												<el-tooltip 
+													class="item" 
+													effect="dark" 
+													:content="option.name" 
+													placement="top"
+												>
 													<div>{{ formatTime(option) }}{{ option.name }}</div>
 												</el-tooltip>
 											</div>
@@ -67,18 +88,31 @@
 				:infinite-scroll-distance="1"
 				:infinite-scroll-immediate="false"
 			>
-				<template v-for="(cur, index) in splitData">
+				<template v-for="(cur, index) in splitData" :key="`cur-${cur.id}`">
 					<!-- <template v-for="(planItem, index) in cur.children"> -->
-					<tr class="td_start_boxs" v-for="(item, planIndex) in cur.children" :key="item.id">
+					<tr 
+						class="td_start_boxs" 
+						v-for="(item, planIndex) in cur.children" 
+						:key="`item-${item.id}`"
+					>
 						<!-- <td class="td_sticky" v-show="planIndex == 0" :rowspan="cur.children.length">
 								{{ cur.name }}
 							</td> -->
-						<td class="td_sticky" v-show="planIndex == 0" :rowspan="cur.children.length">{{ cur.name }}</td>
+						<td 
+							class="td_sticky" 
+							v-show="planIndex == 0" 
+							:rowspan="cur.children.length"
+						>
+							{{ cur.name }}
+						</td>
 						<td class="td_sticky td_sticky1">{{ item.name }}</td>
-						<template v-for="(time, tIndex) in yearList">
+						<template v-for="(time, tIndex) in yearList" :key="`time-${time}`">
-							<td v-for="month in monthListUp(time)" :key="time + '-' + month">
+							<td 
+								v-for="month in monthListUp(time)" 
+								:key="`${time}-${month}`"
+							>
 								<div>
-									<template v-for="(ele, eindex) in getQuarterTime(`${time}-${month}-01`, 'month')">
+									<template v-for="(ele, eindex) in getQuarterTime(`${time}-${month}-01`, 'month')" :key="`quarter-${ele}`">
 										<div
 											:class="{
 												schedule_ff00:
@@ -89,11 +123,11 @@
 													getQuarterTime(`${time}-${month}-${ele}`, 'month', item.minStartTime, item.maxEndTime)
 											}"
 										>
-											<template v-for="option in item.firstQuarterList">
+											<template v-for="option in item.firstQuarterList" :key="`option-${option.id}`">
 												<!-- <el-tooltip :value="true" v-if="ele - 1 == getCurrentQuarterTime(option.yearTime, `${time}-${month}`, 'month')" class="item" effect="light" :content="option.name" placement="top"> -->
 												<div
 													class="circle_box"
-													v-if="ele - 1 == getCurrentQuarterTime(option.beginDate, `${time}-${month}`, 'month')"
+													v-if="Number(ele) - 1 === getCurrentQuarterTime(option.beginDate, `${time}-${month}`, 'month')"
 												>
 													<div
 														:class="{
@@ -103,10 +137,19 @@
 														}"
 														@click="option.isShowHidden = !option.isShowHidden"
 													></div>
-													<div class="shape" v-show="option.isShowHidden">
+													<div 
+														class="shape" 
+														v-show="option.isShowHidden"
+														ref="shapeRefs"
+													>
 														<!-- option.milestoneType == 2 -->
 														<div :class="{ plan_flag: option.completeType == 1 }"></div>
-														<el-tooltip class="item" effect="dark" :content="option.name" placement="top">
+														<el-tooltip 
+															class="item" 
+															effect="dark" 
+															:content="option.name" 
+															placement="top"
+														>
 															<div class="text_space" :class="{ indent: option.completeType == 1 }">
 																{{ formatTime(option) }}{{ option.name }}
 															</div>
@@ -130,7 +173,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, onMounted, watch, onUpdated, nextTick, computed, onUnmounted } from "vue";
+import { reactive, ref, onMounted, watch, onUpdated, nextTick, computed, onUnmounted, onBeforeUpdate } from "vue";
 import dayjs from "dayjs";
 import quarterOfYear from "dayjs/plugin/quarterOfYear";
 import isBetween from "dayjs/plugin/isBetween";
@@ -411,6 +454,59 @@ const setIntervalTimeFn2 = () => {
 	gasanalysisInfo.setIntervalTime2 = requestAnimationFrame(setIntervalTimeFn2);
 }
 
+// 使用refs来存储shape元素
+const shapeRefs = ref<HTMLElement[]>([]);
+
+// 使用防抖函数优化频繁操作
+const debounce = (fn: Function, delay: number) => {
+	let timer: ReturnType<typeof setTimeout> | null = null;
+	return (...args: any[]) => {
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => {
+			fn.apply(this, args);
+		}, delay);
+	};
+};
+
+// 优化IntersectionObserver
+const setupIntersectionObserver = () => {
+	const io = new IntersectionObserver((entries) => {
+		entries.forEach(entry => {
+			if (entry.isIntersecting) {
+				const shape = entry.target as HTMLElement;
+				const rhombus = shape.previousElementSibling as HTMLElement;
+				
+				if (rhombus) {
+					const shapeRect = shape.getBoundingClientRect();
+					const rhombusRect = rhombus.getBoundingClientRect();
+					
+					// 检查重叠
+					const overlap = Math.min(shapeRect.right, rhombusRect.right) - Math.max(shapeRect.left, rhombusRect.left);
+					
+					if (overlap > 0) {
+						// 计算移动距离
+						const moveDistance = overlap + 10; // 10px的间距
+						shape.style.transform = `translateX(${moveDistance}px)`;
+						
+						// 调整箭头位置
+						const arrow = shape.querySelector('.popper__arrow') as HTMLElement;
+						if (arrow) {
+							const offset = rhombusRect.left - shapeRect.left;
+							arrow.style.left = `${offset}px`;
+						}
+					}
+				}
+			}
+		});
+	}, {
+		threshold: 0.1,
+		rootMargin: '0px'
+	});
+
+	return io;
+};
+
+// 在组件挂载时设置观察器
 onMounted(() => {
 	console.log("挂载了");
 	console.log(props.showDwon);
@@ -421,28 +517,34 @@ onMounted(() => {
 			setIntervalTimeFn();
 		};
 
-		// io 为 IntersectionObserver对象 - 由IntersectionObserver()构造器创建
+		// const io = setupIntersectionObserver();
-        // var io = new IntersectionObserver((entries) => {
+		// shapeRefs.value.forEach(shape => {
-        //     //entries 为 IntersectionObserverEntry对像数组
+		// 	io.observe(shape);
-        //     entries.forEach((item: any) => {
+		// });
-        //         //item 为 IntersectionObserverEntry对像
+	});
-        //         // isIntersecting是一个Boolean值，判断目标元素当前是否可见
+});
-        //         if (item.isIntersecting) {
+
-        //             //div 可见时 进行相关操作
+// 在组件更新前清理旧的观察器
-        //             console.log(1122333, item, item.target.__vnode, item.target.__vnode.el);
+onBeforeUpdate(() => {
-		// 			// console.log(document.getElementsByClassName(item.target.className) as any);
+	shapeRefs.value = [];
-		// 			console.log(item.target.__vnode.el.previousElementSibling);
+});
-		// 			// console.log(item.currentTarget.previousElementSibling);
+
-		// 			// console.log(item.currentTarget.previousElementSibling.getBoundingClientRect());
+// 在组件更新后重新设置观察器
-		// 			console.log(item.target.__vnode.el.nextElementSibling);
+onUpdated(() => {
-        //             io.unobserve(item.target); //停止监听该div DOM节点
+	console.log("更新");
-        //         }
+	cancelAnimationFrame(gasanalysisInfo.setIntervalTime2);
-        //     });
+	cancelAnimationFrame(gasanalysisInfo.setIntervalTime);
-        // }); //不传options参数，默认根元素为浏览器视口
+	if(store.schedulePlanFlag) {
-        // const divArr = [...document.querySelectorAll(".shape") as any];
+		gasanalysisInfo.setIntervalScrollLeft = 0;
-        // divArr.forEach((div) => io.observe(div)); // 遍历监听所有div DOM节点
+		setIntervalTimeFn();
-	})
+	}
-})
+
+	nextTick(() => {
+		setTimeout(() => {
+			userInfo.isLoading = false;
+		}, 1000);
+	});
+});
 
 watch(() => store.schedulePlanFlag, (newVal) => {
 	cancelAnimationFrame(gasanalysisInfo.setIntervalTime);
@@ -452,12 +554,11 @@ watch(() => store.schedulePlanFlag, (newVal) => {
 	}
 }, { deep: true });
 
-
+// 组件卸载时清理
-onUnmounted(()=>{
+onUnmounted(() => {
-  // 销毁定时器
+	cancelAnimationFrame(gasanalysisInfo.setIntervalTime);
-  cancelAnimationFrame(gasanalysisInfo.setIntervalTime);
+	cancelAnimationFrame(gasanalysisInfo.setIntervalTime2);
-  cancelAnimationFrame(gasanalysisInfo.setIntervalTime2);
+});
-})
 </script>
 
 <style lang="scss" scoped>