From 1866b69e8f67e382a0a75268d63e6418c8ae02e7 Mon Sep 17 00:00:00 2001
From: heshaofeng <heshaofeng@hnkhzn.com>
Date: 星期二, 13 一月 2026 09:55:01 +0800
Subject: [PATCH] 1
---
项目代码/WIDESEA_WMSClient/src/views/Home.vue | 437 +++++++++++++++++++++++++++++++++++------------------
1 files changed, 287 insertions(+), 150 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..c86c83d 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"
@@ -2,85 +2,120 @@
<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">{{ 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-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="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" />
+ </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>
@@ -95,7 +130,6 @@
<!-- 琛ㄦ牸鍖哄煙 - 缁戝畾鍚庣浣滀笟鏁版嵁 -->
<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%;">
@@ -125,9 +159,13 @@
</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';
+// 琛ュ厖ElMessage瀵煎叆
+import { ElMessage } from 'element-plus';
// 鍝嶅簲寮忔暟鎹�
const month = ref('month');
@@ -146,9 +184,86 @@
taskList: [],
inboundCount: 0,
outboundCount: 0,
- inventoryLocationDist: [], // 搴撳瓨搴撲綅鍒嗗竷鏁版嵁
- exceptionTypeTrend: [] // 寮傚父绫诲瀷瓒嬪娍鏁版嵁
+ inventoryLocationDist: [],
+ exceptionTypeTrend: [],
+ 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('|'); // 鐢ㄧ壒娈婂瓧绗﹀垎闅旓紝閬垮厤瀛楁鍊兼嫾鎺ュ悗娣锋穯
+
+ // 鍙繚鐣欑涓�娆″嚭鐜扮殑璁板綍
+ 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 || [];
+ // 鏁扮粍闀垮害涓�0鏃舵樉绀虹┖鎻愮ず锛屽惁鍒欎笉鏄剧ず锛堝師閫昏緫鍐欏弽浜嗭級
+ 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 taskStatusMap = {
100: "鏂板缓",
@@ -171,57 +286,54 @@
990: "浠诲姟寮傚父",
110: "鎻愬崌鏈烘墽琛屼腑"
};
+
+// 鑾峰彇浠诲姟鐘舵�佹枃鏈�
const getTaskStatusText = (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 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;
- // 浠诲姟鏁�<=5鏃讹紝涓嶈疆鎾紙娌℃湁鏇村浠诲姟鍙崲锛�
if (totalTask <= 5) {
showTaskList.value = [...bigscreendata.value.taskList];
return;
}
- // 鍚姩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锛屽惊鐜挱鏀�
+ currentTaskIndex.value = 0;
}
- }, 5000); // 5绉掗棿闅�
+ }, 5000);
};
+// 鑾峰彇浠诲姟绫诲瀷鏂囨湰
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 "鍏朵粬浣滀笟"; // 鍏滃簳
+ return "鍏朵粬浣滀笟";
};
// 鑾峰彇浠诲姟鐘舵�佹牱寮忕被
@@ -230,15 +342,14 @@
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 >= 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";
return "status-unknown";
};
@@ -247,34 +358,32 @@
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"; // 绉诲簱
+ 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"; // 鍏朵粬浣滀笟
+ return "type-other";
};
// 鑾峰彇鍚庣澶у睆鏁版嵁
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(); // 鍚姩浠诲姟杞挱
+ startTaskCarousel();
refreshCharts();
});
} catch (error) {
ElMessage.error('鏁版嵁鑾峰彇澶辫触锛岃妫�鏌ュ悗绔帴鍙ｆ槸鍚︽甯�');
+ console.error('鏁版嵁鑾峰彇澶辫触锛�', error);
}
};
@@ -292,23 +401,21 @@
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
: [
@@ -361,7 +468,7 @@
return inventoryPieChart;
};
-// 鍒濆鍖栬繎7鏃ュ嚭鍏ュ簱瓒嬪娍鍥撅紙鍏宠仈鍚庣鏁版嵁锛�
+// 鍒濆鍖栬繎7鏃ュ嚭鍏ュ簱瓒嬪娍鍥�
const initStockTrend = () => {
if (!stockTrendRef.value) return;
@@ -370,15 +477,11 @@
}
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: {
@@ -407,7 +510,6 @@
type: 'value',
name: '鏁伴噺',
min: 0,
- // 鏍规嵁鏁版嵁鍔ㄦ�佽缃渶澶у�硷紝鐣欏嚭涓�浜涚┖闂�
max: maxValue > 0 ? Math.ceil(maxValue * 1.2) : 10
},
series: [
@@ -438,18 +540,15 @@
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;
@@ -507,7 +606,7 @@
return locationRateChart;
};
-// 鍒濆鍖栧紓甯哥被鍨嬬粺璁¤秼鍔垮浘锛堝叧鑱斿悗绔暟鎹級
+// 鍒濆鍖栧紓甯哥被鍨嬬粺璁¤秼鍔垮浘
const initExceptionTrend = () => {
if (!exceptionTrendRef.value) return;
@@ -516,7 +615,6 @@
}
exceptionTrendChart = echarts.init(exceptionTrendRef.value);
- // 浼樺厛浣跨敤鍚庣鏁版嵁
const exceptionData = bigscreendata.value.exceptionTypeTrend.length
? bigscreendata.value.exceptionTypeTrend
: {
@@ -602,11 +700,11 @@
return exceptionTrendChart;
};
-// 鍒锋柊鎵�鏈夊浘琛紙绉婚櫎鏃犳晥闆疯揪鍥鹃�昏緫锛�
+// 鍒锋柊鎵�鏈夊浘琛�
const refreshCharts = () => {
const charts = [
initStockTrend,
- initLocationRate,
+ initLocationRate
];
charts.forEach(initFunc => {
@@ -633,7 +731,7 @@
});
};
-// 缁勪欢鎸傝浇鏃讹細鍏堣姹傛暟鎹紝鍐嶅垵濮嬪寲鍥捐〃
+// 缁勪欢鎸傝浇鏃�
onMounted(() => {
// 鍏堣幏鍙栧悗绔暟鎹�
fetchBigGreenData();
@@ -647,7 +745,7 @@
});
});
-// 缁勪欢鍗歌浇鏃讹細閿�姣佸浘琛ㄥ疄渚嬶紝绉婚櫎浜嬩欢鐩戝惉
+// 缁勪欢鍗歌浇鏃�
onUnmounted(() => {
const charts = [
inventoryPieChart,
@@ -661,7 +759,7 @@
chart.dispose();
}
});
- clearInterval(taskCarouselTimer); // 娓呴櫎杞挱瀹氭椂鍣�
+ clearInterval(taskCarouselTimer);
window.removeEventListener('resize', handleResize);
});
</script>
@@ -692,7 +790,7 @@
margin-bottom: 20px;
}
-/* 鏍稿績淇敼锛氳ˉ鍏卍iv鐗坈ard鐨勫熀纭�鏍峰紡锛屾ā鎷焑l-card鐨勮瑙夋晥鏋� */
+/* 鏍稿績鏍峰紡锛氬崱鐗囧熀纭�鏍峰紡 */
.stats-card, .chart-card, .table-card {
background: #fff;
border-radius: 8px;
@@ -712,7 +810,6 @@
overflow: hidden;
background: linear-gradient(145deg, #ffffff 0%, #f9fafc 100%);
}
-
.stats-card:hover {
transform: translateY(-6px) scale(1.02);
@@ -735,7 +832,6 @@
transition: all 0.3s ease;
}
-
.card-title {
font-size: 15px;
color: #606266;
@@ -745,23 +841,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 +888,58 @@
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 +955,6 @@
position: relative;
letter-spacing: 0.5px;
}
-
.view-btn {
font-size: 12px;
@@ -1090,10 +1230,7 @@
animation: pulse 2.8s infinite;
}
-
.btn-group {
margin-left: 10px;
}
-
-/* 绉婚櫎鍘熸湁鐨別l-card__body鏍峰紡绌块�忥紝鍥犱负宸茬粡鏇挎崲涓虹函div */
</style>
\ No newline at end of file
--
Gitblit v1.9.3