From c2e2e24551f4603d2ef01c170de37359cf44afce Mon Sep 17 00:00:00 2001 From: 648540858 <456panlinlin> Date: 星期二, 12 四月 2022 11:04:08 +0800 Subject: [PATCH] 优化通道刷新 --- web_src/src/components/DeviceList.vue | 91 ++++++++++++++++++++++++++------------------- 1 files changed, 52 insertions(+), 39 deletions(-) diff --git a/web_src/src/components/DeviceList.vue b/web_src/src/components/DeviceList.vue index 7644a96..8a156d5 100644 --- a/web_src/src/components/DeviceList.vue +++ b/web_src/src/components/DeviceList.vue @@ -18,6 +18,13 @@ </el-table-column> <el-table-column prop="deviceId" label="璁惧缂栧彿" width="180" align="center"> </el-table-column> + <el-table-column label="鍦板潃" width="180" align="center"> + <template slot-scope="scope"> + <div slot="reference" class="name-wrapper"> + <el-tag size="medium">{{ scope.row.hostAddress }}</el-tag> + </div> + </template> + </el-table-column> <el-table-column prop="manufacturer" label="鍘傚" align="center"> </el-table-column> <el-table-column label="娴佷紶杈撴ā寮�" align="center" width="120"> @@ -47,21 +54,15 @@ </el-table-column> <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" align="center" width="140"> </el-table-column> - <el-table-column label="鍦板潃" width="180" align="center"> - <template slot-scope="scope"> - <div slot="reference" class="name-wrapper"> - <el-tag size="medium">{{ scope.row.hostAddress }}</el-tag> - </div> - </template> - </el-table-column> - <el-table-column label="鎿嶄綔" width="360" align="center" fixed="right"> + + <el-table-column label="鎿嶄綔" width="450" align="center" fixed="right"> <template slot-scope="scope"> - <el-button size="mini" :ref="scope.row.deviceId + 'refbtn' " v-if="scope.row.online!=0" icon="el-icon-refresh" @click="refDevice(scope.row)">鍒锋柊</el-button> + <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-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> - <el-button size="mini" icon="el-icon-delete" type="primary" @click="edit(scope.row)">缂栬緫</el-button> - <el-button size="mini" icon="el-icon-delete" type="danger" v-if="scope.row.online==0" @click="deleteDevice(scope.row)">鍒犻櫎</el-button> + <el-button size="mini" icon="el-icon-edit" type="primary" @click="edit(scope.row)">缂栬緫</el-button> + <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteDevice(scope.row)">鍒犻櫎</el-button> </el-button-group> </template> </el-table-column> @@ -103,7 +104,8 @@ currentPage:1, count:15, total:0, - getDeviceListLoading: false + getDeviceListLoading: false, + syncDevices:[] }; }, computed: { @@ -116,8 +118,6 @@ }); this.currentDeviceChannelsLenth = channels.length; } - - console.log("鏁版嵁锛�" + JSON.stringify(channels)); return channels; } }, @@ -152,35 +152,45 @@ count: that.count } }).then(function (res) { - console.log(res); - console.log(res.data.list); that.total = res.data.total; that.deviceList = res.data.list; that.getDeviceListLoading = false; }).catch(function (error) { - console.log(error); + console.error(error); that.getDeviceListLoading = false; }); }, deleteDevice: function(row) { - let that = this; - this.$axios({ - method: 'delete', - url:`/api/device/query/devices/${row.deviceId}/delete` - }).then((res)=>{ - this.getDeviceList(); - }).catch((error) =>{ - console.log(error); - }); + let msg = "纭畾鍒犻櫎姝よ澶囷紵" + if (row.online !== 0) { + msg = "鍦ㄧ嚎璁惧鍒犻櫎鍚庝粛鍙�氳繃娉ㄥ唽鍐嶆涓婄嚎銆�<br/>濡傞渶褰诲簳鍒犻櫎璇峰厛灏嗚澶囩绾裤��<br/><strong>纭畾鍒犻櫎姝よ澶囷紵</strong>" + } + this.$confirm(msg, '鎻愮ず', { + dangerouslyUseHTMLString : true, + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + center: true, + type: 'warning' + }).then(() => { + this.$axios({ + method: 'delete', + url:`/api/device/query/devices/${row.deviceId}/delete` + }).then((res)=>{ + this.getDeviceList(); + }).catch((error) =>{ + console.error(error); + }); + }).catch(() => { + + }); + }, showChannelList: function(row) { - console.log(JSON.stringify(row)) this.$router.push(`/channelList/${row.deviceId}/0/15/1`); }, showDevicePosition: function(row) { - console.log(JSON.stringify(row)) this.$router.push(`/devicePosition/${row.deviceId}/0/15/1`); }, @@ -189,31 +199,36 @@ refDevice: function(itemData) { console.log("鍒锋柊瀵瑰簲璁惧:" + itemData.deviceId); var that = this; - that.$refs[itemData.deviceId + 'refbtn' ].loading = true; + this.syncDevices.push(itemData.deviceId) this.$axios({ method: 'post', url: '/api/device/query/devices/' + itemData.deviceId + '/sync' - }).then(function(res) { + }).then((res) => { console.log("鍒锋柊璁惧缁撴灉锛�"+JSON.stringify(res)); - if (!res.data.deviceId) { + if (res.data.code !==0) { that.$message({ showClose: true, - message: res.data, + message: res.data.msg, type: 'error' }); }else{ that.$message({ showClose: true, - message: '璇锋眰鎴愬姛', + message: res.data.msg, type: 'success' }); } that.initData() - that.$refs[itemData.deviceId + 'refbtn' ].loading = false; - }).catch(function(e) { + this.syncDevices.splice(this.syncDevices.indexOf(itemData.deviceId, 1)); + }).catch((e) => { console.error(e) - that.$refs[itemData.deviceId + 'refbtn' ].loading = false; - });; + that.$message({ + showClose: true, + message: e, + type: 'error' + }); + this.syncDevices.splice(this.syncDevices.indexOf(itemData.deviceId, 1)); + }); }, //閫氱煡璁惧涓婁紶濯掍綋娴� sendDevicePush: function(itemData) { @@ -231,7 +246,6 @@ // }); }, transportChange: function (row) { - console.log(row); console.log(`淇敼浼犺緭鏂瑰紡涓� ${row.streamMode}锛�${row.deviceId} `); let that = this; this.$axios({ @@ -243,7 +257,6 @@ }); }, edit: function (row) { - console.log(row); this.$refs.deviceEdit.openDialog(row, ()=>{ this.$refs.deviceEdit.close(); this.$message({ -- Gitblit v1.8.0