From 5fb65ada8ccc28eabf823b284de70fbd3ca1f41e Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 28 九月 2021 18:29:36 +0800
Subject: [PATCH] 抓拍大图层级修复v1
---
src/pages/gb28181/index/App.vue | 233 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 137 insertions(+), 96 deletions(-)
diff --git a/src/pages/gb28181/index/App.vue b/src/pages/gb28181/index/App.vue
index 4ec547c..e89e2fb 100644
--- a/src/pages/gb28181/index/App.vue
+++ b/src/pages/gb28181/index/App.vue
@@ -10,106 +10,113 @@
@tab-click="hanleTabClick"
>
<el-tab-pane label="鍥芥爣ID" name="gb28181">
- <!-- GB28181璁剧疆 -->
- <el-form
- :model="gb28181"
- :rules="rules"
- label-width="130px"
- class="alarmSetting"
- ref="gb28181"
- >
- <!-- <el-form-item label="鍥介檯鏈嶅姟鍣↖P" prop="ServerIp">
+ <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>-->
+ </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>
+ <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"
+ <el-form-item label="鎵�鍦ㄥ湴">
+ <el-select
+ v-model="locationCity.province"
+ @change="changeProvince"
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>
+ 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-form-item label="鍥介檯鏈嶅姟鍣ㄧ鍙�" prop="GbServerPort">
<el-input v-model.number="gb28181.ServerPort" placeholder="璇疯緭鍏�" size="small"></el-input>
- </el-form-item>-->
+ </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="鍥芥爣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="鍥芥爣绔彛" prop="GbServerPort">
+ <el-input v-model.number="gb28181.GbServerPort" placeholder="璇疯緭鍏�" size="small"></el-input>
+ </el-form-item>
- <el-form-item label="寮�鍚壌鏉�">
- <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>
- <el-form-item label="閴存潈瀵嗙爜" v-show="gb28181.IsAuth">
- <el-input v-model="gb28181.Password" placeholder="璇疯緭鍏�" size="small"></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>
- <el-form-item>
- <el-button type="primary" @click="submitGB28281" size="small">淇濆瓨</el-button>
- </el-form-item>
- </el-form>
+ <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">
@@ -128,16 +135,16 @@
<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>
+ :style="scope.row.alive ? `color:#047d19` : 'color:#f11a1a;' "
+ >{{scope.row.alive ? "鍦ㄧ嚎": "绂荤嚎"}}</span>
</template>
</el-table-column>
- <el-table-column prop="mark" label="澶囨敞" align="center"></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="getCamerasFromVideosvr">鍒锋柊</el-button>
+ <el-button type="primary" size="small" @click="updateCamerasFromVideosvr">鍒锋柊</el-button>
</div>
<div class="camera-title">
<b>鍥芥爣鎽勫儚鏈洪厤缃�</b>
@@ -150,8 +157,18 @@
: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>
<el-divider></el-divider>
<span class="camera-seleted-text">
@@ -173,7 +190,6 @@
saveGB28181Config,
getGb28181AreaList,
newGb28181ID,
- getLocalCameraTree,
getAllSubServer,
saveGb28181CamTree
} from './api'
@@ -256,6 +272,12 @@
mounted() {
this.TreeDataPool.multiple = true;
+ // 璁板綍鐩綍鏄惁鎶樺彔
+ let foldList = localStorage.getItem("ztree_fold_list")
+ if (foldList) {
+ this.TreeDataPool.foldNodeList = JSON.parse(foldList)
+ }
+
this.initGB28181Conf();
},
methods: {
@@ -274,10 +296,17 @@
},
async getCamerasFromVideosvr() {
this.loading = true;
- await this.TreeDataPool.fetchVideosvrCameras();
+ 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",
@@ -499,5 +528,17 @@
color: #3d68e1;
}
}
+
+ .base-image {
+ position: absolute;
+ top: 18%;
+ left: 57%;
+ width: 450px;
+
+ .camera-image {
+ background-color: black;
+ height: 254px;
+ }
+ }
}
</style>
--
Gitblit v1.8.0