分析追溯

gaoluyang

2025-09-24 752b14d2caa47ccceac328f79389fbf5e2e62ce4

 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的扫码API
    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 // 添加二维码ID
      // 如果不是JSON格式，尝试从URL中提取deviceId
      const url = result.result
      
      if (url.includes('deviceId=')) {
        // 从URL中提取deviceId
        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 // 使用提取的deviceId或原始结果
      }
    }
    
    // 如果有设备ID，尝试从API获取真实的设备名称
    if (deviceId) {
      try {
        console.log('正在查询设备信息，设备ID:', 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 {
    // 如果组件引用不存在，等待下一个tick
    console.log('组件引用不存在，等待nextTick')
    nextTick(() => {
      console.log('nextTick后弹框组件引用:', qrCodeFormDia.value)
      if (qrCodeFormDia.value) {
        console.log('nextTick后调用弹框openDialog方法')
        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>