feat:增加分享功能

chenyao

2025-09-15 4cb451a9867e3cafa84e931ddcc7736f0ae852bb

feat:增加分享功能

 src/views/dataCenter/components/searchData.vue

@@ -112,7 +112,9 @@
<!--          <el-button type="primary" icon="el-icon-download" @click="allDownloadFun"-->
<!--            >全部下载</el-button-->
<!--          >-->
        
        <el-button v-if="!viewDetailsDisabled" type="primary" plain  @click="handleswitchFolders" ><el-icon><FolderOpened /></el-icon></el-button>
        <el-button @click="handleStartList"><el-icon><Star /></el-icon></el-button>
          <div class="downloadBtn" @click="htsjzx === 100 && downloadFun()">
            <el-progress v-if="htsjzx !== 100" :percentage="htsjzx" :show-text="false" striped striped-flow :duration="1" />
            <div class="downloadBtnText">
@@ -142,7 +144,7 @@
const userAreaCode = computed(() => store.getters.userInfo.detail.areaCode);
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode);
const htsjzx = computed(() => store.state.common.downloadProgress?.htsjzx || 100)
const emit = defineEmits(['search', 'Reset','downFun', 'allDownFun','handleswitchFolders','handleBack']);
const emit = defineEmits(['search', 'Reset','downFun', 'allDownFun','handleswitchFolders','handleBack', 'handleStartList']);
const startTime = dayjs().subtract(6, 'day').startOf('day');
const endTime = dayjs().endOf('day');
const timeRange = [startTime.format('YYYY-MM-DD HH:mm:ss'), endTime.format('YYYY-MM-DD HH:mm:ss')];
@@ -353,6 +355,10 @@
const handleswitchFolders =()=>{
  emit('handleswitchFolders'); 
}
// 收藏列表
const handleStartList =()=>{
  emit('handleStartList');
}
// 返回按钮
const handleBack = ()=>{
  emit('handleBack'); 

 src/views/dataCenter/dataCenter.vue

@@ -11,6 +11,7 @@
        @downFun="downloadFile"
        @allDownFun="aLLDownloadFile"
        @handleswitchFolders="handleswitchFolders"
        @handleStartList="handleStartList"
        @handleBack ="handleBack"
       :viewDetails ="viewDetails"

@@ -164,8 +165,22 @@
              >
                <img :src="positionicon" class="custom-icon" />定位</el-button
              >
              <el-button type="text" @click="handleStart"><el-icon><Star /></el-icon>收藏</el-button>
              <el-button type="text" @click="handleShare"><el-icon><Share /></el-icon>分享</el-button>
              <el-button type="text" @click="handleStar"><el-icon><Star /></el-icon>收藏</el-button>
              <el-popover
                placement="top-start"
                title="扫二维码分享"
                :width="160"
                trigger="click"
                popper-class="custom-qrcode-popover"
                @show="handleShare(scope.row)"
              >
                <template #reference>
                  <el-button type="text"><el-icon><Share /></el-icon>分享</el-button>
                </template>
                <div class="qrcode-content">
                  <div class="myQrCode" :id="`myQrCode-${scope.row.id}`" :ref="setQrCodeRef(scope.row.id)"></div>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
@@ -345,6 +360,7 @@
import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue'; //全景
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
import searchData from '@/views/dataCenter/components/searchData.vue';
import QRCode from 'qrcodejs2-fix'
import fy1 from '@/assets/images/dataCenter/1.jpeg';
import _ from 'lodash';
import {
@@ -543,7 +559,11 @@

   }
   const searchBoxRef = ref(null);
// 收藏列表
const starList = ref([])
const handleStartList = () => {

}
// 查询
const searchClick = params => {
  if(switchFolders.value){
@@ -884,6 +904,45 @@
    })
  }
}

// 收藏
function handleStar() {}

// 分享
const myQrCode = ref(null)
let qrCodeInstance = null

const qrCodeRefs = ref({});

// 设置动态ref的方法
const setQrCodeRef = (id) => (el) => {
    if (el) {
        qrCodeRefs.value[id] = el;
    }
};

async function handleShare(row) {
  try {
    await nextTick();
    const qrCodeElement = qrCodeRefs.value[row.id]

    if (qrCodeInstance) {
      qrCodeInstance.clear();
      qrCodeInstance = null;
      qrCodeElement.innerHTML = '';
    }
    // await nextTick();
    qrCodeInstance = new QRCode(qrCodeElement, {
      width: 130,
      height: 130,
      text: row.link,
    });
    qrCodeElement.removeAttribute('title');
  } catch (error) {
    console.error('生成二维码失败:', error);
  }
}

onMounted(() => {
  getaiImagesPage();
  // 监听打开全景事件