|  |  |  | 
|---|
|  |  |  | @close="close()" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div id="shared" style="margin-top: 1rem;margin-right: 100px;"> | 
|---|
|  |  |  | <el-form ref="streamProxy" :rules="rules" :model="proxyParam" label-width="140px"> | 
|---|
|  |  |  | <el-form ref="streamProxy" :rules="rules" :model="proxyParam" label-width="140px" > | 
|---|
|  |  |  | <el-form-item label="类型" prop="type"> | 
|---|
|  |  |  | <el-select | 
|---|
|  |  |  | v-model="proxyParam.type" | 
|---|
|  |  |  | 
|---|
|  |  |  | <el-form-item label="拉流地址" prop="src_url" v-if="proxyParam.type=='ffmpeg'"> | 
|---|
|  |  |  | <el-input v-model="proxyParam.src_url" clearable></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="超时时间" prop="timeout_ms" v-if="proxyParam.type=='ffmpeg'"> | 
|---|
|  |  |  | <el-form-item label="超时时间:毫秒" prop="timeout_ms" v-if="proxyParam.type=='ffmpeg'"> | 
|---|
|  |  |  | <el-input v-model="proxyParam.timeout_ms" clearable></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="节点选择" prop="rtp_type"> | 
|---|
|  |  |  | <el-select | 
|---|
|  |  |  | v-model="proxyParam.mediaServerId" | 
|---|
|  |  |  | @change="mediaServerIdChange" | 
|---|
|  |  |  | style="width: 100%" | 
|---|
|  |  |  | placeholder="请选择拉流节点" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-option | 
|---|
|  |  |  | v-for="item in mediaServerList" | 
|---|
|  |  |  | :key="item.id" | 
|---|
|  |  |  | :label="item.id" | 
|---|
|  |  |  | :value="item.id"> | 
|---|
|  |  |  | </el-option> | 
|---|
|  |  |  | </el-select> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="FFmpeg命令模板" prop="ffmpeg_cmd_key" v-if="proxyParam.type=='ffmpeg'"> | 
|---|
|  |  |  | <el-input v-model="proxyParam.ffmpeg_cmd_key" clearable></el-input> | 
|---|
|  |  |  | <!--                <el-input v-model="proxyParam.ffmpeg_cmd_key" clearable></el-input>--> | 
|---|
|  |  |  | <el-select | 
|---|
|  |  |  | v-model="proxyParam.ffmpeg_cmd_key" | 
|---|
|  |  |  | style="width: 100%" | 
|---|
|  |  |  | placeholder="请选择FFmpeg命令模板" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-option | 
|---|
|  |  |  | v-for="item in Object.keys(ffmpegCmdList)" | 
|---|
|  |  |  | :key="item" | 
|---|
|  |  |  | :label="ffmpegCmdList[item]" | 
|---|
|  |  |  | :value="item"> | 
|---|
|  |  |  | </el-option> | 
|---|
|  |  |  | </el-select> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="国标编码" prop="gbId"> | 
|---|
|  |  |  | <el-input v-model="proxyParam.gbId" placeholder="设置国标编码可推送到国标" clearable></el-input> | 
|---|
|  |  |  | 
|---|
|  |  |  | <el-option label="组播" value="2"></el-option> | 
|---|
|  |  |  | </el-select> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="无人观看" prop="rtp_type" > | 
|---|
|  |  |  | <el-select | 
|---|
|  |  |  | @change="noneReaderHandler" | 
|---|
|  |  |  | v-model="proxyParam.none_reader" | 
|---|
|  |  |  | style="width: 100%" | 
|---|
|  |  |  | placeholder="请选择无人观看的处理方式" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-option label="不做处理" value="0"></el-option> | 
|---|
|  |  |  | <el-option label="停用" value="1"></el-option> | 
|---|
|  |  |  | <el-option label="移除" value="2"></el-option> | 
|---|
|  |  |  | </el-select> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="其他选项"> | 
|---|
|  |  |  | <div style="float: left;"> | 
|---|
|  |  |  | <el-checkbox label="启用" v-model="proxyParam.enable" ></el-checkbox> | 
|---|
|  |  |  | <el-checkbox label="转HLS" v-model="proxyParam.enable_hls" ></el-checkbox> | 
|---|
|  |  |  | <el-checkbox label="MP4录制" v-model="proxyParam.enable_mp4" ></el-checkbox> | 
|---|
|  |  |  | <el-checkbox label="开启音频" v-model="proxyParam.enable_audio" ></el-checkbox> | 
|---|
|  |  |  | <el-checkbox label="录制" v-model="proxyParam.enable_mp4" ></el-checkbox> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item> | 
|---|
|  |  |  | <div style="float: right;"> | 
|---|
|  |  |  | <el-button type="primary" @click="onSubmit">{{onSubmit_text}}</el-button> | 
|---|
|  |  |  | <el-button type="primary" @click="onSubmit" :loading="dialogLoading" >{{onSubmit_text}}</el-button> | 
|---|
|  |  |  | <el-button @click="close">取消</el-button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | import MediaServer from './../service/MediaServer' | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: "streamProxyEdit", | 
|---|
|  |  |  | props: {}, | 
|---|
|  |  |  | 
|---|
|  |  |  | listChangeCallback: null, | 
|---|
|  |  |  | showDialog: false, | 
|---|
|  |  |  | isLoging: false, | 
|---|
|  |  |  | dialogLoading: false, | 
|---|
|  |  |  | onSubmit_text: "立即创建", | 
|---|
|  |  |  | platformList: [], | 
|---|
|  |  |  | mediaServer: new MediaServer(), | 
|---|
|  |  |  | proxyParam: { | 
|---|
|  |  |  | name: null, | 
|---|
|  |  |  | type: "default", | 
|---|
|  |  |  | app: null, | 
|---|
|  |  |  | stream: null, | 
|---|
|  |  |  | url: "rtmp://58.200.131.2/livetv/cctv5hd", | 
|---|
|  |  |  | url: "", | 
|---|
|  |  |  | src_url: null, | 
|---|
|  |  |  | timeout_ms: null, | 
|---|
|  |  |  | ffmpeg_cmd_key: null, | 
|---|
|  |  |  | gbId: null, | 
|---|
|  |  |  | rtp_type: null, | 
|---|
|  |  |  | enable: true, | 
|---|
|  |  |  | enable_hls: true, | 
|---|
|  |  |  | enable_audio: true, | 
|---|
|  |  |  | enable_mp4: false, | 
|---|
|  |  |  | none_reader: null, | 
|---|
|  |  |  | enable_remove_none_reader: false, | 
|---|
|  |  |  | enable_disable_none_reader: false, | 
|---|
|  |  |  | platformGbId: null, | 
|---|
|  |  |  | mediaServerId: null, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | mediaServerList:{}, | 
|---|
|  |  |  | ffmpegCmdList:{}, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | rules: { | 
|---|
|  |  |  | name: [{ required: true, message: "请输入名称", trigger: "blur" }], | 
|---|
|  |  |  | 
|---|
|  |  |  | this.listChangeCallback = callback; | 
|---|
|  |  |  | if (proxyParam != null) { | 
|---|
|  |  |  | this.proxyParam = proxyParam; | 
|---|
|  |  |  | this.onSubmit_text = "保存"; | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | this.onSubmit_text = "立即创建"; | 
|---|
|  |  |  | this.proxyParam.none_reader = null; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let that = this; | 
|---|
|  |  |  | this.$axios({ | 
|---|
|  |  |  | method: 'get', | 
|---|
|  |  |  | url:`/api/platform/query/10000/1` | 
|---|
|  |  |  | }).then(function (res) { | 
|---|
|  |  |  | that.platformList = res.data.data.list; | 
|---|
|  |  |  | }).catch(function (error) { | 
|---|
|  |  |  | console.log(error); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | this.mediaServer.getOnlineMediaServerList((data)=>{ | 
|---|
|  |  |  | this.mediaServerList = data.data; | 
|---|
|  |  |  | this.proxyParam.mediaServerId = this.mediaServerList[0].id | 
|---|
|  |  |  | this.mediaServerIdChange() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | mediaServerIdChange:function (){ | 
|---|
|  |  |  | let that = this; | 
|---|
|  |  |  | if (that.proxyParam.mediaServerId !== "auto"){ | 
|---|
|  |  |  | that.$axios({ | 
|---|
|  |  |  | method: 'get', | 
|---|
|  |  |  | url:`/api/proxy/ffmpeg_cmd/list`, | 
|---|
|  |  |  | params: { | 
|---|
|  |  |  | mediaServerId: that.proxyParam.mediaServerId | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }).then(function (res) { | 
|---|
|  |  |  | that.ffmpegCmdList = res.data.data; | 
|---|
|  |  |  | that.proxyParam.ffmpeg_cmd_key = Object.keys(res.data.data)[0]; | 
|---|
|  |  |  | }).catch(function (error) { | 
|---|
|  |  |  | console.log(error); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | onSubmit: function () { | 
|---|
|  |  |  | console.log("onSubmit"); | 
|---|
|  |  |  | var that = this; | 
|---|
|  |  |  | that.$axios({ | 
|---|
|  |  |  | this.dialogLoading = true; | 
|---|
|  |  |  | this.noneReaderHandler(); | 
|---|
|  |  |  | this.$axios({ | 
|---|
|  |  |  | method: 'post', | 
|---|
|  |  |  | url:`/api/proxy/save`, | 
|---|
|  |  |  | data: that.proxyParam | 
|---|
|  |  |  | }).then(function (res) { | 
|---|
|  |  |  | data: this.proxyParam | 
|---|
|  |  |  | }).then((res)=> { | 
|---|
|  |  |  | this.dialogLoading = false; | 
|---|
|  |  |  | if (typeof (res.data.code) != "undefined" && res.data.code === 0) { | 
|---|
|  |  |  | that.$message({ | 
|---|
|  |  |  | this.$message({ | 
|---|
|  |  |  | showClose: true, | 
|---|
|  |  |  | message: res.data.msg, | 
|---|
|  |  |  | type: "success", | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | that.showDialog = false; | 
|---|
|  |  |  | if (that.listChangeCallback != null) { | 
|---|
|  |  |  | that.listChangeCallback(); | 
|---|
|  |  |  | this.showDialog = false; | 
|---|
|  |  |  | if (this.listChangeCallback != null) { | 
|---|
|  |  |  | this.listChangeCallback(); | 
|---|
|  |  |  | this.dialogLoading = false; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }).catch(function (error) { | 
|---|
|  |  |  | }).catch((error) =>{ | 
|---|
|  |  |  | console.log(error); | 
|---|
|  |  |  | this.dialogLoading = false; | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | close: function () { | 
|---|
|  |  |  | console.log("关闭添加视频平台"); | 
|---|
|  |  |  | this.showDialog = false; | 
|---|
|  |  |  | this.dialogLoading = false; | 
|---|
|  |  |  | this.$refs.streamProxy.resetFields(); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | deviceGBIdExit: async function (deviceGbId) { | 
|---|
|  |  |  | var result = false; | 
|---|
|  |  |  | var that = this; | 
|---|
|  |  |  | await that.$axios({ | 
|---|
|  |  |  | method: 'post', | 
|---|
|  |  |  | method: 'get', | 
|---|
|  |  |  | url:`/api/platform/exit/${deviceGbId}` | 
|---|
|  |  |  | }).then(function (res) { | 
|---|
|  |  |  | result = res.data; | 
|---|
|  |  |  | 
|---|
|  |  |  | if (this.platform.enable && this.platform.expires == "0") { | 
|---|
|  |  |  | this.platform.expires = "300"; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | noneReaderHandler: function() { | 
|---|
|  |  |  | if (this.proxyParam.none_reader === null || this.proxyParam.none_reader === "0") { | 
|---|
|  |  |  | this.proxyParam.enable_disable_none_reader = false; | 
|---|
|  |  |  | this.proxyParam.enable_remove_none_reader = false; | 
|---|
|  |  |  | }else if (this.proxyParam.none_reader === "1"){ | 
|---|
|  |  |  | this.proxyParam.enable_disable_none_reader = true; | 
|---|
|  |  |  | this.proxyParam.enable_remove_none_reader = false; | 
|---|
|  |  |  | }else if (this.proxyParam.none_reader ==="2"){ | 
|---|
|  |  |  | this.proxyParam.enable_disable_none_reader = false; | 
|---|
|  |  |  | this.proxyParam.enable_remove_none_reader = true; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | </script> | 
|---|