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,6 +42,7 @@ https://gitee.com/18010473990/wvp-GB28181.git
42 - [ ] 通道选择 42 - [ ] 通道选择
43 - [ ] 通道推送 43 - [ ] 通道推送
44 - [ ] 点播 44 - [ ] 点播
  45 + - [ ] 云台控制
45 - [ ] 添加RTSP视频 46 - [ ] 添加RTSP视频
46 - [ ] 添加ONVIF探测局域网内的设备 47 - [ ] 添加ONVIF探测局域网内的设备
47 - [ ] 添加RTMP视频 48 - [ ] 添加RTMP视频
src/main/java/com/genersoft/iot/vmp/gb28181/bean/ParentPlatform.java
  View file @14003b9
@@ -85,9 +85,15 @@ public class ParentPlatform { @@ -85,9 +85,15 @@ public class ParentPlatform {
85 85
86 /** 86 /**
87 * RTCP流保活 87 * RTCP流保活
  88 + * TODO 预留, 暂不实现
88 */ 89 */
89 private boolean rtcp; 90 private boolean rtcp;
90 91
  92 + /**
  93 + * 在线状态
  94 + */
  95 + private boolean status;
  96 +
91 97
92 public boolean isEnable() { 98 public boolean isEnable() {
93 return enable; 99 return enable;
@@ -224,4 +230,12 @@ public class ParentPlatform { @@ -224,4 +230,12 @@ public class ParentPlatform {
224 public void setRtcp(boolean rtcp) { 230 public void setRtcp(boolean rtcp) {
225 this.rtcp = rtcp; 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,7 +567,7 @@ public class VideoManagerRedisStoragerImpl implements IVideoManagerStorager {
567 567
568 @Override 568 @Override
569 public boolean deleteParentPlatform(ParentPlatform parentPlatform) { 569 public boolean deleteParentPlatform(ParentPlatform parentPlatform) {
570 - return false; 570 + return redis.del(VideoManagerConstants.PLATFORM_PREFIX + parentPlatform.getDeviceGBId());
571 } 571 }
572 572
573 @Override 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,6 +11,7 @@ import org.springframework.beans.factory.annotation.Autowired;
11 import org.springframework.http.HttpStatus; 11 import org.springframework.http.HttpStatus;
12 import org.springframework.http.ResponseEntity; 12 import org.springframework.http.ResponseEntity;
13 import org.springframework.stereotype.Controller; 13 import org.springframework.stereotype.Controller;
  14 +import org.springframework.util.StringUtils;
14 import org.springframework.web.bind.annotation.*; 15 import org.springframework.web.bind.annotation.*;
15 16
16 @CrossOrigin 17 @CrossOrigin
@@ -23,8 +24,8 @@ public class PlatformController { @@ -23,8 +24,8 @@ public class PlatformController {
23 @Autowired 24 @Autowired
24 private IVideoManagerStorager storager; 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 if (logger.isDebugEnabled()) { 30 if (logger.isDebugEnabled()) {
30 logger.debug("查询所有上级设备API调用"); 31 logger.debug("查询所有上级设备API调用");
@@ -32,12 +33,26 @@ public class PlatformController { @@ -32,12 +33,26 @@ public class PlatformController {
32 return storager.queryParentPlatformList(page, count); 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 if (logger.isDebugEnabled()) { 40 if (logger.isDebugEnabled()) {
39 logger.debug("查询所有上级设备API调用"); 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 boolean updateResult = storager.updateParentPlatform(parentPlatform); 56 boolean updateResult = storager.updateParentPlatform(parentPlatform);
42 if (updateResult) { 57 if (updateResult) {
43 return new ResponseEntity<>("success", HttpStatus.OK); 58 return new ResponseEntity<>("success", HttpStatus.OK);
@@ -45,4 +60,23 @@ public class PlatformController { @@ -45,4 +60,23 @@ public class PlatformController {
45 return new ResponseEntity<>("fail", HttpStatus.OK); 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,12 +7,12 @@ spring:
7 communicate: http 7 communicate: http
8 redis: 8 redis:
9 # Redis服务器IP 9 # Redis服务器IP
10 - host: 127.0.0.1 10 + host: 192.168.1.141
11 #端口号 11 #端口号
12 port: 6379 12 port: 6379
13 database: 6 13 database: 6
14 #访问密码,若你的redis服务器没有设置密码，就不需要用密码去连接 14 #访问密码,若你的redis服务器没有设置密码，就不需要用密码去连接
15 - password: 15 + password: 4767cb971b40a1300fa09b7f87b09d1c
16 #超时时间 16 #超时时间
17 timeout: 10000 17 timeout: 10000
18 datasource: 18 datasource:
@@ -25,7 +25,7 @@ spring: @@ -25,7 +25,7 @@ spring:
25 server: 25 server:
26 port: 18080 26 port: 18080
27 sip: 27 sip:
28 - ip: 192.168.1.44 28 + ip: 192.168.1.20
29 port: 5060 29 port: 5060
30 # 根据国标6.1.2中规定，domain宜采用ID统一编码的前十位编码。国标附录D中定义前8位为中心编码（由省级、市级、区级、基层编号组成，参照GB/T 2260-2007） 30 # 根据国标6.1.2中规定，domain宜采用ID统一编码的前十位编码。国标附录D中定义前8位为中心编码（由省级、市级、区级、基层编号组成，参照GB/T 2260-2007）
31 # 后两位为行业编码，定义参照附录D.3 31 # 后两位为行业编码，定义参照附录D.3
@@ -40,9 +40,9 @@ auth: #32位小写md5加密（默认密码为admin） @@ -40,9 +40,9 @@ auth: #32位小写md5加密（默认密码为admin）
40 password: 21232f297a57a5a743894a0e4a801fc3 40 password: 21232f297a57a5a743894a0e4a801fc3
41 41
42 media: #zlm服务器的ip与http端口, 重点: 这是http端口 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 secret: 035c73f7-bb6b-4889-a715-d9eb2d1925cc 46 secret: 035c73f7-bb6b-4889-a715-d9eb2d1925cc
47 streamNoneReaderDelayMS: 600000 # 无人观看多久自动关闭流 47 streamNoneReaderDelayMS: 600000 # 无人观看多久自动关闭流
48 # 关闭等待收到流编码信息后在返回, 48 # 关闭等待收到流编码信息后在返回,
web_src/src/components/ParentPlatformList.vue
  View file @14003b9
@@ -8,49 +8,45 @@ @@ -8,49 +8,45 @@
8 <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> 8 <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
9 <span style="font-size: 1rem; font-weight: bold;">上级平台列表</span> 9 <span style="font-size: 1rem; font-weight: bold;">上级平台列表</span>
10 </div> 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 <template slot-scope="scope"> 19 <template slot-scope="scope">
22 <div slot="reference" class="name-wrapper"> 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 </div> 23 </div>
26 </template> 24 </template>
27 </el-table-column> 25 </el-table-column>
28 - <el-table-column label="地址" width="180" align="center"> 26 + <el-table-column label="状态" width="120" align="center">
29 <template slot-scope="scope"> 27 <template slot-scope="scope">
30 <div slot="reference" class="name-wrapper"> 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 </div> 31 </div>
33 </template> 32 </template>
34 - <el-table-column prop="deviceId" label="设备国标编号" width="240" align="center">  
35 - </el-table-column>  
36 </el-table-column> 33 </el-table-column>
37 -  
38 - <el-table-column label="流传输模式" align="center" width="160"> 34 + <el-table-column label="地址" width="180" align="center">
39 <template slot-scope="scope"> 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 </template> 39 </template>
46 </el-table-column> 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 <template slot-scope="scope"> 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 </template> 50 </template>
55 </el-table-column> 51 </el-table-column>
56 </el-table> 52 </el-table>
@@ -64,30 +60,26 @@ @@ -64,30 +60,26 @@
64 layout="total, sizes, prev, pager, next" 60 layout="total, sizes, prev, pager, next"
65 :total="total"> 61 :total="total">
66 </el-pagination> 62 </el-pagination>
67 - 63 + <platformEdit ref="platformEdit" ></platformEdit>
68 </el-main> 64 </el-main>
69 </el-container> 65 </el-container>
70 </div> 66 </div>
71 </template> 67 </template>
72 68
73 <script> 69 <script>
74 -import devicePlayer from './gb28181/devicePlayer.vue' 70 +import platformEdit from './platformEdit.vue'
75 import uiHeader from './UiHeader.vue' 71 import uiHeader from './UiHeader.vue'
76 export default { 72 export default {
77 name: 'app', 73 name: 'app',
78 components: { 74 components: {
79 - devicePlayer, 75 + platformEdit,
80 uiHeader 76 uiHeader
81 }, 77 },
82 data() { 78 data() {
83 return { 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 currentPage:1, 83 currentPage:1,
92 count:15, 84 count:15,
93 total:0 85 total:0
@@ -95,17 +87,7 @@ export default { @@ -95,17 +87,7 @@ export default {
95 }, 87 },
96 computed: { 88 computed: {
97 getcurrentDeviceChannels: function() { 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 mounted() { 93 mounted() {
@@ -113,146 +95,71 @@ export default { @@ -113,146 +95,71 @@ export default {
113 this.updateLooper = setInterval(this.initData, 10000); 95 this.updateLooper = setInterval(this.initData, 10000);
114 }, 96 },
115 destroyed() { 97 destroyed() {
116 - this.$destroy('videojs');  
117 clearTimeout(this.updateLooper); 98 clearTimeout(this.updateLooper);
118 }, 99 },
119 methods: { 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 initData: function() { 138 initData: function() {
121 - this.getDeviceList(); 139 + this.getPlatformList();
122 }, 140 },
123 currentChange: function(val){ 141 currentChange: function(val){
124 this.currentPage = val; 142 this.currentPage = val;
125 - this.getDeviceList(); 143 + this.getPlatformList();
126 }, 144 },
127 handleSizeChange: function(val){ 145 handleSizeChange: function(val){
128 this.count = val; 146 this.count = val;
129 - this.getDeviceList(); 147 + this.getPlatformList();
130 }, 148 },
131 - getDeviceList: function() { 149 + getPlatformList: function() {
132 let that = this; 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 .then(function (res) { 153 .then(function (res) {
141 - console.log(res);  
142 that.total = res.data.total; 154 that.total = res.data.total;
143 - that.deviceList = res.data.data; 155 + that.platformList = res.data.data;
144 }) 156 })
145 .catch(function (error) { 157 .catch(function (error) {
146 console.log(error); 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 </script> 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,8 +3,7 @@
3 <el-menu router :default-active="this.$route.path" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" mode="horizontal"> 3 <el-menu router :default-active="this.$route.path" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" mode="horizontal">
4 <el-menu-item index="/">控制台</el-menu-item> 4 <el-menu-item index="/">控制台</el-menu-item>
5 <el-menu-item index="/videoList">设备列表</el-menu-item> 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 <el-menu-item style="float: right;" @click="loginout">退出</el-menu-item> 7 <el-menu-item style="float: right;" @click="loginout">退出</el-menu-item>
9 </el-menu> 8 </el-menu>
10 </div> 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,7 +37,7 @@ export default new VueRouter({
37 component: channelList, 37 component: channelList,
38 },, 38 },,
39 { 39 {
40 - path: '/parentPlatformList/:platformId/:count/:page', 40 + path: '/parentPlatformList/:count/:page',
41 name: 'parentPlatformList', 41 name: 'parentPlatformList',
42 component: parentPlatformList, 42 component: parentPlatformList,
43 }, 43 },