<template>
|
<div class="s-system-manage">
|
<div class="s-basic-setting">
|
<el-tabs id="e-basic-setting" v-model="activeName" v-loading="loading" :element-loading-text="loadingText"
|
type="border-card" @tab-click="hanleTabClick">
|
<el-tab-pane label="国标ID" name="gb28181">
|
<div style="width: 775px">
|
<!-- GB28181设置 -->
|
<el-form :model="gb28181" :rules="rules" label-width="130px" class="alarmSetting" ref="gb28181">
|
|
<div style="text-align: left;margin-bottom: 16px;">
|
<!-- <el-radio-group v-model="gb28181.idType">
|
<el-radio :label="0">输入已有ID</el-radio>
|
<el-radio :label="1">生成新的ID</el-radio>
|
</el-radio-group> -->
|
</div>
|
|
<!-- <el-form-item label="所在地">
|
<el-select 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" 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 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>
|
<el-button type="text" style="position: absolute" v-show="gb28181.idType === 1"
|
@click="newGBID">生成ID</el-button>
|
</el-form-item> -->
|
|
|
|
<el-form-item label="SIP服务器ID">
|
<!-- <el-input v-model="gb28181.PublicId" placeholder="请输入" size="small"
|
:disabled="gb28181.idType === 1"></el-input> -->
|
<el-input v-model="gb28181.SipSerial" placeholder="请输入" size="small"
|
:disabled="true"></el-input>
|
</el-form-item>
|
|
<el-form-item label="SIP服务器域">
|
<el-input v-model.number="gb28181.SipRealm" placeholder="请输入" :disabled="true"
|
size="small"></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="SIP服务器地址">
|
<el-input v-model="gb28181.SipHost" placeholder="请输入" size="small"
|
:disabled="!gb28181.IsAuth"></el-input>
|
</el-form-item>
|
<el-form-item label="SIP服务器端口">
|
<el-input v-model="gb28181.SipPort" placeholder="请输入" size="small"
|
:disabled="true"></el-input>
|
</el-form-item>
|
|
<el-form-item style="float: right">
|
<!-- <el-button type="primary" @click="submitGB28281" size="small">保存</el-button> -->
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-tab-pane>
|
|
<el-tab-pane label="接入平台列表" name="subordinates">
|
<el-table :data="subDevTable" border fit highlight-current-row style="width: 100%; color:#000"
|
:header-cell-style="{ background: '#f8f8f8', color: '#222222', height: '30px' }">
|
<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
|
<el-table-column prop="name" label="名称" align="center"></el-table-column>
|
<el-table-column prop="publicid" label="ID" align="center"></el-table-column>
|
<el-table-column prop="corp" label="端口" align="center"></el-table-column>
|
<el-table-column prop="ip" label="IP" align="center"></el-table-column>
|
<el-table-column prop="status" label="状态" align="center">
|
<template slot-scope="scope">
|
<span :style="scope.row.alive ? `color:#047d19` : 'color:#f11a1a;'">{{
|
scope.row.alive ? "在线" : "离线"
|
}}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
<el-tab-pane label="国标摄像机" name="cameras">
|
<div style="text-align:left">
|
<el-button type="primary" size="small" @click="updateCamerasFromVideosvr">刷新</el-button>
|
</div>
|
<div class="camera-title">
|
<b>国标摄像机配置</b>
|
<span>(最多勾选500路摄像机)</span>
|
</div>
|
<tree-menu ref="tree" app="gb28181" treeName="localTree" :node="treeData" :height="treeHeight" @cehckDataUpload="handleParentMethod"
|
:setting="treeSettings" style="width:600px;min-height:500px" />
|
<!-- <div class="base-image" >
|
<span>{{ 0 }}</span>
|
<div class="camera-image">
|
<!– <img :src="'data:image/png;base64,' + TreeDataPool?.gb28181CameraBaseImage" width="450px"
|
alt /> –>
|
</div>
|
</div>-->
|
<el-divider></el-divider>
|
|
<span class="camera-seleted-text">
|
已选择 (
|
<b>{{checkData}}</b>
|
/ {{ totalNode}} ) 路
|
</span>
|
|
<el-button type="primary" size="small" @click="saveChecked">保存</el-button>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import gb28181 from "@/api/gb28181"
|
|
import TreeMenu from "../components/gbZtree.vue"
|
// import TreeMenu from "@/components/giantTree/index"
|
import { isPort, isIPv4 } from "@/scripts/validate"
|
import bus from "@/plugin/bus"
|
export default {
|
name: "Gb28181Setting",
|
components: {
|
TreeMenu
|
},
|
directives: {
|
focus: {
|
inserted: function (el) {
|
el.querySelector("input").focus()
|
}
|
}
|
},
|
data() {
|
return {
|
totalNode:0,
|
checkData:0,
|
treeData: [{
|
id: 1,
|
label: 'N332',
|
type: 'folder',
|
children: [{
|
id: 11,
|
label: 'N332_1',
|
type: 'folder',
|
children: [{
|
id: 111,
|
label: 'N332_1_1',
|
type: 'folder',
|
children: []
|
}, {
|
id: 112,
|
label: 'N332_1_2',
|
type: 'folder',
|
children: []
|
},]
|
}]
|
},
|
{
|
id: 2,
|
label: '摄像机',
|
type: 'camera',
|
data: {
|
rtspAddress: 'http://*******',
|
deviceName: '摄像机',
|
deviceAddress: '机房',
|
videoType: "1",
|
lngLat: ''
|
}
|
}],
|
activeName: "gb28181",
|
treeHeight: 750,
|
loading: false,
|
loadingText: "",
|
openeds: ["0"],
|
gb28181: {},
|
subDevTable: [],
|
idType: 1,
|
treeSettings: {
|
check: {
|
enable: true
|
}
|
},
|
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: []
|
}
|
}
|
},
|
mounted() {
|
// this.TreeDataPool.multiple = true
|
|
// 记录目录是否折叠
|
// let foldList = localStorage.getItem("ztree_fold_list")
|
// if (foldList) {
|
// this.TreeDataPool.foldNodeList = JSON.parse(foldList)
|
// }
|
|
// this.initGB28181Conf()
|
this.newGBID()
|
},
|
methods: {
|
handleParentMethod(checkCount){
|
this.checkData = checkCount
|
// console.info(checkCount)
|
},
|
async getCamerasFromVideosvr() {
|
// console.info(this.TreeDataPool)
|
this.loading = true
|
await this.fetchVideosvrCameras()
|
this.loading = false
|
},
|
hanleTabClick(tab, event) {
|
console.info("activeName:" + this.activeName)
|
if (this.activeName == "subordinates") {
|
gb28181.getAllSubServer().then((rsp) => {
|
if (rsp && rsp.status == 200) {
|
const results = rsp.data.map(item => {
|
return {
|
publicid: item.ID,
|
name: item.Name,
|
ip: item.RemoteIP,
|
corp: item.RemotePort,
|
alive: item.Online,
|
};
|
});
|
this.subDevTable = results;
|
// console.info("data:" + JSON.stringify(rsp.data))
|
}
|
})
|
} else if (this.activeName == "cameras") {
|
this.getCamerasFromVideosvr()
|
} else {
|
gb28181.newGb28181ID().then((rsp) => {
|
if (rsp && rsp.status == 200) {
|
this.gb28181 = rsp.data;
|
// console.info("data:" + JSON.stringify(rsp.data))
|
}
|
})
|
|
}
|
},
|
changeProvince() {
|
let pid = this.locationCity.province
|
// getGb28181AreaList({ parentId: pid }).then((rsp) => {
|
// if (rsp && rsp.success) {
|
// this.locationCity.cityOptions = rsp.data
|
// 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
|
// this.locationCity.county = this.locationCity.countyOptions[0].id
|
// }
|
// console.log(this.locationCity.county)
|
// })
|
},
|
newGBID() {
|
// console.log(this.locationCity.county)
|
// console.log(this.locationCity.countyOptions)
|
gb28181.newGb28181ID().then((rsp) => {
|
if (rsp && rsp.status == 200) {
|
this.gb28181 = rsp.data;
|
// console.info("data:" + JSON.stringify(rsp.data))
|
}
|
})
|
},
|
submitGB28281() {
|
this.$refs["gb28181"].validate((valid) => {
|
if (valid) {
|
// saveGB28181Config(this.gb28181).then((rsp) => {
|
// if (rsp && rsp.success) {
|
// this.$notify({
|
// type: "success",
|
// message: "GB28181设置保存成功"
|
// })
|
// }
|
// })
|
} else {
|
console.log("error submit!!")
|
return false
|
}
|
})
|
},
|
async updateCamerasFromVideosvr() {
|
this.loading = true
|
await this.fetchVideosvrCameras()
|
this.loading = false
|
},
|
async fetchVideosvrCameras() {
|
gb28181.getGb28181Pool().then((rsp) => {
|
if (rsp && rsp.status == 200) {
|
// console.log("treeData:",rsp.data.items)
|
this.treeData = rsp.data.items;
|
this.totalNode = rsp.data.total;
|
}
|
// console.log("treeData:",this.treeData)
|
})
|
},
|
saveChecked() {
|
const keys = this.$refs.tree.getResults();
|
console.info(JSON.stringify(keys))
|
if (this.checkData ==0) {
|
this.$message({
|
type: "warning",
|
message: "请选择摄像机，再进行保存"
|
})
|
return
|
}
|
if (this.checkData > 500) {
|
this.$message({
|
type: "warning",
|
message: "最多仅支持选择500路摄像机. 请重新选择"
|
})
|
return
|
}
|
|
|
|
gb28181.saveGb28181CamTree(keys)
|
.then((rsp) => {
|
if (rsp && rsp.status == 200) {
|
this.$message({
|
type: "success",
|
message: "保存成功"
|
})
|
}
|
this.loading = false
|
})
|
.catch((err) => {
|
this.$message({
|
type: "error",
|
message: "保存失败"
|
})
|
this.loading = false
|
})
|
},
|
}
|
}
|
</script>
|
<style lang="scss">
|
.s-system-manage {
|
width: 100% !important;
|
min-width: 1067px;
|
height: 100%;
|
box-sizing: border-box;
|
padding: 10px;
|
background-color: #f8f9fb;
|
|
.s-system-manage-breadcrumb {
|
height: 5%;
|
box-sizing: border-box;
|
border: 1px solid #e4e7ed;
|
box-shadow: #e4e7ed 0px 0px 9px inset;
|
box-shadow: #e4e7ed 0px 0px 9px inset;
|
border-radius: 5px;
|
}
|
|
.el-tabs--border-card {
|
border: 0px solid #dcdfe6;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
|
.el-tabs__header {
|
border: 0px solid #dcdfe6;
|
|
.el-tabs__item {
|
padding: 5px 50px;
|
height: 50px;
|
font-family: PingFangSC-Regular;
|
font-size: 15px;
|
color: #222222;
|
text-align: center;
|
border: 0px solid transparent;
|
}
|
|
.el-tabs__item:nth-child(2) {
|
padding-left: 50px !important;
|
}
|
|
.el-tabs__item:last-child {
|
padding-right: 50px !important;
|
}
|
|
.el-tabs__item.is-active {
|
color: #3d68e1;
|
|
// border-right-color: #fff;
|
// border-left-color: #fff;
|
}
|
|
.el-tabs__item:not(.is-disabled):hover {
|
color: #3d68e1;
|
}
|
}
|
}
|
|
.el-tabs__header {
|
margin-bottom: 0;
|
}
|
|
.el-tabs__content {
|
height: calc(100% - 64px);
|
box-sizing: border-box;
|
overflow-y: auto;
|
padding: 20px 40px !important;
|
background: #fff;
|
|
.el-tab-pane {
|
width: 100%;
|
|
.s-title {
|
text-align: left;
|
padding: 15px 0px;
|
font-size: 16px;
|
}
|
}
|
}
|
|
.s-table {
|
border: 1px solid #e8e8e9;
|
margin-top: 40px;
|
}
|
|
.ui-top-title {
|
padding-bottom: 10px;
|
/* border-bottom: 1px solid #ebebeb; */
|
position: relative;
|
text-align: left;
|
padding-left: 15px;
|
font-size: 16px;
|
font-weight: bold;
|
}
|
|
.ui-top-title:before {
|
content: " ";
|
border-left: 4px solid #f53d3d;
|
display: inline-block;
|
height: 16px;
|
position: absolute;
|
top: 50%;
|
left: 0;
|
margin-top: -13px;
|
}
|
|
.el-button--text {
|
color: #3d68e1;
|
text-decoration: underline;
|
}
|
|
.camera-title {
|
text-align: left;
|
padding: 0px 10px;
|
margin: 5px 0px;
|
height: 33px;
|
background-color: #e4e2e2;
|
line-height: 33px;
|
font-size: 14px;
|
}
|
|
.camera-seleted-text {
|
margin-right: 20px;
|
|
.b {
|
color: #3d68e1;
|
}
|
}
|
|
.base-image {
|
position: absolute;
|
top: 18%;
|
left: 57%;
|
width: 450px;
|
|
.camera-image {
|
background-color: black;
|
height: 254px;
|
}
|
}
|
}
|
</style>
|
