package.json

@@ -34,6 +34,7 @@
    "nprogress": "0.2.0",
    "pinia": "2.1.7",
    "print-js": "^1.6.0",
    "qr-scanner": "^1.4.2",
    "qrcode": "^1.5.4",
    "splitpanes": "3.1.5",
    "vue": "3.4.31",

 src/api/inspectionUpload/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,43 @@
// å·¡æ£€ä¸Šä¼ 
import request from '@/utils/request'

// äºŒç»´ç ç®¡ç†è¡¨æŸ¥è¯¢
export function qrCodeList(query) {
    return request({
        url: '/qrCode/list',
        method: 'get',
        params: query
    })
}
// äºŒç»´ç æ‰«ç è®°å½•è¡¨æŸ¥è¯¢
export function qrCodeScanRecordList(query) {
    return request({
        url: '/qrCodeScanRecord/list',
        method: 'get',
        params: query
    })
}
// äºŒç»´ç ç®¡ç†è¡¨æ–°å¢žä¿®æ”¹
export function addOrEditQrCode(query) {
    return request({
        url: '/qrCode/addOrEditQrCode',
        method: 'post',
        data: query
    })
}
// äºŒç»´ç æ‰«ç è®°å½•è¡¨æ–°å¢žä¿®æ”¹
export function addOrEditQrCodeRecord(query) {
    return request({
        url: '/qrCodeScanRecord/addOrEditQrCodeRecord',
        method: 'post',
        data: query
    })
}
// äºŒç»´ç æ‰«ç è®°å½•è¡¨æ–°å¢žä¿®æ”¹
export function delQrCode(query) {
    return request({
        url: '/qrCode/delQrCode',
        method: 'delete',
        data: query
    })
}

 src/components/Echarts/echarts.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,152 @@
<template>
  <div>
    <div ref="chartRef" :style="chartStyle"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watchEffect } from 'vue'
import * as echarts from 'echarts'

// Props
const props = defineProps({
  options: {
    type: Object,
    default: () => ({})
  },
  chartStyle: {
    type: Object,
    default: () => ({
      height: '80%',
      width: '100%'
    })
  },
  dataset: {
    type: Object,
    default: () => {}
  },
  xAxis: {
    type: Array,
    default: () => []
  },
  yAxis: {
    type: Array,
    default: () => []
  },
  series: {
    type: Array,
    default: () => []
  },
  grid: {
    type: Object,
    default: () => ({})
  },
  legend: {
    type: Object,
    default: () => ({})
  },
  tooltip: {
    type: Object,
    default: () => ({})
  },
  lineColors: {
    type: Array,
    default: () => []
  },
  barColors: {
    type: Array,
    default: () => []
  },
  pieColors: {
    type: Array,
    default: () => []
  },
  loadingOption: {
    type: Object,
    default: () => ({
      text: '数据加载中...',
      color: '#00BAFF',
      textColor: '#000',
      maskColor: 'rgba(255, 255, 255, 0.8)',
      zlevel: 0
    })
  }
})

import { watch } from 'vue'

// Refs
const chartRef = ref(null)
let chartInstance = null

// Methods
function generateChart(option) {
  const copiedOption = JSON.parse(JSON.stringify(option)) // âœ… æ·±æ‹·è´
  
  // if (copiedOption.series && copiedOption.series.length > 0) {
  //   copiedOption.series.forEach((s, index) => {
  //     if (s.type === 'line') {
  //       s.itemStyle = {
  //         color: props.lineColors[index] || props.lineColors[0]
  //       }
  //       s.lineStyle = {
  //         color: props.lineColors[index] || props.lineColors[0]
  //       }
  //     } else if (s.type === 'bar') {
  //       s.itemStyle = {
  //         color: props.barColors[index] || props.barColors[0]
  //       }
  //     }
  //   })
  // }
  
  chartInstance.setOption(copiedOption)
}

function renderChart() {
  const option = {
    backgroundColor: props.options.backgroundColor || '#fff',
    xAxis: props.xAxis,
    yAxis: props.yAxis,
    dataset: props.dataset,
    series: props.series,
    grid: props.grid,
    legend: props.legend,
    tooltip: props.tooltip
  }
  
  chartInstance.clear()
  generateChart(option)
}

function windowResizeListener() {
  if (!chartInstance) return
  chartInstance.resize()
}

// Lifecycle hooks
onMounted(() => {
  chartInstance = echarts.init(chartRef.value)
  renderChart()
  window.addEventListener('resize', windowResizeListener)
})

onBeforeUnmount(() => {
  if (chartInstance) {
    window.removeEventListener('resize', windowResizeListener)
    chartInstance.dispose()
    chartInstance = null
  }
})

// Watch all reactive props that affect the chart
watch(
    () => [props.xAxis, props.series],
    () => {
      if (chartInstance) {
        renderChart()
      }
    },
    { deep: true, immediate: true }
)
</script>

 src/views/index.vue

@@ -88,8 +88,8 @@
        <div class="card-header">
          <h3>销售数据</h3>
        </div>
        <el-table 
          :data="salesData" 
        <el-table
          :data="salesData"
          style="width: 100%"
          :header-cell-style="tableHeaderStyle"
        >
@@ -98,7 +98,7 @@
          <el-table-column prop="amount" label="金额" width="90"></el-table-column>
          <el-table-column prop="status" label="状态" width="70">
            <template #default="scope">
              <el-tag 
              <el-tag
                :type="scope.row.status === '已完成' ? 'success' : 'warning'"
                size="small"
              >

 src/views/inspectionManagement/components/qrCodeDia.vue

@@ -5,15 +5,15 @@
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="设备名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入设备名称" maxlength="30" />
            <el-form-item label="设备名称" prop="deviceName">
              <el-input v-model="form.deviceName" placeholder="请输入设备名称" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="地点" prop="taxTrans">
              <el-input v-model="form.taxTrans" placeholder="请输入地点" maxlength="30"/>
            <el-form-item label="所在位置描述" prop="location">
              <el-input v-model="form.location" placeholder="请输入所在位置描述" maxlength="30"/>
            </el-form-item>
          </el-col>
        </el-row>
@@ -31,7 +31,8 @@
<script setup>
import useUserStore from "@/store/modules/user.js";
import {reactive, ref} from "vue";
import printJS from 'print-js'; // å¼•å…¥ print.js
import printJS from 'print-js';
import {addOrEditQrCode} from "@/api/inspectionUpload/index.js";

const { proxy } = getCurrentInstance()
const emit = defineEmits()
@@ -40,16 +41,18 @@
const isShowQrCode = ref(false);
const operationType = ref('add');

const qrCodeValue = ref('https://example.com');
const qrCodeValue = ref('');
const qrCodeSize = ref(100);
const data = reactive({
  form: {
    name: '',
    taxTrans: '',
    deviceName: '',
    location: '',
    qrCodeId: '',
    id: ''
  },
  rules: {
    name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
    taxTrans: [{ required: true, message: '请输入地点', trigger: 'blur' }]
    deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
    location: [{ required: true, message: '请输入地点', trigger: 'blur' }]
  }
})
const { form, rules } = toRefs(data)
@@ -58,22 +61,40 @@
// æ‰“开弹框
const openDialog = async (type, row) => {
  dialogVisitable.value = true
  qrCodeValue.value = ''
  isShowQrCode.value = false;
  if (type === 'edit') {
    form.value.id = row.id
    form.value.qrCodeId = row.id
    form.value.deviceName = row.deviceName
    form.value.location = row.location
    // å°†è¡¨å•æ•°æ®è½¬ä¸º JSON å­—符串作为二维码内容
    qrCodeValue.value = JSON.stringify(form.value);
    isShowQrCode.value = true;
  }
}
// æäº¤åˆå¹¶è¡¨å•
const submitForm = () => {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      addOrEditQrCode(form.value).then((res) => {
        form.value.qrCodeId = res.data
      })
      // å°†è¡¨å•æ•°æ®è½¬ä¸º JSON å­—符串作为二维码内容
      qrCodeValue.value = JSON.stringify(form.value);
      isShowQrCode.value = true;
      
      // å»¶è¿Ÿæ‰§è¡Œæ‰“印，避免 DOM æ›´æ–°å‰å°±è°ƒç”¨æ‰“印
      setTimeout(() => {
        printJS({
          printable: 'qrCodeContainer',//页面
          type: "html",//文档类型
          maxWidth: 360,
          style: `@page {
      showQrCode()
    }
  })
}
const showQrCode = () => {
  // å»¶è¿Ÿæ‰§è¡Œæ‰“印，避免 DOM æ›´æ–°å‰å°±è°ƒç”¨æ‰“印
  setTimeout(() => {
    printJS({
      printable: 'qrCodeContainer',//页面
      type: "html",//文档类型
      maxWidth: 360,
      style: `@page {
                margin:0;
                size: 400px 75px collapse;
                margin-top:3px;
@@ -89,12 +110,10 @@
                height: 75px;
                margin:0;
              }`,
          targetStyles: ["*"], // ä½¿ç”¨dom的所有样式，很重要
          font_size: '0.20cm',
        });
      }, 300);
    }
  })
      targetStyles: ["*"], // ä½¿ç”¨dom的所有样式，很重要
      font_size: '0.20cm',
    });
  }, 300);
}
// å…³é—­åˆå¹¶è¡¨å•
const cancel = () => {

 src/views/inspectionManagement/components/viewQrCodeFiles.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,169 @@
<template>
  <div>
    <el-dialog title="查看附件"
               v-model="dialogVisitable" width="800px" @close="cancel">
      <div class="upload-container">
        <div class="form-container">
          <div class="title">巡检附件</div>
          <!-- å›¾ç‰‡åˆ—表 -->
          <div style="display: flex; flex-wrap: wrap;">
            <img v-for="(item, index) in beforeProductionImgs" :key="index"
                 @click="showMedia(beforeProductionImgs, index, 'image')"
                 :src="item" style="max-width: 100px; height: 100px; margin: 5px;" alt="">
          </div>
          
          <!-- è§†é¢‘列表 -->
          <div style="display: flex; flex-wrap: wrap;">
            <div
                v-for="(videoUrl, index) in beforeProductionVideos"
                :key="index"
                @click="showMedia(beforeProductionVideos, index, 'video')"
                style="position: relative; margin: 10px; cursor: pointer;"
            >
              <div style="width: 160px; height: 90px; background-color: #333; display: flex; align-items: center; justify-content: center;">
                <img src="@/assets/images/video.png" alt="播放" style="width: 30px; height: 30px; opacity: 0.8;" />
              </div>
              <div style="text-align: center; font-size: 12px; color: #666;">点击播放</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- ç»Ÿä¸€åª’体查看器 -->
    <div v-if="isMediaViewerVisible" class="media-viewer-overlay" @click.self="closeMediaViewer">
      <div class="media-viewer-content" @click.stop>
        <!-- å›¾ç‰‡ -->
        <vue-easy-lightbox
            v-if="mediaType === 'image'"
            :visible="isMediaViewerVisible"
            :imgs="mediaList"
            :index="currentMediaIndex"
            @hide="closeMediaViewer"
        ></vue-easy-lightbox>
        
        <!-- è§†é¢‘ -->
        <div v-else-if="mediaType === 'video'" style="position: relative;">
          <Video
              :src="mediaList[currentMediaIndex]"
              autoplay
              controls
              style="max-width: 90vw; max-height: 80vh;"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// æŽ§åˆ¶å¼¹çª—显示
import VueEasyLightbox from "vue-easy-lightbox";

const dialogVisitable = ref(false);
// å›¾ç‰‡æ•°ç»„
const beforeProductionImgs = ref([]);
// è§†é¢‘数组
const beforeProductionVideos = ref([]);
// åª’体查看器状态
const isMediaViewerVisible = ref(false);
const currentMediaIndex = ref(0);
const mediaList = ref([]); // å­˜å‚¨å½“前要查看的媒体列表（含图片和视频对象）
const mediaType = ref('image'); // image | video

// æ‰“开弹窗并加载数据
const openDialog = async (row) => {
  const { images: beforeImgs, videos: beforeVids } = processItems(row.storageBlobDTO);
  
  beforeProductionImgs.value = beforeImgs;
  beforeProductionVideos.value = beforeVids;
  dialogVisitable.value = true;
};
// æ˜¾ç¤ºåª’体（图片 or è§†é¢‘）
function showMedia(mediaArray, index, type) {
  mediaList.value = mediaArray;
  currentMediaIndex.value = index;
  mediaType.value = type;
  isMediaViewerVisible.value = true;
}
// å…³é—­åª’体查看器
function closeMediaViewer() {
  isMediaViewerVisible.value = false;
  mediaList.value = [];
  mediaType.value = 'image';
}
// è¡¨å•å…³é—­æ–¹æ³•
const cancel = () => {
  dialogVisitable.value = false;
};
// å¤„理每一类数据：分离图片和视频
function processItems(items) {
  const images = [];
  const videos = [];
  items.forEach(item => {
    if (item.contentType?.startsWith('image/')) {
      images.push(item.url);
    } else if (item.contentType?.startsWith('video/')) {
      videos.push(item.url);
    }
  });
  return { images, videos };
}
defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  
  .form-container {
    flex: 1;
    width: 100%;
    margin-bottom: 20px;
  }
}

.title {
  font-size: 14px;
  color: #165dff;
  line-height: 20px;
  font-weight: 600;
  padding-left: 10px;
  position: relative;
  margin: 6px 0;
  
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 4px;
    height: 14px;
    background-color: #165dff;
  }
}

.media-viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-viewer-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
}
</style>

 src/views/inspectionManagement/index.vue

@@ -37,7 +37,7 @@
        />
      </el-tabs>
      <!-- æ“ä½œæŒ‰é’®åŒº -->
      <el-space>
      <el-space v-if="tabName !== 'qrCodeScanRecord'">
        <el-button type="primary" :icon="Plus" @click="handleAdd">新建</el-button>
        <el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
        <el-button type="info" plain :icon="Download">导出</el-button>
@@ -46,16 +46,37 @@
        <div>
          <ETable :loading="tableLoading"
                  :table-data="tableData"
                  :columns="columns"
                  :columns="tableColumns"
                  @selection-change="handleSelectionChange"
                  :show-selection="true"
                  :border="true"
                  :maxHeight="480"
                  operationsWidth="130"
                  :operations="['edit', 'viewFile']"
                  :operations="operationsArr"
                  @edit="handleAdd"
                  @viewFile="viewFile"
                  v-if="tabName !== 'qrCodeScanRecord'"
          ></ETable>
          <el-table ref="table" :data="tableData" height="480" v-loading="tableLoading" v-else>
            <el-table-column label="序号" type="index" width="60" align="center" />
            <el-table-column prop="deviceName" label="设备名称" :show-overflow-tooltip="true">
              <template #default="scope">
                {{scope.row.qrCode.deviceName}}
              </template>
            </el-table-column>
            <el-table-column prop="location" label="所在位置描述" :show-overflow-tooltip="true">
              <template #default="scope">
                {{scope.row.qrCode.location}}
              </template>
            </el-table-column>
            <el-table-column prop="scanner" label="巡检人"></el-table-column>
            <el-table-column prop="scanTime" label="巡检时间"></el-table-column>
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button link type="primary" @click="handleAdd(scope.row)">查看附件</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
            v-if="total>0"
@@ -70,6 +91,7 @@
    <form-dia ref="formDia" @closeDia="handleQuery"></form-dia>
    <qr-code-dia ref="qrCodeDia" @closeDia="handleQuery"></qr-code-dia>
    <view-files ref="viewFiles"></view-files>
    <view-qr-code-files ref="viewQrCodeFiles"></view-qr-code-files>
  </div>
</template>

@@ -83,10 +105,13 @@
import QrCodeDia from "@/views/inspectionManagement/components/qrCodeDia.vue";
import {delInspectionTask, inspectionTaskList} from "@/api/inspectionManagement/index.js";
import ViewFiles from "@/views/inspectionManagement/components/viewFiles.vue";
import {delQrCode, qrCodeList, qrCodeScanRecordList} from "@/api/inspectionUpload/index.js";
import ViewQrCodeFiles from "@/views/inspectionManagement/components/viewQrCodeFiles.vue";

const formDia = ref()
const qrCodeDia = ref()
const viewFiles = ref()
const viewQrCodeFiles = ref()
// æŸ¥è¯¢å‚æ•°
const queryParams = reactive({
  supplierName: "",
@@ -99,10 +124,13 @@
const tabs = reactive([
  { name: "task", label: "任务下发" },
  { name: "qrCode", label: "二维码管理" },
  { name: "qrCodeScanRecord", label: "现场巡检记录" },
]);
// è¡¨æ ¼
const selectedRows = ref([]);
const tableData = ref([]);
const operationsArr = ref([]);
const tableColumns = ref([]);
const tableLoading = ref(false);
const total = ref(0);
const pageNum = ref(1);
@@ -115,6 +143,12 @@
  { prop: "registrant", label: "登记人", minWidth: 100 },
  { prop: "createTime", label: "登记日期", minWidth: 100 },
]);
const columns1 = ref([
  { prop: "deviceName", label: "设备名称", minWidth: 160 },
  { prop: "location", label: "所在位置描述", minWidth: 120 },
  { prop: "createBy", label: "创建者", minWidth: 100 },
  { prop: "createTime", label: "创建时间", minWidth: 100 },
]);

onMounted(() => {
  handleTabClick({ props: { name: "task" } });
@@ -123,6 +157,13 @@
const handleTabClick = (tab) => {
  tabName.value = tab.props.name;
  tableData.value = [];
  if (tabName.value === "task") {
    tableColumns.value = columns.value;
    operationsArr.value = ['edit', 'viewFile']
  } else {
    tableColumns.value = columns1.value;
    operationsArr.value = ['edit']
  }
  getList();
};
// ç‚¹å‡»æŸ¥è¯¢
@@ -133,12 +174,26 @@
}
const getList = () => {
  tableLoading.value = true;
  inspectionTaskList({...queryParams, size: pageSize.value, current: pageNum.value}).then(res => {
    console.log(res)
    tableLoading.value = false;
    tableData.value = res.data.records;
    total.value = res.data.total;
  })
  if (tabName.value === "task") {
    inspectionTaskList({...queryParams, size: pageSize.value, current: pageNum.value}).then(res => {
      tableLoading.value = false;
      tableData.value = res.data.records;
      total.value = res.data.total;
    })
  } else if (tabName.value === "qrCode") {
    qrCodeList({...queryParams, 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 resetQuery = () => {
@@ -156,8 +211,10 @@
  nextTick(() => {
    if (tabName.value === "task") {
      formDia.value?.openDialog(type, row)
    } else {
    } else if (tabName.value === "qrCode") {
      qrCodeDia.value?.openDialog(type, row)
    } else {
      viewQrCodeFiles.value?.openDialog(row)
    }
  })
};
@@ -175,7 +232,7 @@
  }
  const deleteIds = selectedRows.value.map(item => item.id);
  proxy.$modal.confirm('是否确认删除所选数据项？').then(function() {
    return delInspectionTask(deleteIds)
    return delQrCode(deleteIds)
  }).then(() => {
    handleQuery()
    proxy.$modal.msgSuccess("删除成功")

 src/views/inspectionUpload/components/qrCodeFormDia.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,175 @@
<template>
  <div>
    <el-dialog
        title="巡检"
        v-model="dialogVisitable"
        width="400px"
        @close="cancel"
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input v-model="form.deviceName" placeholder="请输入设备名称" maxlength="30" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="地点" prop="location">
              <el-input v-model="form.location" placeholder="请输入地点" maxlength="30" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="附件" prop="taxTrans">
              <fileUpload
                  :statusType="0"
                  ref="beforeProductionRef"
                  :fileSize="1024"
                  :fileType="['mp3', 'mp4', 'avi', 'mov', 'mkv']"
                  :limit="10"
                  :drag="false"
                  v-model:modelValue="form.storageBlobDTO"
              >
              </fileUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="巡检人" prop="scannerName">
              <el-input v-model="form.scannerName" disabled placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="巡检时间" prop="scanTime">
              <el-input v-model="form.scanTime" disabled placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import {ElMessage} from "element-plus";
import fileUpload from "@/components/FileUpload/index.vue";
import {uploadInspectionTask} from "@/api/inspectionManagement/index.js";
import useUserStore from "@/store/modules/user.js";
import {addOrEditQrCodeRecord} from "@/api/inspectionUpload/index.js";

const emit = defineEmits(['closeDia']);
const dialogVisitable = ref(false);
const { proxy } = getCurrentInstance()
const storageBlobDTO = ref([]);
const beforeProductionRef = ref(null);
const userStore = useUserStore();
const userInfo = ref({});

function getCurrentDateTime() {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
const data = reactive({
  form: {
    deviceName: '',
    location: '',
    scannerName: '',
    scannerId: '',
    scanTime: '',
    qrCode: {
      id: ''
    }
  },
  rules: {
    deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
    location: [{ required: true, message: '请输入地点', trigger: 'blur' }]
  }
})
const { form, rules } = toRefs(data)

// è°ƒç”¨å‡½æ•°
const currentDateTime = getCurrentDateTime();

// èŽ·å–用户信息
onMounted(async () => {
  let res = await userStore.getInfo();
  userInfo.value = res.user;
  form.value.scannerName = userInfo.value.nickName
  form.value.scannerId = userInfo.value.userId
  form.value.scanTime = currentDateTime
});

// æ‰“开弹框
const openDialog = async (row) => {
  dialogVisitable.value = true;
  form.value.deviceName = row.deviceName
  form.value.location = row.location
  form.value.qrCodeId = row.qrCodeId
};
const submitForm = async () => {
  form.value.qrCode.id = form.value.qrCodeId
  await addOrEditQrCodeRecord({...form.value});
  cancel()
  ElMessage.success("提交成功");
};
// å…³é—­åˆå¹¶è¡¨å•
const cancel = () => {
  proxy.resetForm("formRef");
  dialogVisitable.value = false;
  emit("closeDia");
};
defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  .form-container {
    flex: 1;
    width: 100%;
    margin-bottom: 20px;
  }
}
.title {
  font-size: 14px;
  color: #165dff;
  line-height: 20px;
  font-weight: 600;
  padding-left: 10px;
  position: relative;
  margin: 6px 0;
}
.title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px; /* è°ƒæ•´åž‚直位置 */
  width: 4px; /* å°æ•°æ¡å®½åº¦ */
  height: 14px; /* å°æ•°æ¡é«˜åº¦ */
  background-color: #165dff; /* è“è‰² */
}
</style>

 src/views/inspectionUpload/index.vue

@@ -15,8 +15,46 @@
        />
      </el-tabs>
      <div>
        <!-- æ‰«ç æ¨¡å— -->
        <div v-if="activeTab === 'qrCode'" class="scan-section">
          <div class="scan-controls">
            <el-button
                type="primary"
                :loading="scanLoading"
                @click="toggleScan"
            >
              {{ scanButtonText }}
            </el-button>
          </div>
          
          <!-- æ‰«ç è§†é¢‘容器 -->
          <div v-show="isScanning" class="qr-video-container">
            <video
                ref="qrVideo"
                class="qr-video"
                playsinline
                webkit-playsinline
            ></video>
            <div class="scan-overlay"></div>
          </div>
          
          <!-- çŠ¶æ€æç¤º -->
          <div class="status-info">
            <el-alert
                v-if="cameraError"
                :title="cameraError"
                type="error"
                show-icon
                closable
            />
            <div v-if="isScanning" class="scanning-text">
              <el-icon :color="statusColor"><Loading /></el-icon>
              æ­£åœ¨æ‰«æäºŒç»´ç ...
            </div>
          </div>
        </div>
        <div>
          <el-table ref="table" :data="tableData" height="480" v-loading="tableLoading">
          <el-table ref="table" :data="tableData" height="480" v-loading="tableLoading" v-if="activeTab !== 'qrCode'">
            <el-table-column label="序号" type="index" width="60" align="center" />
            <el-table-column prop="taskName" label="巡检任务名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="port" label="地点" :show-overflow-tooltip="true"></el-table-column>
@@ -25,6 +63,26 @@
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button link type="primary" @click="handleAdd(scope.row)">上传</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-table ref="table" :data="tableData" height="480" v-loading="tableLoading" v-if="activeTab === 'qrCode'">
            <el-table-column label="序号" type="index" width="60" align="center" />
            <el-table-column prop="deviceName" label="设备名称" :show-overflow-tooltip="true">
              <template #default="scope">
                {{scope.row.qrCode.deviceName}}
              </template>
            </el-table-column>
            <el-table-column prop="location" label="所在位置描述" :show-overflow-tooltip="true">
              <template #default="scope">
                {{scope.row.qrCode.location}}
              </template>
            </el-table-column>
            <el-table-column prop="scanner" label="巡检人"></el-table-column>
            <el-table-column prop="scanTime" label="巡检时间"></el-table-column>
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button link type="primary" @click="viewFile(scope.row)">查看附件</el-button>
              </template>
            </el-table-column>
          </el-table>
@@ -40,22 +98,31 @@
      </div>
    </el-card>
    <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>
  </div>
</template>

<script setup>
import Pagination from "@/components/Pagination/index.vue";
import {inspectionTaskList} from "@/api/inspectionManagement/index.js";
import {onMounted, ref} from "vue";
import FormDia from "@/views/inspectionUpload/components/formDia.vue";
import {ElMessage} from "element-plus";
import QrScanner from 'qr-scanner'
import QrCodeFormDia from "@/views/inspectionUpload/components/qrCodeFormDia.vue";
import {qrCodeList, qrCodeScanRecordList} from "@/api/inspectionUpload/index.js";
import {inspectionTaskList} from "@/api/inspectionManagement/index.js";
import ViewQrCodeFiles from "@/views/inspectionManagement/components/viewQrCodeFiles.vue";
const formDia = ref()
const qrCodeFormDia = ref()
const viewQrCodeFiles = ref()
// å½“前标签
const activeTab = ref("task");
const tabName = ref("task");
// æ ‡ç­¾é¡µæ•°æ®
const tabs = reactive([
  { name: "task", label: "任务下发" },
  { name: "qrCode", label: "二维码管理" },
  { name: "task", label: "生产巡检" },
  { name: "qrCode", label: "现场巡检" },
]);
// è¡¨æ ¼
const tableData = ref([]);
@@ -63,10 +130,32 @@
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
// æ‰«ç ç›¸å…³çŠ¶æ€
const qrVideo = ref(null)
const isScanning = ref(false)
const scanLoading = ref(false)
const cameraError = ref(null)
const scanner = ref(null)
const hasInit = ref(false)

onMounted(() => {
const statusColor = computed(() => {
  return isScanning.value ? '#67C23A' : '#F56C6C'
})
// ç”Ÿå‘½å‘¨æœŸç®¡ç†ä¼˜åŒ–
onMounted(async () => {
  handleTabClick({ props: { name: "task" } });
});
  if (!import.meta.env.SSR && QrScanner) { // [!code focus]
    await initScanner()
  }
})

onBeforeUnmount(async () => {
  if (scanner.value) {
    await scanner.value.destroy()
    scanner.value = null
  }
  hasInit.value = false
})
// æ ‡ç­¾é¡µç‚¹å‡»
const handleTabClick = (tab) => {
  tabName.value = tab.props.name;
@@ -81,11 +170,19 @@
}
const getList = () => {
  tableLoading.value = true;
  inspectionTaskList({size: pageSize.value, current: pageNum.value}).then(res => {
    tableLoading.value = false;
    tableData.value = res.data.records;
    total.value = res.data.total;
  })
  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 handleAdd = (row) => {
@@ -93,10 +190,181 @@
    formDia.value?.openDialog(row)
  })
}
// æŸ¥çœ‹é™„件
const viewFile = (row) => {
  nextTick(() => {
    viewQrCodeFiles.value?.openDialog(row)
  })
}
// æ‰«ç æŒ‰é’®æ–‡æœ¬
const scanButtonText = computed(() => {
  if (scanLoading.value) return '正在初始化...'
  return isScanning.value ? '停止扫码' : '开始扫码'
})

// å¢žå¼ºåž‹åˆå§‹åŒ–
const initScanner = async () => {
  try {
    await nextTick() // ç¡®ä¿DOM更新
    // æ–°å¢žå¤šé‡ç©ºå€¼æ ¡éªŒ
    if (!qrVideo.value || !QrScanner) {
      throw new Error('依赖未正确初始化')
    }
    // å¢žåŠ æ‘„像头权限预检查
    const hasCamera = await QrScanner.hasCamera()
    if (!hasCamera) {
      throw new Error('未检测到可用摄像头')
    }
    // æ˜¾å¼é”€æ¯æ—§å®žä¾‹
    if (scanner.value) {
      await scanner.value.destroy()
    }
    // åˆ›å»ºæ–°å®žä¾‹
    scanner.value = new QrScanner(
        qrVideo.value,
        result => {
          handleScanSuccess(result)
          // stopScan()
        },
        {
          preferredCamera: 'environment',
          maxScansPerSecond: 5,
          returnDetailedScanResult: true
        }
    )
    // æ–°å¢žç¡¬ä»¶åŠ é€Ÿæ£€æµ‹
    if (!scanner.value._qrWorker) {
      throw new Error('硬件加速不可用')
    }
    hasInit.value = true
  } catch (e) {
    // handleInitError(e)
  }
}
// æ‰«ææˆåŠŸå¤„理
const handleScanSuccess = async (result) => {
  try {
    // æ·»åŠ æ•°æ®æ ¡éªŒ
    ElMessage.success('识别成功')
    callBackendAPI(JSON.parse(result.data))
    await stopScan()
  } catch (error) {
    ElMessage.warning(error.message)
    await startScan() // æ•°æ®æ— æ•ˆæ—¶ç»§ç»­æ‰«æ
  }
}
const callBackendAPI = (result) => {
  nextTick(() => {
    qrCodeFormDia.value?.openDialog(result)
  })
}
// åˆ‡æ¢æ‰«ç çŠ¶æ€
const toggleScan = async () => {
  if (isScanning.value) {
    await stopScan()
  } else {
    await startScan()
  }
}

// å¢žå¼ºå¯åŠ¨æ–¹æ³•
const startScan = async () => {
  if (!scanner.value || !hasInit.value) { // æ–°å¢žçŠ¶æ€æ£€æŸ¥
    await initScanner()
  }
  
  try {
    await scanner.value.start()
    isScanning.value = true
  } catch (e) {
    ElMessage.error(`启动失败: ${e.message}`)
    hasInit.value = false
  }
}

// åœæ­¢æ‰«ç 
const stopScan = async () => {
  try {
    await scanner.value.stop()
    isScanning.value = false
  } catch (err) {
    console.error('停止摄像头失败:', err)
  }
}


// é”™è¯¯å¤„理增强
const handleInitError = (error) => {
  console.error('初始化失败:', error)
  const msg = {
    'NotAllowedError': '请允许摄像头权限',
    'NotFoundError': '未找到摄像头设备',
    'NotSupportedError': '浏览器不支持扫码功能'
  }[error.name] || error.message
  
  ElMessage.error(`初始化失败: ${msg}`)
}

</script>

<style scoped>
.qr-video-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.qr-video {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.scan-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  border: 3px solid #409eff;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(64, 158, 255, 0.3);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 0.4; }
  100% { opacity: 0.8; }
}

.status-info {
  margin-top: 16px;
  text-align: center;
}

.scanning-text {
  color: #409eff;
  margin-top: 8px;
}

.table-section {
  margin-top: 24px;
}

/* ç§»åŠ¨ç«¯ä¼˜åŒ– */
@media (max-width: 768px) {
  .qr-video-container {
    height: 60vh;
  }
  
  .el-table {
    font-size: 12px;
  }
}
</style>