From 656df92fa586abc9ae7e840079526ac40b6a8e6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Sat, 11 Jul 2026 15:43:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(cost):=20=E6=96=B0=E5=A2=9E=E6=88=90?=
 =?UTF-8?q?=E6=9C=AC=E8=B6=8B=E5=8A=BF=E5=9B=BE=E8=A1=A8=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=B8=8E=E6=B1=87=E6=80=BB=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E4=BF=9D=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.  为comprehensive.vue新增保存汇总数据到报表配置的逻辑
2.  重构trend.vue的筛选交互为图表管理面板，支持显示隐藏、排序系列，配置持久化到localStorage
3.  替换原有的明细数据拉取逻辑为读取报表配置获取汇总数据
---
 klp-ui/src/views/cost/comprehensive.vue |  35 +++
 klp-ui/src/views/cost/trend.vue         | 388 ++++++++++++++++++------
 2 files changed, 325 insertions(+), 98 deletions(-)

diff --git a/klp-ui/src/views/cost/comprehensive.vue b/klp-ui/src/views/cost/comprehensive.vue
index 1c08f505e..5a7c79e2d 100644
--- a/klp-ui/src/views/cost/comprehensive.vue
+++ b/klp-ui/src/views/cost/comprehensive.vue
@@ -938,6 +938,41 @@ export default {
           await batchSaveProdMetricResult({ resultIds, prodMetricResultList: metricResultList })
         }
 
+        // 保存汇总数据到报表config
+        const summaryRows = this.summaryRows
+        const sumRow = summaryRows.find(r => r.$summaryType === 'sum')
+        const avgRow = summaryRows.find(r => r.$summaryType === 'avg')
+        const buildSummaryMap = (row) => {
+          const map = {}
+          if (!row) return map
+          this.allCols.forEach(col => {
+            const hdr = col.$type === 'detail'
+              ? (col.itemName || col.itemCode) + (col.unit ? '(' + col.unit + ')' : '')
+              : col.metricName + (col.unit ? '(' + col.unit + ')' : '')
+            if (col.isShift) {
+              if (col.$type === 'detail') {
+                const v1 = row['q' + col.itemId + '_1']
+                const v2 = row['q' + col.itemId + '_2']
+                if (v1 != null) map[hdr + '(甲)'] = v1
+                if (v2 != null) map[hdr + '(乙)'] = v2
+              } else {
+                const v1 = row['mv' + col.mIdx + '_1']
+                const v2 = row['mv' + col.mIdx + '_2']
+                if (v1 != null) map[hdr + '(甲)'] = v1
+                if (v2 != null) map[hdr + '(乙)'] = v2
+              }
+            } else {
+              const v = col.$type === 'detail' ? row['q' + col.itemId] : row['mv' + col.mIdx]
+              if (v != null) map[hdr] = v
+            }
+          })
+          return map
+        }
+        const cfg = JSON.parse(this.activeReport.colConfig || '{}')
+        cfg.avg = buildSummaryMap(avgRow)
+        cfg.sum = buildSummaryMap(sumRow)
+        await updateProdReport({ reportId: rid, colConfig: JSON.stringify(cfg) })
+
         this.$modal.msgSuccess("保存成功"); await this.loadGrid()
       } catch(e) { this.$modal.msgError("保存失败") } finally { this.saving = false }
     },
diff --git a/klp-ui/src/views/cost/trend.vue b/klp-ui/src/views/cost/trend.vue
index c5f8be51e..7fcb5482f 100644
--- a/klp-ui/src/views/cost/trend.vue
+++ b/klp-ui/src/views/cost/trend.vue
@@ -38,48 +38,54 @@
       </div>
     </div>
 
-    <!-- 图表筛选 -->
-    <div v-if="reports.length > 0" class="chart-filter-bar">
-      <span class="filter-label">图表筛选：</span>
-      <el-select
-        v-model="selectedCategories"
-        multiple
-        collapse-tags
-        placeholder="成本类别（全部）"
-        clearable
-        size="small"
-        style="width:150px"
-        @change="onCategoryChange"
-      >
-        <el-option label="原料" value="原料" />
-        <el-option label="能耗" value="能耗" />
-        <el-option label="辅料" value="辅料" />
-        <el-option label="设备" value="设备" />
-        <el-option label="人工" value="人工" />
-        <el-option label="产出" value="产出" />
-        <el-option label="轧辊" value="轧辊" />
-        <el-option label="其他" value="其他" />
-      </el-select>
-      <el-select
-        v-model="selectedItems"
-        multiple
-        collapse-tags
-        filterable
-        placeholder="成本项（全部）"
-        clearable
-        size="small"
-        style="width:200px"
-        @change="onItemChange"
-      >
-        <el-option
-          v-for="it in filteredItemOptions"
-          :key="it.itemId"
-          :label="it.itemName + ' (' + it.category + ')'"
-          :value="it.itemId"
-        />
-      </el-select>
+    <!-- 图表管理 -->
+    <div v-if="reports.length > 0" class="series-panel">
+      <span class="panel-label">图表：</span>
+      <div class="series-chips">
+        <span
+          v-for="(sk, idx) in orderedSeriesKeys"
+          :key="sk.key"
+          :class="['series-chip', { off: sk._hidden }]"
+          :title="sk._hidden ? '点击显示' : '点击隐藏'"
+          @click="toggleSeries(sk.key)"
+        >
+          <span class="chip-dot" :style="{ background: sk._color }" />
+          <span class="chip-name">{{ sk.name }}</span>
+          <span class="chip-arrows">
+            <i class="el-icon-caret-top" :class="{ disabled: idx === 0 }" @click.stop="moveSeries(idx, -1)" />
+            <i class="el-icon-caret-bottom" :class="{ disabled: idx === orderedSeriesKeys.length - 1 }" @click.stop="moveSeries(idx, 1)" />
+          </span>
+        </span>
+      </div>
+      <el-button size="mini" icon="el-icon-s-operation" circle @click="mgrOpen = true" />
     </div>
 
+    <!-- 图表管理弹窗 -->
+    <el-dialog title="图表管理" :visible.sync="mgrOpen" width="680px" append-to-body top="8vh">
+      <el-table :data="orderedSeriesKeys" size="small" max-height="460">
+        <el-table-column label="排序" width="100" align="center">
+          <template slot-scope="s">
+            <el-button icon="el-icon-top" size="mini" circle :disabled="s.$index === 0" @click="moveSeries(s.$index, -1)" />
+            <el-button icon="el-icon-bottom" size="mini" circle :disabled="s.$index === orderedSeriesKeys.length - 1" @click="moveSeries(s.$index, 1)" />
+          </template>
+        </el-table-column>
+        <el-table-column label="名称" min-width="250">
+          <template slot-scope="s">
+            <span class="mgr-chip-dot" :style="{ background: s.row._color }" />
+            <span>{{ s.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="可见" width="80" align="center">
+          <template slot-scope="s">
+            <el-switch :value="!s.row._hidden" @change="toggleSeries(s.row.key)" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <div slot="footer">
+        <el-button type="primary" @click="mgrOpen = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+
     <!-- 迷你图表网格 -->
     <div v-loading="loading" class="mini-charts-grid">
       <template v-if="seriesList.length">
@@ -102,8 +108,7 @@
 <script>
 import * as echarts from 'echarts'
 import { mapGetters } from 'vuex'
-import { listProdReport } from '@/api/cost/prodReport'
-import { listProdDetail } from '@/api/cost/prodDetail'
+import { listProdReport, getProdReport } from '@/api/cost/prodReport'
 import { listItem } from '@/api/cost/item'
 
 const COLORS = [
@@ -119,14 +124,15 @@ export default {
   data() {
     return {
       selectedLine: null,
-      selectedCategories: [],
-      selectedItems: [],
       allItems: [],
       loading: false,
       chartInstances: [],
       seriesList: [],
       reports: [],
-      cachedDetails: [],
+      cachedConfigs: [],
+      allSeriesKeys: [],
+      seriesConfig: { hidden: {}, order: [] },
+      mgrOpen: false,
       summary: { seriesCount: 0, maxLabel: '-' }
     }
   },
@@ -136,9 +142,23 @@ export default {
       if (!this.selectedLine || !this.productionLines.length) return null
       return this.productionLines.find(l => l.lineId === this.selectedLine) || null
     },
-    filteredItemOptions() {
-      if (!this.selectedCategories.length) return this.allItems
-      return this.allItems.filter(it => this.selectedCategories.includes(it.category))
+    orderedSeriesKeys() {
+      const order = this.seriesConfig.order || []
+      const hidden = this.seriesConfig.hidden || {}
+      const keys = [...this.allSeriesKeys]
+      // Sort: items in saved order first, then new items by original index
+      const orderMap = {}
+      order.forEach((k, i) => { orderMap[k] = i })
+      keys.sort((a, b) => {
+        const ai = orderMap[a.key] ?? 9999
+        const bi = orderMap[b.key] ?? 9999
+        if (ai !== bi) return ai - bi
+        // preserve original order for new items
+        return 0
+      })
+      // Attach _hidden flag
+      keys.forEach(k => { k._hidden = !!hidden[k.key] })
+      return keys
     }
   },
   mounted() {
@@ -172,15 +192,47 @@ export default {
       }
     },
 
-    onCategoryChange() {
-      this.selectedItems = this.selectedItems.filter(id => {
-        const it = this.allItems.find(item => item.itemId === id)
-        return it && this.selectedCategories.includes(it.category)
-      })
+    /* ---- 系列配置（localStorage） ---- */
+    storageKey() {
+      return 'cost_trend_cfg_' + (this.selectedLine || 'default')
+    },
+    loadSeriesConfig() {
+      try {
+        const raw = localStorage.getItem(this.storageKey())
+        if (raw) {
+          const cfg = JSON.parse(raw)
+          this.seriesConfig = {
+            hidden: cfg.hidden || {},
+            order: cfg.order || []
+          }
+        } else {
+          this.seriesConfig = { hidden: {}, order: [] }
+        }
+      } catch (e) {
+        this.seriesConfig = { hidden: {}, order: [] }
+      }
+    },
+    saveSeriesConfig() {
+      try {
+        localStorage.setItem(this.storageKey(), JSON.stringify(this.seriesConfig))
+      } catch (e) { /* ignore */ }
+    },
+    isSeriesHidden(key) {
+      return !!this.seriesConfig.hidden[key]
+    },
+    toggleSeries(key) {
+      this.$set(this.seriesConfig.hidden, key, !this.seriesConfig.hidden[key])
+      this.saveSeriesConfig()
       this.renderFromCache()
     },
-
-    onItemChange() {
+    moveSeries(idx, dir) {
+      const keys = this.orderedSeriesKeys.map(sk => sk.key)
+      const t = idx + dir
+      if (t < 0 || t >= keys.length) return
+      const item = keys.splice(idx, 1)[0]
+      keys.splice(t, 0, item)
+      this.seriesConfig.order = keys
+      this.saveSeriesConfig()
       this.renderFromCache()
     },
 
@@ -217,7 +269,7 @@ export default {
         }
         this.reports = allReports
 
-        await this.fetchDetailsAndCache(allReports)
+        await this.fetchConfigsAndCache(allReports)
       } catch (e) {
         console.error('CostTrend fetchData error:', e)
         this.$modal.msgError('数据加载失败: ' + (e.message || '未知错误'))
@@ -226,18 +278,21 @@ export default {
       }
     },
 
-    async fetchDetailsAndCache(reports) {
-      const allDetailResults = await Promise.all(
+    async fetchConfigsAndCache(reports) {
+      const fullReports = await Promise.all(
         reports.map(r =>
-          listProdDetail({ reportId: r.reportId, pageNum: 1, pageSize: 99999 })
-            .then(res => ({ reportId: r.reportId, rows: res.rows || [] }))
+          getProdReport(r.reportId)
+            .then(res => res.data || {})
             .catch(e => {
-              console.error('[CostTrend] detail fetch error for report', r.reportId, e)
-              return { reportId: r.reportId, rows: [] }
+              console.error('[CostTrend] get report error', r.reportId, e)
+              return {}
             })
         )
       )
-      this.cachedDetails = allDetailResults
+      this.cachedConfigs = fullReports.map((r, i) => ({
+        reportId: reports[i].reportId,
+        colConfig: r.colConfig || '{}'
+      }))
 
       if (!this.allItems.length) await this.loadItems()
 
@@ -246,47 +301,109 @@ export default {
 
     renderFromCache() {
       const reports = this.reports
-      const allDetailResults = this.cachedDetails
-      if (!reports.length || !allDetailResults.length) return
+      const configs = this.cachedConfigs
+      if (!reports.length || !configs.length) return
 
       const itemMap = {}
       this.allItems.forEach(it => { itemMap[String(it.itemId)] = it })
 
-      const itemSet = this.selectedItems.length ? new Set(this.selectedItems.map(String)) : null
-      const categorySet = this.selectedCategories.length ? new Set(this.selectedCategories) : null
+      // Parse each report's colConfig to extract sum values
+      const reportData = []
+      const allKeys = new Map() // key -> { key, name, category, itemId }
 
-      const reportSums = {}
-      allDetailResults.forEach(({ reportId, rows }) => {
-        const sums = {}
-        rows.forEach(d => {
-          if (!d.itemId) return
-          const key = String(d.itemId)
-          if (itemSet && !itemSet.has(key)) return
-          if (categorySet) {
-            const it = itemMap[key]
-            if (!it || !categorySet.has(it.category)) return
+      configs.forEach((cfg, i) => {
+        const report = reports[i]
+        let parsed = {}
+        try { parsed = JSON.parse(cfg.colConfig || '{}') } catch (e) { /* ignore */ }
+        const sum = parsed.sum || {}
+        const columns = parsed.columns || []
+
+        // Build header text -> category mapping from columns
+        const headerMeta = {}
+        columns.forEach(col => {
+          if (col.t === 'd') {
+            const item = itemMap[String(col.id)]
+            if (item) {
+              const baseHdr = item.itemName + (item.unit ? '(' + item.unit + ')' : '')
+              headerMeta[baseHdr] = { category: item.category, itemId: item.itemId }
+              headerMeta[baseHdr + '(甲)'] = { category: item.category, itemId: item.itemId }
+              headerMeta[baseHdr + '(乙)'] = { category: item.category, itemId: item.itemId }
+            }
           }
-          sums[key] = (sums[key] || 0) + (parseFloat(d.quantity) || 0)
         })
-        reportSums[reportId] = sums
+
+        const sumMap = {}
+        Object.entries(sum).forEach(([hdr, val]) => {
+          const num = parseFloat(val)
+          if (isNaN(num)) return
+          sumMap[hdr] = num
+
+          const meta = headerMeta[hdr] || {}
+          if (!allKeys.has(hdr)) {
+            allKeys.set(hdr, {
+              key: hdr,
+              name: hdr,
+              category: meta.category || null,
+              itemId: meta.itemId || null
+            })
+          }
+        })
+
+        reportData.push({
+          reportId: cfg.reportId,
+          sumMap,
+          label: this.reportLabel(report)
+        })
       })
 
-      const allItemIds = new Set()
-      Object.values(reportSums).forEach(sums => {
-        Object.keys(sums).forEach(id => allItemIds.add(id))
+      // Load saved config & merge
+      this.allSeriesKeys = Array.from(allKeys.values())
+
+      // Assign stable colors to each key (before config load so orderedSeriesKeys gets them)
+      this.allSeriesKeys.forEach((sk, i) => {
+        sk._color = COLORS[i % COLORS.length]
       })
 
-      const xLabels = reports.map(r => this.reportLabel(r))
+      this.loadSeriesConfig()
+
+      // Persist any new keys in order
+      const curKeys = this.allSeriesKeys.map(sk => sk.key)
+      const savedOrder = this.seriesConfig.order || []
+      const knownSet = new Set(savedOrder)
+      let dirty = false
+      curKeys.forEach(k => {
+        if (!knownSet.has(k)) {
+          savedOrder.push(k)
+          dirty = true
+        }
+      })
+      // Remove stale keys from order
+      const curSet = new Set(curKeys)
+      const cleanOrder = savedOrder.filter(k => curSet.has(k))
+      if (cleanOrder.length !== savedOrder.length) dirty = true
+      this.seriesConfig.order = cleanOrder
+      if (dirty) this.saveSeriesConfig()
+
+      // Build series list (respect order & visibility)
+      const orderMap = {}
+      cleanOrder.forEach((k, i) => { orderMap[k] = i })
+      const ordered = [...this.allSeriesKeys].sort((a, b) => {
+        const ai = orderMap[a.key] ?? 9999
+        const bi = orderMap[b.key] ?? 9999
+        return ai - bi
+      })
+
+      const xLabels = reportData.map(r => r.label)
       const list = []
       let globalMax = 0
 
-      Array.from(allItemIds).forEach((key, idx) => {
-        const it = itemMap[key]
-        const name = it ? it.itemName : `未知(${key})`
-        const data = reports.map(r => {
-          const sums = reportSums[r.reportId] || {}
-          const val = sums[key] ?? null
-          return val
+      ordered.forEach(sk => {
+        // Skip hidden
+        if (this.seriesConfig.hidden[sk.key]) return
+
+        const data = reportData.map(r => {
+          const v = r.sumMap[sk.key]
+          return (v != null && isFinite(v)) ? v : 0
         })
         if (data.every(v => v === null)) return
 
@@ -294,9 +411,9 @@ export default {
         if (maxVal > globalMax) globalMax = maxVal
 
         list.push({
-          key,
-          name,
-          color: COLORS[idx % COLORS.length],
+          key: sk.key,
+          name: sk.name,
+          color: sk._color,
           data,
           xLabels,
           maxVal
@@ -477,17 +594,92 @@ export default {
 .stat-orange .stat-val { color: #e6a23c; }
 .stat-green .stat-val { color: #67c23a; }
 
-/* 图表筛选 */
-.chart-filter-bar {
+/* 图表管理面板 */
+.series-panel {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   margin-bottom: 8px;
 }
-.chart-filter-bar .filter-label {
+.series-panel .panel-label {
   font-size: 12px;
-  color: #606266;
+  color: #909399;
   white-space: nowrap;
+  flex-shrink: 0;
+}
+.series-chips {
+  display: flex;
+  gap: 4px;
+  flex: 1;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+.series-chips::-webkit-scrollbar {
+  height: 4px;
+}
+.series-chips::-webkit-scrollbar-thumb {
+  background: #dcdfe6;
+  border-radius: 2px;
+}
+.series-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 7px;
+  border: 1px solid #dcdfe6;
+  border-radius: 3px;
+  font-size: 12px;
+  background: #fff;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: opacity .15s, border-color .15s;
+}
+.series-chip:hover {
+  border-color: #409eff;
+}
+.series-chip.off {
+  opacity: 0.4;
+}
+.series-chip .chip-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.series-chip .chip-name {
+  color: #303133;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.series-chip .chip-arrows {
+  display: inline-flex;
+  flex-direction: column;
+  line-height: 1;
+  margin-left: 1px;
+}
+.series-chip .chip-arrows i {
+  font-size: 10px;
+  color: #c0c4cc;
+  cursor: pointer;
+  line-height: 1;
+}
+.series-chip .chip-arrows i:hover:not(.disabled) {
+  color: #409eff;
+}
+.series-chip .chip-arrows i.disabled {
+  color: #e8e8e8;
+  cursor: default;
+}
+.mgr-chip-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  vertical-align: middle;
+  margin-right: 6px;
 }
 
 /* 迷你图表网格 */