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