无人机管理后台前端(已迁走)
罗广辉
2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9
src/views/dataCenter/dataCenter.vue
@@ -7,10 +7,13 @@
      ref="searchBoxRef"
      :searchjobId="searchjobId"
      :switchFolders="switchFolders"
      :switchStar = "switchStar"
        @search="searchClick"
        @downFun="downloadFile"
        @allDownFun="aLLDownloadFile"
        @handleswitchFolders="handleswitchFolders"
        @handleswitchList="handleswitchList"
        @handleStartList="handleStartList"
        @handleBack ="handleBack"
       :viewDetails ="viewDetails"
@@ -145,7 +148,7 @@
              <span>{{ resultTypeMap[row?.resultType] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
          <el-table-column label="操作" width="240" align="center">
            <template #default="scope">
              <el-button icon="el-icon-view" type="text" @click="lookDetail(scope.row)"
                >查看</el-button
@@ -164,6 +167,22 @@
              >
                <img :src="positionicon" class="custom-icon" />定位</el-button
              >
              <el-button type="text" @click="handleStar(scope.row)"><el-icon><Star /></el-icon>{{ scope.row.isFavorite ? '取消收藏':'收藏' }}</el-button>
              <el-popover
                placement="top-start"
                title="扫二维码分享"
                :width="148"
                trigger="click"
                popper-class="custom-qrcode-popover-share"
                @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>
@@ -343,6 +362,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 {
@@ -351,7 +371,7 @@
  deleteFileMultipleApi,
  downloadApi,
  updataTitleApi,
  getOrthoimageInfo, getDownloadStatusApi,getJobIdsBySnApi
  getOrthoimageInfo, getDownloadStatusApi,getJobIdsBySnApi, starAdd, cancelStar
} from '@/api/dataCenter/dataCenter';
const userInfo = computed(() => store.getters.userInfo);
const isShow = defineModel('show');
@@ -362,6 +382,7 @@
const currentAreaPosition = ref({ height: 1987280, latitude: 27.636112, longitude: 115.732975 });
let handler = null;
const switchFolders = ref(false)
const switchStar = ref(false)
function bytesToMB(bytes, decimalPlaces = 2) {
  if (typeof bytes !== 'number' || bytes < 0) return '0';
  return (bytes / 1048576).toFixed(decimalPlaces) + ' MB';
@@ -442,7 +463,7 @@
  current: 1,
  size: 10,
  orderByCreateTime: true,
  searchParams: { startTime: timeRange[0], endTime: timeRange[1] },
  searchParams: { startTime: timeRange[0], endTime: timeRange[1], isFavorite: false },
});
const FolderListParams = reactive({
    page: 1,
@@ -521,10 +542,20 @@
    getaiImagesPage();
  }
};
// 列表
function handleswitchList() {
  switchFolders.value = false;
  switchStar.value = false;
  jobListParams.current = 1;
  jobListParams.size = 10;
  jobListParams.searchParams.isFavorite = false;
  getaiImagesPage();
}
// 切换文件夹
 const handleswitchFolders = () => {
 searchjobId.value = ''
     switchFolders.value = !switchFolders.value;
     switchFolders.value = true;
     switchStar.value = false;
     jobListParams.current = 1;
     FolderListParams.page = 1;
@@ -541,7 +572,15 @@
   }
   const searchBoxRef = ref(null);
// 收藏列表
const handleStartList = () => {
  switchFolders.value = false;
  switchStar.value = true;
  jobListParams.current = 1;
  jobListParams.size = 10;
  jobListParams.searchParams.isFavorite = true;
  getaiImagesPage();
}
// 查询
const searchClick = params => {
  if(switchFolders.value){
@@ -882,6 +921,57 @@
    })
  }
}
// 收藏 or 取消收藏
function handleStar(row) {
  if (row.isFavorite) {
    cancelStar(row.id).then(res => {
      ElMessage.success('取消收藏成功')
      getaiImagesPage();
    })
  } else {
    starAdd({ attachId: row.id }).then(res => {
      ElMessage.success('收藏成功')
      getaiImagesPage();
    })
  }
}
// 分享
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();
  // 监听打开全景事件
@@ -897,6 +987,11 @@
  viewInstance.value?.viewerDestroy();
});
</script>
<style lang="scss">
.custom-qrcode-popover-share {
  width: 120px;
}
</style>
<style scoped lang="scss">
.dataCenter-table {
  height: 0;