From 1a259f26f9825c51bedd6c531106d91eac9a685a Mon Sep 17 00:00:00 2001
From: yinq <1345442242@qq.com>
Date: Fri, 17 Nov 2023 11:33:39 +0800
Subject: [PATCH] =?UTF-8?q?add=20-=20=E5=BA=93=E5=AD=98=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/base/spaceInfo.js                     |  18 ++
 src/components/TopNav/index.vue               |   3 -
 src/router/index.js                           |  14 +
 src/views/base/storeInfo/index.vue            |  37 ++-
 src/views/production/planInfo/index.vue       |   3 +-
 .../report/inventoryStatistics/index.vue      | 305 ++++++++++++++++++
 6 files changed, 364 insertions(+), 16 deletions(-)
 create mode 100644 src/views/report/inventoryStatistics/index.vue

diff --git a/src/api/base/spaceInfo.js b/src/api/base/spaceInfo.js
index 400df21..986daf6 100644
--- a/src/api/base/spaceInfo.js
+++ b/src/api/base/spaceInfo.js
@@ -9,6 +9,24 @@ export function listSpaceInfo(query) {
   })
 }
 
+// 不分页查询货道信息列表
+export function getSpaceList(query) {
+  return request({
+    url: '/base/spaceInfo/spaceList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询库存统计
+export function getInventoryStatistics(query) {
+  return request({
+    url: '/base/spaceInfo/getInventoryStatistics',
+    method: 'get',
+    params: query
+  })
+}
+
 // 查询货道信息详细
 export function getSpaceInfo(objId) {
   return request({
diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index a496931..ed23498 100644
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@@ -158,8 +158,6 @@ export default {
           }
         });
       }
-      console.log(this.childrenMenus)
-      console.log(routes)
       if(routes.length > 0) {
         this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
       } else {
@@ -167,7 +165,6 @@ export default {
       }
     },
     ishttp(url) {
-      console.trace()
       return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
     }
   },
diff --git a/src/router/index.js b/src/router/index.js
index 6165abf..c0260e1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -232,6 +232,20 @@ export const dynamicRoutes = [
       },
     ],
   },
+  {
+    path: "/wcs/inventory-statistics",
+    component: Layout,
+    hidden: true,
+    permissions: ["base:storeInfo:list"],
+    children: [
+      {
+        path:"index/:storeCode",
+        component:() => import("@/views/report/inventoryStatistics/index"),
+        name:"inventoryStatistics",
+        meta: {title: "库存统计",activeMenu: "/report/inventoryStatistics"},
+      },
+    ],
+  },
 ]
 
 // 防止连续点击多次路由报错
diff --git a/src/views/base/storeInfo/index.vue b/src/views/base/storeInfo/index.vue
index 9cd1a02..43df8fb 100644
--- a/src/views/base/storeInfo/index.vue
+++ b/src/views/base/storeInfo/index.vue
@@ -138,21 +138,27 @@
             type="text"
             icon="el-icon-d-arrow-right"
             @click="findSpaceInfo(scope.row)"
-          >查看所属货道</el-button>
+          >所属货道</el-button>
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['base:storeInfo:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['base:storeInfo:remove']"
-          >删除</el-button>
+            icon="el-icon-house"
+            @click="findInventoryStatistics(scope.row)"
+          >库存统计</el-button>
+<!--          <el-button-->
+<!--            size="mini"-->
+<!--            type="text"-->
+<!--            icon="el-icon-edit"-->
+<!--            @click="handleUpdate(scope.row)"-->
+<!--            v-hasPermi="['base:storeInfo:edit']"-->
+<!--          >修改</el-button>-->
+<!--          <el-button-->
+<!--            size="mini"-->
+<!--            type="text"-->
+<!--            icon="el-icon-delete"-->
+<!--            @click="handleDelete(scope.row)"-->
+<!--            v-hasPermi="['base:storeInfo:remove']"-->
+<!--          >删除</el-button>-->
         </template>
       </el-table-column>
     </el-table>
@@ -336,6 +342,13 @@ export default {
       const storeCode = row.storeCode;
       this.$router.push("/wcs/space-info/index/" + storeCode);
     },
+
+    /** 查看库存统计 */
+    findInventoryStatistics: function(row) {
+      const storeCode = row.storeCode;
+      this.$router.push("/wcs/inventory-statistics/index/" + storeCode);
+    },
+
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
diff --git a/src/views/production/planInfo/index.vue b/src/views/production/planInfo/index.vue
index a38ca53..9d6dded 100644
--- a/src/views/production/planInfo/index.vue
+++ b/src/views/production/planInfo/index.vue
@@ -103,9 +103,10 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键标识" align="center" prop="objId" v-if="columns[0].visible"/>
       <el-table-column label="SAP计划编号" align="center" prop="orderCode" v-if="columns[2].visible"/>
-      <el-table-column label="工单编号" align="center" prop="planCode" v-if="columns[1].visible"/>
       <el-table-column label="销售订单编号" align="center" prop="saleOrderCode" v-if="columns[3].visible"/>
       <el-table-column label="销售订单行号" align="center" prop="saleorderLinenumber" v-if="columns[4].visible"/>
+      <el-table-column label="MES工单编号" align="center" prop="planCode" v-if="columns[1].visible"/>
+
       <el-table-column label="物料编号" align="center" prop="materialCode" v-if="columns[5].visible"/>
       <el-table-column label="物料名称" align="center" prop="materialName" v-if="columns[6].visible"/>
       <el-table-column label="计划工位" align="center" prop="productLineName" v-if="columns[7].visible"/>
diff --git a/src/views/report/inventoryStatistics/index.vue b/src/views/report/inventoryStatistics/index.vue
new file mode 100644
index 0000000..f5875e6
--- /dev/null
+++ b/src/views/report/inventoryStatistics/index.vue
@@ -0,0 +1,305 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="所属仓库" prop="storeCode">
+        <el-select v-model="queryParams.storeCode" placeholder="请选择所属仓库">
+          <el-option
+            v-for="item in storeList"
+            :key="item.storeCode"
+            :label="item.storeName"
+            :value="item.storeCode"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-close"
+          size="mini"
+          @click="handleClose"
+        >关闭</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!--    <el-row :gutter="10" class="mb8">-->
+    <!--      <el-col :span="1.5">-->
+    <!--        <el-button-->
+    <!--          type="warning"-->
+    <!--          plain-->
+    <!--          icon="el-icon-download"-->
+    <!--          size="mini"-->
+    <!--          @click="handleExport"-->
+    <!--        >导出-->
+    <!--        </el-button>-->
+    <!--      </el-col>-->
+    <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>-->
+    <!--    </el-row>-->
+    <div class="charts-container">
+      <div class="chart">
+        <el-card>
+          <div class="chart-title">物料分类统计</div>
+          <div ref="pieChart" class="chart-content"></div>
+        </el-card>
+      </div>
+      <div class="chart">
+        <el-card>
+          <div class="chart-title">货道占用统计</div>
+          <div ref="barChart" class="chart-content"></div>
+        </el-card>
+      </div>
+    </div>
+    <el-table v-loading="loading" :data="reportList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center"/>
+<!--      <el-table-column label="主键标识" align="center" prop="OBJ_ID"/>-->
+      <el-table-column label="在制品库编号" align="center" prop="MATERIALCODE"/>
+      <el-table-column label="在制品库名称" align="center" prop="MATERIALNAME"/>
+      <el-table-column label="物料类型" align="center" prop="STORECODE"/>
+      <el-table-column label="物料名称" align="center" prop="STORENAME"/>
+      <el-table-column label="库存数量" align="center" prop="SPACESTOCK" />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getInventoryStatistics, getSpaceList } from '@/api/base/spaceInfo'
+import { findStoreList } from '@/api/base/storeInfo'
+
+export default {
+  name: 'reportInfo',
+  dicts: ['space_type', 'store_status', 'is_flag'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 报表信息表格数据
+      reportList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        spaceCode: null,
+        spaceName: null,
+        spaceCapacity: null,
+        spaceStock: null,
+        spaceStatus: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {},
+      // 仓库选项
+      storeList: [],
+      pieChart: null,
+      barChart: null,
+      pieChartData: [
+        { value: 30, name: '物料01' },
+        { value: 20, name: '物料02' },
+        { value: 15, name: '物料03' },
+      ],
+      barChartData: {
+        xValue: ['货道01', '货道02', '货道03', '货道04', '货道05', '货道06', '货道07'],
+        yValueOne: [120, 132, 101, 134, 90, 230, 210],
+        yValueTwo: [150, 232, 201, 154, 190, 330, 410]
+      }
+    }
+  },
+  created() {
+    this.getList()
+    findStoreList().then(response => {
+      this.storeList = response.data
+    })
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initPieChart();
+      this.initBarChart();
+    });
+  },
+  methods: {
+    /** 查询货道信息列表 */
+    getList() {
+      this.loading = true
+      this.queryParams.storeCode = this.$route.params && this.$route.params.storeCode;
+      getInventoryStatistics(this.queryParams).then(response => {
+        this.reportList = response.data
+        this.pieChartData = response.data.map(item => ({
+          value: item.SPACESTOCK,
+          name: item.STORENAME
+        }));
+        this.initPieChart();
+        this.loading = false
+      });
+      getSpaceList(this.queryParams).then(response => {
+        this.barChartData = {
+          xValue: response.data.map(item =>  item.storeName + item.spaceName),
+          yValueOne: response.data.map(item => item.spaceStock),
+          yValueTwo: response.data.map(item => item.spaceCapacity),
+        };
+        this.initBarChart();
+      });
+    },
+    initPieChart() {
+      this.pieChart = echarts.init(this.$refs.pieChart);
+      // 在这里添加饼图的数据和配置
+      const option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'center'
+        },
+        series: [
+          {
+            name: '物料库存数：',
+            type: 'pie',
+            radius: ['30%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.pieChartData
+          }
+        ]
+      };
+      this.pieChart.setOption(option);
+    },
+    initBarChart() {
+      this.barChart = echarts.init(this.$refs.barChart);
+      // 在这里添加柱状图的数据和配置
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: this.barChartData.xValue
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '货道库存数',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.barChartData.yValueOne
+          },
+          {
+            name: '货道容量',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.barChartData.yValueTwo
+          },
+        ]
+      };
+      this.barChart.setOption(option);
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        objId: null,
+        spaceCode: null,
+        spaceName: null,
+        spaceCapacity: null,
+      }
+      this.resetForm('form')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    /** 返回按钮操作 */
+    handleClose() {
+      const obj = { path: '/wcs/storeInfo' }
+      this.$tab.closeOpenPage(obj)
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.objId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+
+
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('base/spaceInfo/export', {
+        ...this.queryParams
+      }, `reportInfo_${new Date().getTime()}.xlsx`)
+    }
+
+  }
+}
+</script>
+<style scoped>
+.charts-container {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+}
+.chart {
+  flex: 1;
+  margin-right: 20px;
+}
+
+.chart-content {
+  height: 300px;
+}
+.chart-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+</style>