merge origin main conflicts resolved

This commit is contained in:
2026-04-23 13:20:29 +08:00
14 changed files with 236 additions and 199 deletions

View File

@@ -90,10 +90,10 @@ export default {
type: Array,
default: () => []
},
/** 容器高度,综合看板等场景可传 100% 以撑满父级 */
/** 容器高度 */
height: {
type: String,
default: '800px'
default: '4800px'
},
/** 综合看板:紧凑、防重叠、三色状态、小圆点 */
dashboardMode: {
@@ -106,9 +106,7 @@ export default {
return {
width: '100%',
height: this.height,
minHeight: this.dashboardMode ? '300px' : '240px',
/* 看板嵌在横向 flex 内,避免 min-width:auto 把可用宽压成 0 */
...(this.dashboardMode ? { minWidth: 0, boxSizing: 'border-box' } : {})
minHeight: this.dashboardMode ? '1200px' : '240px'
}
}
},
@@ -120,92 +118,37 @@ export default {
clickEvent: null, // 新增:存储点击事件句柄,用于销毁解绑
users: [],
supplierList: [],
chartResizeObserver: null,
chartResizeObserverRaf: null
};
},
watch: {
// 监听列表数据变化,自动更新图表
list: {
deep: true,
handler () {
this.$nextTick(() => {
if (this.chartInstance) {
this.initChart();
});
}
}
}
},
mounted () {
this.initChart();
this.deferResizeChart();
this.$nextTick(() => this.resizeChart());
window.addEventListener('resize', this.resizeChart);
this.$nextTick(() => {
this.bindChartResizeObserver();
});
},
beforeDestroy () {
window.removeEventListener('resize', this.resizeChart);
this.unbindChartResizeObserver();
// 新增解绑Echarts点击事件防止内存泄漏
if (this.chartInstance && this.clickEvent) {
this.chartInstance.off('click', this.clickEvent);
}
// 销毁图表实例,防止内存泄漏
this.chartInstance?.dispose();
},
methods: {
// 优化:增加防抖处理-窗口自适应,避免频繁触发
resizeChart () {
this.chartInstance?.resize();
},
/**
* 供综合看板在切换 Tab 后调用Tab 从 display:none 变为可见后需重新测量画布。
*/
scheduleResize () {
this.deferResizeChart();
},
/**
* el-tab / flex 布局下首帧常为 0 宽高,生产环境更明显;延迟到布局稳定后再 resize。
*/
deferResizeChart () {
this.$nextTick(() => {
this.$nextTick(() => {
requestAnimationFrame(() => {
this.resizeChart();
requestAnimationFrame(() => this.resizeChart());
});
});
});
},
bindChartResizeObserver () {
if (!this.dashboardMode || typeof ResizeObserver === 'undefined') {
return;
}
const el = this.$refs.chart;
if (!el) {
return;
}
this.unbindChartResizeObserver();
this.chartResizeObserver = new ResizeObserver(() => {
if (this.chartResizeObserverRaf != null) {
cancelAnimationFrame(this.chartResizeObserverRaf);
}
this.chartResizeObserverRaf = requestAnimationFrame(() => {
this.chartResizeObserverRaf = null;
this.resizeChart();
});
});
this.chartResizeObserver.observe(el);
},
unbindChartResizeObserver () {
if (this.chartResizeObserverRaf != null) {
cancelAnimationFrame(this.chartResizeObserverRaf);
this.chartResizeObserverRaf = null;
}
if (this.chartResizeObserver) {
this.chartResizeObserver.disconnect();
this.chartResizeObserver = null;
}
this.chartInstance?.resize()
},
handleSubmit () {
@@ -345,13 +288,11 @@ export default {
};
},
// 初始化图表
initChart () {
const dom = this.$refs.chart;
if (!dom) {
return;
}
// 初始化图表实例
if (!this.chartInstance) {
this.chartInstance = echarts.init(dom);
this.chartInstance = echarts.init(this.$refs.chart);
}
// 重要:先解绑已有点击事件,防止多次绑定导致弹窗多次触发
if (this.clickEvent) {
@@ -391,24 +332,24 @@ export default {
type: 'tree',
data: [treeData],
/* 与折线图区域一致:留白、白底在容器上 */
...(dm ? { left: '1%', right: '5%', top: '2%', bottom: '2%' } : {}),
...(dm ? { left: '3%', right: '8%', top: '4%', bottom: '4%' } : {}),
symbol: 'circle',
...(dm ? {} : { symbolSize: 6 }),
edgeShape: dm ? 'polyline' : 'curve',
edgeForkPosition: dm ? '74%' : '50%',
edgeForkPosition: dm ? '68%' : '50%',
orient: 'LR',
initialTreeDepth: 4,
initialTreeDepth: 3,
roam: true,
scaleLimit: dm ? { min: 0.22, max: 5 } : undefined,
expandAndCollapse: false,
scaleLimit: dm ? { min: 0.3, max: 4 } : undefined,
label: {
show: true,
fontSize: dm ? 11 : 12,
fontWeight: 400,
position: 'left',
position: 'top',
verticalAlign: 'middle',
...(dm ? { align: 'right' } : {}),
distance: 8,
overflow: 'none',
distance: 6,
overflow: 'break',
lineHeight: dm ? 15 : 14,
color: dm ? '#606266' : undefined
},
@@ -417,46 +358,59 @@ export default {
*/
levels: dm
? [
{
symbolSize: 18,
itemStyle: { borderWidth: 2, borderColor: '#fff' },
label: {
position: 'top',
distance: 8,
fontSize: 13,
fontWeight: 600,
width: 140,
overflow: 'break',
lineHeight: 16,
padding: [4, 8, 4, 8]
}
},
{
symbolSize: 14,
itemStyle: { borderWidth: 1.5, borderColor: '#fff' },
label: {
position: 'top',
distance: 6,
fontSize: 12,
width: 180,
overflow: 'break',
lineHeight: 15,
padding: [3, 6, 3, 6]
}
},
{
symbolSize: 10,
itemStyle: { borderWidth: 1, borderColor: '#fff', shadowBlur: 2, shadowColor: 'rgba(0,0,0,0.1)' },
label: {
position: 'top',
verticalAlign: 'bottom',
distance: 6,
fontSize: 11,
width: 180,
overflow: 'break',
lineHeight: 14,
padding: [3, 6, 3, 6]
}
},
{
symbolSize: 6,
itemStyle: { borderWidth: 1, borderColor: '#fff' },
label: {
position: 'left',
distance: 8,
fontSize: 11,
width: 118,
position: 'bottom',
verticalAlign: 'top',
distance: 4,
fontSize: 10,
width: 140,
overflow: 'break',
lineHeight: 14,
padding: [2, 6, 2, 6]
}
},
{
symbolSize: 5,
itemStyle: { borderWidth: 1, borderColor: '#fff' },
label: {
position: 'left',
distance: 10,
fontSize: 11,
width: 160,
overflow: 'break',
lineHeight: 14,
padding: [2, 8, 2, 6]
}
},
{
symbolSize: 4,
itemStyle: { borderWidth: 1, borderColor: '#fff', shadowBlur: 2, shadowColor: 'rgba(0,0,0,0.1)' },
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left',
distance: 12,
fontSize: 11,
width: 232,
overflow: 'break',
lineHeight: 15,
padding: [2, 8, 2, 8],
formatter: (p) => this.wrapLabelText(p.name, 17)
lineHeight: 13,
padding: [2, 4, 2, 4]
}
}
]
@@ -467,22 +421,22 @@ export default {
{ symbolSize: 3 }
],
lineStyle: {
width: dm ? 1 : 1.2,
curveness: dm ? 0.1 : 0.3,
color: dm ? '#e4e7ed' : '#ccc'
width: 1,
curveness: 0.5,
color: '#c0c4cc'
},
emphasis: {
focus: 'descendant',
lineStyle: { width: 2, color: '#409eff' },
itemStyle: dm ? { shadowBlur: 6, shadowColor: 'rgba(64,158,255,0.45)' } : undefined
itemStyle: { shadowBlur: 10, shadowColor: 'rgba(64,158,255,0.5)' }
},
expandAndCollapse: true,
animationDuration: 280
animationDuration: 300
}
]
};
// 渲染图表
this.chartInstance?.setOption(option, true);
this.deferResizeChart();
this.clickEvent = (params) => {
const data = params.data;
@@ -520,16 +474,12 @@ export default {
flex-direction: column;
height: 100%;
min-height: 0;
width: 100%;
min-width: 0;
}
/* 与综合看板折线图区域一致:白底、细边框、轻圆角 */
.xmind-box--dashboard .xmind-container {
flex: 1;
min-height: 0;
min-width: 0;
width: 100%;
background: #fff;
border: 1px solid #ebeef5;
border-radius: 6px;
@@ -572,4 +522,4 @@ export default {
:deep(.dialog-footer) {
text-align: center;
}
</style>
</style>

View File

@@ -282,7 +282,6 @@ export default {
this.getScheduleDetail(row);
this.$nextTick(() => this.clearPaceDeepLinkQuery());
},
// 关闭细节窗口
closeDetailShow (done) {
this.scheduleStepFocusHint = null;
this.getList();
@@ -319,14 +318,13 @@ export default {
},
getList () {
this.loading = true
console.log(this.queryParams, this.searchTime)
/* 日期搜索条件 */
if (this.searchTime && this.searchTime.length) {
this.queryParams.startTime = this.getDateStr(this.searchTime[0])
this.queryParams.endTime = this.getDateStr(this.searchTime[1])
}
this.queryParams.projectId = this.$route.query.projectId?this.$route.query.projectId:null
this.queryParams.trackId = this.$route.query.trackId?this.$route.query.trackId:null
listProjectSchedule(this.queryParams).then(res => {
this.scheduleList = res.rows
this.total = res.total