From 19049788564257a1bdc09a0a7411f85c15ba3003 Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: 星期五, 20 十一月 2020 18:02:01 +0800
Subject: [PATCH] 添加addParentPlatform, queryParentPlatformList 接口

---
 src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorager.java               |   22 ++
 src/main/java/com/genersoft/iot/vmp/storager/jdbc/VideoManagerJdbcStoragerImpl.java   |   16 +
 src/main/java/com/genersoft/iot/vmp/gb28181/bean/ParentPlatform.java                  |  227 ++++++++++++++++++++
 web_src/src/components/ParentPlatformList.vue                                         |  258 +++++++++++++++++++++++
 web_src/src/router/index.js                                                           |    6 
 src/main/java/com/genersoft/iot/vmp/vmanager/platform/PlatformController.java         |   48 ++++
 web_src/src/components/UiHeader.vue                                                   |    4 
 src/main/java/com/genersoft/iot/vmp/storager/redis/VideoManagerRedisStoragerImpl.java |   30 ++
 README.md                                                                             |   13 
 src/main/java/com/genersoft/iot/vmp/common/VideoManagerConstants.java                 |    2 
 10 files changed, 616 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 2cf48b1..50ca236 100644
--- a/README.md
+++ b/README.md
@@ -13,13 +13,6 @@
 # gitee鍚屾浠撳簱
 https://gitee.com/18010473990/wvp-GB28181.git
 
-# 鎴浘
-![build_1.png](https://github.com/648540858/wiki/blob/master/images/Screenshot_1.png)
-![build_1.png](https://github.com/648540858/wiki/blob/master/images/Screenshot_2.png)
-![build_1.png](https://github.com/648540858/wiki/blob/master/images/Screenshot_20201012_151459.png)
-![build_1.png](https://github.com/648540858/wiki/blob/master/images/Screenshot_20201012_152643.png)
-![build_1.png](https://github.com/648540858/wiki/blob/master/images/Screenshot_20201012_151606.png)
-
 
 # 1.0 鏀寔鐗规��  
 1. 瑙嗛棰勮;  
@@ -43,8 +36,12 @@
 19. 鏀寔鎾斁h265, g.711鏍煎紡鐨勬祦(闇�瑕佸皢closeWaitRTPInfo璁句负false). 
 
 # 2.0 鏀寔鐗规�� 
-# 寰呭疄鐜帮細 
 - [ ] 鍥芥爣閫氶亾鍚戜笂绾ц仈  
+    - [ ] WEB娣诲姞涓婄骇骞冲彴
+    - [ ] 娉ㄥ唽
+    - [ ] 閫氶亾閫夋嫨
+    - [ ] 閫氶亾鎺ㄩ��
+    - [ ] 鐐规挱
 - [ ] 娣诲姞RTSP瑙嗛  
 - [ ] 娣诲姞ONVIF鎺㈡祴灞�鍩熺綉鍐呯殑璁惧  
 - [ ] 娣诲姞RTMP瑙嗛  
diff --git a/src/main/java/com/genersoft/iot/vmp/common/VideoManagerConstants.java b/src/main/java/com/genersoft/iot/vmp/common/VideoManagerConstants.java
index f80fd0e..32d7d5b 100644
--- a/src/main/java/com/genersoft/iot/vmp/common/VideoManagerConstants.java
+++ b/src/main/java/com/genersoft/iot/vmp/common/VideoManagerConstants.java
@@ -20,6 +20,8 @@
 
 	public static final String PLAY_BLACK_PREFIX = "VMP_playback_";
 
+	public static final String PLATFORM_PREFIX = "VMP_platform_";
+
 	public static final String EVENT_ONLINE_REGISTER = "1";
 	
 	public static final String EVENT_ONLINE_KEEPLIVE = "2";
diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/bean/ParentPlatform.java b/src/main/java/com/genersoft/iot/vmp/gb28181/bean/ParentPlatform.java
new file mode 100644
index 0000000..d6a97cf
--- /dev/null
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/bean/ParentPlatform.java
@@ -0,0 +1,227 @@
+package com.genersoft.iot.vmp.gb28181.bean;
+
+public class ParentPlatform {
+
+    /**
+     * 鏄惁鍚敤
+     */
+    private boolean enable;
+
+    /**
+     * 鍚嶇О
+     */
+    private String name;
+
+    /**
+     * SIP鏈嶅姟鍥芥爣缂栫爜
+     */
+    private String serverGBId;
+
+    /**
+     * SIP鏈嶅姟鍥芥爣鍩�
+     */
+    private String serverGBDomain;
+
+    /**
+     * SIP鏈嶅姟IP
+     */
+    private String serverIP;
+
+    /**
+     * SIP鏈嶅姟绔彛
+     */
+    private int serverPort;
+
+    /**
+     * 璁惧鍥芥爣缂栧彿
+     */
+    private String deviceGBId;
+
+    /**
+     * 璁惧ip
+     */
+    private String deviceIp;
+
+    /**
+     * 璁惧绔彛
+     */
+    private String devicePort;
+
+    /**
+     * SIP璁よ瘉鐢ㄦ埛鍚�(榛樿浣跨敤璁惧鍥芥爣缂栧彿)
+     */
+    private String username;
+
+    /**
+     * SIP璁よ瘉瀵嗙爜
+     */
+    private String password;
+
+    /**
+     * 娉ㄥ唽鍛ㄦ湡 (绉�)
+     */
+    private String expires;
+
+    /**
+     * 蹇冭烦鍛ㄦ湡(绉�)
+     */
+    private String keepTimeout;
+
+    /**
+     * 浼犺緭鍗忚
+     * UDP/TCP
+     */
+    private String transport;
+
+    /**
+     * 瀛楃闆�
+     */
+    private String characterSet;
+
+    /**
+     * 鍏佽浜戝彴鎺у埗
+     */
+    private boolean PTZEnable;
+
+    /**
+     * RTCP娴佷繚娲�
+     */
+    private boolean rtcp;
+
+
+    public boolean isEnable() {
+        return enable;
+    }
+
+    public void setEnable(boolean enable) {
+        this.enable = enable;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getServerGBId() {
+        return serverGBId;
+    }
+
+    public void setServerGBId(String serverGBId) {
+        this.serverGBId = serverGBId;
+    }
+
+    public String getServerGBDomain() {
+        return serverGBDomain;
+    }
+
+    public void setServerGBDomain(String serverGBDomain) {
+        this.serverGBDomain = serverGBDomain;
+    }
+
+    public String getServerIP() {
+        return serverIP;
+    }
+
+    public void setServerIP(String serverIP) {
+        this.serverIP = serverIP;
+    }
+
+    public int getServerPort() {
+        return serverPort;
+    }
+
+    public void setServerPort(int serverPort) {
+        this.serverPort = serverPort;
+    }
+
+    public String getDeviceGBId() {
+        return deviceGBId;
+    }
+
+    public void setDeviceGBId(String deviceGBId) {
+        this.deviceGBId = deviceGBId;
+    }
+
+    public String getDeviceIp() {
+        return deviceIp;
+    }
+
+    public void setDeviceIp(String deviceIp) {
+        this.deviceIp = deviceIp;
+    }
+
+    public String getDevicePort() {
+        return devicePort;
+    }
+
+    public void setDevicePort(String devicePort) {
+        this.devicePort = devicePort;
+    }
+
+    public String getUsername() {
+        return username;
+    }
+
+    public void setUsername(String username) {
+        this.username = username;
+    }
+
+    public String getPassword() {
+        return password;
+    }
+
+    public void setPassword(String password) {
+        this.password = password;
+    }
+
+    public String getExpires() {
+        return expires;
+    }
+
+    public void setExpires(String expires) {
+        this.expires = expires;
+    }
+
+    public String getKeepTimeout() {
+        return keepTimeout;
+    }
+
+    public void setKeepTimeout(String keepTimeout) {
+        this.keepTimeout = keepTimeout;
+    }
+
+    public String getTransport() {
+        return transport;
+    }
+
+    public void setTransport(String transport) {
+        this.transport = transport;
+    }
+
+    public String getCharacterSet() {
+        return characterSet;
+    }
+
+    public void setCharacterSet(String characterSet) {
+        this.characterSet = characterSet;
+    }
+
+    public boolean isPTZEnable() {
+        return PTZEnable;
+    }
+
+    public void setPTZEnable(boolean PTZEnable) {
+        this.PTZEnable = PTZEnable;
+    }
+
+    public boolean isRtcp() {
+        return rtcp;
+    }
+
+    public void setRtcp(boolean rtcp) {
+        this.rtcp = rtcp;
+    }
+}
diff --git a/src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorager.java b/src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorager.java
index fdf4bc3..8842230 100644
--- a/src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorager.java
+++ b/src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorager.java
@@ -9,6 +9,7 @@
 import com.genersoft.iot.vmp.conf.MediaServerConfig;
 import com.genersoft.iot.vmp.gb28181.bean.Device;
 import com.genersoft.iot.vmp.gb28181.bean.DeviceChannel;
+import com.genersoft.iot.vmp.gb28181.bean.ParentPlatform;
 
 /**    
  * @Description:瑙嗛璁惧鏁版嵁瀛樺偍鎺ュ彛
@@ -191,4 +192,25 @@
 	StreamInfo queryPlaybackByDevice(String deviceId, String channelId);
 
 	StreamInfo queryPlaybackBySSRC(String ssrc);
+
+	/**
+	 * 鏇存柊鎴栨坊鍔犱笂绾у钩鍙�
+	 * @param parentPlatform
+	 */
+	boolean updateParentPlatform(ParentPlatform parentPlatform);
+
+	/**
+	 * 鍒犻櫎涓婄骇骞冲彴
+	 * @param parentPlatform
+	 */
+	boolean deleteParentPlatform(ParentPlatform parentPlatform);
+
+
+	/**
+	 * 鍒嗛〉鑾峰彇涓婄骇骞冲彴
+	 * @param page
+	 * @param count
+	 * @return
+	 */
+	public PageResult<ParentPlatform> queryParentPlatformList(int page, int count);
 }
diff --git a/src/main/java/com/genersoft/iot/vmp/storager/jdbc/VideoManagerJdbcStoragerImpl.java b/src/main/java/com/genersoft/iot/vmp/storager/jdbc/VideoManagerJdbcStoragerImpl.java
index 75b9c92..645c803 100644
--- a/src/main/java/com/genersoft/iot/vmp/storager/jdbc/VideoManagerJdbcStoragerImpl.java
+++ b/src/main/java/com/genersoft/iot/vmp/storager/jdbc/VideoManagerJdbcStoragerImpl.java
@@ -7,6 +7,7 @@
 import com.genersoft.iot.vmp.common.StreamInfo;
 import com.genersoft.iot.vmp.conf.MediaServerConfig;
 import com.genersoft.iot.vmp.gb28181.bean.DeviceChannel;
+import com.genersoft.iot.vmp.gb28181.bean.ParentPlatform;
 import org.springframework.stereotype.Component;
 import org.springframework.stereotype.Service;
 
@@ -213,4 +214,19 @@
 	public StreamInfo queryPlaybackBySSRC(String ssrc) {
 		return null;
 	}
+
+	@Override
+	public boolean updateParentPlatform(ParentPlatform parentPlatform) {
+		return false;
+	}
+
+	@Override
+	public boolean deleteParentPlatform(ParentPlatform parentPlatform) {
+		return false;
+	}
+
+	@Override
+	public PageResult<ParentPlatform> queryParentPlatformList(int page, int count) {
+		return null;
+	}
 }
diff --git a/src/main/java/com/genersoft/iot/vmp/storager/redis/VideoManagerRedisStoragerImpl.java b/src/main/java/com/genersoft/iot/vmp/storager/redis/VideoManagerRedisStoragerImpl.java
index b013c60..f704d56 100644
--- a/src/main/java/com/genersoft/iot/vmp/storager/redis/VideoManagerRedisStoragerImpl.java
+++ b/src/main/java/com/genersoft/iot/vmp/storager/redis/VideoManagerRedisStoragerImpl.java
@@ -8,6 +8,7 @@
 import com.genersoft.iot.vmp.common.StreamInfo;
 import com.genersoft.iot.vmp.conf.MediaServerConfig;
 import com.genersoft.iot.vmp.gb28181.bean.DeviceChannel;
+import com.genersoft.iot.vmp.gb28181.bean.ParentPlatform;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Component;
 
@@ -557,4 +558,33 @@
 		if (playLeys == null || playLeys.size() == 0) return null;
 		return (StreamInfo)redis.get(playLeys.get(0).toString());
 	}
+
+	@Override
+	public boolean updateParentPlatform(ParentPlatform parentPlatform) {
+		// 瀛樺偍device
+		return redis.set(VideoManagerConstants.PLATFORM_PREFIX + parentPlatform.getDeviceGBId(), parentPlatform);
+	}
+
+	@Override
+	public boolean deleteParentPlatform(ParentPlatform parentPlatform) {
+		return false;
+	}
+
+	@Override
+	public PageResult<ParentPlatform> queryParentPlatformList(int page, int count) {
+		PageResult pageResult = new PageResult<Device>();
+		pageResult.setPage(page);
+		pageResult.setCount(count);
+		List<ParentPlatform> resultData = new ArrayList<>();
+		List<Object> parentPlatformList = redis.scan(VideoManagerConstants.PLATFORM_PREFIX + "*");
+		pageResult.setTotal(parentPlatformList.size());
+		int maxCount = (page + 1)* count;
+		for (int i = page * count; i < (pageResult.getTotal() > maxCount ? maxCount : pageResult.getTotal() ); i++) {
+			ParentPlatform parentPlatform =(ParentPlatform)redis.get((String)parentPlatformList.get(i));
+			resultData.add(parentPlatform);
+
+		}
+		pageResult.setData(resultData);
+		return pageResult;
+	}
 }
diff --git a/src/main/java/com/genersoft/iot/vmp/vmanager/platform/PlatformController.java b/src/main/java/com/genersoft/iot/vmp/vmanager/platform/PlatformController.java
new file mode 100644
index 0000000..9f35dd8
--- /dev/null
+++ b/src/main/java/com/genersoft/iot/vmp/vmanager/platform/PlatformController.java
@@ -0,0 +1,48 @@
+package com.genersoft.iot.vmp.vmanager.platform;
+
+import com.genersoft.iot.vmp.common.PageResult;
+import com.genersoft.iot.vmp.gb28181.bean.Device;
+import com.genersoft.iot.vmp.gb28181.bean.ParentPlatform;
+import com.genersoft.iot.vmp.storager.IVideoManagerStorager;
+import com.genersoft.iot.vmp.vmanager.device.DeviceController;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.*;
+
+@CrossOrigin
+@RestController
+@RequestMapping("/api")
+public class PlatformController {
+
+    private final static Logger logger = LoggerFactory.getLogger(PlatformController.class);
+
+    @Autowired
+    private IVideoManagerStorager storager;
+
+    @GetMapping("/platforms")
+    public PageResult<ParentPlatform> platforms(int page, int count){
+
+        if (logger.isDebugEnabled()) {
+            logger.debug("鏌ヨ鎵�鏈変笂绾ц澶嘇PI璋冪敤");
+        }
+        return storager.queryParentPlatformList(page, count);
+    }
+
+    @PostMapping("/platforms/add")
+    public ResponseEntity<String> addPlatform(ParentPlatform parentPlatform){
+
+        if (logger.isDebugEnabled()) {
+            logger.debug("鏌ヨ鎵�鏈変笂绾ц澶嘇PI璋冪敤");
+        }
+        boolean updateResult = storager.updateParentPlatform(parentPlatform);
+        if (updateResult) {
+            return new ResponseEntity<>("success", HttpStatus.OK);
+        }else {
+            return new ResponseEntity<>("fail", HttpStatus.OK);
+        }
+    }
+}
diff --git a/web_src/src/components/ParentPlatformList.vue b/web_src/src/components/ParentPlatformList.vue
new file mode 100644
index 0000000..947adec
--- /dev/null
+++ b/web_src/src/components/ParentPlatformList.vue
@@ -0,0 +1,258 @@
+<template>
+  <div id="app">
+    <el-container>
+      <el-header>
+        <uiHeader></uiHeader>
+      </el-header>
+      <el-main>
+        <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>
+        </div>
+        <devicePlayer ref="devicePlayer"></devicePlayer>
+        <!--璁惧鍒楄〃-->
+        <el-table :data="deviceList" border style="width: 100%" :height="winHeight">
+          <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 prop="deviceId" label="鏄惁鍚敤" width="50" 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" v-if="scope.row.online == 1">鍦ㄧ嚎</el-tag>
+                <el-tag size="medium" type="info" v-if="scope.row.online == 0">绂荤嚎</el-tag>
+              </div>
+            </template>
+          </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 prop="deviceId" label="璁惧鍥芥爣缂栧彿" width="240" align="center">
+            </el-table-column>
+          </el-table-column>
+
+          <el-table-column label="娴佷紶杈撴ā寮�" align="center" width="160">
+            <template slot-scope="scope">
+              <el-select size="mini" @change="transportChange(scope.row)" v-model="scope.row.streamMode" placeholder="璇烽�夋嫨">
+                <el-option key="UDP" label="UDP" value="UDP"></el-option>
+                <el-option key="TCP-ACTIVE" label="TCP涓诲姩妯″紡" :disabled="true" value="TCP-ACTIVE"></el-option>
+                <el-option key="TCP-PASSIVE" label="TCP琚姩妯″紡"  value="TCP-PASSIVE"></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="channelCount" label="閫氶亾鏁�" align="center">
+          </el-table-column>
+
+          <el-table-column label="鎿嶄綔" width="240" align="center" fixed="right">
+            <template slot-scope="scope">
+              <el-button size="mini" icon="el-icon-refresh"  @click="refDevice(scope.row)">鍒锋柊閫氶亾</el-button>
+              <el-button size="mini" icon="el-icon-s-open"  type="primary" @click="showChannelList(scope.row)">鏌ョ湅閫氶亾</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          style="float: right"
+          @size-change="handleSizeChange"
+          @current-change="currentChange"
+          :current-page="currentPage"
+          :page-size="count"
+          :page-sizes="[15, 25, 35, 50]"
+          layout="total, sizes, prev, pager, next"
+          :total="total">
+        </el-pagination>
+
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import devicePlayer from './gb28181/devicePlayer.vue'
+import uiHeader from './UiHeader.vue'
+export default {
+  name: 'app',
+  components: {
+    devicePlayer,
+    uiHeader
+  },
+  data() {
+    return {
+      deviceList: [], //璁惧鍒楄〃
+      currentDevice: {}, //褰撳墠鎿嶄綔璁惧瀵硅薄
+
+      videoComponentList: [],
+      updateLooper: 0, //鏁版嵁鍒锋柊杞鏍囧織
+      currentDeviceChannelsLenth:0,
+      winHeight: window.innerHeight - 200,
+      currentPage:1,
+      count:15,
+      total:0
+    };
+  },
+  computed: {
+    getcurrentDeviceChannels: function() {
+      let data = this.currentDevice['channelMap'];
+      let channels = null;
+      if (data) {
+        channels = Object.keys(data).map(key => {
+          return data[key];
+        });
+        this.currentDeviceChannelsLenth = channels.length;
+      }
+
+      console.log("鏁版嵁锛�" + JSON.stringify(channels));
+      return channels;
+    }
+  },
+  mounted() {
+    this.initData();
+    this.updateLooper = setInterval(this.initData, 10000);
+  },
+  destroyed() {
+    this.$destroy('videojs');
+    clearTimeout(this.updateLooper);
+  },
+  methods: {
+    initData: function() {
+      this.getDeviceList();
+    },
+    currentChange: function(val){
+      this.currentPage = val;
+      this.getDeviceList();
+    },
+    handleSizeChange: function(val){
+      this.count = val;
+      this.getDeviceList();
+    },
+    getDeviceList: function() {
+      let that = this;
+
+      this.$axios.get(`/api/devices`,{
+        params: {
+          page: that.currentPage - 1,
+          count: that.count
+        }
+      } )
+        .then(function (res) {
+          console.log(res);
+          that.total = res.data.total;
+          that.deviceList = res.data.data;
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+
+    },
+    showChannelList: function(row) {
+      console.log(JSON.stringify(row))
+      this.$router.push(`/channelList/${row.deviceId}/0/15/1`);
+    },
+
+
+    //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) {
+      let deviceId = this.currentDevice.deviceId;
+      let channelId = itemData.channelId;
+      console.log("閫氱煡璁惧鎺ㄦ祦1锛�" + deviceId + " : " + channelId);
+      let that = this;
+      this.$axios({
+        method: 'get',
+        url: '/api/play/' + deviceId + '/' + channelId
+      }).then(function(res) {
+        let ssrc = res.data.ssrc;
+        that.$refs.devicePlayer.play(ssrc,deviceId,channelId);
+      }).catch(function(e) {
+      });
+    },
+    transportChange: function (row) {
+      console.log(row);
+      console.log(`淇敼浼犺緭鏂瑰紡涓� ${row.streamMode}锛�${row.deviceId} `);
+      let that = this;
+      this.$axios({
+        method: 'get',
+        url: '/api/devices/' + row.deviceId + '/transport/' + row.streamMode
+      }).then(function(res) {
+
+      }).catch(function(e) {
+      });
+    }
+
+  }
+};
+</script>
+
+<style>
+.videoList {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+
+.video-item {
+  position: relative;
+  width: 15rem;
+  height: 10rem;
+  margin-right: 1rem;
+  background-color: #000000;
+}
+
+.video-item-img {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.video-item-img:after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 3rem;
+  height: 3rem;
+  background-image: url("../assets/loading.png");
+  background-size: cover;
+  background-color: #000000;
+}
+
+.video-item-title {
+  position: absolute;
+  bottom: 0;
+  color: #000000;
+  background-color: #ffffff;
+  line-height: 1.5rem;
+  padding: 0.3rem;
+  width: 14.4rem;
+}
+</style>
diff --git a/web_src/src/components/UiHeader.vue b/web_src/src/components/UiHeader.vue
index 67f310a..3c264cd 100644
--- a/web_src/src/components/UiHeader.vue
+++ b/web_src/src/components/UiHeader.vue
@@ -3,8 +3,8 @@
 		<el-menu router :default-active="this.$route.path" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" mode="horizontal">
             <el-menu-item index="/">鎺у埗鍙�</el-menu-item>
             <el-menu-item index="/videoList">璁惧鍒楄〃</el-menu-item>
+             <el-menu-item index="/parentPlatformList">鍥芥爣绾ц仈</el-menu-item>
             <!-- <el-menu-item index="/videoReplay">褰曞儚鍥炵湅</el-menu-item> -->
-            <!-- <el-menu-item index="4">绾ц仈璁剧疆</el-menu-item> -->
             <el-menu-item style="float: right;" @click="loginout">閫�鍑�</el-menu-item>
         </el-menu>
 	</div>
@@ -23,4 +23,4 @@
     }
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/web_src/src/router/index.js b/web_src/src/router/index.js
index b8f8705..fa4df8c 100644
--- a/web_src/src/router/index.js
+++ b/web_src/src/router/index.js
@@ -5,6 +5,7 @@
 import videoList from '../components/videoList.vue'
 import channelList from '../components/channelList.vue'
 import login from '../components/Login.vue'
+import parentPlatformList from '../components/ParentPlatformList.vue'
 
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push(location) {
@@ -34,6 +35,11 @@
       path: '/channelList/:deviceId/:parentChannelId/:count/:page',
       name: 'channelList',
       component: channelList,
+    },,
+    {
+      path: '/parentPlatformList/:platformId/:count/:page',
+      name: 'parentPlatformList',
+      component: parentPlatformList,
     },
   ]
 })

--
Gitblit v1.8.0