From 98b00c97565276acd51a9e188f8f2bf9ed0f6ebc Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 31 十二月 2025 13:32:33 +0800
Subject: [PATCH] 陕西昭德型煤： 1.现场巡检上传附件查看附件修改联调
---
src/pages/inspectionUpload/index.vue | 917 ++++++++++++++++++++++-----------------------------------
1 files changed, 352 insertions(+), 565 deletions(-)
diff --git a/src/pages/inspectionUpload/index.vue b/src/pages/inspectionUpload/index.vue
index aed4e6e..4f257c1 100644
--- a/src/pages/inspectionUpload/index.vue
+++ b/src/pages/inspectionUpload/index.vue
@@ -1,643 +1,430 @@
<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>
-
- <!-- 鏁版嵁鍒楄〃 -->
- <view class="table-section">
- <!-- 鐢熶骇宸℃鍒楄〃 -->
- <view v-if="activeTab === 'task'" class="task-list">
- <view
- v-for="(item, index) in tableData"
- :key="index"
- class="task-item"
- @click="handleAdd(item)"
- >
- <view class="task-header">
- <view class="task-info">
- <text class="task-name">{{ item.taskName }}</text>
- <text class="task-location">{{ item.inspectionLocation }}</text>
- </view>
- <view class="task-actions">
- <u-button
- type="primary"
- size="small"
- @click.stop="handleAdd(item)"
- :customStyle="{
- borderRadius: '15px',
- height: '30px',
- fontSize: '12px'
- }"
- >
- 涓婁紶
- </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"
- size="small"
- @click.stop="viewFile(item)"
- :customStyle="{
- borderRadius: '15px',
- height: '30px',
- fontSize: '12px'
- }"
- >
- 鏌ョ湅闄勪欢
- </u-button>
- </view>
- </view>
- <view class="qr-details">
- <view class="detail-item">
- <text class="detail-label">宸℃浜猴細</text>
- <text class="detail-value">{{ item.scanner }}</text>
- </view>
- <view class="detail-item">
- <text class="detail-label">宸℃鏃堕棿锛�</text>
- <text class="detail-value">{{ item.scanTime }}</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>
- </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>
-
- <!-- 寮圭獥缁勪欢 -->
- <form-dia ref="formDia" @closeDia="handleQuery"></form-dia>
- <qr-code-form-dia ref="qrCodeFormDia" @closeDia="handleQuery"></qr-code-form-dia>
- </view>
+ <view class="app-container">
+ <!-- 椤甸潰澶撮儴 -->
+ <PageHeader title="宸℃涓婁紶" @back="goBack"/>
+ <view class="card-container">
+ <!-- 鏍囩椤� -->
+ <u-tabs
+ :list="tabs"
+ :current="activeTabIndex"
+ @change="handleTabChange"
+ :scrollable="false"
+ lineWidth="30"
+ lineColor="#2979ff"
+ :activeStyle="{
+ color: '#2979ff',
+ fontWeight: 'bold'
+ }"
+ />
+ <view>
+ <!-- 鎵爜妯″潡 -->
+ <view v-if="activeTab === 'qrCode'" class="scan-section">
+ <view class="scan-controls">
+ <u-button
+ type="primary"
+ :loading="scanLoading"
+ @click="toggleScan"
+ >
+ {{ scanButtonText }}
+ </u-button>
+ </view>
+
+ <!-- 鐘舵�佹彁绀� -->
+ <view class="status-info">
+ <u-alert
+ v-if="cameraError"
+ :title="cameraError"
+ type="error"
+ :show-icon="true"
+ :closable="true"
+ @close="cameraError = null"
+ />
+ <view v-if="isScanning" class="scanning-text">
+ <u-loading-icon mode="spinner" :color="statusColor" />
+ <text>姝ｅ湪鎵弿浜岀淮鐮�...</text>
+ </view>
+ </view>
+ </view>
+ <view>
+ <!-- 鍔犺浇鐘舵�� -->
+ <view v-if="tableLoading" class="loading-container">
+ <u-loading-icon text="鍔犺浇涓�..." />
+ </view>
+
+ <!-- 鐢熶骇宸℃鍒楄〃 -->
+ <view v-else-if="activeTab !== 'qrCode' && tableData.length > 0" class="list-container">
+ <view v-for="(item, index) in tableData" :key="index" class="list-item">
+ <view class="item-content">
+ <view class="item-row">
+ <text class="item-label">宸℃浠诲姟鍚嶇О锛�</text>
+ <text class="item-value">{{ item.taskName || '-' }}</text>
+ </view>
+ <view class="item-row">
+ <text class="item-label">鍦扮偣锛�</text>
+ <text class="item-value">{{ item.inspectionLocation || '-' }}</text>
+ </view>
+ <view class="item-row">
+ <text class="item-label">澶囨敞锛�</text>
+ <text class="item-value">{{ item.remarks || '-' }}</text>
+ </view>
+ <view class="item-row">
+ <text class="item-label">鎵ц宸℃浜猴細</text>
+ <text class="item-value">{{ item.inspector || '-' }}</text>
+ </view>
+ </view>
+ <view class="item-actions">
+ <u-button type="primary" size="small" @click="handleAdd(item)">涓婁紶</u-button>
+ </view>
+ </view>
+ </view>
+
+ <!-- 鐜板満宸℃鍒楄〃 -->
+ <view v-else-if="activeTab === 'qrCode' && tableData.length > 0" class="list-container">
+ <view v-for="(item, index) in tableData" :key="index" class="list-item">
+ <view class="item-content">
+ <view class="item-row">
+ <text class="item-label">璁惧鍚嶇О锛�</text>
+ <text class="item-value">{{ item.deviceName || '-' }}</text>
+ </view>
+ <view class="item-row">
+ <text class="item-label">鎵�鍦ㄤ綅缃弿杩帮細</text>
+ <text class="item-value">{{ item.location || '-' }}</text>
+ </view>
+ <view class="item-row">
+ <text class="item-label">宸℃浜猴細</text>
+ <text class="item-value">{{ item.scanner || '-' }}</text>
+ </view>
+ <view class="item-row">
+ <text class="item-label">宸℃鏃堕棿锛�</text>
+ <text class="item-value">{{ item.scanTime || '-' }}</text>
+ </view>
+ </view>
+ <view class="item-actions">
+ <u-button type="primary" size="small" @click="viewFile(item)">鏌ョ湅闄勪欢</u-button>
+ </view>
+ </view>
+ </view>
+
+ <!-- 绌烘暟鎹� -->
+ <view v-else-if="!tableLoading && tableData.length === 0" class="no-data">
+ <text>鏆傛棤鏁版嵁</text>
+ </view>
+ </view>
+ </view>
+ </view>
+ <form-dia ref="formDia" @closeDia="handleQuery"></form-dia>
+ <qr-code-form-dia ref="qrCodeFormDia" @closeDia="handleQuery"></qr-code-form-dia>
+ <view-qr-code-files ref="viewQrCodeFiles"></view-qr-code-files>
+ </view>
</template>
<script setup>
-import { onMounted, ref, reactive, computed, 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 {inspectionTaskList} from "@/api/inspectionManagement";
-// import ViewQrCodeFiles from '@/pages/inspectionManagement/components/viewQrCodeFiles.vue'
+import { onMounted, ref, reactive, computed, nextTick } from "vue";
+import FormDia from "@/pages/inspectionUpload/components/formDia.vue";
+import { useToast } from '@/utils/uviewplus';
+import QrCodeFormDia from "@/pages/inspectionUpload/components/qrCodeFormDia.vue";
+import { qrCodeList, qrCodeScanRecordList } from "@/api/inspectionUpload/index.js";
+import { inspectionTaskList } from "@/api/inspectionManagement/index.js";
+import ViewQrCodeFiles from "@/components/imageUpload/viewQrCodeFiles.vue";
-// 缁勪欢寮曠敤
-const formDia = ref()
-const qrCodeFormDia = ref()
+const { showToast } = useToast();
+
+const formDia = ref();
+const qrCodeFormDia = ref();
+const viewQrCodeFiles = ref();
// 褰撳墠鏍囩
-const activeTab = ref('task')
-
-const tabName = ref('task')
-const currentTabIndex = ref(0)
+const activeTab = ref("task");
+const activeTabIndex = ref(0);
+const tabName = ref("task");
// 鏍囩椤垫暟鎹�
const tabs = reactive([
- { name: '鐢熶骇宸℃' },
- { name: '鐜板満宸℃' }
-])
+ { name: "鐢熶骇宸℃", value: "task" },
+ { name: "鐜板満宸℃", value: "qrCode" },
+]);
+
// 琛ㄦ牸鏁版嵁
-const tableData = ref([])
-const tableLoading = ref(false)
-const total = ref(0)
-const pageNum = ref(1)
-const pageSize = ref(10)
+const tableData = ref([]);
+const tableLoading = ref(false);
// 鎵爜鐩稿叧鐘舵��
-const isScanning = ref(false)
-const scanLoading = ref(false)
-const cameraError = ref('')
+const isScanning = ref(false);
+const scanLoading = ref(false);
+const cameraError = ref(null);
-// 璁＄畻灞炴��
-const scanButtonText = computed(() => {
- if (scanLoading.value) return '姝ｅ湪鍒濆鍖�...'
- return isScanning.value ? '鍋滄鎵爜' : '寮�濮嬫壂鐮�'
-})
+const statusColor = computed(() => {
+ return isScanning.value ? '#67C23A' : '#F56C6C';
+});
-// 鐢熷懡鍛ㄦ湡
-onMounted(() => {
- // 寤惰繜鍒濆鍖栵紝纭繚DOM宸叉覆鏌�
- nextTick(() => {
- handleTabClick({ props: { name: 'task' } })
- })
-})
-
-onShow(() => {
- // 椤甸潰鏄剧ず鏃跺埛鏂版暟鎹�
- getList()
-})
+// 鐢熷懡鍛ㄦ湡绠＄悊
+onMounted(async () => {
+ handleTabChange({ index: 0 });
+});
// 鏍囩椤靛垏鎹�
-const handleTabChange = (index) => {
- currentTabIndex.value = index
- const tabNames = ['task', 'qrCode']
- activeTab.value = tabNames[index]
- tabName.value = tabNames[index]
- tableData.value = []
- pageNum.value = 1
- getList()
-}
+const handleTabChange = (e) => {
+ const index = typeof e === 'object' && e.index !== undefined ? e.index : e;
+ const selectedTab = tabs[index];
+ if (selectedTab) {
+ activeTab.value = selectedTab.value;
+ activeTabIndex.value = index;
+ tabName.value = selectedTab.value;
+ tableData.value = [];
+ getList();
+ }
+};
-// 鏍囩椤电偣鍑伙紙鍏煎鏃ф柟娉曪級
-const handleTabClick = (tab) => {
- tabName.value = tab.props.name
- activeTab.value = tab.props.name
- tableData.value = []
- getList()
-}
-
-// 鏌ヨ鏁版嵁
+// 鐐瑰嚮鏌ヨ
const handleQuery = () => {
- pageNum.value = 1
- pageSize.value = 10
- getList()
-}
+ 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;
- })
- }
-}
-
-// 鍒嗛〉鍙樺寲
-const handlePageChange = (page) => {
- pageNum.value = page
- getList()
-}
+ tableLoading.value = true;
+ if (tabName.value === "task") {
+ inspectionTaskList({ size: -1, current: -1 }).then(res => {
+ tableLoading.value = false;
+ tableData.value = res.data.records || [];
+ }).catch(err => {
+ tableLoading.value = false;
+ showToast('鑾峰彇鏁版嵁澶辫触', 'error');
+ });
+ } else {
+ qrCodeScanRecordList({ size: -1, current: -1 }).then(res => {
+ tableLoading.value = false;
+ // 澶勭悊鏁版嵁锛屾牸寮忓寲瀛楁
+ tableData.value = (res.data.records || []).map(item => ({
+ ...item,
+ deviceName: item.qrCode?.deviceName || '-',
+ location: item.qrCode?.location || '-'
+ }));
+ }).catch(err => {
+ tableLoading.value = false;
+ showToast('鑾峰彇鏁版嵁澶辫触', 'error');
+ });
+ }
+};
// 涓婁紶
const handleAdd = (row) => {
- nextTick(() => {
- formDia.value?.openDialog(row)
- })
-}
+ console.log('handleAdd 琚皟鐢�', row);
+ console.log('formDia.value:', formDia.value);
+
+ if (!formDia.value) {
+ showToast('缁勪欢鏈垵濮嬪寲', 'error');
+ return;
+ }
+
+ nextTick(() => {
+ if (formDia.value && formDia.value.openDialog) {
+ formDia.value.openDialog(row);
+ } else {
+ console.error('formDia.value.openDialog 涓嶅瓨鍦�');
+ showToast('鎵撳紑寮圭獥澶辫触', 'error');
+ }
+ });
+};
// 鏌ョ湅闄勪欢
const viewFile = (row) => {
- console.log('鏌ョ湅闄勪欢:', row)
- uni.showToast({
- title: '鏌ョ湅闄勪欢鍔熻兘寮�鍙戜腑',
- icon: 'none'
- })
-}
+ nextTick(() => {
+ viewQrCodeFiles.value?.openDialog(row);
+ });
+};
-// 鎵爜鐩稿叧鏂规硶
+// 鎵爜鎸夐挳鏂囨湰
+const scanButtonText = computed(() => {
+ if (scanLoading.value) return '姝ｅ湪鍒濆鍖�...';
+ return isScanning.value ? '鍋滄鎵爜' : '寮�濮嬫壂鐮�';
+});
+
+// 鍒囨崲鎵爜鐘舵��
const toggleScan = async () => {
- if (isScanning.value) {
- await stopScan()
- } else {
- await startScan()
- }
-}
+ if (isScanning.value) {
+ stopScan();
+ } else {
+ startScan();
+ }
+};
-const startScan = async () => {
- try {
- scanLoading.value = true
- // 浣跨敤uniapp鐨勬壂鐮丄PI
- uni.scanCode({
- success: (res) => {
- console.log('鎵爜鎴愬姛:', res)
- handleScanSuccess(res)
- },
- fail: (err) => {
- console.error('鎵爜澶辫触:', err)
- uni.showToast({
- title: '鎵爜澶辫触',
- icon: 'error'
- })
- },
- complete: () => {
- scanLoading.value = false
- }
- })
- } catch (e) {
- console.error('鍚姩鎵爜澶辫触:', e)
- scanLoading.value = false
- uni.showToast({
- title: '鍚姩鎵爜澶辫触',
- icon: 'error'
- })
- }
-}
+// 寮�濮嬫壂鐮�
+const startScan = () => {
+ if (isScanning.value) {
+ showToast('姝ｅ湪鎵弿涓紝璇风◢鍊�...', 'warning');
+ return;
+ }
+
+ scanLoading.value = true;
+
+ // 璋冪敤uni-app鐨勬壂鐮丄PI
+ uni.scanCode({
+ scanType: ['qrCode', 'barCode'],
+ success: (res) => {
+ scanLoading.value = false;
+ handleScanSuccess(res.result);
+ },
+ fail: (err) => {
+ scanLoading.value = false;
+ console.error('鎵爜澶辫触:', err);
+ cameraError.value = '鎵爜澶辫触锛岃閲嶈瘯';
+ setTimeout(() => {
+ cameraError.value = null;
+ }, 3000);
+ }
+ });
+};
-const stopScan = async () => {
- isScanning.value = false
-}
-
-// 鎵爜鎴愬姛澶勭悊
+// 鎵弿鎴愬姛澶勭悊
const handleScanSuccess = async (result) => {
- try {
- console.log('澶勭悊鎵爜缁撴灉:', result)
-
- uni.showToast({
- title: '璇嗗埆鎴愬姛',
- icon: 'success'
- })
-
- // 瑙ｆ瀽浜岀淮鐮佹暟鎹�
- let qrData
- try {
- qrData = JSON.parse(result.result)
- console.log('瑙ｆ瀽鐨勪簩缁寸爜鏁版嵁:', qrData)
- } catch (e) {
- // 濡傛灉涓嶆槸JSON鏍煎紡锛岀洿鎺ヤ娇鐢ㄦ壂鐮佺粨鏋滀綔涓鸿澶囧悕绉�
- qrData = {
- deviceName: result.result,
- location: '',
- qrCodeId: result.result // 娣诲姞浜岀淮鐮両D
- }
- console.log('浣跨敤榛樿鏁版嵁鏍煎紡:', qrData)
- }
-
- // 纭繚鏁版嵁瀹屾暣鎬�
- if (!qrData.deviceName) {
- qrData.deviceName = result.result
- }
- if (!qrData.qrCodeId) {
- qrData.qrCodeId = result.result
- }
-
- callBackendAPI(qrData)
- } catch (error) {
- console.error('澶勭悊鎵爜缁撴灉澶辫触:', error)
- uni.showToast({
- title: error.message || '鏁版嵁瑙ｆ瀽澶辫触',
- icon: 'error'
- })
- }
-}
+ try {
+ if (!result) {
+ showToast('鎵爜缁撴灉涓虹┖', 'warning');
+ return;
+ }
+
+ showToast('璇嗗埆鎴愬姛', 'success');
+
+ // 瑙ｆ瀽浜岀淮鐮佹暟鎹�
+ let qrData;
+ try {
+ qrData = JSON.parse(result);
+ } catch (e) {
+ // 濡傛灉涓嶆槸JSON鏍煎紡锛岀洿鎺ヤ娇鐢ㄥ師濮嬫暟鎹�
+ qrData = { data: result };
+ }
+
+ callBackendAPI(qrData);
+ } catch (error) {
+ showToast(error.message || '澶勭悊鎵爜缁撴灉澶辫触', 'error');
+ }
+};
+// 璋冪敤鍚庣API
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'
- })
- }
- })
- }
-}
+ nextTick(() => {
+ qrCodeFormDia.value?.openDialog(result);
+ });
+};
-
-// 鎵爜澶勭悊
-const handleScanCode = (result) => {
- console.log('鎵爜缁撴灉:', result)
- handleScanSuccess(result)
-}
-
-// 鎽勫儚澶撮敊璇鐞�
-const handleCameraError = (error) => {
- console.error('鎽勫儚澶撮敊璇�:', error)
- cameraError.value = '鎽勫儚澶磋闂け璐ワ紝璇锋鏌ユ潈闄愯缃�'
-}
+// 鍋滄鎵爜
+const stopScan = () => {
+ isScanning.value = false;
+ scanLoading.value = false;
+};
+// 杩斿洖涓婁竴椤�
+const goBack = () => {
+ uni.navigateBack();
+};
</script>
-<style scoped lang="scss">
-.inspection-upload-page {
- min-height: 100vh;
- background-color: #f5f5f5;
+<style scoped>
+.app-container {
+ padding: 20rpx;
+ background-color: #f5f5f5;
+ min-height: 100vh;
}
-.tabs-container {
- background-color: #fff;
- margin: 0;
- border-bottom: 1px solid #e8e8e8;
-}
-
-.custom-tabs {
- display: flex;
- position: relative;
- background-color: #fff;
- width: 100%;
-}
-
-.tab-item {
- flex: 1;
- text-align: center;
- padding: 20px 0;
- font-size: 16px;
- font-weight: 500;
- color: #606266;
- transition: all 0.3s ease;
- cursor: pointer;
- position: relative;
- z-index: 2;
-}
-
-.tab-item.tab-active {
- color: #1890ff;
- font-weight: 600;
-}
-
-.tab-line {
- position: absolute;
- bottom: 0;
- width: 50%;
- height: 3px;
- background-color: #1890ff;
- transition: left 0.3s ease;
+.card-container {
+ background-color: #fff;
+ border-radius: 16rpx;
+ padding: 20rpx;
}
.scan-section {
- background-color: #fff;
- padding: 10px;
+ margin: 20rpx 0;
}
.scan-controls {
- display: flex;
- justify-content: center;
-}
-
-.qr-scan-container {
- position: relative;
- width: 100%;
- max-width: 500px;
- margin: 0 auto;
- background: #000;
- border-radius: 8px;
- overflow: hidden;
-}
-
-.qr-camera {
- width: 100%;
- height: 300px;
-}
-
-.scan-overlay {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 70%;
- height: 70%;
- 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;
- left: 50%;
- transform: translateX(-50%);
- color: #fff;
- font-size: 14px;
- text-align: center;
-}
-
-@keyframes pulse {
- 0% { opacity: 0.8; }
- 50% { opacity: 0.4; }
- 100% { opacity: 0.8; }
+ display: flex;
+ justify-content: center;
+ margin-bottom: 20rpx;
}
.status-info {
- margin-top: 16px;
- text-align: center;
+ margin-top: 32rpx;
+ text-align: center;
}
.scanning-text {
- display: flex;
- align-items: center;
- justify-content: center;
- color: #1890ff;
- margin-top: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #2979ff;
+ margin-top: 16rpx;
+ font-size: 28rpx;
}
-.scanning-label {
- margin-left: 8px;
- font-size: 14px;
+.scanning-text text {
+ margin-left: 10rpx;
}
-.table-section {
- padding: 0 15px;
+.loading-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 40rpx 0;
}
-.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);
- }
+.list-container {
+ margin-top: 20rpx;
}
-.task-header, .qr-header {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- margin-bottom: 10px;
+.list-item {
+ background-color: #fff;
+ border-radius: 16rpx;
+ padding: 24rpx;
+ margin-bottom: 20rpx;
+ border: 1px solid #f0f0f0;
}
-.task-info, .qr-info {
- flex: 1;
+.item-content {
+ margin-bottom: 20rpx;
}
-.task-name, .device-name {
- font-size: 16px;
- font-weight: 600;
- color: #333;
- margin-bottom: 4px;
+.item-row {
+ display: flex;
+ margin-bottom: 16rpx;
+ font-size: 28rpx;
+ line-height: 40rpx;
}
-.task-location, .device-location {
- font-size: 14px;
- color: #666;
+.item-row:last-child {
+ margin-bottom: 0;
}
-.task-actions, .qr-actions {
- margin-left: 10px;
+.item-label {
+ color: #666;
+ width: 200rpx;
+ flex-shrink: 0;
}
-.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;
- }
- }
+.item-value {
+ color: #333;
+ flex: 1;
+ word-break: break-all;
}
-.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;
+.item-actions {
+ display: flex;
+ justify-content: flex-end;
+ padding-top: 20rpx;
+ border-top: 1px solid #f0f0f0;
}
-.loading-text {
- margin-top: 10px;
- font-size: 14px;
- color: #666;
+.no-data {
+ text-align: center;
+ padding: 80rpx 0;
+ color: #999;
+ font-size: 28rpx;
}
-.pagination-container {
- padding: 20px 15px;
- background-color: #fff;
- margin-top: 10px;
+/* 绉诲姩绔紭鍖� */
+@media (max-width: 768px) {
+ .app-container {
+ padding: 10rpx;
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3