异步通道刷新，优化ui效果

web_src/src/components/dialog/SyncChannelProgress.vue

@@ -0,0 +1,102 @@
+<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) {
+            this.syncStatus = "success"
+            this.percentage = 100;
+            this.msg = '同步成功';
+          }else if (res.data.data.total == 0){
+            this.msg = `等待同步中`;
+            this.timmer = setTimeout(this.getProgress, 300)
+          }else if (res.data.data.errorMsg !== null ){
+            this.msg = res.data.data.errorMsg;
+            this.syncStatus = "exception"
+          }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 (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>