Shikong/wvp-gb28181-project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[UI] 完成国标级联的CURD

Browse Source
This commit is contained in:
648540858 2020-11-23 18:17:20 +08:00
parent 51ff7ae180
commit ae786534c6
9 changed files with 519 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -42,6 +42,7 @@ https://gitee.com/18010473990/wvp-GB28181.git
- [ ] 通道选择
- [ ] 通道推送
- [ ] 点播
- [ ] 云台控制
- [ ] 添加RTSP视频
- [ ] 添加ONVIF探测局域网内的设备
- [ ] 添加RTMP视频

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

@ -85,9 +85,15 @@ public class ParentPlatform {
/**
* RTCP流保活
* TODO 预留, 暂不实现
*/
private boolean rtcp;
/**
* 在线状态
*/
private boolean status;
public boolean isEnable() {
return enable;
@ -224,4 +230,12 @@ public class ParentPlatform {
public void setRtcp(boolean rtcp) {
this.rtcp = rtcp;
}
public boolean isStatus() {
return status;
}
public void setStatus(boolean status) {
this.status = status;
}
}

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

@ -567,7 +567,7 @@ public class VideoManagerRedisStoragerImpl implements IVideoManagerStorager {
@Override
public boolean deleteParentPlatform(ParentPlatform parentPlatform) {
return false;
return redis.del(VideoManagerConstants.PLATFORM_PREFIX + parentPlatform.getDeviceGBId());
}
@Override

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

@ -11,6 +11,7 @@ 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.util.StringUtils;
import org.springframework.web.bind.annotation.*;
@CrossOrigin
@ -23,8 +24,8 @@ public class PlatformController {
@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 @@ public class PlatformController {
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 @@ public class PlatformController {
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);
}
}
}

12
src/main/resources/application.yml
View File

@ -7,12 +7,12 @@ spring:
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 @@ spring:
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 @@ auth: #32位小写md5加密（默认密码为admin）
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 # 无人观看多久自动关闭流
# 关闭等待收到流编码信息后在返回,

243
web_src/src/components/ParentPlatformList.vue
View File

@ -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 @@ export default {
},
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 @@ export default {
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>

3
web_src/src/components/UiHeader.vue
View File

@ -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>

382
web_src/src/components/platformEdit.vue Normal file
View 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>

2
web_src/src/router/index.js
View File

@ -37,7 +37,7 @@ export default new VueRouter({
component: channelList,
},,
{
path: '/parentPlatformList/:platformId/:count/:page',
path: '/parentPlatformList/:count/:page',
name: 'parentPlatformList',
component: parentPlatformList,
},