panlinlin
4 years ago
42 changed files with 1395 additions and 225 deletions
@ -0,0 +1,71 @@ |
|||
package com.genersoft.iot.vmp.gb28181.bean; |
|||
|
|||
/** |
|||
* 直播流关联国标上级平台 |
|||
*/ |
|||
public class GbStream extends PlatformGbStream{ |
|||
|
|||
private String app; |
|||
private String stream; |
|||
private String gbId; |
|||
private String name; |
|||
private double longitude; |
|||
private double latitude; |
|||
private String streamType; |
|||
|
|||
public String getApp() { |
|||
return app; |
|||
} |
|||
|
|||
public void setApp(String app) { |
|||
this.app = app; |
|||
} |
|||
|
|||
public String getStream() { |
|||
return stream; |
|||
} |
|||
|
|||
public void setStream(String stream) { |
|||
this.stream = stream; |
|||
} |
|||
|
|||
public String getGbId() { |
|||
return gbId; |
|||
} |
|||
|
|||
public void setGbId(String gbId) { |
|||
this.gbId = gbId; |
|||
} |
|||
|
|||
public String getName() { |
|||
return name; |
|||
} |
|||
|
|||
public void setName(String name) { |
|||
this.name = name; |
|||
} |
|||
|
|||
public double getLongitude() { |
|||
return longitude; |
|||
} |
|||
|
|||
public void setLongitude(double longitude) { |
|||
this.longitude = longitude; |
|||
} |
|||
|
|||
public double getLatitude() { |
|||
return latitude; |
|||
} |
|||
|
|||
public void setLatitude(double latitude) { |
|||
this.latitude = latitude; |
|||
} |
|||
|
|||
public String getStreamType() { |
|||
return streamType; |
|||
} |
|||
|
|||
public void setStreamType(String streamType) { |
|||
this.streamType = streamType; |
|||
} |
|||
} |
|||
@ -0,0 +1,31 @@ |
|||
package com.genersoft.iot.vmp.gb28181.bean; |
|||
|
|||
public class PlatformGbStream { |
|||
private String app; |
|||
private String stream; |
|||
private String platformId; |
|||
|
|||
public String getApp() { |
|||
return app; |
|||
} |
|||
|
|||
public void setApp(String app) { |
|||
this.app = app; |
|||
} |
|||
|
|||
public String getStream() { |
|||
return stream; |
|||
} |
|||
|
|||
public void setStream(String stream) { |
|||
this.stream = stream; |
|||
} |
|||
|
|||
public String getPlatformId() { |
|||
return platformId; |
|||
} |
|||
|
|||
public void setPlatformId(String platformId) { |
|||
this.platformId = platformId; |
|||
} |
|||
} |
|||
@ -0,0 +1,49 @@ |
|||
package com.genersoft.iot.vmp.storager.dao; |
|||
|
|||
import com.genersoft.iot.vmp.gb28181.bean.GbStream; |
|||
import com.genersoft.iot.vmp.media.zlm.dto.StreamProxyItem; |
|||
import org.apache.ibatis.annotations.*; |
|||
import org.springframework.stereotype.Repository; |
|||
|
|||
import java.util.List; |
|||
|
|||
@Mapper |
|||
@Repository |
|||
public interface GbStreamMapper { |
|||
|
|||
@Insert("INSERT INTO gb_stream (app, stream, gbId, name, " + |
|||
"longitude, latitude, streamType) VALUES" + |
|||
"('${app}', '${stream}', '${gbId}', '${name}', " + |
|||
"'${longitude}', '${latitude}', '${streamType}')") |
|||
int add(GbStream gbStream); |
|||
|
|||
@Update("UPDATE gb_stream " + |
|||
"SET app=#{app}," + |
|||
"stream=#{stream}," + |
|||
"gbId=#{gbId}," + |
|||
"name=#{name}," + |
|||
"streamType=#{streamType}," + |
|||
"longitude=#{longitude}, " + |
|||
"latitude=#{latitude}, " + |
|||
"WHERE app=#{app} AND stream=#{stream} AND gbId=#{gbId}") |
|||
int update(GbStream gbStream); |
|||
|
|||
@Delete("DELETE FROM gb_stream WHERE app=#{app} AND stream=#{stream}") |
|||
int del(String app, String stream); |
|||
|
|||
@Select("SELECT gs.*, pgs.platformId FROM gb_stream gs LEFT JOIN platform_gb_stream pgs ON gs.app = pgs.app AND gs.stream = pgs.stream") |
|||
List<GbStream> selectAll(); |
|||
|
|||
@Select("SELECT * FROM gb_stream WHERE app=#{app} AND stream=#{stream}") |
|||
StreamProxyItem selectOne(String app, String stream); |
|||
|
|||
@Select("SELECT gs.*, pgs.platformId FROM gb_stream gs " + |
|||
"LEFT JOIN platform_gb_stream pgs ON gs.app = pgs.app AND gs.stream = pgs.stream " + |
|||
"WHERE gs.gbId = '${gbId}' AND pgs.platformId = '${platformId}'") |
|||
GbStream queryStreamInPlatform(String platformId, String gbId); |
|||
|
|||
@Select("SELECT gs.*, pgs.platformId FROM gb_stream gs " + |
|||
"LEFT JOIN platform_gb_stream pgs ON gs.app = pgs.app AND gs.stream = pgs.stream " + |
|||
"WHERE pgs.platformId = '${platformId}'") |
|||
List<GbStream> queryGbStreamListInPlatform(String platformId); |
|||
} |
|||
@ -0,0 +1,28 @@ |
|||
package com.genersoft.iot.vmp.storager.dao; |
|||
|
|||
import com.genersoft.iot.vmp.gb28181.bean.GbStream; |
|||
import com.genersoft.iot.vmp.gb28181.bean.PlatformGbStream; |
|||
import com.genersoft.iot.vmp.media.zlm.dto.StreamProxyItem; |
|||
import org.apache.ibatis.annotations.*; |
|||
import org.springframework.stereotype.Repository; |
|||
|
|||
import java.util.List; |
|||
|
|||
|
|||
@Mapper |
|||
@Repository |
|||
public interface PlarfotmGbStreamMapper { |
|||
|
|||
@Insert("INSERT INTO platform_gb_stream (app, stream, platformId) VALUES" + |
|||
"('${app}', '${stream}', '${platformId}')") |
|||
int add(PlatformGbStream platformGbStream); |
|||
|
|||
@Delete("DELETE FROM platform_gb_stream WHERE app=#{app} AND stream=#{stream}") |
|||
int delByAppAndStream(String app, String stream); |
|||
|
|||
@Delete("DELETE FROM platform_gb_stream WHERE app=#{app} AND stream=#{stream}") |
|||
int delByPlatformId(String platformId); |
|||
|
|||
@Select("SELECT * FROM platform_gb_stream WHERE app=#{app} AND stream=#{stream} AND platformId=#{platformId}") |
|||
StreamProxyItem selectOne(String app, String stream, String platformId); |
|||
} |
|||
@ -0,0 +1,65 @@ |
|||
package com.genersoft.iot.vmp.vmanager.gbStream; |
|||
|
|||
import com.alibaba.fastjson.JSON; |
|||
import com.alibaba.fastjson.JSONArray; |
|||
import com.genersoft.iot.vmp.gb28181.bean.GbStream; |
|||
import com.genersoft.iot.vmp.storager.IVideoManagerStorager; |
|||
import com.genersoft.iot.vmp.vmanager.gbStream.bean.GbStreamParam; |
|||
import com.genersoft.iot.vmp.vmanager.platform.bean.UpdateChannelParam; |
|||
import com.genersoft.iot.vmp.vmanager.service.IGbStreamService; |
|||
import com.github.pagehelper.PageInfo; |
|||
import org.slf4j.Logger; |
|||
import org.slf4j.LoggerFactory; |
|||
import org.springframework.beans.factory.annotation.Autowired; |
|||
import org.springframework.web.bind.annotation.*; |
|||
|
|||
import java.util.List; |
|||
|
|||
@CrossOrigin |
|||
@RestController |
|||
@RequestMapping("/api/gbStream") |
|||
public class GbStreamController { |
|||
|
|||
private final static Logger logger = LoggerFactory.getLogger(GbStreamController.class); |
|||
|
|||
@Autowired |
|||
private IGbStreamService gbStreamService; |
|||
|
|||
@Autowired |
|||
private IVideoManagerStorager storager; |
|||
|
|||
|
|||
@RequestMapping(value = "/list") |
|||
@ResponseBody |
|||
public PageInfo<GbStream> list(@RequestParam(required = false)Integer page, |
|||
@RequestParam(required = false)Integer count){ |
|||
|
|||
return gbStreamService.getAll(page, count); |
|||
} |
|||
|
|||
|
|||
@RequestMapping(value = "/del") |
|||
@ResponseBody |
|||
public Object del(@RequestBody GbStreamParam gbStreamParam){ |
|||
System.out.println(2222); |
|||
System.out.println(gbStreamParam.getGbStreams().size()); |
|||
if (gbStreamService.delPlatformInfo(gbStreamParam.getGbStreams())) { |
|||
return "success"; |
|||
}else { |
|||
return "fail"; |
|||
} |
|||
|
|||
} |
|||
|
|||
@RequestMapping(value = "/add") |
|||
@ResponseBody |
|||
public Object add(@RequestBody GbStreamParam gbStreamParam){ |
|||
System.out.println(3333); |
|||
System.out.println(gbStreamParam.getGbStreams().size()); |
|||
if (gbStreamService.addPlatformInfo(gbStreamParam.getGbStreams(), gbStreamParam.getPlatformId())) { |
|||
return "success"; |
|||
}else { |
|||
return "fail"; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,28 @@ |
|||
package com.genersoft.iot.vmp.vmanager.gbStream.bean; |
|||
|
|||
import com.genersoft.iot.vmp.gb28181.bean.GbStream; |
|||
|
|||
import java.util.List; |
|||
|
|||
public class GbStreamParam { |
|||
|
|||
private String platformId; |
|||
|
|||
private List<GbStream> gbStreams; |
|||
|
|||
public String getPlatformId() { |
|||
return platformId; |
|||
} |
|||
|
|||
public void setPlatformId(String platformId) { |
|||
this.platformId = platformId; |
|||
} |
|||
|
|||
public List<GbStream> getGbStreams() { |
|||
return gbStreams; |
|||
} |
|||
|
|||
public void setGbStreams(List<GbStream> gbStreams) { |
|||
this.gbStreams = gbStreams; |
|||
} |
|||
} |
|||
@ -0,0 +1,35 @@ |
|||
package com.genersoft.iot.vmp.vmanager.platformGbStream; |
|||
|
|||
import com.genersoft.iot.vmp.gb28181.bean.GbStream; |
|||
import com.genersoft.iot.vmp.gb28181.bean.PlatformGbStream; |
|||
import com.genersoft.iot.vmp.storager.IVideoManagerStorager; |
|||
import com.genersoft.iot.vmp.vmanager.service.IGbStreamService; |
|||
import com.github.pagehelper.PageInfo; |
|||
import org.slf4j.Logger; |
|||
import org.slf4j.LoggerFactory; |
|||
import org.springframework.beans.factory.annotation.Autowired; |
|||
import org.springframework.web.bind.annotation.*; |
|||
|
|||
@CrossOrigin |
|||
@RestController |
|||
@RequestMapping("/api") |
|||
public class PlatformGbStreamController { |
|||
|
|||
private final static Logger logger = LoggerFactory.getLogger(PlatformGbStreamController.class); |
|||
|
|||
@Autowired |
|||
private IGbStreamService gbStreamService; |
|||
|
|||
@Autowired |
|||
private IVideoManagerStorager storager; |
|||
|
|||
@RequestMapping(value = "/list") |
|||
@ResponseBody |
|||
public PageInfo<GbStream> list(@RequestParam(required = false)Integer page, |
|||
@RequestParam(required = false)Integer count){ |
|||
|
|||
return gbStreamService.getAll(page, count); |
|||
} |
|||
|
|||
|
|||
} |
|||
@ -0,0 +1,41 @@ |
|||
package com.genersoft.iot.vmp.vmanager.service; |
|||
|
|||
import com.genersoft.iot.vmp.gb28181.bean.GbStream; |
|||
import com.genersoft.iot.vmp.gb28181.bean.PlatformGbStream; |
|||
import com.github.pagehelper.PageInfo; |
|||
|
|||
import java.util.List; |
|||
|
|||
/** |
|||
* 级联国标平台关联流业务接口 |
|||
*/ |
|||
public interface IGbStreamService { |
|||
|
|||
/** |
|||
* 分页获取所有 |
|||
* @param page |
|||
* @param count |
|||
* @return |
|||
*/ |
|||
PageInfo<GbStream> getAll(Integer page, Integer count); |
|||
|
|||
|
|||
/** |
|||
* 移除 |
|||
* @param app |
|||
* @param stream |
|||
*/ |
|||
void del(String app, String stream); |
|||
|
|||
/** |
|||
* 保存国标关联 |
|||
* @param gbStreams |
|||
*/ |
|||
boolean addPlatformInfo(List<GbStream> gbStreams, String platformId); |
|||
|
|||
/** |
|||
* 移除国标关联 |
|||
* @param gbStreams |
|||
*/ |
|||
boolean delPlatformInfo(List<GbStream> gbStreams); |
|||
} |
|||
@ -0,0 +1,89 @@ |
|||
package com.genersoft.iot.vmp.vmanager.service.impl; |
|||
|
|||
import com.genersoft.iot.vmp.gb28181.bean.GbStream; |
|||
import com.genersoft.iot.vmp.gb28181.bean.PlatformGbStream; |
|||
import com.genersoft.iot.vmp.media.zlm.dto.StreamProxyItem; |
|||
import com.genersoft.iot.vmp.storager.dao.GbStreamMapper; |
|||
import com.genersoft.iot.vmp.storager.dao.PlarfotmGbStreamMapper; |
|||
import com.genersoft.iot.vmp.vmanager.platform.PlatformController; |
|||
import com.genersoft.iot.vmp.vmanager.service.IGbStreamService; |
|||
import com.github.pagehelper.PageHelper; |
|||
import com.github.pagehelper.PageInfo; |
|||
import org.slf4j.Logger; |
|||
import org.slf4j.LoggerFactory; |
|||
import org.springframework.beans.factory.annotation.Autowired; |
|||
import org.springframework.jdbc.datasource.DataSourceTransactionManager; |
|||
import org.springframework.stereotype.Service; |
|||
import org.springframework.transaction.TransactionDefinition; |
|||
import org.springframework.transaction.TransactionStatus; |
|||
|
|||
import java.util.List; |
|||
|
|||
@Service |
|||
public class GbStreamServiceImpl implements IGbStreamService { |
|||
|
|||
private final static Logger logger = LoggerFactory.getLogger(GbStreamServiceImpl.class); |
|||
|
|||
@Autowired |
|||
DataSourceTransactionManager dataSourceTransactionManager; |
|||
|
|||
@Autowired |
|||
TransactionDefinition transactionDefinition; |
|||
|
|||
@Autowired |
|||
private GbStreamMapper gbStreamMapper; |
|||
|
|||
@Autowired |
|||
private PlarfotmGbStreamMapper plarfotmGbStreamMapper; |
|||
|
|||
@Override |
|||
public PageInfo<GbStream> getAll(Integer page, Integer count) { |
|||
PageHelper.startPage(page, count); |
|||
List<GbStream> all = gbStreamMapper.selectAll(); |
|||
return new PageInfo<>(all); |
|||
} |
|||
|
|||
@Override |
|||
public void del(String app, String stream) { |
|||
gbStreamMapper.del(app, stream); |
|||
} |
|||
|
|||
|
|||
@Override |
|||
public boolean addPlatformInfo(List<GbStream> gbStreams, String platformId) { |
|||
// 放在事务内执行
|
|||
boolean result = false; |
|||
TransactionStatus transactionStatus = dataSourceTransactionManager.getTransaction(transactionDefinition); |
|||
try { |
|||
for (GbStream gbStream : gbStreams) { |
|||
gbStream.setPlatformId(platformId); |
|||
plarfotmGbStreamMapper.add(gbStream); |
|||
} |
|||
dataSourceTransactionManager.commit(transactionStatus); //手动提交
|
|||
result = true; |
|||
}catch (Exception e) { |
|||
logger.error("批量保存流与平台的关系时错误", e); |
|||
dataSourceTransactionManager.rollback(transactionStatus); |
|||
} |
|||
return result; |
|||
|
|||
} |
|||
|
|||
@Override |
|||
public boolean delPlatformInfo(List<GbStream> gbStreams) { |
|||
// 放在事务内执行
|
|||
boolean result = false; |
|||
TransactionStatus transactionStatus = dataSourceTransactionManager.getTransaction(transactionDefinition); |
|||
try { |
|||
for (GbStream gbStream : gbStreams) { |
|||
plarfotmGbStreamMapper.delByAppAndStream(gbStream.getApp(), gbStream.getStream()); |
|||
} |
|||
dataSourceTransactionManager.commit(transactionStatus); //手动提交
|
|||
result = true; |
|||
}catch (Exception e) { |
|||
logger.error("批量移除流与平台的关系时错误", e); |
|||
dataSourceTransactionManager.rollback(transactionStatus); |
|||
} |
|||
return result; |
|||
} |
|||
} |
|||
Binary file not shown.
@ -0,0 +1,283 @@ |
|||
<template> |
|||
<div id="pLatformStreamList"> |
|||
<el-container> |
|||
<el-header> |
|||
<uiHeader></uiHeader> |
|||
</el-header> |
|||
<el-main> |
|||
<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> |
|||
<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="addStreamProxy">添加代理</el-button> |
|||
</div> |
|||
<devicePlayer ref="devicePlayer"></devicePlayer> |
|||
<el-table :data="streamProxyList" border style="width: 100%" :height="winHeight"> |
|||
<el-table-column prop="app" label="应用名" align="center" show-overflow-tooltip/> |
|||
<el-table-column prop="stream" label="流ID" align="center" show-overflow-tooltip/> |
|||
<el-table-column prop="gbId" label="国标平台" align="center" show-overflow-tooltip/> |
|||
|
|||
<el-table-column label="转HLS" width="120" align="center"> |
|||
<template slot-scope="scope"> |
|||
<div slot="reference" class="name-wrapper"> |
|||
<el-tag size="medium" v-if="scope.row.enable_hls">已启用</el-tag> |
|||
<el-tag size="medium" type="info" v-if="!scope.row.enable_hls">未启用</el-tag> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="MP4录制" width="120" align="center"> |
|||
<template slot-scope="scope"> |
|||
<div slot="reference" class="name-wrapper"> |
|||
<el-tag size="medium" v-if="scope.row.enable_mp4">已启用</el-tag> |
|||
<el-tag size="medium" type="info" v-if="!scope.row.enable_mp4">未启用</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.enable">已启用</el-tag> |
|||
<el-tag size="medium" type="info" v-if="!scope.row.enable">未启用</el-tag> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="操作" width="360" align="center" fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<el-button-group> |
|||
<el-button size="mini" icon="el-icon-video-play" v-if="scope.row.enable" @click="play(scope.row)">播放</el-button> |
|||
<el-button size="mini" icon="el-icon-close" type="success" v-if="scope.row.enable" @click="stop(scope.row)">停用</el-button> |
|||
<el-button size="mini" icon="el-icon-check" type="primary" v-if="!scope.row.enable" @click="start(scope.row)">启用</el-button> |
|||
<el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteStreamProxy(scope.row)">删除</el-button> |
|||
<!-- <el-button size="mini" icon="el-icon-position" type="primary" >加入国标</el-button> --> |
|||
</el-button-group> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
style="float: right" |
|||
@size-change="handleSizeChange" |
|||
@current-change="currentChange" |
|||
:current-page="currentPage" |
|||
:page-size="count" |
|||
:page-sizes="[15, 25, 35, 50]" |
|||
layout="total, sizes, prev, pager, next" |
|||
:total="total"> |
|||
</el-pagination> |
|||
<streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit> |
|||
</el-main> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import streamProxyEdit from './dialog/StreamProxyEdit.vue' |
|||
import devicePlayer from './dialog/devicePlayer.vue' |
|||
import uiHeader from './UiHeader.vue' |
|||
export default { |
|||
name: 'pLatformStreamList', |
|||
components: { |
|||
devicePlayer, |
|||
streamProxyEdit, |
|||
uiHeader |
|||
}, |
|||
data() { |
|||
return { |
|||
streamProxyList: [], |
|||
currentPusher: {}, //当前操作设备对象 |
|||
updateLooper: 0, //数据刷新轮训标志 |
|||
currentDeviceChannelsLenth:0, |
|||
winHeight: window.innerHeight - 200, |
|||
currentPage:1, |
|||
count:15, |
|||
total:0, |
|||
getListLoading: false |
|||
}; |
|||
}, |
|||
computed: { |
|||
}, |
|||
mounted() { |
|||
this.initData(); |
|||
// this.updateLooper = setInterval(this.initData, 10000); |
|||
}, |
|||
destroyed() { |
|||
this.$destroy('videojs'); |
|||
clearTimeout(this.updateLooper); |
|||
}, |
|||
methods: { |
|||
initData: function() { |
|||
this.getStreamProxyList(); |
|||
}, |
|||
currentChange: function(val){ |
|||
this.currentPage = val; |
|||
this.getStreamProxyList(); |
|||
}, |
|||
handleSizeChange: function(val){ |
|||
this.count = val; |
|||
this.getStreamProxyList(); |
|||
}, |
|||
getStreamProxyList: function() { |
|||
let that = this; |
|||
this.getListLoading = true; |
|||
this.$axios.get(`/api/proxy/list`,{ |
|||
params: { |
|||
page: that.currentPage, |
|||
count: that.count |
|||
} |
|||
} ) |
|||
.then(function (res) { |
|||
console.log(res); |
|||
console.log(res.data.list); |
|||
that.total = res.data.total; |
|||
that.streamProxyList = res.data.list; |
|||
that.getListLoading = false; |
|||
}) |
|||
.catch(function (error) { |
|||
console.log(error); |
|||
that.getListLoading = false; |
|||
}); |
|||
}, |
|||
addStreamProxy: function(){ |
|||
this.$refs.streamProxyEdit.openDialog(null, this.initData) |
|||
}, |
|||
saveStreamProxy: function(){ |
|||
}, |
|||
play: function(row){ |
|||
let that = this; |
|||
this.getListLoading = true; |
|||
this.$axios.get(`/api/media/getStreamInfoByAppAndStream`,{ |
|||
params: { |
|||
app: row.app, |
|||
stream: row.stream |
|||
} |
|||
}) |
|||
.then(function (res) { |
|||
that.getListLoading = false; |
|||
that.$refs.devicePlayer.openDialog("streamPlay", null, null, { |
|||
streamInfo: res.data, |
|||
hasAudio: true |
|||
}); |
|||
}) |
|||
.catch(function (error) { |
|||
console.log(error); |
|||
that.getListLoading = false; |
|||
}); |
|||
|
|||
}, |
|||
deleteStreamProxy: function(row){ |
|||
console.log(1111) |
|||
let that = this; |
|||
this.getListLoading = true; |
|||
this.$axios.get(`/api/proxy/del`,{ |
|||
params: { |
|||
app: row.app, |
|||
stream: row.stream |
|||
} |
|||
}) |
|||
.then(function (res) { |
|||
that.getListLoading = false; |
|||
that.initData() |
|||
}) |
|||
.catch(function (error) { |
|||
console.log(error); |
|||
that.getListLoading = false; |
|||
}); |
|||
}, |
|||
start: function(row){ |
|||
let that = this; |
|||
this.getListLoading = true; |
|||
this.$axios.get(`/api/proxy/start`,{ |
|||
params: { |
|||
app: row.app, |
|||
stream: row.stream |
|||
} |
|||
}) |
|||
.then(function (res) { |
|||
that.getListLoading = false; |
|||
that.initData() |
|||
}) |
|||
.catch(function (error) { |
|||
console.log(error); |
|||
that.getListLoading = false; |
|||
}); |
|||
}, |
|||
stop: function(row){ |
|||
let that = this; |
|||
this.getListLoading = true; |
|||
this.$axios.get(`/api/proxy/stop`,{ |
|||
params: { |
|||
app: row.app, |
|||
stream: row.stream |
|||
} |
|||
}) |
|||
.then(function (res) { |
|||
that.getListLoading = false; |
|||
that.initData() |
|||
}) |
|||
.catch(function (error) { |
|||
console.log(error); |
|||
that.getListLoading = false; |
|||
}); |
|||
} |
|||
|
|||
} |
|||
}; |
|||
</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; |
|||
} |
|||
.cpoy-btn { |
|||
cursor: pointer; |
|||
margin-right: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,215 @@ |
|||
<template> |
|||
<div id="chooseChannelFoStream" > |
|||
<el-table ref="gbStreamsTable" :data="gbStreams" border style="width: 100%" @selection-change="checkedChanage" > |
|||
<el-table-column type="selection" width="55" align="center" fixed > </el-table-column> |
|||
<el-table-column prop="name" label="名称" show-overflow-tooltip> |
|||
</el-table-column> |
|||
<el-table-column prop="app" label="应用名" show-overflow-tooltip> |
|||
</el-table-column> |
|||
<el-table-column prop="stream" label="流ID" show-overflow-tooltip> |
|||
</el-table-column> |
|||
<el-table-column prop="gbId" label="国标编码" show-overflow-tooltip> |
|||
</el-table-column> |
|||
<el-table-column prop="streamType" label="流来源" align="center" show-overflow-tooltip> |
|||
</el-table-column> |
|||
<el-table-column label="流来源" width="100" align="center"> |
|||
<template slot-scope="scope"> |
|||
<div slot="reference" class="name-wrapper"> |
|||
<el-tag size="medium" v-if="scope.row.streamType == 'proxy'">拉流代理</el-tag> |
|||
<el-tag size="medium" v-if="scope.row.streamType == 'push'">推流</el-tag> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination style="float: right;margin-top: 1rem;" @size-change="handleSizeChange" @current-change="currentChange" :current-page="currentPage" :page-size="count" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next" :total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'chooseChannelFoStream', |
|||
props: {}, |
|||
computed: { |
|||
// getPlayerShared: function () { |
|||
// return { |
|||
// sharedUrl: window.location.host + '/' + this.videoUrl, |
|||
// sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>', |
|||
// sharedRtmp: this.videoUrl |
|||
// }; |
|||
// } |
|||
}, |
|||
props: ['platformId'], |
|||
created() { |
|||
this.initData(); |
|||
}, |
|||
data() { |
|||
return { |
|||
gbStreams: [], |
|||
gbChoosechannel:{}, |
|||
searchSrt: "", |
|||
channelType: "", |
|||
online: "", |
|||
choosed: "", |
|||
currentPage: 0, |
|||
count: 10, |
|||
total: 0, |
|||
eventEnanle: false |
|||
|
|||
}; |
|||
}, |
|||
watch:{ |
|||
platformId(newData, oldData){ |
|||
console.log(newData) |
|||
this.initData() |
|||
|
|||
}, |
|||
}, |
|||
methods: { |
|||
initData: function() { |
|||
this.getChannelList(); |
|||
}, |
|||
currentChange: function (val) { |
|||
this.currentPage = val; |
|||
this.initData(); |
|||
}, |
|||
handleSizeChange: function (val) { |
|||
this.count = val; |
|||
console.log(val) |
|||
this.initData(); |
|||
|
|||
}, |
|||
rowcheckedChanage: function (val, row) { |
|||
console.log(val) |
|||
console.log(row) |
|||
}, |
|||
checkedChanage: function (val) { |
|||
var that = this; |
|||
if (!that.eventEnanle) { |
|||
return; |
|||
} |
|||
var tabelData = JSON.parse(JSON.stringify(this.$refs.gbStreamsTable.data)); |
|||
console.log("checkedChanage") |
|||
console.log(val) |
|||
|
|||
var newData = {}; |
|||
var addData = []; |
|||
var delData = []; |
|||
if (val.length > 0) { |
|||
for (let i = 0; i < val.length; i++) { |
|||
const element = val[i]; |
|||
var key = element.app + "_" + element.stream; |
|||
newData[key] = element; |
|||
if (!!!that.gbChoosechannel[key]){ |
|||
addData.push(element) |
|||
}else{ |
|||
delete that.gbChoosechannel[key] |
|||
} |
|||
} |
|||
|
|||
var oldKeys = Object.keys(that.gbChoosechannel); |
|||
if (oldKeys.length > 0) { |
|||
for (let i = 0; i < oldKeys.length; i++) { |
|||
const key = oldKeys[i]; |
|||
delData.push(that.gbChoosechannel[key]) |
|||
} |
|||
} |
|||
|
|||
}else{ |
|||
var oldKeys = Object.keys(that.gbChoosechannel); |
|||
if (oldKeys.length > 0) { |
|||
for (let i = 0; i < oldKeys.length; i++) { |
|||
const key = oldKeys[i]; |
|||
delData.push(that.gbChoosechannel[key]) |
|||
} |
|||
} |
|||
} |
|||
|
|||
that.gbChoosechannel = newData; |
|||
if (Object.keys(addData).length >0) { |
|||
console.log(addData) |
|||
that.$axios({ |
|||
method:"post", |
|||
url:"/api/gbStream/add", |
|||
data:{ |
|||
platformId: that.platformId, |
|||
gbStreams: addData, |
|||
} |
|||
}).then((res)=>{ |
|||
console.log("保存成功") |
|||
}).catch(function (error) { |
|||
console.log(error); |
|||
}); |
|||
} |
|||
if (Object.keys(delData).length >0) { |
|||
console.log(delData) |
|||
that.$axios({ |
|||
method:"post", |
|||
url:"/api/gbStream/del", |
|||
data:{ |
|||
gbStreams: delData, |
|||
} |
|||
}).then((res)=>{ |
|||
console.log("移除成功") |
|||
}).catch(function (error) { |
|||
console.log(error); |
|||
}); |
|||
} |
|||
|
|||
}, |
|||
shareAllCheckedChanage: function (val) { |
|||
this.chooseChanage(null, val) |
|||
}, |
|||
getChannelList: function () { |
|||
let that = this; |
|||
|
|||
this.$axios.get(`/api/gbStream/list`, { |
|||
params: { |
|||
page: that.currentPage, |
|||
count: that.count, |
|||
query: that.searchSrt, |
|||
online: that.online, |
|||
choosed: that.choosed, |
|||
platformId: that.platformId, |
|||
channelType: that.channelType |
|||
} |
|||
}) |
|||
.then(function (res) { |
|||
that.total = res.data.total; |
|||
that.gbStreams = res.data.list; |
|||
that.gbChoosechannel = {}; |
|||
// 防止出现表格错位 |
|||
that.$nextTick(() => { |
|||
that.$refs.gbStreamsTable.doLayout(); |
|||
// 默认选中 |
|||
var chooseGBS = []; |
|||
for (let i = 0; i < res.data.list.length; i++) { |
|||
const row = res.data.list[i]; |
|||
console.log(row.platformId) |
|||
if (row.platformId == that.platformId) { |
|||
that.$refs.gbStreamsTable.toggleRowSelection(row, true); |
|||
chooseGBS.push(row) |
|||
that.gbChoosechannel[row.app+ "_" + row.stream] = row; |
|||
|
|||
} |
|||
} |
|||
that.eventEnanle = true; |
|||
// that.checkedChanage(chooseGBS) |
|||
}) |
|||
console.log(that.gbChoosechannel) |
|||
}) |
|||
.catch(function (error) { |
|||
console.log(error); |
|||
}); |
|||
|
|||
}, |
|||
handleGBSelectionChange: function() { |
|||
this.initData(); |
|||
}, |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue