From 4d29fcfc27c10a09a3ac5aaf52b6cd3407d11ade Mon Sep 17 00:00:00 2001
From: heshaofeng <heshaofeng@hnkhzn.com>
Date: 星期一, 19 一月 2026 13:55:40 +0800
Subject: [PATCH] 组盘前端添加防抖，首页的优化
---
项目代码/WIDESEA_WMSClient/src/views/charts/wms-dashboard.vue | 859 +++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 651 insertions(+), 208 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/charts/wms-dashboard.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/charts/wms-dashboard.vue"
index 1126002..3561bfe 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/charts/wms-dashboard.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/charts/wms-dashboard.vue"
@@ -1,118 +1,124 @@
<template>
<div class="wms-dashboard">
- <!-- 椤堕儴鏍囬鏍� -->
- <!-- <div class="header">
- <h1>WMS浠撳偍鍙鍖栧浘琛ㄧ湅鏉�</h1>
- <div class="header-right">
- <span>2025-12-24 16:11:44</span>
- <el-select v-model="month" placeholder="鏈湀" style="margin-left: 10px; width: 80px;">
- <el-option label="鏈湀" value="month"></el-option>
- <el-option label="涓婃湀" value="lastMonth"></el-option>
- </el-select>
- <el-button type="primary" style="margin-left: 10px;" @click="refreshCharts">鍒锋柊</el-button>
- </div>
- </div> -->
-
<!-- 缁熻鍗＄墖鍖哄煙 - 缁戝畾鍝嶅簲寮忔暟鎹� -->
<el-row :gutter="20" class="stats-card-row">
- <el-col :span="6">
- <el-card class="stats-card">
- <div class="card-title">鎬诲簱瀛橈紙浠讹級</div>
- <div class="card-value">{{ formatNumber(bigscreendata.totalStockQuantity) }}</div>
- <!-- <div class="card-change"><el-tag type="success">鈫� 2.1% 杈冩槰鏃�</el-tag></div> -->
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="stats-card">
- <div class="card-title">寰呭嚭搴撹鍗�</div>
- <div class="card-value">{{ bigscreendata.unOutBoundOrderCount }}</div>
- <!-- <div class="card-change"><el-tag type="warning">鈫� 5.3% 杈�1灏忔椂鍓�</el-tag></div> -->
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="stats-card">
- <div class="card-title">浠婃棩浣滀笟瀹屾垚鐜�</div>
- <div class="card-value">{{ bigscreendata.dailyCompletionRate ? `${bigscreendata.dailyCompletionRate}%` : '0%' }}</div>
- <!-- <div class="card-change"><el-tag type="success">鈫� 1.8% 杈冩槰鏃�</el-tag></div> -->
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="stats-card">
- <div class="card-title">鏈鐞嗗紓甯�</div>
- <div class="card-value">{{ bigscreendata.unhandledExceptionCount || 0 }}</div>
- <!-- <div class="card-change"><el-tag type="danger">鈫� 1 杈�30鍒嗛挓鍓�</el-tag></div> -->
- </el-card>
- </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 class="chart-card">
- <div class="chart-title">搴撳瓨搴撲綅鍒嗗竷锛堝浘鍍忓寲鍗犳瘮锛�</div>
- <div ref="inventoryPieRef" class="chart-container"></div>
- </el-card>
+ <!-- 鏇挎崲el-card涓篸iv锛屼繚鐣檆hart-card绫诲悕 -->
+ <div class="chart-card">
+ <div class="chart-title">搴撲綅鍒╃敤鐜�</div>
+ <div ref="locationRateRef" class="chart-container"></div>
+ </div>
</el-col>
<el-col :span="12">
- <el-card class="chart-card">
- <div class="chart-title">杩�7鏃ュ嚭鍏ュ簱瓒嬪娍锛堝浘鍍忓寲璧板娍锛�
- <!-- <el-button-group class="btn-group">
- <el-button type="primary" size="small">鍏ㄩ儴</el-button>
- <el-button type="default" size="small">鍏ュ簱</el-button>
- <el-button type="default" size="small">鍑哄簱</el-button>
- </el-button-group> -->
- </div>
+ <div class="chart-card">
+ <div class="chart-title">杩�7鏃ュ嚭鍏ュ簱瓒嬪娍锛堝浘鍍忓寲璧板娍锛�</div>
<div ref="stockTrendRef" class="chart-container"></div>
- </el-card>
+ </div>
</el-col>
</el-row>
<!-- 鍥捐〃鍖哄煙锛堢浜岃锛� -->
<el-row :gutter="20" class="chart-row">
- <el-col :span="12">
- <el-card class="chart-card">
- <div class="chart-title">搴撲綅鍒╃敤鐜�</div>
- <div ref="locationRateRef" class="chart-container"></div>
- </el-card>
- </el-col>
- <el-col :span="12">
- <el-card class="chart-card">
- <div class="chart-title">寮傚父绫诲瀷缁熻瓒嬪娍<el-button type="text" class="view-btn">绛涢��</el-button></div>
- <div ref="exceptionTrendRef" class="chart-container"></div>
- </el-card>
- </el-col>
</el-row>
<!-- 琛ㄦ牸鍖哄煙 - 缁戝畾鍚庣浣滀笟鏁版嵁 -->
<el-row :gutter="20" class="table-row" width="100%">
<el-col :span="24">
- <el-card class="table-card">
- <div class="table-title">瀹炴椂浣滀笟鐩戞帶
- <el-button-group class="btn-group">
- <el-button type="primary" size="small">鍏ㄩ儴浣滀笟</el-button>
- <el-button type="default" size="small">鍏ュ簱</el-button>
- <el-button type="default" size="small">鍑哄簱</el-button>
- <el-button type="default" size="small">鐩樼偣</el-button>
- </el-button-group>
- </div>
- <el-table :data="bigscreendata.taskList.length ? bigscreendata.taskList : operationList" border style="width: 100%;">
- <el-table-column prop="opNo" label="浣滀笟鍗曞彿" />
- <el-table-column prop="opType" label="浣滀笟绫诲瀷" />
- <el-table-column prop="operator" label="鎿嶄綔浜哄憳" />
- <el-table-column prop="startTime" label="寮�濮嬫椂闂�" />
- <el-table-column prop="status" label="褰撳墠鐘舵��">
- <template #default="scope">
- <el-tag :type="scope.row.status === '澶勭悊涓�' ? 'info' : scope.row.status === '宸插畬鎴�' ? 'success' : 'danger'">
- {{ scope.row.status }}
- </el-tag>
+ <!-- 鏇挎崲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="浠诲姟鐘舵��" >
+ <template #default="{ row }">
+ <span class="task-status" :class="getStatusClass(row.taskStatus)">{{ getTaskStatusText(row.taskStatus) }}</span>
</template>
</el-table-column>
- <el-table-column label="鎿嶄綔"><el-button type="text">璇︽儏</el-button></el-table-column>
+ <el-table-column prop="taskType" label="浠诲姟绫诲瀷" >
+ <template #default="{ row }">
+ <span class="task-type" :class="getTypeClass(row.taskType)">{{ getTaskTypeText(row.taskType) }}</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 prop="createDate" label="鍒涘缓鏃堕棿"/>
</el-table>
<div class="table-pagination">
<el-pagination layout="prev, pager, next, jumper" :current-page="1" :total="50" />
</div>
- </el-card>
+ </div>
</el-col>
</el-row>
</div>
@@ -134,37 +140,145 @@
dailyCompletionRate: 0,
unhandledExceptionCount: 0,
locationUtilizationRate: 0,
+ inStockPallet: 0,
+ freeStockPallet: 0,
dailyInOutBoundList: [],
taskList: [],
+ inboundCount: 0,
+ outboundCount: 0,
inventoryLocationDist: [], // 搴撳瓨搴撲綅鍒嗗竷鏁版嵁
exceptionTypeTrend: [] // 寮傚父绫诲瀷瓒嬪娍鏁版嵁
});
+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 "鏈煡鐘舵��";
+ }
+ // 绮惧噯鍖归厤鏄犲皠鍊硷紝鏃犲尮閰嶅垯杩斿洖鈥滄湭鐭ョ姸鎬佲��
+ 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, ',');
};
+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锛屽惊鐜挱鏀�
+ }
+ }, 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 (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 fetchBigGreenData = async () => {
try {
- // 淇锛氫唬鐞嗗凡閰嶇疆锛岀Щ闄ゅ浣欑殑/api鍓嶇紑
const res = await http.get('/api/BigScreen/GetBigGreenData');
console.log('澶у睆鏁版嵁', res);
- // 璧嬪�煎搷搴斿紡鏁版嵁锛堝吋瀹瑰悗绔粺涓�杩斿洖鏍煎紡锛�
+
bigscreendata.value = res.data || res;
// 鏁版嵁鏇存柊鍚庡埛鏂板浘琛�
nextTick(() => {
- refreshCharts();
+ const total = bigscreendata.value.taskList.length;
+ // 鍒濆鍖栨樉绀哄墠5鏉★紙涓嶈冻5鏉″垯鏄剧ず鍏ㄩ儴锛�
+ showTaskList.value = total >=5
+ ? [...bigscreendata.value.taskList.slice(0,5)]
+ : [...bigscreendata.value.taskList];
+ startTaskCarousel(); // 鍚姩浠诲姟杞挱
+ // refreshCharts(); // 绉婚櫎杩欓噷鐨勮皟鐢紝鏀逛负鍦ㄦ暟鎹幏鍙栧悗缁熶竴鍒濆鍖�
});
+ // 杩斿洖Promise锛屼互渚垮湪鏁版嵁鑾峰彇鎴愬姛鍚庡垵濮嬪寲鍥捐〃
+ return Promise.resolve();
} catch (error) {
- console.error('鑾峰彇澶у睆鏁版嵁澶辫触锛�', error);
- ElMessage.error('鏁版嵁鑾峰彇澶辫触锛岃妫�鏌ュ悗绔帴鍙ｆ槸鍚︽甯�'); // 鏇挎崲涓篍lement Plus娑堟伅鎻愮ず
+ ElMessage.error('鏁版嵁鑾峰彇澶辫触锛岃妫�鏌ュ悗绔帴鍙ｆ槸鍚︽甯�');
+ return Promise.reject(error);
}
};
-
-console.log('澶у睆鏁版嵁111', bigscreendata.value);
// 澶囩敤妯℃嫙鏁版嵁
const operationList = ref([
@@ -187,7 +301,7 @@
let exceptionTrendChart = null;
// 鍒濆鍖栧簱瀛樺簱浣嶅垎甯冮ゼ鍥撅紙鍏宠仈鍚庣鏁版嵁锛�
-const initInventoryPie = () => {
+const initInventoryPie= () => {
if (!inventoryPieRef.value) return;
// 閿�姣佹棫瀹炰緥锛岄槻姝㈠唴瀛樻硠婕�
@@ -250,76 +364,45 @@
};
// 鍒濆鍖栬繎7鏃ュ嚭鍏ュ簱瓒嬪娍鍥撅紙鍏宠仈鍚庣鏁版嵁锛�
-const initStockTrend = () => {
- if (!stockTrendRef.value) return;
-
- if (stockTrendChart) {
- stockTrendChart.dispose();
- }
-
- stockTrendChart = echarts.init(stockTrendRef.value);
- // 浼樺厛浣跨敤鍚庣鏁版嵁
- const trendData = bigscreendata.value.dailyInOutBoundList.length
- ? bigscreendata.value.dailyInOutBoundList
- : [
- { date: '12-18', inNum: 10, outNum: 16 },
- { date: '12-19', inNum: 12, outNum: 18 },
- { date: '12-20', inNum: 10, outNum: 14 },
- { date: '12-21', inNum: 12, outNum: 18 },
- { date: '12-22', inNum: 10, outNum: 16 },
- { date: '12-23', inNum: 12, outNum: 18 },
- { date: '12-24', inNum: 12, outNum: 20 }
- ];
-
- 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
- },
- 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' }
- }
- ]
- };
-
- stockTrendChart.setOption(option);
- return stockTrendChart;
-};
+// const initStockTrend = () => {
+// const chart = echarts.init(efficiencyChartRef.value)
+// const option = {
+// tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+// grid: {
+// left: '3%', right: '4%', bottom: '3%', top: '10%',
+// containLabel: true
+// },
+// xAxis: {
+// type: 'category',
+// data: ['鍏ュ簱浣滀笟', '鍑哄簱浣滀笟', '鐩樼偣浣滀笟', '璋冩嫧浣滀笟', '琛ヨ揣浣滀笟'],
+// axisLine: { lineStyle: { color: '#fff' } },
+// axisLabel: { color: '#fff' }
+// },
+// yAxis: {
+// type: 'value',
+// name: '鏁堢巼(鍗曚綅/灏忔椂)',
+// axisLine: { lineStyle: { color: '#fff' } },
+// splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
+// axisLabel: { color: '#fff' }
+// },
+// series: [
+// {
+// data: [180, 156, 95, 78, 120],
+// type: 'bar',
+// barWidth: '40%',
+// itemStyle: {
+// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+// { offset: 0, color: '#83bff6' },
+// { offset: 1, color: '#188df0' }
+// ]),
+// borderRadius: [5, 5, 0, 0]
+// }
+// }
+// ]
+// }
+// chart.setOption(option)
+// return chart
+// };
// 鍒濆鍖栧簱浣嶅埄鐢ㄧ巼鐜舰鍥撅紙淇锛氱粺涓�瀹炰緥绠＄悊锛屽叧鑱斿悗绔暟鎹級
const initLocationRate = () => {
@@ -333,7 +416,7 @@
locationRateChart = echarts.init(locationRateRef.value);
// 浼樺厛浣跨敤鍚庣鏁版嵁锛屾棤鏁版嵁鍒欑敤榛樿鍊�
console.log('搴撲綅鍒╃敤鐜囨暟鎹�', bigscreendata.value.locationUtilizationRate);
- const utilizationRate = bigscreendata.value.locationUtilizationRate || 86.2;
+ const utilizationRate = bigscreendata.value.locationUtilizationRate || 0;
const freeRate = 100 - utilizationRate;
const option = {
@@ -485,13 +568,13 @@
return exceptionTrendChart;
};
-// 鍒锋柊鎵�鏈夊浘琛紙绉婚櫎鏃犳晥闆疯揪鍥鹃�昏緫锛�
+// 鍒锋柊鎵�鏈夊浘琛�
const refreshCharts = () => {
const charts = [
initInventoryPie,
initStockTrend,
initLocationRate,
- initExceptionTrend
+ initExceptionTrend,
];
charts.forEach(initFunc => {
@@ -520,15 +603,44 @@
// 缁勪欢鎸傝浇鏃讹細鍏堣姹傛暟鎹紝鍐嶅垵濮嬪寲鍥捐〃
onMounted(() => {
+ console.log('缁勪欢宸叉寕杞斤紝寮�濮嬪垵濮嬪寲');
+
// 鍏堣幏鍙栧悗绔暟鎹�
- fetchBigGreenData();
- // 鍒濆鍖栧浘琛紙纭繚DOM宸叉覆鏌擄級
- nextTick(() => {
- initInventoryPie();
- initStockTrend();
- initLocationRate();
- initExceptionTrend();
- window.addEventListener('resize', handleResize);
+ fetchBigGreenData().then(() => {
+ console.log('鏁版嵁鑾峰彇鎴愬姛锛屽紑濮嬪垵濮嬪寲鍥捐〃');
+
+ // 鏁版嵁鑾峰彇鎴愬姛鍚庡啀鍒濆鍖栧浘琛�
+ nextTick(() => {
+ console.log('DOM宸叉洿鏂帮紝寮�濮嬪垵濮嬪寲鍥捐〃');
+
+ try {
+ // 绔嬪嵆鍒濆鍖栧浘琛�
+ initInventoryPie();
+ console.log('搴撳瓨鍒嗗竷楗煎浘鍒濆鍖栧畬鎴�');
+
+ // 鐗瑰埆澶勭悊鍑哄叆搴撹秼鍔垮浘
+ if (stockTrendRef.value) {
+ console.log('鍑哄叆搴撹秼鍔垮浘瀹瑰櫒瀛樺湪锛屽紑濮嬪垵濮嬪寲');
+ initStockTrend();
+ console.log('鍑哄叆搴撹秼鍔垮浘鍒濆鍖栧畬鎴�');
+ } else {
+ console.error('鍑哄叆搴撹秼鍔垮浘瀹瑰櫒涓嶅瓨鍦�');
+ }
+
+ initLocationRate();
+ console.log('搴撲綅鍒╃敤鐜囧浘鍒濆鍖栧畬鎴�');
+
+ initExceptionTrend();
+ console.log('寮傚父瓒嬪娍鍥惧垵濮嬪寲瀹屾垚');
+
+ window.addEventListener('resize', handleResize);
+ console.log('鎵�鏈夊浘琛ㄥ垵濮嬪寲瀹屾垚');
+ } catch (error) {
+ console.error('鍥捐〃鍒濆鍖栬繃绋嬩腑鍑洪敊:', error);
+ }
+ });
+ }).catch(error => {
+ console.error('鑾峰彇鏁版嵁澶辫触:', error);
});
});
@@ -546,17 +658,18 @@
chart.dispose();
}
});
-
+ clearInterval(taskCarouselTimer); // 娓呴櫎杞挱瀹氭椂鍣�
window.removeEventListener('resize', handleResize);
});
</script>
<style scoped>
.wms-dashboard {
- padding: 20px;
- background: #f5f7fa;
+ padding: 24px;
+ background: linear-gradient(135deg, #f0f2f5 0%, #e6e9f0 100%);
min-height: 100vh;
box-sizing: border-box;
+ font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.header {
@@ -576,81 +689,411 @@
margin-bottom: 20px;
}
+/* 鏍稿績淇敼锛氳ˉ鍏卍iv鐗坈ard鐨勫熀纭�鏍峰紡锛屾ā鎷焑l-card鐨勮瑙夋晥鏋� */
+.stats-card, .chart-card, .table-card {
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
+ border: 1px solid #ebeef5;
+}
+
.stats-card {
- height: 120px;
+ height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
- padding: 0 20px;
+ align-items: center;
+ padding: 20px 15px;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ overflow: hidden;
+ background: linear-gradient(145deg, #ffffff 0%, #f9fafc 100%);
+}
+
+
+.stats-card:hover {
+ transform: translateY(-6px) scale(1.02);
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+ border-color: #409eff;
+ background: linear-gradient(145deg, #ffffff 0%, #f0f2f5 100%);
+}
+
+.metric-icon {
+ width: 56px;
+ height: 56px;
+ border-radius: 16px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ margin-bottom: 12px;
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
}
-.stats-card:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
.card-title {
- font-size: 14px;
- color: #666;
- margin-bottom: 8px;
+ font-size: 15px;
+ color: #606266;
+ margin-bottom: 10px;
+ font-weight: 500;
+ letter-spacing: 0.5px;
}
.card-value {
- font-size: 28px;
- font-weight: bold;
+ 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: #333;
+ color: #2c3e50;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+ line-height: 1.2;
}
.card-change {
- margin-top: 8px;
+ margin-top: 3px;
}
.chart-card {
- height: 350px;
- padding: 15px;
+ height: 400px;
+ padding: 24px;
display: flex;
flex-direction: column;
+ background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
+ border: none;
+ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
+ border-radius: 12px;
+ transition: all 0.3s ease;
+ overflow: hidden;
+ position: relative;
+ min-height: 400px;
+}
+
+.chart-card:hover {
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+ transform: translateY(-2px);
}
.chart-container {
width: 100%;
height: 100%;
- min-height: 240px;
+ min-height: 300px;
flex: 1;
+ position: relative;
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.9);
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
+ overflow: hidden;
+ z-index: 1;
+ display: block;
}
+
.chart-title,
.table-title {
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 15px;
- font-size: 16px;
- font-weight: bold;
- color: #333;
+ margin-bottom: 24px;
+ font-size: 18px;
+ font-weight: 600;
+ color: #2c3e50;
+ padding-left: 12px;
+ border-left: 4px solid #409eff;
+ position: relative;
+ letter-spacing: 0.5px;
}
+
.view-btn {
font-size: 12px;
}
+.table-card {
+ padding: 24px;
+ background: #fff;
+ border-radius: 12px;
+ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
+ border: 1px solid rgba(0, 0, 0, 0.04);
+ overflow: hidden;
+ transition: all 0.3s ease;
+}
+
+.table-card:hover {
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+ transform: translateY(-2px);
+}
+
.table-pagination {
display: flex;
- justify-content: space-between;
+ justify-content: flex-end;
align-items: center;
- margin-top: 15px;
+ margin-top: 20px;
+ padding-top: 15px;
+ 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) {
+ 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) {
+ 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) {
+ 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 {
+ display: inline-block;
+ padding: 6px 12px;
+ border-radius: 20px;
+ font-size: 13px;
+ font-weight: 500;
+ text-align: center;
+ min-width: 80px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+ transition: all 0.2s ease;
+ 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-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;
}
-/* 纭繚鍥捐〃瀹瑰櫒鏈夋槑纭昂瀵� */
-:deep(.el-card__body) {
- height: 100%;
- display: flex;
- flex-direction: column;
-}
+/* 绉婚櫎鍘熸湁鐨別l-card__body鏍峰紡绌块�忥紝鍥犱负宸茬粡鏇挎崲涓虹函div */
</style>
\ No newline at end of file
--
Gitblit v1.9.3