[UI] 完成国标级联的CURD

648540858

2020-11-23 14003b98053b2b48076d0a7ab08723f9ead88000

[UI] 完成国标级联的CURD

 README.md

@@ -42,6 +42,7 @@
    - [ ] 通道选择
    - [ ] 通道推送
    - [ ] 点播
    - [ ] 云台控制
- [ ] 添加RTSP视频  
- [ ] 添加ONVIF探测局域网内的设备  
- [ ] 添加RTMP视频  

 src/main/java/com/genersoft/iot/vmp/gb28181/bean/ParentPlatform.java

@@ -85,8 +85,14 @@

    /**
     * RTCP流保活
     * TODO 预留, 暂不实现
     */
    private boolean rtcp;

    /**
     * 在线状态
     */
    private boolean status;


    public boolean isEnable() {
@@ -224,4 +230,12 @@
    public void setRtcp(boolean rtcp) {
        this.rtcp = rtcp;
    }

    public boolean isStatus() {
        return status;
    }

    public void setStatus(boolean status) {
        this.status = status;
    }
}

 src/main/java/com/genersoft/iot/vmp/storager/redis/VideoManagerRedisStoragerImpl.java

@@ -567,7 +567,7 @@

    @Override
    public boolean deleteParentPlatform(ParentPlatform parentPlatform) {
        return false;
        return redis.del(VideoManagerConstants.PLATFORM_PREFIX + parentPlatform.getDeviceGBId());
    }

    @Override

 src/main/java/com/genersoft/iot/vmp/vmanager/platform/PlatformController.java

@@ -11,6 +11,7 @@
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;

@CrossOrigin
@@ -23,8 +24,8 @@
    @Autowired
    private IVideoManagerStorager storager;

    @GetMapping("/platforms")
    public PageResult<ParentPlatform> platforms(int page, int count){
    @GetMapping("/platforms/{count}/{page}")
    public PageResult<ParentPlatform> platforms(@PathVariable int page, @PathVariable int count){

        if (logger.isDebugEnabled()) {
            logger.debug("查询所有上级设备API调用");
@@ -32,12 +33,26 @@
        return storager.queryParentPlatformList(page, count);
    }

    @PostMapping("/platforms/add")
    public ResponseEntity<String> addPlatform(ParentPlatform parentPlatform){
    @RequestMapping("/platforms/save")
    @ResponseBody
    public ResponseEntity<String> savePlatform(@RequestBody ParentPlatform parentPlatform){

        if (logger.isDebugEnabled()) {
            logger.debug("查询所有上级设备API调用");
        }
        if (StringUtils.isEmpty(parentPlatform.getName())
                ||StringUtils.isEmpty(parentPlatform.getServerGBId())
                ||StringUtils.isEmpty(parentPlatform.getServerGBDomain())
                ||StringUtils.isEmpty(parentPlatform.getServerIP())
                ||StringUtils.isEmpty(parentPlatform.getServerPort())
                ||StringUtils.isEmpty(parentPlatform.getDeviceGBId())
                ||StringUtils.isEmpty(parentPlatform.getExpires())
                ||StringUtils.isEmpty(parentPlatform.getKeepTimeout())
                ||StringUtils.isEmpty(parentPlatform.getTransport())
                ||StringUtils.isEmpty(parentPlatform.getCharacterSet())
        ){
            return new ResponseEntity<>("missing parameters", HttpStatus.BAD_REQUEST);
        }
        boolean updateResult = storager.updateParentPlatform(parentPlatform);
        if (updateResult) {
            return new ResponseEntity<>("success", HttpStatus.OK);
@@ -45,4 +60,23 @@
            return new ResponseEntity<>("fail", HttpStatus.OK);
        }
    }

    @RequestMapping("/platforms/delete")
    @ResponseBody
    public ResponseEntity<String> deletePlatform(@RequestBody ParentPlatform parentPlatform){

        if (logger.isDebugEnabled()) {
            logger.debug("查询所有上级设备API调用");
        }
        if (StringUtils.isEmpty(parentPlatform.getDeviceGBId())
        ){
            return new ResponseEntity<>("missing parameters", HttpStatus.BAD_REQUEST);
        }
        boolean deleteResult = storager.deleteParentPlatform(parentPlatform);
        if (deleteResult) {
            return new ResponseEntity<>("success", HttpStatus.OK);
        }else {
            return new ResponseEntity<>("fail", HttpStatus.OK);
        }
    }
}

 src/main/resources/application.yml

@@ -7,12 +7,12 @@
        communicate: http
    redis:
        # Redis服务器IP
        host: 127.0.0.1
        host: 192.168.1.141
        #端口号
        port: 6379
        database: 6
        #访问密码,若你的redis服务器没有设置密码，就不需要用密码去连接
        password:
        password: 4767cb971b40a1300fa09b7f87b09d1c
        #超时时间
        timeout: 10000
    datasource: 
@@ -25,7 +25,7 @@
server:
    port: 18080
sip:
    ip: 192.168.1.44
    ip: 192.168.1.20
    port: 5060
    # 根据国标6.1.2中规定，domain宜采用ID统一编码的前十位编码。国标附录D中定义前8位为中心编码（由省级、市级、区级、基层编号组成，参照GB/T 2260-2007）
    # 后两位为行业编码，定义参照附录D.3
@@ -40,9 +40,9 @@
    password: 21232f297a57a5a743894a0e4a801fc3

media: #zlm服务器的ip与http端口, 重点: 这是http端口
    ip: 192.168.1.44
    wanIp:
    port: 80
    ip: 127.0.0.1
    wanIp: 192.168.1.20
    port: 6080
    secret: 035c73f7-bb6b-4889-a715-d9eb2d1925cc
    streamNoneReaderDelayMS:  600000  # 无人观看多久自动关闭流
    # 关闭等待收到流编码信息后在返回,

 web_src/src/components/ParentPlatformList.vue

@@ -8,49 +8,45 @@
        <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>
        <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
            <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addParentPlatform">添加</el-button>
        </div>
        <!--设备列表-->
        <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">
        <el-table :data="platformList" border style="width: 100%" :height="winHeight">
          <el-table-column prop="name" label="名称" width="240" align="center"></el-table-column>
          <el-table-column prop="serverGBId" label="平台编号" width="180" align="center"></el-table-column>
          <el-table-column label="是否启用" width="120" 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>
                <el-tag size="medium" v-if="scope.row.enable">已启用</el-tag>
                <el-tag size="medium" v-if="!scope.row.enable">未启用</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="120" align="center">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium" v-if="scope.row.status">在线</el-tag>
                <el-tag size="medium" type="info" v-if="!scope.row.status">离线</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>
                <el-tag size="medium">{{ scope.row.serverIP}}:{{scope.row.serverPort }}</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">
          <el-table-column prop="deviceGBId" label="设备国标编号" width="240" align="center"></el-table-column>
          <el-table-column prop="transport" label="流传输模式" width="120" align="center"></el-table-column>
          <el-table-column prop="channelCount" label="通道数" align="center"></el-table-column>
          
          <el-table-column label="操作" width="300" align="center" fixed="right">
            <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>
              <el-button size="mini" icon="el-icon-edit" @click="editPlatform(scope.row)">编辑</el-button>
              <el-button size="mini" icon="el-icon-share"  type="primary"  @click="chooseChannel(scope.row)">选择通道</el-button>
              <el-button size="mini" icon="el-icon-delete"  type="danger" @click="deletePlatform(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
@@ -64,30 +60,26 @@
          layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>

      <platformEdit ref="platformEdit" ></platformEdit>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import devicePlayer from './gb28181/devicePlayer.vue'
import platformEdit from './platformEdit.vue'
import uiHeader from './UiHeader.vue'
export default {
  name: 'app',
  components: {
    devicePlayer,
    platformEdit,
    uiHeader
  },
  data() {
    return {
      deviceList: [], //设备列表
      currentDevice: {}, //当前操作设备对象
      platformList: [], //设备列表

      videoComponentList: [],
      updateLooper: 0, //数据刷新轮训标志
      currentDeviceChannelsLenth:0,
      winHeight: window.innerHeight - 200,
      winHeight: window.innerHeight - 260,
      currentPage:1,
      count:15,
      total:0
@@ -95,17 +87,7 @@
  },
  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() {
@@ -113,146 +95,71 @@
    this.updateLooper = setInterval(this.initData, 10000);
  },
  destroyed() {
    this.$destroy('videojs');
    clearTimeout(this.updateLooper);
  },
  methods: {
    addParentPlatform: function() {
      this.$refs.platformEdit.openDialog(null, this.initData)
    },
    editPlatform: function(platform) {
      console.log(platform)
      this.$refs.platformEdit.openDialog(platform, this.initData)
    },
    deletePlatform: function(platform) {
        var that = this;
        that.$confirm('确认删除?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                that.deletePlatformCommit(platform)
            })
    },
    deletePlatformCommit: function(platform) {
        var that = this;
        that.$axios.post(`/api/platforms/delete`, platform)
            .then(function (res) {
                if (res.data == "success") {
                    that.$message({
                        showClose: true,
                        message: '删除成功',
                        type: 'success'
                    });
                    that.initData()
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    },
    chooseChannel: function(platform) {

    },
    initData: function() {
      this.getDeviceList();
      this.getPlatformList();
    },
    currentChange: function(val){
      this.currentPage = val;
      this.getDeviceList();
      this.getPlatformList();
    },
    handleSizeChange: function(val){
      this.count = val;
      this.getDeviceList();
      this.getPlatformList();
    },
    getDeviceList: function() {
    getPlatformList: function() {
      let that = this;

      this.$axios.get(`/api/devices`,{
        params: {
          page: that.currentPage - 1,
          count: that.count
        }
      } )
      this.$axios.get(`/api/platforms/${that.count}/${that.currentPage - 1}`)
        .then(function (res) {
          console.log(res);
          that.total = res.data.total;
          that.deviceList = res.data.data;
          that.platformList = 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>

 web_src/src/components/UiHeader.vue

@@ -3,8 +3,7 @@
        <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="/parentPlatformList/15/1">国标级联</el-menu-item>
            <el-menu-item style="float: right;" @click="loginout">退出</el-menu-item>
        </el-menu>
    </div>

 web_src/src/components/platformEdit.vue

New file
@@ -0,0 +1,382 @@
<template>
<div id="addlatform" v-loading="isLoging">
    <el-dialog title="添加平台" width="70%" top="2rem" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
        <div id="shared" style="text-align: right; margin-top: 1rem;">

            <el-row :gutter="24">
                <el-col :span="11">
                    <el-form ref="platform1" :rules="rules" :model="platform" label-width="160px" >
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="platform.name"></el-input>
                        </el-form-item>
                        <el-form-item label="SIP服务国标编码" prop="serverGBId">
                            <el-input v-model="platform.serverGBId" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="SIP服务国标域" prop="serverGBDomain">
                            <el-input v-model="platform.serverGBDomain" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="SIP服务IP" prop="serverIP">
                            <el-input v-model="platform.serverIP" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="SIP服务端口" prop="serverPort">
                            <el-input v-model="platform.serverPort" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="设备国标编号" prop="deviceGBId">
                            <el-input v-model="platform.deviceGBId" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="本地IP" prop="deviceIp">
                            <el-input v-model="platform.deviceIp" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="本地端口" prop="devicePort">
                            <el-input v-model="platform.devicePort" :disabled="true"></el-input>
                        </el-form-item>
                        
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form ref="platform2" :rules="rules" :model="platform" label-width="160px">
                        <el-form-item label="SIP认证用户名" prop="username">
                            <el-input v-model="platform.username"></el-input>
                        </el-form-item>
                        <el-form-item label="SIP认证密码" prop="password">
                            <el-input v-model="platform.password" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="注册周期(秒)" prop="expires">
                            <el-input v-model="platform.expires"></el-input>
                        </el-form-item>
                        <el-form-item label="心跳周期(秒)" prop="keepTimeout">
                            <el-input v-model="platform.keepTimeout"></el-input>
                        </el-form-item>
                        <el-form-item label="信令传输" prop="transport">
                            <el-select  v-model="platform.transport" style="width:100%" placeholder="请选择信令传输方式">
                                <el-option label="UDP" value="UDP"></el-option>
                                <el-option label="TCP" value="TCP"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item  label="字符集"  prop="characterSet">
                            <el-select v-model="platform.characterSet" style="width:100%" placeholder="请选择字符集">
                                <el-option label="GB2312" value="GB2312"></el-option>
                                <el-option label="UTF-8" value="UTF-8"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="其他选项" >
                            <el-checkbox label="启用" v-model="platform.enable" ></el-checkbox>
                            <el-checkbox label="允许云台控制" v-model="platform.PTZEnable"></el-checkbox>
                            <el-checkbox label="启用RTCP保活" v-model="platform.rtcp"></el-checkbox>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">{{onSubmit_text}}</el-button>
                            <el-button @click="close">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
    </el-dialog>
</div>
</template>

<script>
export default {
    name: 'platformEdit',
    props: {},
    computed: {
        
    },
    created() {},
    data() {
        return {
            listChangeCallback: null,
            showDialog: false,
            isLoging: false,
            onSubmit_text:"立即创建",
            // platform: {
            //     enable: false,
            //     PTZEnable: true,
            //     rtcp: false,
            //     name: null,
            //     serverGBId: null,
            //     serverGBDomain: null,
            //     serverIP: null,
            //     serverPort: null,
            //     deviceGBId: null,
            //     deviceIp: null,
            //     devicePort: null,
            //     username: null,
            //     password: null,
            //     expires: 300,
            //     keepTimeout: 60,
            //     transport: "UDP",
            //     characterSet: "GB2312",
            // },
            platform: {
                enable: true,
                PTZEnable: true,
                rtcp: false,
                name: "测试001",
                serverGBId: "34020000002000000001",
                serverGBDomain: "3402000000",
                serverIP: "192.168.1.141",
                serverPort: "5060",
                deviceGBId: "34020000001320001101",
                deviceIp: "192.168.1.20",
                devicePort: "5060",
                username: "34020000001320001101",
                password: "12345678",
                expires: 300,
                keepTimeout: 60,
                transport: "UDP",
                characterSet: "GB2312",
            },
            rules: {
                name: [
                    { required: true, message:"请输入平台名称", trigger: 'blur' }
                ],
                serverGBId: [
                    { required: true, message:"请输入SIP服务国标编码",  trigger: 'blur' }
                ],
                serverGBDomain: [
                    { required: true, message:"请输入SIP服务国标域",   trigger: 'blur' }
                ],
                serverIP: [
                    { required: true, message:"请输入SIP服务IP",   trigger: 'blur' }
                ],
                serverPort: [
                    { required: true, message:"请输入SIP服务端口",   trigger: 'blur' }
                ],
                deviceGBId: [
                    { required: true, message:"请输入设备国标编号",   trigger: 'blur' }
                ],
                username: [
                    { required: false, message:"请输入SIP认证用户名",   trigger: 'blur' }
                ],
                password: [
                    { required: false, message:"请输入SIP认证密码",   trigger: 'blur' }
                ],
                expires: [
                    { required: true, message:"请输入注册周期",   trigger: 'blur' }
                ],
                keepTimeout: [
                    { required: true, message:"请输入心跳周期",   trigger: 'blur' }
                ],
                transport: [
                    { required: true, message:"请选择信令传输",   trigger: 'blur' }
                ],
                characterSet: [
                    { required: true, message:"请选择编码字符集",   trigger: 'blur' }
                ]
                }
        };
    },
    methods: {
        openDialog: function (platform, callback) {
            this.showDialog = true;
            this.listChangeCallback = callback;
            if (platform != null) {
                this.platform = platform;
                this.onSubmit_text = "保存"
            }
            
        },
        onSubmit: function () {
            console.log('onSubmit');
            var that = this;
            that.$axios.post(`/api/platforms/save`, that.platform)
                .then(function (res) {
                    console.log(res)
                    console.log(res.data == "success")
                    if (res.data == "success") {
                        that.$message({
                            showClose: true,
                            message: '保存成功',
                            type: 'success'
                        });
                        that.showDialog = false;
                        if (that.listChangeCallback != null) {
                            that.listChangeCallback()
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        close: function () {
            console.log('关闭添加视频平台');
            this.showDialog = false;
            this.$refs.platform1.resetFields();
            this.$refs.platform2.resetFields();
            
        }

    }
};
</script>

<style>
.control-wrapper {
    position: relative;
    width: 6.25rem;
    height: 6.25rem;
    max-width: 6.25rem;
    max-height: 6.25rem;
    border-radius: 100%;
    margin-top: 2.5rem;
    margin-left: 0.5rem;
    float: left;
}

.control-panel {
    position: relative;
    top: 0;
    left: 5rem;
    height: 11rem;
    max-height: 11rem;
}

.control-btn {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 44%;
    height: 44%;
    border-radius: 5px;
    border: 1px solid #78aee4;
    box-sizing: border-box;
    transition: all 0.3s linear;
}

.control-btn i {
    font-size: 20px;
    color: #78aee4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.control-round {
    position: absolute;
    top: 21%;
    left: 21%;
    width: 58%;
    height: 58%;
    background: #fff;
    border-radius: 100%;
}

.control-round-inner {
    position: absolute;
    left: 13%;
    top: 13%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 70%;
    font-size: 40px;
    color: #78aee4;
    border: 1px solid #78aee4;
    border-radius: 100%;
    transition: all 0.3s linear;
}

.control-inner-btn {
    position: absolute;
    width: 60%;
    height: 60%;
    background: #fafafa;
}

.control-top {
    top: -8%;
    left: 27%;
    transform: rotate(-45deg);
    border-radius: 5px 100% 5px 0;
}

.control-top i {
    transform: rotate(45deg);
    border-radius: 5px 100% 5px 0;
}

.control-top .control-inner {
    left: -1px;
    bottom: 0;
    border-top: 1px solid #78aee4;
    border-right: 1px solid #78aee4;
    border-radius: 0 100% 0 0;
}

.control-top .fa {
    transform: rotate(45deg) translateY(-7px);
}

.control-left {
    top: 27%;
    left: -8%;
    transform: rotate(45deg);
    border-radius: 5px 0 5px 100%;
}

.control-left i {
    transform: rotate(-45deg);
}

.control-left .control-inner {
    right: -1px;
    top: -1px;
    border-bottom: 1px solid #78aee4;
    border-left: 1px solid #78aee4;
    border-radius: 0 0 0 100%;
}

.control-left .fa {
    transform: rotate(-45deg) translateX(-7px);
}

.control-right {
    top: 27%;
    right: -8%;
    transform: rotate(45deg);
    border-radius: 5px 100% 5px 0;
}

.control-right i {
    transform: rotate(-45deg);
}

.control-right .control-inner {
    left: -1px;
    bottom: -1px;
    border-top: 1px solid #78aee4;
    border-right: 1px solid #78aee4;
    border-radius: 0 100% 0 0;
}

.control-right .fa {
    transform: rotate(-45deg) translateX(7px);
}

.control-bottom {
    left: 27%;
    bottom: -8%;
    transform: rotate(45deg);
    border-radius: 0 5px 100% 5px;
}

.control-bottom i {
    transform: rotate(-45deg);
}

.control-bottom .control-inner {
    top: -1px;
    left: -1px;
    border-bottom: 1px solid #78aee4;
    border-right: 1px solid #78aee4;
    border-radius: 0 0 100% 0;
}

.control-bottom .fa {
    transform: rotate(-45deg) translateY(7px);
}
</style>

 web_src/src/router/index.js

@@ -37,7 +37,7 @@
      component: channelList,
    },,
    {
      path: '/parentPlatformList/:platformId/:count/:page',
      path: '/parentPlatformList/:count/:page',
      name: 'parentPlatformList',
      component: parentPlatformList,
    },