From 752b14d2caa47ccceac328f79389fbf5e2e62ce4 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 24 九月 2025 15:18:39 +0800
Subject: [PATCH] 分析追溯
---
src/pages/inspectionUpload/index.vue | 793 +++++++++++++++++++++++++++-----------------------------
1 files changed, 380 insertions(+), 413 deletions(-)
diff --git a/src/pages/inspectionUpload/index.vue b/src/pages/inspectionUpload/index.vue
index aed4e6e..3b9e0d7 100644
--- a/src/pages/inspectionUpload/index.vue
+++ b/src/pages/inspectionUpload/index.vue
@@ -1,74 +1,14 @@
<template>
<view class="inspection-upload-page">
<!-- 椤甸潰澶撮儴 -->
- <PageHeader title="宸℃涓婁紶" />
-
- <!-- 鏍囩椤� -->
- <view class="tabs-container">
- <view class="custom-tabs">
- <view
- v-for="(tab, index) in tabs"
- :key="index"
- class="tab-item"
- :class="{ 'tab-active': currentTabIndex === index }"
- @click="handleTabChange(index)"
- >
- {{ tab.name }}
- </view>
- <view class="tab-line" :style="{ left: currentTabIndex * 50 + '%' }"></view>
- </view>
- </view>
-
- <!-- 鎵爜妯″潡 -->
- <view v-if="activeTab === 'qrCode'" class="scan-section">
- <view class="scan-controls">
- <u-button
- :type="isScanning ? 'error' : 'primary'"
- :loading="scanLoading"
- @click="toggleScan"
- >
- {{ scanButtonText }}
- </u-button>
- </view>
-
- <!-- 鎵爜鍖哄煙 -->
- <view v-show="isScanning" class="qr-scan-container">
- <camera
- class="qr-camera"
- device-position="back"
- flash="off"
- @scancode="handleScanCode"
- @error="handleCameraError"
- ></camera>
- <view class="scan-overlay">
- <view class="scan-frame"></view>
- <view class="scan-tip">璇峰皢浜岀淮鐮佹斁鍏ユ鍐�</view>
- </view>
- </view>
-
- <!-- 鐘舵�佹彁绀� -->
- <view class="status-info">
- <u-alert
- v-if="cameraError"
- :title="cameraError"
- type="error"
- :showIcon="true"
- :closable="true"
- @close="cameraError = ''"
- ></u-alert>
- <view v-if="isScanning" class="scanning-text">
- <u-loading-icon mode="circle" color="#1890ff" size="20"></u-loading-icon>
- <text class="scanning-label">姝ｅ湪鎵弿浜岀淮鐮�...</text>
- </view>
- </view>
- </view>
+ <PageHeader title="宸℃涓婁紶" @back="goBack"/>
<!-- 鏁版嵁鍒楄〃 -->
<view class="table-section">
<!-- 鐢熶骇宸℃鍒楄〃 -->
- <view v-if="activeTab === 'task'" class="task-list">
+ <view class="task-list">
<view
- v-for="(item, index) in tableData"
+ v-for="(item, index) in taskTableData"
:key="index"
class="task-item"
@click="handleAdd(item)"
@@ -91,147 +31,127 @@
>
涓婁紶
</u-button>
- </view>
- </view>
- <view class="task-details">
- <view class="detail-item">
- <text class="detail-label">澶囨敞锛�</text>
- <text class="detail-value">{{ item.remarks || '鏃�' }}</text>
- </view>
- <view class="detail-item">
- <text class="detail-label">鎵ц浜猴細</text>
- <text class="detail-value">{{ item.inspector }}</text>
- </view>
- </view>
- </view>
- </view>
-
- <!-- 鐜板満宸℃鍒楄〃 -->
- <view v-if="activeTab === 'qrCode'" class="qr-list">
- <view
- v-for="(item, index) in tableData"
- :key="index"
- class="qr-item"
- @click="viewFile(item)"
- >
- <view class="qr-header">
- <view class="qr-info">
- <text class="device-name">{{ item.qrCode?.deviceName }}</text>
- <text class="device-location">{{ item.qrCode?.location }}</text>
- </view>
- <view class="qr-actions">
<u-button
- type="primary"
+ type="info"
size="small"
- @click.stop="viewFile(item)"
+ @click.stop="startScanForTask(item)"
:customStyle="{
borderRadius: '15px',
height: '30px',
fontSize: '12px'
}"
>
- 鏌ョ湅闄勪欢
+ 鎵爜
</u-button>
</view>
</view>
- <view class="qr-details">
+ <view class="task-details">
<view class="detail-item">
- <text class="detail-label">宸℃浜猴細</text>
- <text class="detail-value">{{ item.scanner }}</text>
+ <text class="detail-label">澶囨敞</text>
+ <text class="detail-value">{{ item.remarks || '鏃�' }}</text>
</view>
<view class="detail-item">
- <text class="detail-label">宸℃鏃堕棿锛�</text>
- <text class="detail-value">{{ item.scanTime }}</text>
+ <text class="detail-label">鎵ц浜�</text>
+ <text class="detail-value">{{ item.inspector }}</text>
</view>
</view>
</view>
</view>
<!-- 绌虹姸鎬� -->
- <view v-if="tableData.length === 0 && !tableLoading" class="empty-state">
- <u-empty
- mode="data"
- text="鏆傛棤鏁版嵁"
- :iconSize="80"
- ></u-empty>
- </view>
-
- <!-- 鍔犺浇鐘舵�� -->
- <view v-if="tableLoading" class="loading-state">
- <u-loading-icon mode="circle" color="#1890ff" size="40"></u-loading-icon>
- <text class="loading-text">鍔犺浇涓�...</text>
+ <view v-if="taskTableData.length === 0" class="no-data">
+ <text>鏆傛棤鏁版嵁</text>
</view>
</view>
- <!-- 鍒嗛〉 -->
- <view v-if="total > 0" class="pagination-container">
- <u-pagination
- :total="total"
- :current="pageNum"
- :pageSize="pageSize"
- @change="handlePageChange"
- :showTotal="true"
- :showSizer="false"
- :showJumper="false"
- ></u-pagination>
+ <!-- 鎵爜鍖哄煙 - 鍏ㄥ眬寮圭獥 -->
+ <view v-if="isScanning" class="qr-scan-overlay">
+ <view class="qr-scan-container">
+ <view class="scan-header">
+ <text class="scan-title">鎵弿浜岀淮鐮�</text>
+ <u-button
+ type="error"
+ size="small"
+ @click.stop="stopScan"
+ :customStyle="{
+ borderRadius: '15px',
+ height: '30px',
+ fontSize: '12px'
+ }"
+ >
+ 鍏抽棴
+ </u-button>
+ </view>
+ <camera
+ class="qr-camera"
+ device-position="back"
+ flash="off"
+ @scancode="handleScanCode"
+ @error="handleCameraError"
+ ></camera>
+ <view class="scan-frame-wrapper">
+ <view class="scan-frame"></view>
+ <view class="scan-tip">璇峰皢浜岀淮鐮佹斁鍏ユ鍐�</view>
+ </view>
+ <u-alert
+ v-if="cameraError"
+ :title="cameraError"
+ type="error"
+ :showIcon="true"
+ :closable="true"
+ @close="cameraError = ''"
+ :customStyle="{
+ margin: '10px 0'
+ }"
+ ></u-alert>
+ </view>
</view>
<!-- 寮圭獥缁勪欢 -->
<form-dia ref="formDia" @closeDia="handleQuery"></form-dia>
- <qr-code-form-dia ref="qrCodeFormDia" @closeDia="handleQuery"></qr-code-form-dia>
</view>
</template>
<script setup>
-import { onMounted, ref, reactive, computed, nextTick } from 'vue'
+import { onMounted, onUnmounted, ref, nextTick } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import PageHeader from '@/components/PageHeader.vue'
import FormDia from './components/formDia.vue'
-import QrCodeFormDia from './components/qrCodeFormDia.vue'
-import { qrCodeScanRecordList } from '@/api/inspectionUpload/index.js'
-import { getInspectionTaskList } from '@/api/equipmentManagement/inspection.js'
+import { getLedgerById } from '@/api/equipmentManagement/ledger.js'
import {inspectionTaskList} from "@/api/inspectionManagement";
-// import ViewQrCodeFiles from '@/pages/inspectionManagement/components/viewQrCodeFiles.vue'
// 缁勪欢寮曠敤
const formDia = ref()
-const qrCodeFormDia = ref()
-// 褰撳墠鏍囩
-const activeTab = ref('task')
-
-const tabName = ref('task')
-const currentTabIndex = ref(0)
-
-// 鏍囩椤垫暟鎹�
-const tabs = reactive([
- { name: '鐢熶骇宸℃' },
- { name: '鐜板満宸℃' }
-])
+// 鍔犺浇鎻愮ず鏂规硶
+const showLoadingToast = (message) => {
+ uni.showLoading({
+ title: message,
+ mask: true
+ })
+}
+const closeToast = () => {
+ uni.hideLoading()
+}
// 琛ㄦ牸鏁版嵁
-const tableData = ref([])
-const tableLoading = ref(false)
-const total = ref(0)
-const pageNum = ref(1)
-const pageSize = ref(10)
+const taskTableData = ref([]) // 鐢熶骇宸℃鏁版嵁
+
+// 褰撳墠鎵弿鐨勪换鍔�
+const currentScanningTask = ref(null)
+
+// 璇锋眰鍙栨秷鏍囧織锛岀敤浜庡彇娑堟鍦ㄨ繘琛岀殑璇锋眰
+let isRequestCancelled = false
// 鎵爜鐩稿叧鐘舵��
const isScanning = ref(false)
-const scanLoading = ref(false)
const cameraError = ref('')
-
-// 璁＄畻灞炴��
-const scanButtonText = computed(() => {
- if (scanLoading.value) return '姝ｅ湪鍒濆鍖�...'
- return isScanning.value ? '鍋滄鎵爜' : '寮�濮嬫壂鐮�'
-})
// 鐢熷懡鍛ㄦ湡
onMounted(() => {
// 寤惰繜鍒濆鍖栵紝纭繚DOM宸叉覆鏌�
nextTick(() => {
- handleTabClick({ props: { name: 'task' } })
+ getList()
})
})
@@ -240,84 +160,112 @@
getList()
})
-// 鏍囩椤靛垏鎹�
-const handleTabChange = (index) => {
- currentTabIndex.value = index
- const tabNames = ['task', 'qrCode']
- activeTab.value = tabNames[index]
- tabName.value = tabNames[index]
- tableData.value = []
- pageNum.value = 1
- getList()
-}
+// 缁勪欢閿�姣佹椂鐨勬竻鐞�
+onUnmounted(() => {
+ // 璁剧疆鍙栨秷鏍囧織锛岄樆姝㈠悗缁殑寮傛鎿嶄綔
+ isRequestCancelled = true
+
+ // 鍋滄鎵爜
+ if (isScanning.value) {
+ isScanning.value = false
+ }
+})
-// 鏍囩椤电偣鍑伙紙鍏煎鏃ф柟娉曪級
-const handleTabClick = (tab) => {
- tabName.value = tab.props.name
- activeTab.value = tab.props.name
- tableData.value = []
- getList()
+// 杩斿洖涓婁竴椤�
+const goBack = () => {
+ uni.navigateBack()
}
// 鏌ヨ鏁版嵁
const handleQuery = () => {
- pageNum.value = 1
- pageSize.value = 10
getList()
}
// 鑾峰彇鍒楄〃鏁版嵁
const getList = () => {
- tableLoading.value = true
- if (tabName.value === "task") {
- inspectionTaskList({size: pageSize.value, current: pageNum.value}).then(res => {
- tableLoading.value = false;
- tableData.value = res.data.records;
- total.value = res.data.total;
- })
- } else {
- qrCodeScanRecordList({size: pageSize.value, current: pageNum.value}).then(res => {
- tableLoading.value = false;
- tableData.value = res.data.records;
- total.value = res.data.total;
- })
- }
+ // 鏄剧ず鍔犺浇鎻愮ず
+ showLoadingToast('鍔犺浇涓�...')
+
+ // 璁剧疆鍙栨秷鏍囧織
+ isRequestCancelled = false
+
+ inspectionTaskList({}).then(res => {
+ // 妫�鏌ョ粍浠舵槸鍚﹁繕瀛樺湪涓旇姹傛湭琚彇娑�
+ if (!isRequestCancelled) {
+ console.log('鐢熶骇宸℃API杩斿洖鏁版嵁:', res);
+
+ // 澶勭悊涓嶅悓鐨勬暟鎹粨鏋�
+ let records = [];
+ if (res && res.data) {
+ // 灏濊瘯澶氱鍙兘鐨勬暟鎹粨鏋�
+ if (Array.isArray(res.data.records)) {
+ records = res.data.records;
+ } else if (Array.isArray(res.data.rows)) {
+ records = res.data.rows;
+ } else if (Array.isArray(res.data)) {
+ records = res.data;
+ } else if (Array.isArray(res.data.list)) {
+ records = res.data.list;
+ }
+ }
+
+ if (records.length > 0) {
+ taskTableData.value = records;
+ console.log('鐢熶骇宸℃鏁版嵁璁剧疆鎴愬姛锛岃褰曟暟:', records.length);
+ } else {
+ console.warn('鐢熶骇宸℃鏁版嵁涓虹┖鎴栨牸寮忎笉姝ｇ‘:', res);
+ taskTableData.value = [];
+ uni.showToast({
+ title: '鏆傛棤宸℃浠诲姟鏁版嵁',
+ icon: 'none'
+ });
+ }
+ }
+ // 鍏抽棴鍔犺浇鎻愮ず
+ closeToast()
+ }).catch(err => {
+ // 妫�鏌ョ粍浠舵槸鍚﹁繕瀛樺湪涓旇姹傛湭琚彇娑�
+ if (!isRequestCancelled) {
+ console.error('鑾峰彇鐢熶骇宸℃鏁版嵁澶辫触:', err);
+ taskTableData.value = [];
+ // 娣诲姞閿欒鎻愮ず
+ uni.showToast({
+ title: '鑾峰彇鏁版嵁澶辫触',
+ icon: 'error'
+ })
+ }
+ // 鍏抽棴鍔犺浇鎻愮ず
+ closeToast()
+ })
}
-// 鍒嗛〉鍙樺寲
-const handlePageChange = (page) => {
- pageNum.value = page
- getList()
-}
// 涓婁紶
const handleAdd = (row) => {
nextTick(() => {
- formDia.value?.openDialog(row)
+ // 妫�鏌ョ粍浠舵槸鍚﹁繕瀛樺湪
+ if (formDia.value && formDia.value.openDialog) {
+ formDia.value.openDialog(row)
+ } else {
+ console.error('涓婁紶缁勪欢寮曠敤涓嶅瓨鍦�')
+ uni.showToast({
+ title: '缁勪欢鏈噯澶囧ソ',
+ icon: 'error'
+ })
+ }
})
}
-// 鏌ョ湅闄勪欢
-const viewFile = (row) => {
- console.log('鏌ョ湅闄勪欢:', row)
- uni.showToast({
- title: '鏌ョ湅闄勪欢鍔熻兘寮�鍙戜腑',
- icon: 'none'
- })
-}
-
-// 鎵爜鐩稿叧鏂规硶
-const toggleScan = async () => {
- if (isScanning.value) {
- await stopScan()
- } else {
- await startScan()
- }
-}
-
-const startScan = async () => {
+// 涓烘寚瀹氫换鍔″紑濮嬫壂鐮�
+const startScanForTask = async (task) => {
try {
- scanLoading.value = true
+ // 璁板綍褰撳墠鎵弿鐨勪换鍔�
+ currentScanningTask.value = task
+ console.log('涓轰换鍔″紑濮嬫壂鐮�:', task.taskName)
+
+ // 鏄剧ず鎵弿鐣岄潰
+ isScanning.value = true
+
// 浣跨敤uniapp鐨勬壂鐮丄PI
uni.scanCode({
success: (res) => {
@@ -330,29 +278,37 @@
title: '鎵爜澶辫触',
icon: 'error'
})
+ // 鍏抽棴鎵弿鐣岄潰
+ isScanning.value = false
},
complete: () => {
- scanLoading.value = false
+ // 鎵爜瀹屾垚鍚庡叧闂壂鎻忕晫闈�
+ setTimeout(() => {
+ isScanning.value = false
+ }, 1000)
}
})
} catch (e) {
console.error('鍚姩鎵爜澶辫触:', e)
- scanLoading.value = false
uni.showToast({
title: '鍚姩鎵爜澶辫触',
icon: 'error'
})
+ isScanning.value = false
}
}
-const stopScan = async () => {
+// 鍋滄鎵爜
+const stopScan = () => {
isScanning.value = false
+ currentScanningTask.value = null
}
// 鎵爜鎴愬姛澶勭悊
const handleScanSuccess = async (result) => {
try {
console.log('澶勭悊鎵爜缁撴灉:', result)
+ console.log('褰撳墠鍏宠仈浠诲姟:', currentScanningTask.value?.taskName)
uni.showToast({
title: '璇嗗埆鎴愬姛',
@@ -361,17 +317,51 @@
// 瑙ｆ瀽浜岀淮鐮佹暟鎹�
let qrData
+ let deviceId = ''
+
try {
qrData = JSON.parse(result.result)
console.log('瑙ｆ瀽鐨勪簩缁寸爜鏁版嵁:', qrData)
+ deviceId = qrData.deviceId || qrData.qrCodeId
} catch (e) {
- // 濡傛灉涓嶆槸JSON鏍煎紡锛岀洿鎺ヤ娇鐢ㄦ壂鐮佺粨鏋滀綔涓鸿澶囧悕绉�
- qrData = {
- deviceName: result.result,
- location: '',
- qrCodeId: result.result // 娣诲姞浜岀淮鐮両D
+ // 濡傛灉涓嶆槸JSON鏍煎紡锛屽皾璇曚粠URL涓彁鍙杁eviceId
+ const url = result.result
+
+ if (url.includes('deviceId=')) {
+ // 浠嶶RL涓彁鍙杁eviceId
+ const match = url.match(/deviceId=(\d+)/)
+ if (match && match[1]) {
+ deviceId = match[1]
+ }
}
- console.log('浣跨敤榛樿鏁版嵁鏍煎紡:', qrData)
+
+ qrData = {
+ deviceName: deviceId ? `璁惧${deviceId}` : result.result,
+ location: '',
+ qrCodeId: deviceId // 浣跨敤鎻愬彇鐨刣eviceId鎴栧師濮嬬粨鏋�
+ }
+ }
+
+ // 濡傛灉鏈夎澶嘔D锛屽皾璇曚粠API鑾峰彇鐪熷疄鐨勮澶囧悕绉�
+ if (deviceId) {
+ try {
+ console.log('姝ｅ湪鏌ヨ璁惧淇℃伅锛岃澶嘔D:', deviceId)
+ const response = await getLedgerById(deviceId)
+ console.log('璁惧淇℃伅鏌ヨ缁撴灉:', response)
+
+ if (response.code === 200 && response.data) {
+ qrData.deviceName = response.data.deviceName || `璁惧${deviceId}`
+ qrData.location = response.data.storageLocation || ''
+ console.log('鑾峰彇鍒拌澶囧悕绉�:', qrData.deviceName)
+ } else {
+ console.warn('璁惧淇℃伅鏌ヨ澶辫触锛屼娇鐢ㄩ粯璁ゅ悕绉�')
+ qrData.deviceName = qrData.deviceName || `璁惧${deviceId}`
+ }
+ } catch (apiError) {
+ console.error('鏌ヨ璁惧淇℃伅澶辫触:', apiError)
+ // API璋冪敤澶辫触鏃朵娇鐢ㄩ粯璁ゅ悕绉�
+ qrData.deviceName = qrData.deviceName || `璁惧${deviceId}`
+ }
}
// 纭繚鏁版嵁瀹屾暣鎬�
@@ -379,51 +369,40 @@
qrData.deviceName = result.result
}
if (!qrData.qrCodeId) {
- qrData.qrCodeId = result.result
+ qrData.qrCodeId = deviceId || result.result
}
- callBackendAPI(qrData)
+ // 灏嗘壂鐮佹暟鎹笌浠诲姟鍏宠仈
+ if (currentScanningTask.value) {
+ // 鍏宠仈浠诲姟淇℃伅
+ const taskData = {
+ ...currentScanningTask.value,
+ qrCodeData: qrData
+ }
+
+ // 鎵撳紑涓婁紶寮圭獥锛屼紶閫掑叧鑱斿悗鐨勪换鍔℃暟鎹�
+ nextTick(() => {
+ if (formDia.value && formDia.value.openDialog) {
+ formDia.value.openDialog(taskData)
+ } else {
+ console.error('涓婁紶缁勪欢寮曠敤涓嶅瓨鍦�')
+ uni.showToast({
+ title: '缁勪欢鏈噯澶囧ソ',
+ icon: 'error'
+ })
+ }
+ })
+ }
} catch (error) {
console.error('澶勭悊鎵爜缁撴灉澶辫触:', error)
uni.showToast({
title: error.message || '鏁版嵁瑙ｆ瀽澶辫触',
icon: 'error'
})
+ } finally {
+ // 鍏抽棴鎵弿鐣岄潰
+ isScanning.value = false
}
-}
-
-const callBackendAPI = (result) => {
- console.log('鍑嗗鎵撳紑寮规锛屾暟鎹�:', result)
- console.log('寮规缁勪欢寮曠敤:', qrCodeFormDia.value)
-
- // 纭繚缁勪欢寮曠敤瀛樺湪
- if (qrCodeFormDia.value) {
- console.log('鐩存帴璋冪敤寮规openDialog鏂规硶')
- qrCodeFormDia.value.openDialog(result)
- } else {
- // 濡傛灉缁勪欢寮曠敤涓嶅瓨鍦紝绛夊緟涓嬩竴涓猼ick
- console.log('缁勪欢寮曠敤涓嶅瓨鍦紝绛夊緟nextTick')
- nextTick(() => {
- console.log('nextTick鍚庡脊妗嗙粍浠跺紩鐢�:', qrCodeFormDia.value)
- if (qrCodeFormDia.value) {
- console.log('nextTick鍚庤皟鐢ㄥ脊妗唎penDialog鏂规硶')
- qrCodeFormDia.value.openDialog(result)
- } else {
- console.error('寮规缁勪欢寮曠敤涓嶅瓨鍦�')
- uni.showToast({
- title: '寮规缁勪欢鏈噯澶囧ソ',
- icon: 'error'
- })
- }
- })
- }
-}
-
-
-// 鎵爜澶勭悊
-const handleScanCode = (result) => {
- console.log('鎵爜缁撴灉:', result)
- handleScanSuccess(result)
}
// 鎽勫儚澶撮敊璇鐞�
@@ -434,104 +413,192 @@
</script>
<style scoped lang="scss">
+// 瀵煎叆閿�鍞ā鍧楀叕鍏辨牱寮�
+@import '@/styles/sales-common.scss';
+
+// 椤甸潰瀹瑰櫒鏍峰紡
.inspection-upload-page {
min-height: 100vh;
- background-color: #f5f5f5;
-}
-
-.tabs-container {
- background-color: #fff;
- margin: 0;
- border-bottom: 1px solid #e8e8e8;
-}
-
-.custom-tabs {
- display: flex;
+ background: #f8f9fa;
position: relative;
- background-color: #fff;
- width: 100%;
}
-.tab-item {
+// 鍒楄〃瀹瑰櫒鏍峰紡
+.table-section {
+ padding: 20px;
+}
+
+// 浠诲姟鍒楄〃鏍峰紡 - 浣跨敤閿�鍞彴璐︾殑鏍峰紡瑙勮寖
+.task-list {
+ .task-item {
+ background: #ffffff;
+ border-radius: 12px;
+ margin-bottom: 16px;
+ overflow: hidden;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ padding: 0 16px;
+
+ &:active {
+ transform: scale(0.98);
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+ }
+ }
+}
+
+// 椤圭洰澶撮儴鏍峰紡
+.task-header {
+ padding: 16px 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+}
+
+.task-info {
flex: 1;
- text-align: center;
- padding: 20px 0;
- font-size: 16px;
+}
+
+.task-name {
+ font-size: 14px;
+ color: #333;
font-weight: 500;
- color: #606266;
- transition: all 0.3s ease;
- cursor: pointer;
- position: relative;
- z-index: 2;
+ margin-bottom: 0;
+ line-height: 1.4;
}
-.tab-item.tab-active {
- color: #1890ff;
- font-weight: 600;
+.task-location {
+ font-size: 12px;
+ color: #666;
+ margin-top: 4px;
}
-.tab-line {
- position: absolute;
- bottom: 0;
- width: 50%;
- height: 3px;
- background-color: #1890ff;
- transition: left 0.3s ease;
-}
-
-.scan-section {
- background-color: #fff;
- padding: 10px;
-}
-
-.scan-controls {
+// 浠诲姟鎿嶄綔鎸夐挳鏍峰紡
+.task-actions {
display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-left: 0;
+}
+
+// 浠诲姟璇︽儏鏍峰紡 - 浣跨敤閿�鍞彴璐︾殑璇︽儏琛屾牱寮�
+.task-details {
+ padding: 16px 0;
+
+ .detail-item {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ margin-bottom: 8px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ .detail-label {
+ font-size: 12px;
+ color: #777777;
+ min-width: 60px;
+ flex-shrink: 0;
+ }
+
+ .detail-value {
+ font-size: 12px;
+ color: #000000;
+ text-align: right;
+ flex: 1;
+ margin-left: 16px;
+ line-height: 1.4;
+ }
+ }
+}
+
+// 鏃犳暟鎹彁绀烘牱寮� - 浣跨敤閿�鍞彴璐︾殑鏍峰紡
+.no-data {
+ padding: 40px 0;
+ text-align: center;
+ color: #999;
+ background: none;
+ margin: 0;
+}
+
+.no-data text {
+ font-size: 14px;
+ color: #999;
+}
+
+/* 鎵爜寮圭獥鏍峰紡 */
+.qr-scan-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.8);
+ z-index: 9999;
+ display: flex;
+ flex-direction: column;
justify-content: center;
+ align-items: center;
+ padding: 20px;
}
.qr-scan-container {
- position: relative;
width: 100%;
- max-width: 500px;
- margin: 0 auto;
- background: #000;
- border-radius: 8px;
+ max-width: 400px;
+ background-color: #000;
+ border-radius: 12px;
overflow: hidden;
+}
+
+.scan-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 15px;
+ background-color: rgba(0, 0, 0, 0.7);
+}
+
+.scan-title {
+ font-size: 18px;
+ font-weight: 600;
+ color: #fff;
}
.qr-camera {
width: 100%;
+ height: 400px;
+}
+
+.scan-frame-wrapper {
+ position: relative;
+ width: 100%;
height: 300px;
}
-.scan-overlay {
+.scan-frame {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- width: 70%;
- height: 70%;
+ width: 80%;
+ height: 80%;
border: 3px solid #1890ff;
border-radius: 8px;
box-shadow: 0 0 20px rgba(24, 144, 255, 0.3);
animation: pulse 2s infinite;
}
-.scan-frame {
- width: 100%;
- height: 100%;
- border: 2px solid #fff;
- border-radius: 4px;
-}
-
.scan-tip {
position: absolute;
- bottom: -30px;
+ bottom: 10px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 14px;
text-align: center;
+ background-color: rgba(0, 0, 0, 0.6);
+ padding: 5px 15px;
+ border-radius: 20px;
}
@keyframes pulse {
@@ -540,104 +607,4 @@
100% { opacity: 0.8; }
}
-.status-info {
- margin-top: 16px;
- text-align: center;
-}
-
-.scanning-text {
- display: flex;
- align-items: center;
- justify-content: center;
- color: #1890ff;
- margin-top: 8px;
-}
-
-.scanning-label {
- margin-left: 8px;
- font-size: 14px;
-}
-
-.table-section {
- padding: 0 15px;
-}
-
-.task-list, .qr-list {
- .task-item, .qr-item {
- background-color: #fff;
- border-radius: 8px;
- margin-bottom: 10px;
- padding: 15px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- }
-}
-
-.task-header, .qr-header {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- margin-bottom: 10px;
-}
-
-.task-info, .qr-info {
- flex: 1;
-}
-
-.task-name, .device-name {
- font-size: 16px;
- font-weight: 600;
- color: #333;
- margin-bottom: 4px;
-}
-
-.task-location, .device-location {
- font-size: 14px;
- color: #666;
-}
-
-.task-actions, .qr-actions {
- margin-left: 10px;
-}
-
-.task-details, .qr-details {
- .detail-item {
- display: flex;
- margin-bottom: 6px;
-
- .detail-label {
- font-size: 14px;
- color: #666;
- min-width: 60px;
- }
-
- .detail-value {
- font-size: 14px;
- color: #333;
- flex: 1;
- }
- }
-}
-
-.empty-state, .loading-state {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 40px 20px;
- background-color: #fff;
- border-radius: 8px;
- margin: 10px 15px;
-}
-
-.loading-text {
- margin-top: 10px;
- font-size: 14px;
- color: #666;
-}
-
-.pagination-container {
- padding: 20px 15px;
- background-color: #fff;
- margin-top: 10px;
-}
</style>
\ No newline at end of file
--
Gitblit v1.9.3