From 45abc1d097c88e3d9d5b4a7a71a2257cab9dd3ba Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期四, 17 九月 2020 16:40:51 +0800 Subject: [PATCH] 可视化左侧树组件替换 --- src/pages/cameraAccess/index/App.vue | 9 +- src/pages/visual/index/mixins.ts | 3 + src/pages/visual/index/App.vue | 162 +++++++++++++++++++++++++++++++++++++++++++++++++++++ src/pages/search/index/App.vue | 2 4 files changed, 169 insertions(+), 7 deletions(-) diff --git a/src/pages/cameraAccess/index/App.vue b/src/pages/cameraAccess/index/App.vue index f6e5d1b..7997a48 100644 --- a/src/pages/cameraAccess/index/App.vue +++ b/src/pages/cameraAccess/index/App.vue @@ -61,7 +61,7 @@ <style lang="scss" scoped> .column { overflow-y: hidden; - display: flex; + //display: flex; width: 100%; height: 100%; } @@ -72,10 +72,11 @@ // height: inherit; background-color: #fff; position: relative; + float: left; } .column-right { position: relative; - flex: 1; + //flex: 1; background-color: #fff; box-sizing: border-box; overflow-y: hidden; @@ -90,7 +91,7 @@ left: 0; padding: 14px; overflow-x: hidden; - overflow-y: hidden; + //overflow-y: hidden; } .resize-bar { width: 310px; @@ -111,7 +112,7 @@ border-right: 2px solid #efefef; border-left: 1px solid #e0e0e0; pointer-events: none; - cursor: ew-resize; + //cursor: ew-resize; } .resize-bar:hover ~ .resize-line, .resize-bar:active ~ .resize-line { diff --git a/src/pages/search/index/App.vue b/src/pages/search/index/App.vue index 5d69c6b..08426d8 100644 --- a/src/pages/search/index/App.vue +++ b/src/pages/search/index/App.vue @@ -100,7 +100,7 @@ opacity: 0; overflow: scroll; max-width: 500px; //璁惧畾鏈�澶ф媺浼搁暱搴� - min-width: 310px; //璁惧畾鏈�灏忓搴� + min-width: 33px; //璁惧畾鏈�灏忓搴� } /* 鎷栨嫿绾� */ .resize-line { diff --git a/src/pages/visual/index/App.vue b/src/pages/visual/index/App.vue index 2b9fb70..51303f5 100644 --- a/src/pages/visual/index/App.vue +++ b/src/pages/visual/index/App.vue @@ -9,7 +9,7 @@ style="animation-duration: 0.7s;background: #051130;width:315px;float:left;height:100%" > <div class="tree-box" style="border: 2px solid #182c65;margin-top:7px"> - <left-nav :height="screenHeight - 30"></left-nav> + <left-nav appName="Camera" :height="screenHeight - 30"></left-nav> </div> </div> @@ -19,7 +19,8 @@ </template> <script> -import LeftNav from "../components/LeftNav.vue"; +//import LeftNav from "../components/LeftNav.vue"; +import LeftNav from "@/components/LeftNav.vue"; import TopNav from "../components/TopNav.vue"; import Home from "./home"; @@ -217,3 +218,160 @@ } } </style> +<style lang="scss"> +.left-tree-box { + width: 315px; + margin-left: 5px; + + .el-menu { + border-right: solid 0px #e6e6e6 !important; + } + ul { + li { + .el-menu-item-group__title { + padding: none; + } + } + .el-submenu__title, + .el-menu-item { + padding-left: 10px !important; + color: #222222 !important; + font-size: 17px !important; + height: 35px; + line-height: 35px; + .el-submenu__icon-arrow { + font-size: 12px !important; + padding-right: 2px !important; + } + i { + padding-right: 10px !important; + font-size: 24px !important; + color: #95b7ff !important; + } + } + } + .navTopSelect { + .el-input__icon { + line-height: 34px; + } + // padding: 24px 0px; + padding-top: 24px; + padding-bottom: 12px; + input:nth-child(1) { + height: 34px; + box-shadow: 0 2px 11px -6px rgba(95, 95, 95, 0.5); + } + input:nth-child(2) { + height: 34px; + width: 103px; + box-shadow: 0 2px 11px -6px rgba(95, 95, 95, 0.5); + } + } + + .el-input__inner { + background: #0e2457; + border: 1px solid #053e83; + box-shadow: 0 2px 11px -6px rgba(95, 95, 95, 0.5); + border-radius: 4px; + color: #95b7ff; + } + .el-select .el-input .el-select__caret { + color: #95b7ff; + } + input::-webkit-input-placeholder, + textarea::-webkit-input-placeholder { + /* WebKit browsers */ + color: #9fbcfc; + } + .isCollapse { + font-size: 20px; + padding: 0px 5px; + } + .el-menu-vertical-demo:not(.el-menu--collapse) { + .fontFamily, + .el-submenu__title .fontFamily, + .el-submenu__title .fontFamily { + padding-right: 20px; + font-size: 22px; + } + } + .tree-anchor .fontFamily { + font-size: 16px !important; + color: #2074ef; + padding-right: 0px !important; + } + .el-submenu__title, + .el-menu-item { + text-align: left; + } + + .item-group { + margin-left: 33px; + margin-top: -12px; + } +} +.tree-close { + width: 10%; + margin-left: 10px; + font-size: 20px; + display: inline-block; + color: #9ea0a0; + vertical-align: middle; + cursor: pointer; +} + +.tree-edit { + z-index: 1; + font-size: 16px; + position: absolute; + top: 81px; + cursor: pointer; + button { + border: 0px; + color: #3d68e1; + + background-color: transparent; + cursor: pointer; + outline: none; + } + button:hover { + color: rgb(82, 193, 245); + } +} +.tree-lock { + left: 76%; + button { + color: #000; + } +} + +.gb-lock { + left: 76%; + top: -27px; + button { + color: #000; + } +} +.area-add { + left: 35%; +} +.camera-add { + left: 45%; +} +.tree-font { + font-family: PingFangSC-Medium; + font-size: 14px; + color: #95b7ff; +} + +.gb-refresh { + top: -27px; + left: 113px; +} +.atooltip.el-tooltip__popper[x-placement^="bottom"] .popper__arrow { + border-bottom-color: #00000090; +} +.atooltip.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after { + border-bottom-color: #68666690; +} +</style> diff --git a/src/pages/visual/index/mixins.ts b/src/pages/visual/index/mixins.ts index f83ef5e..7970419 100644 --- a/src/pages/visual/index/mixins.ts +++ b/src/pages/visual/index/mixins.ts @@ -5,6 +5,7 @@ import VideoPhotoData from "../Pool/VideoPhotoData"; import VideoTaskData from "@/Pool/VideoTaskData"; import VideoCaptrue from "@/Pool/VideoCapture"; +import DataStackPool from"@/Pool/dataStack"; /* eslint-disable */ const onlyTreeDataPool = new TreeDataPool; @@ -14,6 +15,7 @@ const onlyVideoPhotoData = new VideoPhotoData; const onlyVideoTaskData = new VideoTaskData; const onlyVideoCaptrue = new VideoCaptrue; +const onlyDataStackPool = new DataStackPool; const mixin = { data() { @@ -25,6 +27,7 @@ VideoPhotoData: onlyVideoPhotoData, VideoTaskData: onlyVideoTaskData, VideoCaptrue: onlyVideoCaptrue, + DataStackPool: onlyDataStackPool }; }, }; -- Gitblit v1.8.0