From bf93b989e576b0a1ce9acca49cbd8afda95c43bd Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Thu, 2 Sep 2021 14:12:15 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E5=9C=A8=E7=BA=BF=E5=88=9B?= =?UTF-8?q?=E5=BB=BA=E9=A2=84=E6=A1=88=E6=A0=87=E9=A2=98=E6=8E=92=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../create-plan-online-five.component.html | 4 +- .../create-plan-online-five.component.scss | 217 ++++++++++-------- .../create-plan-online-five.component.ts | 5 + src/app/ui/role/role.component.ts | 12 - 4 files changed, 125 insertions(+), 113 deletions(-) diff --git a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html index 0889594..5709cf1 100644 --- a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html +++ b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html @@ -1,7 +1,7 @@
-
-
+
{{key + 1}}.{{item.groupName}}
diff --git a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss index 434fc0c..6a84615 100644 --- a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss +++ b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss @@ -63,7 +63,7 @@ } } } - + .contentbox { height: 100%; box-sizing: border-box; @@ -214,7 +214,7 @@ } } } - .leftnew{ + .leftnew { position: fixed; width: 14%; height: 90%; @@ -224,40 +224,40 @@ overflow-y: auto; display: flex; flex-direction: column; - .newHead{ + .newHead { width: 100%; height: 40px; text-align: center; background-color: #e1f1ff; - span{ - text-align: center; - font-size: 16px; - color: #2196F3; - height: 40px; - line-height: 40px; - } + span { + text-align: center; + font-size: 16px; + color: #2196f3; + height: 40px; + line-height: 40px; + } } - .newBody{ + .newBody { width: 100%; height: 100%; display: flex; flex-direction: column; - .search{ + .search { margin: 10px; width: 280px; height: 32px; - background-color: #E8E9E9; + background-color: #e8e9e9; border-radius: 20px; display: flex; - .searchChoose{ + .searchChoose { width: 30%; height: 70%; margin-top: 2%; - border-right: 1px solid #9EAAB4; + border-right: 1px solid #9eaab4; //text-align: center; - select{ + select { background-color: transparent; - border: 0; + border: 0; outline: none; margin-left: 5px; //height: 22px; @@ -267,7 +267,7 @@ bottom: 3px; } } - .searchText{ + .searchText { width: 65%; height: 100%; input { @@ -276,19 +276,18 @@ height: 100%; border: none; outline: none; - background-color: #E8E9E9; + background-color: #e8e9e9; //line-height: 32px; //border-radius: 3px; } .queryField { height: 32px; //margin: 0 10px; - - } - .ordiv{ + } + .ordiv { position: relative; - .organizationbox{ - width:280px; + .organizationbox { + width: 280px; height: 600px; background: white; position: absolute; @@ -297,19 +296,19 @@ z-index: 999; border: 1px solid grey; overflow-y: auto; - li{ + li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - mat-tree-node{ + mat-tree-node { cursor: pointer; - white-space:pre; + white-space: pre; } - mat-tree-node:hover{ - background: rgba(225, 225, 225, 0.8); + mat-tree-node:hover { + background: rgba(225, 225, 225, 0.8); } - .closediv{ + .closediv { z-index: 100; position: absolute; right: 0; @@ -320,29 +319,28 @@ line-height: 30px; text-align: center; } - .closediv:hover{ - background:rgba(225, 225, 225, 0.8); + .closediv:hover { + background: rgba(225, 225, 225, 0.8); } } - } - .zdy{ + .zdy { width: 100%; height: 100%; } } - .searImg{ + .searImg { width: 15%; height: 100%; cursor: pointer; - img{ + img { position: relative; top: 20%; left: 10%; } } } - .newBodycenter{ + .newBodycenter { height: 86%; width: 100%; display: flex; @@ -350,33 +348,33 @@ align-content: flex-start; overflow-y: auto; //flex-direction: column; - .centerfen{ + .centerfen { //width: 50%; margin: 15px 0 12px 24px; //height: 150px; display: flex; flex-direction: column; - .tu{ + .tu { height: 100px; width: 110px; cursor: pointer; - img{ + img { width: 110px; height: 100px; } } - .org{ + .org { width: 110px; } - .lry{ + .lry { width: 110px; } - span{ + span { display: inline-block; } } } - .fenye{ + .fenye { width: 100%; } } @@ -398,7 +396,7 @@ height: 28px; line-height: 28px; } - input{ + input { width: 140px; } p { @@ -786,43 +784,41 @@ } } } - .building{ + .building { height: 100%; width: 100%; display: flex; flex-direction: column; - - } - .onetext{ + .onetext { height: 40px; width: 100%; - border-bottom: 1px solid #F2F4F5; - span{ + border-bottom: 1px solid #f2f4f5; + span { height: 40px; width: 40%; font-size: 16px; - background-color: #F2F4F5; + background-color: #f2f4f5; } - input{ + input { height: 40px; //width: 60%; font-size: 16px; border: none; outline: none; - border-bottom: 1px solid #F2F4F5; + border-bottom: 1px solid #f2f4f5; } - img{ + img { height: 20px; width: 20px; position: relative; top: 10px; } } - .file{ + .file { width: 100%; height: 100%; - .fileHead{ + .fileHead { height: 40px; width: 100%; background-color: #ffd91d; @@ -835,62 +831,61 @@ color: #b99a00; } } - .fileBody{ + .fileBody { height: 100%; width: 100%; display: flex; flex-direction: column; } } - .fouradj{ + .fouradj { width: 100%; height: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; //flex-direction: column; - .adjtop,.adjbottom{ + .adjtop, + .adjbottom { width: 100%; height: 50%; display: flex; - .adjbody{ + .adjbody { height: 100%; width: 50%; - input{ + input { height: 40px; //width: 60%; font-size: 16px; border: none; outline: none; - } } } - .fourTexttwo{ + .fourTexttwo { height: 40px; width: 50%; - border-bottom: 1px solid #F2F4F5; - input{ - height: 40px; - //width: 60%; - font-size: 16px; - border: none; - outline: none; - + border-bottom: 1px solid #f2f4f5; + input { + height: 40px; + //width: 60%; + font-size: 16px; + border: none; + outline: none; } } } - .parts{ + .parts { height: 100%; width: 100%; display: flex; flex-direction: column; - .partsHead{ + .partsHead { width: 100%; height: 40px; background-color: #ffd91d; text-align: center; - input{ + input { height: 40px; font-size: 16px; border: none; @@ -907,21 +902,21 @@ margin-right: 10px; } } - .partsBody{ + .partsBody { width: 100%; height: 100%; display: flex; flex-direction: column; - .duohang{ + .duohang { width: 100%; height: 40px; display: flex; - border-bottom: 1px solid #FFFFFF; - .duohangHalf{ + border-bottom: 1px solid #ffffff; + .duohangHalf { height: 40px; width: 50%; - - input{ + + input { height: 40px; //width: 60%; font-size: 16px; @@ -930,11 +925,11 @@ } } } - .danhang{ + .danhang { width: 100%; height: 40px; //border-top: 1px solid #FFFFFF; - input{ + input { height: 40px; //width: 60%; font-size: 16px; @@ -995,42 +990,42 @@ margin: 10px 0; } } - .titleItem{ + .titleItem { width: 100%; height: 36px; line-height: 36px; - background-color: #2196F3; + background-color: #2196f3; text-align: center; color: white; } } - .toolDiv{ + .toolDiv { position: fixed; right: 20%; bottom: 20px; display: flex; flex-direction: column; - button{ + button { margin: 5px 0; } } - .oldData{ + .oldData { width: 100px; height: 36px; - background-color: #FFFFFF; + background-color: #ffffff; border-radius: 0px 60px 60px 0px; position: fixed; right: 25.3%; top: 120px; display: flex; cursor: pointer; - span{ + span { color: #2196f3; font-size: 16px; line-height: 36px; margin-left: 5px; } - img{ + img { width: 18px; height: 15px; position: relative; @@ -1039,31 +1034,31 @@ } } } - .noPadding{ + .noPadding { padding-top: 10px; } - .quitPreview{ + .quitPreview { position: fixed; top: 10px; right: 15px; } } -.yinrubox{ +.yinrubox { width: 100%; height: 100%; display: flex; flex-direction: column; - .yinruboxHead{ + .yinruboxHead { width: 100%; - height:7%; - border-bottom:1px solid #8b8c8c; - span{ + height: 7%; + border-bottom: 1px solid #8b8c8c; + span { font-size: 18px; color: #2196f3; line-height: 40px; } - button{ + button { float: right; } } @@ -1209,3 +1204,27 @@ } } +.cdk-drag-preview { + height: 36px; + line-height: 36px; + background: white; + color: #8b8c8c; + margin: 0 3px; + text-align: center; + box-sizing: border-box; + padding: 0 10px; + font-size: 14px; + overflow: hidden; /*超出部分隐藏*/ + white-space: nowrap; /*不换行*/ + text-overflow: ellipsis; /*超出部分文字以...显示*/ + box-sizing: border-box; + border-radius: 40px; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.cdk-drag-placeholder { + opacity: 0; +} +.cdk-drag-animating { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} diff --git a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts index b475d61..2e423ae 100644 --- a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts +++ b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts @@ -19,6 +19,7 @@ import { PageEvent } from '@angular/material/paginator'; import { TreeService } from '../../http-interceptors/tree.service' import Viewer from 'viewerjs'; import { async } from 'rxjs/internal/scheduler/async'; +import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop'; declare var $: any @Component({ selector: 'app-create-plan-online-five', @@ -363,6 +364,10 @@ export class CreatePlanOnlineFiveComponent implements OnInit { } } + drop(event: CdkDragDrop) { + moveItemInArray(this.planTemplateData, event.previousIndex, event.currentIndex); + } + //获取建筑信息 buildingsData=[] buildDataName diff --git a/src/app/ui/role/role.component.ts b/src/app/ui/role/role.component.ts index a3b7501..8fd68ca 100644 --- a/src/app/ui/role/role.component.ts +++ b/src/app/ui/role/role.component.ts @@ -4,7 +4,6 @@ import {FormControl} from '@angular/forms'; import { HttpClient } from '@angular/common/http'; import { CacheTokenService } from '../../http-interceptors/cache-token.service' import format from 'date-fns/format'; -import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop'; import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; import {FlatTreeControl} from '@angular/cdk/tree'; import { TreeService } from '../../http-interceptors/tree.service' @@ -169,17 +168,6 @@ export class RoleComponent implements OnInit { ) } - drop(event: CdkDragDrop) {//拖拽函数 - moveItemInArray(this.dataSource, event.previousIndex, event.currentIndex); - this.dataSource.forEach((item, index) => { - item.order = index; - }) - const a = [...this.dataSource]; - this.dataSource = []; - setTimeout(() => { - this.dataSource = a; - }, 10); - }; }