From 917f2b6748505e1f09443b79bfca9e32d93ee26d Mon Sep 17 00:00:00 2001 From: Shaojihao <55341701@qq.com> Date: Tue, 22 Sep 2020 10:05:54 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E5=A4=84=E7=BD=AE=E9=A2=84?= =?UTF-8?q?=E6=A1=88=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../collection-tools.component.html | 418 ++++++++++-------- .../collection-tools.component.scss | 256 ++++++++--- .../collection-tools.component.ts | 19 +- src/app/ui/collection-tools/panel.scss | 2 +- src/app/ui/dangerous/dangerous.component.scss | 1 + src/app/ui/plan/collection-tools.component.ts | 2 +- .../similar-plans.component.html | 7 +- .../similar-plans/similar-plans.component.ts | 8 +- 8 files changed, 445 insertions(+), 268 deletions(-) diff --git a/src/app/ui/collection-tools/collection-tools.component.html b/src/app/ui/collection-tools/collection-tools.component.html index 22fe9b2..47af34f 100644 --- a/src/app/ui/collection-tools/collection-tools.component.html +++ b/src/app/ui/collection-tools/collection-tools.component.html @@ -1,6 +1,6 @@
-
+ -
+
- + +
+
+ 总平面图 +
+
+ {{item.name}} +
+ +
- - +
-
+ -
+
+ -
+ +
@@ -249,207 +279,213 @@
+ +
+ +
+ +
- -
- -
-
-
- 属性 -
-
- -
-

面积(平方米)

-
{{canvasData.selectStorey.area}}
-

详情

-
- {{canvasData.selectStorey.details}} + +
+ + 属性 + + + 消防要素 + +
+
+ +
+ +
+

面积(平方米)

+
{{canvasData.selectStorey.area}}
+

详情

+
+ {{canvasData.selectStorey.details}} +
-
- -
-

{{assetName}}

+ +
+

{{assetName}}

-
-

宽度(像素)

- -

高度(像素)

- -

角度

-
- - +
+

宽度(像素)

+
{{assetWidth}}
+

高度(像素)

+
{{assetHeight}}
+

角度

+
+ +
{{sliderValue}}
+
-
- -
-

厚度

-
- - + +
+

厚度

+
+ +
{{sliderValueThickness}}
+
-
-

是否高亮

-
- - 选中高亮 -
-
-
- 颜色 -
+ +
+
+ 颜色 +
+
+ +

透明度

+ + +
{{colorDivSliderValue}}%
-
-
    -
  • -
-
- 透明度 - - {{colorDivSliderValue}}% -
-
- -
-

{{item.PropertyName}}({{item.PhysicalUnit}})

- -
- -
-

{{item.PropertyName}}({{item.PhysicalUnit}})

- -
- -
-

{{item.PropertyName}}({{item.PhysicalUnit}})

- -
- -
-
-

{{item.PropertyName}}

- {{imagesArr.length ? imagesArr.length : 0}} / {{item.PropertyValue}} - -
添加
- - -
-
-
+
+ +
+

{{item.PropertyName}}({{item.PhysicalUnit}})

+ +
{{item.PropertyValue}}
+
+ +
+

{{item.PropertyName}}({{item.PhysicalUnit}})

+ +
{{item.PropertyValue}}
+
+ +
+

{{item.PropertyName}}({{item.PhysicalUnit}})

+
{{item.PropertyValue}}
+
+ +
+
+ +

{{item.PropertyName}}

+ {{imagesArr.length ? imagesArr.length : 0}} / {{item.PropertyValue}} + +
+
+
+
+ +
+
- -
-
- - delete -
-
- -
-

{{item.PropertyName}}

- -
- -
-

{{item.PropertyName}}

- 是 - 否 -
- -
-

{{item.PropertyName}}

- -
- -
-

{{item.PropertyName}}

- -
-
-
- -
- -
- -
- -
-
- 消防要素 + +
+

{{item.PropertyName}}

+
东
+
西
+
南
+
北
+
东南
+
西南
+
东北
+
西北
+ +
+ +
+

{{item.PropertyName}}

+
是
+
否
+ + +
+ +
+

{{item.PropertyName}}

+
全部
+
高区
+
中区
+
低区
+
高中区
+
高低区
+
中底区
+
+ +
+

{{item.PropertyName}}

+
消火栓
+
喷淋
+
水幕
+
泡沫
+
消防
+
+
+
- -
- - + +
+ +
+ + + + + + + {{node.name}} + + ({{node.children.length}}) + visibility + - - - - {{node.name}} - - ({{node.children.length}}) - visibility - - - - - - - {{node.name}} - - ({{node.children.length}}) - visibility - - - + + + + + {{node.name}} + + ({{node.children.length}}) + visibility + + + +
-
+
diff --git a/src/app/ui/collection-tools/collection-tools.component.scss b/src/app/ui/collection-tools/collection-tools.component.scss index 9691f49..374f61a 100644 --- a/src/app/ui/collection-tools/collection-tools.component.scss +++ b/src/app/ui/collection-tools/collection-tools.component.scss @@ -12,8 +12,8 @@ flex-direction: column; .buildingbtnchecked{ - background-color: #34A6FD; color: white; + background-image: url("../../../assets/images/标签选中.png")!important; } } @@ -63,38 +63,133 @@ } } -//头部操作栏 +// //头部操作栏 +// .headerOperate { +// img { +// width: 24px; +// height: 24px; +// vertical-align: middle; +// margin-left: 1px; +// } +// span{ +// font-size: 18px; +// } +// flex: 5%; +// display: flex; +// align-items:center; +// min-height: 40px; +// box-sizing: border-box; +// margin: 3px 0; +// background-color: white; +// button{ +// border: 0.5px solid rgb(208, 211, 214); +// margin: 0 2px; +// } +// .editdeletebtn{ +// display: none; +// } +// .bigeditdeletebtn:hover{ +// .editdeletebtn{ +// display: inline-block; +// } +// } +// } .headerOperate { - img { - width: 24px; - height: 24px; - vertical-align: middle; - margin-left: 1px; - } + position: relative; span{ font-size: 18px; } - flex: 5%; + flex: 2%; display: flex; align-items:center; min-height: 40px; box-sizing: border-box; margin: 3px 0; - background-color: white; - button{ - border: 0.5px solid rgb(208, 211, 214); - margin: 0 2px; - } - .editdeletebtn{ - display: none; + + .bigeditdeletebtn{ + margin-right: 12px; + height: 80%; + display: flex; + flex-direction: column; + // align-items:center;/*由于flex-direction: column，因此align-items代表的是水平方向*/ + justify-content: center; + user-select: none; + background-image: url("../../../assets/images/标签正常.png") ; + background-size:100% 100%; + color: white; + span{ + padding: 0 13px; + padding-right: 18px; + } } .bigeditdeletebtn:hover{ - .editdeletebtn{ - display: inline-block; + cursor: pointer; + background-image: url("../../../assets/images/标签经过.png") ; + } + .bigTalkBox{ + user-select: none; + .titleIcon{ + font-size: 33px; + vertical-align: sub; + color: white; + } + .talkBox{ + width: 309px; + height: 326px; + border: 1px solid #30bbec; + background-color: #013a64; + opacity: .9 ; + position: absolute; + top: 32px; + right:4px; + z-index: 2000; + .btndiv{ + div{ + border-radius: 18px; + width: 70px; + height: 30px; + text-align: center; + line-height: 30px; + display: inline-block; + font-size: 13px; + color: white; + cursor: pointer; + + } + div:nth-child(1){ + background-color: #fe9400; + margin: 10px; + } + div:nth-child(2){ + background-color: #f95e5a; + } + } + .bottomDiv{ + position: absolute; + bottom:6px; + width: 100%; + height: 32px; + line-height: 32px; + display: flex; + color: white; + text-align: center; + div:nth-child(1){ + flex: 1; + } + div:nth-child(2){ + flex: 6; + color: #409eff; + background: url('../../../assets/images/输入框.png'); + background-size: 100% 100%; + } + div:nth-child(3){ + flex: 1; + + } + } } } } - //功能区 // icon统一样式 .mat-icon { @@ -103,27 +198,25 @@ } //左右两侧功能栏 统一样式 .publicCss { + overflow: hidden; border-radius: 5px; - position: absolute; - height: 100%; top: 0; } .functionalDomain { - flex: 90%; + flex: 98%; .functionalDomainContent { + display: flex; position: relative; width: 100%; height: 100%; } .functionalDomainLeft { - background-color: #fff; + flex: 1; display: flex; flex-direction: column; margin-left: 0px; transition: margin-left 0.5s; - min-width: 235px; border: 1px solid #E6EAEE; - width: 235px; left: 0; z-index: 111; .leftDragDiv{ @@ -135,14 +228,19 @@ cursor: e-resize; } } + .canvas{ + flex: 5; + } .functionalDomainRight { + color: white; + // background-color: #113e5e; z-index: 1001; margin-right: 0px; transition: margin-right 0.5s; - border: 1px solid #464646; + border: 1px solid #30bbec; width: 235px; right: 0; - + flex: 1; } //右边导航栏显示隐藏 .togglePanel2 { @@ -160,23 +258,23 @@ //右边操作栏 .title{ width: 100%; - height: 35px; - background-color: #464646; - div{ - width: 50%; - height: 35px; - line-height: 35px; - background-color: #595959; - border-radius: 5px; - span{ - color: white; - font-size: 14px; - font-weight: 400; - padding-left: 5px; - } + height: 40px; + line-height: 40px; + border-bottom:2px solid #accbf2; + display: flex; + align-content: center; + span{ + display: inline-block; + flex: 1; + text-align: center; + } + span:hover{ + cursor: pointer; } } - +.selectedTitle{ + background: #0c2d44; +} //右侧属性 .property{ @@ -186,15 +284,20 @@ height: 100%; overflow-y: auto; p{ - color: #9c9fa5; - padding-left: 5px; + color: #d0e0f4; + padding-left: 7px; + letter-spacing:3px; + margin: 5px 0; } .siteproperty_size{ - background-color: #e3e3e3; + border-bottom:1px solid #d0e0f4; width: 93%; margin: 0 auto; - border-radius: 3px; min-height: 21px; + color: #2399f1; + padding-bottom: 5px; + font-size: 16px; + letter-spacing:2px; } .rightAttribute{ width: 12%; @@ -210,9 +313,21 @@ overflow-y: auto; height: 100%; p{ - color: #9c9fa5; - margin:1px 0 3px 8px; - font-size: 14px; + + color: #d0e0f4; + padding-left: 7px; + letter-spacing:3px; + margin: 5px 0; + } + .siteproperty_size{ + border-bottom:1px solid #d0e0f4; + width: 93%; + margin: 0 auto; + min-height: 21px; + color: #2399f1; + padding-bottom: 5px; + font-size: 16px; + letter-spacing:2px; } span{ font-size: 15px; @@ -268,21 +383,7 @@ .colorBigDiv{ width: 88%; margin-left: 8px; - .colorBigTemplateDiv{ - span{ - color: #9c9fa5; - font-size: 14px; - height: 26px; - line-height: 26px; - } - .colorTemplateDiv{ - width: 65%; - height: 22px; - display: inline-block; - vertical-align: middle; - margin-left: 26px; - } - } + .colorDiv{ .colorLi{ @@ -297,14 +398,28 @@ } } } - + .colorBigTemplateDiv{ + span{ + color: #9c9fa5; + font-size: 14px; + height: 26px; + line-height: 26px; + } + .colorTemplateDiv{ + width: 65%; + height: 22px; + display: inline-block; + vertical-align: middle; + margin-left: 26px; + } + } } } //右侧消防要素 .firecategories{ position: relative; - display: flex; - flex-flow: column; + // display: flex; + // flex-flow: column; .firecategoriesTree{ overflow-y: auto; height: 100%; @@ -314,6 +429,13 @@ .isLookCss{ position: absolute; right: 6px; + z-index: 1000; + } + } + .mat-tree{ + background-color:transparent; + .mat-tree-node{ + color: white!important; } } } diff --git a/src/app/ui/collection-tools/collection-tools.component.ts b/src/app/ui/collection-tools/collection-tools.component.ts index 3d00c96..e0429f7 100644 --- a/src/app/ui/collection-tools/collection-tools.component.ts +++ b/src/app/ui/collection-tools/collection-tools.component.ts @@ -479,7 +479,7 @@ export class CollectionToolsComponent implements OnInit { } ngOnInit(): void { - + // this.canvas.setNameVisible(this.basicInfo,1) let that = this window.setTimeout(()=>{ document.getElementById("functionalDomainContent").oncontextmenu = function (event) { @@ -494,7 +494,20 @@ export class CollectionToolsComponent implements OnInit { }) } - + //右侧属性和消防要素切换 + isProperty = true + rightSwitch(type){ + if(type == 1){ + this.isProperty = true + }else{ + this.isProperty = false + } + } + //打开说话框 + isOpenTalk = false + openTalkDiv(){ + this.isOpenTalk = !this.isOpenTalk + } ngAfterViewInit(): void { // 监听canvas组件选中素材事件 @@ -530,7 +543,7 @@ export class CollectionToolsComponent implements OnInit { } basicInfo:boolean = true //基本信息名称显隐 - wantToWork:boolean = true //想定作业名称显隐 + wantToWork:boolean = false //想定作业名称显隐 //点击基本信息名称 basicInfoClick(){ this.basicInfo = !this.basicInfo diff --git a/src/app/ui/collection-tools/panel.scss b/src/app/ui/collection-tools/panel.scss index 857c3ff..e66d284 100644 --- a/src/app/ui/collection-tools/panel.scss +++ b/src/app/ui/collection-tools/panel.scss @@ -278,7 +278,7 @@ justify-content: space-between; /* 水平居中 */ } .functionalDomainContent { - width: 300px; + // width: 300px; height: 100%; textarea { border-radius: 5px; diff --git a/src/app/ui/dangerous/dangerous.component.scss b/src/app/ui/dangerous/dangerous.component.scss index 488243e..150b9c7 100644 --- a/src/app/ui/dangerous/dangerous.component.scss +++ b/src/app/ui/dangerous/dangerous.component.scss @@ -188,4 +188,5 @@ z-index: 101; left: 6px; top: 0; + } diff --git a/src/app/ui/plan/collection-tools.component.ts b/src/app/ui/plan/collection-tools.component.ts index 233f1f6..63062ad 100644 --- a/src/app/ui/plan/collection-tools.component.ts +++ b/src/app/ui/plan/collection-tools.component.ts @@ -9,7 +9,7 @@ import {WorkingAreaComponent} from '../../working-area/working-area.component' import {CanvasShareDataService,GameMode} from '../../canvas-share-data.service' //引入服务 import Viewer from 'viewerjs'; @Component({ - selector: 'app-collection-tools', + selector: 'plan', templateUrl: './collection-tools.component.html', styleUrls: ['./collection-tools.component.scss'] }) diff --git a/src/app/ui/similar-plans/similar-plans.component.html b/src/app/ui/similar-plans/similar-plans.component.html index 5863341..9eb0d56 100644 --- a/src/app/ui/similar-plans/similar-plans.component.html +++ b/src/app/ui/similar-plans/similar-plans.component.html @@ -1,4 +1,4 @@ -
+ +
+ +
\ No newline at end of file diff --git a/src/app/ui/similar-plans/similar-plans.component.ts b/src/app/ui/similar-plans/similar-plans.component.ts index ff65ba0..41004a0 100644 --- a/src/app/ui/similar-plans/similar-plans.component.ts +++ b/src/app/ui/similar-plans/similar-plans.component.ts @@ -43,11 +43,13 @@ export class SimilarPlansComponent implements OnInit { else{ res+=''+this.leisiYuan[i].xiangjin+'' } - res+='查看详情' + res+='查看详情' } res+='' - var shuju=document.getElementById('shujubody') + var shuju = document.getElementById('shujubody') shuju.innerHTML=res } - + openResponsePlans(){ + console.log(123) + } }