矩形树图

klp-ui/src/views/wms/stock/index.vue

@@ -51,6 +51,9 @@
           <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
             v-hasPermi="['wms:stock:export']">导出</el-button>
         </el-col>
+        <el-col :span="1.5">
+          <el-button type="primary" plain icon="el-icon-data-analysis" size="mini" @click="showStockBox">库存分析</el-button>
+        </el-col>
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
       </el-row>
 
@@ -81,6 +84,11 @@
       <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
         @pagination="getList" />
 
+      <!-- 库存分析对话框 -->
+      <el-dialog title="库存统计" :visible.sync="stockBoxVisible" width="80%" append-to-body destroy-on-close>
+        <stock-box ref="stockBoxChart" />
+      </el-dialog>
+
       <!-- 添加或修改库存对话框（保持不变） -->
       <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -128,6 +136,7 @@ import { listWarehouse } from "@/api/wms/warehouse";
 import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
 import ProductSelect from "@/components/KLPService/ProductSelect";
 import WarehouseSelect from "@/components/WarehouseSelect";
+import StockBox from './box';
 
 export default {
   name: "Stock",
@@ -135,10 +144,13 @@ export default {
   components: {
     WarehouseSelect,
     RawMaterialSelect,
-    ProductSelect
+    ProductSelect,
+    StockBox
   },
   data() {
     return {
+      // 库存分析对话框显示状态
+      stockBoxVisible: false,
       // 按钮loading
       buttonLoading: false,
       // 遮罩层
@@ -340,6 +352,13 @@ export default {
       this.download('wms/stock/export', {
         ...this.queryParams
       }, `stock_${new Date().getTime()}.xlsx`)
+    },
+    /** 显示库存分析图表 */
+    showStockBox() {
+      this.stockBoxVisible = true;
+      this.$nextTick(() => {
+        this.$refs.stockBoxChart && this.$refs.stockBoxChart.refresh();
+      });
     }
   }
 };