实时监控/摄像机配置/数据栈配置布局调整,应用窗口调整,算法管理更换为应用中心

hanbaoshan

2020-08-06 d259bd9cf2943926d1c8078ee0ce70a0aa1afef3

实时监控/摄像机配置/数据栈配置布局调整,应用窗口调整,算法管理更换为应用中心

 public/css/common.scss

New file
@@ -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;
}
/* 自定义flex布局 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;
}

 public/css/element-variables.scss

New file
@@ -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;
}

 public/css/messages.scss

New file
@@ -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;
    }
  }
}

 public/css/overried.scss

New file
@@ -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;
}


 public/images/desktop/desk-logo.png

 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>

 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;

 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;

 src/components/subComponents/SystemInfo.vue

@@ -114,7 +114,7 @@
    },
    borderWidth: {
      type: String,
      default: '70%'
      default: '64%'
    },
    liquidWidth: {
      type: String,

 src/pages/ai/index/App.vue

 src/pages/ai/index/api.ts

 src/pages/ai/index/main.ts

 src/pages/ai/index/mixins.ts

 src/pages/algorithmManage/index/store/index.ts

 src/pages/algorithmManage/index/store/modules/algorithm.js

File was deleted

 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;
  }

 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;

 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;
        }
      }
    }

 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 {


 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,

 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;
      }

 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%;

 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 {

 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%;

 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
      }
    ]
  }

 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;