前端新增库位使用具体数量展示图

wms_client/src/layout/stock.vue

@@ -12,6 +12,8 @@
           <el-col :span="6" style="display: flex; align-items: center; justify-content: center; border: 1px solid blue; padding: 5px; border-radius: 4px;">
             <span>当前物料总数量: {{ goodstotal }}</span>
           </el-col>
+          <el-button type="success" @click="showVerticalStorageStats()" style="width: 120px; margin-left: 5px;">立库库位统计</el-button>
+          <el-button type="success" @click="showFourWayStorageStats()" style="width: 140px; margin-left: 5px;">四向车库库位统计</el-button>
         </el-row>
         <br />
         <el-table id="stock-table" :data="displayStocks" stripe border v-loading="loading" class="table-class"
@@ -105,6 +107,31 @@
             </span>
           </template>
         </el-dialog>
+        <!-- 新增库位统计弹窗 -->
+        <el-dialog v-model="locationStatsDialogVisible" :title="storageStatsTitle" width="40%" draggable>
+          <el-row :gutter="20" justify="center">
+            <el-col :span="10">
+              <div class="stat-card occupied">
+                <div class="stat-value">{{ locationStats.occupied }}</div>
+                <div class="stat-label">已占用库位</div>
+              </div>
+            </el-col>
+            <el-col :span="10">
+              <div class="stat-card free">
+                <div class="stat-value">{{ locationStats.free }}</div>
+                <div class="stat-label">空闲库位</div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" justify="center" style="margin-top: 20px;">
+            <el-col :span="10">
+              <div class="stat-card total">
+                <div class="stat-value">{{ locationStats.total }}</div>
+                <div class="stat-label">总库位数</div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-dialog>
       </el-config-provider>
     </div>
   </template>
@@ -207,13 +234,22 @@
             label: '按零件分类'
           }
         ],
-        goodsIdQuery: ''
+        goodsIdQuery: '',
+        // 新增库位统计数据
+        locationStatsDialogVisible: false,
+        storageStatsTitle: '库位统计', // 新增标题数据
+        locationStats: {
+          occupied: 0,
+          free: 0,
+          total: 0
+        }
       }
     },
     mounted() {
       this.refresh()
     },
     methods: {
+
       locationFormat: (row, column, cellValue, index) => {
         return locationFormatter(cellValue)
       },
@@ -413,12 +449,99 @@
             showClose: true
           })
         })
+      },
+      // 立库统计方法
+// 修改 showVerticalStorageStats 方法
+      async showVerticalStorageStats() {
+        try {
+          this.storageStatsTitle = '立库统计';
+          // 调用获取立库统计的API
+          const response = await fetch('http://172.21.80.150:19990/api/query/getAllLocations');
+          const data = await response.json();
+
+          // 解析数据
+          const occupied = data.find(item => item.name === '占用')?.value || 0;
+          const free = data.find(item => item.name === '空闲')?.value || 0;
+          const locked = data.find(item => item.name === '锁定')?.value || 0;
+          const total = occupied + free + locked;
+
+          this.locationStats = {
+            occupied: occupied,
+            free: free,
+            total: total
+          };
+
+          this.locationStatsDialogVisible = true;
+        } catch (error) {
+          ElMessage.error("获取立库统计信息失败: " + error.message);
         }
       },
+
+// 修改 showFourWayStorageStats 方法
+      async showFourWayStorageStats() {
+        try {
+          this.storageStatsTitle = '四向车库统计';
+          // 调用获取四向车库统计的API
+          // 注意：这里假设四向车库使用相同的接口，如果有不同的接口请相应修改URL
+          const response = await fetch('http://172.21.80.150:19990/api/query/getAllLocationsForFour');
+          const data = await response.json();
+
+          // 解析数据（这里使用相同的数据结构，实际项目中可能需要根据参数区分）
+          const occupied = data.find(item => item.name === '占用')?.value || 0;
+          const free = data.find(item => item.name === '空闲')?.value || 0;
+          const locked = data.find(item => item.name === '锁定')?.value || 0;
+          const total = occupied + free + locked;
+
+          this.locationStats = {
+            occupied: occupied,
+            free: free,
+            total: total
+          };
+
+          this.locationStatsDialogVisible = true;
+        } catch (error) {
+          ElMessage.error("获取四向车库统计信息失败: " + error.message);
+        }
+      }
+
+    },
   }
   </script>
   
   <style scoped>
+  /* 新增库位统计卡片样式 */
+  .stat-card {
+    text-align: center;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .stat-card.occupied {
+    background-color: #fef0f0;
+    border: 1px solid #fbc4c4;
+  }
+
+  .stat-card.free {
+    background-color: #f0f9ee;
+    border: 1px solid #c4eac4;
+  }
+
+  .stat-card.total {
+    background-color: #eff4ff;
+    border: 1px solid #c4ccf0;
+  }
+
+  .stat-value {
+    font-size: 32px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .stat-label {
+    font-size: 16px;
+    color: #666;
+  }
   .el-pagination {
     padding-left: 5px;
   }

wms_serve/src/main/resources/application.yml

@@ -1,15 +1,15 @@
 spring:
     # 本地测试环境
-#    datasource:
+    datasource:
-#        url: jdbc:mysql://localhost:3306/wms_yaxinke_yangzhou?characterEncoding=utf8&serverTimezone=Asia/Shanghai&allowMultiQueries=true
+        url: jdbc:mysql://localhost:3306/wms_yaxinke_yangzhou?characterEncoding=utf8&serverTimezone=Asia/Shanghai&allowMultiQueries=true
-#        username: root
+        username: root
-#        password: 123456
+        password: 123456
 
  #     在线环境
-    datasource:
+#    datasource:
-        url: jdbc:mysql://172.21.80.150:3306/wms_yaxinke_yangzhou?characterEncoding=utf8&serverTimezone=Asia/Shanghai&allowMultiQueries=true
+#        url: jdbc:mysql://172.21.80.150:3306/wms_yaxinke_yangzhou?characterEncoding=utf8&serverTimezone=Asia/Shanghai&allowMultiQueries=true
-        username: developer
+#        username: developer
-        password: developer
+#        password: developer
 #
 
     profiles: