<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="国标服务" name="gb28181">
|
<div style="width: 775px">
|
<!-- GB28181设置 -->
|
<el-form :model="gb28181" :rules="rules" label-width="130px" class="alarmSetting" ref="gb28181">
|
<!-- <el-form-item label="国际服务器IP" prop="ServerIp">
|
<ip-input :ip="gb28181.ServerIp" @on-blur="gb28181.ServerIp = arguments[0]"></ip-input>
|
</el-form-item>-->
|
|
<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="国际服务器端口" prop="GbServerPort">
|
<el-input v-model.number="gb28181.ServerPort" placeholder="请输入" size="small"></el-input>
|
</el-form-item>-->
|
|
<el-form-item label="国标ID">
|
<el-input
|
v-model="gb28181.PublicId"
|
placeholder="请输入"
|
size="small"
|
:disabled="gb28181.idType === 1"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="国标端口" prop="GbServerPort">
|
<el-input v-model.number="gb28181.GbServerPort" placeholder="请输入" 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="鉴权密码">
|
<el-input
|
v-model="gb28181.Password"
|
placeholder="请输入"
|
size="small"
|
:disabled="!gb28181.IsAuth"
|
></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="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-column prop="corp" label="备注" align="center"></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="tree-container">
|
<div class="tree-box">
|
<div class="camera-title">
|
<b>国标摄像机</b>
|
</div>
|
<tree-menu
|
ref="ztree"
|
app="gb28181"
|
treeName="localTree"
|
clickType="multiple"
|
:node="TreeDataPool.treeData"
|
:height="treeHeight"
|
:setting="treeSettings"
|
@itemChecked="onItemCheck"
|
search
|
style="width:500px;min-height:500px"
|
/>
|
</div>
|
|
<div class="tree-box">
|
<div class="camera-title">
|
<b>已选摄像机</b>
|
<span>(最多勾选500路摄像机)</span>
|
</div>
|
<!-- <tree-menu
|
ref="dstTree"
|
treeName="localTree"
|
:node="dstTreeData"
|
:height="treeHeight"
|
:setting="treeSettingsSelect"
|
style="width:500px;min-height:500px"
|
/> -->
|
<div class="select-tree-menu" :style="`max-height:${750 - 200}px;`">
|
<z-tree :nodes="dstTreeData" :show-checkbox="false" :gb28181="true" search />
|
</div>
|
</div>
|
|
<div class="base-image" v-loading="TreeDataPool.baseImageLoading">
|
<span>{{ TreeDataPool.cameraNameForBaseImage }}</span>
|
<div class="camera-image" v-show="TreeDataPool.cameraNameForBaseImage.length">
|
<img :src="'data:image/png;base64,' + TreeDataPool.gb28181CameraBaseImage" width="450px" alt />
|
</div>
|
</div>
|
</div>
|
|
<el-divider></el-divider>
|
|
<span class="camera-seleted-text">
|
已选择 (
|
<b>{{ TreeDataPool.gb28181CheckedCount }}</b>
|
/ {{ TreeDataPool.gb28181ChildNodeCount }} ) 路
|
</span>
|
|
<el-button type="primary" size="small" @click="saveChecked">保存</el-button>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getGB28181Config,
|
saveGB28181Config,
|
getGb28181AreaList,
|
newGb28181ID,
|
getAllSubServer,
|
saveGb28181CamTree
|
} from "./api"
|
|
import TreeMenu from "@/components/giantTree/index"
|
import { isPort, isIPv4 } from "@/scripts/validate"
|
import ZTree from "@/components/giantTree/zTree/ztree"
|
|
export default {
|
name: "Gb28181Setting",
|
components: {
|
TreeMenu,
|
ZTree
|
},
|
directives: {
|
focus: {
|
inserted: function(el) {
|
el.querySelector("input").focus()
|
}
|
}
|
},
|
|
data() {
|
return {
|
activeName: "gb28181",
|
treeHeight: 750,
|
loading: false,
|
loadingText: "",
|
openeds: ["0"],
|
gb28181: {},
|
subDevTable: [],
|
idType: 1,
|
treeSettings: {
|
check: {
|
enable: true
|
}
|
},
|
treeSettingsSelect: {
|
check: {
|
enable: false
|
}
|
},
|
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: []
|
},
|
dstTreeData: []
|
}
|
},
|
mounted() {
|
this.TreeDataPool.multiple = true
|
|
// 记录目录是否折叠
|
let foldList = localStorage.getItem("ztree_fold_list")
|
if (foldList) {
|
this.TreeDataPool.foldNodeList = JSON.parse(foldList)
|
}
|
|
this.initGB28181Conf()
|
},
|
methods: {
|
hanleTabClick(tab, event) {
|
if (this.activeName == "subordinates") {
|
getAllSubServer().then((rsp) => {
|
if (rsp && rsp.success) {
|
this.subDevTable = rsp.data
|
}
|
})
|
} else if (this.activeName == "cameras") {
|
this.getCamerasFromVideosvr()
|
}
|
|
// this.TreeDataPool.fetchGbTree()
|
// this.dstTreeData = this.TreeDataPool.gb28181Data
|
},
|
async getCamerasFromVideosvr() {
|
this.loading = true
|
await this.TreeDataPool.fetchVideosvrCameras(false)
|
this.dstTreeData = this.TreeDataPool.newTreeByChecked(this.TreeDataPool.treeData)
|
this.loading = false
|
},
|
async updateCamerasFromVideosvr() {
|
this.loading = true
|
await this.TreeDataPool.fetchVideosvrCameras(true)
|
this.loading = false
|
},
|
onItemCheck() {
|
this.dstTreeData = this.TreeDataPool.newTreeByChecked(this.TreeDataPool.activeTreeData)
|
},
|
saveChecked() {
|
localStorage.setItem("ztree_fold_list", JSON.stringify(this.TreeDataPool.foldNodeList))
|
|
if (this.TreeDataPool.gb28181CheckedCount > 500) {
|
this.$message({
|
type: "warning",
|
message: "最多仅支持选择500路摄像机. 请重新选择"
|
})
|
|
return
|
}
|
|
this.loading = true
|
|
let treeData = this.TreeDataPool.newTreeByChecked(this.TreeDataPool.activeTreeData)
|
|
saveGb28181CamTree({ checkedMenus: treeData })
|
.then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$message({
|
type: "success",
|
message: "保存成功"
|
})
|
}
|
this.loading = false
|
})
|
.catch((err) => {
|
this.$message({
|
type: "error",
|
message: "保存失败"
|
})
|
this.loading = false
|
})
|
},
|
initGB28181Conf() {
|
getGB28181Config().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
|
}
|
})
|
},
|
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
|
}
|
})
|
},
|
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
|
}
|
})
|
},
|
newGBID() {
|
let cCode = this.locationCity.county + ""
|
newGb28181ID({ code: cCode }).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.gb28181.PublicId = rsp.data
|
}
|
})
|
},
|
menuOpen() {},
|
menuClose() {},
|
toOpenMenuList(e) {
|
let t = e.clientY - this.$el.offsetTop + 30
|
let l = e.clientX - this.$el.offsetLeft
|
|
window.parent.postMessage(
|
{
|
source: location.href.split("/")[location.href.split("/").length - 1],
|
trigger: "contextmenu",
|
menuT: t,
|
menuL: l
|
},
|
"*"
|
)
|
return 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-seleted-text {
|
margin-right: 20px;
|
|
.b {
|
color: #3d68e1;
|
}
|
}
|
|
.tree-container {
|
display: flex;
|
.tree-box {
|
width: 500px;
|
margin: 5px 10px 0px 0px;
|
border: 1px solid #e4e2e2;
|
|
.camera-title {
|
text-align: left;
|
padding: 0px 10px;
|
margin: 0px 0px;
|
height: 33px;
|
background-color: #e4e2e2;
|
line-height: 33px;
|
font-size: 14px;
|
}
|
}
|
|
.base-image {
|
margin: 140px 10px;
|
width: 450px;
|
height: 300px;
|
|
.camera-image {
|
background-color: black;
|
height: 254px;
|
}
|
}
|
.select-tree-menu {
|
// max-width: 350px;
|
overflow-x: hidden;
|
overflow-y: hidden;
|
margin-bottom: 4px;
|
}
|
.select-tree-menu::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
|
height: 4px;
|
}
|
.select-tree-menu::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
|
background: rgb(202, 201, 201);
|
}
|
.select-tree-menu::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
-webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
|
border-radius: 0;
|
background: rgb(235, 234, 234);
|
}
|
.select-tree-menu::-webkit-scrollbar-thumb:hover {
|
background: rgba(0, 0, 0, 0.4);
|
}
|
.select-tree-menu:hover {
|
overflow-x: visible;
|
overflow-y: auto;
|
margin-bottom: 0px;
|
}
|
}
|
}
|
</style>
|
