guzijian / wvp-GB28181-pro · Commits

Commit 14003b98053b2b48076d0a7ab08723f9ead88000

Authored by 648540858
1 parent 19049788

[UI] 完成国标级联的CURD

Inline Side-by-side
Showing 9 changed files with 517 additions and 180 deletions
README.md
  View file @14003b9
... ... @@ -42,6 +42,7 @@ https://gitee.com/18010473990/wvp-GB28181.git
42 42 - [ ] 通道选择
43 43 - [ ] 通道推送
44 44 - [ ] 点播
  45 + - [ ] 云台控制
45 46 - [ ] 添加RTSP视频
46 47 - [ ] 添加ONVIF探测局域网内的设备
47 48 - [ ] 添加RTMP视频
... ...
src/main/java/com/genersoft/iot/vmp/gb28181/bean/ParentPlatform.java
  View file @14003b9
... ... @@ -85,9 +85,15 @@ public class ParentPlatform {
85 85  
86 86 /**
87 87 * RTCP流保活
  88 + * TODO 预留, 暂不实现
88 89 */
89 90 private boolean rtcp;
90 91  
  92 + /**
  93 + * 在线状态
  94 + */
  95 + private boolean status;
  96 +
91 97  
92 98 public boolean isEnable() {
93 99 return enable;
... ... @@ -224,4 +230,12 @@ public class ParentPlatform {
224 230 public void setRtcp(boolean rtcp) {
225 231 this.rtcp = rtcp;
226 232 }
  233 +
  234 + public boolean isStatus() {
  235 + return status;
  236 + }
  237 +
  238 + public void setStatus(boolean status) {
  239 + this.status = status;
  240 + }
227 241 }
... ...
src/main/java/com/genersoft/iot/vmp/storager/redis/VideoManagerRedisStoragerImpl.java
  View file @14003b9
... ... @@ -567,7 +567,7 @@ public class VideoManagerRedisStoragerImpl implements IVideoManagerStorager {
567 567  
568 568 @Override
569 569 public boolean deleteParentPlatform(ParentPlatform parentPlatform) {
570   - return false;
  570 + return redis.del(VideoManagerConstants.PLATFORM_PREFIX + parentPlatform.getDeviceGBId());
571 571 }
572 572  
573 573 @Override
... ...
src/main/java/com/genersoft/iot/vmp/vmanager/platform/PlatformController.java
  View file @14003b9
... ... @@ -11,6 +11,7 @@ import org.springframework.beans.factory.annotation.Autowired;
11 11 import org.springframework.http.HttpStatus;
12 12 import org.springframework.http.ResponseEntity;
13 13 import org.springframework.stereotype.Controller;
  14 +import org.springframework.util.StringUtils;
14 15 import org.springframework.web.bind.annotation.*;
15 16  
16 17 @CrossOrigin
... ... @@ -23,8 +24,8 @@ public class PlatformController {
23 24 @Autowired
24 25 private IVideoManagerStorager storager;
25 26  
26   - @GetMapping("/platforms")
27   - public PageResult<ParentPlatform> platforms(int page, int count){
  27 + @GetMapping("/platforms/{count}/{page}")
  28 + public PageResult<ParentPlatform> platforms(@PathVariable int page, @PathVariable int count){
28 29  
29 30 if (logger.isDebugEnabled()) {
30 31 logger.debug("查询所有上级设备API调用");
... ... @@ -32,12 +33,26 @@ public class PlatformController {
32 33 return storager.queryParentPlatformList(page, count);
33 34 }
34 35  
35   - @PostMapping("/platforms/add")
36   - public ResponseEntity<String> addPlatform(ParentPlatform parentPlatform){
  36 + @RequestMapping("/platforms/save")
  37 + @ResponseBody
  38 + public ResponseEntity<String> savePlatform(@RequestBody ParentPlatform parentPlatform){
37 39  
38 40 if (logger.isDebugEnabled()) {
39 41 logger.debug("查询所有上级设备API调用");
40 42 }
  43 + if (StringUtils.isEmpty(parentPlatform.getName())
  44 + ||StringUtils.isEmpty(parentPlatform.getServerGBId())
  45 + ||StringUtils.isEmpty(parentPlatform.getServerGBDomain())
  46 + ||StringUtils.isEmpty(parentPlatform.getServerIP())
  47 + ||StringUtils.isEmpty(parentPlatform.getServerPort())
  48 + ||StringUtils.isEmpty(parentPlatform.getDeviceGBId())
  49 + ||StringUtils.isEmpty(parentPlatform.getExpires())
  50 + ||StringUtils.isEmpty(parentPlatform.getKeepTimeout())
  51 + ||StringUtils.isEmpty(parentPlatform.getTransport())
  52 + ||StringUtils.isEmpty(parentPlatform.getCharacterSet())
  53 + ){
  54 + return new ResponseEntity<>("missing parameters", HttpStatus.BAD_REQUEST);
  55 + }
41 56 boolean updateResult = storager.updateParentPlatform(parentPlatform);
42 57 if (updateResult) {
43 58 return new ResponseEntity<>("success", HttpStatus.OK);
... ... @@ -45,4 +60,23 @@ public class PlatformController {
45 60 return new ResponseEntity<>("fail", HttpStatus.OK);
46 61 }
47 62 }
  63 +
  64 + @RequestMapping("/platforms/delete")
  65 + @ResponseBody
  66 + public ResponseEntity<String> deletePlatform(@RequestBody ParentPlatform parentPlatform){
  67 +
  68 + if (logger.isDebugEnabled()) {
  69 + logger.debug("查询所有上级设备API调用");
  70 + }
  71 + if (StringUtils.isEmpty(parentPlatform.getDeviceGBId())
  72 + ){
  73 + return new ResponseEntity<>("missing parameters", HttpStatus.BAD_REQUEST);
  74 + }
  75 + boolean deleteResult = storager.deleteParentPlatform(parentPlatform);
  76 + if (deleteResult) {
  77 + return new ResponseEntity<>("success", HttpStatus.OK);
  78 + }else {
  79 + return new ResponseEntity<>("fail", HttpStatus.OK);
  80 + }
  81 + }
48 82 }
... ...
src/main/resources/application.yml
  View file @14003b9
... ... @@ -7,12 +7,12 @@ spring:
7 7 communicate: http
8 8 redis:
9 9 # Redis服务器IP
10   - host: 127.0.0.1
  10 + host: 192.168.1.141
11 11 #端口号
12 12 port: 6379
13 13 database: 6
14 14 #访问密码,若你的redis服务器没有设置密码，就不需要用密码去连接
15   - password:
  15 + password: 4767cb971b40a1300fa09b7f87b09d1c
16 16 #超时时间
17 17 timeout: 10000
18 18 datasource:
... ... @@ -25,7 +25,7 @@ spring:
25 25 server:
26 26 port: 18080
27 27 sip:
28   - ip: 192.168.1.44
  28 + ip: 192.168.1.20
29 29 port: 5060
30 30 # 根据国标6.1.2中规定，domain宜采用ID统一编码的前十位编码。国标附录D中定义前8位为中心编码（由省级、市级、区级、基层编号组成，参照GB/T 2260-2007）
31 31 # 后两位为行业编码，定义参照附录D.3
... ... @@ -40,9 +40,9 @@ auth: #32位小写md5加密（默认密码为admin）
40 40 password: 21232f297a57a5a743894a0e4a801fc3
41 41  
42 42 media: #zlm服务器的ip与http端口, 重点: 这是http端口
43   - ip: 192.168.1.44
44   - wanIp:
45   - port: 80
  43 + ip: 127.0.0.1
  44 + wanIp: 192.168.1.20
  45 + port: 6080
46 46 secret: 035c73f7-bb6b-4889-a715-d9eb2d1925cc
47 47 streamNoneReaderDelayMS: 600000 # 无人观看多久自动关闭流
48 48 # 关闭等待收到流编码信息后在返回,
... ...
web_src/src/components/ParentPlatformList.vue
  View file @14003b9
... ... @@ -8,49 +8,45 @@
8 8 <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
9 9 <span style="font-size: 1rem; font-weight: bold;">上级平台列表</span>
10 10 </div>
11   - <devicePlayer ref="devicePlayer"></devicePlayer>
  11 + <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
  12 + <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addParentPlatform">添加</el-button>
  13 + </div>
12 14 <!--设备列表-->
13   - <el-table :data="deviceList" border style="width: 100%" :height="winHeight">
14   - <el-table-column prop="name" label="名称" width="180" align="center">
15   - </el-table-column>
16   - <el-table-column prop="deviceId" label="平台编号" width="240" align="center">
17   - </el-table-column>
18   - <el-table-column prop="deviceId" label="是否启用" width="50" align="center">
19   - </el-table-column>
20   - <el-table-column label="状态" width="180" align="center">
  15 + <el-table :data="platformList" border style="width: 100%" :height="winHeight">
  16 + <el-table-column prop="name" label="名称" width="240" align="center"></el-table-column>
  17 + <el-table-column prop="serverGBId" label="平台编号" width="180" align="center"></el-table-column>
  18 + <el-table-column label="是否启用" width="120" align="center">
21 19 <template slot-scope="scope">
22 20 <div slot="reference" class="name-wrapper">
23   - <el-tag size="medium" v-if="scope.row.online == 1">在线</el-tag>
24   - <el-tag size="medium" type="info" v-if="scope.row.online == 0">离线</el-tag>
  21 + <el-tag size="medium" v-if="scope.row.enable">已启用</el-tag>
  22 + <el-tag size="medium" v-if="!scope.row.enable">未启用</el-tag>
25 23 </div>
26 24 </template>
27 25 </el-table-column>
28   - <el-table-column label="地址" width="180" align="center">
  26 + <el-table-column label="状态" width="120" align="center">
29 27 <template slot-scope="scope">
30 28 <div slot="reference" class="name-wrapper">
31   - <el-tag size="medium">{{ scope.row.host.address }}</el-tag>
  29 + <el-tag size="medium" v-if="scope.row.status">在线</el-tag>
  30 + <el-tag size="medium" type="info" v-if="!scope.row.status">离线</el-tag>
32 31 </div>
33 32 </template>
34   - <el-table-column prop="deviceId" label="设备国标编号" width="240" align="center">
35   - </el-table-column>
36 33 </el-table-column>
37   -
38   - <el-table-column label="流传输模式" align="center" width="160">
  34 + <el-table-column label="地址" width="180" align="center">
39 35 <template slot-scope="scope">
40   - <el-select size="mini" @change="transportChange(scope.row)" v-model="scope.row.streamMode" placeholder="请选择">
41   - <el-option key="UDP" label="UDP" value="UDP"></el-option>
42   - <el-option key="TCP-ACTIVE" label="TCP主动模式" :disabled="true" value="TCP-ACTIVE"></el-option>
43   - <el-option key="TCP-PASSIVE" label="TCP被动模式" value="TCP-PASSIVE"></el-option>
44   - </el-select>
  36 + <div slot="reference" class="name-wrapper">
  37 + <el-tag size="medium">{{ scope.row.serverIP}}:{{scope.row.serverPort }}</el-tag>
  38 + </div>
45 39 </template>
46 40 </el-table-column>
47   - <el-table-column prop="channelCount" label="通道数" align="center">
48   - </el-table-column>
49   -
50   - <el-table-column label="操作" width="240" align="center" fixed="right">
  41 + <el-table-column prop="deviceGBId" label="设备国标编号" width="240" align="center"></el-table-column>
  42 + <el-table-column prop="transport" label="流传输模式" width="120" align="center"></el-table-column>
  43 + <el-table-column prop="channelCount" label="通道数" align="center"></el-table-column>
  44 +
  45 + <el-table-column label="操作" width="300" align="center" fixed="right">
51 46 <template slot-scope="scope">
52   - <el-button size="mini" icon="el-icon-refresh" @click="refDevice(scope.row)">刷新通道</el-button>
53   - <el-button size="mini" icon="el-icon-s-open" type="primary" @click="showChannelList(scope.row)">查看通道</el-button>
  47 + <el-button size="mini" icon="el-icon-edit" @click="editPlatform(scope.row)">编辑</el-button>
  48 + <el-button size="mini" icon="el-icon-share" type="primary" @click="chooseChannel(scope.row)">选择通道</el-button>
  49 + <el-button size="mini" icon="el-icon-delete" type="danger" @click="deletePlatform(scope.row)">删除</el-button>
54 50 </template>
55 51 </el-table-column>
56 52 </el-table>
... ... @@ -64,30 +60,26 @@
64 60 layout="total, sizes, prev, pager, next"
65 61 :total="total">
66 62 </el-pagination>
67   -
  63 + <platformEdit ref="platformEdit" ></platformEdit>
68 64 </el-main>
69 65 </el-container>
70 66 </div>
71 67 </template>
72 68  
73 69 <script>
74   -import devicePlayer from './gb28181/devicePlayer.vue'
  70 +import platformEdit from './platformEdit.vue'
75 71 import uiHeader from './UiHeader.vue'
76 72 export default {
77 73 name: 'app',
78 74 components: {
79   - devicePlayer,
  75 + platformEdit,
80 76 uiHeader
81 77 },
82 78 data() {
83 79 return {
84   - deviceList: [], //设备列表
85   - currentDevice: {}, //当前操作设备对象
  80 + platformList: [], //设备列表
86 81  
87   - videoComponentList: [],
88   - updateLooper: 0, //数据刷新轮训标志
89   - currentDeviceChannelsLenth:0,
90   - winHeight: window.innerHeight - 200,
  82 + winHeight: window.innerHeight - 260,
91 83 currentPage:1,
92 84 count:15,
93 85 total:0
... ... @@ -95,17 +87,7 @@ export default {
95 87 },
96 88 computed: {
97 89 getcurrentDeviceChannels: function() {
98   - let data = this.currentDevice['channelMap'];
99   - let channels = null;
100   - if (data) {
101   - channels = Object.keys(data).map(key => {
102   - return data[key];
103   - });
104   - this.currentDeviceChannelsLenth = channels.length;
105   - }
106   -
107   - console.log("数据：" + JSON.stringify(channels));
108   - return channels;
  90 +
109 91 }
110 92 },
111 93 mounted() {
... ... @@ -113,146 +95,71 @@ export default {
113 95 this.updateLooper = setInterval(this.initData, 10000);
114 96 },
115 97 destroyed() {
116   - this.$destroy('videojs');
117 98 clearTimeout(this.updateLooper);
118 99 },
119 100 methods: {
  101 + addParentPlatform: function() {
  102 + this.$refs.platformEdit.openDialog(null, this.initData)
  103 + },
  104 + editPlatform: function(platform) {
  105 + console.log(platform)
  106 + this.$refs.platformEdit.openDialog(platform, this.initData)
  107 + },
  108 + deletePlatform: function(platform) {
  109 + var that = this;
  110 + that.$confirm('确认删除?', '提示', {
  111 + confirmButtonText: '确定',
  112 + cancelButtonText: '取消',
  113 + type: 'warning'
  114 + }).then(() => {
  115 + that.deletePlatformCommit(platform)
  116 + })
  117 + },
  118 + deletePlatformCommit: function(platform) {
  119 + var that = this;
  120 + that.$axios.post(`/api/platforms/delete`, platform)
  121 + .then(function (res) {
  122 + if (res.data == "success") {
  123 + that.$message({
  124 + showClose: true,
  125 + message: '删除成功',
  126 + type: 'success'
  127 + });
  128 + that.initData()
  129 + }
  130 + })
  131 + .catch(function (error) {
  132 + console.log(error);
  133 + });
  134 + },
  135 + chooseChannel: function(platform) {
  136 +
  137 + },
120 138 initData: function() {
121   - this.getDeviceList();
  139 + this.getPlatformList();
122 140 },
123 141 currentChange: function(val){
124 142 this.currentPage = val;
125   - this.getDeviceList();
  143 + this.getPlatformList();
126 144 },
127 145 handleSizeChange: function(val){
128 146 this.count = val;
129   - this.getDeviceList();
  147 + this.getPlatformList();
130 148 },
131   - getDeviceList: function() {
  149 + getPlatformList: function() {
132 150 let that = this;
133 151  
134   - this.$axios.get(`/api/devices`,{
135   - params: {
136   - page: that.currentPage - 1,
137   - count: that.count
138   - }
139   - } )
  152 + this.$axios.get(`/api/platforms/${that.count}/${that.currentPage - 1}`)
140 153 .then(function (res) {
141   - console.log(res);
142 154 that.total = res.data.total;
143   - that.deviceList = res.data.data;
  155 + that.platformList = res.data.data;
144 156 })
145 157 .catch(function (error) {
146 158 console.log(error);
147 159 });
148 160  
149   - },
150   - showChannelList: function(row) {
151   - console.log(JSON.stringify(row))
152   - this.$router.push(`/channelList/${row.deviceId}/0/15/1`);
153   - },
154   -
155   -
156   - //gb28181平台对接
157   - //刷新设备信息
158   - refDevice: function(itemData) {
159   - ///api/devices/{deviceId}/sync
160   - console.log("刷新对应设备:" + itemData.deviceId);
161   - this.$axios({
162   - method: 'post',
163   - url: '/api/devices/' + itemData.deviceId + '/sync'
164   - }).then(function(res) {
165   - // console.log("刷新设备结果："+JSON.stringify(res));
166   - }).catch(function(e) {
167   - that.$message({
168   - showClose: true,
169   - message: '请求成功',
170   - type: 'success'
171   - });
172   - });;
173   - },
174   - //通知设备上传媒体流
175   - sendDevicePush: function(itemData) {
176   - let deviceId = this.currentDevice.deviceId;
177   - let channelId = itemData.channelId;
178   - console.log("通知设备推流1：" + deviceId + " : " + channelId);
179   - let that = this;
180   - this.$axios({
181   - method: 'get',
182   - url: '/api/play/' + deviceId + '/' + channelId
183   - }).then(function(res) {
184   - let ssrc = res.data.ssrc;
185   - that.$refs.devicePlayer.play(ssrc,deviceId,channelId);
186   - }).catch(function(e) {
187   - });
188   - },
189   - transportChange: function (row) {
190   - console.log(row);
191   - console.log(`修改传输方式为 ${row.streamMode}：${row.deviceId} `);
192   - let that = this;
193   - this.$axios({
194   - method: 'get',
195   - url: '/api/devices/' + row.deviceId + '/transport/' + row.streamMode
196   - }).then(function(res) {
197   -
198   - }).catch(function(e) {
199   - });
200 161 }
201 162  
202 163 }
203 164 };
204 165 </script>
205   -
206   -<style>
207   -.videoList {
208   - display: flex;
209   - flex-wrap: wrap;
210   - align-content: flex-start;
211   -}
212   -
213   -.video-item {
214   - position: relative;
215   - width: 15rem;
216   - height: 10rem;
217   - margin-right: 1rem;
218   - background-color: #000000;
219   -}
220   -
221   -.video-item-img {
222   - position: absolute;
223   - top: 0;
224   - bottom: 0;
225   - left: 0;
226   - right: 0;
227   - margin: auto;
228   - width: 100%;
229   - height: 100%;
230   -}
231   -
232   -.video-item-img:after {
233   - content: "";
234   - display: inline-block;
235   - position: absolute;
236   - z-index: 2;
237   - top: 0;
238   - bottom: 0;
239   - left: 0;
240   - right: 0;
241   - margin: auto;
242   - width: 3rem;
243   - height: 3rem;
244   - background-image: url("../assets/loading.png");
245   - background-size: cover;
246   - background-color: #000000;
247   -}
248   -
249   -.video-item-title {
250   - position: absolute;
251   - bottom: 0;
252   - color: #000000;
253   - background-color: #ffffff;
254   - line-height: 1.5rem;
255   - padding: 0.3rem;
256   - width: 14.4rem;
257   -}
258   -</style>
... ...
web_src/src/components/UiHeader.vue
  View file @14003b9
... ... @@ -3,8 +3,7 @@
3 3 <el-menu router :default-active="this.$route.path" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" mode="horizontal">
4 4 <el-menu-item index="/">控制台</el-menu-item>
5 5 <el-menu-item index="/videoList">设备列表</el-menu-item>
6   - <el-menu-item index="/parentPlatformList">国标级联</el-menu-item>
7   - <!-- <el-menu-item index="/videoReplay">录像回看</el-menu-item> -->
  6 + <el-menu-item index="/parentPlatformList/15/1">国标级联</el-menu-item>
8 7 <el-menu-item style="float: right;" @click="loginout">退出</el-menu-item>
9 8 </el-menu>
10 9 </div>
... ...
web_src/src/components/platformEdit.vue 0 → 100644
  View file @14003b9
  1 +<template>
  2 +<div id="addlatform" v-loading="isLoging">
  3 + <el-dialog title="添加平台" width="70%" top="2rem" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
  4 + <div id="shared" style="text-align: right; margin-top: 1rem;">
  5 +
  6 + <el-row :gutter="24">
  7 + <el-col :span="11">
  8 + <el-form ref="platform1" :rules="rules" :model="platform" label-width="160px" >
  9 + <el-form-item label="名称" prop="name">
  10 + <el-input v-model="platform.name"></el-input>
  11 + </el-form-item>
  12 + <el-form-item label="SIP服务国标编码" prop="serverGBId">
  13 + <el-input v-model="platform.serverGBId" clearable></el-input>
  14 + </el-form-item>
  15 + <el-form-item label="SIP服务国标域" prop="serverGBDomain">
  16 + <el-input v-model="platform.serverGBDomain" clearable></el-input>
  17 + </el-form-item>
  18 + <el-form-item label="SIP服务IP" prop="serverIP">
  19 + <el-input v-model="platform.serverIP" clearable></el-input>
  20 + </el-form-item>
  21 + <el-form-item label="SIP服务端口" prop="serverPort">
  22 + <el-input v-model="platform.serverPort" clearable></el-input>
  23 + </el-form-item>
  24 + <el-form-item label="设备国标编号" prop="deviceGBId">
  25 + <el-input v-model="platform.deviceGBId" clearable></el-input>
  26 + </el-form-item>
  27 + <el-form-item label="本地IP" prop="deviceIp">
  28 + <el-input v-model="platform.deviceIp" :disabled="true"></el-input>
  29 + </el-form-item>
  30 + <el-form-item label="本地端口" prop="devicePort">
  31 + <el-input v-model="platform.devicePort" :disabled="true"></el-input>
  32 + </el-form-item>
  33 +
  34 + </el-form>
  35 + </el-col>
  36 + <el-col :span="12">
  37 + <el-form ref="platform2" :rules="rules" :model="platform" label-width="160px">
  38 + <el-form-item label="SIP认证用户名" prop="username">
  39 + <el-input v-model="platform.username"></el-input>
  40 + </el-form-item>
  41 + <el-form-item label="SIP认证密码" prop="password">
  42 + <el-input v-model="platform.password" type="password"></el-input>
  43 + </el-form-item>
  44 + <el-form-item label="注册周期(秒)" prop="expires">
  45 + <el-input v-model="platform.expires"></el-input>
  46 + </el-form-item>
  47 + <el-form-item label="心跳周期(秒)" prop="keepTimeout">
  48 + <el-input v-model="platform.keepTimeout"></el-input>
  49 + </el-form-item>
  50 + <el-form-item label="信令传输" prop="transport">
  51 + <el-select v-model="platform.transport" style="width:100%" placeholder="请选择信令传输方式">
  52 + <el-option label="UDP" value="UDP"></el-option>
  53 + <el-option label="TCP" value="TCP"></el-option>
  54 + </el-select>
  55 + </el-form-item>
  56 + <el-form-item label="字符集" prop="characterSet">
  57 + <el-select v-model="platform.characterSet" style="width:100%" placeholder="请选择字符集">
  58 + <el-option label="GB2312" value="GB2312"></el-option>
  59 + <el-option label="UTF-8" value="UTF-8"></el-option>
  60 + </el-select>
  61 + </el-form-item>
  62 + <el-form-item label="其他选项" >
  63 + <el-checkbox label="启用" v-model="platform.enable" ></el-checkbox>
  64 + <el-checkbox label="允许云台控制" v-model="platform.PTZEnable"></el-checkbox>
  65 + <el-checkbox label="启用RTCP保活" v-model="platform.rtcp"></el-checkbox>
  66 + </el-form-item>
  67 + <el-form-item>
  68 + <el-button type="primary" @click="onSubmit">{{onSubmit_text}}</el-button>
  69 + <el-button @click="close">取消</el-button>
  70 + </el-form-item>
  71 + </el-form>
  72 + </el-col>
  73 + </el-row>
  74 + </div>
  75 + </el-dialog>
  76 +</div>
  77 +</template>
  78 +
  79 +<script>
  80 +export default {
  81 + name: 'platformEdit',
  82 + props: {},
  83 + computed: {
  84 +
  85 + },
  86 + created() {},
  87 + data() {
  88 + return {
  89 + listChangeCallback: null,
  90 + showDialog: false,
  91 + isLoging: false,
  92 + onSubmit_text:"立即创建",
  93 + // platform: {
  94 + // enable: false,
  95 + // PTZEnable: true,
  96 + // rtcp: false,
  97 + // name: null,
  98 + // serverGBId: null,
  99 + // serverGBDomain: null,
  100 + // serverIP: null,
  101 + // serverPort: null,
  102 + // deviceGBId: null,
  103 + // deviceIp: null,
  104 + // devicePort: null,
  105 + // username: null,
  106 + // password: null,
  107 + // expires: 300,
  108 + // keepTimeout: 60,
  109 + // transport: "UDP",
  110 + // characterSet: "GB2312",
  111 + // },
  112 + platform: {
  113 + enable: true,
  114 + PTZEnable: true,
  115 + rtcp: false,
  116 + name: "测试001",
  117 + serverGBId: "34020000002000000001",
  118 + serverGBDomain: "3402000000",
  119 + serverIP: "192.168.1.141",
  120 + serverPort: "5060",
  121 + deviceGBId: "34020000001320001101",
  122 + deviceIp: "192.168.1.20",
  123 + devicePort: "5060",
  124 + username: "34020000001320001101",
  125 + password: "12345678",
  126 + expires: 300,
  127 + keepTimeout: 60,
  128 + transport: "UDP",
  129 + characterSet: "GB2312",
  130 + },
  131 + rules: {
  132 + name: [
  133 + { required: true, message:"请输入平台名称", trigger: 'blur' }
  134 + ],
  135 + serverGBId: [
  136 + { required: true, message:"请输入SIP服务国标编码", trigger: 'blur' }
  137 + ],
  138 + serverGBDomain: [
  139 + { required: true, message:"请输入SIP服务国标域", trigger: 'blur' }
  140 + ],
  141 + serverIP: [
  142 + { required: true, message:"请输入SIP服务IP", trigger: 'blur' }
  143 + ],
  144 + serverPort: [
  145 + { required: true, message:"请输入SIP服务端口", trigger: 'blur' }
  146 + ],
  147 + deviceGBId: [
  148 + { required: true, message:"请输入设备国标编号", trigger: 'blur' }
  149 + ],
  150 + username: [
  151 + { required: false, message:"请输入SIP认证用户名", trigger: 'blur' }
  152 + ],
  153 + password: [
  154 + { required: false, message:"请输入SIP认证密码", trigger: 'blur' }
  155 + ],
  156 + expires: [
  157 + { required: true, message:"请输入注册周期", trigger: 'blur' }
  158 + ],
  159 + keepTimeout: [
  160 + { required: true, message:"请输入心跳周期", trigger: 'blur' }
  161 + ],
  162 + transport: [
  163 + { required: true, message:"请选择信令传输", trigger: 'blur' }
  164 + ],
  165 + characterSet: [
  166 + { required: true, message:"请选择编码字符集", trigger: 'blur' }
  167 + ]
  168 + }
  169 + };
  170 + },
  171 + methods: {
  172 + openDialog: function (platform, callback) {
  173 + this.showDialog = true;
  174 + this.listChangeCallback = callback;
  175 + if (platform != null) {
  176 + this.platform = platform;
  177 + this.onSubmit_text = "保存"
  178 + }
  179 +
  180 + },
  181 + onSubmit: function () {
  182 + console.log('onSubmit');
  183 + var that = this;
  184 + that.$axios.post(`/api/platforms/save`, that.platform)
  185 + .then(function (res) {
  186 + console.log(res)
  187 + console.log(res.data == "success")
  188 + if (res.data == "success") {
  189 + that.$message({
  190 + showClose: true,
  191 + message: '保存成功',
  192 + type: 'success'
  193 + });
  194 + that.showDialog = false;
  195 + if (that.listChangeCallback != null) {
  196 + that.listChangeCallback()
  197 + }
  198 + }
  199 + })
  200 + .catch(function (error) {
  201 + console.log(error);
  202 + });
  203 + },
  204 + close: function () {
  205 + console.log('关闭添加视频平台');
  206 + this.showDialog = false;
  207 + this.$refs.platform1.resetFields();
  208 + this.$refs.platform2.resetFields();
  209 +
  210 + }
  211 +
  212 + }
  213 +};
  214 +</script>
  215 +
  216 +<style>
  217 +.control-wrapper {
  218 + position: relative;
  219 + width: 6.25rem;
  220 + height: 6.25rem;
  221 + max-width: 6.25rem;
  222 + max-height: 6.25rem;
  223 + border-radius: 100%;
  224 + margin-top: 2.5rem;
  225 + margin-left: 0.5rem;
  226 + float: left;
  227 +}
  228 +
  229 +.control-panel {
  230 + position: relative;
  231 + top: 0;
  232 + left: 5rem;
  233 + height: 11rem;
  234 + max-height: 11rem;
  235 +}
  236 +
  237 +.control-btn {
  238 + display: flex;
  239 + justify-content: center;
  240 + position: absolute;
  241 + width: 44%;
  242 + height: 44%;
  243 + border-radius: 5px;
  244 + border: 1px solid #78aee4;
  245 + box-sizing: border-box;
  246 + transition: all 0.3s linear;
  247 +}
  248 +
  249 +.control-btn i {
  250 + font-size: 20px;
  251 + color: #78aee4;
  252 + display: flex;
  253 + justify-content: center;
  254 + align-items: center;
  255 +}
  256 +
  257 +.control-round {
  258 + position: absolute;
  259 + top: 21%;
  260 + left: 21%;
  261 + width: 58%;
  262 + height: 58%;
  263 + background: #fff;
  264 + border-radius: 100%;
  265 +}
  266 +
  267 +.control-round-inner {
  268 + position: absolute;
  269 + left: 13%;
  270 + top: 13%;
  271 + display: flex;
  272 + justify-content: center;
  273 + align-items: center;
  274 + width: 70%;
  275 + height: 70%;
  276 + font-size: 40px;
  277 + color: #78aee4;
  278 + border: 1px solid #78aee4;
  279 + border-radius: 100%;
  280 + transition: all 0.3s linear;
  281 +}
  282 +
  283 +.control-inner-btn {
  284 + position: absolute;
  285 + width: 60%;
  286 + height: 60%;
  287 + background: #fafafa;
  288 +}
  289 +
  290 +.control-top {
  291 + top: -8%;
  292 + left: 27%;
  293 + transform: rotate(-45deg);
  294 + border-radius: 5px 100% 5px 0;
  295 +}
  296 +
  297 +.control-top i {
  298 + transform: rotate(45deg);
  299 + border-radius: 5px 100% 5px 0;
  300 +}
  301 +
  302 +.control-top .control-inner {
  303 + left: -1px;
  304 + bottom: 0;
  305 + border-top: 1px solid #78aee4;
  306 + border-right: 1px solid #78aee4;
  307 + border-radius: 0 100% 0 0;
  308 +}
  309 +
  310 +.control-top .fa {
  311 + transform: rotate(45deg) translateY(-7px);
  312 +}
  313 +
  314 +.control-left {
  315 + top: 27%;
  316 + left: -8%;
  317 + transform: rotate(45deg);
  318 + border-radius: 5px 0 5px 100%;
  319 +}
  320 +
  321 +.control-left i {
  322 + transform: rotate(-45deg);
  323 +}
  324 +
  325 +.control-left .control-inner {
  326 + right: -1px;
  327 + top: -1px;
  328 + border-bottom: 1px solid #78aee4;
  329 + border-left: 1px solid #78aee4;
  330 + border-radius: 0 0 0 100%;
  331 +}
  332 +
  333 +.control-left .fa {
  334 + transform: rotate(-45deg) translateX(-7px);
  335 +}
  336 +
  337 +.control-right {
  338 + top: 27%;
  339 + right: -8%;
  340 + transform: rotate(45deg);
  341 + border-radius: 5px 100% 5px 0;
  342 +}
  343 +
  344 +.control-right i {
  345 + transform: rotate(-45deg);
  346 +}
  347 +
  348 +.control-right .control-inner {
  349 + left: -1px;
  350 + bottom: -1px;
  351 + border-top: 1px solid #78aee4;
  352 + border-right: 1px solid #78aee4;
  353 + border-radius: 0 100% 0 0;
  354 +}
  355 +
  356 +.control-right .fa {
  357 + transform: rotate(-45deg) translateX(7px);
  358 +}
  359 +
  360 +.control-bottom {
  361 + left: 27%;
  362 + bottom: -8%;
  363 + transform: rotate(45deg);
  364 + border-radius: 0 5px 100% 5px;
  365 +}
  366 +
  367 +.control-bottom i {
  368 + transform: rotate(-45deg);
  369 +}
  370 +
  371 +.control-bottom .control-inner {
  372 + top: -1px;
  373 + left: -1px;
  374 + border-bottom: 1px solid #78aee4;
  375 + border-right: 1px solid #78aee4;
  376 + border-radius: 0 0 100% 0;
  377 +}
  378 +
  379 +.control-bottom .fa {
  380 + transform: rotate(-45deg) translateY(7px);
  381 +}
  382 +</style>
... ...
web_src/src/router/index.js
  View file @14003b9
... ... @@ -37,7 +37,7 @@ export default new VueRouter({
37 37 component: channelList,
38 38 },,
39 39 {
40   - path: '/parentPlatformList/:platformId/:count/:page',
  40 + path: '/parentPlatformList/:count/:page',
41 41 name: 'parentPlatformList',
42 42 component: parentPlatformList,
43 43 },
... ...