+
+
+
+ 已选
+ {{ col.itemName || col.metricName || '' }}
+
+
+ 待选
+ {{ col.itemName || col.metricName || '' }}
+
+
@@ -498,7 +524,10 @@ export default {
backfilling: false,
progressOpen: false, progressTitle: '', progressTasks: [],
anomalyOpen: false, anomalyMap: {},
- chartOpen: false, _chartInstances: []
+ chartOpen: false, _chartInstances: [],
+ chartSelectedKeys: [],
+ _chartTagDragIdx: -1,
+ _chartTagDragOverIdx: -1
}
},
computed: {
@@ -599,6 +628,15 @@ export default {
const key = 'mv' + col.mIdx
return this.gridRows.some(r => r[key] != null)
})
+ },
+ chartActiveCols() {
+ return this.chartSelectedKeys
+ .map(key => this.chartDataCols.find(c => this.getColKey(c) === key))
+ .filter(Boolean)
+ },
+ chartUnselectedCols() {
+ const set = new Set(this.chartSelectedKeys)
+ return this.chartDataCols.filter(c => !set.has(this.getColKey(c)))
}
},
watch: { configOpen(v) { if (!v) this.rpOpen = false } },
@@ -1266,11 +1304,68 @@ export default {
}
return makeOption(label, [{ type: 'line', data: rows.map(r => { const v = parseFloat(r['mv'+col.mIdx]); return isNaN(v) ? 0 : v }), smooth: true }])
},
+ getColKey(col) {
+ if (col.$type === 'detail') return 'd-' + col.itemId
+ return 'm-' + (col.metricId != null ? col.metricId : 'idx' + col.mIdx)
+ },
+ loadChartSelection() {
+ if (!this.activeReport) return
+ const key = 'cost_chart_cols_' + this.activeReport.reportId
+ const allKeys = this.chartDataCols.map(c => this.getColKey(c))
+ try {
+ const saved = localStorage.getItem(key)
+ if (saved) {
+ const parsed = JSON.parse(saved)
+ this.chartSelectedKeys = (parsed.selected || []).filter(k => allKeys.includes(k))
+ return
+ }
+ } catch (e) { /* ignore */ }
+ // default: select all
+ this.chartSelectedKeys = [...allKeys]
+ },
+ saveChartSelection() {
+ if (!this.activeReport) return
+ const key = 'cost_chart_cols_' + this.activeReport.reportId
+ localStorage.setItem(key, JSON.stringify({ selected: this.chartSelectedKeys }))
+ },
+ addChartCol(key) {
+ this.chartSelectedKeys.push(key)
+ this.saveChartSelection()
+ this.renderCharts()
+ },
+ removeChartCol(key) {
+ const idx = this.chartSelectedKeys.indexOf(key)
+ if (idx >= 0) this.chartSelectedKeys.splice(idx, 1)
+ this.saveChartSelection()
+ this.renderCharts()
+ },
+ onChartTagDragStart(e, idx) {
+ this._chartTagDragIdx = idx
+ this._chartTagDragOverIdx = -1
+ if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move'
+ },
+ onChartTagDragEnter(idx) { this._chartTagDragOverIdx = idx },
+ onChartTagDragLeave() { this._chartTagDragOverIdx = -1 },
+ onChartTagDragEnd() { this._chartTagDragIdx = -1; this._chartTagDragOverIdx = -1 },
+ onChartTagDrop(targetIdx) {
+ if (this._chartTagDragIdx < 0 || this._chartTagDragIdx === targetIdx) { this._chartTagDragIdx = -1; this._chartTagDragOverIdx = -1; return }
+ const [item] = this.chartSelectedKeys.splice(this._chartTagDragIdx, 1)
+ const insertAt = this._chartTagDragIdx < targetIdx ? targetIdx - 1 : targetIdx
+ this.chartSelectedKeys.splice(insertAt, 0, item)
+ this._chartTagDragIdx = -1
+ this._chartTagDragOverIdx = -1
+ this.saveChartSelection()
+ this.renderCharts()
+ },
+ onChartOpen() {
+ this.loadChartSelection()
+ this.renderCharts()
+ },
renderCharts() {
this.disposeCharts()
this.$nextTick(() => {
this._chartInstances = []
- this.chartDataCols.forEach((col, idx) => {
+ this.chartActiveCols.forEach((col, idx) => {
const el = this.$refs['chart_'+idx]
if (!el || !el[0]) return
const chart = echarts.init(el[0])
@@ -1344,9 +1439,16 @@ export default {
/deep/ .summary-row td .cell { color: #303133; }
.summary-label { font-weight: bold; color: #303133; padding: 0 5px; }
.summary-val { font-weight: bold; color: #303133; }
-/deep/ .chart-fullscreen { width: 100% !important; max-width: 100% !important; height: 100vh !important; margin: 0 !important; }
-/deep/ .chart-fullscreen .el-dialog__body { height: calc(100vh - 90px); overflow: auto; padding: 16px 20px; }
-/deep/ .chart-fullscreen .el-dialog__header { padding: 12px 20px; }
+/deep/ .chart-fullscreen { width: 100% !important; max-width: 100% !important; height: 100vh !important; margin: 0 !important; display: flex; flex-direction: column; }
+/deep/ .chart-fullscreen .el-dialog__body { flex: 1; max-height: none; overflow: auto; padding: 16px 20px; }
+/deep/ .chart-fullscreen .el-dialog__header { padding: 12px 20px; flex-shrink: 0; }
+.chart-tag-bar { padding: 0 4px 8px; }
+.chart-tag-row { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
+.chart-tag-row:last-child { margin-bottom: 0; }
+.chart-tag-label { font-size: 12px; color: #909399; margin-right: 4px; flex-shrink: 0; }
+/deep/ .chart-tag-row .el-tag { transition: transform 0.15s, opacity 0.15s; user-select: none; margin: 1px 4px 1px 0; }
+/deep/ .chart-tag-row .el-tag.is-dragging { opacity: 0.3; transform: scale(0.92); }
+/deep/ .chart-tag-row .el-tag.drag-over { transform: translateY(-2px); border-color: #409eff !important; }
.chart-grid { display: flex; flex-wrap: wrap; }
.chart-item { width: 33.33%; padding: 6px; box-sizing: border-box; }