From 1378fc4cd7abc24ed3a982e09437c2c8a74e9f2f Mon Sep 17 00:00:00 2001
From: 647556386 <647556386@qq.com>
Date: 星期二, 27 一月 2026 19:06:32 +0800
Subject: [PATCH] 代码优化
---
项目代码/WIDESEA_WMSClient/src/views/Home.vue | 1298 +++++++++++++++++++++++-----------------------------------
1 files changed, 515 insertions(+), 783 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 5f50fb5..9ad82a0 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,122 +1,209 @@
<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">杩�7鏃ュ嚭鍏ュ簱瓒嬪娍锛堝浘鍍忓寲璧板娍锛�</div>
+ <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>
</div>
</el-col>
</el-row>
- <!-- 鍥捐〃鍖哄煙锛堢浜岃锛� -->
- <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绫诲悕 -->
+ <!-- 宸︿晶锛氬綋澶╂甯镐綔涓氬崟鎹� -->
+ <el-col :span="12">
<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="浠诲姟鐘舵��" >
+ <div class="table-title">瀹炴椂浣滀笟鐩戞帶锛堟甯稿崟鎹級</div>
+ <el-table
+ :data="normalShowTaskList"
+ border
+ style="width: 100%;"
+ :empty-text="normalShowTaskList.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, row.taskType) }}
+ </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"
+ v-model:current-page="normalCurrentPage"
+ :page-size="5"
+ :total="normalTaskList.length"
+ @current-change="handleNormalPageChange"
+ />
+ </div>
+ </div>
+ </el-col>
+ <!-- 鍙充晶锛氳繎3澶╁洖浼犲け璐�/閮ㄥ垎澶辫触鍗曟嵁 -->
+ <el-col :span="12">
+ <div class="table-card">
+ <div class="table-title">瀹炴椂浣滀笟鐩戞帶锛堝洖浼犲け璐ワ級</div>
+ <el-table
+ :data="failShowTaskList"
+ border
+ style="width: 100%;"
+ :empty-text="failShowTaskList.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, row.taskType) }}
+ </span>
+ </template>
+ </el-table-column>
+ <el-table-column label="鍗曟嵁绫诲瀷" >
+ <template #default="{ row }">
+ <span class="task-type" :class="getTypeClass(row.taskType)">
+ {{ getTaskTypeText(row) }}
+ </span>
+ </template>
+ </el-table-column>
+ <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="remark" label="澶辫触鍘熷洜" show-overflow-tooltip />
+ <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"
+ v-model:current-page="failCurrentPage"
+ :page-size="5"
+ :total="failTaskList.length"
+ @current-change="handleFailPageChange"
+ />
</div>
</div>
</el-col>
@@ -125,530 +212,388 @@
</template>
<script setup>
-import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, nextTick, computed, watch } 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');
-
-// 鍚庣杩斿洖鏁版嵁锛堝搷搴斿紡锛�
const bigscreendata = ref({
totalStockQuantity: 0,
unOutBoundOrderCount: 0,
+ unInBoundOrderCount:0,
dailyCompletionRate: 0,
unhandledExceptionCount: 0,
locationUtilizationRate: 0,
inStockPallet: 0,
freeStockPallet: 0,
dailyInOutBoundList: [],
- taskList: [],
+ completeTask: [], // 鍚庣杩斿洖鐨勪换鍔℃暟鎹紙褰撳ぉ姝ｅ父+杩�3澶╁け璐ワ級
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 getTaskStatusText = (statusNum) => {
- // 澶勭悊绌哄�笺�佹棤鏁堝�硷紝鍏滃簳鏄剧ず鈥滄湭鐭ョ姸鎬佲��
- if (statusNum === undefined || statusNum === null || isNaN(statusNum)) {
- return "鏈煡鐘舵��";
+// 涓存湡琛ㄦ牸鏁版嵁锛堜繚鎸佷笉鍙橈級
+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
+ };
+ });
+});
+
+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';
}
- // 绮惧噯鍖归厤鏄犲皠鍊硷紝鏃犲尮閰嶅垯杩斿洖鈥滄湭鐭ョ姸鎬佲��
- return taskStatusMap[statusNum] || "鏈煡鐘舵��";
};
-const showTaskList = ref([]); // 琛ㄦ牸鏄剧ず鐨�5鏉′换鍔★紙杞挱鐢級
-const currentTaskIndex = ref(5); // 涓嬩竴涓鏄剧ず鐨勪换鍔＄储寮曪紙鍒濆浠庣6鏉″紑濮嬶紝鍓�5鏉￠粯璁ゆ樉绀猴級
-let taskCarouselTimer = null; // 杞挱瀹氭椂鍣�
-// 鏁板瓧鏍煎紡鍖栵紙鍗冨垎浣嶅垎闅旓級
+
+// 涓氬姟绫诲瀷鏄犲皠
+const inboundBusinessTypeMap = {
+ 11: "閲囪喘鍏ュ簱", 12: "鏉傛敹鍗�", 13: "鐢熶骇閫�鏂欏崟",
+ 14: "澶栧崗閫�鏂欏崟", 15: "閿�鍞��搴撳崟", 3: "璋冩嫧鍏ュ簱鍗�"
+};
+const outboundBusinessTypeMap = {
+ 21: "宸ュ崟棰嗘枡鍑哄簱鍗�", 22: "鏉傚彂鍗�", 23: "閫�璐у崟",
+ 24: "閿�鍞嚭搴撳崟", 25: "澶栧崗棰嗘枡鐢宠鍗�", 2: "璋冩嫧鍑哄簱鍗�"
+};
+
+// 鎷嗗垎锛氬綋澶╂甯镐綔涓氬崟鎹�
+const normalTaskList = computed(() => {
+ const taskData = (bigscreendata.value.completeTask[0] || {});
+ const inboundOrders = taskData.inboundOrders || [];
+ const outboundOrders = taskData.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 || '',
+ remark: item.remark || ''
+ }));
+
+ // 鏍煎紡鍖栧嚭搴撹鍗�
+ 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 || '',
+ remark: item.remark || ''
+ }));
+
+ return [...formattedInbound, ...formattedOutbound];
+});
+
+// 鎷嗗垎锛氳繎3澶╁洖浼犲け璐�/閮ㄥ垎澶辫触鍗曟嵁
+const failTaskList = computed(() => {
+ const taskData = (bigscreendata.value.completeTask[0] || {});
+ const inboundFailOrders = taskData.inboundReturnFailOrders || [];
+ const outboundFailOrders = taskData.outboundReturnFailOrders || [];
+
+ const formattedInboundFail = inboundFailOrders.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 || '',
+ remark: item.remark || ''
+ }));
+
+ const formattedOutboundFail = outboundFailOrders.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 || '',
+ remark: item.remark || ''
+ }));
+
+ return [...formattedInboundFail, ...formattedOutboundFail];
+});
+
+// 鍒嗛〉&杞挱鐩稿叧鍝嶅簲寮忓彉閲�
+const normalCurrentPage = ref(1);
+const failCurrentPage = ref(1);
+const normalShowTaskList = ref([]);
+const failShowTaskList = ref([]);
+let normalCarouselTimer = null;
+let failCarouselTimer = null;
+
+// 淇锛氬崟鎹姸鎬佹枃鏈紙鏂板taskType鍙傛暟锛�
+const getTaskStatusText = (statusNum, taskType) => {
+ const statusMap = {
+ 0: "鏈紑濮�",
+ 1: taskType === 'inbound' ? "鍏ュ簱涓�" : (taskType === 'outbound' ? "鍑哄簱涓�" : "澶勭悊涓�"),
+ 2: "澶勭悊涓�",
+ 3: "宸插畬鎴�",
+ 4: "宸插彇娑�",
+ 5: "寮傚父"
+ };
+ return statusMap[statusNum] ;
+};
+
+// MES鍥炰紶鐘舵�佹槧灏�
+const mesStatusMap = {
+ 0: "鏈洖浼�", 1: "鍥炰紶鎴愬姛", 2: "鍥炰紶澶辫触",
+ 3: "閮ㄥ垎鍥炰紶鎴愬姛", 4: "閮ㄥ垎鍥炰紶澶辫触"
+};
+const getMESStatusText = (statusNum) => {
+ if (statusNum === undefined || statusNum === null || isNaN(statusNum)) return "鏈煡鐘舵��";
+ return mesStatusMap[statusNum] || `鏈煡鐘舵��(${statusNum})`;
+};
+const getMESStatusClass = (statusNum) => {
+ if (statusNum === undefined || statusNum === null || isNaN(statusNum)) return "status-unknown";
+ const classMap = { 0: "status-pending", 1: "status-completed", 2: "status-error", 3: "status-processing", 4: "status-error" };
+ return classMap[statusNum] || "status-unknown";
+};
+
+// 鍗曟嵁绫诲瀷鏂囨湰/鏍峰紡
+const getTaskTypeText = (row) => {
+ const businessType = Number(row.businessType) || 0;
+ if (row.taskType === 'inbound') {
+ return inboundBusinessTypeMap[businessType] || `鏈煡绫诲瀷(${businessType})`;
+ } else if (row.taskType === 'outbound') {
+ return outboundBusinessTypeMap[businessType] || `鏈煡绫诲瀷(${businessType})`;
+ }
+ return "鍏朵粬浣滀笟";
+};
+const getStatusClass = (statusNum) => {
+ if (statusNum === undefined || statusNum === null || isNaN(statusNum)) return "status-unknown";
+ const classMap = { 0: "status-pending", 1: "status-processing", 2: "status-processing", 3: "status-completed", 4: "status-canceled", 5: "status-error" };
+ return classMap[statusNum] || "status-unknown";
+};
+const getTypeClass = (taskType) => {
+ const classMap = { 'inbound': "type-inbound", 'outbound': "type-outbound" };
+ return classMap[taskType] || "type-other";
+};
+
+// 鏁板瓧鏍煎紡鍖�
const formatNumber = (num) => {
if (!num) return '0';
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
-const startTaskCarousel = () => {
- // 娓呴櫎鏃у畾鏃跺櫒锛岄槻姝㈤噸澶嶅惎鍔�
- if (taskCarouselTimer) clearInterval(taskCarouselTimer);
+// 鍒濆鍖栬〃鏍兼暟鎹紙鍒嗛〉+杞挱锛�
+const initTableData = () => {
+ // 鍋滄鏃у畾鏃跺櫒
+ clearInterval(normalCarouselTimer);
+ clearInterval(failCarouselTimer);
- const totalTask = bigscreendata.value.taskList.length;
- // 浠诲姟鏁�<=5鏃讹紝涓嶈疆鎾紙娌℃湁鏇村浠诲姟鍙崲锛�
- if (totalTask <= 5) {
- showTaskList.value = [...bigscreendata.value.taskList];
- return;
+ // 姝ｅ父鍗曟嵁鍒嗛〉/杞挱
+ const loadNormalData = (page) => {
+ const start = (page - 1) * 5;
+ const end = start + 5;
+ normalShowTaskList.value = normalTaskList.value.slice(start, end);
+ };
+ loadNormalData(normalCurrentPage.value);
+
+ // 澶辫触鍗曟嵁鍒嗛〉/杞挱
+ const loadFailData = (page) => {
+ const start = (page - 1) * 5;
+ const end = start + 5;
+ failShowTaskList.value = failTaskList.value.slice(start, end);
+ };
+ loadFailData(failCurrentPage.value);
+
+ // 杞挱閫昏緫锛堜粎鏁版嵁瓒呰繃5鏉℃椂寮�鍚級
+ if (normalTaskList.value.length > 5) {
+ normalCarouselTimer = setInterval(() => {
+ normalCurrentPage.value = normalCurrentPage.value >= Math.ceil(normalTaskList.value.length / 5) ? 1 : normalCurrentPage.value + 1;
+ loadNormalData(normalCurrentPage.value);
+ }, 5000);
}
-
- // 鍚姩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绉掗棿闅�
-};
-
-const getTaskTypeText = (taskTypeNum) => {
- // 澶勭悊绌哄��/鏃犳晥鍊�
- if (!taskTypeNum || isNaN(taskTypeNum)) return "鏈煡绫诲瀷";
-
- // 瀵瑰簲鍚庣TaskEnumHelper鐨勫垎缁勮鍒�
- if (taskTypeNum >= 500 && taskTypeNum < 900) return "鍏ュ簱";
- if (taskTypeNum >= 100 && taskTypeNum < 500) return "鍑哄簱";
- if (taskTypeNum >= 900 && taskTypeNum < 1000) return "绉诲簱";
- return "鍏朵粬浣滀笟"; // 鍏滃簳
-};
-
-// 鑾峰彇浠诲姟鐘舵�佹牱寮忕被
-const getStatusClass = (statusNum) => {
- if (statusNum === undefined || statusNum === null || isNaN(statusNum)) {
- return "status-unknown";
+ if (failTaskList.value.length > 5) {
+ failCarouselTimer = setInterval(() => {
+ failCurrentPage.value = failCurrentPage.value >= Math.ceil(failTaskList.value.length / 5) ? 1 : failCurrentPage.value + 1;
+ loadFailData(failCurrentPage.value);
+ }, 5000);
}
-
- // 鏍规嵁鐘舵�佽寖鍥磋繑鍥炰笉鍚屾牱寮�
- 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"; // 寮傚父
-
- 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 handleNormalPageChange = (page) => {
+ clearInterval(normalCarouselTimer); // 鎵嬪姩鍒囨崲鍒嗛〉鏃跺仠姝㈣疆鎾�
+ normalCurrentPage.value = page;
+ const start = (page - 1) * 5;
+ const end = start + 5;
+ normalShowTaskList.value = normalTaskList.value.slice(start, end);
+};
+const handleFailPageChange = (page) => {
+ clearInterval(failCarouselTimer);
+ failCurrentPage.value = page;
+ const start = (page - 1) * 5;
+ const end = start + 5;
+ failShowTaskList.value = failTaskList.value.slice(start, end);
};
-// 鑾峰彇鍚庣澶у睆鏁版嵁
+// 鐩戝惉鏁版嵁鍙樺寲锛岄噸鏂板垵濮嬪寲琛ㄦ牸
+watch([normalTaskList, failTaskList], () => {
+ initTableData();
+}, { deep: true });
+
+// 鑾峰彇鍚庣鏁版嵁
const fetchBigGreenData = async () => {
try {
- debugger
const res = await http.get('/api/BigScreen/GetBigGreenData');
- console.log('澶у睆鏁版嵁', res);
-
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(); // 鍚姩浠诲姟杞挱
+ initTableData();
refreshCharts();
});
} catch (error) {
ElMessage.error('鏁版嵁鑾峰彇澶辫触锛岃妫�鏌ュ悗绔帴鍙ｆ槸鍚︽甯�');
+ console.error('鏁版嵁鑾峰彇澶辫触锛�', error);
}
};
-// 澶囩敤妯℃嫙鏁版嵁
-const operationList = ref([
- { opNo: 'JW251224001', opType: '鍏ュ簱', operator: '寮犱笁', startTime: '15:30:22', status: '澶勭悊涓�' },
- { opNo: 'CK251224002', opType: '鍑哄簱', operator: '鏉庡洓', startTime: '15:25:10', status: '宸插畬鎴�' },
- { opNo: 'PD251224003', opType: '鐩樼偣', operator: '鐜嬩簲', startTime: '15:20:05', status: '寰呯‘璁�' },
- { 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
- : [
- { value: 48.7, name: '甯告俯鍖篈鍖�', itemStyle: { color: '#5470c6' } },
- { value: 29.2, name: '鍐疯棌鍖築鍖�', itemStyle: { color: '#91cc75' } },
- { value: 21.9, name: '淇濈◣鍖篊鍖�', itemStyle: { color: '#fac858' } },
- { value: 2.2, name: '娈嬫鍝佸尯D鍖�', itemStyle: { color: '#ee6666' } }
- ];
-
- const option = {
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b}: {c}%'
- },
- legend: {
- bottom: 0,
- left: 'center',
- data: locationData.map(item => item.name)
- },
- series: [{
- name: '搴撳瓨搴撲綅鍒嗗竷',
- type: 'pie',
- radius: ['40%', '70%'],
- center: ['50%', '40%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 10,
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 20,
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: false
- },
- data: locationData
- }]
- };
-
- inventoryPieChart.setOption(option);
- return inventoryPieChart;
-};
-
-// 鍒濆鍖栬繎7鏃ュ嚭鍏ュ簱瓒嬪娍鍥撅紙鍏宠仈鍚庣鏁版嵁锛�
const initStockTrend = () => {
- debugger
if (!stockTrendRef.value) return;
-
- if (stockTrendChart) {
- stockTrendChart.dispose();
- }
-
+ if (stockTrendChart) stockTrendChart.dispose();
stockTrendChart = echarts.init(stockTrendRef.value);
- // 浼樺厛浣跨敤鍚庣鏁版嵁
const trendData = bigscreendata.value.dailyInOutBoundList;
- console.log('鍑哄叆搴撹秼鍔挎暟鎹�', trendData);
-
+ 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',
- axisPointer: {
- type: 'cross'
- }
- },
- legend: {
- data: ['鍏ュ簱閲�', '鍑哄簱閲�'],
- top: 10
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- top: '15%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: true,
- data: trendData.map(item => item.date)
- },
- yAxis: {
- type: 'value',
- name: '鏁伴噺锛堝崈浠讹級',
- max: 25
- },
+ tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
+ legend: { data: ['鍏ュ簱閲�', '鍑哄簱閲�'], top: 10 },
+ grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
+ xAxis: { type: 'category', boundaryGap: true, data: trendData.map(item => item.date) },
+ yAxis: { type: 'value', name: '鏁伴噺', min: 0, max: maxValue > 0 ? Math.ceil(maxValue * 1.2) : 10 },
series: [
- {
- name: '鍏ュ簱閲�',
- type: 'bar',
- barWidth: '30%',
- data: trendData.map(item => item.inNum),
- itemStyle: { color: '#52c41a' }
- },
- {
- name: '鍑哄簱閲�',
- type: 'bar',
- barWidth: '30%',
- data: trendData.map(item => item.outNum),
- itemStyle: { color: '#1890ff' }
- }
+ { name: '鍏ュ簱閲�', type: 'bar', barWidth: '30%', data: trendData.map(item => item.dailyInboundQuantity), itemStyle: { color: '#52c41a', borderRadius: [4, 4, 0, 0] } },
+ { name: '鍑哄簱閲�', type: 'bar', barWidth: '30%', data: trendData.map(item => item.dailyOutboundQuantity), itemStyle: { color: '#1890ff', borderRadius: [4, 4, 0, 0] } }
]
};
-
stockTrendChart.setOption(option);
return stockTrendChart;
};
-// 鍒濆鍖栧簱浣嶅埄鐢ㄧ巼鐜舰鍥撅紙淇锛氱粺涓�瀹炰緥绠＄悊锛屽叧鑱斿悗绔暟鎹級
const initLocationRate = () => {
if (!locationRateRef.value) return;
-
- // 閿�姣佹棫瀹炰緥
- if (locationRateChart) {
- locationRateChart.dispose();
- }
-
+ 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',
- formatter: '{b}: {c}%'
- },
- legend: {
- bottom: 0,
- left: 'center',
- data: ['宸插崰鐢ㄥ簱浣�', '绌洪棽搴撲綅'],
- textStyle: { fontSize: 12, color: '#666' }
- },
+ tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
+ legend: { bottom: 0, left: 'center', data: ['宸插崰鐢ㄥ簱浣�', '绌洪棽搴撲綅'], textStyle: { fontSize: 12, color: '#666' } },
graphic: [
- {
- type: 'text',
- left: 'right',
- top: '10%',
- style: {
- text: `${utilizationRate}%`,
- fontSize: 24,
- fontWeight: 'bold',
- fill: '#333'
- }
- },
- {
- type: 'text',
- left: 'right',
- top: '25%',
- style: {
- text: '搴撲綅鍒╃敤鐜�',
- fontSize: 14,
- fill: '#666'
- }
- }
+ { type: 'text', left: 'right', top: '10%', style: { text: `${utilizationRate}%`, fontSize: 24, fontWeight: 'bold', fill: '#333' } },
+ { type: 'text', left: 'right', top: '25%', style: { text: '搴撲綅鍒╃敤鐜�', fontSize: 14, fill: '#666' } }
],
- series: [
- {
- type: 'pie',
- radius: ['50%', '70%'],
- center: ['40%', '50%'],
- avoidLabelOverlap: false,
- label: { show: false },
- labelLine: { show: false },
- data: [
- { value: utilizationRate, name: '宸插崰鐢ㄥ簱浣�', itemStyle: { color: '#1890ff' } },
- { value: freeRate, name: '绌洪棽搴撲綅', itemStyle: { color: '#e5e9f2' } }
- ]
- }
- ]
+ series: [{
+ type: 'pie', radius: ['50%', '70%'], center: ['40%', '50%'],
+ avoidLabelOverlap: false, label: { show: false }, labelLine: { show: false },
+ data: [
+ { value: utilizationRate, name: '宸插崰鐢ㄥ簱浣�', itemStyle: { color: '#1890ff' } },
+ { value: freeRate, name: '绌洪棽搴撲綅', itemStyle: { color: '#e5e9f2' } }
+ ]
+ }]
};
-
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
- : {
- dates: ['12-18', '12-19', '12-20', '12-21', '12-22', '12-23', '12-24'],
- stockShort: [10, 11, 9, 12, 10, 13, 12],
- orderTimeout: [8, 9, 7, 8, 7, 9, 8],
- locationException: [4, 5, 2, 4, 3, 5, 4],
- checkDiff: [2, 3, 1, 2, 1, 3, 2]
- };
-
- const option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
- }
- },
- legend: {
- data: ['搴撳瓨涓嶈冻', '璁㈠崟瓒呮椂', '搴撲綅寮傚父', '鐩樼偣宸紓'],
- top: 10
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- top: '15%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: exceptionData.dates
- },
- yAxis: {
- type: 'value',
- name: '寮傚父鏁伴噺'
- },
- series: [
- {
- name: '搴撳瓨涓嶈冻',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 8,
- data: exceptionData.stockShort,
- itemStyle: { color: '#ff4d4f' },
- lineStyle: { width: 3 }
- },
- {
- name: '璁㈠崟瓒呮椂',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 8,
- data: exceptionData.orderTimeout,
- itemStyle: { color: '#faad14' },
- lineStyle: { width: 3 }
- },
- {
- name: '搴撲綅寮傚父',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 8,
- data: exceptionData.locationException,
- itemStyle: { color: '#722ed1' },
- lineStyle: { width: 3 }
- },
- {
- name: '鐩樼偣宸紓',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 8,
- data: exceptionData.checkDiff,
- itemStyle: { color: '#13c2c2' },
- lineStyle: { width: 3 }
- }
- ]
- };
-
- exceptionTrendChart.setOption(option);
- return exceptionTrendChart;
-};
-
-// 鍒锋柊鎵�鏈夊浘琛紙绉婚櫎鏃犳晥闆疯揪鍥鹃�昏緫锛�
const refreshCharts = () => {
- const charts = [
- initStockTrend,
- initLocationRate,
- ];
-
- charts.forEach(initFunc => {
+ [initStockTrend, initLocationRate].forEach(initFunc => {
const chart = initFunc();
- if (chart) {
- chart.resize();
- }
+ if (chart) chart.resize();
});
};
-// 绐楀彛澶у皬鍙樺寲鐩戝惉
+// 闃叉姈澶勭悊resize浜嬩欢
+let resizeTimer = null;
const handleResize = () => {
- const charts = [
- inventoryPieChart,
- stockTrendChart,
- locationRateChart,
- exceptionTrendChart
- ];
-
- charts.forEach(chart => {
- if (chart) {
- chart.resize();
- }
- });
+ clearTimeout(resizeTimer);
+ resizeTimer = setTimeout(() => {
+ [stockTrendChart, locationRateChart].forEach(chart => {
+ if (chart) chart.resize();
+ });
+ }, 200);
};
-// 缁勪欢鎸傝浇鏃讹細鍏堣姹傛暟鎹紝鍐嶅垵濮嬪寲鍥捐〃
+// 鐢熷懡鍛ㄦ湡
onMounted(() => {
- // 鍏堣幏鍙栧悗绔暟鎹�
fetchBigGreenData();
- // 鍒濆鍖栧浘琛紙纭繚DOM宸叉覆鏌擄級
nextTick(() => {
- initInventoryPie();
initStockTrend();
initLocationRate();
- initExceptionTrend();
window.addEventListener('resize', handleResize);
});
});
-// 缁勪欢鍗歌浇鏃讹細閿�姣佸浘琛ㄥ疄渚嬶紝绉婚櫎浜嬩欢鐩戝惉
onUnmounted(() => {
- const charts = [
- inventoryPieChart,
- stockTrendChart,
- locationRateChart,
- exceptionTrendChart
- ];
-
- charts.forEach(chart => {
- if (chart) {
- chart.dispose();
- }
+ // 閿�姣佸浘琛ㄥ拰瀹氭椂鍣�
+ [stockTrendChart, locationRateChart].forEach(chart => {
+ if (chart) chart.dispose();
});
- clearInterval(taskCarouselTimer); // 娓呴櫎杞挱瀹氭椂鍣�
+ [normalCarouselTimer, failCarouselTimer, resizeTimer].forEach(timer => {
+ clearInterval(timer);
+ clearTimeout(timer);
+ });
window.removeEventListener('resize', handleResize);
});
</script>
@@ -662,24 +607,10 @@
font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
-.header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 20px;
- background: white;
- padding: 15px 20px;
- border-radius: 8px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-.stats-card-row,
-.chart-row,
-.table-row {
+.stats-card-row, .chart-row, .table-row {
margin-bottom: 20px;
}
-/* 鏍稿績淇敼锛氳ˉ鍏卍iv鐗坈ard鐨勫熀纭�鏍峰紡锛屾ā鎷焑l-card鐨勮瑙夋晥鏋� */
.stats-card, .chart-card, .table-card {
background: #fff;
border-radius: 8px;
@@ -699,7 +630,6 @@
overflow: hidden;
background: linear-gradient(145deg, #ffffff 0%, #f9fafc 100%);
}
-
.stats-card:hover {
transform: translateY(-6px) scale(1.02);
@@ -722,7 +652,6 @@
transition: all 0.3s ease;
}
-
.card-title {
font-size: 15px;
color: #606266;
@@ -732,27 +661,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;
-}
-
-.card-change {
- margin-top: 3px;
+ background: linear-gradient(to right, #409eff, #36cfc9);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
.chart-card {
@@ -786,9 +704,30 @@
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;
+}
-.chart-title,
-.table-title {
+.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 {
display: flex;
justify-content: space-between;
align-items: center;
@@ -800,11 +739,6 @@
border-left: 4px solid #409eff;
position: relative;
letter-spacing: 0.5px;
-}
-
-
-.view-btn {
- font-size: 12px;
}
.table-card {
@@ -831,75 +765,31 @@
border-top: 1px solid #ebeef5;
}
-/* 琛ㄦ牸鏍峰紡浼樺寲 */
:deep(.el-table) {
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
+:deep(.el-table th) { background-color: #f5f7fa; color: #606266; font-weight: 600; padding: 12px 0; }
+:deep(.el-table td) { padding: 12px 0; }
+:deep(.el-table--border) { border-radius: 6px; }
+:deep(.el-table--border::after), :deep(.el-table--group::after), :deep(.el-table::before), :deep(.el-table__fixed-right::before), :deep(.el-table__fixed::before) { display: none; }
-:deep(.el-table th) {
- background-color: #f5f7fa;
- color: #606266;
- font-weight: 600;
- padding: 12px 0;
-}
-
-:deep(.el-table td) {
- padding: 12px 0;
-}
-
-:deep(.el-table--border) {
- border-radius: 6px;
-}
-
-:deep(.el-table--border::after) {
- display: none;
-}
-
-:deep(.el-table--group::after) {
- display: none;
-}
-
-:deep(.el-table::before) {
- display: none;
-}
-
-:deep(.el-table__fixed-right::before) {
- display: none;
-}
-
-:deep(.el-table__fixed::before) {
- display: none;
-}
-
-/* 鍒嗛〉鍣ㄦ牱寮忎紭鍖� */
-:deep(.el-pagination) {
- margin-top: 10px;
-}
-
-:deep(.el-pagination .btn-prev),
-:deep(.el-pagination .btn-next),
-:deep(.el-pagination .el-pager li) {
+:deep(.el-pagination .btn-prev), :deep(.el-pagination .btn-next), :deep(.el-pagination .el-pager li) {
border-radius: 4px;
margin: 0 2px;
transition: all 0.3s;
}
-
-:deep(.el-pagination .btn-prev:hover),
-:deep(.el-pagination .btn-next:hover),
-:deep(.el-pagination .el-pager li:hover) {
+:deep(.el-pagination .btn-prev:hover), :deep(.el-pagination .btn-next:hover), :deep(.el-pagination .el-pager li:hover) {
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
-
:deep(.el-pagination .el-pager li.active) {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}
-/* 浠诲姟鐘舵�佹牱寮� */
-.task-status {
+.task-status, .task-type {
display: inline-block;
padding: 6px 12px;
border-radius: 20px;
@@ -912,175 +802,17 @@
letter-spacing: 0.5px;
}
-.status-pending {
- background-color: rgba(64, 158, 255, 0.1);
- color: #409eff;
- border: 1px solid rgba(64, 158, 255, 0.2);
-}
+.status-pending { background-color: rgba(64, 158, 255, 0.1); color: #409eff; border: 1px solid rgba(64, 158, 255, 0.2); }
+.status-processing { background-color: rgba(103, 194, 58, 0.1); color: #67c23a; border: 1px solid rgba(103, 194, 58, 0.2); }
+.status-completed { background-color: rgba(103, 194, 58, 0.1); color: #67c23a; border: 1px solid rgba(103, 194, 58, 0.2); }
+.status-suspended { background-color: rgba(230, 162, 60, 0.1); color: #e6a23c; border: 1px solid rgba(230, 162, 60, 0.2); }
+.status-canceled { background-color: rgba(144, 147, 153, 0.1); color: #909399; border: 1px solid rgba(144, 147, 153, 0.2); }
+.status-error { background-color: rgba(245, 108, 108, 0.1); color: #f56c6c; border: 1px solid rgba(245, 108, 108, 0.2); }
+.status-unknown { background-color: rgba(144, 147, 153, 0.1); color: #909399; border: 1px solid rgba(144, 147, 153, 0.2); }
-.status-processing {
- background-color: rgba(103, 194, 58, 0.1);
- color: #67c23a;
- border: 1px solid rgba(103, 194, 58, 0.2);
-}
-
-.status-completed {
- background-color: rgba(103, 194, 58, 0.1);
- color: #67c23a;
- border: 1px solid rgba(103, 194, 58, 0.2);
-}
-
-.status-suspended {
- background-color: rgba(230, 162, 60, 0.1);
- color: #e6a23c;
- border: 1px solid rgba(230, 162, 60, 0.2);
-}
-
-.status-canceled {
- background-color: rgba(144, 147, 153, 0.1);
- color: #909399;
- border: 1px solid rgba(144, 147, 153, 0.2);
-}
-
-.status-error {
- background-color: rgba(245, 108, 108, 0.1);
- color: #f56c6c;
- border: 1px solid rgba(245, 108, 108, 0.2);
-}
-
-.status-unknown {
- background-color: rgba(144, 147, 153, 0.1);
- color: #909399;
- 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;
- font-size: 13px;
- font-weight: 600;
- text-align: center;
- min-width: 70px;
- position: relative;
- overflow: hidden;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- 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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-}
-
-
-.btn-group {
- margin-left: 10px;
-}
-
-/* 绉婚櫎鍘熸湁鐨別l-card__body鏍峰紡绌块�忥紝鍥犱负宸茬粡鏇挎崲涓虹函div */
+.type-inbound { background-color: rgba(64, 158, 255, 0.1); color: #409eff; border: 1px solid rgba(64, 158, 255, 0.2); }
+.type-outbound { background-color: rgba(103, 194, 58, 0.1); color: #67c23a; border: 1px solid rgba(103, 194, 58, 0.2); }
+.type-transfer { background-color: rgba(230, 162, 60, 0.1); color: #e6a23c; border: 1px solid rgba(230, 162, 60, 0.2); }
+.type-other { background-color: rgba(144, 147, 153, 0.1); color: #909399; border: 1px solid rgba(144, 147, 153, 0.2); }
+.type-unknown { background-color: rgba(144, 147, 153, 0.1); color: #909399; border: 1px solid rgba(144, 147, 153, 0.2); }
</style>
\ No newline at end of file
--
Gitblit v1.9.3