| | |
| | | <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为divï¼ä¿çchart-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> |
| | |
| | | <!-- è¡¨æ ¼åºå - ç»å®å端ä½ä¸æ°æ® --> |
| | | <el-row :gutter="20" class="table-row" width="100%"> |
| | | <el-col :span="24"> |
| | | <!-- æ¿æ¢el-card为divï¼ä¿çtable-cardç±»å --> |
| | | <div class="table-card"> |
| | | <div class="table-title">宿¶ä½ä¸çæ§</div> |
| | | <el-table :data="showTaskList" border style="width: 100%;"> |
| | |
| | | </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'); |
| | |
| | | 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: "æ°å»º", |
| | |
| | | 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 "å
¶ä»ä½ä¸"; |
| | | }; |
| | | |
| | | // è·åä»»å¡ç¶ææ ·å¼ç±» |
| | |
| | | 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"; |
| | | }; |
| | |
| | | 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); |
| | | } |
| | | }; |
| | | |
| | |
| | | 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 |
| | | : [ |
| | |
| | | return inventoryPieChart; |
| | | }; |
| | | |
| | | // åå§åè¿7æ¥åºå
¥åºè¶å¿å¾ï¼å
³èåç«¯æ°æ®ï¼ |
| | | // åå§åè¿7æ¥åºå
¥åºè¶å¿å¾ |
| | | const initStockTrend = () => { |
| | | if (!stockTrendRef.value) return; |
| | | |
| | |
| | | } |
| | | |
| | | 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: { |
| | |
| | | type: 'value', |
| | | name: 'æ°é', |
| | | min: 0, |
| | | // æ ¹æ®æ°æ®å¨æè®¾ç½®æå¤§å¼ï¼çåºä¸äºç©ºé´ |
| | | max: maxValue > 0 ? Math.ceil(maxValue * 1.2) : 10 |
| | | }, |
| | | series: [ |
| | |
| | | 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; |
| | | |
| | |
| | | return locationRateChart; |
| | | }; |
| | | |
| | | // åå§åå¼å¸¸ç±»åç»è®¡è¶å¿å¾ï¼å
³èåç«¯æ°æ®ï¼ |
| | | // åå§åå¼å¸¸ç±»åç»è®¡è¶å¿å¾ |
| | | const initExceptionTrend = () => { |
| | | if (!exceptionTrendRef.value) return; |
| | | |
| | |
| | | } |
| | | |
| | | exceptionTrendChart = echarts.init(exceptionTrendRef.value); |
| | | // ä¼å
使ç¨åç«¯æ°æ® |
| | | const exceptionData = bigscreendata.value.exceptionTypeTrend.length |
| | | ? bigscreendata.value.exceptionTypeTrend |
| | | : { |
| | |
| | | return exceptionTrendChart; |
| | | }; |
| | | |
| | | // å·æ°ææå¾è¡¨ï¼ç§»é¤æ æé·è¾¾å¾é»è¾ï¼ |
| | | // å·æ°ææå¾è¡¨ |
| | | const refreshCharts = () => { |
| | | const charts = [ |
| | | initStockTrend, |
| | | initLocationRate, |
| | | initLocationRate |
| | | ]; |
| | | |
| | | charts.forEach(initFunc => { |
| | |
| | | }); |
| | | }; |
| | | |
| | | // ç»ä»¶æè½½æ¶ï¼å
è¯·æ±æ°æ®ï¼ååå§åå¾è¡¨ |
| | | // ç»ä»¶æè½½æ¶ |
| | | onMounted(() => { |
| | | // å
è·ååç«¯æ°æ® |
| | | fetchBigGreenData(); |
| | |
| | | }); |
| | | }); |
| | | |
| | | // ç»ä»¶å¸è½½æ¶ï¼éæ¯å¾è¡¨å®ä¾ï¼ç§»é¤äºä»¶çå¬ |
| | | // ç»ä»¶å¸è½½æ¶ |
| | | onUnmounted(() => { |
| | | const charts = [ |
| | | inventoryPieChart, |
| | |
| | | chart.dispose(); |
| | | } |
| | | }); |
| | | clearInterval(taskCarouselTimer); // æ¸
é¤è½®æå®æ¶å¨ |
| | | clearInterval(taskCarouselTimer); |
| | | window.removeEventListener('resize', handleResize); |
| | | }); |
| | | </script> |
| | |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | /* æ ¸å¿ä¿®æ¹ï¼è¡¥å
divçcardçåºç¡æ ·å¼ï¼æ¨¡æel-cardçè§è§ææ */ |
| | | /* æ ¸å¿æ ·å¼ï¼å¡çåºç¡æ ·å¼ */ |
| | | .stats-card, .chart-card, .table-card { |
| | | background: #fff; |
| | | border-radius: 8px; |
| | |
| | | overflow: hidden; |
| | | background: linear-gradient(145deg, #ffffff 0%, #f9fafc 100%); |
| | | } |
| | | |
| | | |
| | | .stats-card:hover { |
| | | transform: translateY(-6px) scale(1.02); |
| | |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | |
| | | .card-title { |
| | | font-size: 15px; |
| | | color: #606266; |
| | |
| | | } |
| | | |
| | | .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 { |
| | |
| | | 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 { |
| | |
| | | position: relative; |
| | | letter-spacing: 0.5px; |
| | | } |
| | | |
| | | |
| | | .view-btn { |
| | | font-size: 12px; |
| | |
| | | animation: pulse 2.8s infinite; |
| | | } |
| | | |
| | | |
| | | .btn-group { |
| | | margin-left: 10px; |
| | | } |
| | | |
| | | /* ç§»é¤åæçel-card__bodyæ ·å¼ç©¿éï¼å ä¸ºå·²ç»æ¿æ¢ä¸ºçº¯div */ |
| | | </style> |