epmet-work-pc/src/views/modules/base/smartImport/cpts/executeTask.vue

<template>
  <div class="">
    <div class="content_box">
      <div class="left">
        <img class="rotate" src="@/assets/images/index/loading.png" alt="" />
        <p>请您耐心等待！如果您发现导入数据问题较多，可以取消导入</p>
       <div>
        <el-button
          style="margin-left: 10px"
          size="small"
          type="primary"
          @click="handelClickBackList"
          >返回任务列表</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          class="diy-button--white"
          plain
          @click="handelClickBack"
          >取消导入</el-button
        >
       </div>
      </div>
      <div class="right">
        <h4>
          <el-icon
            class="el-icon-warning-outline"
            style="color: #0056d6; font-size: 18px; font-weight: 600"
          ></el-icon>
          操作说明
        </h4>
        <p>1、导入数据多大，系统需要一定事件处理。</p>
        <p>
          2、导入过程中可查看导入明细，如果发现导入数据问题较多，可以取消本次导入，重新整理数据后，重新创建任务导入。
        </p>
        <p>3、导入失败的数据，您可以下载失败文件，修改后重新创建任务导入</p>
      </div>
    </div>
    <h3 class="title-small">数据导入明细</h3>
        <el-row type="flex" justify="" >
            <el-col :span="24">
              {{this.importSuccessNum || '--'}}条数据已导入。<el-button type="text" @click="handelClickLook('success')">查看</el-button>
            </el-col>
        </el-row>
        <el-row type="flex" justify="" >
            <el-col :span="24">
              {{this.importFailNum || '--'}}条问题数据导入失败。<el-button type="text" @click="handelClickLook('fail')">查看</el-button>
            </el-col>
        </el-row>
        <!-- <el-dialog title="列表"
                   :visible.sync="dialogVisible"
                   width="50%">
          <el-table :data="tableDate"
                    border
                    style="width: 100%">
            <el-table-column type="设置类型"> 
            </el-table-column>
            <el-table-column prop="渲染绑定的表数据tableDate中的哪个数据"
                             label="显示名字"
                             width="180">
            </el-table-column>
          </el-table>
          <span slot="footer"
                class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary"
                       @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog> -->
  </div>
</template>
    <script>
import { requestPost,requestGet} from "@/js/dai/request";

export default {
  data() {
    return {
      rules: {
        importCategory: [
          { required: true, message: "请选择任务类型", trigger: "change" },
        ],
        taskName: [
          { required: true, message: "请输入任务名称", trigger: "change" },
        ],
      },
      resident_category_import_list: [],
      taskId:null,
      timerId:null,
      importSuccessNum:null,
      importFailNum:null,
      importCategory:null,
    };
  },
  props: {
    fileCode:{
      type:String,
      default:''
    }
  },
 async created() {
   await this.getTaskInfo();
  //  await this.getQuaryExcelDataList()
   await this.startTimer();
  },
  methods: {
    startTimer() {
      if (!this.timerId ) {
        this.timerId = setInterval(this.getProcessRate, 3000);
      }
    },
    // 停止定时器
    stopTimer() {
      clearInterval(this.timerId);
      this.timerId = null; 
    },
    async getProcessRate() {
      let url = '/actual/base/intelligentImportData/processRate'
      let parm = {
        fileCode:this.fileCode
      }
     let res= await requestPost(url, parm)
     if(res.code == 0){
        if(res.data == 100){
          this.stopTimer()
        }
     }else if(code >= 8000){
      this.$message.error(msg);
     }
    },
    async getTaskInfo () {
      let url = '/actual/base/intelligentImportData/getTaskInfo'
      let parm = {
        fileCode:this.fileCode
      }
     let {data,code,msg} = await requestPost(url, parm)
     if(code == 0){
        this.taskId = data.taskId;
        this.importFailNum = data.importFailNum.toString();
        this.importSuccessNum = data.importSuccessNum.toString();
        this.importCategory = data.importCategory
        if(data.processStatus != 'processing'){
          this.stopTimer()
        }
     }else if(code >= 8000){
      this.$message.error(msg);
     }
      // this.$emit("handelClickUpload");
    },
    async handelClickLook (type) {
      let url = '/actual/base/excelDataShow/quaryExcelDataList'
      let parm = {
        taskId:this.taskId,
        boolranFlag:type == 'success'?'1':'0',
        pageNo:1,
        pageSize:20,
        importCategory:this.importCategory
      }
     let {data,code,msg} = await requestPost(url, parm)
     if(code == 0){
        console.log(data);
     }else if(code >= 8000){
      this.$message.error(msg);
     }
      // this.$emit("handelClickUpload");
    },
   
    async cancelTask(){
      let url = '/actual/base/intelligentImportData/cancelTask'
      let parm = {
        fileCode:this.fileCode,
        taskId:this.taskId
      }
     let {data,code,msg} = await requestPost(url, parm)
     if(code == 0){
        console.log(data);
        this.$message.info('任务已取消');
        this.$emit("handelClickBack");
     }else if(code >= 8000){
      this.$message.error(msg);
     }
    },
    handelClickBack() {
        this.$confirm(`您确定要取消本次数据导入任务吗`, {
                    confirmButtonText: '确定',
                    cancelButtonText: '再想想',
                    type: 'warning'
                }).then(() => {
                  this.cancelTask()
                }).catch(() => {
                });
    },

    handelClickBackList(){
      this.$emit("handelClickBack");
    }
  },
  destroyed(){
    this.stopTimer()
  },
  components: {},
  computed: {},
  watch: {},
};
</script>
    <style lang="scss" scoped>
@import "@/assets/scss/buttonstyle.scss";
@import "@/assets/scss/modules/management/detail-main.scss";
@import "@/assets/scss/pages/smartImport.scss";
.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #838383;
}
</style>