<template>
|
<div class="FormArea">
|
<el-form
|
:model="gb28181"
|
:rules="rules"
|
label-position="left"
|
label-width="90px"
|
class="alarmSetting"
|
ref="gb28181"
|
>
|
<el-radio-group v-model="gb28181.idType">
|
<el-radio :label="0">输入已有ID</el-radio>
|
<el-radio :label="1">生成新的ID</el-radio>
|
</el-radio-group>
|
|
<el-form-item class="selectItem" label="所在地">
|
<el-select
|
class="h32"
|
v-model="locationCity.province"
|
@change="changeProvince"
|
size="small"
|
placeholder="请选择省份"
|
:disabled="gb28181.idType === 0"
|
>
|
<el-option
|
v-for="item in locationCity.provinceOptions"
|
:key="item.id"
|
:label="item.name"
|
size="small"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
<el-select
|
class="ml10 mr10 h32"
|
v-model="locationCity.city"
|
:disabled="!locationCity.province"
|
@change="changeCity"
|
size="small"
|
placeholder="请选择城市"
|
>
|
<el-option
|
v-for="item in locationCity.cityOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
<el-select
|
class="h32"
|
v-model="locationCity.county"
|
:disabled="!locationCity.city"
|
size="small"
|
placeholder="请选择区县"
|
>
|
<el-option
|
v-for="item in locationCity.countyOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
<div class="button" v-show="gb28181.idType === 1" @click="newGBID">
|
生成ID
|
</div>
|
</el-form-item>
|
|
<el-form-item label="国标ID">
|
<el-input
|
class="h32"
|
v-model="gb28181.PublicId"
|
placeholder="请输入"
|
size="small"
|
:disabled="gb28181.idType === 1"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="国标端口" prop="GbServerPort">
|
<el-input
|
class="h32"
|
v-model.number="gb28181.GbServerPort"
|
placeholder="请输入"
|
size="small"
|
style="width: 200px"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="开启鉴权" style="text-align: left">
|
<el-switch v-model="gb28181.IsAuth"></el-switch>
|
</el-form-item>
|
|
<el-form-item label="鉴权密码">
|
<el-input
|
class="h32"
|
v-model="gb28181.Password"
|
placeholder="请输入"
|
size="small"
|
:disabled="!gb28181.IsAuth"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
|
<div class="btnArea">
|
<div class="button cancel" @click="$emit('close')">取消</div>
|
<div class="button submit" @click="submitGB28281">保存</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getGB28181Config,
|
saveGB28181Config,
|
getGb28181AreaList,
|
newGb28181ID,
|
} from "@/api/Gb28181";
|
import { isPort, isIPv4 } from "@/scripts/validate";
|
|
export default {
|
props: {
|
id: {},
|
},
|
created() {
|
this.initGB28181Conf();
|
},
|
data() {
|
return {
|
gb28181: {},
|
rules: {
|
ip: [
|
{
|
required: true,
|
message: "请输入IP地址",
|
trigger: "change",
|
},
|
{ validator: isIPv4, trigger: "change" },
|
],
|
ServerIp: [
|
{
|
required: true,
|
message: "请输入IP地址",
|
trigger: "change",
|
},
|
{ validator: isIPv4, trigger: "change" },
|
],
|
ServerPort: [
|
{
|
required: true,
|
message: "请输入端口",
|
trigger: "change",
|
},
|
{ validator: isPort, trigger: "change" },
|
],
|
GbServerPort: [
|
{
|
required: true,
|
message: "请输入端口",
|
trigger: "change",
|
},
|
{ validator: isPort, trigger: "change" },
|
],
|
},
|
locationCity: {
|
province: "",
|
city: "",
|
county: "",
|
provinceOptions: [],
|
cityOptions: [],
|
countyOptions: [],
|
},
|
};
|
},
|
methods: {
|
initGB28181Conf() {
|
getGB28181Config(this.id).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.gb28181 = rsp.data;
|
//this.gb28181.idType = 0;
|
|
this.$set(this.gb28181, "idType", 0);
|
this.$refs["gb28181"].resetFields();
|
}
|
});
|
getGb28181AreaList().then((rsp) => {
|
if (rsp && rsp.success) {
|
this.locationCity.provinceOptions = rsp.data.list;
|
}
|
});
|
},
|
submitGB28281() {
|
this.$refs["gb28181"].validate((valid) => {
|
if (valid) {
|
saveGB28181Config(this.gb28181).then((rsp) => {
|
if (rsp && rsp.success) {
|
console.log("1212112");
|
this.$notify({
|
type: "success",
|
message: "GB28181设置保存成功",
|
});
|
}
|
});
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
changeProvince() {
|
let pid = this.locationCity.province;
|
getGb28181AreaList({ parentId: pid }).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.locationCity.cityOptions = rsp.data.list;
|
this.locationCity.city = this.locationCity.cityOptions[0].id;
|
this.changeCity();
|
}
|
});
|
},
|
changeCity() {
|
let pid = this.locationCity.city;
|
getGb28181AreaList({ parentId: pid }).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.locationCity.countyOptions = rsp.data.list;
|
this.locationCity.county = this.locationCity.countyOptions[0].id;
|
}
|
});
|
},
|
newGBID() {
|
let cCode = this.locationCity.county + "";
|
newGb28181ID({ code: cCode }).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.gb28181.PublicId = rsp.data.code;
|
}
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped >
|
.FormArea {
|
position: relative;
|
height: 565px;
|
.el-form {
|
padding: 20px;
|
padding-top: 34px;
|
|
.el-form-item {
|
margin-bottom: 34px;
|
}
|
|
.h32 {
|
border-radius: 3px;
|
|
::v-deep input {
|
border-radius: 3px;
|
border-color: #c0c5cc;
|
}
|
}
|
|
.el-input {
|
width: 410px;
|
}
|
|
.el-radio-group {
|
margin-bottom: 34px;
|
|
::v-deep .el-radio__label {
|
color: #3d3d3d;
|
}
|
}
|
|
.selectItem ::v-deep {
|
.el-form-item__content {
|
display: flex;
|
|
.el-select {
|
margin-right: 10px;
|
width: 200px;
|
}
|
|
.button {
|
margin-left: 10px;
|
line-height: 32px;
|
color: #0065ff;
|
}
|
}
|
}
|
}
|
|
.el-form-item.is-required {
|
::v-deep .el-form-item__label:before {
|
display: none;
|
}
|
|
::v-deep .el-form-item__label::after {
|
content: "*";
|
color: #f52323;
|
margin-right: 4px;
|
}
|
}
|
|
.btnArea {
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 20px 0;
|
border-top: 1px solid #e9ebee;
|
display: flex;
|
justify-content: flex-end;
|
text-align: center;
|
|
.cancel {
|
margin-right: 10px;
|
padding: 6px 16px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
}
|
|
.submit {
|
padding: 6px 16px;
|
border: 1px solid #0065ff;
|
color: #fff;
|
background-color: #0065ff;
|
}
|
}
|
}
|
</style>
|
