From ef96a52b953e3ce094bba9f644a00a3698e48726 Mon Sep 17 00:00:00 2001
From: 647556386 <647556386@qq.com>
Date: 星期三, 21 一月 2026 19:29:12 +0800
Subject: [PATCH] 1
---
项目代码/WIDESEA_WMSClient/src/views/Home.vue | 800 ++++++++++++++++++++++++++++++++-------------------------
1 files changed, 448 insertions(+), 352 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 1afb2bd..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,86 +1,118 @@
<template>
<div class="wms-dashboard">
- <!-- 缁熻鍗＄墖鍖哄煙 - 缁戝畾鍝嶅簲寮忔暟鎹� -->
+ <!-- 缁熻鍗＄墖鍖哄煙 -->
<el-row :gutter="20" class="stats-card-row">
- <el-col :span="4">
- <div class="stats-card">
- <div class="metric-icon">
- <el-icon :size="32">
- <Box />
- </el-icon>
- </div>
- <div class="card-title">鎬诲簱瀛�</div>
- <div class="card-value">{{ formatNumber(bigscreendata.totalStockQuantity) }}</div>
- </div>
- </el-col>
- <el-col :span="4">
- <div class="stats-card">
- <div class="metric-icon">
- <el-icon :size="32">
- <Document />
- </el-icon>
- </div>
- <div class="card-title">寰呭嚭搴撹鍗�</div>
- <div class="card-value">{{ bigscreendata.unOutBoundOrderCount }}</div>
- </div>
- </el-col>
- <el-col :span="4">
- <div class="stats-card">
- <div class="metric-icon">
- <el-icon :size="32">
- <Download />
- </el-icon>
- </div>
- <div class="card-title">浠婃棩鍏ュ簱瀹屾垚鏁�</div>
- <div class="card-value">{{ bigscreendata.inboundCount }}</div>
- </div>
- </el-col>
- <el-col :span="4">
- <div class="stats-card">
- <div class="metric-icon">
- <el-icon :size="32">
- <Upload />
- </el-icon>
- </div>
- <div class="card-title">浠婃棩鍑哄簱瀹屾垚鏁�</div>
- <div class="card-value">{{ bigscreendata.outboundCount }}</div>
- </div>
- </el-col>
- <el-col :span="4">
- <div class="stats-card">
- <div class="metric-icon">
- <el-icon :size="32">
- <Box />
- </el-icon>
- </div>
- <div class="card-title">鏈夎揣鏂欑</div>
- <div class="card-value">{{ formatNumber(bigscreendata.inStockPallet) }}</div>
- </div>
- </el-col>
- <el-col :span="4">
- <div class="stats-card">
- <div class="metric-icon">
- <el-icon :size="32">
- <Box />
- </el-icon>
- </div>
- <div class="card-title">绌虹鏁伴噺</div>
- <div class="card-value">{{ formatNumber(bigscreendata.freeStockPallet) }}</div>
- </div>
- </el-col>
-</el-row>
-
+ <el-col :span="4">
+ <div class="stats-card">
+ <div class="metric-icon">
+ <el-icon :size="32">
+ <Box />
+ </el-icon>
+ </div>
+ <div class="card-title">寰呭叆搴撹鍗�</div>
+ <div class="card-value">{{ bigscreendata.unInBoundOrderCount }}</div>
+ </div>
+ </el-col>
+ <el-col :span="4">
+ <div class="stats-card">
+ <div class="metric-icon">
+ <el-icon :size="32">
+ <Document />
+ </el-icon>
+ </div>
+ <div class="card-title">寰呭嚭搴撹鍗�</div>
+ <div class="card-value">{{ bigscreendata.unOutBoundOrderCount }}</div>
+ </div>
+ </el-col>
+ <el-col :span="4">
+ <div class="stats-card">
+ <div class="metric-icon">
+ <el-icon :size="32">
+ <Download />
+ </el-icon>
+ </div>
+ <div class="card-title">浠婃棩鍏ュ簱瀹屾垚鏁�</div>
+ <div class="card-value">{{ bigscreendata.inboundCount }}</div>
+ </div>
+ </el-col>
+ <el-col :span="4">
+ <div class="stats-card">
+ <div class="metric-icon">
+ <el-icon :size="32">
+ <Upload />
+ </el-icon>
+ </div>
+ <div class="card-title">浠婃棩鍑哄簱瀹屾垚鏁�</div>
+ <div class="card-value">{{ bigscreendata.outboundCount }}</div>
+ </div>
+ </el-col>
+ <el-col :span="4">
+ <div class="stats-card">
+ <div class="metric-icon">
+ <el-icon :size="32">
+ <Box />
+ </el-icon>
+ </div>
+ <div class="card-title">鏈夎揣鏂欑</div>
+ <div class="card-value">{{ formatNumber(bigscreendata.inStockPallet) }}</div>
+ </div>
+ </el-col>
+ <el-col :span="4">
+ <div class="stats-card">
+ <div class="metric-icon">
+ <el-icon :size="32">
+ <Box />
+ </el-icon>
+ </div>
+ <div class="card-title">绌虹鏁伴噺</div>
+ <div class="card-value">{{ formatNumber(bigscreendata.freeStockPallet) }}</div>
+ </div>
+ </el-col>
+ </el-row>
<!-- 鍥捐〃鍖哄煙锛堢涓�琛岋級 -->
<el-row :gutter="20" class="chart-row">
- <el-col :span="12">
- <!-- 鏇挎崲el-card涓篸iv锛屼繚鐣檆hart-card绫诲悕 -->
+ <el-col :span="8">
<div class="chart-card">
<div class="chart-title">搴撲綅鍒╃敤鐜�</div>
<div ref="locationRateRef" class="chart-container"></div>
</div>
</el-col>
- <el-col :span="12">
+ <el-col :span="8">
+ <div class="chart-card">
+ <div class="chart-title">鐗╂枡涓存湡淇℃伅</div>
+ <div class="expiration-table-container">
+ <el-table
+ :data="expirationTableData"
+ border
+ stripe
+ style="width: 100%;"
+ :empty-text="emptyText"
+ >
+ <el-table-column prop="materielCode" label="鐗╂枡缂栫爜" align="center" />
+ <el-table-column prop="materielName" label="鐗╂枡鍚嶇О" align="center" show-overflow-tooltip />
+ <el-table-column prop="batchNo" label="鎵规鍙�" align="center" />
+ <el-table-column prop="validDate" label="鏈夋晥鏈�" align="center" />
+ <el-table-column label="涓存湡绛夌骇" align="center">
+ <template #default="{ row }">
+ <span :class="getExpireLevelClass(row.expireLevel)">{{ row.expireLevel }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="daysToExpiration" label="涓存湡澶╂暟" align="center">
+ <template #default="{ row }">
+ <span :class="row.daysToExpiration < 0 ? 'text-red' : ''">
+ {{ row.daysToExpiration < 0 ? '宸茶繃鏈�' : `${row.daysToExpiration}澶ー }}
+ </span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="stockQuantity" label="搴撳瓨鏁伴噺" align="center" />
+ <el-table-column prop="locationCode" label="搴撲綅" align="center" />
+ <el-table-column prop="palletCode" label="鎵樼洏缂栧彿" align="center" />
+ </el-table>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="8">
<div class="chart-card">
<div class="chart-title">杩�7鏃ュ嚭鍏ュ簱瓒嬪娍锛堝浘鍍忓寲璧板娍锛�</div>
<div ref="stockTrendRef" class="chart-container"></div>
@@ -92,31 +124,46 @@
<el-row :gutter="20" class="chart-row">
</el-row>
- <!-- 琛ㄦ牸鍖哄煙 - 缁戝畾鍚庣浣滀笟鏁版嵁 -->
+ <!-- 琛ㄦ牸鍖哄煙 - 瀹炴椂浣滀笟鐩戞帶 -->
<el-row :gutter="20" class="table-row" width="100%">
<el-col :span="24">
- <!-- 鏇挎崲el-card涓篸iv锛屼繚鐣檛able-card绫诲悕 -->
<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>
@@ -125,103 +172,218 @@
</template>
<script setup>
-import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+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';
+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: [] // 寮傚父绫诲瀷瓒嬪娍鏁版嵁
+ inventoryLocationDist: [],
+ exceptionTypeTrend: [],
+ nearExpirationList: []
});
-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 expirationTableData = computed(() => {
+ const expirationList = bigscreendata.value.nearExpirationList || [];
+ const uniqueMap = new Map();
+ expirationList.forEach(item => {
+ const uniqueKey = [
+ item.materielCode || '鏈煡缂栫爜',
+ item.batchNo || '鏈煡鎵规',
+ item.palletCode || '鏈煡鎵樼洏',
+ ].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 = '宸茶繃鏈�';
+ } else if (daysToExpiration <= 7) {
+ expireLevel = '7澶╁唴涓存湡';
+ } else if (daysToExpiration <= 15) {
+ expireLevel = '15澶╁唴涓存湡';
+ } else if (daysToExpiration <= 30) {
+ expireLevel = '30澶╁唴涓存湡';
+ } else {
+ expireLevel = '30澶╀互涓�';
+ }
+ return {
+ materielCode: item.materielCode || '鏈煡缂栫爜',
+ materielName: item.materielName || '鏈煡鍚嶇О',
+ batchNo: item.batchNo || '鏈煡鎵规',
+ validDate: item.validDate || '鏈煡鏈夋晥鏈�',
+ daysToExpiration: daysToExpiration,
+ expireLevel: expireLevel,
+ stockQuantity: item.stockQuantity || 0,
+ locationCode: item.locationCode || '鏈煡搴撲綅',
+ palletCode: item.palletCode || '鏈煡鎵樼洏',
+ unit: item.unit || 'PCS'
+ };
+ });
+});
+
+// 绌烘暟鎹彁绀烘枃鏈紙淇濇寔涓嶅彉锛�
+const emptyText = computed(() => {
+ const expirationList = bigscreendata.value.nearExpirationList || [];
+ return expirationList.length === 0 ? '鏆傛棤涓存湡鐗╂枡鏁版嵁' : '';
+});
+
+// 鑾峰彇涓存湡绛夌骇鏍峰紡绫伙紙淇濇寔涓嶅彉锛�
+const getExpireLevelClass = (level) => {
+ switch(level) {
+ case '宸茶繃鏈�': return 'expire-level expired';
+ case '7澶╁唴涓存湡': return 'expire-level urgent';
+ case '15澶╁唴涓存湡': return 'expire-level warning';
+ case '30澶╁唴涓存湡': return 'expire-level normal';
+ case '30澶╀互涓�': return 'expire-level low';
+ default: return 'expire-level default';
+ }
};
+
+// 鏍稿績锛氬叆搴�/鍑哄簱涓氬姟绫诲瀷鏋氫妇鏄犲皠
+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] || "鏈煡鐘舵��";
-};
-const showTaskList = ref([]); // 琛ㄦ牸鏄剧ず鐨�5鏉′换鍔★紙杞挱鐢級
-const currentTaskIndex = ref(5); // 涓嬩竴涓鏄剧ず鐨勪换鍔＄储寮曪紙鍒濆浠庣6鏉″紑濮嬶紝鍓�5鏉￠粯璁ゆ樉绀猴級
-let taskCarouselTimer = null; // 杞挱瀹氭椂鍣�
-// 鏁板瓧鏍煎紡鍖栵紙鍗冨垎浣嶅垎闅旓級
-const formatNumber = (num) => {
- if (!num) return '0';
- return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+ return mesStatusMap[statusNum] || `鏈煡鐘舵��(${statusNum})`;
};
-const startTaskCarousel = () => {
- // 娓呴櫎鏃у畾鏃跺櫒锛岄槻姝㈤噸澶嶅惎鍔�
- if (taskCarouselTimer) clearInterval(taskCarouselTimer);
-
- const totalTask = bigscreendata.value.taskList.length;
- // 浠诲姟鏁�<=5鏃讹紝涓嶈疆鎾紙娌℃湁鏇村浠诲姟鍙崲锛�
- if (totalTask <= 5) {
- showTaskList.value = [...bigscreendata.value.taskList];
- return;
+// 鑾峰彇MES鍥炰紶鐘舵�佹牱寮忕被
+const getMESStatusClass = (statusNum) => {
+ if (statusNum === undefined || statusNum === null || isNaN(statusNum)) {
+ return "status-unknown";
}
-
- // 鍚姩5绉掑畾鏃跺櫒
- taskCarouselTimer = setInterval(() => {
- // 1. 鏂板涓�1鏉′换鍔″埌鏄剧ず鍒楄〃鏈熬
- showTaskList.value.push(bigscreendata.value.taskList[currentTaskIndex.value]);
- // 2. 鍒犻櫎鍒楄〃鏈�鍓嶉潰1鏉℃棫浠诲姟锛堝缁堜繚鎸�5鏉★級
- showTaskList.value.shift();
- // 3. 鏇存柊涓嬩竴涓换鍔＄储寮曪紝瓒呭嚭鎬绘暟鍒欓噸缃紙寰幆杞挱锛�
- currentTaskIndex.value++;
- if (currentTaskIndex.value >= totalTask) {
- currentTaskIndex.value = 0; // 閲嶇疆涓�0锛屽惊鐜挱鏀�
- }
- }, 5000); // 5绉掗棿闅�
+ 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;
- // 瀵瑰簲鍚庣TaskEnumHelper鐨勫垎缁勮鍒�
- 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 "鍏朵粬浣滀笟";
+ }
};
// 鑾峰彇浠诲姟鐘舵�佹牱寮忕被
@@ -229,52 +391,73 @@
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"; // AGV鎵ц涓�
- 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";
-
- // 瀵瑰簲鍚庣TaskEnumHelper鐨勫垎缁勮鍒�
- if (taskTypeNum >= 500 && taskTypeNum < 900) return "type-inbound"; // 鍏ュ簱
- if (taskTypeNum >= 100 && taskTypeNum < 500) return "type-outbound"; // 鍑哄簱
- if (taskTypeNum >= 900 && taskTypeNum < 1000) return "type-transfer"; // 绉诲簱
-
- return "type-other"; // 鍏朵粬浣滀笟
+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 {
- debugger
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;
- // 鍒濆鍖栨樉绀哄墠5鏉★紙涓嶈冻5鏉″垯鏄剧ず鍏ㄩ儴锛�
- showTaskList.value = total >=5
- ? [...bigscreendata.value.taskList.slice(0,5)]
- : [...bigscreendata.value.taskList];
- startTaskCarousel(); // 鍚姩浠诲姟杞挱
+ startTaskCarousel();
refreshCharts();
});
} catch (error) {
ElMessage.error('鏁版嵁鑾峰彇澶辫触锛岃妫�鏌ュ悗绔帴鍙ｆ槸鍚︽甯�');
+ console.error('鏁版嵁鑾峰彇澶辫触锛�', error);
}
};
@@ -286,29 +469,23 @@
{ 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);
-// 鍥捐〃瀹炰緥锛堝叏灞�绠＄悊锛岀敤浜庨攢姣佸拰resize锛�
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
: [
@@ -317,7 +494,6 @@
{ value: 21.9, name: '淇濈◣鍖篊鍖�', itemStyle: { color: '#fac858' } },
{ value: 2.2, name: '娈嬫鍝佸尯D鍖�', itemStyle: { color: '#ee6666' } }
];
-
const option = {
tooltip: {
trigger: 'item',
@@ -356,30 +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;
- console.log('鍑哄叆搴撹秼鍔挎暟鎹�', trendData);
-
- // 璁＄畻鏁版嵁涓殑鏈�澶у�硷紝鐢ㄤ簬璁剧疆Y杞磋寖鍥�
- const maxInbound = Math.max(...trendData.map(item => item.dailyInboundQuantity || 0));
- const maxOutbound = Math.max(...trendData.map(item => item.dailyOutboundQuantity || 0));
+ 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);
- console.log('鏈�澶у�艰绠楃粨鏋�:', { maxInbound, maxOutbound, maxValue });
-
const option = {
tooltip: {
trigger: 'axis',
@@ -407,7 +573,6 @@
type: 'value',
name: '鏁伴噺',
min: 0,
- // 鏍规嵁鏁版嵁鍔ㄦ�佽缃渶澶у�硷紝鐣欏嚭涓�浜涚┖闂�
max: maxValue > 0 ? Math.ceil(maxValue * 1.2) : 10
},
series: [
@@ -433,26 +598,18 @@
}
]
};
-
stockTrendChart.setOption(option);
return stockTrendChart;
};
-// 鍒濆鍖栧簱浣嶅埄鐢ㄧ巼鐜舰鍥撅紙淇锛氱粺涓�瀹炰緥绠＄悊锛屽叧鑱斿悗绔暟鎹級
const initLocationRate = () => {
if (!locationRateRef.value) return;
-
- // 閿�姣佹棫瀹炰緥
if (locationRateChart) {
locationRateChart.dispose();
}
-
locationRateChart = echarts.init(locationRateRef.value);
- // 浼樺厛浣跨敤鍚庣鏁版嵁锛屾棤鏁版嵁鍒欑敤榛樿鍊�
- console.log('搴撲綅鍒╃敤鐜囨暟鎹�', bigscreendata.value.locationUtilizationRate);
const utilizationRate = bigscreendata.value.locationUtilizationRate || 0;
const freeRate = 100 - utilizationRate;
-
const option = {
tooltip: {
trigger: 'item',
@@ -502,21 +659,16 @@
}
]
};
-
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
: {
@@ -526,7 +678,6 @@
locationException: [4, 5, 2, 4, 3, 5, 4],
checkDiff: [2, 3, 1, 2, 1, 3, 2]
};
-
const option = {
tooltip: {
trigger: 'axis',
@@ -597,18 +748,15 @@
}
]
};
-
exceptionTrendChart.setOption(option);
return exceptionTrendChart;
};
-// 鍒锋柊鎵�鏈夊浘琛紙绉婚櫎鏃犳晥闆疯揪鍥鹃�昏緫锛�
const refreshCharts = () => {
const charts = [
initStockTrend,
- initLocationRate,
+ initLocationRate
];
-
charts.forEach(initFunc => {
const chart = initFunc();
if (chart) {
@@ -617,7 +765,6 @@
});
};
-// 绐楀彛澶у皬鍙樺寲鐩戝惉
const handleResize = () => {
const charts = [
inventoryPieChart,
@@ -625,7 +772,6 @@
locationRateChart,
exceptionTrendChart
];
-
charts.forEach(chart => {
if (chart) {
chart.resize();
@@ -633,11 +779,9 @@
});
};
-// 缁勪欢鎸傝浇鏃讹細鍏堣姹傛暟鎹紝鍐嶅垵濮嬪寲鍥捐〃
+// 缁勪欢鐢熷懡鍛ㄦ湡
onMounted(() => {
- // 鍏堣幏鍙栧悗绔暟鎹�
fetchBigGreenData();
- // 鍒濆鍖栧浘琛紙纭繚DOM宸叉覆鏌擄級
nextTick(() => {
initInventoryPie();
initStockTrend();
@@ -647,7 +791,6 @@
});
});
-// 缁勪欢鍗歌浇鏃讹細閿�姣佸浘琛ㄥ疄渚嬶紝绉婚櫎浜嬩欢鐩戝惉
onUnmounted(() => {
const charts = [
inventoryPieChart,
@@ -655,13 +798,12 @@
locationRateChart,
exceptionTrendChart
];
-
charts.forEach(chart => {
if (chart) {
chart.dispose();
}
});
- clearInterval(taskCarouselTimer); // 娓呴櫎杞挱瀹氭椂鍣�
+ clearInterval(taskCarouselTimer);
window.removeEventListener('resize', handleResize);
});
</script>
@@ -692,7 +834,6 @@
margin-bottom: 20px;
}
-/* 鏍稿績淇敼锛氳ˉ鍏卍iv鐗坈ard鐨勫熀纭�鏍峰紡锛屾ā鎷焑l-card鐨勮瑙夋晥鏋� */
.stats-card, .chart-card, .table-card {
background: #fff;
border-radius: 8px;
@@ -712,7 +853,6 @@
overflow: hidden;
background: linear-gradient(145deg, #ffffff 0%, #f9fafc 100%);
}
-
.stats-card:hover {
transform: translateY(-6px) scale(1.02);
@@ -735,7 +875,6 @@
transition: all 0.3s ease;
}
-
.card-title {
font-size: 15px;
color: #606266;
@@ -745,23 +884,16 @@
}
.card-value {
- font-size: 26px;
- font-weight: 600;
- margin: 4px 0;
- background: linear-gradient(to right, #409eff, #36cfc9);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-}
-
-
-.card-value {
font-size: 32px;
font-weight: 700;
margin: 8px 0 4px;
color: #2c3e50;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
line-height: 1.2;
+ background: linear-gradient(to right, #409eff, #36cfc9);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
.card-change {
@@ -799,6 +931,55 @@
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}
+.expiration-table-container {
+ width: 100%;
+ height: 100%;
+ min-height: 300px;
+ flex: 1;
+ overflow-y: auto;
+}
+
+.expire-level {
+ padding: 2px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ font-weight: 500;
+}
+.expire-level.expired {
+ background-color: #fff2f0;
+ color: #ff4d4f;
+ border: 1px solid #ffccc7;
+}
+.expire-level.urgent {
+ background-color: #fff7e6;
+ color: #fa8c16;
+ border: 1px solid #ffd591;
+}
+.expire-level.warning {
+ background-color: #f6ffed;
+ color: #52c41a;
+ border: 1px solid #b7eb8f;
+}
+.expire-level.normal {
+ background-color: #e6f7ff;
+ color: #1890ff;
+ border: 1px solid #91d5ff;
+}
+.expire-level.low {
+ background-color: #f0f2f5;
+ color: #666666;
+ border: 1px solid #d9d9d9;
+}
+.expire-level.default {
+ background-color: #fafafa;
+ color: #8c8c8c;
+ border: 1px solid #e8e8e8;
+}
+
+.text-red {
+ color: #ff4d4f;
+ font-weight: 500;
+}
.chart-title,
.table-title {
@@ -814,7 +995,6 @@
position: relative;
letter-spacing: 0.5px;
}
-
.view-btn {
font-size: 12px;
@@ -844,7 +1024,6 @@
border-top: 1px solid #ebeef5;
}
-/* 琛ㄦ牸鏍峰紡浼樺寲 */
:deep(.el-table) {
border-radius: 6px;
overflow: hidden;
@@ -886,7 +1065,6 @@
display: none;
}
-/* 鍒嗛〉鍣ㄦ牱寮忎紭鍖� */
:deep(.el-pagination) {
margin-top: 10px;
}
@@ -911,7 +1089,6 @@
color: #fff;
}
-/* 浠诲姟鐘舵�佹牱寮� */
.task-status {
display: inline-block;
padding: 6px 12px;
@@ -967,133 +1144,52 @@
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 {
margin-left: 10px;
}
-
-/* 绉婚櫎鍘熸湁鐨別l-card__body鏍峰紡绌块�忥紝鍥犱负宸茬粡鏇挎崲涓虹函div */
</style>
\ No newline at end of file
--
Gitblit v1.9.3