flx:修改进度小数点问题
This commit is contained in:
parent
d486f0fde9
commit
336af6abd3
BIN
src/assets/images/bthgIcon/bgIndex_2.png
Normal file
BIN
src/assets/images/bthgIcon/bgIndex_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||
|
||||
@ -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">
|
||||
<th v-for="ele in monthListUp(item)" :key="item + '-' + ele">
|
||||
<template v-for="item in props.yearList" :key="`month-${item}`">
|
||||
<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">
|
||||
<td v-for="month in monthListUp(time)" :key="time + '-' + month">
|
||||
<template v-for="(time, tIndex) in props.yearList" :key="`time-${time}`">
|
||||
<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">
|
||||
<td v-for="month in monthListUp(time)" :key="time + '-' + month">
|
||||
<template v-for="(time, tIndex) in yearList" :key="`time-${time}`">
|
||||
<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()构造器创建
|
||||
// var io = new IntersectionObserver((entries) => {
|
||||
// //entries 为 IntersectionObserverEntry对像数组
|
||||
// entries.forEach((item: any) => {
|
||||
// //item 为 IntersectionObserverEntry对像
|
||||
// // isIntersecting是一个Boolean值，判断目标元素当前是否可见
|
||||
// if (item.isIntersecting) {
|
||||
// //div 可见时 进行相关操作
|
||||
// console.log(1122333, item, item.target.__vnode, item.target.__vnode.el);
|
||||
// // console.log(document.getElementsByClassName(item.target.className) as any);
|
||||
// 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);
|
||||
// io.unobserve(item.target); //停止监听该div DOM节点
|
||||
// }
|
||||
// });
|
||||
// }); //不传options参数，默认根元素为浏览器视口
|
||||
// const divArr = [...document.querySelectorAll(".shape") as any];
|
||||
// divArr.forEach((div) => io.observe(div)); // 遍历监听所有div DOM节点
|
||||
})
|
||||
})
|
||||
// const io = setupIntersectionObserver();
|
||||
// shapeRefs.value.forEach(shape => {
|
||||
// io.observe(shape);
|
||||
// });
|
||||
});
|
||||
});
|
||||
|
||||
// 在组件更新前清理旧的观察器
|
||||
onBeforeUpdate(() => {
|
||||
shapeRefs.value = [];
|
||||
});
|
||||
|
||||
// 在组件更新后重新设置观察器
|
||||
onUpdated(() => {
|
||||
console.log("更新");
|
||||
cancelAnimationFrame(gasanalysisInfo.setIntervalTime2);
|
||||
cancelAnimationFrame(gasanalysisInfo.setIntervalTime);
|
||||
if(store.schedulePlanFlag) {
|
||||
gasanalysisInfo.setIntervalScrollLeft = 0;
|
||||
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(()=>{
|
||||
// 销毁定时器
|
||||
cancelAnimationFrame(gasanalysisInfo.setIntervalTime);
|
||||
cancelAnimationFrame(gasanalysisInfo.setIntervalTime2);
|
||||
})
|
||||
// 组件卸载时清理
|
||||
onUnmounted(() => {
|
||||
cancelAnimationFrame(gasanalysisInfo.setIntervalTime);
|
||||
cancelAnimationFrame(gasanalysisInfo.setIntervalTime2);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user