|  |  | 
 |  |  |                     <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="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" v-loading="isLoging"></devicePlayer> | 
 |  |  |             <!--设备列表--> | 
 |  |  | 
 |  |  |                 <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-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" @click="queryRecords(scope.row)">设备录象</el-button> | 
 |  |  |                             <!--                             <el-button size="mini" @click="sendDevicePush(scope.row)">录像查询</el-button> --> | 
 |  |  | 
 |  |  |             count: parseInt(this.$route.params.count), | 
 |  |  |             total: 0, | 
 |  |  |             beforeUrl: "/videoList", | 
 |  |  |             isLoging: false | 
 |  |  |             isLoging: false, | 
 |  |  |             autoList: true | 
 |  |  |         }; | 
 |  |  |     }, | 
 |  |  |  | 
 |  |  |     mounted() { | 
 |  |  |         this.initData(); | 
 |  |  |         this.updateLooper = setInterval(this.initData, 1000); | 
 |  |  |         if (this.autoList) { | 
 |  |  |             this.updateLooper = setInterval(this.initData, 5000); | 
 |  |  |         } | 
 |  |  |          | 
 |  |  |     }, | 
 |  |  |     destroyed() { | 
 |  |  |         this.$destroy('videojs'); | 
 |  |  | 
 |  |  |         }, | 
 |  |  |         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, | 
 |  |  |                         page: that.currentPage, | 
 |  |  |                         count: that.count, | 
 |  |  |                         query: that.searchSrt, | 
 |  |  |                         online: that.online, | 
 |  |  | 
 |  |  |  | 
 |  |  |         //通知设备上传媒体流 | 
 |  |  |         sendDevicePush: function (itemData) { | 
 |  |  |             console.log(itemData) | 
 |  |  |             console.log(itemData); | 
 |  |  |             let deviceId = this.deviceId; | 
 |  |  |             this.isLoging = true; | 
 |  |  |             let channelId = itemData.channelId; | 
 |  |  |             let getEncoding = itemData.hasAudio ? '1' : '0' | 
 |  |  |             console.log("通知设备推流1:" + deviceId + " : " + channelId + ":" + getEncoding); | 
 |  |  |             console.log("通知设备推流1:" + deviceId + " : " + channelId ); | 
 |  |  |             let that = this; | 
 |  |  |             this.$axios({ | 
 |  |  |                 method: 'get', | 
 |  |  |                 url: '/api/play/' + deviceId + '/' + channelId + '?getEncoding=' + getEncoding | 
 |  |  |                 url: '/api/play/' + deviceId + '/' + channelId | 
 |  |  |             }).then(function (res) { | 
 |  |  |                 console.log(res.data) | 
 |  |  |                 let streamId = res.data.streamId; | 
 |  |  | 
 |  |  |  | 
 |  |  |             this.$axios.get(`/api/subChannels/${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(); | 
 |  |  | 
 |  |  |             }).then(function (res) { | 
 |  |  |                 console.log(JSON.stringify(res)); | 
 |  |  |             }); | 
 |  |  |         }, | 
 |  |  |         autoListChange: function () { | 
 |  |  |             if (this.autoList) { | 
 |  |  |                 this.updateLooper = setInterval(this.initData, 1500); | 
 |  |  |             }else{ | 
 |  |  |                 window.clearInterval(this.updateLooper); | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |     } |