|  |  |  | 
|---|
|  |  |  | <div id="formStep" style="margin-top: 1rem; margin-right: 20px;"> | 
|---|
|  |  |  | <el-form v-if="currentStep == 1" ref="mediaServerForm" :rules="rules" :model="mediaServerForm" label-width="140px" > | 
|---|
|  |  |  | <el-form-item label="IP" prop="ip"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.ip"  placeholder="媒体服务IP" clearable></el-input> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.ip"  placeholder="媒体服务IP" clearable  :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="HTTP端口" prop="port"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.httpPort" placeholder="媒体服务HTTP端口"  clearable></el-input> | 
|---|
|  |  |  | <el-form-item label="HTTP端口" prop="httpPort"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.httpPort" placeholder="媒体服务HTTP端口"  clearable :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="SECRET" prop="secret"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.secret" placeholder="媒体服务SECRET"  clearable></el-input> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.secret" placeholder="媒体服务SECRET"  clearable :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item> | 
|---|
|  |  |  | <div style="float: right;"> | 
|---|
|  |  |  | 
|---|
|  |  |  | <el-col :span="12"> | 
|---|
|  |  |  | <el-form v-if="currentStep === 2 || currentStep === 3" ref="mediaServerForm1" :rules="rules" :model="mediaServerForm" label-width="140px" > | 
|---|
|  |  |  | <el-form-item label="IP" prop="ip"> | 
|---|
|  |  |  | <el-input  v-if="currentStep === 2" v-model="mediaServerForm.ip" disabled></el-input> | 
|---|
|  |  |  | <el-input  v-if="currentStep === 3"  v-model="mediaServerForm.ip"></el-input> | 
|---|
|  |  |  | <el-input  v-if="currentStep === 2" v-model="mediaServerForm.ip" disabled :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | <el-input  v-if="currentStep === 3"  v-model="mediaServerForm.ip" :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="HTTP端口" prop="port"> | 
|---|
|  |  |  | <el-input  v-if="currentStep === 2"  v-model="mediaServerForm.httpPort" disabled></el-input> | 
|---|
|  |  |  | <el-input  v-if="currentStep === 3"  v-model="mediaServerForm.httpPort"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="SECRET" prop="secret"> | 
|---|
|  |  |  | <el-input v-if="currentStep === 2"  v-model="mediaServerForm.secret" disabled></el-input> | 
|---|
|  |  |  | <el-input v-if="currentStep === 3"  v-model="mediaServerForm.secret"></el-input> | 
|---|
|  |  |  | <el-form-item label="HTTP端口" prop="httpPort"> | 
|---|
|  |  |  | <el-input  v-if="currentStep === 2"  v-model="mediaServerForm.httpPort" disabled :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | <el-input  v-if="currentStep === 3"  v-model="mediaServerForm.httpPort" :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="HOOK IP" prop="ip"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.hookIp" placeholder="媒体服务HOOK_IP" clearable></el-input> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.hookIp" placeholder="媒体服务HOOK_IP" clearable :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="SDP IP" prop="ip"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.sdpIp" placeholder="媒体服务SDP_IP" clearable></el-input> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.sdpIp" placeholder="媒体服务SDP_IP" clearable :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="流IP" prop="ip"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.streamIp" placeholder="媒体服务流IP" clearable></el-input> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.streamIp" placeholder="媒体服务流IP" clearable :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="HTTPS PORT" prop="port"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.httpSSlPort" placeholder="媒体服务HTTPS_PORT" clearable></el-input> | 
|---|
|  |  |  | <el-form-item label="HTTPS PORT" prop="httpSSlPort"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.httpSSlPort" placeholder="媒体服务HTTPS_PORT" clearable :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="RTSP PORT" prop="port"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.rtspPort" placeholder="媒体服务RTSP_PORT" clearable></el-input> | 
|---|
|  |  |  | <el-form-item label="RTSP PORT" prop="rtspPort"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.rtspPort" placeholder="媒体服务RTSP_PORT" clearable :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="RTSPS PORT" prop="port"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.rtspSSLPort" placeholder="媒体服务RTSPS_PORT" clearable></el-input> | 
|---|
|  |  |  | <el-form-item label="RTSPS PORT" prop="rtspSSLPort"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.rtspSSLPort" placeholder="媒体服务RTSPS_PORT" clearable :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </el-form> | 
|---|
|  |  |  | </el-col> | 
|---|
|  |  |  | <el-col :span="12"> | 
|---|
|  |  |  | <el-form v-if="currentStep === 2 || currentStep === 3"  ref="mediaServerForm2" :rules="rules" :model="mediaServerForm" label-width="180px" > | 
|---|
|  |  |  | <el-form-item label="RTMP PORT" prop="port"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.rtmpPort" placeholder="媒体服务RTMP_PORT" clearable></el-input> | 
|---|
|  |  |  | <el-form-item label="RTMP PORT" prop="rtmpPort"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.rtmpPort" placeholder="媒体服务RTMP_PORT" clearable :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="RTMPS PORT" prop="port"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.rtmpSSlPort" placeholder="媒体服务RTMPS_PORT" clearable></el-input> | 
|---|
|  |  |  | <el-form-item label="RTMPS PORT" prop="rtmpSSlPort"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.rtmpSSlPort" placeholder="媒体服务RTMPS_PORT" clearable :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="SECRET" prop="secret"> | 
|---|
|  |  |  | <el-input v-if="currentStep === 2"  v-model="mediaServerForm.secret" disabled :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | <el-input v-if="currentStep === 3"  v-model="mediaServerForm.secret" :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="自动配置媒体服务" > | 
|---|
|  |  |  | <el-switch v-model="mediaServerForm.autoConfig"></el-switch> | 
|---|
|  |  |  | <el-switch v-model="mediaServerForm.autoConfig" :disabled="mediaServerForm.defaultServer"></el-switch> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="收流端口模式" > | 
|---|
|  |  |  | <el-switch  active-text="多端口" inactive-text="单端口" v-model="mediaServerForm.rtpEnable"></el-switch> | 
|---|
|  |  |  | <el-switch  active-text="多端口" inactive-text="单端口" @change="portRangeChange" v-model="mediaServerForm.rtpEnable" :disabled="mediaServerForm.defaultServer"></el-switch> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-form-item v-if="!mediaServerForm.rtpEnable" label="收流端口" prop="port"> | 
|---|
|  |  |  | <el-input v-model.number="mediaServerForm.rtpProxyPort" clearable></el-input> | 
|---|
|  |  |  | <el-form-item v-if="!mediaServerForm.rtpEnable" label="收流端口" prop="rtpProxyPort"> | 
|---|
|  |  |  | <el-input v-model.number="mediaServerForm.rtpProxyPort" clearable :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item v-if="mediaServerForm.rtpEnable" label="收流端口" prop="port"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.rtpPortRange1" placeholder="起始" clearable style="width: 100px" prop="port"></el-input> | 
|---|
|  |  |  | <el-form-item v-if="mediaServerForm.rtpEnable" label="收流端口" > | 
|---|
|  |  |  | <el-input v-model="rtpPortRange1" placeholder="起始" @change="portRangeChange" clearable style="width: 100px" prop="rtpPortRange1" :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | - | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.rtpPortRange2" placeholder="终止"  clearable style="width: 100px" prop="port"></el-input> | 
|---|
|  |  |  | <el-input v-model="rtpPortRange2" placeholder="终止" @change="portRangeChange" clearable style="width: 100px" prop="rtpPortRange2" :disabled="mediaServerForm.defaultServer"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="推流端口" prop="port"> | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.sendRtpPortRange1" placeholder="起始" clearable style="width: 100px" prop="port"></el-input> | 
|---|
|  |  |  | - | 
|---|
|  |  |  | <el-input v-model="mediaServerForm.sendRtpPortRange2" placeholder="终止"  clearable style="width: 100px" prop="port"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="无人观看多久后停止拉流" > | 
|---|
|  |  |  | <el-input v-model.number="mediaServerForm.streamNoneReaderDelayMS" clearable></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="录像管理服务端口" prop="port"> | 
|---|
|  |  |  | <el-input v-model.number="mediaServerForm.recordAssistPort"> | 
|---|
|  |  |  | <el-form-item label="录像管理服务端口" prop="recordAssistPort"> | 
|---|
|  |  |  | <el-input v-model.number="mediaServerForm.recordAssistPort" :disabled="mediaServerForm.defaultServer"> | 
|---|
|  |  |  | <!--                  <el-button v-if="mediaServerForm.recordAssistPort > 0" slot="append" type="primary" @click="checkRecordServer">测试</el-button>--> | 
|---|
|  |  |  | <el-button v-if="mediaServerForm.recordAssistPort > 0" class="el-icon-check" slot="append" type="primary" @click="checkRecordServer"></el-button> | 
|---|
|  |  |  | </el-input> | 
|---|
|  |  |  | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item> | 
|---|
|  |  |  | <div style="float: right;"> | 
|---|
|  |  |  | <el-button type="primary"  @click="onSubmit" >提交</el-button> | 
|---|
|  |  |  | <el-button @click="close">取消</el-button> | 
|---|
|  |  |  | <el-button v-if="!mediaServerForm.defaultServer" type="primary"  @click="onSubmit" >提交</el-button> | 
|---|
|  |  |  | <el-button v-if="!mediaServerForm.defaultServer" @click="close">取消</el-button> | 
|---|
|  |  |  | <el-button v-if="mediaServerForm.defaultServer" @click="close">关闭</el-button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | </el-form> | 
|---|
|  |  |  | 
|---|
|  |  |  | hookIp: "", | 
|---|
|  |  |  | sdpIp: "", | 
|---|
|  |  |  | streamIp: "", | 
|---|
|  |  |  | streamNoneReaderDelayMS: "", | 
|---|
|  |  |  | secret: "035c73f7-bb6b-4889-a715-d9eb2d1925cc", | 
|---|
|  |  |  | httpPort: "", | 
|---|
|  |  |  | httpSSlPort: "", | 
|---|
|  |  |  | 
|---|
|  |  |  | rtmpSSlPort: "", | 
|---|
|  |  |  | rtpEnable: false, | 
|---|
|  |  |  | rtpPortRange: "", | 
|---|
|  |  |  | sendRtpPortRange: "", | 
|---|
|  |  |  | rtpPortRange1: "", | 
|---|
|  |  |  | rtpPortRange2: "", | 
|---|
|  |  |  | sendRtpPortRange1: "", | 
|---|
|  |  |  | sendRtpPortRange2: "", | 
|---|
|  |  |  | rtpProxyPort: "", | 
|---|
|  |  |  | rtspPort: "", | 
|---|
|  |  |  | rtspSSLPort: "", | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | rtpPortRange1:30000, | 
|---|
|  |  |  | rtpPortRange2:30500, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | rules: { | 
|---|
|  |  |  | ip:  [{ required: true, validator: isValidIp, message: '请输入有效的IP地址', trigger: 'blur' }], | 
|---|
|  |  |  | port:  [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }], | 
|---|
|  |  |  | httpPort:  [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }], | 
|---|
|  |  |  | httpSSlPort:  [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }], | 
|---|
|  |  |  | recordAssistPort:  [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }], | 
|---|
|  |  |  | rtmpPort:  [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }], | 
|---|
|  |  |  | rtmpSSlPort:  [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }], | 
|---|
|  |  |  | rtpPortRange1:  [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }], | 
|---|
|  |  |  | rtpPortRange2:  [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }], | 
|---|
|  |  |  | rtpProxyPort:  [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }], | 
|---|
|  |  |  | rtspPort:  [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }], | 
|---|
|  |  |  | rtspSSLPort:  [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }], | 
|---|
|  |  |  | secret: [{ required: true, message: "请输入secret", trigger: "blur" }], | 
|---|
|  |  |  | timeout_ms: [{ required: true, message: "请输入FFmpeg推流成功超时时间", trigger: "blur" }], | 
|---|
|  |  |  | ffmpeg_cmd_key: [{ required: false, message: "请输入FFmpeg命令参数模板(可选)", trigger: "blur" }], | 
|---|
|  |  |  | 
|---|
|  |  |  | if (param.rtpPortRange) { | 
|---|
|  |  |  | let rtpPortRange = this.mediaServerForm.rtpPortRange.split(","); | 
|---|
|  |  |  | if (rtpPortRange.length > 0) { | 
|---|
|  |  |  | this.mediaServerForm["rtpPortRange1"] = rtpPortRange[0] | 
|---|
|  |  |  | this.mediaServerForm["rtpPortRange2"] = rtpPortRange[1] | 
|---|
|  |  |  | this.rtpPortRange1 =  rtpPortRange[0] | 
|---|
|  |  |  | this.rtpPortRange2 =  rtpPortRange[1] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | let sendRtpPortRange = this.mediaServerForm.sendRtpPortRange.split(","); | 
|---|
|  |  |  | this.mediaServerForm["sendRtpPortRange1"] = sendRtpPortRange[0] | 
|---|
|  |  |  | this.mediaServerForm["sendRtpPortRange2"] = sendRtpPortRange[1] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | checkServer: function() { | 
|---|
|  |  |  | 
|---|
|  |  |  | that.mediaServerForm = data.data; | 
|---|
|  |  |  | that.mediaServerForm.httpPort = httpPort; | 
|---|
|  |  |  | that.mediaServerForm.autoConfig = true; | 
|---|
|  |  |  | that.mediaServerForm.sendRtpPortRange1 = 30000 | 
|---|
|  |  |  | that.mediaServerForm.sendRtpPortRange2 = 30500 | 
|---|
|  |  |  | that.mediaServerForm.rtpPortRange1 = 30000 | 
|---|
|  |  |  | that.mediaServerForm.rtpPortRange2 = 30500 | 
|---|
|  |  |  | that.rtpPortRange1 = 30000 | 
|---|
|  |  |  | that.rtpPortRange2 = 30500 | 
|---|
|  |  |  | that.serverCheck = 1; | 
|---|
|  |  |  | }else { | 
|---|
|  |  |  | that.serverCheck = -1; | 
|---|
|  |  |  | 
|---|
|  |  |  | onSubmit: function () { | 
|---|
|  |  |  | this.dialogLoading = true; | 
|---|
|  |  |  | let that = this; | 
|---|
|  |  |  | if (this.mediaServerForm.rtpEnable) { | 
|---|
|  |  |  | this.mediaServerForm.rtpPortRange = this.mediaServerForm.rtpPortRange1 + "," + this.mediaServerForm.rtpPortRange2; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.mediaServerForm.sendRtpPortRange = this.mediaServerForm.sendRtpPortRange1 + "," + this.mediaServerForm.sendRtpPortRange2; | 
|---|
|  |  |  | that.mediaServer.addServer(this.mediaServerForm, data => { | 
|---|
|  |  |  | if (data.code === 0) { | 
|---|
|  |  |  | that.$message({ | 
|---|
|  |  |  | 
|---|
|  |  |  | hookIp: "", | 
|---|
|  |  |  | sdpIp: "", | 
|---|
|  |  |  | streamIp: "", | 
|---|
|  |  |  | streamNoneReaderDelayMS: "", | 
|---|
|  |  |  | secret: "035c73f7-bb6b-4889-a715-d9eb2d1925cc", | 
|---|
|  |  |  | httpPort: "", | 
|---|
|  |  |  | httpSSlPort: "", | 
|---|
|  |  |  | 
|---|
|  |  |  | rtmpSSlPort: "", | 
|---|
|  |  |  | rtpEnable: false, | 
|---|
|  |  |  | rtpPortRange: "", | 
|---|
|  |  |  | sendRtpPortRange: "", | 
|---|
|  |  |  | rtpPortRange1: "", | 
|---|
|  |  |  | rtpPortRange2: "", | 
|---|
|  |  |  | sendRtpPortRange1: "", | 
|---|
|  |  |  | sendRtpPortRange2: "", | 
|---|
|  |  |  | rtpProxyPort: "", | 
|---|
|  |  |  | rtspPort: "", | 
|---|
|  |  |  | rtspSSLPort: "", | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | this.rtpPortRange1 = 30500; | 
|---|
|  |  |  | this.rtpPortRange2 = 30500; | 
|---|
|  |  |  | this.listChangeCallback = null | 
|---|
|  |  |  | this.currentStep = 1; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | 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"; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | portRangeChange: function() { | 
|---|
|  |  |  | if (this.mediaServerForm.rtpEnable) { | 
|---|
|  |  |  | this.mediaServerForm.rtpPortRange = this.rtpPortRange1 + "," + this.rtpPortRange2 | 
|---|
|  |  |  | console.log(this.mediaServerForm.rtpPortRange) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }; | 
|---|