无人机管理后台前端(已迁走)
chenyao
2025-09-17 78bf59d8e0106ccf2acdd5bc4e3a6e510e1e5cbf
src/views/dataCenter/dataCenter.vue
@@ -4,21 +4,26 @@
  >
    <div class="dataCenter-table">
      <searchData
      ref="searchBoxRef"
      :searchjobId="searchjobId"
      :switchFolders="switchFolders"
        @search="searchClick"
        @downFun="downloadFile"
        @allDownFun="aLLDownloadFile"
        @handleswitchFolders="handleswitchFolders"
        @handleStartList="handleStartList"
        @handleBack ="handleBack"
       :viewDetails ="viewDetails"
      ></searchData>
      <!-- 文件夹 -->
      <div v-if="switchFolders" class="dataTable">
            <el-table
         class="custom-header custom-body"
          v-loading="loadings"
          element-loading-text=""
          :data="folderList"
          :data="folderList"
            @selection-change="foldersSelectionChange"
        >
          <el-table-column type="selection" width="55" />
@@ -31,17 +36,17 @@
              }}
            </template>
          </el-table-column>
          <el-table-column property="name" label="任务名称" show-overflow-tooltip />
          <el-table-column property="recordName" label="任务名称" show-overflow-tooltip />
           <el-table-column property="regionName" label="所属区域">
             <template #default="scope">
              <span>{{scope.row.regionName ? scope.row.regionName :'--'}}</span>
              <span>{{scope.row.city_name ? scope.row.city_name :'--'}},{{scope.row.area_name ? scope.row.area_name :'--'}}</span>
            </template>
            </el-table-column>
            </el-table-column>
          <el-table-column property="nickname" label="所属机巢" >
             <template #default="scope">
              <span>{{scope.row.nickname ? scope.row.nickname :'--'}}</span>
            </template>
            </el-table-column>
            </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button icon="el-icon-view" type="text" @click="foldersOpen(scope.row)"
@@ -53,7 +58,8 @@
      </div>
      <!-- 表格部分 -->
      <div class="dataTable" v-else>
        <el-table
        <el-table
        border
          v-loading="loadings"
          element-loading-text=""
          :data="tableData"
@@ -140,7 +146,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
@@ -159,6 +165,22 @@
              >
                <img :src="positionicon" class="custom-icon" />定位</el-button
              >
              <el-button type="text" @click="handleStar"><el-icon><Star /></el-icon>收藏</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>
@@ -338,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 {
@@ -445,7 +468,8 @@
    startTime: jobListParams.searchParams.startTime?.slice(0, 10),
    endTime: jobListParams.searchParams.endTime?.slice(0, 10),
     waylineName:'',
    dockSn:'',
    areaCode:''
});
const tableData = ref([]);
// 获取列表数据
@@ -477,75 +501,95 @@
      console.error('获取数据失败:', error);
    })
    .finally(() => {
      loadings.value = false;
      loadings.value = false;
    });
};
const folderList = ref([])
// 获取文件夹数据
const getFolderList=()=>{
 loadings.value = true;
 const apiParams = {
    ...FolderListParams,
  };
  getJobIdsBySnApi(apiParams)
    loadings.value = true;
    const apiParams = {
      ...FolderListParams,
      };
    getJobIdsBySnApi(apiParams)
      .then(res => {
    folderList.value = res.data.data.records.map(i => ({ ...i, checked: false }))
    total.value = res.data.data.total
    total.value = res.data.data.total
      })
      .finally(() => {
        loadings.value = false;
        loadings.value = false;
      })
}
const searchjobId = ref('')
const viewDetails = ref('')
// 文件夹查看
const foldersOpen = (val)=>{
    loadings.value = true;
    tableData.value=[]
    searchjobId.value = val.job_id
    switchFolders.value = false
    viewDetails.value = true
}
// 获取数据时使用各自的分页参数
const fetchData = () => {
  if (switchFolders.value) {
    getFolderList();
  } else {
    getaiImagesPage();
    getaiImagesPage();
  }
};
// 切换文件夹
 const handleswitchFolders = (val) => {
 const handleswitchFolders = () => {
 searchjobId.value = ''
     switchFolders.value = !switchFolders.value;
     jobListParams.current = 1;
     FolderListParams.page = 1;
     fetchData();
     searchBoxRef.value?.handleReset();
      fetchData();
   };
   const handleBack =()=>{
    searchjobId.value = ''
    switchFolders.value = true
    viewDetails.value = false
    jobListParams.current = 1;
    FolderListParams.page = 1;
     fetchData();
   }
   const searchBoxRef = ref(null);
// 收藏列表
const starList = ref([])
const handleStartList = () => {
}
// 查询
const searchClick = params => {
  if(switchFolders.value){
    FolderListParams.page = 1;
    FolderListParams.page_size = 10;
    FolderListParams.startTime = params?.startTime?.slice(0, 10);
    FolderListParams.startTime = params?.startTime?.slice(0, 10);
    FolderListParams.endTime = params?.endTime?.slice(0, 10);
    FolderListParams.waylineName=params?.jobName,
   FolderListParams.dockSn = params?.deviceSn
   FolderListParams.areaCode = params?.areaCode
    getFolderList()
  }else{
     jobListParams.current = 1;
      jobListParams.size = 10;
      jobListParams.searchParams = {
      ...jobListParams.searchParams,
      ...params
      ...jobListParams.searchParams,
      ...params
    };
    getaiImagesPage()
  }
};
const handleSizeChange = (val) => {
  if (switchFolders.value) {
    FolderListParams.page_size = val;
    FolderListParams.page_size = val;
  } else {
    jobListParams.size = val;
    jobListParams.size = val;
  }
  fetchData();
};
@@ -572,7 +616,7 @@
 folderList.value.forEach(item => {
    item.checked = val.some(foldersselected => foldersselected.id === item.id);
  });
  foldersSelectedRows.value = val;
  foldersSelectedRows.value = val;
}
// 删除
const deleteDetail = val => {
@@ -749,6 +793,7 @@
    flatMode: false,
    terrain: false,
    mapFilter: true,
    layerMode: 4
  });
  viewer = viewInstance.value.getViewer();
  viewerRef.value = viewer;
@@ -859,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();
  // 监听打开全景事件
@@ -874,6 +958,11 @@
  viewInstance.value?.viewerDestroy();
});
</script>
<style lang="scss">
.custom-qrcode-popover-share {
  width: 120px;
}
</style>
<style scoped lang="scss">
.dataCenter-table {
  height: 0;
@@ -928,7 +1017,7 @@
            img {
               width: 111px;
               height: 111px;
            }
            .el-checkbox {
@@ -952,7 +1041,7 @@
               font-size: 14px;
               color: #ffffff;
               line-height: 23px;
               display: flex;
               align-items: center;
               justify-content: space-between;
@@ -1133,4 +1222,4 @@
    }
  }
}
</style>
</style>