From 693edbb54385d79a0c1663266e84777fdf45eaef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Mon, 9 Mar 2026 13:06:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(wms):=20=E6=96=B0=E5=A2=9E=E7=83=AD?=
 =?UTF-8?q?=E8=BD=A7=E5=8E=9F=E6=96=99=E5=BA=93=E5=AD=98=E9=80=8F=E8=A7=86?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=8F=8A=E7=9B=B8=E5=85=B3=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加热轧原料库存透视表API接口
创建透视表展示组件HotZhaRaw.vue和Perspective.vue
实现数据持久化功能及左右布局管理界面
优化锌卷标签显示样式及字段名称
---
 klp-ui/src/api/wms/coilStatisticsSummary.js   |  44 +++
 klp-ui/src/api/wms/rawMaterial.js             |  10 +
 .../coil/panels/LabelRender/ZincRawTag.vue    |  12 +-
 .../wms/coil/panels/Perspective/HotZhaRaw.vue | 175 ++++++++++
 .../wms/coil/panels/Perspective/index.vue     |  48 +++
 .../coil/perspective/components/LeftList.vue  | 320 ++++++++++++++++++
 .../src/views/wms/coil/perspective/index.vue  | 241 +++++++++++++
 7 files changed, 844 insertions(+), 6 deletions(-)
 create mode 100644 klp-ui/src/api/wms/coilStatisticsSummary.js
 create mode 100644 klp-ui/src/views/wms/coil/panels/Perspective/HotZhaRaw.vue
 create mode 100644 klp-ui/src/views/wms/coil/panels/Perspective/index.vue
 create mode 100644 klp-ui/src/views/wms/coil/perspective/components/LeftList.vue
 create mode 100644 klp-ui/src/views/wms/coil/perspective/index.vue

diff --git a/klp-ui/src/api/wms/coilStatisticsSummary.js b/klp-ui/src/api/wms/coilStatisticsSummary.js
new file mode 100644
index 00000000..b4ee3a6c
--- /dev/null
+++ b/klp-ui/src/api/wms/coilStatisticsSummary.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询钢卷生产统计汇总（数据透视结果持久化）列表
+export function listCoilStatisticsSummary(query) {
+  return request({
+    url: '/wms/coilStatisticsSummary/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询钢卷生产统计汇总（数据透视结果持久化）详细
+export function getCoilStatisticsSummary(summaryId) {
+  return request({
+    url: '/wms/coilStatisticsSummary/' + summaryId,
+    method: 'get'
+  })
+}
+
+// 新增钢卷生产统计汇总（数据透视结果持久化）
+export function addCoilStatisticsSummary(data) {
+  return request({
+    url: '/wms/coilStatisticsSummary',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改钢卷生产统计汇总（数据透视结果持久化）
+export function updateCoilStatisticsSummary(data) {
+  return request({
+    url: '/wms/coilStatisticsSummary',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除钢卷生产统计汇总（数据透视结果持久化）
+export function delCoilStatisticsSummary(summaryId) {
+  return request({
+    url: '/wms/coilStatisticsSummary/' + summaryId,
+    method: 'delete'
+  })
+}
diff --git a/klp-ui/src/api/wms/rawMaterial.js b/klp-ui/src/api/wms/rawMaterial.js
index ba1b8148..388f6535 100644
--- a/klp-ui/src/api/wms/rawMaterial.js
+++ b/klp-ui/src/api/wms/rawMaterial.js
@@ -67,3 +67,13 @@ export function listRawMaterialWithBom(query) {
     params: query
   })
 }
+
+/**
+ * 热轧原料库存透视表
+ */
+export function listRawMaterialPerspective() {
+  return request({
+    url: '/wms/rawMaterial/statistics',
+    method: 'get',
+  })
+}
diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/ZincRawTag.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/ZincRawTag.vue
index 7d949571..ba5277da 100644
--- a/klp-ui/src/views/wms/coil/panels/LabelRender/ZincRawTag.vue
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/ZincRawTag.vue
@@ -37,11 +37,11 @@
       <!-- 第四行：包装要求、切边要求 -->
       <div class="grid-cell label-cell">包装要求</div>
       <div class="grid-cell value-cell">
-        <div class="nob" contenteditable>{{ content.packagingRequirements || '' }}</div>
+        <div class="nob" contenteditable>{{ content.packagingRequirement || '' }}</div>
       </div>
       <div class="grid-cell label-cell">切边要求</div>
       <div class="grid-cell value-cell">
-        <div class="nob" contenteditable>{{ content.trimmingRequirements || '' }}</div>
+        <div class="nob" contenteditable>{{ content.trimmingRequirement || '' }}</div>
       </div>
       
       <!-- 第五行：班组、代码（二维码） -->
@@ -192,7 +192,7 @@ export default {
 .grid-cell {
   border: 1px solid #333;
   padding: 4px;
-  font-size: 14px;
+  font-size: 20px;
   box-sizing: border-box;
   text-align: center;
   word-break: break-all;
@@ -205,14 +205,14 @@ export default {
 /* 公司名称单元格 */
 .company-cell {
   grid-column: span 4; /* 跨4列 */
-  font-size: 18px;
+  font-size: 24px;
   font-weight: bold;
-  background-color: #f5f5f5;
+  /* background-color: #f5f5f5; */
 }
 
 /* 标签单元格（左） */
 .label-cell {
-  background-color: #f5f5f5;
+  /* background-color: #f5f5f5; */
   font-weight: bold;
 }
 
diff --git a/klp-ui/src/views/wms/coil/panels/Perspective/HotZhaRaw.vue b/klp-ui/src/views/wms/coil/panels/Perspective/HotZhaRaw.vue
new file mode 100644
index 00000000..ed4145fc
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/panels/Perspective/HotZhaRaw.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="hot-zha-raw">
+    <div v-if="!data || data.length === 0" class="empty-data">
+      暂无数据
+    </div>
+    <div v-else class="data-container">
+      <!-- 表头 -->
+      <div class="header-row">
+        <div class="header-cell manufacturer-header">厂家</div>
+        <div class="header-cell material-header">材质</div>
+        <div class="header-cell spec-header">规格</div>
+        <div class="header-cell count-header">求和项:件数</div>
+        <div class="header-cell weight-header">求和项:重量</div>
+      </div>
+      <!-- 数据行 -->
+      <div v-for="(manufacturer, mIndex) in processedData" :key="'manufacturer-' + mIndex" class="manufacturer-section">
+        <!-- 厂家行 -->
+        <div class="row manufacturer-row">
+          <div class="cell manufacturer-cell" :colspan="2">{{ manufacturer.manufacturer }}</div>
+          <div class="cell"></div>
+          <div class="cell"></div>
+          <div class="cell">{{ manufacturer.totalCoilCount }}</div>
+          <div class="cell">{{ manufacturer.totalWeight }}</div>
+        </div>
+        <!-- 材质行 -->
+        <div v-for="(material, matIndex) in manufacturer.materials" :key="'material-' + mIndex + '-' + matIndex" class="material-section">
+          <div class="row material-row">
+            <div class="cell"></div>
+            <div class="cell material-cell">{{ material.material }}</div>
+            <div class="cell"></div>
+            <div class="cell">{{ material.totalCoilCount }}</div>
+            <div class="cell">{{ material.totalWeight }}</div>
+          </div>
+          <!-- 规格行 -->
+          <div v-for="(spec, sIndex) in material.specifications" :key="'spec-' + mIndex + '-' + matIndex + '-' + sIndex" class="row spec-row">
+            <div class="cell"></div>
+            <div class="cell"></div>
+            <div class="cell spec-cell">{{ spec.specification }}</div>
+            <div class="cell">{{ spec.coilCount }}</div>
+            <div class="cell">{{ spec.totalWeight }}</div>
+          </div>
+        </div>
+      </div>
+      <div v-if="processedData.length === 0" class="no-data">
+        过滤后暂无数据
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'HotZhaRaw',
+    props: {
+      data: {
+        type: Array,
+        default: () => ([])
+      },
+    },
+    computed: {
+      processedData() {
+        if (!this.data || !Array.isArray(this.data)) {
+          return [];
+        }
+        return this.data;
+      }
+    },
+    methods: {
+      handleSave() {
+        this.$emit('save', this.processedData);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .hot-zha-raw {
+    width: 100%;
+    min-height: 200px;
+  }
+  .empty-data,
+  .no-data {
+    text-align: center;
+    padding: 40px;
+    color: #999;
+    font-size: 14px;
+  }
+  .data-container {
+    width: 100%;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  .header-row {
+    display: flex;
+    background-color: #f2f2f2;
+    font-weight: bold;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+  .header-cell {
+    padding: 8px;
+    border-right: 1px solid #ddd;
+    word-break: break-all;
+  }
+  .header-cell:last-child {
+    border-right: none;
+  }
+  .manufacturer-header {
+    width: 200px;
+  }
+  .material-header {
+    width: 100px;
+  }
+  .spec-header {
+    width: 150px;
+  }
+  .count-header,
+  .weight-header {
+    width: 120px;
+    text-align: right;
+  }
+  .row {
+    display: flex;
+    border-top: 1px solid #ddd;
+  }
+  .row:first-child {
+    border-top: none;
+  }
+  .cell {
+    padding: 8px;
+    border-right: 1px solid #ddd;
+    word-break: break-all;
+  }
+  .cell:last-child {
+    border-right: none;
+  }
+  /* 确保表头和数据行的列宽一致 */
+  .row .cell:nth-child(1) {
+    width: 200px;
+  }
+  .row .cell:nth-child(2) {
+    width: 100px;
+  }
+  .row .cell:nth-child(3) {
+    width: 150px;
+  }
+  .row .cell:nth-child(4),
+  .row .cell:nth-child(5) {
+    width: 120px;
+    text-align: right;
+  }
+  .spec-cell {
+    padding-left: 20px;
+  }
+  .manufacturer-row {
+    background-color: #e6f7ff;
+  }
+  .material-row {
+    background-color: #f0f5ff;
+  }
+  .spec-row {
+    background-color: #f9f9f9;
+  }
+  .manufacturer-cell {
+    font-weight: bold;
+  }
+  .material-cell {
+    font-weight: bold;
+  }
+  .spec-cell {
+    padding-left: 20px;
+  }
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/coil/panels/Perspective/index.vue b/klp-ui/src/views/wms/coil/panels/Perspective/index.vue
new file mode 100644
index 00000000..f404f3be
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/panels/Perspective/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="perspective">
+    <hot-zha-raw :data="data" />
+  </div>
+</template>
+
+<script>
+  import HotZhaRaw from "@/views/wms/coil/panels/Perspective/HotZhaRaw.vue";
+  export default {
+    name: 'Perspective',
+    props: {
+      data: {
+        type: Array,
+        default: () => ([]) 
+      },
+      type: {
+        type: String,
+        default: ''
+      },
+    },
+    data() {
+      return {
+        title: ''
+      }
+    },
+    components: {
+      HotZhaRaw,
+    },
+    methods: {
+      handleSave(data) {
+        const dataText = JSON.stringify(data, null, 2);
+        this.$emit('save', {
+          title: this.title,
+          data: dataText,
+          type: this.type,
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .perspective {
+    width: 100%;
+    min-height: 200px;
+    font-size: 14px;
+  }
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/coil/perspective/components/LeftList.vue b/klp-ui/src/views/wms/coil/perspective/components/LeftList.vue
new file mode 100644
index 00000000..d8a8b1ac
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/perspective/components/LeftList.vue
@@ -0,0 +1,320 @@
+<template>
+  <div>
+    <!-- 搜索区域 - 使用flex布局 -->
+    <div class="search-bar">
+      <!-- 统计类型下拉选择框 -->
+      <el-select v-model="queryParams.statType" placeholder="请选择统计类型" clearable size="mini" class="search-select">
+        <el-option label="热轧原料" value="热轧原料" />
+        <el-option label="冷硬卷板" value="冷硬卷板" />
+        <el-option label="汇总" value="汇总" />
+      </el-select>
+
+      <!-- 标题搜索输入框 -->
+      <el-input v-model="queryParams.title" placeholder="请输入标题搜索" clearable @keyup.enter.native="handleQuery"
+        size="mini" class="search-input" />
+
+      <!-- 新增按钮 -->
+      <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" class="add-btn">
+        新增
+      </el-button>
+    </div>
+
+    <!-- 自定义列表（替代表格） -->
+    <div class="statistics-list" v-loading="loading">
+      <!-- 列表为空时的提示 -->
+      <div v-if="coilStatisticsSummaryList.length === 0 && !loading" class="empty-tip">
+        暂无统计数据
+      </div>
+
+      <!-- 列表项 - 增加选中样式判断 -->
+      <div v-for="(item, index) in coilStatisticsSummaryList" :key="index" class="statistics-item"
+        :class="{ 'statistics-item-selected': currentRow.summaryId === item.summaryId }" @click="handleSelect(item)">
+        <!-- 内容区域 -->
+        <div class="item-content">
+          <el-tag type="info">{{ item.statType }}</el-tag>
+          <div style="display: flex;">
+            <!-- 双击后变成输入框，输入框失去焦点触发更新 -->
+            <div class="value">{{ item.title }}</div>
+            <!-- <span class="value">{{ item.createTime }}</span>
+            <span class="value">{{ item.createBy }}</span> -->
+          </div>
+        </div>
+
+        <!-- 操作区域 -->
+        <div class="item-actions">
+          <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(item)">
+            删除
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" class="pagination-container" />
+
+    <!-- 添加或修改钢卷生产统计对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <div v-for="item in tableType" :key="item.statType" @click="handleCreate(item)" class="type-item">
+          <div class="type-title">{{ item.title }}</div>
+          <div class="type-desc">{{ item.description }}</div>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listCoilStatisticsSummary, delCoilStatisticsSummary, updateCoilStatisticsSummary } from "@/api/wms/coilStatisticsSummary";
+
+export default {
+  name: "CoilStatisticsSummary",
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 钢卷生产统计表格数据
+      coilStatisticsSummaryList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        title: undefined,
+        statType: undefined,
+      },
+      tableType: [
+        { statType: '热轧原料', title: '热轧原料', description: '统计热轧原料的实时库存' },
+        { statType: '冷硬卷板', title: '冷硬卷板', description: '统计冷硬卷板的实时库存' },
+        { statType: '汇总', title: '汇总', description: '各类产品汇总表' },
+      ],
+      currentRow: {},
+    };
+  },
+  created() {
+    this.getList();
+  },
+  computed: {
+    currentId() {
+      return this.currentRow.summaryId
+    }
+  },
+  methods: {
+    /** 查询钢卷生产统计列表 */
+    getList() {
+      this.loading = true;
+      listCoilStatisticsSummary(this.queryParams).then(response => {
+        this.coilStatisticsSummaryList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
+    handleSelect(row) {
+      this.currentRow = row;
+      this.$emit('select', row);
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      // 重置表单
+      this.$refs.form && this.$refs.form.resetFields();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    handleCreate(item) {
+      this.$emit('add', {
+        statType: item.statType,
+        title: item.title,
+        statJson: '{}',
+      });
+      this.open = false;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.open = true;
+      this.title = "添加钢卷生产统计";
+    },
+    submitUpdate(row) {
+      updateCoilStatisticsSummary(row).then(response => {
+        this.$modal.msgSuccess("修改成功");
+        this.getList();
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const summaryIds = row.summaryId || this.ids;
+      this.$modal.confirm('是否确认删除钢卷生产统计编号为"' + summaryIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delCoilStatisticsSummary(summaryIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+        // 删除后清空选中状态
+        if (this.currentRow.summaryId === row.summaryId) {
+          this.currentRow = {};
+        }
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 提交表单 */
+    submitForm() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          // 这里补充提交逻辑
+          setTimeout(() => {
+            this.buttonLoading = false;
+            this.open = false;
+            this.$modal.msgSuccess("操作成功");
+            this.getList();
+          }, 1000);
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 搜索栏样式 */
+.search-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.search-select {
+  width: 180px;
+}
+
+.search-input {
+  flex: 1;
+  min-width: 200px;
+  max-width: 300px;
+}
+
+.add-btn {
+  white-space: nowrap;
+}
+
+/* 自定义列表样式 */
+.statistics-list {
+  background: #fff;
+  border-radius: 4px;
+  padding: 0px;
+  margin-bottom: 20px;
+}
+
+.empty-tip {
+  text-align: center;
+  padding: 40px 0;
+  color: #999;
+}
+
+.statistics-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.2s;
+  cursor: pointer;
+}
+
+.statistics-item:last-child {
+  border-bottom: none;
+}
+
+.statistics-item:hover {
+  background-color: #f8f9fa;
+}
+
+/* 新增选中状态样式 */
+.statistics-item-selected {
+  background-color: #e5f3ff;
+  border-left: 3px solid #409eff;
+}
+
+.statistics-item-selected:hover {
+  background-color: #e5f3ff;
+}
+
+.item-content {
+  flex: 1;
+  display: flex;
+  gap: 5px;
+}
+
+.item-title,
+.item-type {
+  display: flex;
+  align-items: center;
+}
+
+.label {
+  color: #666;
+  margin-right: 8px;
+  min-width: 80px;
+}
+
+.value {
+  color: #333;
+}
+
+.item-actions {
+  margin-left: auto;
+}
+
+/* 分页样式 */
+.pagination-container {
+  margin-top: 20px;
+  text-align: right;
+}
+
+/* 对话框内类型选项样式 */
+.type-item {
+  padding: 12px;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.type-item:hover {
+  border-color: #409eff;
+  background-color: #f5f7fa;
+}
+
+.type-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+  color: #333;
+}
+
+.type-desc {
+  color: #666;
+  font-size: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/coil/perspective/index.vue b/klp-ui/src/views/wms/coil/perspective/index.vue
new file mode 100644
index 00000000..60bcca5d
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/perspective/index.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-col :span="6">
+        <LeftList ref="leftList" @add="handleAdd" @select="handleSelect" />
+      </el-col>
+
+      <el-col :span="18">
+        <div style="height: calc(100vh - 124px); overflow-y: scroll; overflow-x: hidden;">
+          <div v-if="currentRow.summaryId">
+            <Preview :data="currentRow.statJson" />
+          </div>
+          <div v-else>
+            <div>钢卷生产统计详情</div>
+          </div>
+        </div>
+       
+      </el-col>
+    </el-row>
+
+    <el-dialog v-loading="previewLoading" title="效果预览" :visible.sync="previewOpen" width="800px" append-to-body>
+      <Preview :data="liveData" />
+      <el-button type="primary" @click="handleSave">保存</el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getCoilStatisticsSummary, delCoilStatisticsSummary, addCoilStatisticsSummary, updateCoilStatisticsSummary } from "@/api/wms/coilStatisticsSummary";
+import LeftList from "./components/LeftList.vue";
+import Preview from "@/views/wms/coil/panels/Perspective/index.vue";
+
+import { listRawMaterialPerspective } from "@/api/wms/rawMaterial";
+
+export default {
+  name: "CoilStatisticsSummary",
+  components: {
+    LeftList,
+    Preview
+  },
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 钢卷生产统计表格数据
+      coilStatisticsSummaryList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        title: undefined,
+        statType: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      },
+      previewLoading: false,
+      previewOpen: false,
+      liveData: {},
+      currentRow: {},
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询钢卷生产统计列表 */
+    getList() {
+      this.loading = true;
+      listCoilStatisticsSummary(this.queryParams).then(response => {
+        this.coilStatisticsSummaryList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        summaryId: undefined,
+        title: undefined,
+        statType: undefined,
+        statJson: undefined,
+        remark: undefined,
+        createBy: undefined,
+        createTime: undefined,
+        updateBy: undefined,
+        updateTime: undefined,
+        delFlag: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelect(row) {
+      this.currentRow = {
+        ...row,
+        statJson: JSON.parse(row.statJson)
+      };
+    },
+    /** 新增按钮操作 */
+    handleAdd(form) {
+      this.previewOpen = true;
+      this.form = form;
+      if (form.statType == '热轧原料') {
+        this.previewLoading = true;
+        listRawMaterialPerspective().then(response => {
+          const data = response.data;
+          // 处理数据
+          const filteredData = data.filter(manufacturer => {
+            // 确保manufacturer和其materials存在
+            if (!manufacturer || !Array.isArray(manufacturer.materials)) {
+              return false;
+            }
+            // 过滤材质：totalCoilCount > 0
+            manufacturer.materials = manufacturer.materials.filter(material => {
+              // 确保material和其specifications存在
+              if (!material || !Array.isArray(material.specifications)) {
+                return false;
+              }
+              // 过滤规格：coilCount > 0
+              material.specifications = material.specifications.filter(spec => spec.coilCount > 0);
+              // 只有当规格数组不为空时，才保留该材质
+              return material.specifications.length > 0;
+            });
+            // 只有当材质数组不为空时，才保留该厂家
+            return manufacturer.materials.length > 0;
+          });
+          this.liveData = filteredData;
+        }).finally(() => {
+          this.previewLoading = false;
+        });
+      }
+     
+    },
+    handleSave() {
+      addCoilStatisticsSummary({
+        ...this.form,
+        statJson: JSON.stringify(this.liveData)
+      }).then(response => {
+        this.$modal.msgSuccess("新增成功");
+        this.open = false;
+        this.liveData = [];
+        this.form = {};
+        this.$refs.leftList.getList();
+      }).finally(() => {
+        this.buttonLoading = false;
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const summaryId = row.summaryId || this.ids
+      getCoilStatisticsSummary(summaryId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改钢卷生产统计";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.summaryId != null) {
+            updateCoilStatisticsSummary(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addCoilStatisticsSummary(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const summaryIds = row.summaryId || this.ids;
+      this.$modal.confirm('是否确认删除钢卷生产统计编号为"' + summaryIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delCoilStatisticsSummary(summaryIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('wms/coilStatisticsSummary/export', {
+        ...this.queryParams
+      }, `coilStatisticsSummary_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>