merge origin main conflicts resolved
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user