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