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 | 495 +++++++++++++++++++++++-------------------------------
1 files changed, 208 insertions(+), 287 deletions(-)
diff --git a/Code/WMS/WIDESEA_WMSClient/src/views/Home.vue b/Code/WMS/WIDESEA_WMSClient/src/views/Home.vue
index cb29f02..9023c51 100644
--- a/Code/WMS/WIDESEA_WMSClient/src/views/Home.vue
+++ b/Code/WMS/WIDESEA_WMSClient/src/views/Home.vue
@@ -1,49 +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">
- <div class="chart-card">
- <div class="card-title">浠婃棩鍑哄叆搴撳姣�</div>
- <div id="chart-today" class="chart-content"></div>
- </div>
- <div class="chart-card">
- <div class="card-title">鏈懆鍑哄叆搴撳姣�</div>
- <div id="chart-week" class="chart-content"></div>
- </div>
- </div>
-
- <!-- 绗笁琛岋細鏈湀瀵规瘮/搴撳瓨鎬婚噺 -->
- <div class="chart-row">
- <div class="chart-card">
- <div class="card-title">鏈湀鍑哄叆搴撳姣�</div>
- <div id="chart-month" class="chart-content"></div>
- </div>
- <div class="chart-card">
- <div class="card-title">褰撳墠搴撳瓨鎬婚噺</div>
- <div class="stock-total">
- <div class="total-number">{{ overviewData.TotalStock || 0 }}</div>
- <div class="total-label">鎵樼洏</div>
- </div>
- </div>
- </div>
-
- <!-- 绗洓琛岋細搴撻緞鍒嗗竷/浠撳簱鍒嗗竷 -->
- <div class="chart-row">
- <div class="chart-card">
- <div class="card-title">搴撳瓨搴撻緞鍒嗗竷</div>
- <div id="chart-stock-age" class="chart-content"></div>
- </div>
- <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>
@@ -57,17 +18,8 @@
data() {
return {
charts: {},
- overviewData: {
- TodayInbound: 0,
- TodayOutbound: 0,
- MonthInbound: 0,
- MonthOutbound: 0,
- TotalStock: 0
- },
- weeklyData: [],
monthlyData: [],
- stockAgeData: [],
- warehouseData: []
+ warehouseNames: ['FJSC1', 'ZJSC1', 'GWSC1', 'CWSC1', 'HCSC1']
};
},
mounted() {
@@ -85,234 +37,190 @@
},
initCharts() {
- this.charts.monthlyTrend = echarts.init(document.getElementById("chart-monthly-trend"));
- this.charts.today = echarts.init(document.getElementById("chart-today"));
- this.charts.week = echarts.init(document.getElementById("chart-week"));
- this.charts.month = echarts.init(document.getElementById("chart-month"));
- this.charts.stockAge = echarts.init(document.getElementById("chart-stock-age"));
- this.charts.warehouse = echarts.init(document.getElementById("chart-warehouse"));
+ this.charts.warehouseMonthly = echarts.init(document.getElementById("chart-warehouse-monthly"));
},
async loadData() {
- await this.loadOverview();
- await this.loadWeeklyStats();
await this.loadMonthlyStats();
- await this.loadStockAgeDistribution();
- await this.loadStockByWarehouse();
- },
-
- async loadOverview() {
- try {
- const res = await this.http.get("/api/Dashboard/Overview");
- if (res.Status && res.Data) {
- this.overviewData = res.Data;
- this.updateTodayChart();
- this.updateWeekChart();
- this.updateMonthChart();
- }
- } catch (e) {
- console.error("鍔犺浇鎬昏鏁版嵁澶辫触", e);
- }
- },
-
- async loadWeeklyStats() {
- try {
- const res = await this.http.get("/api/Dashboard/WeeklyStats", { weeks: 12 });
- if (res.Status && res.Data) {
- this.weeklyData = res.Data;
- this.updateWeekChart();
- }
- } catch (e) {
- console.error("鍔犺浇姣忓懆缁熻澶辫触", e);
- }
},
async loadMonthlyStats() {
try {
- const res = await this.http.get("/api/Dashboard/MonthlyStats", { months: 12 });
- if (res.Status && 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 loadStockAgeDistribution() {
- try {
- const res = await this.http.get("/api/Dashboard/StockAgeDistribution");
- if (res.Status && res.Data) {
- this.stockAgeData = res.Data;
- this.updateStockAgeChart();
- }
- } catch (e) {
- console.error("鍔犺浇搴撻緞鍒嗗竷澶辫触", e);
- }
+ getWarehouseName(code) {
+ const nameMap = {
+ 'FJSC1': '璐熸瀬鍗�1鍙蜂粨搴�',
+ 'ZJSC1': '姝ｆ瀬鍗�1鍙蜂粨搴�',
+ 'GWSC1': '楂樻俯1鍙蜂粨搴�',
+ 'CWSC1': '甯告俯1鍙蜂粨搴�',
+ 'HCSC1': '鍒嗗1鍙蜂粨搴�'
+ };
+ return nameMap[code] || code;
},
- async loadStockByWarehouse() {
- try {
- const res = await this.http.get("/api/Dashboard/StockByWarehouse");
- if (res.Status && res.Data) {
- this.warehouseData = res.Data;
- this.updateWarehouseChart();
- }
- } catch (e) {
- console.error("鍔犺浇浠撳簱鍒嗗竷澶辫触", e);
- }
- },
+ 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]
+ }
+ });
+ });
- updateTodayChart() {
const option = {
- tooltip: { trigger: "axis" },
- legend: { data: ["鍏ュ簱", "鍑哄簱"], textStyle: { color: "#fff" } },
+ title: {
+ text: '鍚勪粨搴撴湀搴﹀嚭鍏ュ簱瀵规瘮',
+ textStyle: {
+ color: '#00ffff',
+ fontSize: 16
+ },
+ left: 'center',
+ top: 10
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
+ formatter: function(params) {
+ let tip = `<strong>${params[0].axisValue}</strong><br/>`;
+ params.forEach(param => {
+ 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: 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: ["浠婃棩"],
- axisLabel: { color: "#fff" }
+ type: 'category',
+ 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" }
+ type: 'value',
+ name: '鏁伴噺',
+ nameTextStyle: { color: '#fff' },
+ axisLabel: { color: '#fff' },
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,0.1)',
+ type: 'dashed'
+ }
+ }
},
- series: [
- { name: "鍏ュ簱", type: "bar", data: [this.overviewData.TodayInbound], itemStyle: { color: "#5470c6" } },
- { name: "鍑哄簱", type: "bar", data: [this.overviewData.TodayOutbound], itemStyle: { color: "#91cc75" } }
- ]
- };
- this.charts.today.setOption(option, true);
- },
-
- updateWeekChart() {
- const thisWeek = this.getThisWeekData(this.weeklyData);
- const option = {
- tooltip: { trigger: "axis" },
- legend: { data: ["鍏ュ簱", "鍑哄簱"], textStyle: { color: "#fff" } },
- xAxis: {
- type: "category",
- data: ["鏈懆"],
- axisLabel: { color: "#fff" }
- },
- yAxis: {
- type: "value",
- axisLabel: { color: "#fff" }
- },
- series: [
- { name: "鍏ュ簱", type: "bar", data: [thisWeek.Inbound], itemStyle: { color: "#5470c6" } },
- { name: "鍑哄簱", type: "bar", data: [thisWeek.Outbound], itemStyle: { color: "#91cc75" } }
- ]
- };
- this.charts.week.setOption(option, true);
- },
-
- getThisWeekData(weeklyData) {
- if (!weeklyData || weeklyData.length === 0) return { Inbound: 0, Outbound: 0 };
- const thisWeekKey = this.getCurrentWeekKey();
- const thisWeek = weeklyData.find(w => w.Week === thisWeekKey);
- return thisWeek || { Inbound: 0, Outbound: 0 };
- },
-
- getCurrentWeekKey() {
- const now = new Date();
- const diff = (7 + (now.getDay() - 1)) % 7;
- const monday = new Date(now);
- monday.setDate(now.getDate() - diff);
- const year = monday.getFullYear();
- const jan1 = new Date(year, 0, 1);
- const weekNum = Math.ceil(((monday - jan1) / 86400000 + jan1.getDay() + 1) / 7);
- return `${year}-W${String(weekNum).padStart(2, "0")}`;
- },
-
- updateMonthChart() {
- const option = {
- tooltip: { trigger: "axis" },
- legend: { data: ["鍏ュ簱", "鍑哄簱"], textStyle: { color: "#fff" } },
- xAxis: {
- type: "category",
- data: ["鏈湀"],
- axisLabel: { color: "#fff" }
- },
- yAxis: {
- type: "value",
- axisLabel: { color: "#fff" }
- },
- series: [
- { name: "鍏ュ簱", type: "bar", data: [this.overviewData.MonthInbound], itemStyle: { color: "#5470c6" } },
- { name: "鍑哄簱", type: "bar", data: [this.overviewData.MonthOutbound], itemStyle: { color: "#91cc75" } }
- ]
- };
- this.charts.month.setOption(option, true);
- },
-
- 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: [
+ dataZoom: [
{
- type: "value",
- name: "鏁伴噺",
- axisLabel: { color: "#fff" }
+ type: 'inside',
+ start: 0,
+ end: 100
+ },
+ {
+ 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: [
- { 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" } }
- ]
+ series: series
};
- this.charts.monthlyTrend.setOption(option, true);
+
+ this.charts.warehouseMonthly.setOption(option, true);
},
- updateStockAgeChart() {
- const option = {
- tooltip: { trigger: "axis" },
- xAxis: {
- type: "category",
- data: this.stockAgeData.map(s => s.Range),
- axisLabel: { color: "#fff" }
- },
- yAxis: {
- type: "value",
- axisLabel: { color: "#fff" }
- },
- series: [
- {
- type: "bar",
- data: this.stockAgeData.map(s => s.Count),
- itemStyle: { color: "#5470c6" }
- }
- ]
- };
- this.charts.stockAge.setOption(option, true);
- },
-
- updateWarehouseChart() {
- const option = {
- tooltip: { trigger: "axis" },
- xAxis: {
- type: "category",
- data: this.warehouseData.map(w => w.Warehouse),
- axisLabel: { color: "#fff", rotate: 30 }
- },
- yAxis: {
- type: "value",
- axisLabel: { color: "#fff" }
- },
- series: [
- {
- type: "bar",
- data: this.warehouseData.map(w => w.Count),
- itemStyle: { color: "#5470c6" }
- }
- ]
- };
- this.charts.warehouse.setOption(option, true);
+ getBarColor(index) {
+ const colors = [
+ '#5470c6', // 钃�
+ '#fac858', // 榛�
+ '#73c0de', // 澶╄摑
+ '#fc8452', // 姗�
+ '#ea7ccc' // 绮�
+ ];
+ return colors[index] || '#5470c6';
}
}
};
@@ -321,8 +229,10 @@
<style scoped>
.dashboard-container {
padding: 20px;
- background-color: #0e1a2b;
+ color: #e0e0e0;
min-height: calc(100vh - 60px);
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+ background-attachment: fixed;
}
.chart-row {
@@ -337,11 +247,25 @@
.chart-card {
flex: 1;
- background: rgba(255, 255, 255, 0.05);
- border: 1px solid rgba(25, 186, 139, 0.17);
- border-radius: 4px;
+ background: rgba(10, 16, 35, 0.6);
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(64, 224, 208, 0.3);
+ border-radius: 12px;
padding: 15px;
position: relative;
+ box-shadow:
+ 0 0 15px rgba(0, 255, 255, 0.1),
+ inset 0 0 10px rgba(64, 224, 208, 0.1);
+ transition: all 0.3s ease;
+ overflow: hidden;
+}
+
+.chart-card:hover {
+ transform: translateY(-5px);
+ box-shadow:
+ 0 0 25px rgba(0, 255, 255, 0.3),
+ inset 0 0 15px rgba(64, 224, 208, 0.2);
+ border: 1px solid rgba(64, 224, 208, 0.6);
}
.chart-card::before {
@@ -351,8 +275,9 @@
left: 0;
width: 10px;
height: 10px;
- border-top: 2px solid #02a6b5;
- border-left: 2px solid #02a6b5;
+ border-top: 2px solid #00ffff;
+ border-left: 2px solid #00ffff;
+ box-shadow: -2px -2px 10px #00ffff, 0 0 10px rgba(0, 255, 255, 0.7);
}
.chart-card::after {
@@ -362,50 +287,46 @@
right: 0;
width: 10px;
height: 10px;
- border-top: 2px solid #02a6b5;
- border-right: 2px solid #02a6b5;
+ border-top: 2px solid #00ffff;
+ border-right: 2px solid #00ffff;
+ box-shadow: 2px -2px 10px #00ffff, 0 0 10px rgba(0, 255, 255, 0.7);
}
.card-title {
- color: #fff;
+ color: #00ffff;
font-size: 16px;
text-align: center;
margin-bottom: 10px;
+ text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
+ font-weight: 500;
}
.chart-content {
- height: 280px;
+ height: 500px;
width: 100%;
}
-.stock-total {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 280px;
-}
-
-.total-number {
- font-size: 64px;
- font-weight: bold;
- color: #67caca;
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
-}
-
-.total-label {
- font-size: 18px;
- color: #fcf0d8;
- margin-top: 10px;
-}
-
-/* 鍏ㄥ鍥捐〃 */
.full-width .chart-card {
flex: none;
width: 100%;
}
.full-width .chart-content {
- height: 350px;
+ height: 500px;
}
-</style>
+
+.dashboard-container::before {
+ content: "";
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-image:
+ linear-gradient(rgba(64, 224, 208, 0.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(64, 224, 208, 0.05) 1px, transparent 1px);
+ background-size: 30px 30px;
+ pointer-events: none;
+ z-index: -1;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3