无人机管理后台前端(已迁走)
chenyao
2025-08-15 05372af7adb6368eeea11bc6bdebfcc56c3aecd7
src/views/dataCenter/components/searchData.vue
@@ -20,6 +20,7 @@
            v-model="searchForm.deviceSn"
            placeholder="请选择"
            clearable
            @change="handleSearch"
          >
            <el-option
              v-for="item in machineData"
@@ -37,7 +38,7 @@
            popper-class="custom-date-picker"
            v-model="dateRange"
            type="daterange"
            :clearable="false"
            :clearable="true"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
@@ -62,12 +63,14 @@
            v-model="searchForm.resultType"
            placeholder="请选择"
            clearable
             @change="handleSearch"
          >
            <el-option
              v-for="item in fileFormatOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
         :disabled="searchForm.photoType !== '' && item.value === '4'"
            />
          </el-select>
        </el-form-item>
@@ -78,6 +81,8 @@
            v-model="searchForm.photoType"
            placeholder="请选择"
            clearable
            @clear="changePhotoType"
             @change="handleSearch"
          >
            <el-option
              v-for="item in CategoryOption"
@@ -99,12 +104,18 @@
      </div>
      <div class="search-first">
        <div class="search-btn">
          <el-button type="primary" icon="el-icon-download" @click="allDownloadFun"
            >全部下载</el-button
          >
          <el-button type="success" plain icon="el-icon-download" @click="downloadFun"
            >下载</el-button
          >
<!--          <el-button type="primary" icon="el-icon-download" @click="allDownloadFun"-->
<!--            >全部下载</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">
              <span v-if="htsjzx === 100">下载</span>
              <template v-else>
                处理中<el-icon @click="cancelDownload"><CircleClose /></el-icon>
              </template>
            </div>
          </div>
        </div>
      </div>
    </el-form>
@@ -118,9 +129,13 @@
import { useStore } from 'vuex';
import { getRegionTreeAll, getDeviceRegion, deptsByAreaCode } from '@/api/job/task';
import { watch } from 'vue';
import { cancelDownloadApi, getDownloadStatusApi } from '@/api/dataCenter/dataCenter';
import EventBus from '@/utils/eventBus';
const store = useStore();
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', 'downFun', 'allDownFun']);
const startTime = dayjs().subtract(6, 'day').startOf('day');
const endTime = dayjs().endOf('day');
@@ -163,10 +178,12 @@
  {
    value: '5',
    label: '全景',
  },
  {
    value: '4',
    label: '正射',
  },
];
const CategoryOption = [
@@ -190,7 +207,11 @@
  },
  { deep: true }
);
const changePhotoType =(val)=>{
if(val === undefined){
  searchForm.photoType = ''
}
}
// 部门
let deptTreeData = ref([]);
// 机巢
@@ -204,9 +225,9 @@
    const start = dayjs(val[0]);
    const end = dayjs(val[1]);
    const diff = end.diff(start, 'day');
    if (diff > 31) {
      ElMessage.warning('日期范围不能超过31天');
 const maxDays = 365;
    if (diff > maxDays) {
      ElMessage.warning('日期范围不能超过一年');
      dateRange.value = [];
      // 重置为默认时间范围
      setTimeout(() => {
@@ -218,8 +239,9 @@
    // 更新搜索表单中的时间
    searchForm.startTime = start.format(timeFormat);
    searchForm.endTime = end.format(timeFormat);
    handleSearch()
  }
  //handleSearch();
};
// 部门下得机巢
const requestDockInfo = () => {
@@ -245,6 +267,7 @@
  deptData.value = [];
  getDeptsByAreaCode();
  handleSearch();
};
// 所属部门信息
const getDeptsByAreaCode = () => {
@@ -293,8 +316,20 @@
const allDownloadFun = () => {
  emit('allDownFun');
};
function cancelDownload() {
  cancelDownloadApi({ type:'htsjzx' }).then(res =>{
    ElMessage.success('取消成功')
  })
}
onMounted(() => {
  requestDockInfo();
  getDownloadStatusApi({type: 'htsjzx'}).then(res =>{
    if (!['CANCELLED','COMPLETED'].includes(res.data.data?.status || 'COMPLETED')){
      EventBus.emit('useDownloadWs-messageHandler',res.data.data)
    }
  })
});
</script>
@@ -312,6 +347,50 @@
    .search-btn {
      margin-right: 32px;
      .downloadBtn{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 28px;
        padding: 0 15px;
        background: rgb(239.8,248.9,235.3);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid rgb(179,224.5,156.5);
        cursor: pointer;
        color: #67c23a;
        font-size: 14px;
        .downloadBtnText{
          display: flex;
          align-items: center;
          gap: 5px;
          z-index: 5;
        }
        .el-progress{
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          :deep(){
            .el-progress-bar__outer{
              height: 26px !important;
              border-radius: 0 !important;
              background: transparent !important;
              .el-progress-bar__inner{
                border-radius: 0 !important;
                background-color: #e5ffd9;
              }
            }
          }
        }
      }
    }
    .time-card {
      text-align: center;