guzijian / wvp-GB28181-pro · Commits

Commit 658bec3ecc0453fce36b083bf6cbe03ee495d611

Authored by panlinlin
1 parent 7ed4a26b

国标级联--选择通道003-前端页面

Inline Side-by-side
Showing 15 changed files with 397 additions and 90 deletions
src/main/java/com/genersoft/iot/vmp/VManageBootstrap.java
  View file @658bec3
... ... @@ -8,7 +8,7 @@ import org.springframework.boot.autoconfigure.SpringBootApplication;
8 8  
9 9 @SpringBootApplication
10 10 public class VManageBootstrap extends LogManager {
11   - public static void main(String[] args) {
  11 + public static void main(String[] args) {
12 12 SpringApplication.run(VManageBootstrap.class, args);
13 13 }
14 14 }
... ...
src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommander.java
  View file @658bec3
... ... @@ -77,6 +77,9 @@ public class SIPCommander implements ISIPCommander {
77 77 @Value("${media.seniorSdp}")
78 78 private boolean seniorSdp;
79 79  
  80 + @Value("${media.autoApplyPlay}")
  81 + private boolean autoApplyPlay;
  82 +
80 83 @Autowired
81 84 private ZLMHttpHookSubscribe subscribe;
82 85  
... ... @@ -287,8 +290,12 @@ public class SIPCommander implements ISIPCommander {
287 290 @Override
288 291 public void playStreamCmd(Device device, String channelId, ZLMHttpHookSubscribe.Event event, SipSubscribe.Event errorEvent) {
289 292 try {
290   -
291   - String ssrc = streamSession.createPlaySsrc();
  293 + String ssrc = "";
  294 + if (rtpEnable) {
  295 + ssrc = String.format("gb_play_%s_%s", device.getDeviceId(), channelId);
  296 + }else {
  297 + ssrc = streamSession.createPlaySsrc();
  298 + }
292 299 String streamId = null;
293 300 if (rtpEnable) {
294 301 streamId = String.format("gb_play_%s_%s", device.getDeviceId(), channelId);
... ... @@ -408,7 +415,12 @@ public class SIPCommander implements ISIPCommander {
408 415 , SipSubscribe.Event errorEvent) {
409 416 try {
410 417 MediaServerConfig mediaInfo = redisCatchStorage.getMediaInfo();
411   - String ssrc = streamSession.createPlayBackSsrc();
  418 + String ssrc = null;
  419 + if (rtpEnable) {
  420 + ssrc = String.format("gb_playback_%s_%s", device.getDeviceId(), channelId);
  421 + }else {
  422 + ssrc = streamSession.createPlayBackSsrc();
  423 + }
412 424 String streamId = String.format("%08x", Integer.parseInt(ssrc)).toUpperCase();
413 425 // 添加订阅
414 426 JSONObject subscribeKey = new JSONObject();
... ...
src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java
  View file @658bec3
... ... @@ -82,13 +82,10 @@ public class ZLMHttpHookListener {
82 82 @ResponseBody
83 83 @PostMapping(value = "/on_flow_report", produces = "application/json;charset=UTF-8")
84 84 public ResponseEntity<String> onFlowReport(@RequestBody JSONObject json){
85   -
86   - if (logger.isDebugEnabled()) {
87   - logger.debug("ZLM HOOK on_flow_report API调用，参数：" + json.toString());
88   - }
  85 +
  86 + logger.debug("ZLM HOOK on_flow_report API调用，参数：" + json.toString());
89 87 // TODO Auto-generated method stub
90 88  
91   -
92 89 JSONObject ret = new JSONObject();
93 90 ret.put("code", 0);
94 91 ret.put("msg", "success");
... ... @@ -234,8 +231,13 @@ public class ZLMHttpHookListener {
234 231 if (logger.isDebugEnabled()) {
235 232 logger.debug("ZLM HOOK on_shell_login API调用，参数：" + json.toString());
236 233 }
237   - // TODO Auto-generated method stub
238   -
  234 + // TODO 如果是带有rtpstream则开启按需拉流
  235 + String app = json.getString("app");
  236 + String stream = json.getString("stream");
  237 +
  238 + ZLMHttpHookSubscribe.Event subscribe = this.subscribe.getSubscribe(ZLMHttpHookSubscribe.HookType.on_publish, json);
  239 + if (subscribe != null) subscribe.response(json);
  240 +
239 241 JSONObject ret = new JSONObject();
240 242 ret.put("code", 0);
241 243 ret.put("msg", "success");
... ...
src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorager.java
  View file @658bec3
... ... @@ -7,7 +7,11 @@ import com.genersoft.iot.vmp.common.StreamInfo;
7 7 import com.genersoft.iot.vmp.gb28181.bean.Device;
8 8 import com.genersoft.iot.vmp.gb28181.bean.DeviceChannel;
9 9 import com.genersoft.iot.vmp.gb28181.bean.ParentPlatform;
  10 +import com.genersoft.iot.vmp.vmanager.platform.bean.ChannelReduce;
10 11 import com.github.pagehelper.PageInfo;
  12 +import gov.nist.javax.sip.stack.NioTcpMessageProcessor;
  13 +
  14 +import javax.swing.event.ChangeEvent;
11 15  
12 16 /**
13 17 * @Description:视频设备数据存储接口
... ... @@ -200,4 +204,18 @@ public interface IVideoManagerStorager {
200 204 * 所有平台离线
201 205 */
202 206 void outlineForAllParentPlatform();
  207 +
  208 + /**
  209 + * 查询通道信息， 不区分设备
  210 + */
  211 + PageInfo<ChannelReduce> queryChannelListInAll(int page, int count, String query, Boolean online, Boolean channelType, String parentChannelId);
  212 +
  213 +
  214 + /**
  215 + * 更新上级平台的通道信息
  216 + * @param platformId
  217 + * @param channelReduces
  218 + * @return
  219 + */
  220 + int updateChannelForGB(String platformId, List<ChannelReduce> channelReduces);
203 221 }
... ...
src/main/java/com/genersoft/iot/vmp/storager/dao/DeviceChannelMapper.java
  View file @658bec3
1 1 package com.genersoft.iot.vmp.storager.dao;
2 2  
3 3 import com.genersoft.iot.vmp.gb28181.bean.DeviceChannel;
  4 +import com.genersoft.iot.vmp.gb28181.bean.ParentPlatform;
  5 +import com.genersoft.iot.vmp.vmanager.platform.bean.ChannelReduce;
4 6 import org.apache.ibatis.annotations.*;
5 7  
6 8 import java.util.List;
... ... @@ -82,4 +84,22 @@ public interface DeviceChannelMapper {
82 84  
83 85 @Update(value = {"UPDATE device_channel SET streamId=#{streamId} WHERE deviceId=#{deviceId} AND channelId=#{channelId}"})
84 86 void startPlay(String deviceId, String channelId, String streamId);
  87 +
  88 +
  89 + @Select(value = {" <script>" +
  90 + "SELECT * FROM ( "+
  91 + " SELECT dc.channelId, dc.deviceId, dc.name, de.manufacturer, de.hostAddress, " +
  92 + "(SELECT count(0) FROM device_channel WHERE parentId=dc.channelId) as subCount " +
  93 + "FROM device_channel dc LEFT JOIN device de ON dc.deviceId = de.deviceId" +
  94 + " WHERE 1=1 " +
  95 + " <if test=\"query != null\"> AND (dc.channelId LIKE '%${query}%' OR dc.name LIKE '%${query}%' OR dc.name LIKE '%${query}%')</if> " +
  96 + " <if test=\"parentChannelId != null\"> AND dc.parentId=#{parentChannelId} </if> " +
  97 + " <if test=\"online == true\" > AND dc.status=1</if>" +
  98 + " <if test=\"online == false\" > AND dc.status=0</if>) dcr" +
  99 + " WHERE 1=1 " +
  100 + " <if test=\"hasSubChannel == true\" > AND subCount >0</if>" +
  101 + " <if test=\"hasSubChannel == false\" > AND subCount=0</if>" +
  102 + " </script>"})
  103 +
  104 + List<ChannelReduce> queryChannelListInAll(String query, Boolean online, Boolean hasSubChannel, String parentChannelId);
85 105 }
... ...
src/main/java/com/genersoft/iot/vmp/storager/dao/patformChannelMapper.java 0 → 100644
  View file @658bec3
  1 +package com.genersoft.iot.vmp.storager.dao;
  2 +
  3 +import org.mapstruct.Mapper;
  4 +
  5 +@Mapper
  6 +public interface patformChannelMapper {
  7 +}
... ...
src/main/java/com/genersoft/iot/vmp/storager/impl/VideoManagerStoragerImpl.java
  View file @658bec3
... ... @@ -9,6 +9,7 @@ import com.genersoft.iot.vmp.storager.IRedisCatchStorage;
9 9 import com.genersoft.iot.vmp.storager.dao.DeviceChannelMapper;
10 10 import com.genersoft.iot.vmp.storager.dao.DeviceMapper;
11 11 import com.genersoft.iot.vmp.storager.dao.ParentPlatformMapper;
  12 +import com.genersoft.iot.vmp.vmanager.platform.bean.ChannelReduce;
12 13 import com.github.pagehelper.PageHelper;
13 14 import com.github.pagehelper.PageInfo;
14 15 import org.springframework.beans.factory.annotation.Autowired;
... ... @@ -16,6 +17,7 @@ import org.springframework.stereotype.Component;
16 17  
17 18 import com.genersoft.iot.vmp.gb28181.bean.Device;
18 19 import com.genersoft.iot.vmp.storager.IVideoManagerStorager;
  20 +import org.springframework.transaction.annotation.Transactional;
19 21  
20 22 /**
21 23 * @Description:视频设备数据存储-jdbc实现
... ... @@ -270,4 +272,20 @@ public class VideoManagerStoragerImpl implements IVideoManagerStorager {
270 272 public void outlineForAllParentPlatform() {
271 273 platformMapper.outlineForAllParentPlatform();
272 274 }
  275 +
  276 +
  277 + @Override
  278 + public PageInfo<ChannelReduce> queryChannelListInAll(int page, int count, String query, Boolean online,
  279 + Boolean channelType, String parentChannelId) {
  280 + PageHelper.startPage(page, count);
  281 + List<ChannelReduce> all = deviceChannelMapper.queryChannelListInAll(query, online, channelType, parentChannelId);
  282 + return new PageInfo<>(all);
  283 + }
  284 +
  285 +
  286 + @Transactional
  287 + @Override
  288 + public int updateChannelForGB(String platformId, List<ChannelReduce> channelReduces) {
  289 + return 0;
  290 + }
273 291 }
... ...
src/main/java/com/genersoft/iot/vmp/vmanager/device/DeviceController.java
  View file @658bec3
... ... @@ -63,13 +63,6 @@ public class DeviceController {
63 63  
64 64 /**
65 65 * 分页查询通道数
66   - * @param deviceId 设备id
67   - * @param page 当前页
68   - * @param count 每页条数
69   - * @return 通道列表
70   - */
71   - /**
72   - * 分页查询通道数
73 66 *
74 67 * @param deviceId 设备id
75 68 * @param page 当前页
... ...
src/main/java/com/genersoft/iot/vmp/vmanager/platform/PlatformController.java
  View file @658bec3
1 1 package com.genersoft.iot.vmp.vmanager.platform;
2 2  
  3 +import com.alibaba.fastjson.JSON;
3 4 import com.alibaba.fastjson.JSONObject;
4 5 import com.genersoft.iot.vmp.gb28181.bean.ParentPlatform;
5 6 import com.genersoft.iot.vmp.gb28181.transmit.cmd.ISIPCommanderForPlatform;
6 7 import com.genersoft.iot.vmp.storager.IRedisCatchStorage;
7 8 import com.genersoft.iot.vmp.storager.IVideoManagerStorager;
  9 +import com.genersoft.iot.vmp.vmanager.platform.bean.ChannelReduce;
  10 +import com.genersoft.iot.vmp.vmanager.platform.bean.UpdateChannelParam;
8 11 import com.github.pagehelper.PageInfo;
9 12 import org.slf4j.Logger;
10 13 import org.slf4j.LoggerFactory;
... ... @@ -15,6 +18,9 @@ import org.springframework.util.StringUtils;
15 18 import org.springframework.web.bind.annotation.*;
16 19 import com.genersoft.iot.vmp.conf.SipConfig;
17 20  
  21 +import java.util.List;
  22 +import java.util.Map;
  23 +
18 24  
19 25 @CrossOrigin
20 26 @RestController
... ... @@ -142,5 +148,34 @@ public class PlatformController {
142 148 return new ResponseEntity<>(String.valueOf(parentPlatform != null), HttpStatus.OK);
143 149 }
144 150  
  151 + @RequestMapping("/platforms/channelList")
  152 + @ResponseBody
  153 + public PageInfo<ChannelReduce> channelList(int page, int count,
  154 + @RequestParam(required = false) String query,
  155 + @RequestParam(required = false) Boolean online,
  156 + @RequestParam(required = false) Boolean channelType){
  157 +
  158 + if (logger.isDebugEnabled()) {
  159 + logger.debug("查询所有所有通道API调用");
  160 + }
  161 +
  162 + PageInfo<ChannelReduce> channelReduces = storager.queryChannelListInAll(page, count, query, online, channelType, null);
  163 +
  164 + return channelReduces;
  165 + }
  166 +
  167 +
  168 + @RequestMapping("/platforms/updateChannelForGB")
  169 + @ResponseBody
  170 + public ResponseEntity<String> updateChannelForGB(@RequestBody UpdateChannelParam param){
  171 +
  172 + if (logger.isDebugEnabled()) {
  173 + logger.debug("给上级平台添加国标通道API调用");
  174 + }
  175 + int result = storager.updateChannelForGB(param.getPlatformId(), param.getChannelReduces());
  176 +
  177 + return new ResponseEntity<>(String.valueOf(result > 0), HttpStatus.OK);
  178 + }
  179 +
145 180  
146 181 }
... ...
src/main/java/com/genersoft/iot/vmp/vmanager/platform/bean/ChannelReduce.java 0 → 100644
  View file @658bec3
  1 +package com.genersoft.iot.vmp.vmanager.platform.bean;
  2 +
  3 +/**
  4 + * 精简的channel信息展示，主要是选择通道的时候展示列表使用
  5 + */
  6 +public class ChannelReduce {
  7 +
  8 + /**
  9 + * 通道id
  10 + */
  11 + private String channelId;
  12 +
  13 + /**
  14 + * 设备id
  15 + */
  16 + private String deviceId;
  17 +
  18 + /**
  19 + * 通道名
  20 + */
  21 + private String name;
  22 +
  23 + /**
  24 + * 生产厂商
  25 + */
  26 + private String manufacturer;
  27 +
  28 + /**
  29 + * wan地址
  30 + */
  31 + private String hostAddress;
  32 +
  33 + /**
  34 + * 子节点数
  35 + */
  36 + private int subCount;
  37 +
  38 +
  39 + public String getChannelId() {
  40 + return channelId;
  41 + }
  42 +
  43 + public void setChannelId(String channelId) {
  44 + this.channelId = channelId;
  45 + }
  46 +
  47 + public String getDeviceId() {
  48 + return deviceId;
  49 + }
  50 +
  51 + public void setDeviceId(String deviceId) {
  52 + this.deviceId = deviceId;
  53 + }
  54 +
  55 + public String getName() {
  56 + return name;
  57 + }
  58 +
  59 + public void setName(String name) {
  60 + this.name = name;
  61 + }
  62 +
  63 + public String getManufacturer() {
  64 + return manufacturer;
  65 + }
  66 +
  67 + public void setManufacturer(String manufacturer) {
  68 + this.manufacturer = manufacturer;
  69 + }
  70 +
  71 + public String getHostAddress() {
  72 + return hostAddress;
  73 + }
  74 +
  75 + public void setHostAddress(String hostAddress) {
  76 + this.hostAddress = hostAddress;
  77 + }
  78 +}
... ...
src/main/java/com/genersoft/iot/vmp/vmanager/platform/bean/UpdateChannelParam.java 0 → 100644
  View file @658bec3
  1 +package com.genersoft.iot.vmp.vmanager.platform.bean;
  2 +
  3 +import java.util.List;
  4 +
  5 +public class UpdateChannelParam {
  6 + private String platformId;
  7 + private List<ChannelReduce> channelReduces;
  8 +
  9 + public String getPlatformId() {
  10 + return platformId;
  11 + }
  12 +
  13 + public void setPlatformId(String platformId) {
  14 + this.platformId = platformId;
  15 + }
  16 +
  17 + public List<ChannelReduce> getChannelReduces() {
  18 + return channelReduces;
  19 + }
  20 +
  21 + public void setChannelReduces(List<ChannelReduce> channelReduces) {
  22 + this.channelReduces = channelReduces;
  23 + }
  24 +}
... ...
src/main/resources/wvp.sqlite
View file @658bec3
No preview for this file type
web_src/src/components/ParentPlatformList.vue
  View file @658bec3
... ... @@ -95,7 +95,6 @@ export default {
95 95 }
96 96 },
97 97 mounted() {
98   - this.$refs.chooseChannelDialog.openDialog()
99 98 this.initData();
100 99 this.updateLooper = setInterval(this.initData, 10000);
101 100 },
... ... @@ -138,7 +137,9 @@ export default {
138 137 });
139 138 },
140 139 chooseChannel: function(platform) {
141   - this.$refs.chooseChannelDialog.openDialog()
  140 + this.$refs.chooseChannelDialog.openDialog(platform.deviceGBId, ()=>{
  141 + this.initData()
  142 + })
142 143 },
143 144 initData: function() {
144 145 this.getPlatformList();
... ...
web_src/src/components/gb28181/chooseChannel.vue
  View file @658bec3
1 1 <template>
2 2 <div id="chooseChannel" v-loading="isLoging">
3 3  
4   - <el-dialog title="选择通道" top="0" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
5   - <el-container>
6   - <el-main style="background-color: #FFF;">
7   - <el-tabs v-model="tabActiveName" >
  4 + <el-dialog title="选择通道" top="2rem" width="70%" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
  5 + <el-tabs v-model="tabActiveName" >
  6 + <el-tab-pane label="国标通道" name="gbChannel">
8 7  
9   - <el-tab-pane label="国标通道" name="gbChannel">
10   - <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
11   - 搜索: <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input>
12   -
13   - 通道类型: <el-select size="mini" @change="search" style="margin-right: 1rem;" v-model="channelType" placeholder="请选择" default-first-option>
14   - <el-option label="全部" value=""></el-option>
15   - <el-option label="设备" value="false"></el-option>
16   - <el-option label="子目录" value="true"></el-option>
17   - </el-select>
18   - 在线状态: <el-select size="mini" style="margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择" default-first-option>
19   - <el-option label="全部" value=""></el-option>
20   - <el-option label="在线" value="true"></el-option>
21   - <el-option label="离线" value="false"></el-option>
22   - </el-select>
23   - </div>
24   - <el-table :data="gbChannels" border style="width: 100%" @selection-change="handleGBSelectionChange" >
25   - <el-table-column type="selection" width="55" align="center" fixed> </el-table-column>
26   - <el-table-column prop="devicelId" label="设备编号" width="210" >
27   - </el-table-column>
28   - <el-table-column prop="channelId" label="通道编号" width="210">
29   - </el-table-column>
30   - <el-table-column prop="channelName" label="通道名称">
31   - </el-table-column>
32   - <el-table-column label="地址" width="180" align="center">
33   - <template slot-scope="scope">
34   - <div slot="reference" class="name-wrapper">
35   - <el-tag size="medium">{{ scope.row.hostAddress }}</el-tag>
36   - </div>
37   - </template>
38   - </el-table-column>
39   - <el-table-column prop="manufacturer" label="厂家" align="center">
40   - </el-table-column>
41   - </el-table>
42   - </el-tab-pane>
43   - <el-tab-pane label="直播流通道" name="streamchannel">
44   - <!-- TODO -->
45   - </el-tab-pane>
46   - </el-tabs>
47   -
48   - </el-main>
49   - </el-container>
  8 + <el-container>
  9 + <el-main style="background-color: #FFF;">
  10 + <chooseChannelForGb :chooseChanage=chooseChanage ></chooseChannelForGb>
  11 + </el-main>
  12 + <el-footer>
  13 + <el-button size="mini" type="primary" style="float: right" @click="save()">保存</el-button>
  14 + </el-footer>
  15 + </el-container>
  16 +
  17 +
  18 + </el-tab-pane>
  19 + <el-tab-pane label="直播流通道" name="streamchannel">
  20 + <!-- TODO -->
  21 + </el-tab-pane>
  22 + </el-tabs>
50 23 </el-dialog>
51 24 </div>
52 25 </template>
53 26  
54 27 <script>
55   -// import player from './player.vue'
  28 +import chooseChannelForGb from './chooseChannelForGb.vue'
56 29 export default {
57 30 name: 'chooseChannel',
58 31 props: {},
59 32 components: {
60   - // player,
  33 + chooseChannelForGb,
61 34 },
62 35 computed: {
63 36 // getPlayerShared: function () {
... ... @@ -73,37 +46,20 @@ export default {
73 46 return {
74 47 isLoging: false,
75 48 tabActiveName: "gbChannel",
  49 + platformId: "",
76 50 isLoging: false,
77 51 showDialog: false,
78   - chooseChanageCallback: null,
79   - closeCallback: null,
80   - gbChannels: [
81   - {
82   - devicelId: "34000000000200001",
83   - channelId: "34000000000200001",
84   - channelName: "test",
85   - hostAddress: "192.168.1.1:5060",
86   - manufacturer: "大华"
87   - },{
88   - devicelId: "34000000000200001",
89   - channelId: "34000000000200001",
90   - channelName: "test",
91   - hostAddress: "192.168.1.1:5060",
92   - manufacturer: "大华"
93   - }
94   - ],
95   - searchSrt: "",
96   - channelType: "",
97   - online: "",
  52 + chooseData: []
98 53  
99 54 };
100 55 },
101 56 methods: {
102 57  
103   - openDialog: function (chooseChanageCallback, closeCallback) {
  58 + openDialog: function (platformId, closeCallback) {
  59 + console.log(platformId)
  60 + this.platformId = platformId
104 61 this.showDialog = true
105 62 this.closeCallback = closeCallback
106   - this.chooseChanageCallback = chooseChanageCallback
107 63 },
108 64 close: function() {
109 65  
... ... @@ -111,8 +67,31 @@ export default {
111 67 search: function() {
112 68  
113 69 },
114   - handleGBSelectionChange: function() {
  70 + save: function() {
  71 + var that = this;
115 72  
  73 + this.$axios({
  74 + method:"post",
  75 + url:"/api/platforms/updateChannelForGB",
  76 + data:{
  77 + platformId: that.platformId,
  78 + channelReduces: that.chooseData
  79 + }
  80 + }).then((res)=>{
  81 + if (res.data == true) {
  82 + that.$message({
  83 + showClose: true,
  84 + message: '保存成功,',
  85 + type: 'success'
  86 + });
  87 + }
  88 + }).catch(function (error) {
  89 + console.log(error);
  90 + });
  91 + },
  92 + chooseChanage: function(val) {
  93 + console.log(val)
  94 + this.chooseData = val;
116 95 }
117 96 }
118 97 };
... ...
web_src/src/components/gb28181/chooseChannelForGb.vue 0 → 100644
  View file @658bec3
  1 +<template>
  2 +<div id="chooseChannelForGb" >
  3 + <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
  4 + 搜索: <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input>
  5 +
  6 + 通道类型: <el-select size="mini" @change="search" style="margin-right: 1rem;" v-model="channelType" placeholder="请选择" default-first-option>
  7 + <el-option label="全部" value=""></el-option>
  8 + <el-option label="设备" value="false"></el-option>
  9 + <el-option label="子目录" value="true"></el-option>
  10 + </el-select>
  11 + 在线状态: <el-select size="mini" style="margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择" default-first-option>
  12 + <el-option label="全部" value=""></el-option>
  13 + <el-option label="在线" value="true"></el-option>
  14 + <el-option label="离线" value="false"></el-option>
  15 + </el-select>
  16 + </div>
  17 + <el-table ref="gbChannelsTable" :data="gbChannels" border style="width: 100%" @selection-change="chooseChanage" >
  18 + <el-table-column type="selection" width="55" align="center" fixed> </el-table-column>
  19 + <el-table-column prop="channelId" label="通道编号" width="210">
  20 + </el-table-column>
  21 + <el-table-column prop="name" label="通道名称">
  22 + </el-table-column>
  23 + <el-table-column prop="deviceId" label="设备编号" width="210" >
  24 + </el-table-column>
  25 + <el-table-column label="设备地址" width="180" align="center">
  26 + <template slot-scope="scope">
  27 + <div slot="reference" class="name-wrapper">
  28 + <el-tag size="medium">{{ scope.row.hostAddress }}</el-tag>
  29 + </div>
  30 + </template>
  31 + </el-table-column>
  32 + <el-table-column prop="manufacturer" label="厂家" align="center">
  33 + </el-table-column>
  34 + </el-table>
  35 + <el-pagination style="float: right;margin-top: 1rem;" @size-change="handleSizeChange" @current-change="currentChange" :current-page="currentPage" :page-size="count" :page-sizes="[15, 20, 30, 50]" layout="total, sizes, prev, pager, next" :total="total">
  36 + </el-pagination>
  37 +</div>
  38 +</template>
  39 +
  40 +<script>
  41 +export default {
  42 + name: 'chooseChannelForGb',
  43 + props: {},
  44 + computed: {
  45 + // getPlayerShared: function () {
  46 + // return {
  47 + // sharedUrl: window.location.host + '/' + this.videoUrl,
  48 + // sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
  49 + // sharedRtmp: this.videoUrl
  50 + // };
  51 + // }
  52 + },
  53 + props: ['chooseChanage'],
  54 + created() {
  55 + this.initData();
  56 + },
  57 + data() {
  58 + return {
  59 + gbChannels: [],
  60 + searchSrt: "",
  61 + channelType: "",
  62 + online: "",
  63 + currentPage: parseInt(this.$route.params.page),
  64 + count: parseInt(this.$route.params.count),
  65 + total: 0
  66 +
  67 + };
  68 + },
  69 + methods: {
  70 + initData: function() {
  71 + this.getChannelList();
  72 + },
  73 + currentChange: function (val) {
  74 + this.currentPage = val;
  75 + this.initData();
  76 + },
  77 + handleSizeChange: function (val) {
  78 + this.count = val;
  79 + this.initData();
  80 +
  81 + },
  82 + getChannelList: function () {
  83 + let that = this;
  84 +
  85 + this.$axios.get(`/api/platforms/channelList`, {
  86 + params: {
  87 + page: that.currentPage - 1,
  88 + count: that.count,
  89 + query: that.searchSrt,
  90 + online: that.online,
  91 + channelType: that.channelType
  92 + }
  93 + })
  94 + .then(function (res) {
  95 + console.log(res);
  96 + that.total = res.data.total;
  97 + that.gbChannels = res.data.list;
  98 + // 防止出现表格错位
  99 + that.$nextTick(() => {
  100 + that.$refs.gbChannelsTable.doLayout();
  101 + })
  102 + })
  103 + .catch(function (error) {
  104 + console.log(error);
  105 + });
  106 +
  107 + },
  108 + search: function() {
  109 + this.initData();
  110 + },
  111 + handleGBSelectionChange: function() {
  112 + this.initData();
  113 + },
  114 + }
  115 +};
  116 +</script>
  117 +
  118 +<style>
  119 +
  120 +</style>
... ...