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

web_src/src/components/DeviceList.vue

@@ -57,7 +57,7 @@
 
 					<el-table-column label="操作" width="450" align="center" fixed="right">
 						<template slot-scope="scope">
-							<el-button size="mini" :loading="syncDevices.includes(scope.row.deviceId)"  v-if="scope.row.online!=0" icon="el-icon-refresh"  @click="refDevice(scope.row)">刷新</el-button>
+              <el-button size="mini" v-if="scope.row.online!=0" icon="el-icon-refresh" @click="refDevice(scope.row)" @mouseover="getTooltipContent(scope.row.deviceId)">刷新</el-button>
 							<el-button-group>
                 <el-button size="mini" icon="el-icon-video-camera-solid" v-bind:disabled="scope.row.online==0"  type="primary" @click="showChannelList(scope.row)">通道</el-button>
                 <el-button size="mini" icon="el-icon-location" v-bind:disabled="scope.row.online==0"  type="primary" @click="showDevicePosition(scope.row)">定位</el-button>
@@ -78,6 +78,7 @@
 					:total="total">
 				</el-pagination>
         <deviceEdit ref="deviceEdit" ></deviceEdit>
+        <syncChannelProgress ref="syncChannelProgress" ></syncChannelProgress>
 			</el-main>
 		</el-container>
 	</div>
@@ -86,11 +87,13 @@
 <script>
 	import uiHeader from './UiHeader.vue'
 	import deviceEdit from './dialog/deviceEdit.vue'
+	import syncChannelProgress from './dialog/SyncChannelProgress.vue'
 	export default {
 		name: 'app',
 		components: {
 			uiHeader,
-      deviceEdit
+      deviceEdit,
+      syncChannelProgress,
 		},
 		data() {
 			return {
@@ -105,7 +108,6 @@
 				count:15,
 				total:0,
 				getDeviceListLoading: false,
-        syncDevices:[]
 			};
 		},
 		computed: {
@@ -198,8 +200,7 @@
 			//刷新设备信息
 			refDevice: function(itemData) {
 				console.log("刷新对应设备:" + itemData.deviceId);
-				var that = this;
-        this.syncDevices.push(itemData.deviceId)
+				let that = this;
 				this.$axios({
 					method: 'post',
 					url: '/api/device/query/devices/' + itemData.deviceId + '/sync'
@@ -212,14 +213,14 @@
 							type: 'error'
 						});
 					}else{
-						that.$message({
-							showClose: true,
-							message: res.data.msg,
-							type: 'success'
-						});
+						// that.$message({
+						// 	showClose: true,
+						// 	message: res.data.msg,
+						// 	type: 'success'
+						// });
+            this.$refs.syncChannelProgress.openDialog(itemData.deviceId)
 					}
 					that.initData()
-          this.syncDevices.splice(this.syncDevices.indexOf(itemData.deviceId, 1));
 				}).catch((e) => {
 					console.error(e)
           that.$message({
@@ -227,9 +228,29 @@
             message: e,
             type: 'error'
           });
-          this.syncDevices.splice(this.syncDevices.indexOf(itemData.deviceId, 1));
 				});
+
 			},
+
+      getTooltipContent: async function (deviceId){
+         let result = "";
+         await this.$axios({
+            method: 'get',
+            async: false,
+            url:`/api/device/query/${deviceId}/sync_status/`,
+          }).then((res) => {
+           if (res.data.code == 0) {
+             if (res.data.data.errorMsg !== null) {
+               result = res.data.data.errorMsg
+             } else if (res.data.msg !== null) {
+               result = res.data.msg
+             } else {
+               result = `同步中...[${res.data.data.current}/${res.data.data.total}]`;
+             }
+           }
+         })
+         return result;
+      },
 			//通知设备上传媒体流
 			sendDevicePush: function(itemData) {
 				// let deviceId = this.currentDevice.deviceId;

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>