wvp/web_src/src/components/dialog/SyncChannelProgress.vue

<template>
  <div id="SyncChannelProgress" v-loading="isLoging">
    <el-dialog
      width="240px"
      top="13%"
      :append-to-body="true"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
      :destroy-on-close="true"
      :show-close="true"
      @close="close()"
     style="text-align: center">
      <el-progress type="circle" :percentage="percentage" :status="syncStatus"></el-progress>
      <div style="text-align: center">
        {{msg}}
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "SyncChannelProgress",
  computed: {},
  props: ['platformId'],
  created() {},
  data() {
    return {
      syncStatus: null,
      percentage: 0,
      total: 0,
      current: 0,
      showDialog: false,
      isLoging: false,
      syncFlag: false,
      deviceId: null,
      timmer: null,
      msg: "正在同步",
    };
  },
  methods: {
    openDialog: function (deviceId) {
      console.log("deviceId: " + deviceId)
      this.deviceId = deviceId;
      this.showDialog = true;
      this.msg = "";
      this.percentage= 0;
      this.total= 0;
      this.current= 0;
      this.syncFlag= false;
      this.syncStatus = null;
      this.getProgress()
    },
    getProgress(){
      this.$axios({
        method: 'get',
        url:`/api/device/query/${this.deviceId}/sync_status/`,
      }).then((res) => {
        if (res.data.code === 0) {
          if (!this.syncFlag) {
            this.syncFlag = true;
          }

          if (res.data.data != null) {
            if (res.data.data.syncIng) {
              if (res.data.data.total == 0) {
                this.msg = `等待同步中`;
                this.timmer = setTimeout(this.getProgress, 300)
              }else {
                this.total = res.data.data.total;
                this.current = res.data.data.current;
                this.percentage = Math.floor(Number(res.data.data.current)/Number(res.data.data.total)* 10000)/100;
                this.msg = `同步中...[${res.data.data.current}/${res.data.data.total}]`;
                this.timmer = setTimeout(this.getProgress, 300)
              }
            }else {
              if (res.data.data.errorMsg){
                this.msg = res.data.data.errorMsg;
                this.syncStatus = "exception"
              }else {
                this.syncStatus = "success"
                this.percentage = 100;
                this.msg = '同步成功';
                setTimeout(()=>{
                  this.showDialog = false;
                }, 3000)
              }
            }
          }
        }else {
          if (this.syncFlag) {
            this.syncStatus = "success"
            this.percentage = 100;
            this.msg = '同步成功';
          }else {
            this.syncStatus = "error"
            this.msg = res.data.msg;
          }
        }
      }).catch((error) =>{
        console.log(error);
        this.syncStatus = "error"
        this.msg = error.response.data.msg;
      });
    },
    close: function (){
      window.clearTimeout(this.timmer)
    }
  },
};
</script>