| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <el-table-column label="操作" width="280" align="center" fixed="right"> |
| | | <template slot-scope="scope"> |
| | | <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-switch-button" type="danger" v-if="scope.row.play" @click="stopDevicePush(scope.row)">停止</el-button> |
| | | <!-- <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.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> |
| | |
| | | |
| | | </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 { |
| | |
| | | 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'); |
| | |
| | | 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" |
| | | } |
| | | |
| | | }, |
| | |
| | | }, |
| | | getDeviceChannelList: function () { |
| | | let that = this; |
| | | console.log(this.currentPage - 1) |
| | | |
| | | this.$axios.get(`/api/devices/${this.$route.params.deviceId}/channels`, { |
| | | this.$axios.get(`/api/device/query/devices/${this.$route.params.deviceId}/channels`, { |
| | | params: { |
| | | page: that.currentPage - 1, |
| | | page: that.currentPage, |
| | | count: that.count, |
| | | query: that.searchSrt, |
| | | online: that.online, |
| | |
| | | .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(); |
| | |
| | | |
| | | }, |
| | | |
| | | //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' |
| | | }); |
| | | }); |
| | | }, |
| | | //通知设备上传媒体流 |
| | | 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' |
| | | 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(e) |
| | | } |
| | | }); |
| | | }, |
| | | |
| | |
| | | showSubchannels: function (channelId) { |
| | | let that = this; |
| | | |
| | | this.$axios.get(`/api/subChannels/${this.deviceId}/${this.parentChannelId}/channels`, { |
| | | this.$axios.get(`/api/device/query/sub_channels/${this.deviceId}/${this.parentChannelId}/channels`, { |
| | | params: { |
| | | page: that.currentPage - 1, |
| | | page: that.currentPage, |
| | | count: that.count, |
| | | query: that.searchSrt, |
| | | online: that.online, |
| | |
| | | }) |
| | | .then(function (res) { |
| | | that.total = res.data.total; |
| | | that.deviceChannelList = res.data.data; |
| | | that.deviceChannelList = res.data.list; |
| | | // 防止出现表格错位 |
| | | that.$nextTick(() => { |
| | | that.$refs.channelListTable.doLayout(); |
| | |
| | | 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); |
| | | } |
| | | } |
| | | |
| | | } |