组件封装

<template>
  <div class="taskLogBox">
    <el-popover placement="bottom" trigger="click" ref="popover">
      <div slot="reference" style="margin-top:2px">
        <i
          class="el-icon-sort"
          style="font-size:18px;font-weight: bold;color: #5a5e66;"
        ></i>
      </div>
      <div class="taskLog">
        <div class="uploadList">
          <div class="TABLESPACES">传输列表</div>
          <div class="mt20">
            <div
              :class="
                uploadType == 'setData'
                  ? 'nd-upload-dialog__left-btn is-active'
                  : 'nd-upload-dialog__left-btn'
              "
              @click="handleUploadType('setData')"
            >
              数据集({{ successNumSetData }})
            </div>
            <div
              :class="
                uploadType == 'testData'
                  ? 'nd-upload-dialog__left-btn is-active'
                  : 'nd-upload-dialog__left-btn'
              "
              @click="handleUploadType('testData')"
            >
              测试集({{ successNumTestData }})
            </div>
          </div>
        </div>
        <div class="flex1">
          <div>
            上传完成({{
              uploadType == "setData" ? successNumSetData : successNumTestData
            }}/{{
              uploadType == "setData"
                ? listsetData.length
                : listtestData.length
            }})
          </div>
          <div class="fileList">
            <template v-if="uploadType == 'setData'">
              <div v-for="(item, index) in listsetData" :key="index">
                <div class="itemFile">
                  <div>{{ item.file.name }}</div>
                  <el-progress :percentage="item.percentage"></el-progress>
                </div>
              </div>
            </template>
            <template v-if="uploadType == 'testData'">
              <div v-for="(item, index) in listtestData" :key="index">
                <div class="itemFile">
                  <div>{{ item.file.name }}</div>
                  <el-progress :percentage="item.percentage"></el-progress>
                </div>
              </div>
            </template>
            <div class="notData">- 仅展示本次上传任务 -</div>
          </div>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import { importImages } from "@/api/data/dataSet";
export default {
  data() {
    return {
      listsetData: [],//不同任务类型列表数据  当前总数量
      listtestData: [],//不同任务类型列表数据 当前总数量
      successNumSetData: 0,
      successNumTestData: 0,
    };
  },
  computed: {
    uploadType() {
      return this.$store.state.app.uploadType; //上传任务类型
    },
    setData() {
      return this.$store.state.app.setData;
    },
    testData() {
      return this.$store.state.app.testData;
    },
  },
  watch: {
    uploadType: {
      handler(val) {
        // if(val=='setData'){
        //     this.list = this.setData
        // }else{
        //     this.list = this.testData
        // }
      },
      deep: true,
      immediate: true,
    },
    setData: {
      handler(val) {
        this.$refs.popover.doShow();
        this.listsetData = this.listsetData.concat(val);
        //新上传 数据开始 下标索引值
        let num = this.listsetData.length - val.length;
        this.upLoadFileArrSetData(num);
      },
      deep: true,
    },
    testData: {
      handler(val) {
        this.$refs.popover.doShow();
        this.listtestData = this.listtestData.concat(val);
        //新上传 数据开始 下标索引值
        let num = this.listtestData.length - val.length;
        this.upLoadFileArrTestData(num);
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    handleUploadType(type) {
        //切换当前任务类型
      this.$store.commit("app/setUploadType", type);
    },
    upLoadFileArrSetData(num) {
      if (num > this.listsetData.length - 1) {
        this.$store.commit(
          "app/setupdataImages",
          !this.$store.state.app.updataImages
        );
        return;
      }
      let formData = new FormData();
      formData.append("setId", this.listsetData[num].setId);
      formData.append(
        "originalFilePath",
        this.listsetData[num].file.webkitRelativePath
      );
      formData.append("imageFile", this.listsetData[num].file);
      this.listsetData[num]["percentage"] = 0;
      importImages({
        url: "/data/dataImage/importImages",
        data: formData,
        onUploadProgress: (progressEvent) => {
          //原生获取上传进度的事件
          if (progressEvent.lengthComputable) {
            //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
            //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
            this.listsetData[num].percentage =
              (progressEvent.loaded / progressEvent.total) * 100; //实时获取上传进度
            this.$forceUpdate();
          }
        },
      })
        .then((res) => {
          this.successNumSetData += 1;

          if (num > this.listsetData.length - 1) {
            this.$store.commit(
              "app/setupdataImages",
              !this.$store.state.app.updataImages
            );
            //检测页面更新
            return;
          }
          this.upLoadFileArrSetData(num + 1);
        })
        .catch((err) => {});
    },
    upLoadFileArrTestData(num) {
      if (num > this.listtestData.length - 1) {
        this.$store.commit(
          "app/setupdataImages",
          !this.$store.state.app.updataImages
        );
        return;
      }
      let formData = new FormData();
      formData.append("setId", this.listtestData[num].setId);
      formData.append(
        "originalFilePath",
        this.listtestData[num].file.webkitRelativePath
      );
      formData.append("imageFile", this.listtestData[num].file);
      this.listtestData[num]["percentage"] = 0;
      importImages({
        url: "/data/dataImage/importImages",
        data: formData,
        onUploadProgress: (progressEvent) => {
          //原生获取上传进度的事件
          if (progressEvent.lengthComputable) {
            //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
            //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
            this.listtestData[num].percentage =
              (progressEvent.loaded / progressEvent.total) * 100; //实时获取上传进度
            this.$forceUpdate();
          }
        },
      })
        .then((res) => {
          this.successNumTestData += 1;
          if (num > this.listtestData.length - 1) {
            //检测页面更新
            this.$store.commit(
              "app/setupdataImages",
              !this.$store.state.app.updataImages
            );
            return;
          }
          this.upLoadFileArrTestData(num + 1);
        })
        .catch((err) => {
          // if (num > this.listtestData.length - 1) return
          // this.upLoadFileArrSetData(num + 1)
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.taskLogBox {
  margin: 0 5px;
}

.taskLog {
  width: 700px;
  height: 400px;
  display: flex;
}

.uploadList {
  width: 145px;
  flex-shrink: 0;
  border-right: 1px solid #eee;
  margin-right: 10px;
}

.TABLESPACES {
  color: #878c9c;
  letter-spacing: 0;
  line-height: 16px;
}

.nd-upload-dialog__left-btn {
  border-radius: 10px;
  padding-left: 12px;
  margin-top: 4px;
  display: block;
  width: 120px;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}

.is-active {
  color: #06a7ff;
  background-color: #eef9fe;
}

.fileList {
  padding-top: 10px;
  margin-top: 20px;
  border-top: 1px solid #eee;
  height: 300px;
  overflow-y: auto;
}

.notData {
  text-align: center;
  margin-top: 20px;
}

.itemFile {
  padding: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}
</style>

store

import Cookies from 'js-cookie'

const state = {

  setData:[],
  testData:[],
  uploadType:"setData",
  updataImages:false//检测 文件上传是否结束
}

const mutations = {
  setupdataImages: (state, updataImages) => {
    state.updataImages =updataImages
  },
  setSetData: (state, setData) => {
    setData.forEach(element => {
      //1 未开始上传 2 上传中 3 上传成功 4 上传失败
      element['status'] = 1
    });
    state.setData =setData
  },
  setTestData: (state, testData) => {
    testData.forEach(element => {
      //1 未开始上传 2 上传中 3 上传成功 4 上传失败
      element['status'] = 1
    });
    state.testData = testData
  },
  setUploadType: (state, uploadType) => {
    state.uploadType = uploadType
  },

}



export default {
  namespaced: true,
  state,
  mutations,
}