From 4d29fcfc27c10a09a3ac5aaf52b6cd3407d11ade Mon Sep 17 00:00:00 2001
From: heshaofeng <heshaofeng@hnkhzn.com>
Date: 星期一, 19 一月 2026 13:55:40 +0800
Subject: [PATCH] 组盘前端添加防抖，首页的优化
---
项目代码/WIDESEA_WMSClient/src/views/Home.vue | 487 ++++++++++++++++++++++++-----------------------------
1 files changed, 223 insertions(+), 264 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/Home.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/Home.vue"
index c86c83d..f3b4fb6 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/Home.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/Home.vue"
@@ -1,6 +1,6 @@
<template>
<div class="wms-dashboard">
- <!-- 缁熻鍗＄墖鍖哄煙 - 缁戝畾鍝嶅簲寮忔暟鎹� -->
+ <!-- 缁熻鍗＄墖鍖哄煙 -->
<el-row :gutter="20" class="stats-card-row">
<el-col :span="4">
<div class="stats-card">
@@ -9,8 +9,8 @@
<Box />
</el-icon>
</div>
- <div class="card-title">鎬诲簱瀛�</div>
- <div class="card-value">{{ formatNumber(bigscreendata.totalStockQuantity) }}</div>
+ <div class="card-title">寰呭叆搴撹鍗�</div>
+ <div class="card-value">{{ bigscreendata.unInBoundOrderCount }}</div>
</div>
</el-col>
<el-col :span="4">
@@ -78,11 +78,9 @@
<div ref="locationRateRef" class="chart-container"></div>
</div>
</el-col>
- <!-- 涓存湡淇℃伅鏀逛负琛ㄦ牸 -->
<el-col :span="8">
<div class="chart-card">
<div class="chart-title">鐗╂枡涓存湡淇℃伅</div>
- <!-- 涓存湡鐗╂枡琛ㄦ牸 -->
<div class="expiration-table-container">
<el-table
:data="expirationTableData"
@@ -107,7 +105,6 @@
</span>
</template>
</el-table-column>
- <!-- <el-table-column prop="barcode" label="鏉＄爜" align="center" /> -->
<el-table-column prop="stockQuantity" label="搴撳瓨鏁伴噺" align="center" />
<el-table-column prop="locationCode" label="搴撲綅" align="center" />
<el-table-column prop="palletCode" label="鎵樼洏缂栧彿" align="center" />
@@ -127,30 +124,46 @@
<el-row :gutter="20" class="chart-row">
</el-row>
- <!-- 琛ㄦ牸鍖哄煙 - 缁戝畾鍚庣浣滀笟鏁版嵁 -->
+ <!-- 琛ㄦ牸鍖哄煙 - 瀹炴椂浣滀笟鐩戞帶 -->
<el-row :gutter="20" class="table-row" width="100%">
<el-col :span="24">
<div class="table-card">
<div class="table-title">瀹炴椂浣滀笟鐩戞帶</div>
- <el-table :data="showTaskList" border style="width: 100%;">
- <el-table-column prop="taskNum" label="浠诲姟鍙�" />
- <el-table-column prop="taskStatus" label="浠诲姟鐘舵��" >
+ <el-table
+ :data="showTaskList"
+ border
+ style="width: 100%;"
+ :empty-text="showTaskList.length === 0 ? '鏆傛棤浣滀笟鏁版嵁' : ''"
+ >
+ <el-table-column prop="upperOrderNo" label="鍗曟嵁缂栧彿" />
+ <el-table-column label="鍗曟嵁鐘舵��" >
<template #default="{ row }">
- <span class="task-status" :class="getStatusClass(row.taskStatus)">{{ getTaskStatusText(row.taskStatus) }}</span>
+ <span class="task-status" :class="getStatusClass(row.taskStatus)">
+ {{ getTaskStatusText(row.taskStatus) }}
+ </span>
</template>
</el-table-column>
- <el-table-column prop="taskType" label="浠诲姟绫诲瀷" >
+ <el-table-column label="鍗曟嵁绫诲瀷" >
<template #default="{ row }">
- <span class="task-type" :class="getTypeClass(row.taskType)">{{ getTaskTypeText(row.taskType) }}</span>
+ <span class="task-type" :class="getTypeClass(row.taskType)">
+ {{ getTaskTypeText(row) }}
+ </span>
</template>
</el-table-column>
- <el-table-column prop="palletCode" label="鎵樼洏缂栧彿" />
- <el-table-column prop="sourceAddress" label="璧风偣浣嶇疆"/>
- <el-table-column prop="targetAddress" label="缁堢偣浣嶇疆"/>
+ <el-table-column label="鍥炰紶MES鐘舵��" >
+ <template #default="{ row }">
+ <span class="task-status" :class="getMESStatusClass(row.returnToMESStatus)">
+ {{ getMESStatusText(row.returnToMESStatus) }}
+ </span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="factoryArea" label="鍘傚尯" />
+ <el-table-column prop="modifier" label="淇敼浜�" />
<el-table-column prop="createDate" label="鍒涘缓鏃堕棿"/>
+ <el-table-column prop="modifyDate" label="淇敼鏃堕棿"/>
</el-table>
<div class="table-pagination">
- <el-pagination layout="prev, pager, next, jumper" :current-page="1" :total="50" />
+ <el-pagination layout="prev, pager, next, jumper" :current-page="1" :total="mergedTaskList.length" />
</div>
</div>
</el-col>
@@ -162,62 +175,45 @@
import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
import * as echarts from 'echarts';
import http from "@/api/http.js";
-// 琛ュ厖缂哄け鐨勫浘鏍囧鍏�
import { Box, Document, Download, Upload } from '@element-plus/icons-vue';
-// 琛ュ厖ElMessage瀵煎叆
import { ElMessage } from 'element-plus';
-// 鍝嶅簲寮忔暟鎹�
-const month = ref('month');
-const orderType = ref('return');
-
-// 鍚庣杩斿洖鏁版嵁锛堝搷搴斿紡锛�
+// 鍝嶅簲寮忔暟鎹� - 鏂板 completeTask 瀛楁
const bigscreendata = ref({
totalStockQuantity: 0,
unOutBoundOrderCount: 0,
+ unInBoundOrderCount:0,
dailyCompletionRate: 0,
unhandledExceptionCount: 0,
locationUtilizationRate: 0,
inStockPallet: 0,
freeStockPallet: 0,
dailyInOutBoundList: [],
- taskList: [],
+ completeTask: [], // 鏂板锛氬悗绔繑鍥炵殑宓屽浠诲姟鏁版嵁
inboundCount: 0,
outboundCount: 0,
inventoryLocationDist: [],
exceptionTypeTrend: [],
- nearExpirationList: [] // 鏀逛负鏁扮粍绫诲瀷锛屽尮閰嶆柊鏁版嵁缁撴瀯
+ nearExpirationList: []
});
-// 涓存湡琛ㄦ牸鏁版嵁锛堣绠楀睘鎬э細閫傞厤鏂扮殑鏁扮粍鏁版嵁缁撴瀯锛�
+// 涓存湡琛ㄦ牸鏁版嵁锛堜繚鎸佷笉鍙橈級
const expirationTableData = computed(() => {
- // 鏂版暟鎹粨鏋勬槸鏁扮粍锛岀洿鎺ュ彇鏁扮粍骞跺鐞嗙┖鍊�
const expirationList = bigscreendata.value.nearExpirationList || [];
-
- // 绗竴姝ワ細鍘婚噸 - 鎸� 鐗╂枡缂栫爜+鎵规鍙�+鎵樼洏缂栧彿+鏈夋晥鏈� 鍞竴鏍囪瘑鍘婚噸
const uniqueMap = new Map();
expirationList.forEach(item => {
- // 鎷兼帴鍞竴鏍囪瘑锛堝鐞嗙┖鍊硷紝閬垮厤鍥犵┖鍊煎鑷撮噸澶嶅垽鏂敊璇級
const uniqueKey = [
item.materielCode || '鏈煡缂栫爜',
item.batchNo || '鏈煡鎵规',
item.palletCode || '鏈煡鎵樼洏',
- ].join('|'); // 鐢ㄧ壒娈婂瓧绗﹀垎闅旓紝閬垮厤瀛楁鍊兼嫾鎺ュ悗娣锋穯
-
- // 鍙繚鐣欑涓�娆″嚭鐜扮殑璁板綍
+ ].join('|');
if (!uniqueMap.has(uniqueKey)) {
uniqueMap.set(uniqueKey, item);
}
});
-
- // 鎻愬彇鍘婚噸鍚庣殑鏁扮粍
const uniqueExpirationList = Array.from(uniqueMap.values());
-
- // 绗簩姝ワ細閬嶅巻鍘婚噸鍚庣殑鏁版嵁锛岃ˉ鍏呬复鏈熺瓑绾у拰榛樿鍊�
return uniqueExpirationList.map(item => {
- // 鎻愬彇褰撳墠鐗╂枡鐨勪复鏈熷ぉ鏁帮紙鏍稿績瀛楁锛�
const daysToExpiration = item.daysToExpiration || 0;
- // 璁＄畻涓存湡绛夌骇
let expireLevel = '';
if (daysToExpiration < 0) {
expireLevel = '宸茶繃鏈�';
@@ -230,7 +226,6 @@
} else {
expireLevel = '30澶╀互涓�';
}
-
return {
materielCode: item.materielCode || '鏈煡缂栫爜',
materielName: item.materielName || '鏈煡鍚嶇О',
@@ -246,14 +241,13 @@
});
});
-// 绌烘暟鎹彁绀烘枃鏈紙淇鍒ゆ柇閫昏緫锛�
+// 绌烘暟鎹彁绀烘枃鏈紙淇濇寔涓嶅彉锛�
const emptyText = computed(() => {
const expirationList = bigscreendata.value.nearExpirationList || [];
- // 鏁扮粍闀垮害涓�0鏃舵樉绀虹┖鎻愮ず锛屽惁鍒欎笉鏄剧ず锛堝師閫昏緫鍐欏弽浜嗭級
return expirationList.length === 0 ? '鏆傛棤涓存湡鐗╂枡鏁版嵁' : '';
});
-// 鑾峰彇涓存湡绛夌骇鏍峰紡绫�
+// 鑾峰彇涓存湡绛夌骇鏍峰紡绫伙紙淇濇寔涓嶅彉锛�
const getExpireLevelClass = (level) => {
switch(level) {
case '宸茶繃鏈�': return 'expire-level expired';
@@ -265,75 +259,131 @@
}
};
-const taskStatusMap = {
- 100: "鏂板缓",
- 105: "宸插彂閫�",
- 200: "鍫嗗灈鏈哄緟鎵ц",
- 210: "鍫嗗灈鏈烘墽琛屼腑",
- 220: "鍫嗗灈鏈哄畬鎴�",
- 400: "杈撻�佺嚎寰呮墽琛�",
- 410: "杈撻�佺嚎鎵ц涓�",
- 420: "杈撻�佺嚎瀹屾垚",
- 300: "AGV寰呮墽琛�",
- 310: "AGV鎵ц涓�",
- 315: "AGV鍙栬揣涓�",
- 320: "AGV寰呯户缁墽琛�",
- 325: "AGV鏀捐揣涓�",
- 330: "AGV瀹屾垚",
- 900: "浠诲姟瀹屾垚",
- 970: "浠诲姟鎸傝捣",
- 980: "浠诲姟鍙栨秷",
- 990: "浠诲姟寮傚父",
- 110: "鎻愬崌鏈烘墽琛屼腑"
+// 鏍稿績锛氬叆搴�/鍑哄簱涓氬姟绫诲瀷鏋氫妇鏄犲皠
+const inboundBusinessTypeMap = {
+ 11: "閲囪喘鍏ュ簱",
+ 12: "鏉傛敹鍗�",
+ 13: "鐢熶骇閫�鏂欏崟",
+ 14: "澶栧崗閫�鏂欏崟",
+ 15: "閿�鍞��搴撳崟",
+ 3: "璋冩嫧鍏ュ簱鍗�"
};
-// 鑾峰彇浠诲姟鐘舵�佹枃鏈�
+const outboundBusinessTypeMap = {
+ 21: "宸ュ崟棰嗘枡鍑哄簱鍗�",
+ 22: "鏉傚彂鍗�",
+ 23: "閫�璐у崟",
+ 24: "閿�鍞嚭搴撳崟",
+ 25: "澶栧崗棰嗘枡鐢宠鍗�",
+ 2: "璋冩嫧鍑哄簱鍗�",
+};
+
+// 鏍稿績淇敼锛氫粠 completeTask 涓彁鍙栬鍗曟暟鎹�
+const mergedTaskList = computed(() => {
+ // 1. 鑾峰彇 completeTask 鏁扮粍锛屽鐞嗙┖鍊�
+ const completeTaskList = bigscreendata.value.completeTask || [];
+ // 2. 鍙栫涓�涓厓绱狅紙鍚庣杩斿洖鏁扮粍闀垮害涓�1锛�
+ const taskData = completeTaskList[0] || {};
+ // 3. 鎻愬彇鍏ュ簱/鍑哄簱璁㈠崟锛屽鐞嗙┖鍊�
+ const inboundOrders = taskData.inboundOrders || [];
+ const outboundOrders = taskData.outboundOrders || [];
+
+ console.log('浠巆ompleteTask鎻愬彇鐨勫叆搴撹鍗曪細', inboundOrders);
+ console.log('浠巆ompleteTask鎻愬彇鐨勫嚭搴撹鍗曪細', outboundOrders);
+
+ // 鏍煎紡鍖栧叆搴撹鍗�
+ const formattedInbound = inboundOrders.map(item => ({
+ upperOrderNo: item.upperOrderNo || item.inboundOrderNo || '鏈煡鍗曞彿',
+ taskStatus: item.orderStatus || 0,
+ taskType: 'inbound',
+ businessType: item.businessType || '',
+ returnToMESStatus: item.returnToMESStatus || 0,
+ factoryArea: item.factoryArea || '鏈煡鍘傚尯',
+ modifier: item.modifier || '鏈煡淇敼浜�',
+ createDate: item.createDate || '鏈煡鏃堕棿',
+ modifyDate: item.modifyDate || '鏈煡鏃堕棿'
+ }));
+
+ // 鏍煎紡鍖栧嚭搴撹鍗�
+ const formattedOutbound = outboundOrders.map(item => ({
+ upperOrderNo: item.upperOrderNo || item.orderNo || '鏈煡鍗曞彿',
+ taskStatus: item.orderStatus || 0,
+ taskType: 'outbound',
+ businessType: item.businessType || '',
+ returnToMESStatus: item.returnToMESStatus || 0,
+ factoryArea: item.factoryArea || '鏈煡鍘傚尯',
+ modifier: item.modifier || '鏈煡淇敼浜�',
+ createDate: item.createDate || '鏈煡鏃堕棿',
+ modifyDate: item.modifyDate || '鏈煡鏃堕棿'
+ }));
+
+ const merged = [...formattedInbound, ...formattedOutbound];
+ console.log('鏈�缁堝悎骞剁殑浣滀笟鍒楄〃锛�', merged);
+ return merged;
+});
+
+// 璁㈠崟鐘舵�佹槧灏�
+const orderStatusMap = {
+ 0: "鏈紑濮�",
+};
+
+// 鑾峰彇璁㈠崟鐘舵�佹枃鏈�
const getTaskStatusText = (statusNum) => {
+ if (statusNum === 1) {
+ if (statusNum.taskType === 'inbound') {
+ return "鍏ュ簱涓�";
+ } else if (statusNum.taskType === 'outbound') {
+ return "鍑哄簱涓�";
+ } else {
+ return "澶勭悊涓�";
+ }
+ }
+ return orderStatusMap[statusNum];
+};
+
+// MES鍥炰紶鐘舵�佹槧灏�
+const mesStatusMap = {
+ 0: "鏈洖浼�",
+ 1: "鍥炰紶鎴愬姛",
+ 2: "鍥炰紶澶辫触",
+ 3: "閮ㄥ垎鍥炰紶鎴愬姛",
+ 4: "閮ㄥ垎鍥炰紶澶辫触",
+};
+
+// 鑾峰彇MES鍥炰紶鐘舵�佹枃鏈�
+const getMESStatusText = (statusNum) => {
if (statusNum === undefined || statusNum === null || isNaN(statusNum)) {
return "鏈煡鐘舵��";
}
- return taskStatusMap[statusNum] || "鏈煡鐘舵��";
+ return mesStatusMap[statusNum] || `鏈煡鐘舵��(${statusNum})`;
};
-// 琛ㄦ牸鏄剧ず鐨勪换鍔″垪琛紙杞挱鐢級
-const showTaskList = ref([]);
-const currentTaskIndex = ref(5);
-let taskCarouselTimer = null;
-
-// 鏁板瓧鏍煎紡鍖栵紙鍗冨垎浣嶅垎闅旓級
-const formatNumber = (num) => {
- if (!num) return '0';
- return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-};
-
-// 浠诲姟鍒楄〃杞挱閫昏緫
-const startTaskCarousel = () => {
- if (taskCarouselTimer) clearInterval(taskCarouselTimer);
-
- const totalTask = bigscreendata.value.taskList.length;
- if (totalTask <= 5) {
- showTaskList.value = [...bigscreendata.value.taskList];
- return;
+// 鑾峰彇MES鍥炰紶鐘舵�佹牱寮忕被
+const getMESStatusClass = (statusNum) => {
+ if (statusNum === undefined || statusNum === null || isNaN(statusNum)) {
+ return "status-unknown";
}
-
- taskCarouselTimer = setInterval(() => {
- showTaskList.value.push(bigscreendata.value.taskList[currentTaskIndex.value]);
- showTaskList.value.shift();
- currentTaskIndex.value++;
- if (currentTaskIndex.value >= totalTask) {
- currentTaskIndex.value = 0;
- }
- }, 5000);
+ if (statusNum === 0) return "status-pending";
+ if (statusNum === 1) return "status-completed";
+ if (statusNum === 2) return "status-error";
+ if (statusNum === 3) return "status-processing";
+ if (statusNum === 4) return "status-error";
+ return "status-unknown";
};
-// 鑾峰彇浠诲姟绫诲瀷鏂囨湰
-const getTaskTypeText = (taskTypeNum) => {
- if (!taskTypeNum || isNaN(taskTypeNum)) return "鏈煡绫诲瀷";
+// 鑾峰彇鍗曟嵁绫诲瀷鏂囨湰
+const getTaskTypeText = (row) => {
+ const businessType = Number(row.businessType) || 0;
- if (taskTypeNum >= 500 && taskTypeNum < 900) return "鍏ュ簱";
- if (taskTypeNum >= 100 && taskTypeNum < 500) return "鍑哄簱";
- if (taskTypeNum >= 900 && taskTypeNum < 1000) return "绉诲簱";
- return "鍏朵粬浣滀笟";
+ if (row.taskType === 'inbound') {
+ const typeName = inboundBusinessTypeMap[businessType] || `鏈煡绫诲瀷(${businessType})`;
+ return `${typeName}`;
+ } else if (row.taskType === 'outbound') {
+ const typeName = outboundBusinessTypeMap[businessType] || `鏈煡绫诲瀷(${businessType})`;
+ return `${typeName}`;
+ } else {
+ return "鍏朵粬浣滀笟";
+ }
};
// 鑾峰彇浠诲姟鐘舵�佹牱寮忕被
@@ -341,43 +391,67 @@
if (statusNum === undefined || statusNum === null || isNaN(statusNum)) {
return "status-unknown";
}
-
- if (statusNum >= 900) return "status-completed";
- if (statusNum >= 400) return "status-processing";
- if (statusNum >= 300) return "status-processing";
- if (statusNum >= 200) return "status-processing";
- if (statusNum >= 100) return "status-pending";
- if (statusNum === 970) return "status-suspended";
- if (statusNum === 980) return "status-canceled";
- if (statusNum === 990) return "status-error";
-
+ if (statusNum === 3) return "status-completed";
+ if (statusNum === 2) return "status-processing";
+ if (statusNum === 0) return "status-pending";
+ if (statusNum === 4) return "status-canceled";
+ if (statusNum === 5) return "status-error";
+ if (statusNum === 1) return "status-completed";
return "status-unknown";
};
// 鑾峰彇浠诲姟绫诲瀷鏍峰紡绫�
-const getTypeClass = (taskTypeNum) => {
- if (!taskTypeNum || isNaN(taskTypeNum)) return "type-unknown";
-
- if (taskTypeNum >= 500 && taskTypeNum < 900) return "type-inbound";
- if (taskTypeNum >= 100 && taskTypeNum < 500) return "type-outbound";
- if (taskTypeNum >= 900 && taskTypeNum < 1000) return "type-transfer";
-
+const getTypeClass = (taskType) => {
+ if (taskType === 'inbound') return "type-inbound";
+ if (taskType === 'outbound') return "type-outbound";
return "type-other";
};
-// 鑾峰彇鍚庣澶у睆鏁版嵁
+// 琛ㄦ牸鏄剧ず鐨勪换鍔″垪琛紙杞挱鐢級
+const showTaskList = ref([]);
+const currentTaskIndex = ref(0);
+let taskCarouselTimer = null;
+
+// 鏁板瓧鏍煎紡鍖�
+const formatNumber = (num) => {
+ if (!num) return '0';
+ return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
+
+// 杞挱閫昏緫
+const startTaskCarousel = () => {
+ if (taskCarouselTimer) clearInterval(taskCarouselTimer);
+
+ const totalTask = mergedTaskList.value.length;
+ console.log('浣滀笟鍒楄〃鎬绘暟锛�', totalTask);
+
+ if (totalTask <= 5) {
+ showTaskList.value = [...mergedTaskList.value];
+ } else {
+ showTaskList.value = mergedTaskList.value.slice(0, 5);
+ currentTaskIndex.value = 5;
+ }
+
+ if (totalTask > 5) {
+ taskCarouselTimer = setInterval(() => {
+ showTaskList.value.shift();
+ showTaskList.value.push(mergedTaskList.value[currentTaskIndex.value]);
+ currentTaskIndex.value++;
+ if (currentTaskIndex.value >= totalTask) {
+ currentTaskIndex.value = 0;
+ }
+ }, 5000);
+ }
+};
+
+// 鑾峰彇鍚庣鏁版嵁
const fetchBigGreenData = async () => {
try {
const res = await http.get('/api/BigScreen/GetBigGreenData');
- console.log('澶у睆鏁版嵁', res);
+ console.log('鍚庣鍘熷鏁版嵁锛�', res.data);
bigscreendata.value = res.data || res;
- // 鏁版嵁鏇存柊鍚庡埛鏂板浘琛ㄥ拰琛ㄦ牸
nextTick(() => {
- const total = bigscreendata.value.taskList.length;
- showTaskList.value = total >=5
- ? [...bigscreendata.value.taskList.slice(0,5)]
- : [...bigscreendata.value.taskList];
startTaskCarousel();
refreshCharts();
});
@@ -395,26 +469,22 @@
{ opNo: 'SC251224005', opType: '涓婃灦', operator: '瀛欎竷', startTime: '15:10:18', status: '寮傚父' }
]);
-// 鍥捐〃瀹瑰櫒Ref
+// 鍥捐〃鐩稿叧鏂规硶锛堜繚鎸佷笉鍙橈級
const inventoryPieRef = ref(null);
const stockTrendRef = ref(null);
const locationRateRef = ref(null);
const exceptionTrendRef = ref(null);
-// 鍥捐〃瀹炰緥锛堝叏灞�绠＄悊锛�
let inventoryPieChart = null;
let stockTrendChart = null;
let locationRateChart = null;
let exceptionTrendChart = null;
-// 鍒濆鍖栧簱瀛樺簱浣嶅垎甯冮ゼ鍥�
const initInventoryPie= () => {
if (!inventoryPieRef.value) return;
-
if (inventoryPieChart) {
inventoryPieChart.dispose();
}
-
inventoryPieChart = echarts.init(inventoryPieRef.value);
const locationData = bigscreendata.value.inventoryLocationDist.length
? bigscreendata.value.inventoryLocationDist
@@ -424,7 +494,6 @@
{ value: 21.9, name: '淇濈◣鍖篊鍖�', itemStyle: { color: '#fac858' } },
{ value: 2.2, name: '娈嬫鍝佸尯D鍖�', itemStyle: { color: '#ee6666' } }
];
-
const option = {
tooltip: {
trigger: 'item',
@@ -463,26 +532,20 @@
data: locationData
}]
};
-
inventoryPieChart.setOption(option);
return inventoryPieChart;
};
-// 鍒濆鍖栬繎7鏃ュ嚭鍏ュ簱瓒嬪娍鍥�
const initStockTrend = () => {
if (!stockTrendRef.value) return;
-
if (stockTrendChart) {
stockTrendChart.dispose();
}
-
stockTrendChart = echarts.init(stockTrendRef.value);
const trendData = bigscreendata.value.dailyInOutBoundList;
-
const maxInbound = trendData.length ? Math.max(...trendData.map(item => item.dailyInboundQuantity || 0)) : 0;
const maxOutbound = trendData.length ? Math.max(...trendData.map(item => item.dailyOutboundQuantity || 0)) : 0;
const maxValue = Math.max(maxInbound, maxOutbound);
-
const option = {
tooltip: {
trigger: 'axis',
@@ -535,23 +598,18 @@
}
]
};
-
stockTrendChart.setOption(option);
return stockTrendChart;
};
-// 鍒濆鍖栧簱浣嶅埄鐢ㄧ巼鐜舰鍥�
const initLocationRate = () => {
if (!locationRateRef.value) return;
-
if (locationRateChart) {
locationRateChart.dispose();
}
-
locationRateChart = echarts.init(locationRateRef.value);
const utilizationRate = bigscreendata.value.locationUtilizationRate || 0;
const freeRate = 100 - utilizationRate;
-
const option = {
tooltip: {
trigger: 'item',
@@ -601,19 +659,15 @@
}
]
};
-
locationRateChart.setOption(option);
return locationRateChart;
};
-// 鍒濆鍖栧紓甯哥被鍨嬬粺璁¤秼鍔垮浘
const initExceptionTrend = () => {
if (!exceptionTrendRef.value) return;
-
if (exceptionTrendChart) {
exceptionTrendChart.dispose();
}
-
exceptionTrendChart = echarts.init(exceptionTrendRef.value);
const exceptionData = bigscreendata.value.exceptionTypeTrend.length
? bigscreendata.value.exceptionTypeTrend
@@ -624,7 +678,6 @@
locationException: [4, 5, 2, 4, 3, 5, 4],
checkDiff: [2, 3, 1, 2, 1, 3, 2]
};
-
const option = {
tooltip: {
trigger: 'axis',
@@ -695,18 +748,15 @@
}
]
};
-
exceptionTrendChart.setOption(option);
return exceptionTrendChart;
};
-// 鍒锋柊鎵�鏈夊浘琛�
const refreshCharts = () => {
const charts = [
initStockTrend,
initLocationRate
];
-
charts.forEach(initFunc => {
const chart = initFunc();
if (chart) {
@@ -715,7 +765,6 @@
});
};
-// 绐楀彛澶у皬鍙樺寲鐩戝惉
const handleResize = () => {
const charts = [
inventoryPieChart,
@@ -723,7 +772,6 @@
locationRateChart,
exceptionTrendChart
];
-
charts.forEach(chart => {
if (chart) {
chart.resize();
@@ -731,11 +779,9 @@
});
};
-// 缁勪欢鎸傝浇鏃�
+// 缁勪欢鐢熷懡鍛ㄦ湡
onMounted(() => {
- // 鍏堣幏鍙栧悗绔暟鎹�
fetchBigGreenData();
- // 鍒濆鍖栧浘琛紙纭繚DOM宸叉覆鏌擄級
nextTick(() => {
initInventoryPie();
initStockTrend();
@@ -745,7 +791,6 @@
});
});
-// 缁勪欢鍗歌浇鏃�
onUnmounted(() => {
const charts = [
inventoryPieChart,
@@ -753,7 +798,6 @@
locationRateChart,
exceptionTrendChart
];
-
charts.forEach(chart => {
if (chart) {
chart.dispose();
@@ -790,7 +834,6 @@
margin-bottom: 20px;
}
-/* 鏍稿績鏍峰紡锛氬崱鐗囧熀纭�鏍峰紡 */
.stats-card, .chart-card, .table-card {
background: #fff;
border-radius: 8px;
@@ -888,7 +931,6 @@
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}
-/* 涓存湡鐗╂枡琛ㄦ牸瀹瑰櫒鏍峰紡 */
.expiration-table-container {
width: 100%;
height: 100%;
@@ -897,7 +939,6 @@
overflow-y: auto;
}
-/* 涓存湡绛夌骇鏍囩鏍峰紡 */
.expire-level {
padding: 2px 8px;
border-radius: 4px;
@@ -935,7 +976,6 @@
border: 1px solid #e8e8e8;
}
-/* 宸茶繃鏈熸枃瀛楃孩鑹� */
.text-red {
color: #ff4d4f;
font-weight: 500;
@@ -984,7 +1024,6 @@
border-top: 1px solid #ebeef5;
}
-/* 琛ㄦ牸鏍峰紡浼樺寲 */
:deep(.el-table) {
border-radius: 6px;
overflow: hidden;
@@ -1026,7 +1065,6 @@
display: none;
}
-/* 鍒嗛〉鍣ㄦ牱寮忎紭鍖� */
:deep(.el-pagination) {
margin-top: 10px;
}
@@ -1051,7 +1089,6 @@
color: #fff;
}
-/* 浠诲姟鐘舵�佹牱寮� */
.task-status {
display: inline-block;
padding: 6px 12px;
@@ -1107,127 +1144,49 @@
border: 1px solid rgba(144, 147, 153, 0.2);
}
-/* 浠诲姟绫诲瀷鏍峰紡 */
.task-type {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- padding: 5px 12px;
- border-radius: 16px;
+ display: inline-block;
+ padding: 6px 12px;
+ border-radius: 20px;
font-size: 13px;
- font-weight: 600;
+ font-weight: 500;
text-align: center;
- min-width: 70px;
- position: relative;
- overflow: hidden;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ min-width: 80px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+ transition: all 0.2s ease;
letter-spacing: 0.5px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
-@keyframes pulse {
- 0% {
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
- }
- 50% {
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
- }
- 100% {
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
- }
-}
-.task-type::before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
- transform: translateX(-100%);
- transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
-}
-
-.task-type:hover::before {
- transform: translateX(0);
-}
-
-.task-type:hover {
- transform: translateY(-3px);
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
-}
-
-.task-type::after {
- content: "";
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 3px;
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
- transform: scaleX(0);
- transform-origin: center;
- transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-}
-
-.task-type:hover::after {
- transform: scaleX(1);
-}
-
-.type-inbound:hover {
- box-shadow: 0 5px 15px rgba(19, 194, 194, 0.4);
-}
-
-.type-outbound:hover {
- box-shadow: 0 5px 15px rgba(47, 84, 235, 0.4);
-}
-
-.type-transfer:hover {
- box-shadow: 0 5px 15px rgba(250, 140, 22, 0.4);
-}
-
-.type-other:hover {
- box-shadow: 0 5px 15px rgba(114, 46, 209, 0.4);
-}
-
-.type-unknown:hover {
- box-shadow: 0 5px 15px rgba(89, 89, 89, 0.4);
-}
.type-inbound {
- background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
- color: white;
- box-shadow: 0 3px 5px rgba(19, 194, 194, 0.3);
- animation: pulse 2s infinite;
+ background-color: rgba(64, 158, 255, 0.1);
+ color: #409eff;
+ border: 1px solid rgba(64, 158, 255, 0.2);
}
.type-outbound {
- background: linear-gradient(135deg, #2f54eb 0%, #597ef7 100%);
- color: white;
- box-shadow: 0 3px 5px rgba(47, 84, 235, 0.3);
- animation: pulse 2.5s infinite;
+ background-color: rgba(103, 194, 58, 0.1);
+ color: #67c23a;
+ border: 1px solid rgba(103, 194, 58, 0.2);
}
.type-transfer {
- background: linear-gradient(135deg, #fa8c16 0%, #ffc53d 100%);
- color: white;
- box-shadow: 0 3px 5px rgba(250, 140, 22, 0.3);
- animation: pulse 3s infinite;
+ background-color: rgba(230, 162, 60, 0.1);
+ color: #e6a23c;
+ border: 1px solid rgba(230, 162, 60, 0.2);
}
.type-other {
- background: linear-gradient(135deg, #722ed1 0%, #b37feb 100%);
- color: white;
- box-shadow: 0 3px 5px rgba(114, 46, 209, 0.3);
- animation: pulse 2.2s infinite;
+ background-color: rgba(144, 147, 153, 0.1);
+ color: #909399;
+ border: 1px solid rgba(144, 147, 153, 0.2);
}
.type-unknown {
- background: linear-gradient(135deg, #595959 0%, #8c8c8c 100%);
- color: white;
- box-shadow: 0 3px 5px rgba(89, 89, 89, 0.3);
- animation: pulse 2.8s infinite;
+ background-color: rgba(144, 147, 153, 0.1);
+ color: #909399;
+ border: 1px solid rgba(144, 147, 153, 0.2);
}
.btn-group {
--
Gitblit v1.9.3