| | |
| | | }); |
| | | tableData.value = formattedTasks |
| | | }; |
| | | // 模拟数据 |
| | | // const generateMockData = () => { |
| | | // const mockList = [ |
| | | // { |
| | | // glassId: 'GL251209001', |
| | | // width: 520, |
| | | // height: 310, |
| | | // thickness: 10, |
| | | // filmsid: '钢化玻璃', |
| | | // line: 1, |
| | | // state: 2, // 未磨边 |
| | | // createTime: Date.now() - 3600 * 1000 * 2, // 2小时前的时间戳 |
| | | // formattedCreateTime: formatTimestamp(Date.now() - 3600 * 1000 * 2) |
| | | // }, |
| | | // { |
| | | // glassId: 'GL251209002', |
| | | // width: 600, |
| | | // height: 380, |
| | | // thickness: 12, |
| | | // filmsid: '浮法玻璃', |
| | | // line: 2, |
| | | // state: 1, // 磨边中 |
| | | // createTime: Date.now() - 3600 * 1000 * 1, // 1小时前的时间戳 |
| | | // formattedCreateTime: formatTimestamp(Date.now() - 3600 * 1000 * 1) |
| | | // }, |
| | | // { |
| | | // glassId: 'GL251209003', |
| | | // width: 480, |
| | | // height: 290, |
| | | // thickness: 8, |
| | | // filmsid: '夹胶玻璃', |
| | | // line: 1, |
| | | // state: 1, // 已磨边 |
| | | // createTime: Date.now() - 3600 * 1000 * 6, // 6小时前的时间戳 |
| | | // formattedCreateTime: formatTimestamp(Date.now() - 3600 * 1000 * 6) |
| | | // }, |
| | | // { |
| | | // glassId: 'GL251209004', |
| | | // width: 550, |
| | | // height: 330, |
| | | // thickness: 9, |
| | | // filmsid: '中空玻璃', |
| | | // line: 2, |
| | | // state: 0, |
| | | // createTime: Date.now() - 3600 * 1000 * 3, |
| | | // formattedCreateTime: formatTimestamp(Date.now() - 3600 * 1000 * 3) |
| | | // }, |
| | | // { |
| | | // glassId: 'GL251209005', |
| | | // width: 580, |
| | | // height: 350, |
| | | // thickness: 11, |
| | | // filmsid: '防弹玻璃', |
| | | // line: '1', |
| | | // state: 0, |
| | | // createTime: Date.now() - 3600 * 1000 * 4, |
| | | // formattedCreateTime: formatTimestamp(Date.now() - 3600 * 1000 * 4) |
| | | // } |
| | | |
| | | // ]; |
| | | // return mockList; |
| | | // }; |
| | | // tableData.value = generateMockData(); |
| | | // ElMessage.success('模拟数据加载成功!'); |
| | | // 历史任务 |
| | | const iframeUrl = ref(''); |
| | | const handlehistorical = (row) => { |
| | |
| | | closeWebSocket(socket); |
| | | } |
| | | }); |
| | | function getStatusTypeb(state) { |
| | | switch (state) { |
| | | case 0: |
| | | return 'info'; |
| | | case 1: |
| | | return 'success'; |
| | | case 1: |
| | | return 'danger'; |
| | | // function getStatusTypeb(state) { |
| | | // switch (state) { |
| | | // case 0: |
| | | // return 'info'; |
| | | // case 1: |
| | | // return 'success'; |
| | | // case 1: |
| | | // return 'danger'; |
| | | // } |
| | | // } |
| | | // 1. 辅助:获取行真实索引 |
| | | function getRowRealIndex(row) { |
| | | return tableData.value.findIndex(item => item.glassId === row.glassId); |
| | | } |
| | | |
| | | // 2. 辅助:获取指定线路最新行状态 |
| | | function getLineLatestState(line) { |
| | | const targetLine = String(line || '').trim(); |
| | | if (!targetLine) return -1; |
| | | for (const row of tableData.value) { |
| | | const rowLine = String(row.line || '').trim(); |
| | | if (rowLine === targetLine) { |
| | | return Number(row.state); |
| | | } |
| | | } |
| | | return -1; |
| | | } |
| | | |
| | | // 3. 核心判断:是否需要高亮/标红 |
| | | function isNeedHighlight(row) { |
| | | const currentState = Number(row.state); |
| | | const currentLine = String(row.line || '').trim(); |
| | | if (!currentLine) return false; |
| | | |
| | | // 原有逻辑:未磨边 + 前序有磨边中/已磨边 |
| | | if (currentState === 0) { |
| | | const currentIndex = getRowRealIndex(row); |
| | | if (currentIndex === -1) return false; |
| | | for (let i = 0; i < currentIndex; i++) { |
| | | const compareRow = tableData.value[i]; |
| | | const compareLine = String(compareRow?.line || '').trim(); |
| | | const compareState = Number(compareRow?.state); |
| | | if (compareLine === currentLine && [1, 2].includes(compareState)) { |
| | | return true; |
| | | } |
| | | } |
| | | } |
| | | |
| | | // 新增逻辑:磨边中 + 同线路最新是已磨边 |
| | | if (currentState === 1) { |
| | | const latestState = getLineLatestState(currentLine); |
| | | if (latestState === 2) { |
| | | return true; |
| | | } |
| | | } |
| | | |
| | | return false; |
| | | } |
| | | |
| | | // 4. 原始颜色映射 |
| | | function getOriginalColor(state) { |
| | | const stateNum = Number(state); |
| | | switch (stateNum) { |
| | | case 0: return 'info'; |
| | | case 1: return 'success'; |
| | | case 2: return 'primary'; |
| | | default: return 'info'; |
| | | } |
| | | } |
| | | |
| | | // 5. 标签类型函数(调用isNeedHighlight) |
| | | function getStatusTypeb(row) { |
| | | const currentState = Number(row.state); |
| | | if ([0, 1].includes(currentState) && isNeedHighlight(row)) { |
| | | return 'danger'; |
| | | } |
| | | return getOriginalColor(row.state); |
| | | } |
| | | |
| | | // 6. 行样式函数(调用isNeedHighlight) |
| | | function getTableRowClass({ row }) { |
| | | const currentState = Number(row.state); |
| | | if ([0, 1].includes(currentState) && isNeedHighlight(row)) { |
| | | return 'leak-edge-highlight'; |
| | | } |
| | | return ''; |
| | | } |
| | | |
| | | function getStatusTextb(state) { |
| | | switch (state) { |
| | | case 0: |
| | |
| | | <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;"> |
| | | <el-table height="750" ref="table" |
| | | @selection-change="handleSelectionChange" |
| | | :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> |
| | | :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}" |
| | | :row-class-name="getTableRowClass" |
| | | > |
| | | <el-table-column prop="glassId" align="center" :label="$t('workOrder.glassID')" min-width="180" /> |
| | | <el-table-column prop="width" align="center" :label="$t('workOrder.width')" min-width="120" /> |
| | | <el-table-column prop="height" align="center" :label="$t('workOrder.height')" min-width="80" /> |
| | |
| | | <!-- <template #default="scope"> |
| | | {{ scope.row.status==0?"未磨边":scope.row.status==1?"磨边中":"已磨边" }} |
| | | </template> --> |
| | | <template #default="scope"> |
| | | <el-tag :type="getStatusTypeb(scope.row.state)"> |
| | | <template #default="scope"> |
| | | <el-tag :type="getStatusTypeb(scope.row || {}, scope.index)"> |
| | | {{ getStatusTextb(scope.row.state) }} |
| | | </el-tag> |
| | | </el-tag> |
| | | <!-- <el-tag :type="getStatusTypeb(scope.row.state)"> |
| | | {{ getStatusTextb(scope.row.state) }} |
| | | </el-tag> --> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column fixed="right" :label="$t('workOrder.operate')" align="center" width="200"> |
| | |
| | | height: 460px; |
| | | /* margin-top: -60px; */ |
| | | } |
| | | /* 漏磨边行整行高亮样式(穿透scoped) */ |
| | | :deep(.leak-edge-highlight) { |
| | | background-color: #fff1f0 !important; /* 浅红背景(和danger标签呼应) */ |
| | | } |
| | | /* 行内单元格文字标红 */ |
| | | :deep(.leak-edge-highlight > td) { |
| | | color: #f5222d !important; /* 红色文字 */ |
| | | font-weight: 500 !important; /* 可选:文字加粗,更醒目 */ |
| | | } |
| | | /* 鼠标悬浮时保持高亮(可选) */ |
| | | :deep(.el-table__row.leak-edge-highlight:hover > td) { |
| | | background-color: #fee2e2 !important; |
| | | } |
| | | </style> |