1382 lines
31 KiB
Vue
1382 lines
31 KiB
Vue
<template>
|
||
<view class="query-page query-layout" :class="`theme-${themeMode}`">
|
||
<view class="query-header">
|
||
<view>
|
||
<text class="query-title">记录查询</text>
|
||
<text class="query-subtitle">快速定位扫码、整机、异常与维修记录</text>
|
||
</view>
|
||
<u-icon name="search" color="#2f6cf6" size="34" />
|
||
</view>
|
||
|
||
<view class="query-tabs">
|
||
<view v-for="item in queryTypes" :key="item.value" class="query-tab" :class="{ 'is-active': activeQueryType === item.value }" @tap="handleRecordTypeChange(item.value)">
|
||
<u-icon :name="item.icon" :color="activeQueryType === item.value ? '#ffffff' : '#9aa4b4'" size="28" />
|
||
<text>{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="query-search-row">
|
||
<view class="query-input-wrap">
|
||
<u-input v-model="keyword" :input-mode="pdaMode ? 'none' : 'text'" clearable prefix-icon="search" placeholder="请输入单号、商品编码或操作人" placeholder-style="color: #a0a7b5;" @focus="handleKeywordInputFocus" @confirm="handleSearch" />
|
||
</view>
|
||
<view class="camera-button" :class="{ 'is-scanning': isScanning }" @tap="scanKeyword">
|
||
<u-icon name="scan" color="#ffffff" size="32" />
|
||
</view>
|
||
<view class="query-button" @tap="handleSearch">查询</view>
|
||
</view>
|
||
|
||
<view class="advanced-trigger" @tap="showAdvanced = !showAdvanced">
|
||
<view class="advanced-title">
|
||
<u-icon name="list" color="#687386" size="28" />
|
||
<text>高级筛选</text>
|
||
<text class="advanced-state">{{ showAdvanced ? '收起' : '可选' }}</text>
|
||
</view>
|
||
<u-icon :name="showAdvanced ? 'arrow-up' : 'arrow-down'" color="#9aa4b4" size="24" />
|
||
</view>
|
||
|
||
<view v-if="showAdvanced" class="advanced-panel">
|
||
<view class="filter-select-row" @tap="showDatePicker = true">
|
||
<text class="filter-input-label">时间区间</text>
|
||
<text class="filter-select-value">{{ dateRangeLabel }}</text>
|
||
<u-icon name="arrow-right" color="#a0a7b5" size="24" />
|
||
</view>
|
||
<view class="filter-select-row" @tap="chooseProcess">
|
||
<text class="filter-input-label">工序</text>
|
||
<text class="filter-select-value">{{ processLabel }}</text>
|
||
<u-icon name="arrow-right" color="#a0a7b5" size="24" />
|
||
</view>
|
||
<view class="filter-select-row" :class="{ 'is-disabled': !activeProcess }" @tap="chooseStep">
|
||
<text class="filter-input-label">步骤</text>
|
||
<text class="filter-select-value">{{ stepLabel }}</text>
|
||
<u-icon name="arrow-right" color="#a0a7b5" size="24" />
|
||
</view>
|
||
<view class="filter-actions">
|
||
<text @tap="resetFilter">重置条件</text>
|
||
<text class="filter-confirm" @tap="handleSearch">确定筛选</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="result-header">
|
||
<text>{{ hasSearched ? `找到 ${recordTotal} 条结果` : '请输入条件后点击查询' }}</text>
|
||
<text>{{ currentTypeLabel }}</text>
|
||
</view>
|
||
<view v-if="hasSearched && recordLoading" class="query-loading">正在查询，请稍候…</view>
|
||
|
||
<view v-if="hasSearched && filteredRecords.length && !recordLoading" class="record-list">
|
||
<view v-for="item in filteredRecords" :key="item.id" class="record-card compact-record" @tap="showRecordDetail(item)" @click="showRecordDetail(item)">
|
||
<view class="record-top">
|
||
<view class="record-number">
|
||
<u-icon name="list" color="#44c653" size="28" />
|
||
<text class="record-main">{{ item.mainNo }}</text>
|
||
</view>
|
||
<view class="record-type-pill">{{ getRecordTypeLabel(item) }}</view>
|
||
</view>
|
||
<view class="record-detail-grid">
|
||
<view class="record-detail"><text>岗位：</text><text>{{ item.position }}</text></view>
|
||
<view class="record-detail"><text>步骤：</text><text>{{ item.process }} / {{ item.step }}</text></view>
|
||
<view class="record-detail"><text>状态：</text><text class="record-status" :class="item.statusClass">{{ item.statusLabel }}</text></view>
|
||
<view class="record-detail"><text>操作员：</text><text>{{ item.operator }}</text></view>
|
||
</view>
|
||
<view class="record-footer">
|
||
<text>{{ item.scanTime }}</text>
|
||
<u-icon name="arrow-right" color="#c1c7d0" size="24" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-empty v-else-if="hasSearched && !recordLoading" mode="data" text="暂无查询结果" />
|
||
|
||
<view v-if="detailVisible && selectedRecord" class="detail-mask" @tap="closeRecordDetail">
|
||
<view class="detail-sheet" @tap.stop>
|
||
<view class="sheet-handle"></view>
|
||
<view class="detail-sheet-header">
|
||
<text>录入数据明细</text>
|
||
<u-icon name="close" color="#7d8798" size="30" @tap="closeRecordDetail" />
|
||
</view>
|
||
<text class="sheet-main-no">{{ selectedRecord.mainNo }}</text>
|
||
<view class="sheet-detail-grid">
|
||
<view class="sheet-detail-item"><text>记录类型</text><text>{{ getRecordTypeLabel(selectedRecord) }}</text></view>
|
||
<view class="sheet-detail-item"><text>录入模式</text><text>{{ selectedRecord.modeLabel }}</text></view>
|
||
<view class="sheet-detail-item"><text>岗位</text><text>{{ selectedRecord.position }}</text></view>
|
||
<view class="sheet-detail-item"><text>工序 / 步骤</text><text>{{ selectedRecord.process }} / {{ selectedRecord.step }}</text></view>
|
||
<view class="sheet-detail-item"><text>商品编码</text><text>{{ selectedRecord.productCode || '-' }}</text></view>
|
||
<view class="sheet-detail-item"><text>数量</text><text>{{ selectedRecord.quantity || '-' }}</text></view>
|
||
<view class="sheet-detail-item"><text>操作人</text><text>{{ selectedRecord.operator }}</text></view>
|
||
<view class="sheet-detail-item"><text>扫码时间</text><text>{{ selectedRecord.scanTime }}</text></view>
|
||
</view>
|
||
<view class="sheet-remark"><text>备注</text><text>{{ selectedRecord.remark }}</text></view>
|
||
</view>
|
||
</view>
|
||
<u-calendar v-model="showDatePicker" mode="range" @change="handleDateChange" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// UTS 原生扫码插件仅在 App-Plus 真机/自定义基座中解析，Web 环境不加载。
|
||
// #ifdef APP-PLUS
|
||
import { openCodeScan } from '@/uni_modules/mas-code-scan'
|
||
// #endif
|
||
|
||
import { getScanRegionSetting } from '@/utils/scan-settings.js'
|
||
import { queryProduceRecords } from '@/api/produce/query.js'
|
||
import { getProcessOptions, getStepOptions } from '@/api/produce/data-entry.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
keyword: '',
|
||
orderNo: '',
|
||
userCode: '',
|
||
startDate: '',
|
||
endDate: '',
|
||
showDatePicker: false,
|
||
pdaMode: false,
|
||
activeQueryType: 'all',
|
||
showAdvanced: false,
|
||
isScanning: false,
|
||
hasSearched: false,
|
||
recordLoading: false,
|
||
recordTotal: 0,
|
||
recordPage: 1,
|
||
recordLimit: 20,
|
||
activeProcess: '',
|
||
activeStep: '',
|
||
detailVisible: false,
|
||
selectedRecord: null,
|
||
queryTypes: [
|
||
{ label: '全部', value: 'all', icon: 'search' },
|
||
{ label: '订单', value: 'scan', icon: 'scan' },
|
||
{ label: '整机', value: 'product', icon: 'grid-fill' },
|
||
{ label: '异常', value: 'exception', icon: 'warning-fill' },
|
||
{ label: '维修', value: 'repair', icon: 'wrench' }
|
||
],
|
||
processOptions: [],
|
||
stepOptions: [],
|
||
records: []
|
||
}
|
||
},
|
||
computed: {
|
||
filteredRecords() {
|
||
return this.records.filter((item) => {
|
||
const matchType = this.activeQueryType === 'all' || item.queryType === this.activeQueryType
|
||
const matchProcess = !this.activeProcess || item.processId === String(this.activeProcess) || item.process === this.processLabel
|
||
const matchStep = !this.activeStep || item.stepId === String(this.activeStep) || item.step === this.stepLabel
|
||
return matchType && matchProcess && matchStep
|
||
})
|
||
},
|
||
currentTypeLabel() {
|
||
const current = this.queryTypes.find((item) => item.value === this.activeQueryType)
|
||
return current ? current.label : '全部类型'
|
||
},
|
||
processLabel() {
|
||
return this.processOptions.find((item) => String(item.value) === String(this.activeProcess))?.label || '全部工序'
|
||
},
|
||
stepLabel() {
|
||
return this.stepOptions.find((item) => String(item.value) === String(this.activeStep))?.label || '全部步骤'
|
||
},
|
||
dateRangeLabel() {
|
||
return this.startDate && this.endDate ? `${this.startDate} 至 ${this.endDate}` : '不限时间'
|
||
},
|
||
successCount() {
|
||
return this.filteredRecords.filter((item) => item.status === 'success').length
|
||
},
|
||
failedCount() {
|
||
return this.filteredRecords.filter((item) => item.status === 'failed').length
|
||
}
|
||
},
|
||
watch: {
|
||
filteredRecords: {
|
||
immediate: true,
|
||
handler(list) {
|
||
if (!list.length) {
|
||
this.selectedRecord = null
|
||
this.detailVisible = false
|
||
return
|
||
}
|
||
if (!this.selectedRecord || !list.some((item) => item.id === this.selectedRecord.id)) {
|
||
this.detailVisible = false
|
||
this.selectedRecord = list[0]
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
isLoggedIn() {
|
||
return Boolean(uni.getStorageSync('scanapp_token'))
|
||
},
|
||
requireLogin() {
|
||
if (this.isLoggedIn()) return true
|
||
uni.showToast({ title: '请先登录后再查询', icon: 'none' })
|
||
return false
|
||
},
|
||
mapRecord(item) {
|
||
const type = item.record_type || 'scan'
|
||
const resultName = String(item.result_name || '').trim()
|
||
const statusName = String(item.status_name || '').trim()
|
||
const status = resultName === '成功' ? 'success' : resultName === '失败' ? 'failed' : this.mapStatus(statusName)
|
||
return {
|
||
id: `${type}-${item.id}`,
|
||
queryType: type,
|
||
typeLabel: item.record_type_name || '记录',
|
||
mainNo: item.order_no || item.repair_no || '-',
|
||
position: item.position || '-',
|
||
process: item.process_name || '-',
|
||
step: item.step_name || '-',
|
||
processId: item.process_id || '',
|
||
stepId: item.step_id || '',
|
||
operator: item.operator || item.user_code || '未记录',
|
||
userCode: item.user_code || '',
|
||
status,
|
||
statusLabel: resultName || statusName || '已记录',
|
||
statusClass: status === 'failed' ? 'is-failed' : status === 'success' ? 'is-success' : '',
|
||
scanTime: item.event_date || this.formatEventDate(item.event_at),
|
||
remark: item.remark || '',
|
||
modeLabel: item.record_type_name || '记录',
|
||
productCode: item.product_code || '',
|
||
quantity: item.quantity ?? '',
|
||
exceptionReason: item.exception_reason || '',
|
||
exceptionContent: item.exception_content || '',
|
||
materialCategory: item.material_category || '',
|
||
faultDescription: item.fault_description || ''
|
||
}
|
||
},
|
||
formatEventDate(timestamp) {
|
||
const value = Number(timestamp || 0)
|
||
if (!value) return '-'
|
||
const date = new Date(value * 1000)
|
||
if (Number.isNaN(date.getTime())) return '-'
|
||
const pad = (part) => String(part).padStart(2, '0')
|
||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
|
||
},
|
||
mapStatus(statusName) {
|
||
const statusMap = { 待处理: 'pending', 处理中: 'processing', 已完成: 'done', 已维修: 'repaired' }
|
||
return statusMap[statusName] || statusName || 'recorded'
|
||
},
|
||
async loadRecords() {
|
||
if (this.recordLoading) return
|
||
this.detailVisible = false
|
||
this.selectedRecord = null
|
||
this.recordLoading = true
|
||
const types = this.activeQueryType === 'all' ? ['scan', 'product', 'exception', 'repair'] : [this.activeQueryType]
|
||
const params = {
|
||
keyword: this.keyword.trim(),
|
||
order_no: this.orderNo.trim(),
|
||
user_code: this.userCode.trim(),
|
||
start_date: this.startDate,
|
||
end_date: this.endDate,
|
||
process_id: this.activeProcess,
|
||
step_id: this.activeStep,
|
||
page: this.recordPage,
|
||
limit: this.recordLimit
|
||
}
|
||
try {
|
||
const responses = await Promise.all(types.map((recordType) => queryProduceRecords({ ...params, record_type: recordType })))
|
||
const items = responses.flatMap((data) => Array.isArray(data?.items) ? data.items.map((item) => this.mapRecord(item)) : [])
|
||
items.sort((a, b) => String(b.scanTime).localeCompare(String(a.scanTime)))
|
||
this.records = items
|
||
this.recordTotal = responses.reduce((total, data) => total + Number(data?.total || 0), 0)
|
||
} catch (error) {
|
||
this.records = []
|
||
this.recordTotal = 0
|
||
uni.showToast({ title: '查询失败，请稍后重试', icon: 'none' })
|
||
} finally {
|
||
this.recordLoading = false
|
||
}
|
||
},
|
||
async loadProcessOptions() {
|
||
try {
|
||
const options = await getProcessOptions()
|
||
this.processOptions = Array.isArray(options) ? options : []
|
||
} catch (error) {
|
||
this.processOptions = []
|
||
}
|
||
},
|
||
chooseProcess() {
|
||
const labels = ['全部工序', ...this.processOptions.map((item) => item.label)]
|
||
uni.showActionSheet({ itemList: labels, success: async (result) => {
|
||
this.activeProcess = result.tapIndex === 0 ? '' : this.processOptions[result.tapIndex - 1]?.value || ''
|
||
this.activeStep = ''
|
||
this.stepOptions = []
|
||
if (this.activeProcess) {
|
||
try {
|
||
const options = await getStepOptions(this.activeProcess)
|
||
this.stepOptions = Array.isArray(options) ? options : []
|
||
} catch (error) {
|
||
this.stepOptions = []
|
||
}
|
||
}
|
||
} })
|
||
},
|
||
chooseStep() {
|
||
if (!this.activeProcess) {
|
||
uni.showToast({ title: '请先选择工序', icon: 'none' })
|
||
return
|
||
}
|
||
const labels = ['全部步骤', ...this.stepOptions.map((item) => item.label)]
|
||
uni.showActionSheet({ itemList: labels, success: (result) => {
|
||
this.activeStep = result.tapIndex === 0 ? '' : this.stepOptions[result.tapIndex - 1]?.value || ''
|
||
} })
|
||
},
|
||
handleDateChange(result) {
|
||
this.startDate = result.startDate || ''
|
||
this.endDate = result.endDate || ''
|
||
this.showDatePicker = false
|
||
},
|
||
handleRecordTypeChange(type) {
|
||
if (this.activeQueryType === type) return
|
||
this.activeQueryType = type
|
||
this.recordPage = 1
|
||
if (this.hasSearched) this.loadRecords()
|
||
},
|
||
getCurrentUserCode() {
|
||
const user = uni.getStorageSync('scanapp_user') || {}
|
||
return user.username || user.nickname || 'U001'
|
||
},
|
||
loadPdaMode() {
|
||
const settings = uni.getStorageSync(`scanapp_settings_${this.getCurrentUserCode()}`)
|
||
this.pdaMode = settings?.pdaMode === true
|
||
},
|
||
handleKeywordInputFocus() {
|
||
// #ifdef APP-PLUS
|
||
try {
|
||
const activity = plus.android.runtimeMainActivity()
|
||
const focusedView = activity.getWindow().getDecorView().findFocus()
|
||
if (focusedView) plus.android.invoke(focusedView, 'setShowSoftInputOnFocus', !this.pdaMode)
|
||
if (this.pdaMode) uni.hideKeyboard()
|
||
} catch (error) {
|
||
if (this.pdaMode) uni.hideKeyboard()
|
||
}
|
||
// #endif
|
||
},
|
||
handleSearch() {
|
||
const hasInput = this.keyword.trim() || this.orderNo.trim() || this.userCode.trim()
|
||
if (!hasInput) {
|
||
this.hasSearched = false
|
||
this.records = []
|
||
this.recordTotal = 0
|
||
this.selectedRecord = null
|
||
this.detailVisible = false
|
||
uni.showToast({ title: '请输入查询内容', icon: 'none' })
|
||
return
|
||
}
|
||
this.recordPage = 1
|
||
this.hasSearched = true
|
||
this.loadRecords()
|
||
},
|
||
resetFilter() {
|
||
this.keyword = ''
|
||
this.orderNo = ''
|
||
this.userCode = ''
|
||
this.startDate = ''
|
||
this.endDate = ''
|
||
this.activeQueryType = 'all'
|
||
this.activeProcess = ''
|
||
this.activeStep = ''
|
||
this.stepOptions = []
|
||
this.showAdvanced = false
|
||
this.detailVisible = false
|
||
this.recordPage = 1
|
||
this.hasSearched = false
|
||
this.records = []
|
||
this.recordTotal = 0
|
||
},
|
||
scanKeyword() {
|
||
if (this.isScanning) return
|
||
// #ifdef APP-PLUS
|
||
this.isScanning = true
|
||
openCodeScan({
|
||
smartZoom: true,
|
||
vibrate: true,
|
||
scanRegion: getScanRegionSetting(),
|
||
success: (result) => {
|
||
const value = String(result?.content || '').trim()
|
||
if (!value) return
|
||
this.keyword = value
|
||
this.handleSearch()
|
||
},
|
||
fail: (error) => {
|
||
const code = Number(error?.errCode)
|
||
if (code === 9021003) return
|
||
const messageMap = {
|
||
9021001: '当前环境不支持扫码，请在 Android 自定义调试基座或正式安装包中使用',
|
||
9021002: '相机权限被拒绝，请到系统设置中开启相机权限',
|
||
9021004: '未获取到有效扫码结果，请重试'
|
||
}
|
||
uni.showToast({ title: messageMap[code] || String(error?.errMsg || '扫码插件调用异常'), icon: 'none' })
|
||
},
|
||
complete: () => {
|
||
this.isScanning = false
|
||
}
|
||
})
|
||
// #endif
|
||
// #ifndef APP-PLUS
|
||
uni.showToast({ title: '请在 Android App 中使用扫码功能', icon: 'none' })
|
||
// #endif
|
||
},
|
||
showRecordDetail(item) {
|
||
if (!item) return
|
||
this.selectedRecord = item
|
||
this.detailVisible = true
|
||
},
|
||
closeRecordDetail() {
|
||
this.detailVisible = false
|
||
},
|
||
getRecordTypeLabel(item) {
|
||
return item.typeLabel || '记录'
|
||
}
|
||
},
|
||
onLoad() {
|
||
if (!this.requireLogin()) return
|
||
this.loadPdaMode()
|
||
this.loadProcessOptions()
|
||
},
|
||
onShow() {
|
||
if (!this.isLoggedIn()) return
|
||
this.loadPdaMode()
|
||
},
|
||
onHide() {
|
||
this.detailVisible = false
|
||
this.selectedRecord = null
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.query-page {
|
||
min-height: 100vh;
|
||
padding: 28rpx 24rpx 48rpx;
|
||
box-sizing: border-box;
|
||
background: linear-gradient(180deg, #eef6ff 0%, #f4f6fb 38%, #f4f6fb 100%);
|
||
}
|
||
|
||
.hero-card,
|
||
.filter-card,
|
||
.summary-card,
|
||
.detail-card,
|
||
.list-card {
|
||
margin-top: 24rpx;
|
||
padding: 28rpx;
|
||
border: 1rpx solid rgba(255, 255, 255, 0.72);
|
||
border-radius: 28rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 16rpx 42rpx rgba(23, 35, 61, 0.06);
|
||
}
|
||
|
||
.hero-card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 0;
|
||
padding: 34rpx 30rpx;
|
||
background: linear-gradient(135deg, #1677ff 0%, #35bfa3 100%);
|
||
}
|
||
|
||
.hero-title,
|
||
.hero-subtitle,
|
||
.card-title,
|
||
.filter-label,
|
||
.summary-value,
|
||
.summary-label,
|
||
.detail-main,
|
||
.detail-sub,
|
||
.detail-key,
|
||
.detail-value,
|
||
.record-main,
|
||
.record-sub,
|
||
.record-key,
|
||
.record-value {
|
||
display: block;
|
||
}
|
||
|
||
.hero-title {
|
||
color: #ffffff;
|
||
font-size: 38rpx;
|
||
font-weight: 800;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
margin-top: 10rpx;
|
||
color: rgba(255, 255, 255, 0.82);
|
||
font-size: 22rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.hero-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 86rpx;
|
||
height: 86rpx;
|
||
border-radius: 28rpx;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
}
|
||
|
||
.card-title {
|
||
color: #17233d;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.search-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.search-input-wrap {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.filter-group {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.filter-label {
|
||
margin-bottom: 14rpx;
|
||
color: #5f6b7a;
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.chip-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.chip {
|
||
padding: 14rpx 20rpx;
|
||
border-radius: 999rpx;
|
||
background: #f3f6fb;
|
||
color: #5f6b7a;
|
||
font-size: 24rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.chip.is-active {
|
||
background: rgba(22, 119, 255, 0.12);
|
||
color: #1677ff;
|
||
}
|
||
|
||
.action-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 16rpx;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.summary-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.summary-item {
|
||
padding: 22rpx 18rpx;
|
||
border-radius: 22rpx;
|
||
background: #f8fbff;
|
||
}
|
||
|
||
.summary-value {
|
||
color: #17233d;
|
||
font-size: 32rpx;
|
||
font-weight: 800;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.summary-value.success {
|
||
color: #19be6b;
|
||
}
|
||
|
||
.summary-value.danger {
|
||
color: #e91f3f;
|
||
}
|
||
|
||
.summary-label {
|
||
margin-top: 8rpx;
|
||
color: #8a94a6;
|
||
font-size: 20rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.detail-card,
|
||
.list-card {
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.detail-header,
|
||
.record-top {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.detail-main,
|
||
.record-main {
|
||
color: #17233d;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.detail-sub,
|
||
.record-sub {
|
||
margin-top: 6rpx;
|
||
color: #8a94a6;
|
||
font-size: 20rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.status-pill {
|
||
padding: 10rpx 18rpx;
|
||
border-radius: 999rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 600;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.status-pill.is-success {
|
||
background: rgba(25, 190, 107, 0.12);
|
||
color: #19be6b;
|
||
}
|
||
|
||
.status-pill.is-failed {
|
||
background: rgba(233, 31, 63, 0.12);
|
||
color: #e91f3f;
|
||
}
|
||
|
||
.detail-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16rpx;
|
||
margin-top: 22rpx;
|
||
}
|
||
|
||
.detail-item {
|
||
padding: 18rpx 18rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
background: #f8fbff;
|
||
}
|
||
|
||
.detail-key,
|
||
.record-key {
|
||
color: #8a94a6;
|
||
font-size: 20rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.detail-value,
|
||
.record-value {
|
||
margin-top: 8rpx;
|
||
color: #17233d;
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.record-card {
|
||
padding: 22rpx 24rpx;
|
||
border-radius: 24rpx;
|
||
background: #f8fbff;
|
||
margin-top: 18rpx;
|
||
}
|
||
|
||
.record-card.is-selected {
|
||
border: 1rpx solid rgba(22, 119, 255, 0.22);
|
||
background: #f5f9ff;
|
||
}
|
||
|
||
.record-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16rpx;
|
||
margin-top: 18rpx;
|
||
}
|
||
|
||
.record-info {
|
||
padding: 16rpx 16rpx 18rpx;
|
||
border-radius: 18rpx;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.query-page.query-layout {
|
||
padding: 24rpx 20rpx 40rpx;
|
||
background: #f5f7fb;
|
||
}
|
||
|
||
.query-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 4rpx 4rpx 20rpx;
|
||
}
|
||
|
||
.query-title,
|
||
.query-subtitle {
|
||
display: block;
|
||
}
|
||
|
||
.query-title {
|
||
color: #17233d;
|
||
font-size: 32rpx;
|
||
font-weight: 800;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.query-subtitle {
|
||
margin-top: 8rpx;
|
||
color: #8a94a6;
|
||
font-size: 18rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.query-tabs {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 10rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.query-tab {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6rpx;
|
||
height: 68rpx;
|
||
border: 1rpx solid transparent;
|
||
border-radius: 14rpx;
|
||
background: #edf0f5;
|
||
color: #7d8798;
|
||
font-size: 20rpx;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
}
|
||
|
||
.query-tab.is-active {
|
||
background: #2f6cf6;
|
||
color: #ffffff;
|
||
box-shadow: 0 10rpx 24rpx rgba(47, 108, 246, 0.22);
|
||
}
|
||
|
||
.query-search-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
margin-top: 16rpx;
|
||
padding: 12rpx;
|
||
border: 1rpx solid #e9edf4;
|
||
border-radius: 18rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 8rpx 20rpx rgba(23, 35, 61, 0.04);
|
||
}
|
||
|
||
.query-input-wrap {
|
||
flex: 1;
|
||
min-width: 0;
|
||
height: 64rpx;
|
||
padding: 0 16rpx;
|
||
border: 1rpx solid #e3e7ef;
|
||
border-radius: 12rpx;
|
||
background: #f6f8fb;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.camera-button,
|
||
.query-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 64rpx;
|
||
border-radius: 12rpx;
|
||
background: #2f6cf6;
|
||
color: #ffffff;
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
box-shadow: 0 8rpx 18rpx rgba(47, 108, 246, 0.18);
|
||
}
|
||
|
||
.camera-button {
|
||
width: 64rpx;
|
||
margin-left: 16rpx;
|
||
flex: none;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.camera-button.is-scanning {
|
||
opacity: 0.58;
|
||
}
|
||
|
||
.query-button {
|
||
width: 104rpx;
|
||
margin-left: 16rpx;
|
||
flex: none;
|
||
}
|
||
|
||
.advanced-trigger {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 14rpx;
|
||
padding: 18rpx 16rpx;
|
||
border: 1rpx solid #e9edf4;
|
||
border-radius: 14rpx;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.advanced-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
color: #2c313a;
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
}
|
||
|
||
.advanced-state {
|
||
margin-left: 4rpx;
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 8rpx;
|
||
background: #eef5ff;
|
||
color: #3a82ff;
|
||
font-size: 18rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.advanced-panel {
|
||
margin-top: 10rpx;
|
||
padding: 20rpx 18rpx 16rpx;
|
||
border: 1rpx solid #e9edf4;
|
||
border-radius: 16rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 8rpx 20rpx rgba(23, 35, 61, 0.04);
|
||
}
|
||
|
||
.filter-input-row {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 64rpx;
|
||
margin-bottom: 12rpx;
|
||
padding: 0 14rpx;
|
||
border: 1rpx solid #e3e7ef;
|
||
border-radius: 12rpx;
|
||
background: #f6f8fb;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.filter-input-label {
|
||
width: 112rpx;
|
||
flex: none;
|
||
color: #5f6b7a;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.filter-input-row :deep(.u-input) {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.filter-select-row {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 64rpx;
|
||
margin-bottom: 12rpx;
|
||
padding: 0 14rpx;
|
||
border: 1rpx solid #e3e7ef;
|
||
border-radius: 12rpx;
|
||
background: #f6f8fb;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.filter-select-row.is-disabled {
|
||
opacity: 0.55;
|
||
}
|
||
|
||
.filter-select-value {
|
||
flex: 1;
|
||
min-width: 0;
|
||
color: #2b313b;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.status-filter-label {
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.compact-chip-row {
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.chip {
|
||
padding: 12rpx 18rpx;
|
||
border-radius: 999rpx;
|
||
background: #f1f4f8;
|
||
color: #6b778c;
|
||
font-size: 20rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.chip.is-active {
|
||
background: #2f6cf6;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.filter-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 12rpx;
|
||
color: #6b778c;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.filter-confirm {
|
||
color: #2f6cf6;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.result-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
padding: 0 6rpx 8rpx;
|
||
color: #7d8798;
|
||
font-size: 18rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.query-loading {
|
||
padding: 28rpx 0;
|
||
color: #7d8798;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.record-list {
|
||
margin-top: 2rpx;
|
||
}
|
||
|
||
.record-card.compact-record {
|
||
margin-top: 10rpx;
|
||
padding: 20rpx 18rpx 16rpx;
|
||
border: 1rpx solid #edf0f5;
|
||
border-radius: 16rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 8rpx 18rpx rgba(23, 35, 61, 0.04);
|
||
}
|
||
|
||
.record-top {
|
||
align-items: center;
|
||
}
|
||
|
||
.record-number {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
min-width: 0;
|
||
}
|
||
|
||
.record-main {
|
||
max-width: 430rpx;
|
||
overflow: hidden;
|
||
color: #17233d;
|
||
font-size: 26rpx;
|
||
font-weight: 800;
|
||
line-height: 1.35;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.record-type-pill {
|
||
padding: 6rpx 12rpx;
|
||
border: 1rpx solid #b7ec8f;
|
||
border-radius: 999rpx;
|
||
background: #f8fff0;
|
||
color: #7ad63a;
|
||
font-size: 18rpx;
|
||
line-height: 1.35;
|
||
flex: none;
|
||
}
|
||
|
||
.record-detail-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 8rpx 18rpx;
|
||
margin-top: 16rpx;
|
||
padding-top: 14rpx;
|
||
border-top: 1rpx solid #f0f2f6;
|
||
}
|
||
|
||
.record-detail {
|
||
display: flex;
|
||
align-items: baseline;
|
||
font-size: 20rpx;
|
||
line-height: 1.55;
|
||
color: #7d8798;
|
||
}
|
||
|
||
.record-detail text:last-child {
|
||
color: #2b313b;
|
||
margin-left: 4rpx;
|
||
}
|
||
|
||
.record-status.is-success {
|
||
color: #7ad63a;
|
||
}
|
||
|
||
.record-status.is-failed {
|
||
color: #ff8a5b;
|
||
}
|
||
|
||
.record-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 14rpx;
|
||
padding-top: 10rpx;
|
||
border-top: 1rpx solid #f5f6f8;
|
||
color: #9aa4b4;
|
||
font-size: 18rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.detail-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 999;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
justify-content: flex-end;
|
||
background: rgba(0, 0, 0, 0.32);
|
||
}
|
||
|
||
.sheet-handle {
|
||
width: 64rpx;
|
||
height: 8rpx;
|
||
margin: 0 auto 18rpx;
|
||
border-radius: 999rpx;
|
||
background: #dfe4ec;
|
||
}
|
||
|
||
.detail-sheet {
|
||
width: 100%;
|
||
max-height: 72vh;
|
||
overflow: auto;
|
||
padding: 22rpx 22rpx 30rpx;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
background: #ffffff;
|
||
box-shadow: 0 -16rpx 40rpx rgba(0, 0, 0, 0.08);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.detail-sheet-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #17233d;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.sheet-main-no {
|
||
display: block;
|
||
margin-top: 12rpx;
|
||
color: #17233d;
|
||
font-size: 32rpx;
|
||
font-weight: 800;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.sheet-detail-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.sheet-detail-item {
|
||
padding: 14rpx;
|
||
border-radius: 14rpx;
|
||
background: #f8fbff;
|
||
}
|
||
|
||
.sheet-detail-item text:first-child {
|
||
display: block;
|
||
color: #7d8798;
|
||
font-size: 18rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.sheet-detail-item text:last-child {
|
||
display: block;
|
||
margin-top: 4rpx;
|
||
color: #17233d;
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.sheet-remark {
|
||
margin-top: 14rpx;
|
||
padding: 14rpx;
|
||
border-radius: 14rpx;
|
||
background: #f8fbff;
|
||
color: #7d8798;
|
||
font-size: 18rpx;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.sheet-remark text:last-child {
|
||
display: block;
|
||
margin-top: 4rpx;
|
||
color: #17233d;
|
||
font-size: 22rpx;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.theme-dark.query-page {
|
||
background: #151923;
|
||
}
|
||
|
||
.theme-dark .query-header,
|
||
.theme-dark .query-search-row,
|
||
.theme-dark .advanced-trigger,
|
||
.theme-dark .advanced-panel,
|
||
.theme-dark .record-card,
|
||
.theme-dark .detail-sheet {
|
||
border-color: #364152;
|
||
background: #222936;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.theme-dark .query-tab:not(.is-active),
|
||
.theme-dark .query-input-wrap,
|
||
.theme-dark .filter-input-row,
|
||
.theme-dark .filter-select-row,
|
||
.theme-dark .chip,
|
||
.theme-dark .record-info,
|
||
.theme-dark .sheet-detail-item,
|
||
.theme-dark .sheet-remark {
|
||
border-color: #364152;
|
||
background: #1c2431;
|
||
}
|
||
|
||
.theme-dark .query-title,
|
||
.theme-dark .advanced-title,
|
||
.theme-dark .filter-select-value,
|
||
.theme-dark .record-main,
|
||
.theme-dark .record-detail text:last-child,
|
||
.theme-dark .detail-sheet-header,
|
||
.theme-dark .sheet-main-no,
|
||
.theme-dark .sheet-detail-item text:last-child,
|
||
.theme-dark .sheet-remark text:last-child {
|
||
color: #f2f5fa;
|
||
}
|
||
|
||
.theme-dark .query-subtitle,
|
||
.theme-dark .result-header,
|
||
.theme-dark .filter-actions,
|
||
.theme-dark .record-detail,
|
||
.theme-dark .record-footer,
|
||
.theme-dark .sheet-detail-item text:first-child,
|
||
.theme-dark .sheet-remark {
|
||
color: #aeb9ca;
|
||
}
|
||
|
||
.theme-dark .record-detail-grid,
|
||
.theme-dark .record-footer {
|
||
border-color: #364152;
|
||
}
|
||
|
||
.theme-dark :deep(.u-input__input) {
|
||
color: #f2f5fa !important;
|
||
}
|
||
|
||
/* 查询页统一视觉层级：保持移动端紧凑、清晰的生产工具风格。 */
|
||
.query-page.query-layout {
|
||
padding: 24rpx 24rpx 56rpx;
|
||
background: linear-gradient(180deg, #edf5ff 0%, #f5f7fb 30%, #f5f7fb 100%);
|
||
}
|
||
|
||
.query-header {
|
||
padding: 24rpx 22rpx;
|
||
border: 1rpx solid #e5ebf4;
|
||
border-radius: 22rpx;
|
||
background: rgba(255, 255, 255, 0.94);
|
||
box-shadow: 0 12rpx 30rpx rgba(39, 74, 125, 0.08);
|
||
}
|
||
|
||
.query-title {
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
.query-tabs {
|
||
display: flex;
|
||
gap: 10rpx;
|
||
margin-top: 18rpx;
|
||
padding: 8rpx;
|
||
border: 1rpx solid #e5ebf4;
|
||
border-radius: 18rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 8rpx 22rpx rgba(39, 74, 125, 0.05);
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.query-tab {
|
||
min-width: 120rpx;
|
||
flex: 1;
|
||
flex-shrink: 0;
|
||
border-radius: 12rpx;
|
||
transition: background 0.2s ease, color 0.2s ease;
|
||
}
|
||
|
||
.query-search-row {
|
||
margin-top: 18rpx;
|
||
padding: 10rpx;
|
||
border-radius: 18rpx;
|
||
box-shadow: 0 10rpx 26rpx rgba(39, 74, 125, 0.07);
|
||
}
|
||
|
||
.query-input-wrap {
|
||
background: #f7f9fc;
|
||
}
|
||
|
||
.camera-button,
|
||
.query-button {
|
||
box-shadow: 0 8rpx 18rpx rgba(47, 108, 246, 0.2);
|
||
}
|
||
|
||
.advanced-trigger,
|
||
.advanced-panel {
|
||
box-shadow: 0 8rpx 22rpx rgba(39, 74, 125, 0.05);
|
||
}
|
||
|
||
.advanced-trigger {
|
||
margin-top: 16rpx;
|
||
padding: 20rpx 18rpx;
|
||
}
|
||
|
||
.advanced-panel {
|
||
padding: 20rpx 18rpx 18rpx;
|
||
}
|
||
|
||
.filter-select-row {
|
||
margin-bottom: 14rpx;
|
||
background: #f8faff;
|
||
}
|
||
|
||
.filter-input-label {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.result-header {
|
||
margin-top: 24rpx;
|
||
padding: 0 8rpx 10rpx;
|
||
color: #738199;
|
||
}
|
||
|
||
.record-card.compact-record {
|
||
margin-top: 12rpx;
|
||
padding: 22rpx 20rpx 18rpx;
|
||
border-radius: 18rpx;
|
||
box-shadow: 0 10rpx 24rpx rgba(39, 74, 125, 0.06);
|
||
}
|
||
|
||
.record-detail-grid {
|
||
gap: 10rpx 16rpx;
|
||
margin-top: 18rpx;
|
||
padding-top: 16rpx;
|
||
}
|
||
|
||
.record-detail text:last-child {
|
||
min-width: 0;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.record-footer {
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.theme-dark.query-page.query-layout {
|
||
background: #151923;
|
||
}
|
||
|
||
.theme-dark .query-header,
|
||
.theme-dark .query-tabs {
|
||
border-color: #364152;
|
||
background: #222936;
|
||
}
|
||
|
||
.theme-dark .query-search-row,
|
||
.theme-dark .advanced-trigger,
|
||
.theme-dark .advanced-panel,
|
||
.theme-dark .record-card.compact-record {
|
||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.16);
|
||
}
|
||
|
||
/* 防止记录类型标签换行，并让输入文字在控件内垂直居中。 */
|
||
.query-tab {
|
||
min-width: 0;
|
||
padding: 0 4rpx;
|
||
flex: 1 1 0;
|
||
margin-right: 10rpx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.query-tabs {
|
||
gap: 0;
|
||
}
|
||
|
||
.query-tab:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.query-tab text {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.query-input-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.camera-button,
|
||
.query-button {
|
||
height: 80rpx;
|
||
}
|
||
|
||
.camera-button {
|
||
width: 80rpx;
|
||
}
|
||
|
||
.query-button {
|
||
width: 128rpx;
|
||
}
|
||
|
||
.query-input-wrap :deep(.u-input) {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.query-input-wrap :deep(.u-input__input) {
|
||
height: 100%;
|
||
line-height: 80rpx;
|
||
}
|
||
</style>
|