| <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> |