GB28181-Server/web_src/components/Config.vue

<template>
<div class="container-fluid no-padding">
    <section class="content">
        <div class="nav-tabs-custom col-lg-offset-2 col-lg-8 no-padding">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#base-config" data-toggle="tab">{{logoText}} 信令服务配置</a></li>
                <li @click.prevent="getSMSList"><a href="#sms-config" data-toggle="tab">{{logoText}} 流媒体服务配置</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane  active" id="base-config">
                    <form role="form" class="form-horizontal" autocomplete="off" @submit.prevent="onSubmit">
                        <div :class="['form-group' , {'has-error':  errors.has('Serial')}]">
                            <label for="sip-serial" class="col-sm-4 control-label">SIP ID</label>
                            <div class="col-sm-7">
                                <input id="sip-serial" type="text" class="form-control" name="Serial" data-vv-as="SIP ID" v-validate="'required'" v-model.trim="Serial">
                                <span class="help-block">{{errors.first('Serial')}}</span>
                            </div>
                        </div>
                        <div :class="['form-group' , {'has-error': errors.has('Realm')}]">
                            <label for="sip-realm" class="col-sm-4 control-label">SIP 域</label>
                            <div class="col-sm-7">
                                <input id="sip-realm" type="text" class="form-control" name="Realm" data-vv-as="SIP 域" v-validate="'required'" v-model.trim="Realm">
                                <span class="help-block">{{errors.first('Realm')}}</span>
                            </div>
                        </div>
                        <div :class="['form-group' , {'has-error': errors.has('Host')}]">
                            <label for="sip-host" class="col-sm-4 control-label">SIP Host</label>
                            <div class="col-sm-7">
                                <input type="text" id="sip-host" class="form-control" name="Host" data-vv-as="SIP Host" v-validate="'required'" v-model.trim="Host">
                                <span class="help-block">{{errors.first('Host')}}</span>
                            </div>
                        </div>
                        <div :class="['form-group' , {'has-error': errors.has('Port')}]">
                            <label for="sip-port" class="col-sm-4 control-label">SIP 端口</label>
                            <div class="col-sm-7">
                                <input type="text" id="sip-port" class="form-control" name="Port" data-vv-as="SIP 端口" v-validate="'required|numeric'" v-model.trim="Port">
                                <span class="help-block">{{errors.first('Port')}}</span>
                            </div>
                        </div>
                        <div :class="['form-group' , {'has-error': errors.has('DevicePassword')}]">
                            <label for="sip-dev-pwd" class="col-sm-4 control-label">设备统一接入密码</label>
                            <div class="col-sm-7">
                                <input type="text" id="sip-dev-pwd" class="form-control" name="DevicePassword" data-vv-as="设备统一接入密码" v-model.trim="DevicePassword">
                                <span class="help-block">{{errors.first('DevicePassword')}}</span>
                            </div>
                        </div>
                        <div :class="['form-group', {'has-error': errors.has('PreferStreamFmt')}]" title="配置直播流优先使用的播放格式">
                            <label for="prefer-stream-fmt" class="col-sm-4 control-label">首选直播格式</label>
                            <div class="col-sm-7">
                                <select id="prefer-stream-fmt" name="PreferStreamFmt" class="form-control" v-model.trim="PreferStreamFmt">
                                    <option value="">自动选择</option>
                                    <option value="FLV">FLV</option>
                                    <option value="WS_FLV">WS_FLV</option>
                                    <option value="WEBRTC">WEBRTC</option>
                                    <option value="HLS">HLS</option>
                                    <option value="RTMP">RTMP</option>
                                </select>
                                <span class="help-block">{{errors.first('PreferStreamFmt')}}</span>
                            </div>
                        </div>
                        <div :class="['form-group' , {'has-error': errors.has('TimeServer')}]">
                            <label for="sip-time-server" class="col-sm-4 control-label">校时源(可选)</label>
                            <div class="col-sm-7">
                                <input type="text" id="sip-time-server" class="form-control" name="TimeServer" data-vv-as="校时源" v-validate="" v-model.trim="TimeServer" placeholder="上级国标编号/NTP">
                                <span class="help-block">{{errors.first('TimeServer')}}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="black-ip-list" class="col-sm-4 control-label">黑名单 IP(可选)</label>
                            <div class="col-sm-7">
                                <input type="text" id="black-ip-list" class="form-control" name="BlackIPList" data-vv-as="黑名单 IP" v-model.trim="BlackIPList" placeholder="选填">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="black-ua-list" class="col-sm-4 control-label">黑名单 UA(可选)</label>
                            <div class="col-sm-7">
                                <input type="text" id="black-ua-list" class="form-control" name="BlackUAList" data-vv-as="黑名单 UA" v-model.trim="BlackUAList" placeholder="选填">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div :class="{'form-group': true, 'has-error': errors.has('HTTPSPort')}" title="配置为0, 表示不开启HTTPS">
                            <label for="base-https-port" class="col-sm-4 control-label">HTTPS 端口(可选)</label>
                            <div class="col-sm-7">
                                <input id="base-https-port" type="text" class="form-control" name="HTTPSPort" data-vv-as="HTTPS 端口" v-validate="'numeric'" v-model.trim="HTTPSPort" placeholder="默认不开启HTTPS">
                                <span class="help-block">{{errors.first('HTTPSPort')}}</span>
                            </div>
                        </div>
                        <div :class="{'form-group': true, 'has-error': errors.has('HTTPSCertFile')}" title="配置 Cert 证书路径，绝对路径" v-if="HTTPSPort && HTTPSPort != '0'">
                            <label for="base-https-cert-file" class="col-sm-4 control-label">HTTPS Cert 证书路径</label>
                            <div class="col-sm-7">
                                <input id="base-https-cert-file" type="text" class="form-control" spellcheck="false" autocomplete="off" name="HTTPSCertFile" v-model.trim="HTTPSCertFile" placeholder="配置cert证书绝对路径">
                                <span class="help-block">{{errors.first('HTTPSCertFile')}}</span>
                            </div>
                        </div>
                        <div :class="{'form-group': true, 'has-error': errors.has('HTTPSKeyFile')}" title="配置 Cert 证书路径，绝对路径" v-if="HTTPSPort && HTTPSPort != '0'">
                            <label for="base-https-key-file" class="col-sm-4 control-label">HTTPS Key 证书路径</label>
                            <div class="col-sm-7">
                                <input id="base-https-key-file" type="text" class="form-control" spellcheck="false" autocomplete="off" name="HTTPSKeyFile" v-model.trim="HTTPSKeyFile" placeholder="配置key证书绝对路径">
                                <span class="help-block">{{errors.first('HTTPSKeyFile')}}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">其他配置</label>
                            <div class="col-sm-7 checkbox">
                                <el-checkbox title="开启后接口调用会校验登录" style="margin-left:-19px;margin-top:-5px;" size="small" v-model.trim="APIAuth" name="APIAuth">HTTP 接口鉴权</el-checkbox>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <el-checkbox style="margin-left:-19px;margin-top:-5px;" size="small" v-model.trim="SIPLog" name="SIPLog">信令日志</el-checkbox>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <router-link :to="`/black/1`">
                                    <i title="设备接入黑名单维护" class="fa fa-list cfg-black-list"  aria-hidden="true">&nbsp;&nbsp;黑名单</i>
                                </router-link>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <router-link :to="`/white/1`">
                                    <i title="设备接入白名单维护" class="fa fa-server cfg-white-list"  aria-hidden="true">&nbsp;&nbsp;白名单</i>
                                </router-link>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-4 col-sm-7">
                                <button type="submit" class="btn btn-primary" :disabled="isBasicNoChange || errors.any() || bCommitting">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="tab-pane" id="sms-config">
                    <form role="form" class="form-horizontal" autocomplete="off">
                        <div class="form-group" v-if="smss.length > 0">
                            <label class="col-sm-4 control-label">SMS 服务</label>
                            <div class="col-sm-7">
                                <select class="form-control" v-model.trim="smsserial" @change="smschange">
                                    <option v-for="(c, idx) in smss" :value="c.Serial" :key="idx">{{c.Serial}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" v-if="smss.length <= 0">
                            <div class="col-sm-12">
                                <div class="alert text-center no-margin">SMS {{smstip}}</div>
                            </div>
                        </div>
                    </form>
                    <form v-if="smsbaseconfig.Host != undefined && smss.length > 0" role="form" class="form-horizontal" autocomplete="off" @submit.prevent="onSubmitSMS">
                        <div :class="['form-group' , {'has-error': errors.has('smsSerial')}]" title="内部通信使用">
                            <label class="col-sm-4 control-label">SIP ID</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="smsSerial" data-vv-as="SIP ID" v-validate="'required'" v-model.trim="smsbaseconfig.Serial">
                                <span class="help-block">{{errors.first('smsSerial')}}</span>
                            </div>
                        </div>
                        <div :class="['form-group' , {'has-error': errors.has('smsRealm')}]" title="内部通信使用">
                            <label class="col-sm-4 control-label">SIP 域</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="smsRealm" data-vv-as="SIP 域" v-validate="'required'" v-model.trim="smsbaseconfig.Realm">
                                <span class="help-block">{{errors.first('smsRealm')}}</span>
                            </div>
                        </div>
                        <div :class="['form-group' , {'has-error': errors.has('smsPort')}]" title="内部通信使用">
                            <label class="col-sm-4 control-label">SIP 端口</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="smsPort" data-vv-as="SIP 端口" v-validate="'required|numeric'" v-model.trim="smsbaseconfig.Port">
                                <span class="help-block">{{errors.first('smsPort')}}</span>
                            </div>
                        </div>
                        <div :class="['form-group' , {'has-error': errors.has('smsHost')}]" title="内部通信收流. 启用外网IP收流后, 此处配置信令服务可访问的局域网IP如：127.0.0.1">
                            <label class="col-sm-4 control-label">本地|内网 IP</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" placeholder="内部通信收流. 启用外网IP收流后, 此处配置信令服务可访问的局域网IP如：127.0.0.1" name="smsHost" data-vv-as="本地|内网 IP" v-validate="'required'" v-model.trim="smsbaseconfig.Host">
                                <span class="help-block">{{errors.first('smsHost')}}</span>
                            </div>
                        </div>
                        <div :class="['form-group' , {'has-error': errors.has('WanIP')}]">
                            <label class="col-sm-4 control-label">外网 IP(可选)</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="WanIP" data-vv-as="外网 IP" v-model.trim="smsbaseconfig.WanIP" placeholder="选填">
                                <span class="help-block">{{errors.first('WanIP')}}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">RTSP 端口(可选)</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="RTSPPort" data-vv-as="RTSP 端口" v-validate="'numeric'" v-model.trim="smsbaseconfig.RTSPPort" placeholder="选填">
                                <span class="help-block">{{errors.first('RTSPPort')}}</span>
                            </div>
                        </div>
                        <div :class="['form-group' , {'has-error': errors.has('RTMPPort')}]">
                            <label class="col-sm-4 control-label">RTMP 端口</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="RTMPPort" data-vv-as="RTMP 端口" v-validate="'required|numeric'" v-model.trim="smsbaseconfig.RTMPPort">
                                <span class="help-block">{{errors.first('RTMPPort')}}</span>
                            </div>
                        </div>
                        <div :class="['form-group' , {'has-error': errors.has('RecordDir')}]">
                            <label class="col-sm-4 control-label">云录像目录</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="RecordDir" data-vv-as="云录像目录" v-model.trim="smsbaseconfig.RecordDir">
                                <span class="help-block">{{errors.first('RecordDir')}}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">其他配置</label>
                            <div class="col-sm-7 checkbox">
                                <el-checkbox title="加快启播速度,相应也会增大一点延时" style="margin-left:-19px;margin-top:-5px;" size="small" v-model.trim="smsbaseconfig.GOPCache" name="GOPCache">直播秒开</el-checkbox>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <el-checkbox style="margin-left:-19px;margin-top:-5px;" size="small" v-model.trim="smsbaseconfig.HLS" name="HLS">HLS</el-checkbox>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <el-checkbox style="margin-left:-19px;margin-top:-5px;" size="small" v-model.trim="smsbaseconfig.SIPLog" name="SIPLog">信令日志</el-checkbox>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <el-checkbox style="margin-left:-19px;margin-top:-5px;" size="small" v-model.trim="smsbaseconfig.UseWanIPRecvStream" name="UseWanIPRecvStream">外网 IP 收流</el-checkbox>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-4 col-sm-7">
                                <button type="submit" class="btn btn-primary" :disabled="isSMSNoChange || errors.any() || bCommitting">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /.tab-content -->
        </div>
    </section>
</div>
</template>

<script>
import $ from "jquery";
import {
    mapState,
    mapActions
} from "vuex"

export default {
    data() {
        return {
            bCommitting: false,
            Serial: "",
            Realm: "",
            Host: "",
            Port: 0,
            DevicePassword: "",
            TimeServer: "",
            PreferStreamFmt: "",
            AckTimeout: 0,
            KeepaliveTimeout: 0,
            APIAuth: false,
            SIPLog: false,
            BlackIPList: "",
            BlackUAList: "",
            remoteBasicData: "",
            remoteSMSData: "",
            smsserial: "",
            smss: [],
            sms: {},
            smsbaseconfig: {},
            smstip: "流媒体服务尚未启动",
            HTTPSPort: "",
            HTTPSCertFile: "",
            HTTPSKeyFile: "",
        };
    },
    mounted() {
        this.getBaseConfig()
    },
    methods: {
        async onSubmit() {
            var ok = await this.$validator.validateAll();
            if (!ok) {
                var e = this.errors.items[0];
                this.$message({
                    type: "error",
                    message: e.msg
                });
                $(`[name=${e.field}]`).focus();
                return;
            }
            this.bCommitting = true;
            $.get("/api/v1/setbaseconfig", this.getBasicCommitObject()).then(data => {
                this.$message({
                    type: "success",
                    message: "配置成功！"
                });
            }).always(() => {
                this.getBaseConfig()
                this.bCommitting = false;
            })
        },
        async onSubmitSMS() {
            var ok = await this.$validator.validateAll();
            if (!ok) {
                var e = this.errors.items[0];
                this.$message({
                    type: "error",
                    message: e.msg
                });
                $(`[name=${e.field}]`).focus();
                return;
            }
            this.bCommitting = true;
            $.get("/api/v1/sms/setbaseconfig", this.smsbaseconfig).then(data => {
                this.$message({
                    type: "success",
                    message: "配置保存中,请稍后..."
                });
            }).always(() => {
                this.smstip = "配置保存中,请稍后..."
                this.smsserial = "";
                this.getSMSList()
                this.bCommitting = false;
            })
        },
        getBasicCommitObject() {
            return {
                Serial: this.Serial,
                Realm: this.Realm,
                Host: this.Host,
                Port: this.Port,
                DevicePassword: this.DevicePassword,
                TimeServer: this.TimeServer,
                PreferStreamFmt: this.PreferStreamFmt,
                AckTimeout: this.AckTimeout,
                KeepaliveTimeout: this.KeepaliveTimeout,
                APIAuth: this.APIAuth,
                SIPLog: this.SIPLog,
                BlackIPList: this.BlackIPList,
                BlackUAList: this.BlackUAList,
                HTTPSPort: this.HTTPSPort,
                HTTPSCertFile: this.HTTPSCertFile,
                HTTPSKeyFile: this.HTTPSKeyFile,
            };
        },
        getBaseConfig() {
            $.get("/api/v1/getbaseconfig").then(ret => {
                this.Serial = ret.Serial;
                this.Realm = ret.Realm;
                this.Host = ret.Host;
                this.Port = ret.Port;
                this.DevicePassword = ret.DevicePassword;
                this.TimeServer = ret.TimeServer;
                this.PreferStreamFmt = ret.PreferStreamFmt;
                this.AckTimeout = ret.AckTimeout;
                this.KeepaliveTimeout = ret.KeepaliveTimeout;
                this.APIAuth = ret.APIAuth;
                this.SIPLog = ret.SIPLog;
                this.BlackIPList = ret.BlackIPList;
                this.BlackUAList = ret.BlackUAList;
                this.HTTPSPort = ret.HTTPSPort || "";
                this.HTTPSCertFile = ret.HTTPSCertFile;
                this.HTTPSKeyFile = ret.HTTPSKeyFile;

                this.remoteBasicData = JSON.stringify(this.getBasicCommitObject());
            });
        },
        getSMSList() {
            if (this.smsserial == "") {
                $.get("/api/v1/sms/list").then(ret => {
                    this.smss = ret
                    if (ret.length > 0) {
                        this.sms = ret[0]
                        this.smsserial = ret[0].Serial
                    }
                    this.getSMSInfo();
                    if (this.smsserial == "") {
                        setTimeout(() => {
                            this.getSMSList()
                        }, 1000);
                    } else {
                        this.smstip = "流媒体服务尚未启动"
                    }
                })
            }
        },
        getSMSInfo() {
            if (this.smsserial != "") {
                $.get("/api/v1/sms/getbaseconfig", {
                    serial: this.smsserial
                }).then(ret => {
                    this.smsbaseconfig = ret;
                    this.smsbaseconfig["RTSPPort"] = this.smsbaseconfig["RTSPPort"] || "";
                    this.smsbaseconfig["RTMPPort"] = this.smsbaseconfig["RTMPPort"] || "";
                    this.smsbaseconfig["PreSerial"] = this.smsserial;
                    this.remoteSMSData = JSON.stringify(this.smsbaseconfig);
                })
            }
        },
        smschange() {
            this.getSMSInfo()
        }
    },
    computed: {
        ...mapState([
            "logoText",
            "logoMiniText",
            "menus",
            "serverInfo"
        ]),
        isBasicNoChange() {
            var localeData = JSON.stringify(this.getBasicCommitObject());
            return this.remoteBasicData.localeCompare(localeData) == 0;
        },
        isSMSNoChange() {
            this.smsbaseconfig["PreSerial"] = this.smsserial;
            var localeData = JSON.stringify(this.smsbaseconfig);
            return this.remoteSMSData.localeCompare(localeData) == 0;
        }
    }
};
</script>

<style lang="less" scoped>
.fa.cfg-black-list, .fa.cfg-white-list {
    font-size: 14px;
    line-height: 19px;
    display: inline-block;
    color: #606266;
}
</style>