From 5b34a1458e74f8902d01ebd844c2954f554c9e74 Mon Sep 17 00:00:00 2001
From: xiazhengtongxue <133085197+xiazhengtongxue@users.noreply.github.com>
Date: 星期四, 30 四月 2026 11:05:37 +0800
Subject: [PATCH] 1
---
Code/WMS/WIDESEA_WMSClient/src/views/Home.vue | 353 ++++++++++++++++++++++++----------------------------------
1 files changed, 148 insertions(+), 205 deletions(-)
diff --git a/Code/WMS/WIDESEA_WMSClient/src/views/Home.vue b/Code/WMS/WIDESEA_WMSClient/src/views/Home.vue
index ea951db..9023c51 100644
--- a/Code/WMS/WIDESEA_WMSClient/src/views/Home.vue
+++ b/Code/WMS/WIDESEA_WMSClient/src/views/Home.vue
@@ -1,26 +1,10 @@
<template>
<div class="dashboard-container">
- <!-- 椤堕儴锛氭湰鏈堝嚭鍏ュ簱瓒嬪娍 (鍏ㄥ) -->
+ <!-- 鍚勪粨搴撴湀搴﹀嚭鍏ュ簱瀵规瘮鍥� -->
<div class="chart-row full-width">
<div class="chart-card">
- <div class="card-title">姣忔湀鍑哄叆搴撹秼鍔�</div>
- <div id="chart-monthly-trend" class="chart-content"></div>
- </div>
- </div>
-
- <!-- 绗簩琛岋細姣忔棩鍑哄叆搴撹秼鍔� (鍏ㄥ) -->
- <div class="chart-row full-width">
- <div class="chart-card">
- <div class="card-title">姣忔棩鍑哄叆搴撹秼鍔�</div>
- <div id="chart-daily" class="chart-content"></div>
- </div>
- </div>
-
- <!-- 绗洓琛岋細浠撳簱鍒嗗竷 -->
- <div class="chart-row">
- <div class="chart-card">
- <div class="card-title">鍚勪粨搴撳簱瀛樺垎甯�</div>
- <div id="chart-warehouse" class="chart-content"></div>
+ <div class="card-title">鍚勪粨搴撴湀搴﹀嚭鍏ュ簱瀵规瘮</div>
+ <div id="chart-warehouse-monthly" class="chart-content"></div>
</div>
</div>
</div>
@@ -34,9 +18,8 @@
data() {
return {
charts: {},
- dailyData: [],
monthlyData: [],
- warehouseData: []
+ warehouseNames: ['FJSC1', 'ZJSC1', 'GWSC1', 'CWSC1', 'HCSC1']
};
},
mounted() {
@@ -54,212 +37,190 @@
},
initCharts() {
- this.charts.monthlyTrend = echarts.init(document.getElementById("chart-monthly-trend"));
- this.charts.daily = echarts.init(document.getElementById("chart-daily"));
- this.charts.warehouse = echarts.init(document.getElementById("chart-warehouse"));
+ this.charts.warehouseMonthly = echarts.init(document.getElementById("chart-warehouse-monthly"));
},
async loadData() {
await this.loadMonthlyStats();
- await this.loadDailyStats();
- await this.loadStockByWarehouse();
},
async loadMonthlyStats() {
try {
- const res = await this.http.get("/api/Dashboard/MonthlyStats", { months: 12 });
- if (res.status && res.data) {
- console.log("姣忔湀缁熻鏁版嵁:", res.data);
- this.monthlyData = res.data;
- this.updateMonthlyTrendChart();
- }
+ const promises = this.warehouseNames.map(warehouse =>
+ this.http.get("/api/Dashboard/MonthlyStats", {
+ months: 6,
+ Roadway: warehouse
+ })
+ );
+
+ const results = await Promise.all(promises);
+
+ this.monthlyData = results.map((res, index) => ({
+ warehouse: this.warehouseNames[index],
+ warehouseName: this.getWarehouseName(this.warehouseNames[index]),
+ data: res.data || []
+ }));
+
+ this.updateWarehouseMonthlyChart();
} catch (e) {
console.error("鍔犺浇姣忔湀缁熻澶辫触", e);
}
},
- async loadDailyStats() {
- try {
- const res = await this.http.get("/api/Dashboard/DailyStats", { days: 30 });
- if (res.status && res.data) {
- console.log("姣忔棩缁熻鏁版嵁:", res.data);
- this.dailyData = res.data;
- this.updateDailyChart();
- }
- } catch (e) {
- console.error("鍔犺浇姣忔棩缁熻澶辫触", e);
- }
- },
-
- async loadStockByWarehouse() {
- try {
- const res = await this.http.get("/api/Dashboard/StockByWarehouse");
- if (res.status && res.data) {
- console.log("浠撳簱鍒嗗竷鏁版嵁:", res.data);
- this.warehouseData = res.data.data || res.data;
- this.updateWarehouseChart();
- }
- } catch (e) {
- console.error("鍔犺浇浠撳簱鍒嗗竷澶辫触", e);
- }
- },
-
- updateMonthlyTrendChart() {
- const option = {
- tooltip: { trigger: "axis" },
- legend: { data: ["鍏ュ簱", "鍑哄簱"], textStyle: { color: "#fff" } },
- xAxis: {
- type: "category",
- data: this.monthlyData.map(m => m.month),
- axisLabel: { color: "#fff", rotate: 45 }
- },
- yAxis: [
- {
- type: "value",
- name: "鏁伴噺",
- axisLabel: { color: "#fff" }
- }
- ],
- series: [
- { name: "鍏ュ簱", type: "bar", data: this.monthlyData.map(m => m.inbound), itemStyle: { color: "#5470c6" } },
- { name: "鍑哄簱", type: "line", data: this.monthlyData.map(m => m.outbound), itemStyle: { color: "#91cc75" } }
- ]
+ getWarehouseName(code) {
+ const nameMap = {
+ 'FJSC1': '璐熸瀬鍗�1鍙蜂粨搴�',
+ 'ZJSC1': '姝ｆ瀬鍗�1鍙蜂粨搴�',
+ 'GWSC1': '楂樻俯1鍙蜂粨搴�',
+ 'CWSC1': '甯告俯1鍙蜂粨搴�',
+ 'HCSC1': '鍒嗗1鍙蜂粨搴�'
};
- this.charts.monthlyTrend.setOption(option, true);
+ return nameMap[code] || code;
},
- updateDailyChart() {
- const option = {
- tooltip: { trigger: "axis" },
- legend: { data: ["鍏ュ簱", "鍑哄簱"], textStyle: { color: "#fff" } },
- xAxis: {
- type: "category",
- data: this.dailyData.map(d => d.date),
- axisLabel: {
- color: "#fff",
- interval: 0,
- rotate: 45,
- fontSize: 12,
- margin: 10
- },
- axisTick: {
- alignWithLabel: true
- }
- },
- yAxis: {
- type: "value",
- axisLabel: { color: "#fff" }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '15%',
- top: '10%',
- containLabel: true
- },
- series: [
- { name: "鍏ュ簱", type: "bar", data: this.dailyData.map(d => d.inbound), itemStyle: { color: "#5470c6" } },
- { name: "鍑哄簱", type: "bar", data: this.dailyData.map(d => d.outbound), itemStyle: { color: "#91cc75" } }
- ]
- };
- this.charts.daily.setOption(option, true);
- },
-
- updateWarehouseChart() {
- const warehouseNames = this.warehouseData.map(w => w.warehouse);
- const totalStocks = this.warehouseData.map(w => w.total);
- const hasStocks = this.warehouseData.map(w => w.hasStock);
- const noStocks = this.warehouseData.map(w => w.noStock);
- const hasStockPercentages = this.warehouseData.map(w => w.hasStockPercentage);
- const noStockPercentages = this.warehouseData.map(w => w.noStockPercentage);
+ updateWarehouseMonthlyChart() {
+ // 鑾峰彇鎵�鏈夋湀浠�
+ const months = this.monthlyData[0]?.data.map(d => `${d.month}鏈坄) || [];
+ // 涓烘瘡涓粨搴撶敓鎴愮郴鍒楁暟鎹�
+ const series = [];
+
+ this.monthlyData.forEach((warehouseData, index) => {
+ const data = warehouseData.data;
+
+ series.push({
+ name: warehouseData.warehouseName,
+ type: 'bar',
+ data: data.map(d => ({
+ value: (d.inbound || 0) + (d.outbound || 0),
+ inbound: d.inbound || 0,
+ outbound: d.outbound || 0,
+ label: {
+ show: true,
+ position: 'top',
+ formatter: function(params) {
+ return `鍏�:${params.data.inbound}\n鍑�:${params.data.outbound}`;
+ },
+ fontSize: 10,
+ color: '#fff',
+ lineHeight: 15
+ }
+ })),
+ barWidth: '15%',
+ barGap: '10%',
+ itemStyle: {
+ color: this.getBarColor(index),
+ borderRadius: [3, 3, 0, 0]
+ }
+ });
+ });
+
const option = {
+ title: {
+ text: '鍚勪粨搴撴湀搴﹀嚭鍏ュ簱瀵规瘮',
+ textStyle: {
+ color: '#00ffff',
+ fontSize: 16
+ },
+ left: 'center',
+ top: 10
+ },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
- let tip = params[0].name + '<br/>';
+ let tip = `<strong>${params[0].axisValue}</strong><br/>`;
params.forEach(param => {
- const dataIndex = param.dataIndex;
- const warehouse = window.homeComponent.warehouseData[dataIndex];
-
- if (param.seriesName === '宸茬敤瀹归噺') {
- tip += `${param.marker}${param.seriesName}: ${param.value} (${warehouse.hasStockPercentage})<br/>`;
- tip += `鏈夊簱瀛�: ${warehouse.hasStock}<br/>`;
- tip += `鏃犲簱瀛�: ${warehouse.noStock}<br/>`;
- tip += `鎬诲閲�: ${warehouse.total}`;
- } else if (param.seriesName === '鍓╀綑瀹归噺') {
- tip += `${param.marker}${param.seriesName}: ${param.value} (${warehouse.noStockPercentage})<br/>`;
- tip += `鏈夊簱瀛�: ${warehouse.hasStock}<br/>`;
- tip += `鏃犲簱瀛�: ${warehouse.noStock}<br/>`;
- tip += `鎬诲閲�: ${warehouse.total}`;
- }
+ tip += `<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${param.color};margin-right:5px;"></span>`;
+ tip += `${param.seriesName}: `;
+ tip += `鍏ュ簱:${param.data.inbound} | 鍑哄簱:${param.data.outbound} | 鎬昏:${param.value}<br/>`;
});
return tip;
}
},
legend: {
- data: ['宸茬敤瀹归噺', '鍓╀綑瀹归噺'],
- textStyle: { color: '#fff' }
+ data: this.monthlyData.map(d => d.warehouseName),
+ textStyle: { color: '#fff', fontSize: 11 },
+ top: 45,
+ left: 'center',
+ type: 'scroll'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '10%',
+ top: '20%',
+ containLabel: true
},
xAxis: {
type: 'category',
- data: warehouseNames,
- axisLabel: { color: '#fff', rotate: 30 }
+ data: months,
+ axisLabel: {
+ color: '#fff',
+ fontSize: 11
+ },
+ axisLine: {
+ lineStyle: { color: 'rgba(255,255,255,0.3)' }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: 'rgba(255,255,255,0.1)',
+ type: 'dashed'
+ }
+ }
},
yAxis: {
type: 'value',
- axisLabel: { color: '#fff' }
+ name: '鏁伴噺',
+ nameTextStyle: { color: '#fff' },
+ axisLabel: { color: '#fff' },
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,0.1)',
+ type: 'dashed'
+ }
+ }
},
- series: [
+ dataZoom: [
{
- name: '宸茬敤瀹归噺',
- type: 'bar',
- data: hasStocks.map((value, index) => ({
- value: value,
- label: {
- show: true,
- position: 'top',
- formatter: '{c} {a|' + hasStockPercentages[index] + '}',
- rich: {
- a: {
- lineHeight: 20,
- borderColor: '#91cc75',
- color: '#91cc75'
- }
- }
- }
- })),
- itemStyle: { color: '#91cc75' }
+ type: 'inside',
+ start: 0,
+ end: 100
},
{
- name: '鍓╀綑瀹归噺',
- type: 'bar',
- data: noStocks.map((value, index) => ({
- value: value,
- label: {
- show: true,
- position: 'top',
- formatter: '{c} {a|' + noStockPercentages[index] + '}',
- rich: {
- a: {
- lineHeight: 20,
- borderColor: '#fac858',
- color: '#fac858'
- }
- }
- }
- })),
- itemStyle: { color: '#fac858' }
+ start: 0,
+ end: 100,
+ height: 20,
+ bottom: 0,
+ borderColor: 'rgba(255,255,255,0.3)',
+ fillerColor: 'rgba(0,255,255,0.1)',
+ handleStyle: {
+ color: '#00ffff',
+ borderColor: '#00ffff'
+ },
+ textStyle: {
+ color: '#fff'
+ }
}
- ]
+ ],
+ series: series
};
-
- window.homeComponent = this;
-
- this.charts.warehouse.setOption(option, true);
+
+ this.charts.warehouseMonthly.setOption(option, true);
+ },
+
+ getBarColor(index) {
+ const colors = [
+ '#5470c6', // 钃�
+ '#fac858', // 榛�
+ '#73c0de', // 澶╄摑
+ '#fc8452', // 姗�
+ '#ea7ccc' // 绮�
+ ];
+ return colors[index] || '#5470c6';
}
}
};
@@ -331,22 +292,6 @@
box-shadow: 2px -2px 10px #00ffff, 0 0 10px rgba(0, 255, 255, 0.7);
}
-.chart-card::before,
-.chart-card::after {
- animation: neon-flicker 2s infinite alternate;
-}
-
-@keyframes neon-flicker {
- 0%, 100% {
- opacity: 1;
- box-shadow: -2px -2px 10px #00ffff, 0 0 10px rgba(0, 255, 255, 0.7);
- }
- 50% {
- opacity: 0.8;
- box-shadow: -2px -2px 5px #00ffff, 0 0 5px rgba(0, 255, 255, 0.5);
- }
-}
-
.card-title {
color: #00ffff;
font-size: 16px;
@@ -357,21 +302,19 @@
}
.chart-content {
- height: 280px;
+ height: 500px;
width: 100%;
}
-/* 鍏ㄥ鍥捐〃 */
.full-width .chart-card {
flex: none;
width: 100%;
}
.full-width .chart-content {
- height: 350px;
+ height: 500px;
}
-/* 娣诲姞缃戞牸绾挎晥鏋� */
.dashboard-container::before {
content: "";
position: fixed;
--
Gitblit v1.9.3