openatc-components 0.0.88 → 0.0.91

package/static/styles/channelizatioon.scss

@@ -0,0 +1,365 @@
+// 渠化图组件
+.custom-cross-part {
+  padding-top: 8PX;
+  // padding-left: 28PX;
+  height: 100%;
+  .first-import-crossmap {
+    height: 100%;
+    background-color: $--color-white;
+    position: relative;
+    margin-left: 28PX;
+    .import-btn {
+      min-width: 218PX;
+      text-align: center;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      .el-button {
+        width: 220PX;
+        height: 60PX;
+        border-radius: 4PX;
+        line-height: 60PX;
+        padding: 0;
+        font-size: 20PX;
+        font-weight: 400;
+      }
+      .tip {
+        font-size: 14PX;
+        font-weight: 400;
+        color: $--color-text-regular;
+        line-height: 22PX;
+        margin-top: 22PX;
+      }
+    }
+  }
+  .custom-cross {
+    .custom-main {
+      width: 100%;
+      overflow: hidden;
+    }
+    .drawPanelAnimation {
+      transition-property: opacity , width;
+      transition-duration: 0.5s , 0.5s;
+    }
+    .custom-group {
+      // width: 980PX;
+      width: calc(64% - 28PX);
+      margin-left: 28PX;
+      float: left;
+      background-color: $--color-white;
+      border: solid 1PX $--border-color-lighter;
+      // margin-right: 20PX;
+      .draw-function {
+        overflow: hidden;
+        padding: 20PX;
+        .again-import {
+          float: left;
+          .import-label {
+            font-size: 14PX;
+            font-weight: 400;
+            color: $--color-text-primary;
+            margin-right: 23PX;
+          }
+          .again-import-btn {
+            padding: 0;
+            line-height: 32PX;
+            width: 90PX;
+            height: 32PX;
+          }
+        }
+        .draw-to-sketchpad {
+          float: right;
+          overflow: hidden;
+          .drawtip {
+            float: left;
+            font-size: 14PX;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            color: #909399;
+            line-height: 22PX;
+            margin-right: 14PX;
+            line-height: 32PX;
+          }
+          .draw-operation {
+            float: left;
+          }
+        }
+      }
+      .sketchpad-area {
+        position: relative;
+        // min-height: 702PX;
+        height: 652PX;
+        overflow: auto;
+        .cross-map-part {
+          position: relative;
+          min-height: 650PX;
+        }
+        /* 删除hover的虚线框 */
+        .drr:hover:before {
+          outline: none;
+        }
+        .drr.active:before {
+          outline: 2PX dashed lightskyblue;
+        }
+        .channelization-elements-components {
+          border: 1px solid $--border-color-base;
+          margin: 0 auto;
+        }
+      }
+      .draw-end-function {
+        text-align: center;
+        padding-bottom: 60PX;
+        margin-top: 52PX;
+        .el-button {
+          width: 90PX;
+          height: 32PX;
+          padding: 0;
+          line-height: 32PX;
+        }
+      }
+    }
+    #sketchpadArea{
+      cursor: default;
+      overflow: hidden;
+    }
+    .custom-edit {
+      float: left;
+      // width: calc(100% - 980PX - 20PX);
+      // width: 515PX;
+      width: calc(36% - 20PX);
+      margin-left: 20PX;
+      background-color: $--color-white;
+      border: solid 1PX $--border-color-lighter;
+      padding: 22PX;
+      padding-right: 0PX;
+      min-height: 916PX;
+      .each-icon {
+        float: left;
+        .single-icon {
+          margin-right: 10PX;
+          text-align: center;
+          cursor:pointer;
+          width: 70PX;
+          height: 70PX;
+          background-color: #edf6ff;
+          border-radius: 6PX;
+          line-height: 1.15;
+          .patternWalk{
+            left: 14PX !important;
+          }
+          .closephase-icon {
+            margin-top: 10PX;
+            width: 56PX;
+            height: 24PX;
+          }
+          .direction-icon {
+            margin-top: 22PX;
+            width: 30PX;
+            height: 30PX;
+          }
+          .type-icon {
+            margin-top: 11PX;
+            width: 48PX;
+            height: 48PX;
+          }
+          .ped-icon {
+            margin-top: 11PX;
+            width: 48PX;
+            height: 48PX;
+          }
+        }
+        .single-icon-select {
+          text-align: center;
+          cursor:pointer;
+          width: 70PX;
+          height: 70PX;
+          background-color: #a2cfff;
+          border-radius: 6PX;
+        }
+        .single-icon-name {
+          width: 70PX;
+          margin-top: 3PX;
+          font-size: 12PX;
+          font-weight: normal;
+          font-stretch: normal;
+          line-height: 22PX;
+          letter-spacing: 0PX;
+          color: $--color-text-regular;
+          text-align: center;
+          height: 40PX;
+        }
+      }
+      .tittle {
+        height: 20PX;
+        font-size: 20PX;
+        font-weight: 400;
+        color: $--color-text-primary;
+        line-height: 22PX;
+        margin-bottom: 17PX;
+      }
+      .lane-edit-panel {
+        position: relative;
+        .edit-id {
+          position: absolute;
+          right: 30PX;
+          top: 0PX;
+          color: $--color-text-primary;
+          font-size: 20PX;
+        }
+        .directions, .position, .lane-types, .ped-type, .ped-position, .detector-type, .detector-associated {
+          overflow: hidden;
+          margin-bottom: 55PX;
+        }
+        .delete-drawed-item {
+          text-align: center;
+          margin-top: 57PX;
+        }
+        .detector-threshold-formtext {
+          color: $--color-text-regular;
+        }
+      }
+      .phase-associated-component {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        .phase-box {
+          float: left;
+          margin-top: 10PX;
+            .single-phase {
+              margin-right: 10PX;
+              text-align: center;
+              cursor:pointer;
+              width: 70PX;
+              height: 70PX;
+              background-color: #edf6ff;
+              border-radius: 6PX;
+              line-height: 1.15;
+              position: relative;
+              .phase-icon {
+                position: absolute;
+                left: 14PX;
+                top: 15PX;
+              }
+              .ped-icon {
+                position: absolute;
+                left: 14PX;
+                top: 15PX;
+              }
+              .patternWalk{
+                left: 14PX !important;
+              }
+              .delete-phase-icon {
+                position: absolute;
+                right: 3PX;
+                top: 0PX;
+                z-index: 99;
+                .el-icon-close {
+                  font-size: 6PX;
+                }
+              }
+            }
+            .single-phase-select {
+              background-color: #a2cfff;
+            }
+            .single-phase-name {
+              width: 70PX;
+              margin-top: 3PX;
+              font-size: 12PX;
+              font-weight: normal;
+              font-stretch: normal;
+              line-height: 22PX;
+              letter-spacing: 0PX;
+              color: $--color-text-regular;
+              text-align: center;
+              height: 40PX;
+            }
+        }
+      
+        .add-phase {
+          padding-top: 23PX;
+        }
+        .icon-fangda {
+          font-size: 24PX;
+          color: #409EFF;
+        }
+        .add-disabled {
+          color: #bcbec2;
+          background-color: #f4f4f5;
+        }
+        .special-lane {
+          display:flex;
+          flex-direction:row;
+          justify-content:center;
+          align-items:center;
+        }
+      }
+    }
+    .footer-btn {
+      margin-bottom: 20PX;
+    }
+    .phaseText {
+      // color: $--color-text-regular;
+      color: #fff;
+      position: absolute;
+      height: 14PX;
+      font-size: 14PX;
+    }
+    .edit-icon-btn {
+      min-width: 128PX;
+      height: 32PX;
+      border: 1PX solid $--border-color-base;
+      border-radius: 4PX;
+      padding: 0;
+      color: $--color-text-regular;
+      &:hover {
+        color: $--color-text-regular;
+      }
+      .lane-icon-svg {
+        float: left;
+        position: relative;
+        top: 1PX;
+        left: 13PX;
+        > div {
+          float: left;
+        }
+      }
+      .btn-label {
+        float: left;
+        position: relative;
+        top: 2PX;
+        left: 23PX;
+      }
+      .highlightColor {
+        color: $--color-primary;
+      }
+      .defaultColor {
+        color: $--color-text-regular;
+      }
+    }
+    .phase-table {
+      margin-top: 20PX;
+    }
+  }
+}
+.show-channelization {
+  .channelization-elements-components {
+    .cross-map-part {
+      position: relative;
+      min-height: 650PX;
+    }
+    .drr:hover:before {
+      outline: none;
+    }
+    .drr.active:before {
+      outline: 2PX dashed lightskyblue;
+    }
+    .phaseText {
+      // color: $--color-text-regular;
+      color: #fff;
+      position: absolute;
+      height: 14PX;
+      font-size: 14PX;
+    }
+  }
+}

package/static/styles/common.scss

@@ -1,20 +1,21 @@
-@import './intersection.scss';
-@import './schemeconfig.scss';
-@import './commonkanban.scss';
-@import './stages.scss';
-@import './overview.scss';
-
- // 全局滚动条样式
- ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-::-webkit-scrollbar-thumb {
-  // 滚动条的滑块
-  border-radius: 4px;
-  background: rgba(144, 147, 153, 0.3);
-}
-::-webkit-scrollbar-corner{
-  // 横向滚动条和纵向滚动条同时出现，右下角有个小白方格
-  background: transparent;
+@import './intersection.scss';
+@import './schemeconfig.scss';
+@import './commonkanban.scss';
+@import './stages.scss';
+@import './overview.scss';
+@import './channelizatioon.scss';
+
+ // 全局滚动条样式
+ ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-thumb {
+  // 滚动条的滑块
+  border-radius: 4px;
+  background: rgba(144, 147, 153, 0.3);
+}
+::-webkit-scrollbar-corner{
+  // 横向滚动条和纵向滚动条同时出现，右下角有个小白方格
+  background: transparent;
 }

package/static/styles/commonkanban.scss

@@ -1,88 +1,88 @@
-// 公共面板组件通用样式
-.common-board-column {
-  min-width: 180px;
-  min-height: 100px;
-  max-width: 350px;
-  height: auto;
-  overflow: hidden;
-  // background: #f0f0f0;
-  // border: 1px solid $--border-color-base;
-.common-phase-description {
-  position: relative;
-  background: rgb(217, 236, 255);
-  width: 42px;
-  height: 40px;
-}
-
-
-.common-board-column-header {
-  line-height: 40px;
-  overflow: hidden;
-  text-align: center;
-  background: $--color-primary;
-  color: #FFFFFF;
-  height: 40px;
-}
-.common-board-table-header {
-  height: 42px;
-  overflow: hidden;
-  text-align: center;
-  margin-bottom: -20px;
-  font-size: 14px;
-  color: $--color-info;
-  background-color: $--color-black;
-  border: 20px solid transparent;
-  border-bottom-width: 0px;
-  .common-titlecolumn {
-    float: left;
-    text-align: left;
-  }
-  .phase {
-    width: 50px;
-  }
-  .mode {
-    width: calc(100% - 50px)
-  }
-}
-
-.common-board-column-content {
-  height: auto;
-  overflow: hidden;
-  border: 10px solid transparent;
-  min-height: 60px;
-  display: flex;
-  justify-content: flex-start;
-  flex-direction: column;
-  align-items: center;
-  background-color: $--color-black;
-  border-width: 20px;
-  border-top-width: 16px;
-  border-bottom-width: 15px;
-  .common-contentcolumn {
-    float: left;
-  }
-  .phase {
-    width: 40px;
-  }
-  .mode {
-    margin-left: 10px;
-    width: calc(100% - 50px);
-  }
-
-  .common-board-item {
-    cursor: pointer;
-    width: 100%;
-    height: 40px;
-    margin-top: 10px;
-    text-align: left;
-    box-sizing: border-box;
-    .el-input {
-      width: 100%;
-      .el-input__inner {
-        height: 40px;
-        line-height: 40px;
-      }
-    }
-  }
-}
+// 公共面板组件通用样式
+.common-board-column {
+  min-width: 180px;
+  min-height: 100px;
+  max-width: 350px;
+  height: auto;
+  overflow: hidden;
+  // background: #f0f0f0;
+  // border: 1px solid $--border-color-base;
+.common-phase-description {
+  position: relative;
+  background: rgb(217, 236, 255);
+  width: 42px;
+  height: 40px;
+}
+
+
+.common-board-column-header {
+  line-height: 40px;
+  overflow: hidden;
+  text-align: center;
+  background: $--color-primary;
+  color: #FFFFFF;
+  height: 40px;
+}
+.common-board-table-header {
+  height: 42px;
+  overflow: hidden;
+  text-align: center;
+  margin-bottom: -20px;
+  font-size: 14px;
+  color: $--color-info;
+  background-color: $--color-black;
+  border: 20px solid transparent;
+  border-bottom-width: 0px;
+  .common-titlecolumn {
+    float: left;
+    text-align: left;
+  }
+  .phase {
+    width: 50px;
+  }
+  .mode {
+    width: calc(100% - 50px)
+  }
+}
+
+.common-board-column-content {
+  height: auto;
+  overflow: hidden;
+  border: 10px solid transparent;
+  min-height: 60px;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  align-items: center;
+  background-color: $--color-black;
+  border-width: 20px;
+  border-top-width: 16px;
+  border-bottom-width: 15px;
+  .common-contentcolumn {
+    float: left;
+  }
+  .phase {
+    width: 40px;
+  }
+  .mode {
+    margin-left: 10px;
+    width: calc(100% - 50px);
+  }
+
+  .common-board-item {
+    cursor: pointer;
+    width: 100%;
+    height: 40px;
+    margin-top: 10px;
+    text-align: left;
+    box-sizing: border-box;
+    .el-input {
+      width: 100%;
+      .el-input__inner {
+        height: 40px;
+        line-height: 40px;
+      }
+    }
+  }
+}
 }

package/static/styles/dark/index.scss

@@ -1,3 +1,3 @@
-@import './theme/element-dark.scss';
-@import '../index.scss';
+@import './theme/element-dark.scss';
+@import '../index.scss';
 @import '../common.scss';

package/static/styles/dark/theme/element-dark.scss

@@ -1,43 +1,43 @@
-/**
- * Copyright (c) 2020 kedacom
- * OpenATC is licensed under Mulan PSL v2.
- * You can use this software according to the terms and conditions of the Mulan PSL v2.
- * You may obtain a copy of Mulan PSL v2 at:
- * http://license.coscl.org.cn/MulanPSL2
- * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
- * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
- * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
- * See the Mulan PSL v2 for more details.
- **/
-/* 改变主题色变量 */
-// $--color-black: #f7f8fa;
-$--color-primary: #409EFF;
-$--color-white: #202940;
-$--color-black: #30384D;
-$--background-color-base: #191F34;
-$--color-text-primary: #FFFFFF;
-$--color-text-regular: #FFFFFF;
-$--color-text-secondary: #B9BABF;
-$--color-text-placeholder: #8D9498;
-$--color-info: #8D9498;
-$--border-color-base: #30384D;
-$--border-color-light: #30384D;
-$--border-color-lighter: #30384D;
-$--border-color-extra-light:#30384D;
-$--box-shadow-base: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
-$--button-primary-font-color: #FFFFFF;
-$--button-info-font-color: #FFFFFF;
-$--button-warning-font-color: #FFFFFF;
-$--button-danger-font-color: #FFFFFF;
-$--button-success-font-color: #FFFFFF;
-$--radio-button-checked-font-color: #FFFFFF;
-$--radio-font-color: $--color-text-secondary;
-$--tag-info-color: $--color-text-placeholder;
-$--tooltip-color: $--color-white;
-$--checkbox-font-color: $--color-text-secondary;
-
-
-/* 改变 icon 字体路径变量，必需 */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
-
+/**
+ * Copyright (c) 2020 kedacom
+ * OpenATC is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ * http://license.coscl.org.cn/MulanPSL2
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ **/
+/* 改变主题色变量 */
+// $--color-black: #f7f8fa;
+$--color-primary: #409EFF;
+$--color-white: #202940;
+$--color-black: #30384D;
+$--background-color-base: #191F34;
+$--color-text-primary: #FFFFFF;
+$--color-text-regular: #FFFFFF;
+$--color-text-secondary: #B9BABF;
+$--color-text-placeholder: #8D9498;
+$--color-info: #8D9498;
+$--border-color-base: #30384D;
+$--border-color-light: #30384D;
+$--border-color-lighter: #30384D;
+$--border-color-extra-light:#30384D;
+$--box-shadow-base: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+$--button-primary-font-color: #FFFFFF;
+$--button-info-font-color: #FFFFFF;
+$--button-warning-font-color: #FFFFFF;
+$--button-danger-font-color: #FFFFFF;
+$--button-success-font-color: #FFFFFF;
+$--radio-button-checked-font-color: #FFFFFF;
+$--radio-font-color: $--color-text-secondary;
+$--tag-info-color: $--color-text-placeholder;
+$--tooltip-color: $--color-white;
+$--checkbox-font-color: $--color-text-secondary;
+
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
 @import "~element-ui/packages/theme-chalk/src/index";