From c35932e24cf9dda9ef396ab5a45fb1a6e5539748 Mon Sep 17 00:00:00 2001 From: 648540858 <648540858@qq.com> Date: 星期五, 29 十月 2021 11:22:22 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/wvp-28181-2.0' into wvp-28181-2.0 --- web_src/src/components/channelList.vue | 151 ++++++++++++++++++++++++++++++-------------------- 1 files changed, 90 insertions(+), 61 deletions(-) diff --git a/web_src/src/components/channelList.vue b/web_src/src/components/channelList.vue index b06ce25..3891ab5 100644 --- a/web_src/src/components/channelList.vue +++ b/web_src/src/components/channelList.vue @@ -1,7 +1,6 @@ <template> <div id="channelList"> <el-container> - <el-header> <uiHeader></uiHeader> </el-header> @@ -31,9 +30,27 @@ <el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" border style="width: 100%"> <el-table-column prop="channelId" label="閫氶亾缂栧彿" width="210"> </el-table-column> - <el-table-column prop="channelId" label="璁惧缂栧彿" width="210"> + <el-table-column prop="deviceId" label="璁惧缂栧彿" width="210"> </el-table-column> <el-table-column prop="name" label="閫氶亾鍚嶇О"> + </el-table-column> + <el-table-column label="蹇収" width="80" align="center"> + <template slot-scope="scope"> + <img style="max-height: 3rem;max-width: 4rem;" + :id="scope.row.deviceId + '_' + scope.row.channelId" + :src="getSnap(scope.row)" + @error="getSnapErrorEvent($event.target.id)" + alt=""> +<!-- <el-image--> +<!-- :id="'snapImg_' + scope.row.deviceId + '_' + scope.row.channelId"--> +<!-- :src="getSnap(scope.row)"--> +<!-- @error="getSnapErrorEvent($event, scope.row)"--> +<!-- :fit="'contain'">--> +<!-- <div slot="error" class="image-slot">--> +<!-- <i class="el-icon-picture-outline"></i>--> +<!-- </div>--> +<!-- </el-image>--> + </template> </el-table-column> <el-table-column prop="subCount" label="瀛愯妭鐐规暟"> </el-table-column> @@ -101,7 +118,8 @@ total: 0, beforeUrl: "/deviceList", isLoging: false, - autoList: true + autoList: true, + loadSnap:{} }; }, @@ -118,12 +136,11 @@ }, methods: { initData: function () { - if (this.parentChannelId == "" || this.parentChannelId == 0) { + if (typeof (this.parentChannelId) == "undefined" || this.parentChannelId == 0) { this.getDeviceChannelList(); } else { this.showSubchannels(); } - }, initParam: function () { this.deviceId = this.$route.params.deviceId; @@ -137,7 +154,6 @@ }, currentChange: function (val) { var url = `/${this.$router.currentRoute.name}/${this.deviceId}/${this.parentChannelId}/${this.count}/${val}` - console.log(url) this.$router.push(url).then(() => { this.initParam(); this.initData(); @@ -153,34 +169,31 @@ }, getDeviceChannelList: function () { let that = this; - - this.$axios.get(`/api/devices/${this.$route.params.deviceId}/channels`, { - params: { - page: that.currentPage, + if (typeof (this.$route.params.deviceId) == "undefined") return; + this.$axios({ + method: 'get', + url: `/api/device/query/devices/${this.$route.params.deviceId}/channels`, + params:{ + page: that.currentPage, count: that.count, query: that.searchSrt, online: that.online, channelType: that.channelType - } - }) - .then(function (res) { - console.log(res); + } + }).then(function (res) { that.total = res.data.total; that.deviceChannelList = res.data.list; // 闃叉鍑虹幇琛ㄦ牸閿欎綅 that.$nextTick(() => { that.$refs.channelListTable.doLayout(); }) - }) - .catch(function (error) { - console.log(error); - }); - + }).catch(function (error) { + console.log(error); + }); }, //閫氱煡璁惧涓婁紶濯掍綋娴� sendDevicePush: function (itemData) { - console.log(itemData); let deviceId = this.deviceId; this.isLoging = true; let channelId = itemData.channelId; @@ -188,20 +201,24 @@ let that = this; this.$axios({ method: 'get', - url: '/api/play/' + deviceId + '/' + channelId + url: '/api/play/start/' + deviceId + '/' + channelId }).then(function (res) { - console.log(res.data) - let streamId = res.data.streamId; that.isLoging = false; - if (!!streamId) { - // that.$refs.devicePlayer.play(res.data, deviceId, channelId, itemData.hasAudio); - that.$refs.devicePlayer.openDialog("media", deviceId, channelId, { - streamInfo: res.data, - hasAudio: itemData.hasAudio - }); - that.initData(); - } else { - that.$message.error(res.data); + if (res.data.code == 0) { + + setTimeout(()=>{ + console.log("涓嬭浇鎴浘") + let snapId = deviceId + "_" + channelId; + that.loadSnap[snapId] = 0; + that.getSnapErrorEvent(snapId) + },5000) + that.$refs.devicePlayer.openDialog("media", deviceId, channelId, { + streamInfo: res.data.data, + hasAudio: itemData.hasAudio + }); + that.initData(); + }else { + that.$message.error(res.data.msg); } }).catch(function (e) {}); }, @@ -212,23 +229,38 @@ this.$refs.devicePlayer.openDialog("record", deviceId, channelId, {date: format}) }, stopDevicePush: function (itemData) { - console.log(itemData) var that = this; this.$axios({ - method: 'post', - url: '/api/play/' + itemData.streamId + '/stop' + method: 'get', + url: '/api/play/stop/' + this.deviceId + "/" + itemData.channelId }).then(function (res) { - console.log(JSON.stringify(res)); that.initData(); }).catch(function (error) { - if (error.response.status == 402) { // 宸茬粡鍋滄杩� + if (error.response.status === 402) { // 宸茬粡鍋滄杩� that.initData(); }else { - console.log(e) + console.log(error) } }); }, + getSnap: function (row){ + return '/static/snap/' + row.deviceId + '_' + row.channelId + '.jpg' + }, + getSnapErrorEvent: function (id){ + if (typeof (this.loadSnap[id]) != "undefined") { + console.log("涓嬭浇鎴浘" + this.loadSnap[id]) + if (this.loadSnap[id] > 5) { + delete this.loadSnap[id]; + return; + } + setTimeout(()=>{ + this.loadSnap[id] ++ + document.getElementById(id).setAttribute("src", '/static/snap/' + id + '.jpg?' + new Date().getTime()) + },1000) + + } + }, showDevice: function () { this.$router.push(this.beforeUrl).then(() => { this.initParam(); @@ -236,7 +268,6 @@ }) }, changeSubchannel(itemData) { - console.log(this.$router.currentRoute) this.beforeUrl = this.$router.currentRoute.path; var url = `/${this.$router.currentRoute.name}/${this.$router.currentRoute.params.deviceId}/${itemData.channelId}/${this.$router.currentRoute.params.count}/1` @@ -251,38 +282,36 @@ showSubchannels: function (channelId) { let that = this; - this.$axios.get(`/api/subChannels/${this.deviceId}/${this.parentChannelId}/channels`, { - params: { - page: that.currentPage, - count: that.count, - query: that.searchSrt, - online: that.online, - channelType: that.channelType - } + this.$axios({ + method: 'get', + url:`/api/device/query/sub_channels/${this.deviceId}/${this.parentChannelId}/channels`, + params: { + page: that.currentPage, + count: that.count, + query: that.searchSrt, + online: that.online, + channelType: that.channelType + } + }).then(function (res) { + that.total = res.data.total; + that.deviceChannelList = res.data.list; + // 闃叉鍑虹幇琛ㄦ牸閿欎綅 + that.$nextTick(() => { + that.$refs.channelListTable.doLayout(); }) - .then(function (res) { - that.total = res.data.total; - that.deviceChannelList = res.data.list; - // 闃叉鍑虹幇琛ㄦ牸閿欎綅 - that.$nextTick(() => { - that.$refs.channelListTable.doLayout(); - }) - }) - .catch(function (error) { - console.log(error); - }); + }).catch(function (error) { + console.log(error); + }); }, search: function () { - console.log(this.searchSrt) this.currentPage = 1; this.total = 0; this.initData(); }, updateChannel: function (row) { - console.log(row) this.$axios({ method: 'post', - url: `/api/channel/update/${this.deviceId}`, + url: `/api/device/query/channel/update/${this.deviceId}`, params: row }).then(function (res) { console.log(JSON.stringify(res)); -- Gitblit v1.8.0