From e823c0e60392df8e2ace2419f2ba12f2913dea9b Mon Sep 17 00:00:00 2001
From: sd <shidong@jhsoft.cc>
Date: 星期五, 29 八月 2025 17:16:00 +0800
Subject: [PATCH] 摄像机配置-实现AI任务的快速复制和粘贴功能
---
src/pages/gb28181/index/App.vue | 455 ++++++++++++++++++++++++++++----------------------------
1 files changed, 224 insertions(+), 231 deletions(-)
diff --git a/src/pages/gb28181/index/App.vue b/src/pages/gb28181/index/App.vue
index 04e3731..03e42e8 100644
--- a/src/pages/gb28181/index/App.vue
+++ b/src/pages/gb28181/index/App.vue
@@ -1,136 +1,87 @@
<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-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="鍥介檯鏈嶅姟鍣↖P" 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>
+ <!-- <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 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鏈嶅姟鍣↖D">
+ <!-- <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="鍥介檯鏈嶅姟鍣ㄧ鍙�" 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 label="SIP鏈嶅姟鍣ㄥ煙">
+ <el-input v-model.number="gb28181.SipRealm" placeholder="璇疯緭鍏�" :disabled="true" size="small"></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="寮�鍚壌鏉�" style="text-align: left">
- <el-switch v-model="gb28181.IsAuth"></el-switch>
+ <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="閴存潈瀵嗙爜">
- <el-input
- v-model="gb28181.Password"
- placeholder="璇疯緭鍏�"
- size="small"
- :disabled="!gb28181.IsAuth"
- ></el-input>
+ <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-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 :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>
+ }}</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">
@@ -141,27 +92,21 @@
<b>鍥芥爣鎽勫儚鏈洪厤缃�</b>
<span>(鏈�澶氬嬀閫�500璺憚鍍忔満)</span>
</div>
- <tree-menu
- ref="tree"
- app="gb28181"
- treeName="localTree"
- :node="TreeDataPool.treeData"
- :height="treeHeight"
- :setting="treeSettings"
- 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>
+ <tree-menu v-if="activeName === 'cameras' && treeDataLoaded" 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>{{ TreeDataPool.gb28181CheckedCount }}</b>
- / {{ TreeDataPool.gb28181ChildNodeCount }} ) 璺�
+ <b>{{ checkData }}</b>
+ / {{ totalNode }} ) 璺�
</span>
<el-button type="primary" size="small" @click="saveChecked">淇濆瓨</el-button>
@@ -172,16 +117,10 @@
</template>
<script>
-import {
- getGB28181Config,
- saveGB28181Config,
- getGb28181AreaList,
- newGb28181ID,
- getAllSubServer,
- saveGb28181CamTree
-} from "./api"
+import gb28181 from "@/api/gb28181"
-import TreeMenu from "@/components/giantTree/index"
+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 {
@@ -191,14 +130,49 @@
},
directives: {
focus: {
- inserted: function(el) {
+ inserted: function (el) {
el.querySelector("input").focus()
}
}
},
-
data() {
return {
+ treeDataLoaded:false,
+ 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: [],
+ checked: true
+ },]
+ }]
+ },
+ {
+ ID: 2,
+ label: '鎽勫儚鏈�',
+ type: 'camera',
+ rtspAddress: 'http://*******',
+ deviceName: '鎽勫儚鏈�',
+ deviceAddress: '鏈烘埧',
+ videoType: "1",
+ lngLat: '',
+ checked: true
+ }],
activeName: "gb28181",
treeHeight: 750,
loading: false,
@@ -219,7 +193,7 @@
message: "璇疯緭鍏P鍦板潃",
trigger: "change"
},
- { validator: isIPv4, trigger: "change" }
+ //{ validator: isIPv4, trigger: "change" }
],
ServerIp: [
{
@@ -227,7 +201,7 @@
message: "璇疯緭鍏P鍦板潃",
trigger: "change"
},
- { validator: isIPv4, trigger: "change" }
+ //{ validator: isIPv4, trigger: "change" }
],
ServerPort: [
{
@@ -235,7 +209,7 @@
message: "璇疯緭鍏ョ鍙�",
trigger: "change"
},
- { validator: isPort, trigger: "change" }
+ // { validator: isPort, trigger: "change" }
],
GbServerPort: [
{
@@ -243,7 +217,7 @@
message: "璇疯緭鍏ョ鍙�",
trigger: "change"
},
- { validator: isPort, trigger: "change" }
+ // { validator: isPort, trigger: "change" }
]
},
locationCity: {
@@ -257,57 +231,145 @@
}
},
mounted() {
- this.TreeDataPool.multiple = true
+ // this.TreeDataPool.multiple = true
// 璁板綍鐩綍鏄惁鎶樺彔
- let foldList = localStorage.getItem("ztree_fold_list")
- if (foldList) {
- this.TreeDataPool.foldNodeList = JSON.parse(foldList)
- }
+ // let foldList = localStorage.getItem("ztree_fold_list")
+ // if (foldList) {
+ // this.TreeDataPool.foldNodeList = JSON.parse(foldList)
+ // }
- this.initGB28181Conf()
+ // 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") {
- getAllSubServer().then((rsp) => {
- if (rsp && rsp.success) {
- this.subDevTable = rsp.data
+ 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))
+ }
+ })
+
}
},
- async getCamerasFromVideosvr() {
- this.loading = true
- await this.TreeDataPool.fetchVideosvrCameras(false)
- this.loading = 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
+ // }
+ // 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.TreeDataPool.fetchVideosvrCameras(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 = [];
+ this.treeData = rsp.data.items;
+ this.totalNode = rsp.data.total;
+ this.checkData = this.treeData.filter(node => node.checked).length
+ this.treeDataLoaded = true;
+ }
+ })
+ },
saveChecked() {
- localStorage.setItem("ztree_fold_list", JSON.stringify(this.TreeDataPool.foldNodeList))
-
- if (this.TreeDataPool.gb28181CheckedCount > 500) {
+ 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
}
- this.loading = true
- let treeData = this.TreeDataPool.newTreeByChecked(this.TreeDataPool.activeTreeData)
- saveGb28181CamTree({ checkedMenus: treeData })
+ gb28181.saveGb28181CamTree(keys)
.then((rsp) => {
- if (rsp && rsp.success) {
+ if (rsp && rsp.status == 200) {
this.$message({
type: "success",
message: "淇濆瓨鎴愬姛"
@@ -323,86 +385,6 @@
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
- }
- console.log(this.locationCity.county)
- })
- },
- newGBID () {
- console.log(this.locationCity.county)
- console.log(this.locationCity.countyOptions)
- 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>
@@ -414,6 +396,7 @@
box-sizing: border-box;
padding: 10px;
background-color: #f8f9fb;
+
.s-system-manage-breadcrumb {
height: 5%;
box-sizing: border-box;
@@ -427,8 +410,10 @@
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;
@@ -438,34 +423,42 @@
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;
--
Gitblit v1.8.0