| | |
| | | <el-col :span="4"> |
| | | <div class="stats-card"> |
| | | <div class="metric-icon"> |
| | | <el-icon :size="32"> |
| | | <Box /> |
| | | </el-icon> |
| | | <el-icon :size="32"><Box /></el-icon> |
| | | </div> |
| | | <div class="card-title">å¾
å
¥åºè®¢å</div> |
| | | <div class="card-value">{{ bigscreendata.unInBoundOrderCount }}</div> |
| | |
| | | <el-col :span="4"> |
| | | <div class="stats-card"> |
| | | <div class="metric-icon"> |
| | | <el-icon :size="32"> |
| | | <Document /> |
| | | </el-icon> |
| | | <el-icon :size="32"><Document /></el-icon> |
| | | </div> |
| | | <div class="card-title">å¾
åºåºè®¢å</div> |
| | | <div class="card-value">{{ bigscreendata.unOutBoundOrderCount }}</div> |
| | |
| | | <el-col :span="4"> |
| | | <div class="stats-card"> |
| | | <div class="metric-icon"> |
| | | <el-icon :size="32"> |
| | | <Download /> |
| | | </el-icon> |
| | | <el-icon :size="32"><Download /></el-icon> |
| | | </div> |
| | | <div class="card-title">仿¥å
¥åºå®æç®±æ°</div> |
| | | <div class="card-value">{{ bigscreendata.inboundCount }}</div> |
| | |
| | | <el-col :span="4"> |
| | | <div class="stats-card"> |
| | | <div class="metric-icon"> |
| | | <el-icon :size="32"> |
| | | <Upload /> |
| | | </el-icon> |
| | | <el-icon :size="32"><Upload /></el-icon> |
| | | </div> |
| | | <div class="card-title">仿¥åºåºå®æç®±æ°</div> |
| | | <div class="card-value">{{ bigscreendata.outboundCount }}</div> |
| | |
| | | <el-col :span="4"> |
| | | <div class="stats-card"> |
| | | <div class="metric-icon"> |
| | | <el-icon :size="32"> |
| | | <Box /> |
| | | </el-icon> |
| | | <el-icon :size="32"><Box /></el-icon> |
| | | </div> |
| | | <div class="card-title">æè´§æç®±</div> |
| | | <div class="card-value">{{ formatNumber(bigscreendata.inStockPallet) }}</div> |
| | |
| | | <el-col :span="4"> |
| | | <div class="stats-card"> |
| | | <div class="metric-icon"> |
| | | <el-icon :size="32"> |
| | | <Box /> |
| | | </el-icon> |
| | | <el-icon :size="32"><Box /></el-icon> |
| | | </div> |
| | | <div class="card-title">空箱æ°é</div> |
| | | <div class="card-value">{{ formatNumber(bigscreendata.freeStockPallet) }}</div> |
| | |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div class="chart-card"> |
| | | <div class="chart-title">è¿7æ¥åºå
¥åºåæ®è¶å¿ï¼å¾ååèµ°å¿ï¼</div> |
| | | <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-col :span="12"> |
| | | <div class="table-card"> |
| | | <div class="table-title">宿¶ä½ä¸çæ§</div> |
| | | <div class="table-title">宿¶ä½ä¸çæ§ï¼æ£å¸¸åæ®ï¼</div> |
| | | <el-table |
| | | :data="showTaskList" |
| | | :data="normalShowTaskList" |
| | | border |
| | | style="width: 100%;" |
| | | :empty-text="showTaskList.length === 0 ? 'ææ ä½ä¸æ°æ®' : ''" |
| | | :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) }} |
| | | {{ getTaskStatusText(row.taskStatus, row.taskType) }} |
| | | </span> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | <el-table-column prop="modifyDate" label="ä¿®æ¹æ¶é´"/> |
| | | </el-table> |
| | | <div class="table-pagination"> |
| | | <el-pagination layout="prev, pager, next, jumper" :current-page="1" :total="mergedTaskList.length" /> |
| | | <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> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, onMounted, onUnmounted, nextTick, computed } 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'; |
| | | |
| | | // ååºå¼æ°æ® - æ°å¢ completeTask åæ®µ |
| | | // ååºå¼æ°æ® |
| | | const bigscreendata = ref({ |
| | | totalStockQuantity: 0, |
| | | unOutBoundOrderCount: 0, |
| | |
| | | inStockPallet: 0, |
| | | freeStockPallet: 0, |
| | | dailyInOutBoundList: [], |
| | | completeTask: [], // æ°å¢ï¼å端è¿åçåµå¥ä»»å¡æ°æ® |
| | | completeTask: [], // å端è¿åç任塿°æ®ï¼å½å¤©æ£å¸¸+è¿3å¤©å¤±è´¥ï¼ |
| | | inboundCount: 0, |
| | | outboundCount: 0, |
| | | inventoryLocationDist: [], |
| | |
| | | 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 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天以ä¸'; |
| | | } |
| | | 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, |
| | |
| | | }); |
| | | }); |
| | | |
| | | // ç©ºæ°æ®æç¤ºææ¬ï¼ä¿æä¸åï¼ |
| | | const emptyText = computed(() => { |
| | | const expirationList = bigscreendata.value.nearExpirationList || []; |
| | | return expirationList.length === 0 ? 'ææ ä¸´æç©ææ°æ®' : ''; |
| | | }); |
| | | |
| | | // è·å临æççº§æ ·å¼ç±»ï¼ä¿æä¸åï¼ |
| | | const getExpireLevelClass = (level) => { |
| | | switch(level) { |
| | | case 'å·²è¿æ': return 'expire-level expired'; |
| | |
| | | } |
| | | }; |
| | | |
| | | // æ ¸å¿ï¼å
¥åº/åºåºä¸å¡ç±»åæä¸¾æ å° |
| | | // ä¸å¡ç±»åæ å° |
| | | const inboundBusinessTypeMap = { |
| | | 11: "éè´å
¥åº", |
| | | 12: "ææ¶å", |
| | | 13: "ç产éæå", |
| | | 14: "å¤åéæå", |
| | | 15: "éå®éåºå", |
| | | 3: "è°æ¨å
¥åºå" |
| | | 11: "éè´å
¥åº", 12: "ææ¶å", 13: "ç产éæå", |
| | | 14: "å¤åéæå", 15: "éå®éåºå", 3: "è°æ¨å
¥åºå" |
| | | }; |
| | | |
| | | const outboundBusinessTypeMap = { |
| | | 21: "å·¥å颿åºåºå", |
| | | 22: "æåå", |
| | | 23: "éè´§å", |
| | | 24: "éå®åºåºå", |
| | | 25: "å¤å颿ç³è¯·å", |
| | | 2: "è°æ¨åºåºå", |
| | | 21: "å·¥å颿åºåºå", 22: "æåå", 23: "éè´§å", |
| | | 24: "éå®åºåºå", 25: "å¤å颿ç³è¯·å", 2: "è°æ¨åºåºå" |
| | | }; |
| | | |
| | | // æ ¸å¿ä¿®æ¹ï¼ä» completeTask 䏿åè®¢åæ°æ® |
| | | const mergedTaskList = computed(() => { |
| | | // 1. è·å completeTask æ°ç»ï¼å¤çç©ºå¼ |
| | | const completeTaskList = bigscreendata.value.completeTask || []; |
| | | // 2. å第ä¸ä¸ªå
ç´ ï¼å端è¿åæ°ç»é¿åº¦ä¸º1ï¼ |
| | | const taskData = completeTaskList[0] || {}; |
| | | // 3. æåå
¥åº/åºåºè®¢åï¼å¤çç©ºå¼ |
| | | // æåï¼å½å¤©æ£å¸¸ä½ä¸åæ® |
| | | const normalTaskList = computed(() => { |
| | | const taskData = (bigscreendata.value.completeTask[0] || {}); |
| | | const inboundOrders = taskData.inboundOrders || []; |
| | | const outboundOrders = taskData.outboundOrders || []; |
| | | |
| | | console.log('ä»completeTaskæåçå
¥åºè®¢åï¼', inboundOrders); |
| | | console.log('ä»completeTaskæåçåºåºè®¢åï¼', outboundOrders); |
| | | |
| | | |
| | | // æ ¼å¼åå
¥åºè®¢å |
| | | const formattedInbound = inboundOrders.map(item => ({ |
| | | upperOrderNo: item.upperOrderNo || item.inboundOrderNo, |
| | |
| | | taskType: 'inbound', |
| | | businessType: item.businessType || '', |
| | | returnToMESStatus: item.returnToMESStatus || 0, |
| | | factoryArea: item.factoryArea, |
| | | modifier: item.modifier, |
| | | createDate: item.createDate, |
| | | modifyDate: item.modifyDate |
| | | 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, |
| | |
| | | taskType: 'outbound', |
| | | businessType: item.businessType || '', |
| | | returnToMESStatus: item.returnToMESStatus || 0, |
| | | factoryArea: item.factoryArea, |
| | | modifier: item.modifier, |
| | | createDate: item.createDate, |
| | | modifyDate: item.modifyDate |
| | | factoryArea: item.factoryArea || '', |
| | | modifier: item.modifier || '', |
| | | createDate: item.createDate || '', |
| | | modifyDate: item.modifyDate || '', |
| | | remark: item.remark || '' |
| | | })); |
| | | |
| | | const merged = [...formattedInbound, ...formattedOutbound]; |
| | | console.log('æç»åå¹¶çä½ä¸å表ï¼', merged); |
| | | return merged; |
| | | |
| | | return [...formattedInbound, ...formattedOutbound]; |
| | | }); |
| | | |
| | | // 订åç¶ææ å° |
| | | const orderStatusMap = { |
| | | 0: "æªå¼å§", |
| | | }; |
| | | // æåï¼è¿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 getTaskStatusText = (statusNum) => { |
| | | if (statusNum === 1) { |
| | | if (statusNum.taskType === 'inbound') { |
| | | return "å
¥åºä¸"; |
| | | } else if (statusNum.taskType === 'outbound') { |
| | | return "åºåºä¸"; |
| | | } else { |
| | | return "å¤çä¸"; |
| | | } |
| | | } |
| | | return orderStatusMap[statusNum]; |
| | | // å页&è½®æç¸å
³ååºå¼åé |
| | | 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: "é¨ååä¼ å¤±è´¥", |
| | | 0: "æªåä¼ ", 1: "åä¼ æå", 2: "åä¼ å¤±è´¥", |
| | | 3: "é¨ååä¼ æå", 4: "é¨ååä¼ å¤±è´¥" |
| | | }; |
| | | |
| | | // è·åMESåä¼ ç¶æææ¬ |
| | | const getMESStatusText = (statusNum) => { |
| | | if (statusNum === undefined || statusNum === null || isNaN(statusNum)) { |
| | | return "æªç¥ç¶æ"; |
| | | } |
| | | if (statusNum === undefined || statusNum === null || isNaN(statusNum)) return "æªç¥ç¶æ"; |
| | | return mesStatusMap[statusNum] || `æªç¥ç¶æ(${statusNum})`; |
| | | }; |
| | | |
| | | // è·åMESåä¼ ç¶ææ ·å¼ç±» |
| | | const getMESStatusClass = (statusNum) => { |
| | | if (statusNum === undefined || statusNum === null || isNaN(statusNum)) { |
| | | return "status-unknown"; |
| | | } |
| | | if (statusNum === 0) return "status-pending"; |
| | | if (statusNum === 1) return "status-completed"; |
| | | if (statusNum === 2) return "status-error"; |
| | | if (statusNum === 3) return "status-processing"; |
| | | if (statusNum === 4) return "status-error"; |
| | | return "status-unknown"; |
| | | 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') { |
| | | const typeName = inboundBusinessTypeMap[businessType] || `æªç¥ç±»å(${businessType})`; |
| | | return `${typeName}`; |
| | | return inboundBusinessTypeMap[businessType] || `æªç¥ç±»å(${businessType})`; |
| | | } else if (row.taskType === 'outbound') { |
| | | const typeName = outboundBusinessTypeMap[businessType] || `æªç¥ç±»å(${businessType})`; |
| | | return `${typeName}`; |
| | | } else { |
| | | return "å
¶ä»ä½ä¸"; |
| | | return outboundBusinessTypeMap[businessType] || `æªç¥ç±»å(${businessType})`; |
| | | } |
| | | return "å
¶ä»ä½ä¸"; |
| | | }; |
| | | |
| | | // è·åä»»å¡ç¶ææ ·å¼ç±» |
| | | const getStatusClass = (statusNum) => { |
| | | if (statusNum === undefined || statusNum === null || isNaN(statusNum)) { |
| | | return "status-unknown"; |
| | | } |
| | | if (statusNum === 3) return "status-completed"; |
| | | if (statusNum === 2) return "status-processing"; |
| | | if (statusNum === 0) return "status-pending"; |
| | | if (statusNum === 4) return "status-canceled"; |
| | | if (statusNum === 5) return "status-error"; |
| | | if (statusNum === 1) return "status-completed"; |
| | | return "status-unknown"; |
| | | 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) => { |
| | | if (taskType === 'inbound') return "type-inbound"; |
| | | if (taskType === 'outbound') return "type-outbound"; |
| | | return "type-other"; |
| | | const classMap = { 'inbound': "type-inbound", 'outbound': "type-outbound" }; |
| | | return classMap[taskType] || "type-other"; |
| | | }; |
| | | |
| | | // è¡¨æ ¼æ¾ç¤ºçä»»å¡å表ï¼è½®æç¨ï¼ |
| | | const showTaskList = ref([]); |
| | | const currentTaskIndex = ref(0); |
| | | let taskCarouselTimer = null; |
| | | |
| | | // æ°åæ ¼å¼å |
| | | const formatNumber = (num) => { |
| | |
| | | return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); |
| | | }; |
| | | |
| | | // è½®æé»è¾ |
| | | const startTaskCarousel = () => { |
| | | if (taskCarouselTimer) clearInterval(taskCarouselTimer); |
| | | // åå§åè¡¨æ ¼æ°æ®ï¼å页+è½®æï¼ |
| | | const initTableData = () => { |
| | | // 忢æ§å®æ¶å¨ |
| | | clearInterval(normalCarouselTimer); |
| | | clearInterval(failCarouselTimer); |
| | | |
| | | const totalTask = mergedTaskList.value.length; |
| | | console.log('ä½ä¸åè¡¨æ»æ°ï¼', totalTask); |
| | | // æ£å¸¸åæ®å页/è½®æ |
| | | const loadNormalData = (page) => { |
| | | const start = (page - 1) * 5; |
| | | const end = start + 5; |
| | | normalShowTaskList.value = normalTaskList.value.slice(start, end); |
| | | }; |
| | | loadNormalData(normalCurrentPage.value); |
| | | |
| | | if (totalTask <= 5) { |
| | | showTaskList.value = [...mergedTaskList.value]; |
| | | } else { |
| | | showTaskList.value = mergedTaskList.value.slice(0, 5); |
| | | currentTaskIndex.value = 5; |
| | | // å¤±è´¥åæ®å页/è½®æ |
| | | 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); |
| | | } |
| | | |
| | | if (totalTask > 5) { |
| | | taskCarouselTimer = setInterval(() => { |
| | | showTaskList.value.shift(); |
| | | showTaskList.value.push(mergedTaskList.value[currentTaskIndex.value]); |
| | | currentTaskIndex.value++; |
| | | if (currentTaskIndex.value >= totalTask) { |
| | | currentTaskIndex.value = 0; |
| | | } |
| | | 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); |
| | | } |
| | | }; |
| | | |
| | | // å页忢äºä»¶ |
| | | 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 { |
| | | const res = await http.get('/api/BigScreen/GetBigGreenData'); |
| | | console.log('å端åå§æ°æ®ï¼', res.data); |
| | | |
| | | bigscreendata.value = res.data || res; |
| | | nextTick(() => { |
| | | startTaskCarousel(); |
| | | initTableData(); |
| | | refreshCharts(); |
| | | }); |
| | | } catch (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: 'å¼å¸¸' } |
| | | ]); |
| | | |
| | | // å¾è¡¨ç¸å
³æ¹æ³ï¼ä¿æä¸åï¼ |
| | | const inventoryPieRef = ref(null); |
| | | // å¾è¡¨ç¸å
³ï¼ç²¾ç®åä½é»è¾ï¼ |
| | | const stockTrendRef = ref(null); |
| | | const locationRateRef = ref(null); |
| | | const exceptionTrendRef = ref(null); |
| | | |
| | | 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: '常温åºAåº', itemStyle: { color: '#5470c6' } }, |
| | | { value: 29.2, name: 'å·èåºBåº', itemStyle: { color: '#91cc75' } }, |
| | | { value: 21.9, name: 'ä¿ç¨åºCåº', 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; |
| | | }; |
| | | |
| | | const initStockTrend = () => { |
| | | if (!stockTrendRef.value) return; |
| | | if (stockTrendChart) { |
| | | stockTrendChart.dispose(); |
| | | } |
| | | if (stockTrendChart) stockTrendChart.dispose(); |
| | | stockTrendChart = echarts.init(stockTrendRef.value); |
| | | const trendData = bigscreendata.value.dailyInOutBoundList; |
| | | 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: 'æ°é', |
| | | min: 0, |
| | | max: maxValue > 0 ? Math.ceil(maxValue * 1.2) : 10 |
| | | }, |
| | | 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.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] |
| | | } |
| | | } |
| | | { 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); |
| | |
| | | |
| | | const initLocationRate = () => { |
| | | if (!locationRateRef.value) return; |
| | | if (locationRateChart) { |
| | | locationRateChart.dispose(); |
| | | } |
| | | if (locationRateChart) locationRateChart.dispose(); |
| | | locationRateChart = echarts.init(locationRateRef.value); |
| | | 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(); |
| | | 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> |
| | |
| | | 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; |
| | | } |
| | | |
| | |
| | | background-clip: text; |
| | | } |
| | | |
| | | .card-change { |
| | | margin-top: 3px; |
| | | } |
| | | |
| | | .chart-card { |
| | | height: 400px; |
| | | padding: 24px; |
| | |
| | | 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; |
| | | } |
| | | .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; |
| | | } |
| | | .text-red { color: #ff4d4f; font-weight: 500; } |
| | | |
| | | .chart-title, |
| | | .table-title { |
| | | .chart-title, .table-title { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | |
| | | border-left: 4px solid #409eff; |
| | | position: relative; |
| | | letter-spacing: 0.5px; |
| | | } |
| | | |
| | | .view-btn { |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .table-card { |
| | |
| | | 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; |
| | |
| | | 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-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; |
| | | } |
| | | |
| | | |
| | | |
| | | .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); |
| | | } |
| | | |
| | | .btn-group { |
| | | margin-left: 10px; |
| | | } |
| | | .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> |