| | |
| | | <template> |
| | | <div class="s-basic-setting" @contextmenu.prevent="toOpenMenuList"> |
| | | <el-menu |
| | | :default-openeds="openeds" |
| | | background-color="#fff" |
| | | text-color="#303133" |
| | | active-text-color="#409EFF" |
| | | style="height: 100%;" |
| | | class="menu-css" |
| | | @open="menuOpen" |
| | | @close="menuClose" |
| | | > |
| | | <el-submenu index="0"> |
| | | <template slot="title"> |
| | | <b class="tree-font">国际ID</b> |
| | | </template> |
| | | <el-menu-item-group class="item-group"> |
| | | <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"> |
| | | <!-- GB28181设置 --> |
| | | <el-form |
| | | :model="gb28181" |
| | |
| | | <el-button type="primary" @click="submitGB28281" size="small">保存</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-menu-item-group> |
| | | </el-submenu> |
| | | <el-submenu index="1"> |
| | | <template slot="title"> |
| | | <b class="tree-font">接入平台列表</b> |
| | | </template> |
| | | <el-menu-item-group class="item-group"> |
| | | <div> |
| | | <el-table |
| | | :data="tableList" |
| | | 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="id" 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"></el-table-column> |
| | | <el-table-column prop="mark" label="备注" align="center"></el-table-column> |
| | | </el-table> |
| | | </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.active ? `color:#047d19` : 'color:#f11a1a;' " |
| | | >{{scope.row.active ? "在线": "离线"}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="mark" 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="getCamerasFromVideosvr">刷新</el-button> |
| | | </div> |
| | | </el-menu-item-group> |
| | | </el-submenu> |
| | | <el-submenu index="2"> |
| | | <template slot="title"> |
| | | <b class="tree-font">国际摄像机</b> |
| | | </template> |
| | | <el-menu-item-group class="item-group"> |
| | | <div> |
| | | <div> |
| | | <el-button type="primary" size="small">刷新</el-button> |
| | | </div> |
| | | <div class="camera-title"> |
| | | <b>国标摄像机配置</b> |
| | | <span>(最多勾选500路摄像机)</span> |
| | | </div> |
| | | </el-menu-item-group> |
| | | </el-submenu> |
| | | </el-menu> |
| | | <tree-menu |
| | | ref="tree" |
| | | app="gb28181" |
| | | treeName="localTree" |
| | | :node="TreeDataPool.treeData" |
| | | :height="treeHeight" |
| | | :setting="treeSettings" |
| | | /> |
| | | |
| | | <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> |
| | | |
| | |
| | | getGB28181Config, |
| | | saveGB28181Config, |
| | | getGb28181AreaList, |
| | | newGb28181ID |
| | | newGb28181ID, |
| | | getLocalCameraTree, |
| | | 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) { |
| | |
| | | |
| | | data() { |
| | | return { |
| | | activeName: "gb28181", |
| | | treeHeight: 750, |
| | | loading: false, |
| | | loadingText: "", |
| | | openeds: ['0'], |
| | | gb28181: {}, |
| | | tableList: [], |
| | | subDevTable: [], |
| | | idType: 1, |
| | | treeSettings: { |
| | | check: { |
| | | enable: true |
| | | } |
| | | }, |
| | | rules: { |
| | | ip: [ |
| | | { |
| | |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.TreeDataPool.multiple = true; |
| | | |
| | | //this.$nextTick(()=>{ |
| | | this.initGB28181Conf() |
| | | //}) |
| | | 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(); |
| | | this.loading = false; |
| | | }, |
| | | saveChecked() { |
| | | 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) { |
| | |
| | | } |
| | | </script> |
| | | <style lang="scss"> |
| | | .s-basic-setting { |
| | | .s-system-manage { |
| | | width: 100% !important; |
| | | min-width: 1067px; |
| | | height: 100%; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | .item-group { |
| | | padding: 0 15px; |
| | | margin-bottom: 15px; |
| | | } |
| | | .el-form { |
| | | .el-form-item { |
| | | text-align: left; |
| | | margin-bottom: 16px; |
| | | &:last-of-type { |
| | | width: 490px; |
| | | } |
| | | .el-button { |
| | | float: right; |
| | | } |
| | | .el-select { |
| | | margin-right: 10px; |
| | | } |
| | | .el-form-item__content { |
| | | text-align: left; |
| | | input { |
| | | max-width: 360px; |
| | | } |
| | | .el-date-editor.el-input, |
| | | .el-date-editor.el-input__inner { |
| | | width: 216px; |
| | | } |
| | | .el-checkbox__label { |
| | | padding-left: 5px; |
| | | } |
| | | } |
| | | |
| | | .el-form-item__label { |
| | | text-align: left; |
| | | } |
| | | &.el-form-item.is-required:not(.is-no-asterisk) |
| | | > .el-form-item__label:before { |
| | | margin-left: -9px; |
| | | } |
| | | } |
| | | } |
| | | .alarmSetting { |
| | | .el-input { |
| | | width: 100%; |
| | | // padding-right: 10px; |
| | | } |
| | | .el-select { |
| | | max-width: 113px; |
| | | } |
| | | .el-slider { |
| | | width: calc(100% - 120px); |
| | | display: inline-block; |
| | | padding-right: 30px; |
| | | box-sizing: border-box; |
| | | vertical-align: middle; |
| | | } |
| | | .el-input-number { |
| | | width: 100px; |
| | | display: inline-block; |
| | | .el-input { |
| | | width: 100%; |
| | | } |
| | | } |
| | | 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; |
| | | } |
| | | |
| | | .time-type { |
| | | height: 25px; |
| | | width: 413px; |
| | | line-height: 28px; |
| | | padding: 3px 23px; |
| | | font-size: 14px; |
| | | font-weight: 600; |
| | | background-color: #e4e6ed; |
| | | } |
| | | #e-basic-setting { |
| | | .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: 14px; |
| | | font-size: 15px; |
| | | color: #222222; |
| | | text-align: center; |
| | | border: 0px solid transparent; |
| | | } |
| | | .el-tabs__item:nth-child(2) { |
| | | padding-left: 50px; |
| | | padding-left: 50px !important; |
| | | } |
| | | .el-tabs__item:last-child { |
| | | padding-right: 50px; |
| | | padding-right: 50px !important; |
| | | } |
| | | .el-tabs__item.is-active { |
| | | color: #ff7733; |
| | | font-weight: bold; |
| | | color: #3d68e1; |
| | | |
| | | // border-right-color: #fff; |
| | | // border-left-color: #fff; |
| | | } |
| | | .el-tabs__item:not(.is-disabled):hover { |
| | | color: #ff7733; |
| | | } |
| | | } |
| | | .el-tabs__active-bar { |
| | | background-color: #ff7733; |
| | | } |
| | | .xiangqin-label { |
| | | text-align: left; |
| | | width: 85px; |
| | | font-size: 14px; |
| | | line-height: 30px; |
| | | } |
| | | .xiangqing-info { |
| | | text-align: left; |
| | | font-size: 14px; |
| | | line-height: 30px; |
| | | } |
| | | } |
| | | |
| | | #cut_min_duration { |
| | | .el-slider__bar { |
| | | background-color: #3d68e1; |
| | | } |
| | | .el-slider__button { |
| | | width: 10px; |
| | | height: 10px; |
| | | border: 4px solid #3d68e1; |
| | | } |
| | | } |
| | | |
| | | #cut_max_duration { |
| | | .el-slider__bar { |
| | | background-color: #ff9e6e; |
| | | } |
| | | .el-slider__button { |
| | | width: 10px; |
| | | height: 10px; |
| | | border: 4px solid #ff9e6e; |
| | | } |
| | | } |
| | | .menu-css, |
| | | .el-menu { |
| | | border-right: none; |
| | | list-style: none; |
| | | position: relative; |
| | | margin: 0; |
| | | padding-left: 0; |
| | | background-color: #ffffff; |
| | | .el-submenu__title { |
| | | height: 35px; |
| | | line-height: 35px; |
| | | font-size: 14px; |
| | | color: #303133; |
| | | padding: 0 20px; |
| | | list-style: none; |
| | | cursor: pointer; |
| | | position: relative; |
| | | -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s; |
| | | transition: border-color 0.3s, background-color 0.3s, color 0.3s; |
| | | -webkit-box-sizing: border-box; |
| | | box-sizing: border-box; |
| | | white-space: nowrap; |
| | | } |
| | | .tree-font { |
| | | font-family: PingFangSC-Medium; |
| | | font-size: 14px; |
| | | color: #222222; |
| | | text-align: left; |
| | | } |
| | | li { |
| | | text-align: left; |
| | | .el-submenu__title { |
| | | // border-bottom: solid 1px #e6e6e6; |
| | | padding-left: 10px !important; |
| | | background-color: #e4e6ed !important; |
| | | border-radius: 2px; |
| | | .el-submenu__icon-arrow { |
| | | position: absolute; |
| | | top: 50%; |
| | | right: auto; |
| | | left: 135px; |
| | | margin-top: -7px; |
| | | -webkit-transition: -webkit-transform 0.3s; |
| | | transition: -webkit-transform 0.3s; |
| | | transition: transform 0.3s; |
| | | transition: transform 0.3s, -webkit-transform 0.3s; |
| | | font-size: 12px; |
| | | } |
| | | color: #3d68e1; |
| | | } |
| | | } |
| | | } |
| | | .save-btn { |
| | | text-align: right; |
| | | position: relative; |
| | | right: 40px; |
| | | .el-tabs__header { |
| | | margin-bottom: 0; |
| | | } |
| | | } |
| | | </style> |
| | | <style lang="scss" scoped> |
| | | .menu-css, |
| | | .el-menu { |
| | | border-right: none; |
| | | list-style: none; |
| | | position: relative; |
| | | margin: 0; |
| | | padding-left: 0; |
| | | background-color: #ffffff; |
| | | .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; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .tree-font { |
| | | font-family: PingFangSC-Medium; |
| | | .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; |
| | | color: #222222; |
| | | text-align: left; |
| | | } |
| | | li { |
| | | text-align: left; |
| | | .el-submenu__title { |
| | | .el-submenu__icon-arrow { |
| | | position: absolute; |
| | | top: 50%; |
| | | right: 0; |
| | | margin-top: -7px; |
| | | -webkit-transition: -webkit-transform 0.3s; |
| | | transition: -webkit-transform 0.3s; |
| | | transition: transform 0.3s; |
| | | transition: transform 0.3s, -webkit-transform 0.3s; |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .camera-seleted-text { |
| | | margin-right: 20px; |
| | | |
| | | .b { |
| | | color: #3d68e1; |
| | | } |
| | | } |
| | | } |