feat: 下载逻辑

罗广辉

2025-08-08 46cdda27d21f30b4e87018e76e438d11c75c7108

 src/views/dataCenter/components/searchData.vue

@@ -101,12 +101,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>
@@ -120,9 +126,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');
@@ -165,7 +175,7 @@
  {
    value: '5',
    label: '全景',
    

  },
  {
    value: '4',
@@ -301,8 +311,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>

@@ -320,6 +342,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;