| | |
| | | <view v-for="item in data" :key="item.id" class="inspection-card" |
| | | @click="navigateToDetail(item)"> |
| | | <view class="card-header"> |
| | | <text class="badge urgent" v-if="item.isTimeout">超时</text> |
| | | <view class="card-title">检验单号: {{ item.releaseNo }}</view> |
| | | <view :class="{'status-pending': current === 0, 'status-pass': current === 1 && item.fcheckResu === '合格', 'status-fail': current === 1 && item.fcheckResu === '不合格'}" |
| | | class="status"> |
| | |
| | | this.data = []; |
| | | this.init(); |
| | | }, |
| | | // 计算是否超时的方法 |
| | | checkIfTimeout(createDate) { |
| | | if (!createDate) return false; |
| | | |
| | | // 将 createDate 转换为 Date 对象 |
| | | let createTime = new Date(createDate); |
| | | let currentTime = new Date(); |
| | | |
| | | // 计算时间差(毫秒) |
| | | let timeDiff = currentTime.getTime() - createTime.getTime(); |
| | | |
| | | // 转换为小时 |
| | | let hoursDiff = timeDiff / (1000 * 60 * 60); |
| | | |
| | | // 如果大于1小时,返回true表示超时 |
| | | return hoursDiff > 1; |
| | | }, |
| | | |
| | | // 处理数据并添加超时标识 |
| | | processDataWithTimeoutCheck(dataList) { |
| | | return dataList.map(item => { |
| | | // 添加超时标识 |
| | | item.isTimeout = this.checkIfTimeout(item.createDate); |
| | | return item; |
| | | }); |
| | | }, |
| | | init() { |
| | | let result = "未完成"; |
| | | if (this.current === 1) { |
| | |
| | | searchValue: this.searchValue |
| | | } |
| | | }).then(res => { |
| | | // 处理数据并添加超时标识 |
| | | let processedData = this.processDataWithTimeoutCheck(res.data.tbBillList); |
| | | |
| | | if (this.pageIndex === 1) { |
| | | // 如果是第一页,直接覆盖原数据 |
| | | this.data = res.data.tbBillList; |
| | | this.data = processedData; |
| | | } else { |
| | | if (res.data.tbBillList.length > 0) { |
| | | if (processedData.length > 0) { |
| | | // 如果是下一页,追加新数据 |
| | | this.data = [...this.data, ...res.data.tbBillList]; |
| | | this.data = [...this.data, ...processedData]; |
| | | } |
| | | } |
| | | this.totalCount = res.totalCount; |
| | |
| | | color: #2c3e50; |
| | | } |
| | | |
| | | .badge { |
| | | font-size: 12px; |
| | | padding: 2px 6px; |
| | | border-radius: 10px; |
| | | margin-right: 8px; |
| | | } |
| | | |
| | | .badge.urgent { |
| | | background-color: #e74c3c; |
| | | color: white; |
| | | } |
| | | |
| | | .status { |
| | | font-size: 12px; |
| | | padding: 4px 8px; |
| | |
| | | transform: translateY(0); |
| | | } |
| | | |
| | | /* 刷新提示样式 */ |
| | | .tips { |
| | | color: #67c23a; |
| | | font-size: 14px; |
| | | line-height: 40px; |
| | | text-align: center; |
| | | background-color: #f0f9eb; |
| | | height: 0; |
| | | opacity: 0; |
| | | transform: translateY(-100%); |
| | | transition: all 0.3s; |
| | | } |
| | | |
| | | .tips-ani { |
| | | transform: translateY(0); |
| | | height: 40px; |
| | | opacity: 1; |
| | | } |
| | | |
| | | /* 响应式设计 */ |
| | | @media (min-width: 768px) { |
| | | .inspection-list { |
| | |
| | | .info-row { |
| | | flex-direction: row; |
| | | } |
| | | } |
| | | |
| | | /* 刷新提示样式 */ |
| | | .tips { |
| | | color: #67c23a; |
| | | font-size: 14px; |
| | | line-height: 40px; |
| | | text-align: center; |
| | | background-color: #f0f9eb; |
| | | height: 0; |
| | | opacity: 0; |
| | | transform: translateY(-100%); |
| | | transition: all 0.3s; |
| | | } |
| | | |
| | | .tips-ani { |
| | | transform: translateY(0); |
| | | height: 40px; |
| | | opacity: 1; |
| | | } |
| | | </style> |