From d259bd9cf2943926d1c8078ee0ce70a0aa1afef3 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 06 八月 2020 09:58:38 +0800
Subject: [PATCH] 实时监控/摄像机配置/数据栈配置布局调整,应用窗口调整,算法管理更换为应用中心
---
src/pages/desktop/index/components/DFrame.vue | 25
src/components/canvas/index.vue | 5
public/images/desktop/desk-logo.png | 0
src/pages/ai/index/main.ts | 0
src/pages/desktop/index/mock/userData.json | 12
public/css/overried.scss | 134 +++++
src/pages/ai/index/App.vue | 0
src/components/subComponents/SystemInfo.vue | 2
src/pages/desktop/index/components/Tools.vue | 1
public/css/element-variables.scss | 31 +
src/pages/cameraAccess/components/SeparateRules.vue | 17
src/pages/cameraAccess/components/LinkageRule.vue | 26
public/index.html | 308 +++++++++++
src/pages/cameraVideo/index/Video.vue | 5
src/pages/cameraAccess/components/scene/SlideScene.vue | 28
/dev/null | 79 ---
public/css/messages.scss | 367 ++++++++++++++
src/pages/desktop/index/store/modules/desktop.js | 18
public/css/common.scss | 332 +++++++++++++
src/pages/ai/index/mixins.ts | 0
src/pages/cameraAccess/index/App.vue | 35
src/components/subComponents/DataStackCard.vue | 2
src/pages/cameraAccess/index/VideoManage.vue | 15
src/pages/cameraAccess/components/CameraInfo.vue | 4
src/pages/ai/index/api.ts | 0
25 files changed, 1,270 insertions(+), 176 deletions(-)
diff --git a/public/css/common.scss b/public/css/common.scss
new file mode 100644
index 0000000..a840ee6
--- /dev/null
+++ b/public/css/common.scss
@@ -0,0 +1,332 @@
+
+/*瀹氫綅*/
+.tl{text-align: left;}
+.tc{text-align: center;}
+.tr{text-align: right;}
+.bc{margin-left: auto;margin-right: auto;}
+.fl{float: left; display:inline;}
+.fr{float: right; display:inline;}
+.cb{clear:both;}
+.cl{clear: left;}
+.cr{clear: right;}
+
+
+ /*鏂囧瓧鎺掔増*/
+ .f12{font-size: 12px;}
+ .f13{font-size: 13px;}
+ .f14{font-size: 14px;}
+ .f16{font-size: 16px;}
+ .f18{font-size: 18px;}
+ .f20{font-size: 20px;}
+ .f22{font-size: 23px;}
+ .f25{font-size: 25px;}
+ .f30{font-size: 30px;}
+ .f35{font-size: 35px;}
+ .f40{font-size: 40px;}
+ .f45{font-size: 45px;}
+ .f50{font-size: 50px;}
+ .f55{font-size: 55px;}
+ .f60{font-size: 60px;}
+ .f65{font-size: 65px;}
+ .fb{font-weight: bold;}
+ .fn{font-weight: normal;}
+ .t2{text-indent: 2em;}
+ .lh150{line-height:150%;}
+ .lh180{line-height:180%;}
+ .lh200{line-height:200%;}
+ .unl{text-decoration: underline;}
+ .no_unl{text-decoration: none;}
+
+
+.clearfix:after{ display:block; content:''; clear:both;}
+.clearfix{ zoom:1;}
+.vm{vertical-align: middle;}
+
+.pr{position: relative;}
+.pa{position: absolute;}
+.pa100{position: absolute;left: 0;top: 0;right: 0;bottom: 0;}
+.zoom{zoom:1;}
+.hidden{visibility: hidden;}
+.none{display: none}
+/*闀垮害楂樺害*/
+.w10{width: 10px;}
+.w20{width: 20px;}
+.w30{width: 30px;}
+.w40{width: 40px;}
+.w50{width: 50px;}
+.w70{width: 70px;}
+.w90{width: 90px;}
+.w100{width: 100px;}
+.w300{width: 300px;}
+.w500{width: 500px;}
+.w600{width: 600px;}
+.w700{width: 700px;}
+.w800{width: 800px;}
+.w{width: 100%;}
+.h50{height: 50px;}
+.h100{height: 100px;}
+.h200{height: 200px;}
+.h{height: 100%;}
+
+/*缂栧墽*/
+.ma{margin: auto;}
+.m10{margin:10px;}
+.m15{margin:15px;}
+.m30{margin:30px;}
+.mt5{margin-top:5px;}
+.mt10{margin-top:10px;}
+.mt15{margin-top:15px;}
+.mt20{margin-top:20px;}
+.mt30{margin-top:30px;}
+.mt50{margin-top:50px;}
+.mt100{margin-top:100px;}
+.mb5{margin-bottom: 5px;}
+.mb10{margin-bottom: 10px;}
+.mb15{margin-bottom: 15px;}
+.mb20{margin-bottom: 20px;}
+.mb30{margin-bottom: 30px;}
+.mb50{margin-bottom: 50px;}
+.mb100{margin-bottom: 100px;}
+.ml5{margin-left: 5px;}
+.ml10{margin-left: 10px;}
+.ml15{margin-left: 15px;}
+.ml20{margin-left: 20px;}
+.ml30{margin-left: 30px;}
+.ml50{margin-left: 50px;}
+.ml100{margin-left: 100px;}
+.mr5{margin-right: 5px;}
+.mr10{margin-right:10px;}
+.mr15{margin-right: 15px;}
+.mr20{margin-right: 20px;}
+.mr30{margin-right: 30px;}
+.mr50{margin-right: 50px;}
+.mr100{margin-right: 100px;}
+.p5{padding: 5px;}
+.p10{padding:10px;}
+.p15{padding: 15px;}
+.p20{padding: 20px;}
+.p30{padding: 30px;}
+.p50{padding: 50px;}
+.p100{padding: 100px;}
+.pt5{padding-top: 5px;}
+.pt10{padding-top:10px;}
+.pt15{padding-top: 15px;}
+.pt20{padding-top: 20px;}
+.pt30{padding-top: 30px;}
+.pt50{padding-top: 50px;}
+.pt100{padding-top: 100px;}
+.pb5{padding-bottom: 5px;}
+.pb10{padding-bottom:10px;}
+.pb15{padding-bottom: 15px;}
+.pb20{padding-bottom: 20px;}
+.pb30{padding-bottom: 30px;}
+.pb50{padding-bottom: 50px;}
+.pb100{padding-bottom: 100px;}
+.pl5{padding-left: 5px;}
+.pl10{padding-left:10px;}
+.pl15{padding-left: 15px;}
+.pl20{padding-left: 20px;}
+.pl30{padding-left: 30px;}
+.pl50{padding-left: 50px;}
+.pl60{padding-left: 60px;}
+.pl100{padding-left: 100px;}
+.pr5{padding-right: 5px;}
+.pr10{padding-right:10px;}
+.pr15{padding-right: 15px;}
+.pr20{padding-right: 20px;}
+.pr30{padding-right: 30px;}
+.pr50{padding-right: 50px;}
+.pr100{padding-right: 100px;}
+.pl-checkbox{padding-left:44px;}
+.pd10{padding:10px;}
+.pd20{padding:20px;}
+
+.mg10{margin:10px;}
+.mg20{margin:20px;}
+.mg30{margin:30px;}
+.p0m0{padding:0; margin: 0;}
+.cursor-pointer{cursor: pointer;}
+.dis-inleblock{ display: inline-block; }
+.dis-inline{ display: inline; }
+.dis-block{ display: block; }
+.text-overflow{
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.overflow-y{overflow-y: auto;overflow-x:hidden;}
+.overflow-x{overflow-x: auto;overflow-y:hidden;}
+.overflow-auto{overflow: auto;}
+.overflow-hidden{overflow:hidden;}
+
+.text-center{text-align: center;}
+.text-left{text-align: left;}
+.text-right{text-align: right;}
+
+.vertical-top{vertical-align: top;}
+.vertical-middle{vertical-align: middle;}
+.vertical-bottom{vertical-align: bottom;}
+.border-box{box-sizing: border-box;}
+.flex-center{
+ display:flex;
+ align-items:center;
+ justify-content:center;
+}
+.width100{width: 100%;}
+.width50{width: 50%;}
+.width60{width: 60%;}
+.width70{width: 70%;}
+
+.height100{height: 100%}
+.height40{height: 40%}
+.height50{height: 50%}
+.height60{height: 60%}
+.height70{height: 70%}
+.height80{height: 80%}
+
+.height50-10{height: calc(50% - 10px);}
+.height40-10{height: calc(40% - 10px);}
+.height30-10{height: calc(30% - 10px);}
+.height100-10{height: calc(100% - 10px);}
+.height100-20{height: calc(100% - 20px);}
+.height100-25{height: calc(100% - 25px);}
+.height100-30{height: calc(100% - 30px);}
+.height100-40{height: calc(100% - 40px);}
+.height100-45{height: calc(100% - 45px);}
+.height100-50{height: calc(100% - 50px);}
+.height100-55{height: calc(100% - 55px);}
+.height100-60{height: calc(100% - 60px);}
+.height100-65{height: calc(100% - 65px);}
+.height100-70{height: calc(100% - 70px);}
+.height100-75 {
+ height: calc(100% - 75px);
+}
+.height100-80{height: calc(100% - 80px);}
+.height100-85{height: calc(100% - 85px);}
+.height100-90 {
+ height: calc(100% - 90px);
+}
+.height100-95 {
+ height: calc(100% - 95px);
+}
+.height100-100 {
+ height: calc(100% - 100px);
+}
+.height100-120{height: calc(100% - 120px);}
+.is-always-shadow {
+ -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.bg-card-blue{
+ background: #f4fcff;
+}
+
+.radius-circle{
+ border-radius: 50%;
+ overflow: hidden;
+}
+.radius-5 {
+ border-radius: 5px;
+}
+.radius-10 {
+ border-radius: 10px;
+}
+.radius-15 {
+ border-radius: 15px;
+}
+.radius-20 {
+ border-radius: 20px;
+}
+.radius-25 {
+ border-radius: 25px;
+}
+/* 鑷畾涔塮lex甯冨眬 start */
+
+.flex-box {
+ display: -webkit-flex;
+ display: flex;
+}
+
+.flex-box-wrap {
+ display: -webkit-flex;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.flex-center {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.flex-row-left {
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-start;
+}
+
+.flex-row-center {
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+}
+
+.flex-row-right {
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-end;
+}
+
+.flex-row-between {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+}
+
+.flex-vertical-top {
+ display: flex;
+ align-items: flex-start;
+}
+
+.flex-vertical-center {
+ display: flex;
+ align-items: center;
+}
+
+.flex-vertical-bottom {
+ display: flex;
+ align-items: flex-end;
+}
+
+.flex-vertical-fill {
+ display: flex;
+ align-items: stretch;
+}
+
+.flex-iteam-top {
+ align-self: flex-start;
+}
+
+.flex-iteam-center {
+ align-self: center;
+}
+
+.flex-iteam-bottom {
+ align-self: flex-end;
+}
+
+// elementu-ui
+
+.el-radio__input.is-checked .el-radio__inner {
+ border-color: #3d68e1;
+ background: #3d68e1;
+}
+.el-radio__input.is-checked + .el-radio__label {
+ color: #3d68e1;
+}
+
+.el-switch.is-checked .el-switch__core {
+ border-color: #3d68e1;
+ background-color: #3d68e1;
+}
diff --git a/public/css/element-variables.scss b/public/css/element-variables.scss
new file mode 100644
index 0000000..e56b6c4
--- /dev/null
+++ b/public/css/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #3D68E1;
+$--color-success: #13ce66;
+$--color-warning: #ff8725;
+$--color-danger: #f52323;
+$--color-info: #EAEAEA;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border:1px solid#dfe6ec;
+
+/* icon font path, required */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+ theme: $--color-primary;
+}
\ No newline at end of file
diff --git a/public/css/messages.scss b/public/css/messages.scss
new file mode 100644
index 0000000..20a8c2d
--- /dev/null
+++ b/public/css/messages.scss
@@ -0,0 +1,367 @@
+
+$messages-inner-bg: transparent !default;
+$messages-sidebox-bg: #f3f3f3 !default;
+$messages-sidebox-width: 16rem !default;
+$messages-sidebox-border-width: 1px !default;
+$messages-transition-duration: .2s !default;
+$message-item-padding-y: .75rem !default;
+$message-sender-width: 10rem !default;
+$message-attachment-width: 18rem !default;
+$message-attachment-size: 4rem !default;
+
+// Make wrapper full page height
+.messages-wrapper {
+ position: relative;
+ display: flex;
+ overflow: hidden;
+ flex: 1 1 100%;
+ width: 100%;
+}
+
+.messages-card {
+ overflow: hidden;
+}
+
+.messages-wrapper,
+.messages-sidebox {
+ transition: all $messages-transition-duration;
+}
+
+.messages-sidebox {
+ flex-basis: 100%;
+ flex-grow: 0;
+}
+
+.messages-wrapper .messages-sidebox,
+.messages-card .messages-sidebox {
+ position: fixed;
+ left: calc(-#{$messages-sidebox-width} - #{$messages-sidebox-border-width});
+ z-index: 10;
+ flex-basis: auto;
+ flex-grow: 1;
+ width: $messages-sidebox-width;
+
+ [dir=rtl] & {
+ right: calc(-#{$messages-sidebox-width} - #{$messages-sidebox-border-width});
+ left: auto;
+ }
+}
+
+.layout-sidenav-100vh .messages-wrapper .messages-sidebox {
+ height: 100vh;
+}
+
+.messages-wrapper .messages-sidebox {
+ background: $messages-sidebox-bg;
+}
+
+.messages-card .messages-sidebox {
+ // position: absolute;
+ bottom: 0;
+}
+
+.messages-scroll {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ height: 100%;
+
+ &.messages-content {
+ position: absolute;
+ right: 0;
+ left: 0;
+ width: 100%;
+ }
+}
+
+// List
+
+.messages-list .list-group-item {
+ z-index: auto !important;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ padding-top: ($message-item-padding-y / 2);
+ padding-bottom: ($message-item-padding-y / 2);
+ width: 100%;
+ border-right: 0;
+ border-left: 0;
+ border-radius: 0;
+
+ &:first-child {
+ border-top: 0;
+ }
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ > * {
+ padding-top: ($message-item-padding-y / 2);
+ padding-bottom: ($message-item-padding-y / 2);
+ }
+}
+
+.message-checkbox .custom-control {
+ display: block !important;
+ margin: 0;
+ margin-top: -1px;
+}
+
+.message-sender {
+ min-width: $message-sender-width;
+}
+
+.message-subject {
+ width: 100%;
+}
+
+.message-date {
+ white-space: nowrap;
+}
+
+// Attachments
+
+.message-attachment {
+ display: flex;
+ align-items: center;
+ width: 100%;
+
+ > .media-body {
+ min-width: 0;
+ }
+}
+
+.message-attachment-file,
+.message-attachment-img {
+ display: block;
+ flex-grow: 0;
+ flex-shrink: 0;
+ width: $message-attachment-size;
+ height: $message-attachment-size;
+}
+
+.message-attachment-file {
+ display: inline-block;
+ text-align: center;
+ line-height: $message-attachment-size;
+}
+
+.message-attachment-img {
+ background-color: transparent;
+ background-position: center center;
+ background-size: cover;
+}
+
+.message-attachment-filename {
+ display: block;
+ overflow: hidden;
+ width: 100%;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+
+.default-style {
+ @import "../_appwork/include";
+
+ .messages-wrapper .messages-sidebox {
+ z-index: $zindex-layout-fixed + 1;
+ }
+
+ .messages-sidebox-open .messages-sidebox {
+ left: 0;
+ }
+
+ .messages-card .messages-sidebox {
+ background: $white;
+ box-shadow: 0 0 0 $messages-sidebox-border-width $card-inner-border-color;
+ }
+
+ @include media-breakpoint-up(sm) {
+ .messages-list .list-group-item {
+ flex-wrap: nowrap;
+ }
+
+ .message-subject {
+ width: auto;
+ }
+
+ .message-date {
+ margin-left: auto;
+ }
+ }
+
+ @include media-breakpoint-up(md) {
+ .messages-sidebox {
+ flex-basis: $messages-sidebox-width;
+ }
+
+ .messages-wrapper .messages-sidebox {
+ flex-basis: auto;
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ .messages-wrapper,
+ .messages-sidebox {
+ transition: none !important;
+ }
+
+ .messages-wrapper {
+ padding-left: $messages-sidebox-width;
+ }
+
+ .messages-sidebox {
+ z-index: auto !important;
+ }
+
+ .messages-wrapper .messages-sidebox {
+ position: absolute;
+ left: 0;
+ z-index: auto;
+ }
+
+ .messages-wrapper .messages-sidebox {
+ height: 100% !important;
+ }
+
+ .messages-card .messages-sidebox {
+ position: static;
+ right: auto;
+ left: auto;
+ flex-grow: 0;
+ height: auto;
+ }
+ }
+}
+
+.default-style[dir=rtl] {
+ @import "../_appwork/include";
+
+ .messages-sidebox-open .messages-sidebox {
+ right: 0;
+ left: auto;
+ }
+
+ @include media-breakpoint-up(sm) {
+ .message-date {
+ margin-right: auto;
+ margin-left: 0;
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ .messages-wrapper {
+ padding-right: $messages-sidebox-width;
+ padding-left: 0;
+ }
+
+ .messages-wrapper .messages-sidebox {
+ right: 0;
+ left: auto;
+ }
+ }
+}
+
+.material-style {
+ @import "../_appwork/include-material";
+
+ .messages-wrapper .messages-sidebox {
+ z-index: $zindex-layout-fixed + 1;
+ }
+
+ .messages-sidebox-open .messages-sidebox {
+ left: 0;
+ }
+
+ .messages-card .messages-sidebox {
+ background: $white;
+ box-shadow: 0 0 0 $messages-sidebox-border-width $card-inner-border-color;
+ }
+
+ @include media-breakpoint-up(sm) {
+ .messages-list .list-group-item {
+ flex-wrap: nowrap;
+ }
+
+ .message-subject {
+ width: auto;
+ }
+
+ .message-date {
+ margin-left: auto;
+ }
+ }
+
+ @include media-breakpoint-up(md) {
+ .messages-sidebox {
+ flex-basis: $messages-sidebox-width;
+ }
+
+ .messages-wrapper .messages-sidebox {
+ flex-basis: auto;
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ .messages-wrapper,
+ .messages-sidebox {
+ transition: none !important;
+ }
+
+ .messages-wrapper {
+ padding-left: $messages-sidebox-width;
+ }
+
+ .messages-sidebox {
+ z-index: auto !important;
+ }
+
+ .messages-wrapper .messages-sidebox {
+ position: absolute;
+ left: 0;
+ z-index: auto;
+ }
+
+ .messages-wrapper .messages-sidebox {
+ height: 100% !important;
+ }
+
+ .messages-card .messages-sidebox {
+ position: static;
+ right: auto;
+ left: auto;
+ flex-grow: 0;
+ height: auto;
+ }
+ }
+}
+
+.material-style[dir=rtl] {
+ @import "../_appwork/include-material";
+
+ .messages-sidebox-open .messages-sidebox {
+ right: 0;
+ left: auto;
+ }
+
+ @include media-breakpoint-up(sm) {
+ .message-date {
+ margin-right: auto;
+ margin-left: 0;
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ .messages-wrapper {
+ padding-right: $messages-sidebox-width;
+ padding-left: 0;
+ }
+
+ .messages-wrapper .messages-sidebox {
+ right: 0;
+ left: auto;
+ }
+ }
+}
diff --git a/public/css/overried.scss b/public/css/overried.scss
new file mode 100644
index 0000000..120ed22
--- /dev/null
+++ b/public/css/overried.scss
@@ -0,0 +1,134 @@
+// 瑕嗙洊element-ui鍘熺敓鏍峰紡
+.el-dropdown-menu{
+ li:hover {
+ background: #F0F0F0 !important;
+ color: #222222 !important;
+ }
+}
+.el-popper[x-placement^=bottom] {
+ margin-top: -5px;
+}
+
+.el-select-dropdown__empty {
+ font-size: 13px !important;
+}
+.el-select-dropdown__item {
+ font-size: 13px !important;
+}
+
+.el-select-dropdown__item.selected {
+ color: #3D68E1;
+ font-weight: 700;
+}
+
+.el-select, .el-input, .is-focus, .el-input__inner {
+ border-color: #3D68E1;
+ border-radius: 2px;
+}
+
+.el-input__inner:focus {
+ border-color: #3D68E1;
+ outline: 0;
+}
+
+.el-input--small .el-input__inner {
+ border-radius: 2px;
+}
+
+.el-input--mini .el-input__inner {
+ border-radius: 2px;
+}
+
+.el-button .el-button--primary .el-button--small {
+ border-radius: 2px;
+}
+
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+ background-color: #F0F0F0;
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+ color: #3D68E1;
+ background-color: #FFF;
+}
+.el-date-table td.end-date span, .el-date-table td.start-date span {
+ background-color: #3D68E1;
+}
+.el-date-table td.end-date span, .el-date-table td.start-date span {
+ background-color: #3D68E1;
+}
+.el-range-editor.is-active, .el-range-editor.is-active:hover {
+ border-color: #3D68E1;
+}
+.el-range-editor {
+ padding: 2px 10px;
+}
+.el-message-box {
+ display: inline-block;
+ width: 331px;
+ padding-bottom: 10px;
+ vertical-align: middle;
+ background-color: #FFF;
+ border-radius: 4px;
+ border: 1px solid #EBEEF5;
+ font-size: 18px;
+ -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+ box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+ text-align: left;
+ overflow: hidden;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+.el-message-box--center {
+ padding-bottom: 24px;
+ .el-message-box__message {
+ font-size:13px;
+ }
+}
+.el-message-box__content {
+ position: relative;
+ padding: 0px 15px 20px 15px;
+ color: #606266;
+ font-size: 13px;
+}
+
+.el-table .descending .sort-caret.descending {
+ border-top-color: #3D68E1;
+}
+
+.el-table .ascending .sort-caret.ascending {
+ border-bottom-color: #3D68E1;
+}
+.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+ background-color: #3D68E1;
+ border-color: #3D68E1;
+}
+.el-message-box{
+ .el-message-box__headerbtn{
+ top: 10px;
+ }
+ .el-message-box__btns{
+ .el-button--primary {
+ color: #FFFFFF;
+ background-color: #f53d3d;
+ border-color: #f53d3d;
+ }
+ .el-button--primary:hover {
+ background: #d22929;
+ background-color: #d22929;
+ border-color: #d22929;
+ }
+ }
+}
+.el-button--primary:active {
+ background: #3F6BE9 !important;
+ border-color: #3F6BE9 !important;
+ color: #FFFFFF;
+ outline: none;
+}
+.el-button--danger:active {
+ background: #F82323 !important;
+ border-color: #F82323 !important;
+ color: #FFFFFF;
+ outline: none;
+}
+
diff --git a/public/images/desktop/desk-logo.png b/public/images/desktop/desk-logo.png
new file mode 100644
index 0000000..dabfdaa
--- /dev/null
+++ b/public/images/desktop/desk-logo.png
Binary files differ
diff --git a/public/index.html b/public/index.html
index a862cfd..095ad5a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,31 +11,303 @@
sizes="32x32"
/>
<link rel="stylesheet" href="/fonts/alibaba/iconfont.css">
+ <link rel="stylesheet" href="/css/element-variables.scss">
<title><%= htmlWebpackPlugin.options.title %></title>
- <style>
- html,
- body,
- h2,
- p,
- ul,
- li {
- margin: 0;
- padding: 0;
+ <style src="/css/common.scss" lang="scss"></style>
+ <style src="/css/overried.scss" lang="scss"></style>
+ <style >
+ html,body {
+ font-family: "Avenir", Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+ width: 100%;
+ height: 100%;
+ }
+ .el-button--primary:hover,
+ .el-button--primary:focus {
+ background: #2249b4;
+ border-color: #2249b4;
+ }
+ .el-button--warning:hover,
+ .el-button--warning:focus {
+ background: #fd780b;
+ border-color: #fd780b;
}
- .clearfix::after{
- content: '';
- display: block;
- height: 0;
- clear: both;
+ .el-button--danger:hover,
+ .el-button--danger:focus {
+ background: #d22929;
+ border-color: #d22929;
}
- .ml10{
- margin-left: 10px;
+
+ .el-button--info {
+ color: #222222;
}
- .mr10{
- margin-right: 10px;
+ .el-button--info:hover,
+ .el-button--info:focus {
+ background: rgb(190, 190, 190);
+ border-color: rgb(190, 190, 190);
}
+
+ .el-button--text:focus,
+ .el-button--text:hover {
+ color: #2249b4;
+ }
+
+ .el-tag.el-tag--info {
+ background-color: #f4f4f5;
+ border-color: #e9e9eb;
+ color: #909399;
+ }
+ /* reset */
+ html {
+ color: #000;
+ background: #fff;
+ }
+ body,
+ div,
+ dl,
+ dt,
+ dd,
+ ul,
+ ol,
+ li,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ input,
+ button,
+ textarea,
+ p,
+ blockquote,
+ th,
+ td {
+ margin: 0;
+ padding: 0;
+ }
+ /* body {
+ font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
+ } */
+ img {
+ border: none;
+ }
+ em,
+ strong {
+ font-style: normal;
+ font-weight: normal;
+ }
+ li {
+ list-style: none;
+ }
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+ h1 {
+ font-size: 18px;
+ }
+ h2 {
+ font-size: 16px;
+ }
+ h3 {
+ font-size: 14px;
+ }
+ h4,
+ h5,
+ h6 {
+ font-size: 100%;
+ }
+ q:before,
+ q:after {
+ content: "";
+ } /* 娑堥櫎q鍓嶅悗鐨勫唴瀹� */
+ button,
+ input,
+ select,
+ textarea {
+ font-size: 100%;
+ } /* 浣垮緱琛ㄥ崟鍏冪礌鍦� ie 涓嬭兘缁ф壙瀛椾綋澶у皬 */
+ input,
+ button,
+ textarea,
+ select,
+ optgroup,
+ option {
+ font-family: inherit;
+ font-size: inherit;
+ font-style: inherit;
+ font-weight: inherit;
+ }
+ address,
+ cite,
+ dfn,
+ em,
+ var {
+ font-style: normal;
+ } /* 灏嗘枩浣撴壎姝� */
+ /* link */
+ a {
+ color: #3d68e1;
+ text-decoration: none;
+ }
+ a:hover {
+ color: #2249b4;
+ text-decoration: underline;
+ }
+ .fade-enter-active,
+ .fade-leave-active {
+ transition: opacity 0.5s;
+ }
+ .fade-enter,
+ .fade-leave-active {
+ opacity: 0;
+ }
+
+ /*瀹氫箟婊氬姩鏉￠珮瀹藉強鑳屾櫙 楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
+ ::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+ background-color: #f5f5f5;
+ }
+
+ /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
+ ::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 3px rgba(122, 120, 120, 0.3);
+ border-radius: 5px;
+ background-color: #f5f5f5;
+ }
+
+ /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+ ::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ box-shadow: inset 0 0 3px rgba(245, 243, 243, 0.3);
+ background-color: rgba(160, 158, 158, 0.8);
+ }
+ .fade-enter-active,
+ .fade-leave-active {
+ transition: opacity 0.5s;
+ }
+ .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+ opacity: 0;
+ }
+ .window {
+ z-index: 10 !important;
+ }
+ .el-card__body {
+ box-sizing: border-box;
+ }
+
+ .is-dark {
+ background: #00000090 !important;
+ }
+
+ .el-tooltip__popper {
+ border-radius: 0px;
+ padding: 5px 10px;
+ }
+
+ .atooltip.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
+ border-bottom-color: #20202090;
+ }
+ .atooltip.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
+ border-bottom-color: #68666690;
+ }
+ .atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
+ border-top-color: #20202090;
+ }
+ .atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
+ border-top-color: #68666690;
+ }
+ .atooltip.el-tooltip__popper[x-placement^="left"] .popper__arrow {
+ border-left-color: #20202090;
+ }
+ .atooltip.el-tooltip__popper[x-placement^="left"] .popper__arrow:after {
+ border-left-color: #68666690;
+ }
+ .atooltip.el-tooltip__popper[x-placement^="right"] .popper__arrow {
+ border-right-color: #20202090;
+ }
+ .atooltip.el-tooltip__popper[x-placement^="right"] .popper__arrow:after {
+ border-right-color: #68666690;
+ }
+
+ .el-menu-vertical-demo {
+ overflow-y: hidden;
+ overflow-x: hidden;
+ }
+ .el-menu-vertical-demo::-webkit-scrollbar {
+ /*婊氬姩鏉℃暣浣撴牱寮�*/
+ width: 4px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
+ height: 4px;
+ }
+ .el-menu-vertical-demo::-webkit-scrollbar-thumb {
+ /*婊氬姩鏉￠噷闈㈠皬鏂瑰潡*/
+ border-radius: 5px;
+ box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
+ -webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
+ background: rgb(202, 201, 201);
+ }
+ .el-menu-vertical-demo::-webkit-scrollbar-track {
+ /*婊氬姩鏉￠噷闈㈣建閬�*/
+ box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
+ -webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
+ border-radius: 0;
+ background: rgb(255, 255, 255);
+ }
+ .el-menu-vertical-demo::-webkit-scrollbar-thumb:hover {
+ background: rgba(0, 0, 0, 0.4);
+ }
+ .el-menu-vertical-demo:hover {
+ overflow-y: visible;
+ overflow-x: hidden;
+ }
+
+ .el-dropdown-menu__item:focus,
+ .el-dropdown-menu__item:not(.is-disabled):hover {
+ background: rgba(61, 104, 225, 0.5);
+ color: #fff;
+ }
+
+ /* 鎺у埗涓嬫媺鑿滃崟鏄剧ず6涓� */
+ .el-dropdown-menu {
+ border-radius: 0px;
+ max-height: 205px;
+ overflow: auto;
+ }
+
+ .el-range-editor.el-input__inner {
+ border-radius: 2px;
+ }
+
+ .el-message-box .el-message-box__btns .el-button--primary{
+ background-color:#3d68e1;
+ border-color:#3d68e1;
+ }
+ .el-message-box .el-message-box__btns .el-button--primary:hover{
+ background-color:#2249b4;
+ border-color:#2249b4;
+ }
+ .btn-icon {
+ cursor: pointer;
+ }
+
+ .btn-icon:hover {
+ filter: drop-shadow(0 0 0 #fff);
+ opacity: 0.8;
+ }
+ .clearfix::after{
+ content: '';
+ display: block;
+ height: 0;
+ clear: both;
+ }
</style>
+
</head>
<body>
<noscript>
diff --git a/src/components/canvas/index.vue b/src/components/canvas/index.vue
index fc937e1..b8ac906 100644
--- a/src/components/canvas/index.vue
+++ b/src/components/canvas/index.vue
@@ -473,6 +473,11 @@
};
</script>
<style lang="scss" scoped>
+canvas{
+ position: absolute;
+ top: 0;
+ left: 0;
+}
.s-cavas {
width: 576px;
height: 324px;
diff --git a/src/components/subComponents/DataStackCard.vue b/src/components/subComponents/DataStackCard.vue
index 3a52bf8..fa6f9c4 100644
--- a/src/components/subComponents/DataStackCard.vue
+++ b/src/components/subComponents/DataStackCard.vue
@@ -207,7 +207,7 @@
display: flex;
align-items: center;
.card-name {
- width:38%;
+ width:40%;
height:100%;
display:flex;
justify-content: center;
diff --git a/src/components/subComponents/SystemInfo.vue b/src/components/subComponents/SystemInfo.vue
index acb8c26..26f5206 100644
--- a/src/components/subComponents/SystemInfo.vue
+++ b/src/components/subComponents/SystemInfo.vue
@@ -114,7 +114,7 @@
},
borderWidth: {
type: String,
- default: '70%'
+ default: '64%'
},
liquidWidth: {
type: String,
diff --git a/src/pages/algorithmManage/index/App.vue b/src/pages/ai/index/App.vue
similarity index 100%
rename from src/pages/algorithmManage/index/App.vue
rename to src/pages/ai/index/App.vue
diff --git a/src/pages/algorithmManage/index/api.ts b/src/pages/ai/index/api.ts
similarity index 100%
rename from src/pages/algorithmManage/index/api.ts
rename to src/pages/ai/index/api.ts
diff --git a/src/pages/algorithmManage/index/main.ts b/src/pages/ai/index/main.ts
similarity index 100%
rename from src/pages/algorithmManage/index/main.ts
rename to src/pages/ai/index/main.ts
diff --git a/src/pages/algorithmManage/index/mixins.ts b/src/pages/ai/index/mixins.ts
similarity index 100%
rename from src/pages/algorithmManage/index/mixins.ts
rename to src/pages/ai/index/mixins.ts
diff --git a/src/pages/algorithmManage/index/store/index.ts b/src/pages/algorithmManage/index/store/index.ts
deleted file mode 100644
index e69de29..0000000
--- a/src/pages/algorithmManage/index/store/index.ts
+++ /dev/null
diff --git a/src/pages/algorithmManage/index/store/modules/algorithm.js b/src/pages/algorithmManage/index/store/modules/algorithm.js
deleted file mode 100644
index e7735dc..0000000
--- a/src/pages/algorithmManage/index/store/modules/algorithm.js
+++ /dev/null
@@ -1,79 +0,0 @@
-const state = {
- list1 = [],
- list2 = [
- {
- id: "001",
- name: "浠诲姟1",
- child: [
- {
- id: "1",
- sdk_name: "浜鸿劯妫�娴�",
- isSelect: false
- },
- {
- id: "2",
- sdk_name: "浜鸿劯瀵规瘮",
- isSelect: false
- }
- ],
- isSetting: false,
- isShowSetAlgo: false
- }
- ],
- argsList : [],
- baseObject : {
- id: '',
- algoId: '',
- options1: [],
- options2: [],
- options3: [],
- value1: '',
- value2: '',
- value3: '',
- unit: ''
- },
- currentAlgoId : '',
- currentTaskId : ''
-};
-
-const getters = {};
-
-const mutations = {
- findAllSdk(state, data){
- state.list1 = data;
- },
- findByType(state, data){
- state.baseObject.options2 = data;
- }
-};
-const actions = {
- findAllSdk({commit},params) {
- let res = await findAllSdk({});
- if (res && res.success) {
- commit('findAllSdk',res.data)
- }
- },
-
- findByType({commit},params) {
- let res = await findByType({});
- console.log(res,'findByType')
- if (res && res.success) {
- let list = res.data.RULECOMPUTEBETWEEN.map((i) => {
- let obj = {}
- obj.name = i.name
- obj.value = i.value
- return obj
- })
- //this.baseObject.options2 = [...list]
- commit('findByType',[...list]);
- }
- },
-
-
-};
-export default{
- state,
- getters,
- actions,
- mutations
-}
\ No newline at end of file
diff --git a/src/pages/cameraAccess/components/CameraInfo.vue b/src/pages/cameraAccess/components/CameraInfo.vue
index e108dd6..3c7dd49 100644
--- a/src/pages/cameraAccess/components/CameraInfo.vue
+++ b/src/pages/cameraAccess/components/CameraInfo.vue
@@ -606,9 +606,9 @@
<style lang="scss">
.camera-info {
width: 100%;
- height: 100%;
+
margin-left: 20px;
- overflow: auto;
+
.ai-select {
text-align: left;
}
diff --git a/src/pages/cameraAccess/components/LinkageRule.vue b/src/pages/cameraAccess/components/LinkageRule.vue
index f34535c..fc10795 100644
--- a/src/pages/cameraAccess/components/LinkageRule.vue
+++ b/src/pages/cameraAccess/components/LinkageRule.vue
@@ -5,7 +5,7 @@
<b style="font-size: 14px;line-height: 18px;">宸查�夌畻娉�</b>
</p>
- <div>
+ <div class="clearfix">
<div class="slide-scene">
<span class="task-tip" v-if="tableRuleList.length == 0 ">鏆傛棤绠楁硶锛岃鍦ㄧ嫭绔嬭鍒欎腑閫夋嫨绠楁硶</span>
<slide-scene :sceneData="tableRuleList"></slide-scene>
@@ -15,7 +15,7 @@
<div class="top-right">
<sysinfo
v-if="showSysInfo"
- style="margin-left: 25px;margin-top: -10px;"
+ style="margin-left: 10px;margin-top: -10px;"
:ShowLocalVedio="this.TreeDataPool.treeActiveName !== 'camera'"
:showRealPoll="this.TreeDataPool.treeActiveName == 'camera'"
/>
@@ -24,9 +24,7 @@
</div>
<div class="bottom">
- <div
- style="width: calc(100% + 80px);height: 10px;background-color: #E9EBF2;p;position:relative;left:-50px"
- ></div>
+ <div class="devide"></div>
<div class="bottom-right">
<div class="draw-and-time-box">
<div class="draw-box">
@@ -279,10 +277,14 @@
width: 100%;
height: 100%;
position: relative;
+ .devide{
+ height: 10px;
+ background: #E9EBF2;
+ }
.top {
width: 100%;
- height: 174px;
- position: relative;
+ padding: 10px 20px;
+ box-sizing: border-box;
top: 0;
.swiper-box {
height: 100%;
@@ -391,9 +393,7 @@
.bottom {
width: 100%;
- height: calc(100% - 190px);
- position: absolute;
- top: 190px;
+
.bottom-side {
height: 100%;
width: 250px;
@@ -419,11 +419,7 @@
}
}
.bottom-right {
- width: calc(100% + 30px);
- height: 100%;
- float: left;
- overflow: auto;
- padding: 10px 0px;
+ padding: 10px 20px;
box-sizing: border-box;
.draw-and-time-box {
height: 430px;
diff --git a/src/pages/cameraAccess/components/SeparateRules.vue b/src/pages/cameraAccess/components/SeparateRules.vue
index 807cc3b..b9580df 100644
--- a/src/pages/cameraAccess/components/SeparateRules.vue
+++ b/src/pages/cameraAccess/components/SeparateRules.vue
@@ -61,7 +61,7 @@
v-if="Camera.analytics"
class="flex-box"
>
- <span >绠楁硶蹇�熼�氶亾</span>
+ <span class="label">绠楁硶蹇�熼�氶亾</span>
<div class="channel flex-box" >
<el-tooltip
effect="dark"
@@ -95,7 +95,7 @@
<div class="devide"></div>
- <div class="top" style="top:60px;">
+ <div class="top" >
<p class="task-css">
<b style="font-size: 14px; line-height: 18px;">鍦烘櫙</b>
</p>
@@ -106,7 +106,7 @@
:showRealPoll="cameraType === 'camera'"
:ShowLocalVedio="cameraType === 'dataStack'"
v-if="showSysInfo"
- style="margin-left: 25px;margin-top:-10px"
+ style="margin-left: 10px;margin-top:-10px"
/>
</div>
</div>
@@ -484,8 +484,18 @@
-webkit-box-sizing: border-box;
box-sizing: border-box;
.ai-select{
+ text-align: left;
line-height: 30px;
height: 30px;
+ .flex-box{
+ .label{
+ &+label,&+div{
+ margin-left: 10px;
+ line-height: 1;
+ }
+
+ }
+ }
}
.ai-select>div{
display: inline-block;
@@ -494,6 +504,7 @@
.channel{
display: inline-block;
+ vertical-align: middle;
}
}
}
diff --git a/src/pages/cameraAccess/components/scene/SlideScene.vue b/src/pages/cameraAccess/components/scene/SlideScene.vue
index 8494733..d2c7849 100644
--- a/src/pages/cameraAccess/components/scene/SlideScene.vue
+++ b/src/pages/cameraAccess/components/scene/SlideScene.vue
@@ -8,34 +8,34 @@
<div class="scenario-icon">
<div class="single" v-if="item.rules.length==1">
<div class="svg-wrap">
- <svg class="icon" aria-hidden="true" style="font-size:4rem;">
+ <!-- <svg class="icon" aria-hidden="true" style="font-size:4rem;">
<use :xlink:href="`#${item.rules[0].icon}`" />
- </svg>
- <!-- <img class="baseImg" :src="`data:image/png;base64,${item.rules[0].iconBlob}`" alt=""> -->
+ </svg> -->
+ <img class="baseImg" :src="`data:image/png;base64,${item.rules[0].icon_blob}`" alt="">
</div>
</div>
<div class="double" v-else-if="item.rules.length==2">
<div class="svg-wrap" v-for="(rule,index) in item.rules" :key="index">
- <svg class="icon" aria-hidden="true" style="font-size:2rem;">
+ <!-- <svg class="icon" aria-hidden="true" style="font-size:2rem;">
<use :xlink:href="`#${rule.icon}`" />
- </svg>
- <!-- <img class="baseImg" :src="`data:image/png;base64,${rule.iconBlob}`" alt=""> -->
+ </svg> -->
+ <img class="baseImg" :src="`data:image/png;base64,${rule.icon_blob}`" alt="">
</div>
</div>
<div class="third" v-else-if="item.rules.length==3">
<div class="svg-wrap" v-for="(rule,index) in item.rules" :key="'t'+index">
- <svg class="icon" aria-hidden="true" style="font-size:2rem;">
+ <!-- <svg class="icon" aria-hidden="true" style="font-size:2rem;">
<use :xlink:href="`#${rule.icon}`" />
- </svg>
- <!-- <img class="baseImg" :src="`data:image/png;base64,${rule.iconBlob}`" alt=""> -->
+ </svg> -->
+ <img class="baseImg" :src="`data:image/png;base64,${rule.icon_blob}`" alt="">
</div>
</div>
<div class="four" v-else-if="item.rules.length==4">
<div class="svg-wrap" v-for="(rule,index) in item.rules" :key="'f'+index">
- <svg class="icon" aria-hidden="true" style="font-size:2rem;">
+ <!-- <svg class="icon" aria-hidden="true" style="font-size:2rem;">
<use :xlink:href="`#${rule.icon}`" />
- </svg>
- <!-- <img class="baseImg" :src="`data:image/png;base64,${rule.iconBlob}`" alt=""> -->
+ </svg> -->
+ <img class="baseImg" :src="`data:image/png;base64,${rule.icon_blob}`" alt="">
</div>
</div>
</div>
@@ -217,11 +217,12 @@
padding-top: 47%;
text-align: center;
box-shadow: 0 0 3px 2px rgb(247, 247, 247) inset;
- svg {
+ img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
+ width: 96%;
}
}
}
@@ -232,6 +233,7 @@
left: 50%;
transform: translate(-50%, -50%);
box-shadow: none;
+ width: 100%
}
}
.double {
diff --git a/src/pages/cameraAccess/index/App.vue b/src/pages/cameraAccess/index/App.vue
index ed18d33..c16940c 100644
--- a/src/pages/cameraAccess/index/App.vue
+++ b/src/pages/cameraAccess/index/App.vue
@@ -1,13 +1,13 @@
<template>
- <div class="column">
- <div class="column-left" :style="`height:${screenHeight}px;`">
+ <div class="column" :style="`height:${screenHeight}px;`">
+ <div class="column-left" ref="left">
<div class="resize-bar"></div>
<div class="resize-line"></div>
<div class="resize-save">
- <left-nav :appName="app" :height="screenHeight - 40"></left-nav>
+ <left-nav :appName="app" :edit="editTree"></left-nav>
</div>
</div>
- <div class="column-right" :style="`height:${screenHeight}px;`">
+ <div class="column-right" >
<right-side />
</div>
</div>
@@ -31,16 +31,20 @@
},
data() {
return {
+ leftWith: 0,
screenHeight: 0,
+ editTree: true
}
},
mounted() {
- this.screenHeight = document.documentElement.clientHeight - 20;
+ this.screenHeight = document.documentElement.clientHeight;
window.onresize = () => {
return (() => {
- this.screenHeight = document.documentElement.clientHeight - 20;
+ this.screenHeight = document.documentElement.clientHeight;
})();
};
+ debugger
+ this.leftWith = this.$refs['left'].width;
},
methods: {
getUrlKey() {
@@ -53,19 +57,23 @@
<style lang="scss" scoped>
.column {
- overflow: hidden;
+ //overflow: hidden;
+ display: flex;
+ width: 100%;
}
.column-left {
height: inherit;
background-color: #fff;
position: relative;
- float: left;
}
.column-right {
- height: 100%;
+ min-width: 1442px;
+ flex:1;
+ position: relative;
background-color: #fff;
box-sizing: border-box;
overflow: auto;
+ //height: 100%;
}
.resize-save {
position: absolute;
@@ -73,8 +81,9 @@
right: 5px;
bottom: 0;
left: 0;
- padding: 16px;
+ padding: 14px;
overflow-x: hidden;
+ overflow-y: hidden;
}
.resize-bar {
width: 310px;
@@ -84,7 +93,7 @@
opacity: 0;
overflow: scroll;
max-width: 500px; //璁惧畾鏈�澶ф媺浼搁暱搴�
- min-width: 310px; //璁惧畾鏈�灏忓搴�
+ min-width: 33px; //璁惧畾鏈�灏忓搴�
}
/* 鎷栨嫿绾� */
.resize-line {
@@ -92,8 +101,8 @@
right: 0;
top: 0;
bottom: 0;
- border-right: 2px solid #eee;
- border-left: 1px solid #bbb;
+ border-right: 2px solid #efefef;
+ border-left: 1px solid #e0e0e0;
pointer-events: none;
}
.resize-bar:hover ~ .resize-line,
diff --git a/src/pages/cameraAccess/index/VideoManage.vue b/src/pages/cameraAccess/index/VideoManage.vue
index b06836b..c388bb9 100644
--- a/src/pages/cameraAccess/index/VideoManage.vue
+++ b/src/pages/cameraAccess/index/VideoManage.vue
@@ -1,6 +1,6 @@
<template>
<div class="s-video-manage">
- <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
+ <el-tabs class="video-tab" v-model="activeName" type="border-card" @tab-click="handleClick">
<el-tab-pane
:label="firstLabeName"
name="camera-info"
@@ -231,8 +231,6 @@
height: 100%;
float: right;
box-sizing: border-box;
- padding: 16px;
- background-color: #e9ebf2;
.el-tabs--border-card {
box-shadow: none;
-webkit-box-shadow: none;
@@ -249,9 +247,16 @@
.el-tabs--border-card {
height: 100%;
width: 100%;
+ &.video-tab{
+ &>.el-tabs__header{
+ position: fixed;
+ top:0;
+ width:100%;
+ z-index:9;
+ }
+ }
.el-tabs__header {
- position: fixed;
- top: 16px;
+
.is-active {
color: #3d68e1 !important;
}
diff --git a/src/pages/cameraVideo/index/Video.vue b/src/pages/cameraVideo/index/Video.vue
index 32cd6ca..b8cf1a2 100644
--- a/src/pages/cameraVideo/index/Video.vue
+++ b/src/pages/cameraVideo/index/Video.vue
@@ -1,5 +1,5 @@
<template>
- <div style="height: 100%;">
+ <div style="width:100%; height: 100%;">
<div class="monitoring-right" ref="videoRight">
<div class="monitoring-video" ref="monitorVideo">
<div class="monitoring-video-guid">
@@ -558,10 +558,9 @@
float: right;
box-sizing: border-box;
padding: 10px;
- background-color: #fff;
+ background-color: #e9ebf2;
.monitoring-video {
width: 70.5%;
- //min-width: 800px;
min-width: 740px;
max-width: 1208px;
height: 75%;
diff --git a/src/pages/desktop/index/components/DFrame.vue b/src/pages/desktop/index/components/DFrame.vue
index 86c96e5..c6e7cc6 100644
--- a/src/pages/desktop/index/components/DFrame.vue
+++ b/src/pages/desktop/index/components/DFrame.vue
@@ -3,9 +3,10 @@
v-show="data.isShow"
:class="['d-frame', {'d-frame-full': fullScreen}]"
:data-id="data.id"
- v-bind:style="{left: data.leftOffset + '%', top: data.topOffset + '%', 'z-index': 125 + data.order, width: width + 'px', height: height + 'px'}"
+ v-bind:style="{left: data.leftOffset + 'px', top: data.topOffset + 'px', 'z-index': 125 + data.order, width: width + 'px', height: height + 'px'}"
+ @click="frameClick"
>
- <div class="d-frame-title" v-drag @click="frameClick()">
+ <div class="d-frame-title" v-drag>
<div class="d-frame-title-operation">
<i class="icon-minus d-frame-operation-minus" @click="minFrame(data,$event)">
<img :src="`${publicPath}images/desktop/header-icon/min.png`" alt />
@@ -25,7 +26,7 @@
</div>
</slot>
</div>
- <div class="d-frame-content">
+ <div class="d-frame-content" @click="frameClick" >
<iframe :src="data.url" v-if="data.url"></iframe>
<div v-html="data.html" v-if="data.html"></div>
<!-- <span class="d-frame-operation-resize" v-resize></span> -->
@@ -94,8 +95,8 @@
changeFullScreen: function () {
this.fullScreen = !this.fullScreen;
},
- frameClick: function () {
- debugger
+ frameClick() {
+
this.$store.commit('desktop/refreshFrame', this.data);
},
minFrame(data, e) {
@@ -149,16 +150,16 @@
let toLeft = e.clientX - disx;
let toTop = e.clientY - disy;
//杈圭晫澶勭悊
- if (toLeft <= 0) {
- toLeft = 0
- } else if (toLeft >= document.body.getBoundingClientRect().width - 40) {
- toLeft = document.body.getBoundingClientRect().width - 40;
+ if (toLeft <= -(el.parentElement.offsetWidth-46*3)) {
+ toLeft = -(el.parentElement.offsetWidth-46*3)
+ } else if (toLeft >= document.body.getBoundingClientRect().width - 46*3) {
+ toLeft = document.body.getBoundingClientRect().width - 46*3;
}
el.parentElement.style.left = toLeft + 'px';
if (toTop <= 40) {
toTop = 40
- } else if (toTop >= document.body.getBoundingClientRect().height - 40) {
- toTop = document.body.getBoundingClientRect().height - 40;
+ } else if (toTop >= document.body.getBoundingClientRect().height - 31) {
+ toTop = document.body.getBoundingClientRect().height - 31;
}
el.parentElement.style.top = toTop + 'px';
};
@@ -203,6 +204,7 @@
}
.d-frame {
position: fixed;
+ box-shadow: 0 5px 10px rgba(0,0,0,.5);
}
.d-frame.d-frame-full {
@@ -240,6 +242,7 @@
text-align: center;
vertical-align: middle;
cursor: pointer;
+ line-height: 28px;
}
.d-frame-title-operation i:hover {
diff --git a/src/pages/desktop/index/components/Tools.vue b/src/pages/desktop/index/components/Tools.vue
index 24d5c47..8bcadc0 100644
--- a/src/pages/desktop/index/components/Tools.vue
+++ b/src/pages/desktop/index/components/Tools.vue
@@ -183,6 +183,7 @@
}
.tools-middle .dock-item-wrap.actived{
border-color: #40c3ff;
+ background-color: #98aabe;
}
.dock-item-wrap a {
height: 100%;
diff --git a/src/pages/desktop/index/mock/userData.json b/src/pages/desktop/index/mock/userData.json
index dcdf442..c55fcb2 100644
--- a/src/pages/desktop/index/mock/userData.json
+++ b/src/pages/desktop/index/mock/userData.json
@@ -28,11 +28,11 @@
{
"id": "9",
"name": "algorithmManage",
- "src": "../../images/app-mid/algorithm-manage.png",
- "alt": "绠楁硶绠＄悊",
+ "src": "../../images/app-mid/algorithm-store.png",
+ "alt": "搴旂敤涓績",
"type": "2",
- "url": "/view/algorithmManage",
- "title": "绠楁硶绠＄悊",
+ "url": "/view/ai",
+ "title": "搴旂敤涓績",
"width": 1528,
"height": 915
},
@@ -129,7 +129,9 @@
"alt": "绯荤粺缁存姢",
"type": "2",
"url": "/view/vindicate",
- "title": "绯荤粺缁存姢"
+ "title": "绯荤粺缁存姢",
+ "width": 733,
+ "height": 534
}
]
}
diff --git a/src/pages/desktop/index/store/modules/desktop.js b/src/pages/desktop/index/store/modules/desktop.js
index b6eaa52..3016c49 100644
--- a/src/pages/desktop/index/store/modules/desktop.js
+++ b/src/pages/desktop/index/store/modules/desktop.js
@@ -89,13 +89,17 @@
offset = 5;
}
}
- dframe.leftOffset = state.framesOffset + order;
- dframe.topOffset = state.framesOffset + order;
+ // dframe.leftOffset = state.framesOffset + order;
+ // dframe.topOffset = state.framesOffset + order;
dframe.order = 0;
dframe.isShow = true;
let curDframe = state.docks.find(dock => dock.id == dframe.id);
dframe.width = curDframe.width;
dframe.height = curDframe.height;
+ //鍏ㄩ儴缁濆灞呬腑
+ dframe.leftOffset = (document.body.offsetWidth - dframe.width)/2;
+ dframe.topOffset = (document.body.offsetHeight - dframe.height)/2;
+
state.framesOrder = order;
state.framesOffset = offset;
state.frames.push(dframe);
@@ -103,7 +107,7 @@
return true;
},
addMinDock: (state, dock) => {
- debugger
+
let ids = state.minDocks.map(item => item.id);
if (ids.indexOf(dock.id) > -1) {
@@ -180,16 +184,16 @@
state.safari.isShow = true;
},
refreshFrame: (state, item) => {
- debugger
+
state.frames.forEach(function (it) {
- debugger
+
if (it.id === item.id) {
it.order = 1;
state.minDocks.forEach((min,index)=>{
- debugger
+
if(min.id == it.id){
- debugger
+
min.highlight = true;
}else{
min.highlight = false;
--
Gitblit v1.8.0