shaojiahao
/
AX.Angular9DataCollection
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[合并]合并代码

develop
邵佳豪 5 years ago
parent
1444d11f57 b81700fcf6
commit
b584111710
4 changed files with 180 additions and 137 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 70
      src/app/ui/collection-tools/collection-tools.component.html
  2. 166
      src/app/ui/collection-tools/collection-tools.component.scss
  3. 21
      src/app/ui/collection-tools/collection-tools.component.ts
  4. 60
      src/app/ui/collection-tools/panel.scss

70
src/app/ui/collection-tools/collection-tools.component.html
Unescape View File

@ -2,7 +2,7 @@
<!-- header头部 -->
<div class="header">
<button mat-button (click)="drawer.toggle()">
<button mat-button (click)="toggle()">
<mat-icon style="vertical-align: middle;">toc</mat-icon>
</button>
@ -57,35 +57,38 @@
<!--功能区 -->
<div class="functionalDomain">
<mat-drawer-container class='functionalDomainContent' [hasBackdrop]='false'>
<mat-drawer #drawer opened='true' class='functionalDomainLeft'>
<div class='functionalDomainContent'>
<!-- H5Canvas -->
<!-- <app-working-area></app-working-area> -->
<!-- H5Canvas -->
<div class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true}">
<!-- 平面图 -->
<mat-accordion id="panel">
<mat-expansion-panel expanded>
<mat-expansion-panel-header class="panelHeader">
<label class="overflowText" style="font-weight: 550;">平面图</label>
<label class="hover"><mat-icon (click)='foundPanel($event)'>add</mat-icon></label>
</mat-expansion-panel-header>
<div class="planarGraph">
<div class="planarGraphHeader" (click)='togglePlanarGraph()'>
<label class="overflowText" style="font-weight: 550;">平面图</label>
<label class="hover"><mat-icon (click)='foundPanel($event)' class="matIcons">add</mat-icon></label>
</div>
<div [hidden]="!togglePlane">
<div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" [ngClass]="{'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>
<mat-icon *ngIf="!item.imageUrl">broken_image</mat-icon>
<mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>
<label class="overflowText">{{item.name}}</label>
<mat-icon title="替换底图" style="float: right; margin-top: 8px;" *ngIf="selectSitePlanIndex==key">photo_size_select_actual</mat-icon>
<mat-icon title="替换底图" style="float: right; margin-top: 8px;" *ngIf="selectSitePlanIndex==key" class="matIcons">photo_size_select_actual</mat-icon>
<!-- 右边定位操作栏 -->
<!-- <div id="rightOperate">
</div> -->
<!-- 右边定位操作栏 -->
<div id="rightOperate">
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
<!-- 素材库 -->
<mat-accordion id="panel">
<mat-expansion-panel>
<mat-expansion-panel-header class="panelHeader">
<label class="overflowText" style="font-weight: 550;">素材库</label>
</mat-expansion-panel-header>
<div id="materialBank">
<div class="planarGraphHeader" (click)='toggleMaterial()'>
<label class="overflowText" style="font-weight: 550;">素材库</label>
</div>
<div style="flex: 1;overflow-y: auto;" [hidden]="!toggleMaterialBank">
<mat-accordion *ngFor="let item of allLibrary" id="panelLibrary">
<mat-expansion-panel (opened)='opened(item)'>
<mat-expansion-panel-header>
@ -102,20 +105,14 @@
</mat-expansion-panel>
</mat-accordion>
</mat-expansion-panel>
</mat-accordion>
</mat-drawer>
<mat-drawer-content id='functionalDomainRight'>
<div id="h5Unity">
<div id='h5Canvas'>
<!-- H5Canvas -->
<!-- <app-working-area></app-working-area> -->
</div>
</div>
<div class="rightAttribute">
</div>
<div class="functionalDomainRight publicCss ">
<!-- 属性 -->
<div class="property" style="height: 50%;">
<div class="title">
@ -131,7 +128,7 @@
<div class="siteproperty_details">京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。京中有善口技者，阿巴阿巴阿巴。 </div>
</div>
<!-- 素材属性 -->
<div class="assetsproperty" style="">
<div class="assetsproperty">
<h3 style="text-align: center;font-weight: 900;">实景照片</h3>
<p>宽度(像素)</p>
<input type="text" class="biginput">
@ -157,10 +154,9 @@
</div>
</div>
</div>
</div>
</mat-drawer-content>
</div>
</div>
</mat-drawer-container>
</div>
</div>

166
src/app/ui/collection-tools/collection-tools.component.scss
Unescape View File

@ -7,10 +7,7 @@
padding: 3px;
display: flex;
flex-direction: column;
mat-icon{
vertical-align: middle
}
.icongray{
color: #D9D0DC;
}
@ -69,38 +66,84 @@
}
//功能区
// icon统一样式
.mat-icon {
color: #8E909F;
cursor:pointer;
vertical-align: middle;
}
.mat-drawer:not(.mat-drawer-side) {
box-shadow: none;
border: 1px solid #E6EAEE;
//左右两侧功能栏 统一样式
.publicCss {
background-color: #fff;
border-radius: 5px;
position: absolute;
z-index: 999;
height: 100%;
top: 0;
}
.functionalDomain {
flex: 90%;
.functionalDomainContent {
position: relative;
width: 100%;
height: 100%;
}
.functionalDomainLeft {
display: flex;
flex-direction: column;
margin-left: 0px;
transition: margin-left 0.5s;
min-width: 150px;
width: 13%;
height: 100%;
border: 1px solid #E6EAEE;
width: 14%;
left: 0;
}
.functionalDomainRight {
border: 1px solid #464646;
width: 12%;
right: 0;
}
//左侧导航栏显示隐藏
.togglePanel {
z-index: -999;
margin-left: -300px;
transition: margin-left 0.5s;
}
}
//右边操作栏
.title{
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;
}
}
#functionalDomainRight {
min-width: 100px;
background-color: #fff;
}
.property{
.siteproperty{
height: 100%;
display: flex;
position: relative;
#h5Unity {
flex: 100%;
#h5Canvas{
width: 100%;
height: 100%;
}
p{
color: #9c9fa5;
padding-left: 5px;
}
.siteproperty_size{
background-color: #e3e3e3;
width: 93%;
margin: 0 auto;
border-radius: 3px;
}
.rightAttribute{
width: 12%;
@ -110,67 +153,26 @@
right: 0;
bottom: 0;
border: 2px solid #464646;
.title{
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;
}
}
}
.property{
.siteproperty{
height: 100%;
p{
color: #9c9fa5;
padding-left: 5px;
}
.siteproperty_size{
background-color: #e3e3e3;
width: 93%;
margin: 0 auto;
border-radius: 3px;
}
.siteproperty_details{
background-color: #e3e3e3;
border-radius: 3px;
min-height: 21px;
max-height: 72%;
width: 93%;
margin: 0 auto;
overflow-y: auto;
}
}
.assetsproperty{
height: 100%;
p{
color: #9c9fa5;
margin:1px 0 3px 8px;
}
input{
height: 18px;
}
.biginput{
display: block;
width: 88%;
margin: 0 auto;
}
.smallinput{
display: block;
width: 19%;
margin-left: 8px;
}
}
}
}
}
.assetsproperty{
height: 100%;
p{
color: #9c9fa5;
margin:1px 0 3px 8px;
}
input{
height: 18px;
}
.biginput{
display: block;
width: 88%;
margin: 0 auto;
}
.smallinput{
display: block;
width: 19%;
margin-left: 8px;
}
}
}

21
src/app/ui/collection-tools/collection-tools.component.ts
Unescape View File

@ -120,7 +120,28 @@ export class CollectionToolsComponent implements OnInit {
}
}
//陈鹏飞↓↓↓
//陈鹏飞↓↓↓
//陈鹏飞↓↓↓
toggleExpandPanel:boolean = false; //可展开面板展开或关闭
togglePlane:boolean = true; //可展开面板平面图 显隐
toggleMaterialBank:boolean = false; //可展开面板素材库 显隐
//可展开面板展开或关闭
toggle () {
this.toggleExpandPanel = !this.toggleExpandPanel
}
//可展开面板 平面图 展开或关闭
togglePlanarGraph () {
this.togglePlane = !this.togglePlane
}
//可展开面板 素材库 展开或关闭
toggleMaterial () {
this.toggleMaterialBank = !this.toggleMaterialBank
}
sitePlanData:any = []; //总平面图数据
selectingSitePlan:any; //选中的平面图
selectSitePlanIndex:number; //选中的平面图index

60
src/app/ui/collection-tools/panel.scss
Unescape View File

@ -1,23 +1,36 @@
.panelHeader {
.matIcons {
color: #8E909F;
}
//平面图 素材库 公共样式 头部
.planarGraphHeader{
height: 48px;
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 24px;
border-radius: inherit;
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 15px;
font-weight: 400;
color: rgba(0, 0, 0, 0.87);
background: linear-gradient(to top,#cdced1,#FFF);
}
#panel{
.hover {
width: 18px;
height: 18px;
margin-left: 40%;
border: 1px solid #8E909F;
border-radius: 3px;
.mat-icon {font-size: 18px;}
}
.hover:hover {
background-color: #4DA5FA;
.mat-icon {color: #fff;}
}
#panelLibrary .text{
box-sizing: border-box;
margin-left: 10px;
}
//平面图头部字体图标样式
.hover {
width: 18px;
height: 18px;
margin-left: 40%;
border: 1px solid #8E909F;
border-radius: 3px;
.mat-icon {font-size: 18px;}
}
.hover:hover {
background-color: #4DA5FA;
.mat-icon {color: #fff;}
}
//平面图
@ -44,7 +57,18 @@
background-color: #999;
}
//素材库溢出隐藏
#materialBank {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
//素材库图片flex
#panelLibrary .text{
box-sizing: border-box;
margin-left: 10px;
}
.panelLibraryFlex {
display: flex;
flex-direction: row;

Write Preview
Loading…
Cancel
Save