<template>
|
<div class="FormArea">
|
<el-form
|
:model="gb28181"
|
:rules="rules"
|
label-position="left"
|
label-width="90px"
|
class="alarmSetting"
|
ref="gb28181"
|
>
|
<el-form-item class="selectItem" label="事件名称">
|
<el-select class="h32" v-model="locationCity.province" size="small" placeholder="请选择事件">
|
<el-option
|
v-for="item in eventsOptions"
|
:key="item.value"
|
:label="item.label"
|
size="small"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="selectItem" label="事件等级">
|
<el-select
|
class="h32"
|
v-model="locationCity.level"
|
size="small"
|
placeholder="请选择"
|
:disabled="gb28181.idType === 0"
|
>
|
<el-option
|
v-for="item in levelOptions"
|
:key="item.value"
|
:label="item.label"
|
size="small"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="关联区域">
|
<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="手机号" 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="推送方式">
|
<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: []
|
},
|
eventsOptions: [
|
{ value: "fire", label: "明 火" },
|
{ value: "smoke", label: "烟 雾" },
|
{ value: "work", label: "未穿工服" },
|
{ value: "head", label: "未戴安全帽" },
|
{ value: "dowork", label: "离岗" },
|
{ value: "juji", label: "人员聚集" }
|
],
|
levelOptions: [
|
{ value: "1", label: "一级" },
|
{ value: "2", label: "二级" },
|
{ value: "3", label: "三级" },
|
{ value: "4", label: "四级" },
|
{ value: "5", label: "五级" }
|
]
|
}
|
},
|
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>
|
