From 8de8ffd91ab6f96f35cf1357fd025051471ad4af Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期四, 23 十二月 2021 13:59:08 +0800 Subject: [PATCH] 完善国标树配置功能 --- src/pages/gb28181/index/App.vue | 172 +++++++++++++++++++++++++++++++------------ src/components/giantTree/zTree/ztree.vue | 49 +++++++----- src/components/giantTree/index.vue | 13 ++ 3 files changed, 164 insertions(+), 70 deletions(-) diff --git a/src/components/giantTree/index.vue b/src/components/giantTree/index.vue index 2f70307..d1a7af1 100644 --- a/src/components/giantTree/index.vue +++ b/src/components/giantTree/index.vue @@ -6,9 +6,11 @@ :readonly="TreeDataPool.readonly" :gb28181="gb28181" :setting="setting" + :search="search" @onCreated="handleCreated" @onClick="itemClick" @onCheck="itemCheck" + @onAfterSearch="itemCheck" @onDblClick="onDblClick" @onAddNode="addNode" @onRemoveNode="delNode" @@ -58,6 +60,10 @@ default: "" }, gb28181: { + type: Boolean, + default: false + }, + search: { type: Boolean, default: false }, @@ -154,7 +160,7 @@ } }, onDblClick(evt, treeId, item) { - if (item.type !== "4" || this.app !== "Camera") { + if (!item || item.type !== "4" || this.app !== "Camera") { return } // console.log('activeForceChoose', this.TreeDataPool.activeForceChoose) @@ -286,7 +292,9 @@ // this.TreeDataPool.updateZTreeCheckNodes([treeNode]); // }, itemCheck(evt, treeId, treeNode) { - this.TreeDataPool.selectedNode = treeNode + if (treeNode) { + this.TreeDataPool.selectedNode = treeNode + } this.TreeDataPool.treeType = this.treeName // 澶氶�� @@ -299,6 +307,7 @@ // 淇濆瓨涓�浠芥暟鎹� this.TreeDataPool.activeTreeData = this.ztreeObj.getNodes() + this.$emit("itemChecked", treeNode) }, //灞曞紑 itemExpand(e, id, node) { diff --git a/src/components/giantTree/zTree/ztree.vue b/src/components/giantTree/zTree/ztree.vue index 1db7a4a..69175d2 100644 --- a/src/components/giantTree/zTree/ztree.vue +++ b/src/components/giantTree/zTree/ztree.vue @@ -1,8 +1,8 @@ <template> <div> <div class="search"> - <el-input placeholder="鎼滅储" v-model="keyWord"> - <i slot="suffix" class="el-input__icon el-icon-search" id="key"></i> + <el-input placeholder="鎼滅储" v-model="keyWord" size="mini" v-show="search"> + <i slot="suffix" class="el-input__icon el-icon-search" :id="searchBtnId"></i> </el-input> </div> <div class="ztree" :id="ztreeId"></div> @@ -26,6 +26,7 @@ showCheckbox: { type: Boolean, default: false }, readonly: { type: Boolean, default: true }, gb28181: { type: Boolean, default: false }, + search: { type: Boolean, default: false }, setting: { type: Object, require: false, @@ -44,8 +45,10 @@ data() { return { ztreeId: "ztree_" + parseInt(Math.random() * 1e10), + searchBtnId: "search_" + parseInt(Math.random() * 1e10), ztreeObj: null, list: [], + loading: false, ztreeSetting: { view: { showLine: true, @@ -127,7 +130,7 @@ Object.assign({}, this.ztreeSetting, this.setting), this.list ) - this.fuzzySearch(this.ztreeObj, "#key", null, true) //鍒濆鍖栨ā绯婃悳绱㈡柟娉� + this.fuzzySearch(this.ztreeObj, this.searchBtnId, false, true) //鍒濆鍖栨ā绯婃悳绱㈡柟娉� this.$emit("onCreated", this.ztreeObj) }) }, @@ -382,6 +385,7 @@ var nodesShow = zTreeObj.getNodesByFilter(filterFunc) //get all nodes that would be shown processShowNodes(nodesShow, _keywords) //nodes should be reprocessed to show correctly + _this.$emit("onAfterSearch", null) } /** @@ -412,33 +416,37 @@ } //listen to change in input element - $(searchField).bind("click", function() { - _this.options.target = document.querySelector("#" + _this.ztreeId).parentNode.parentNode + $("#" + searchField).bind("click", function() { + // _this.options.target = document.querySelector("#" + _this.ztreeId).parentNode.parentNode // console.log(_this.options.target); - let loadingInstance = Loading.service(_this.options) + // let loadingInstance = Loading.service(_this.options) // console.log(_this.keyWord); // var _keywords = $(this).val(); + $("#" + searchField).removeClass("el-icon-search") + $("#" + searchField).addClass("el-icon-loading") searchNodeLazy(_this.keyWord) //call lazy load - loadingInstance.close() + // loadingInstance.close() + setTimeout(() => { + $("#" + searchField).removeClass("el-icon-loading") + $("#" + searchField).addClass("el-icon-search") + }, 300) }) - var timeoutId = null var lastKeyword = "" // excute lazy load once after input change, the last pending task will be cancled function searchNodeLazy(_keywords) { - if (timeoutId) { - //clear pending task - clearTimeout(timeoutId) + if (lastKeyword === _keywords) { + return } - timeoutId = setTimeout(function() { - if (lastKeyword === _keywords) { - return - } - ztreeFilter(zTreeObj, _keywords) //lazy load ztreeFilter function - // $(searchField).focus();//focus input field again after filtering - lastKeyword = _keywords - }, 500) + ztreeFilter(zTreeObj, _keywords) //lazy load ztreeFilter function + // $(searchField).focus();//focus input field again after filtering + lastKeyword = _keywords } + }, + handleSearch() { + this.loading = true + searchNodeLazy(this.keyWord) //call lazy load + this.loading = false } } } @@ -777,7 +785,8 @@ <style scoped lang="scss"> .search { - width: 300px; + width: 280px; + margin: 5px 5px; ::v-deep .el-input__suffix { right: 0; diff --git a/src/pages/gb28181/index/App.vue b/src/pages/gb28181/index/App.vue index 76a50b0..498d79b 100644 --- a/src/pages/gb28181/index/App.vue +++ b/src/pages/gb28181/index/App.vue @@ -9,7 +9,7 @@ type="border-card" @tab-click="hanleTabClick" > - <el-tab-pane label="鍥芥爣ID" name="gb28181"> + <el-tab-pane label="鍥芥爣鏈嶅姟" name="gb28181"> <div style="width: 775px"> <!-- GB28181璁剧疆 --> <el-form :model="gb28181" :rules="rules" label-width="130px" class="alarmSetting" ref="gb28181"> @@ -17,7 +17,7 @@ <ip-input :ip="gb28181.ServerIp" @on-blur="gb28181.ServerIp = arguments[0]"></ip-input> </el-form-item>--> - <div style="text-align: left; margin-bottom: 16px"> + <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> @@ -116,12 +116,8 @@ border fit highlight-current-row - style="width: 100%; color: #000" - :header-cell-style="{ - background: '#f8f8f8', - color: '#222222', - height: '30px' - }" + 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> @@ -138,29 +134,55 @@ </el-table> </el-tab-pane> <el-tab-pane label="鍥芥爣鎽勫儚鏈�" name="cameras"> - <div style="text-align: left"> + <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 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"> @@ -188,11 +210,13 @@ import TreeMenu from "@/components/giantTree/index" import { isPort, isIPv4 } from "@/scripts/validate" -import bus from "@/plugin/bus" +import ZTree from "@/components/giantTree/zTree/ztree" + export default { name: "Gb28181Setting", components: { - TreeMenu + TreeMenu, + ZTree }, directives: { focus: { @@ -215,6 +239,11 @@ treeSettings: { check: { enable: true + } + }, + treeSettingsSelect: { + check: { + enable: false } }, rules: { @@ -258,7 +287,8 @@ provinceOptions: [], cityOptions: [], countyOptions: [] - } + }, + dstTreeData: [] } }, mounted() { @@ -283,16 +313,23 @@ } 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)) @@ -507,16 +544,6 @@ 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; @@ -525,15 +552,64 @@ } } - .base-image { - position: absolute; - top: 18%; - left: 57%; - width: 450px; + .tree-container { + display: flex; + .tree-box { + width: 500px; + margin: 5px 10px 0px 0px; + border: 1px solid #e4e2e2; - .camera-image { - background-color: black; - height: 254px; + .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; } } } -- Gitblit v1.8.0