对接基本数据结果，设备列表，通道列表

src/components/videoList.vue

@@ -1,22 +1,75 @@
 <template>
 	<div id="app">
 		<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
-			<span style="font-size: 1rem; font-weight: bold;">视频列表</span>
+			<span style="font-size: 1rem; font-weight: bold;">设备列表</span>
 			<div style="position: absolute; right: 1rem; top: 0.3rem;">
-				<el-button icon="el-icon-refresh-right" circle size="mini" @click="getVideoList()"></el-button>
+				<el-button icon="el-icon-refresh-right" circle size="mini" @click="getDeviceList()"></el-button>
 			</div>
 		</div>
-		<div class="videoList">
+
+		<!-- <div class="videoList">
 			<div class="video-item" v-for="(item, index) in videoList">
-				<!-- <video class="video-js vjs-default-skin vjs-big-play-centered" :id="genVideoId(index, item)" style="width: 15rem; height: 10rem;" controls>
-				</video> -->
 				<img class="video-item-img" :src="getSnap(item)" @click="showVideo(item)" />
 				<div class="video-item-title">
 					{{ item.stream }}
 					<el-button icon="el-icon-search" circle size="mini" style="float: right;" @click="showVideoInfo(item)"></el-button>
 				</div>
 			</div>
-		</div>
+		</div> -->
+
+		<!--设备列表-->
+		<el-table :data="deviceList" border style="width: 100%">
+			<el-table-column prop="name" label="名称" width="180" align="center">
+			</el-table-column>
+			<el-table-column prop="deviceId" label="设备编号" width="240" align="center">
+			</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">{{ scope.row.host.address }}</el-tag>
+					</div>
+				</template>
+			</el-table-column>
+			<el-table-column prop="manufacturer" label="厂家" align="center">
+			</el-table-column>
+			<el-table-column prop="model" label="固件版本" align="center">
+			</el-table-column>
+			<el-table-column prop="transport" label="通讯方式" align="center">
+			</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">{{ scope.row.online==1?'在线' :'离线'}}</el-tag>
+					</div>
+				</template>
+			</el-table-column>
+
+			<el-table-column label="操作" width="240" align="center">
+				<template slot-scope="scope">
+					<el-button size="mini" @click="refDevice(scope.row)">刷新</el-button>
+					<el-button size="mini" @click="currentDevice=scope.row;showDevicePushConfirm=true">查看通道</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+
+		<!--推流信息确认框-->
+		<el-dialog title="通道列表" :visible.sync="showDevicePushConfirm" width="40%">
+			<el-table :data="getcurrentDeviceChannels" style="width: 100%">
+				<el-table-column prop="channelId" label="通道编号" width="210">
+				</el-table-column>
+				<el-table-column prop="name" label="通道名称" width="180">
+				</el-table-column>
+				<el-table-column prop="address" label="地址">
+				</el-table-column>
+				<el-table-column label="操作" width="240" align="center">
+					<template slot-scope="scope">
+						<el-button size="mini" @click="sendDevicePush(scope.row)">预览视频</el-button>
+						<el-button size="mini" @click="sendDevicePush(scope.row)">录像查询</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-dialog>
+
 
 		<el-dialog title="视频播放" :visible.sync="showVideoDialog" :destroy-on-close="true">
 			<iframe :src="getPlayerPath" ref="videoRender" style="width:100%; height:35rem;" frameborder="no" border="0"
@@ -69,14 +122,20 @@
 </template>
 
 <script>
+	import falsificationdata from '../../FalsificationData.js'
 	export default {
 		name: 'app',
 		components: {},
 		data() {
 			return {
+				deviceList: [], //设备列表
+				currentDevice: {}, //当前操作设备对象
+				showDevicePushConfirm: false, //是否显示推流确认框
+
+
+
 				videoUrl: '',
 				showVideoDialog: false, //控制在线监控实时流窗口的开关
-				videoList: [],
 				videoComponentList: [],
 				currentPlayerInfo: {}, //当前播放对象
 				updateLooper: 0, //数据刷新轮训标志
@@ -102,6 +161,17 @@
 				};
 				return info;
 			},
+			getcurrentDeviceChannels: function() {
+				let data=this.currentDevice['channelMap'];
+				let channels=null;
+				if(data){
+					channels = Object.keys(data).map(key => {
+						return data[key]; 
+					});
+				}
+				console.log("数据："+JSON.stringify(channels));
+				return channels;
+			}
 		},
 		mounted() {
 			this.initData();
@@ -113,17 +183,20 @@
 		},
 		methods: {
 			initData: function() {
-				this.getVideoList();
+				this.getDeviceList();
 			},
-			getVideoList: function() {
+			getDeviceList: function() {
 				let that = this;
 				this.$axios({
 					method: 'get',
-					url: this.$global.genApiUrl('/getMediaList') + '&schema=rtmp'
+					url: this.$global.genApiUrl('/api/devices')
 				}).then(function(res) {
 					if (res.data.code == 0) {
-						that.videoList = res.data.data;
+						that.deviceList = res.data;
 					}
+				}).catch(function(error) {
+					console.log("请求失败，使用假数据");
+					that.deviceList = falsificationdata.devices;
 				});
 			},
 			showVideoInfo: function(videoData) {
@@ -135,7 +208,7 @@
 			},
 			showVideo: function(streamInfo) {
 				this.showVideoDialog = true;
-				this.videoUrl = this.$global.baseMediaUrl + streamInfo.app + '/' + streamInfo.stream + ".flv?st="+new Date().getTime();
+				this.videoUrl = this.$global.baseMediaUrl + streamInfo.app + '/' + streamInfo.stream + ".flv?st=" + new Date().getTime();
 				this.currentPlayerInfo = streamInfo;
 			},
 			copySharedInfo: function(data) {
@@ -273,12 +346,41 @@
 
 				return fullSnapRequest;
 			},
-			playRecord: function(isBackLive,rowData) {
+			playRecord: function(isBackLive, rowData) {
 				this.$refs.videoRender.contentWindow.postMessage({
 					cmd: 'switchUrl',
-					params: isBackLive?{"path":this.videoUrl}:rowData
+					params: isBackLive ? {
+						"path": this.videoUrl
+					} : rowData
 				}, '*')
+			},
+
+			//gb28181平台对接
+			//刷新设备信息
+			refDevice: function(itemData) {
+				///api/devices/{deviceId}/sync
+				console.log("刷新对应设备:" + itemData.deviceId);
+				this.$axios({
+					method: 'get',
+					url: '/api/devices/' + itemData.deviceId + '/sync'
+				}).then(function(res) {
+
+				});
+			},
+			//通知设备上传媒体流
+			sendDevicePush:function(itemData){
+				///api/play/{deviceId}/{channelId}
+				let deviceId=this.currentDevice.deviceId;
+				let channelId=itemData.channelId;
+				console.log("通知设备推流："+deviceId+" : "+channelId);
+				this.$axios({
+					method: 'get',
+					url: '/api/play/'+deviceId+'/'+channelId
+				}).then(function(res) {
+				
+				});
 			}
+
 		}
 	};
 </script>