播放按钮添加loading， 修复拉流代理播放后再次点播失败

web_src/src/components/StreamProxyList.vue

@@ -76,7 +76,7 @@
         <el-table-column prop="createTime" label="创建时间"  min-width="150" show-overflow-tooltip/>
         <el-table-column label="操作" width="400"  fixed="right">
           <template v-slot:default="scope">
-            <el-button size="medium" icon="el-icon-video-play" type="text" @click="play(scope.row)">播放</el-button>
+            <el-button size="medium" :loading="scope.row.playLoading" icon="el-icon-video-play" type="text" @click="play(scope.row)">播放</el-button>
             <el-divider direction="vertical"></el-divider>
             <el-button size="medium" icon="el-icon-switch-button" style="color: #f56c6c"  type="text" v-if="scope.row.pulling" @click="stopPlay(scope.row)">停止</el-button>
             <el-divider direction="vertical" v-if="scope.row.pulling" ></el-divider>
@@ -134,7 +134,6 @@
 				currentPage:1,
 				count:15,
 				total:0,
-        startBtnLoading: false,
         streamProxy: null,
         searchSrt: "",
         mediaServerId: "",
@@ -163,9 +162,6 @@
           this.mediaServerList = data.data;
         })
 			},
-      stopUpdateList: function (){
-        window.clearInterval(this.updateLooper)
-      },
       startUpdateList: function (){
         this.updateLooper = setInterval(()=>{
           if (!this.streamProxy) {
@@ -198,7 +194,7 @@
           if (res.data.code === 0) {
             that.total = res.data.data.total;
             for (let i = 0; i < res.data.data.list.length; i++) {
-              res.data.data.list[i]["startBtnLoading"] = false;
+              res.data.data.list[i]["playLoading"] = false;
             }
             that.streamProxyList = res.data.data.list;
           }
@@ -267,21 +263,21 @@
         this.streamProxy = null
 			},
 			play: function(row){
-				let that = this;
+        row.playLoading = true;
 				this.$axios({
 					method: 'get',
 					url:`/api/proxy/start`,
 					params: {
 						id: row.id,
 					}
-				}).then(function (res) {
+				}).then((res)=> {
 					if (res.data.code === 0) {
-            that.$refs.devicePlayer.openDialog("streamPlay", null, null, {
+            this.$refs.devicePlayer.openDialog("streamPlay", null, null, {
               streamInfo: res.data.data,
               hasAudio: true
             });
           }else {
-            that.$message({
+            this.$message({
               showClose: true,
               message: "获取地址失败：" + res.data.msg,
               type: "error",
@@ -290,7 +286,9 @@
 
 				}).catch(function (error) {
 					console.log(error);
-				});
+				}).finally(()=>{
+          row.playLoading = false;
+        })
 
 			},
       stopPlay: function(row){
@@ -341,54 +339,6 @@
         }).catch(() => {
         });
 			},
-			start: function(row){
-        this.stopUpdateList()
-        this.$set(row, 'startBtnLoading', true)
-				this.$axios({
-					method: 'get',
-					url:`/api/proxy/start`,
-					params: {
-						app: row.app,
-						stream: row.stream
-					}
-				}).then((res)=> {
-				  if (res.data.code === 0){
-            this.initData()
-          }else {
-            this.$message({
-              showClose: true,
-              message: "启动失败，请检查地址是否可用！",
-              type: "error",
-            });
-          }
-          this.$set(row, 'startBtnLoading', false)
-          this.startUpdateList()
-				}).catch((error)=> {
-					console.log(error);
-          this.$message({
-            showClose: true,
-            message: "启动失败，请检查地址是否可用！",
-            type: "error",
-          });
-          this.$set(row, 'startBtnLoading', false)
-          this.startUpdateList()
-				});
-			},
-			stop: function(row){
-				let that = this;
-				this.$axios({
-					method: 'get',
-					url:`/api/proxy/stop`,
-					params: {
-						app: row.app,
-						stream: row.stream
-					}
-				}).then(function (res) {
-					that.initData()
-				}).catch(function (error) {
-					console.log(error);
-				});
-			},
       refresh: function (){
         this.initData();
       }