<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"
|
>
|
<!-- <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="camera-title">
|
<b>国标摄像机配置</b>
|
<span>(最多勾选500路摄像机)</span>
|
</div>
|
<tree-menu
|
ref="tree"
|
app="gb28181"
|
treeName="localTree"
|
:node="TreeDataPool.treeData"
|
:height="treeHeight"
|
:setting="treeSettings"
|
clickType="multiple"
|
style="width: 600px; min-height: 500px"
|
/>
|
<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>
|
<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 bus from "@/plugin/bus";
|
export default {
|
name: "Gb28181Setting",
|
components: {
|
TreeMenu,
|
},
|
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,
|
},
|
view: {
|
showLine: true,
|
showIcon: true, // default to hide icon
|
},
|
},
|
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();
|
},
|
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();
|
}
|
},
|
async getCamerasFromVideosvr() {
|
this.loading = true;
|
await this.TreeDataPool.fetchVideosvrCameras(false);
|
this.loading = false;
|
},
|
async updateCamerasFromVideosvr() {
|
this.loading = true;
|
await this.TreeDataPool.fetchVideosvrCameras(true);
|
this.loading = false;
|
},
|
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-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>
|
