19 changed files with 542 additions and 72 deletions
@ -1 +1,49 @@ |
|||||||
<p>function-division works!</p> |
<div class="content"> |
||||||
|
<div style="margin-top:16px"> |
||||||
|
<mat-icon title="创建" (click)='addPartition()'>add_circle_outline</mat-icon> |
||||||
|
</div> |
||||||
|
|
||||||
|
<mat-tab-group class="tableContent"> |
||||||
|
|
||||||
|
<mat-tab label="单位功能分区"> |
||||||
|
<div style="margin: 30px 0 25px 50px;"> |
||||||
|
<mat-icon title="创建" (click)='addPartitionAttribute()'>add_circle_outline</mat-icon> |
||||||
|
<mat-icon title="删除" style="margin-left: 25px;">delete</mat-icon> |
||||||
|
</div> |
||||||
|
<table mat-table [dataSource]="dataSource" style="margin-left: 50px;"> |
||||||
|
|
||||||
|
<ng-container matColumnDef="checked"> |
||||||
|
<th mat-header-cell *matHeaderCellDef></th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
<mat-checkbox></mat-checkbox> |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="region"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>区域</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
|
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="measure"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>面积</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
|
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="situation"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>基本情况</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
|
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||||
|
</table> |
||||||
|
</mat-tab> |
||||||
|
|
||||||
|
</mat-tab-group> |
||||||
|
</div> |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
padding: 10px 0 0 10px; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.tableContent { |
||||||
|
margin-left: 10px; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
table { |
||||||
|
width: 1000px; |
||||||
|
text-align: center; |
||||||
|
.cdk-header-cell { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//icon统一样式 |
||||||
|
.mat-icon { |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
@ -1 +1,45 @@ |
|||||||
<p>realistic-picture works!</p> |
<div class="content"> |
||||||
|
<div class="leftBox"> |
||||||
|
<div class="bank"> |
||||||
|
<div> |
||||||
|
<span class="title">实景图</span> |
||||||
|
<mat-icon title="创建" (click)='addReal()'>add_circle_outline</mat-icon> |
||||||
|
<mat-icon title="编辑" (click)='editReal()'>create</mat-icon> |
||||||
|
<mat-icon title="下载">cloud_download</mat-icon> |
||||||
|
<mat-icon title="删除">delete</mat-icon> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div *ngFor="let item of allRealPicture,let key=index" class="material" |
||||||
|
[ngClass]="{'leftFile': selectRealIndex===key}" (click)="changeReal(item,key)"> |
||||||
|
<mat-icon class="btn">folder</mat-icon><span class="matname">{{item.name}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="rightBox"> |
||||||
|
<div class="topBox"> |
||||||
|
<div> |
||||||
|
<span class="title" *ngIf="selectReal">{{selectReal.name}}</span> |
||||||
|
<button mat-raised-button color="primary">上传图片</button> |
||||||
|
<button mat-raised-button color="primary" style="margin-left: 15px;" (click)='download()'>批量下载</button> |
||||||
|
<button mat-raised-button color="primary" style="margin-left: 15px;" *ngIf="isDownload">下载</button> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<span>已用/容量:</span> |
||||||
|
<span style="color: red;"> 500MB/5G </span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="bottomBox"> |
||||||
|
<div class="imgBox"> |
||||||
|
<img src="../../../assets/images/upload.png" (click)='operation()'> |
||||||
|
<label style="margin-left: 5px;">图片名称:</label> |
||||||
|
<input type="text" style="margin-left: 10px;"> |
||||||
|
<a href="javascript:" style="margin-left: 5px;">保存</a> |
||||||
|
<a href="javascript:" style="margin-left: 5px;">删除</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|||||||
@ -0,0 +1,96 @@ |
|||||||
|
.content { |
||||||
|
margin: 0 0 0 10px; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
.leftBox { |
||||||
|
flex: 15%; |
||||||
|
padding-top: 10px; |
||||||
|
.bank { |
||||||
|
display: flex; |
||||||
|
padding-left: 10px; |
||||||
|
.mat-icon {margin-right: 15px;} |
||||||
|
} |
||||||
|
} |
||||||
|
.rightBox { |
||||||
|
border-left: 1px solid #999; |
||||||
|
flex: 85%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
.topBox { |
||||||
|
flex: 5%; padding: 10px; |
||||||
|
display: flex; |
||||||
|
:first-child {flex: 85%;}; |
||||||
|
:last-child {flex: 15%;} |
||||||
|
} |
||||||
|
.bottomBox { |
||||||
|
flex: 95%; |
||||||
|
padding: 5px 0 0 25px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap;} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//icon统一样式 |
||||||
|
.mat-icon { |
||||||
|
cursor:pointer; |
||||||
|
width: 18px; |
||||||
|
height: 18px; |
||||||
|
vertical-align:top; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.title {margin-right: 30px;font-weight: 500; font-size: 18px;} |
||||||
|
|
||||||
|
.material { |
||||||
|
cursor:pointer; |
||||||
|
height: 30px; |
||||||
|
font-size: 16px; |
||||||
|
margin-top: 10px; |
||||||
|
padding-left: 15px; |
||||||
|
.btn { |
||||||
|
color: #FFC122; |
||||||
|
} |
||||||
|
} |
||||||
|
.imgBox{ |
||||||
|
width: 300px; |
||||||
|
height: 200px; |
||||||
|
margin: 0 25px 25px 0; |
||||||
|
display: inline-block; |
||||||
|
img {width: 100%;cursor:pointer;} |
||||||
|
input{ |
||||||
|
font-size:12px; |
||||||
|
width: 100px; |
||||||
|
height:18px; |
||||||
|
border-radius:3px; |
||||||
|
border:1px solid #c8cccf; |
||||||
|
outline:0; |
||||||
|
text-align:left; |
||||||
|
padding-left: 5px; |
||||||
|
display:inline-block; |
||||||
|
cursor: pointer;} |
||||||
|
input::-webkit-input-placeholder{ |
||||||
|
color: #986655; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
a {display: inline-block; |
||||||
|
width: 45px; |
||||||
|
height: 24px; |
||||||
|
line-height: 24px; |
||||||
|
text-align: center; |
||||||
|
border-radius: 3px; |
||||||
|
background-color: #2196F3; |
||||||
|
font-size: 14px; |
||||||
|
color: #fff;} |
||||||
|
} |
||||||
|
|
||||||
|
//左侧实景图文件样式 |
||||||
|
.leftFile { |
||||||
|
background-color: rgba(225,225,225,0.8); |
||||||
|
} |
||||||
|
//选中图片样式 |
||||||
|
.selectImg { |
||||||
|
-webkit-filter: drop-shadow(0px 0px 5px #000); |
||||||
|
filter: drop-shadow(0px 0px 5px #000); |
||||||
|
border: 2px solid #00FF00; |
||||||
|
} |
||||||
@ -1 +1,52 @@ |
|||||||
<p>uploading-cad works!</p> |
<div class="header"> |
||||||
|
<div> |
||||||
|
<button mat-raised-button color="primary">上传</button> |
||||||
|
<button mat-raised-button color="primary">下载</button> |
||||||
|
<button mat-raised-button color="primary">删除</button> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<span>已用/容量:</span> |
||||||
|
<span style="color: red;"> 500MB/5G </span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<table mat-table [dataSource]="dataSource"> |
||||||
|
|
||||||
|
<ng-container matColumnDef="checked"> |
||||||
|
<th mat-header-cell *matHeaderCellDef></th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
<mat-checkbox></mat-checkbox> |
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="name"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>名称</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
|
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="time"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>时间</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
|
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="state"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>状态</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
|
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="size"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>大小</th> |
||||||
|
<td mat-cell *matCellDef="let element"> |
||||||
|
|
||||||
|
</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||||
|
</table> |
||||||
|
|||||||
@ -0,0 +1,17 @@ |
|||||||
|
.header { |
||||||
|
display: flex; |
||||||
|
margin: 10px; |
||||||
|
:first-child{flex:88%} |
||||||
|
:last-child{flex:12%} |
||||||
|
.mat-raised-button { |
||||||
|
margin-left: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
table { |
||||||
|
margin: 10px; |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
.cdk-header-cell { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue