From cb5849d8a14f55241c44bdf6724b18de7950564d Mon Sep 17 00:00:00 2001 From: panlinlin <648540858@qq.com> Date: 星期三, 14 四月 2021 16:33:10 +0800 Subject: [PATCH] 支持接口鉴权,支持修改密码, --- web_src/src/components/channelList.vue | 166 +++++++++++++++++++++++++++++-------------------------- 1 files changed, 87 insertions(+), 79 deletions(-) diff --git a/web_src/src/components/channelList.vue b/web_src/src/components/channelList.vue index 4bcbe31..89fe0ae 100644 --- a/web_src/src/components/channelList.vue +++ b/web_src/src/components/channelList.vue @@ -19,17 +19,19 @@ <el-option label="璁惧" value="false"></el-option> <el-option label="瀛愮洰褰�" value="true"></el-option> </el-select> - 鍦ㄧ嚎鐘舵��: <el-select size="mini" @change="search" v-model="online" placeholder="璇烽�夋嫨" default-first-option> + 鍦ㄧ嚎鐘舵��: <el-select size="mini" style="margin-right: 1rem;" @change="search" v-model="online" placeholder="璇烽�夋嫨" default-first-option> <el-option label="鍏ㄩ儴" value=""></el-option> - <el-option label="鍦ㄧ嚎" value="on"></el-option> - <el-option label="绂荤嚎" value="off"></el-option> + <el-option label="鍦ㄧ嚎" value="true"></el-option> + <el-option label="绂荤嚎" value="false"></el-option> </el-select> - + <el-checkbox size="mini" style="margin-right: 1rem; float: right;" v-model="autoList" @change="autoListChange">鑷姩鍒锋柊</el-checkbox> </div> - <devicePlayer ref="devicePlayer"></devicePlayer> + <devicePlayer ref="devicePlayer" v-loading="isLoging"></devicePlayer> <!--璁惧鍒楄〃--> <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> <el-table-column prop="name" label="閫氶亾鍚嶇О"> </el-table-column> @@ -44,8 +46,8 @@ <el-table-column label="鐘舵��" width="180" align="center"> <template slot-scope="scope"> <div slot="reference" class="name-wrapper"> - <el-tag size="medium" v-if="scope.row.status == 1">鍦ㄧ嚎</el-tag> - <el-tag size="medium" type="info" v-if="scope.row.status == 0">绂荤嚎</el-tag> + <el-tag size="medium" v-if="scope.row.status == 1">寮�鍚�</el-tag> + <el-tag size="medium" type="info" v-if="scope.row.status == 0">鍏抽棴</el-tag> </div> </template> </el-table-column> @@ -56,10 +58,10 @@ <el-button-group> <!-- <el-button size="mini" icon="el-icon-video-play" v-if="scope.row.parental == 0" @click="sendDevicePush(scope.row)">鎾斁</el-button> --> <el-button size="mini" icon="el-icon-video-play" @click="sendDevicePush(scope.row)">鎾斁</el-button> - <el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="scope.row.play" @click="stopDevicePush(scope.row)">鍋滄</el-button> + <el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="!!scope.row.streamId" @click="stopDevicePush(scope.row)">鍋滄</el-button> <el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.parental == 1" @click="changeSubchannel(scope.row)">鏌ョ湅</el-button> - <!-- <el-button size="mini" icon="el-icon-video-camera" type="primary" >璁惧褰曡薄</el-button>--> - <!-- <el-button size="mini" @click="sendDevicePush(scope.row)">褰曞儚鏌ヨ</el-button> --> + <el-button size="mini" icon="el-icon-video-camera" type="primary" @click="queryRecords(scope.row)">璁惧褰曡薄</el-button> + <!-- <el-button size="mini" @click="sendDevicePush(scope.row)">褰曞儚鏌ヨ</el-button> --> </el-button-group> </template> </el-table-column> @@ -69,20 +71,18 @@ </el-main> </el-container> - <Loading v-if="isLoging" marginTop="-50%"></Loading> </div> </template> <script> -import devicePlayer from './gb28181/devicePlayer.vue' +import devicePlayer from './dialog/devicePlayer.vue' import uiHeader from './UiHeader.vue' -import Loading from './Loading.vue' +import moment from "moment"; export default { name: 'channelList', components: { devicePlayer, - uiHeader, - Loading + uiHeader }, data() { return { @@ -99,14 +99,18 @@ currentPage: parseInt(this.$route.params.page), count: parseInt(this.$route.params.count), total: 0, - beforeUrl: "/videoList", - isLoging: false + beforeUrl: "/deviceList", + isLoging: false, + autoList: true }; }, mounted() { this.initData(); - // this.updateLooper = setInterval(this.initData, 10000); + if (this.autoList) { + this.updateLooper = setInterval(this.initData, 5000); + } + }, destroyed() { this.$destroy('videojs'); @@ -127,7 +131,7 @@ this.currentPage = parseInt(this.$route.params.page); this.count = parseInt(this.$route.params.count); if (this.parentChannelId == "" || this.parentChannelId == 0) { - this.beforeUrl = "/videoList" + this.beforeUrl = "/deviceList" } }, @@ -149,82 +153,79 @@ }, getDeviceChannelList: function () { let that = this; - console.log(this.currentPage - 1) - - this.$axios.get(`/api/devices/${this.$route.params.deviceId}/channels`, { - params: { - page: that.currentPage - 1, + 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) { + } + }).then(function (res) { console.log(res); that.total = res.data.total; - that.deviceChannelList = res.data.data; + that.deviceChannelList = res.data.list; // 闃叉鍑虹幇琛ㄦ牸閿欎綅 that.$nextTick(() => { that.$refs.channelListTable.doLayout(); }) - }) - .catch(function (error) { - console.log(error); - }); - - }, - - //gb28181骞冲彴瀵规帴 - //鍒锋柊璁惧淇℃伅 - refDevice: function (itemData) { - ///api/devices/{deviceId}/sync - console.log("鍒锋柊瀵瑰簲璁惧:" + itemData.deviceId); - this.$axios({ - method: 'post', - url: '/api/devices/' + itemData.deviceId + '/sync' - }).then(function (res) { - // console.log("鍒锋柊璁惧缁撴灉锛�"+JSON.stringify(res)); - }).catch(function (e) { - that.$message({ - showClose: true, - message: '璇锋眰鎴愬姛', - type: 'success' - }); + }).catch(function (error) { + console.log(error); }); + + }, + //閫氱煡璁惧涓婁紶濯掍綋娴� sendDevicePush: function (itemData) { - console.log(itemData) + console.log(itemData); let deviceId = this.deviceId; this.isLoging = true; let channelId = itemData.channelId; - console.log("閫氱煡璁惧鎺ㄦ祦1锛�" + deviceId + " : " + channelId); + console.log("閫氱煡璁惧鎺ㄦ祦1锛�" + deviceId + " : " + channelId ); 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 ssrc = res.data.ssrc; + let streamId = res.data.streamId; that.isLoging = false; - if (!!ssrc) { - that.$refs.devicePlayer.play(res.data, deviceId, channelId, itemData.hasAudio); + 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); } }).catch(function (e) {}); }, + queryRecords: function (itemData) { + var format = moment().format("YYYY-M-D"); + let deviceId = this.deviceId; + let channelId = itemData.channelId; + 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.ssrc + '/stop' + method: 'get', + url: '/api/play/stop/' + itemData.streamId }).then(function (res) { console.log(JSON.stringify(res)); that.initData(); + }).catch(function (error) { + if (error.response.status == 402) { // 宸茬粡鍋滄杩� + that.initData(); + }else { + console.log(error) + } }); }, @@ -250,26 +251,26 @@ showSubchannels: function (channelId) { let that = this; - this.$axios.get(`/api/subChannels/${this.deviceId}/${this.parentChannelId}/channels`, { - params: { - page: that.currentPage - 1, - 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.data; - // 闃叉鍑虹幇琛ㄦ牸閿欎綅 - that.$nextTick(() => { - that.$refs.channelListTable.doLayout(); - }) - }) - .catch(function (error) { - console.log(error); - }); + }).catch(function (error) { + console.log(error); + }); }, search: function () { console.log(this.searchSrt) @@ -281,11 +282,18 @@ 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)); }); + }, + autoListChange: function () { + if (this.autoList) { + this.updateLooper = setInterval(this.initData, 1500); + }else{ + window.clearInterval(this.updateLooper); + } } } -- Gitblit v1.8.0