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

[修正]页面布局兼容性修正

develop
陈鹏飞 5 years ago
parent
9bb84ef8ee
commit
da96d7aa84
8 changed files with 169 additions and 167 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. 3
      src/app/navigation/navigation.component.scss
  2. 170
      src/app/ui/function-division/function-division.component.html
  3. 14
      src/app/ui/key-site/key-site.component.html
  4. 8
      src/app/ui/key-site/key-site.component.scss
  5. 2
      src/app/ui/uploading-cad/editFile.html
  6. 2
      src/app/ui/uploading-cad/readFile.html
  7. 118
      src/app/ui/uploading-cad/uploading-cad.component.html
  8. 19
      src/styles.scss

3
src/app/navigation/navigation.component.scss
Unescape View File

@ -142,9 +142,6 @@ mat-sidenav{
background-color: rgba(225,225,225,.5);
border:0
}
.example-sidenav-content{
overflow: hidden;
}
.example-sidenav-content{
height: 100%;
overflow: hidden;

170
src/app/ui/function-division/function-division.component.html
Unescape View File

@ -6,94 +6,98 @@
<mat-tab-group class="tableContent">
<mat-tab label="单位功能分区">
<div style="margin: 30px 0 25px 5%;">
<mat-icon title="创建" (click)='addCompany()'>add_circle_outline</mat-icon>
<mat-icon title="保存" style="margin-left: 25px;" (click)='preservation()'>description</mat-icon>
<mat-icon title="删除" style="margin-left: 25px;" (click)='delete()'>delete</mat-icon>
<div style="overflow: auto; height: 100%;">
<div style="margin: 30px 0 25px 5%;">
<mat-icon title="创建" (click)='addCompany()'>add_circle_outline</mat-icon>
<mat-icon title="保存" style="margin-left: 25px;" (click)='preservation()'>description</mat-icon>
<mat-icon title="删除" style="margin-left: 25px;" (click)='delete()'>delete</mat-icon>
</div>
<table mat-table [dataSource]="companyFunctionalZoning">
<ng-container matColumnDef="checked">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<mat-checkbox (change)='changeCompany(element,$event)'></mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="region">
<th mat-header-cell *matHeaderCellDef>区域</th>
<td mat-cell *matCellDef="let element">
<mat-form-field class="example-full-width">
<input matInput [(ngModel)]="element.region" type="text" maxlength="20">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="measure">
<th mat-header-cell *matHeaderCellDef>面积</th>
<td mat-cell *matCellDef="let element">
<mat-form-field class="example-full-width">
<input matInput type="number" [(ngModel)]="element.area">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="situation">
<th mat-header-cell *matHeaderCellDef>基本情况</th>
<td mat-cell *matCellDef="let element">
<textarea [(ngModel)]="element.details" maxlength="250"></textarea>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<p style="width: 80%; margin-top: 30px; text-align: center;" *ngIf="!companyFunctionalZoning.length">暂无数据</p>
</div>
<table mat-table [dataSource]="companyFunctionalZoning">
<ng-container matColumnDef="checked">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<mat-checkbox (change)='changeCompany(element,$event)'></mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="region">
<th mat-header-cell *matHeaderCellDef>区域</th>
<td mat-cell *matCellDef="let element">
<mat-form-field class="example-full-width">
<input matInput [(ngModel)]="element.region" type="text" maxlength="20">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="measure">
<th mat-header-cell *matHeaderCellDef>面积</th>
<td mat-cell *matCellDef="let element">
<mat-form-field class="example-full-width">
<input matInput type="number" [(ngModel)]="element.area">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="situation">
<th mat-header-cell *matHeaderCellDef>基本情况</th>
<td mat-cell *matCellDef="let element">
<textarea [(ngModel)]="element.details"></textarea>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<p style="width: 80%; margin-top: 30px; text-align: center;" *ngIf="!companyFunctionalZoning.length">暂无数据</p>
</mat-tab>
<mat-tab label="{{item.name}}" *ngFor="let item of allBuildingFunctionalZoning;let key = index">
<div style="margin: 30px 0 25px 5%;">
<mat-icon title="创建" (click)='addBuilding(item,key)'>add_circle_outline</mat-icon>
<mat-icon title="保存" (click)='preservationBuilding(item,key)' style="margin-left: 25px;">description</mat-icon>
<mat-icon title="删除" (click)='deleteBuilding(item,key)' style="margin-left: 25px;">delete</mat-icon>
<div style="overflow: auto; height: 100%;">
<div style="margin: 30px 0 25px 5%;">
<mat-icon title="创建" (click)='addBuilding(item,key)'>add_circle_outline</mat-icon>
<mat-icon title="保存" (click)='preservationBuilding(item,key)' style="margin-left: 25px;">description</mat-icon>
<mat-icon title="删除" (click)='deleteBuilding(item,key)' style="margin-left: 25px;">delete</mat-icon>
</div>
<table mat-table [dataSource]="item.functionalZoning">
<ng-container matColumnDef="checked">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<mat-checkbox (change)='changeBuilding(element,$event,key)'></mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="region">
<th mat-header-cell *matHeaderCellDef>区域</th>
<td mat-cell *matCellDef="let element">
<mat-form-field class="example-full-width">
<input matInput [(ngModel)]="element.region" type="text" maxlength="20">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="measure">
<th mat-header-cell *matHeaderCellDef>面积</th>
<td mat-cell *matCellDef="let element">
<mat-form-field class="example-full-width">
<input matInput type="number" [(ngModel)]="element.area">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="situation">
<th mat-header-cell *matHeaderCellDef>基本情况</th>
<td mat-cell *matCellDef="let element">
<textarea [(ngModel)]="element.details" maxlength="250"></textarea>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<table mat-table [dataSource]="item.functionalZoning">
<ng-container matColumnDef="checked">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<mat-checkbox (change)='changeBuilding(element,$event,key)'></mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="region">
<th mat-header-cell *matHeaderCellDef>区域</th>
<td mat-cell *matCellDef="let element">
<mat-form-field class="example-full-width">
<input matInput [(ngModel)]="element.region" type="text" maxlength="20">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="measure">
<th mat-header-cell *matHeaderCellDef>面积</th>
<td mat-cell *matCellDef="let element">
<mat-form-field class="example-full-width">
<input matInput type="number" [(ngModel)]="element.area">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="situation">
<th mat-header-cell *matHeaderCellDef>基本情况</th>
<td mat-cell *matCellDef="let element">
<textarea [(ngModel)]="element.details"></textarea>
</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>

14
src/app/ui/key-site/key-site.component.html
Unescape View File

@ -1,5 +1,5 @@
<div class="content">
<mat-tab-group>
<mat-tab-group style="height: 100%;">
<mat-tab label="单位重点部位">
<div class="contentBox">
@ -47,11 +47,11 @@
</table>
<p style="text-align: center;" *ngIf="!allCompanyPosition.length">暂无数据,请前往平面图进行相关数据录入</p>
</div>
<div style="margin-top: 25px;">
<div style="margin-top: 25px; text-align: left;">
<h3 style="text-align: center;font-weight: 550;">重点提示</h3>
<mat-icon title="保存" style="margin-left: 5%;cursor: pointer;" (click)='Preservation()'>description</mat-icon>
<mat-icon title="保存" style="margin-left: 11%; cursor: pointer;" (click)='Preservation()'>description</mat-icon>
<p class="tips">
<textarea [(ngModel)]="companyInput"></textarea>
<textarea [(ngModel)]="companyInput" maxlength="500"></textarea>
</p>
</div>
@ -105,11 +105,11 @@
</table>
<p style="text-align: center;" *ngIf="!item.position.length">暂无数据,请前往平面图进行相关数据录入</p>
</div>
<div style="margin-top: 25px;">
<div style="margin-top: 25px; text-align: left;">
<h3 style="text-align: center;font-weight: 550;">重点提示</h3>
<mat-icon title="保存" style="margin-left: 5%;cursor: pointer;" (click)='PreservationBuilding(item)'>description</mat-icon>
<mat-icon title="保存" style="margin-left: 11%;cursor: pointer;" (click)='PreservationBuilding(item)'>description</mat-icon>
<p class="tips">
<textarea [(ngModel)]="item.companyInput"></textarea>
<textarea [(ngModel)]="item.companyInput" maxlength="500"></textarea>
</p>
</div>

8
src/app/ui/key-site/key-site.component.scss
Unescape View File

@ -3,13 +3,15 @@
height: 100%;
padding: 10px;
.contentBox{
width: 75%;
width: 100%;
height: 100%;
overflow-y: auto;
text-align: center;
margin: 0 auto;
}
}
table {
width: 100%;
width: 90%;
margin: 15px auto;
text-align: center;
.cdk-header-cell {
@ -19,7 +21,7 @@ table {
//重点提示
.tips{
width: 85%;
width: 75%;
height: 150px;
border: 1px solid black;
border-radius: 5px;

2
src/app/ui/uploading-cad/editFile.html
Unescape View File

@ -2,7 +2,7 @@
<div>
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
<mat-form-field>
<input matInput placeholder="请输入CAD图纸名称" required [(ngModel)]="CADname" name="name" maxlength="20">
<input matInput placeholder="请输入CAD图纸名称" required [(ngModel)]="CADname" name="name" maxlength="30">
</mat-form-field>
<p style="font-size: 14px; color: red; margin-bottom: 15px;">*注: XX建筑-XX系统-XX某层</p>

2
src/app/ui/uploading-cad/readFile.html
Unescape View File

@ -2,7 +2,7 @@
<div>
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
<mat-form-field>
<input matInput placeholder="请输入CAD图纸名称" required ngModel name="name" maxlength="20">
<input matInput placeholder="请输入CAD图纸名称" required ngModel name="name" maxlength="30">
</mat-form-field>
<p style="font-size: 14px; color: red; margin-bottom: 15px;">*注: XX建筑-XX系统-XX某层</p>
<div>

118
src/app/ui/uploading-cad/uploading-cad.component.html
Unescape View File

@ -1,62 +1,64 @@
<div class="header">
<button mat-raised-button color="primary" (click)="openReadFile()" *ngIf="!uploadisLoading">上传</button>
<button mat-raised-button color="primary" (click)='readFile()' *ngIf="!downloadisLoading">下载</button>
<button mat-raised-button color="primary" (click)='editFile()'>编辑</button>
<button mat-raised-button color="primary" (click)='deleteCAD()' style="margin-right: 25px;">删除</button>
<div class="progressBox" *ngIf="uploadisLoading">
<button mat-raised-button style="margin-right: 5px;" (click)="cancel()">取消上传</button>
<span style="font-size: 12px;">上传中...</span>
<mat-progress-bar mode="determinate" [value]="uploadProgress" class="progress"></mat-progress-bar>
</div>
<div class="progressBox" *ngIf="downloadisLoading">
<!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> -->
<span style="font-size: 12px;">下载中...</span>
<mat-progress-bar mode="determinate" [value]="downloadProgress" class="progress" style="left: 52px;top: 13px;"></mat-progress-bar>
</div>
<button mat-raised-button color="primary" (click)="openReadFile()" *ngIf="!uploadisLoading">上传</button>
<button mat-raised-button color="primary" (click)='readFile()' *ngIf="!downloadisLoading">下载</button>
<button mat-raised-button color="primary" (click)='editFile()'>编辑</button>
<button mat-raised-button color="primary" (click)='deleteCAD()' style="margin-right: 25px;">删除</button>
<div class="progressBox" *ngIf="uploadisLoading">
<button mat-raised-button style="margin-right: 5px;" (click)="cancel()">取消上传</button>
<span style="font-size: 12px;">上传中...</span>
<mat-progress-bar mode="determinate" [value]="uploadProgress" class="progress"></mat-progress-bar>
</div>
<div class="progressBox" *ngIf="downloadisLoading">
<!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> -->
<span style="font-size: 12px;">下载中...</span>
<mat-progress-bar mode="determinate" [value]="downloadProgress" class="progress" style="left: 52px;top: 13px;"></mat-progress-bar>
</div>
</div>
<table mat-table [dataSource]="CADList">
<ng-container matColumnDef="checked">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<mat-checkbox (change)='checkedCAD($event,element)'></mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>名称</th>
<td mat-cell *matCellDef="let element">
<mat-icon style="color: #FFC122;">insert_drive_file</mat-icon>{{element.name}}
</td>
</ng-container>
<ng-container matColumnDef="time">
<th mat-header-cell *matHeaderCellDef>时间</th>
<td mat-cell *matCellDef="let element">
{{element.creationTime|date:'yyyy-MM-dd'}}
</td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef>状态</th>
<td mat-cell *matCellDef="let element">
<label *ngIf="!element.loading" ><mat-icon style="color: #00FF00;">check_circle</mat-icon></label>
<label *ngIf="element.loading" >正在下载...</label>
</td>
</ng-container>
<ng-container matColumnDef="size">
<th mat-header-cell *matHeaderCellDef>大小</th>
<td mat-cell *matCellDef="let element">
{{element.fileLength}}MB
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<p style="width: 100px; margin: 30px auto; text-align: center;" *ngIf="!CADList.length">暂无数据</p>
<div style="overflow-y: auto;height: 90%;">
<table mat-table [dataSource]="CADList">
<ng-container matColumnDef="checked">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<mat-checkbox (change)='checkedCAD($event,element)'></mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>名称</th>
<td mat-cell *matCellDef="let element">
<mat-icon style="color: #FFC122;">insert_drive_file</mat-icon>{{element.name}}
</td>
</ng-container>
<ng-container matColumnDef="time">
<th mat-header-cell *matHeaderCellDef>时间</th>
<td mat-cell *matCellDef="let element">
{{element.creationTime|date:'yyyy-MM-dd'}}
</td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef>状态</th>
<td mat-cell *matCellDef="let element">
<label *ngIf="!element.loading" ><mat-icon style="color: #00FF00;">check_circle</mat-icon></label>
<label *ngIf="element.loading" >正在下载...</label>
</td>
</ng-container>
<ng-container matColumnDef="size">
<th mat-header-cell *matHeaderCellDef>大小</th>
<td mat-cell *matCellDef="let element">
{{element.fileLength}}MB
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<p style="width: 100px; margin: 30px auto; text-align: center;" *ngIf="!CADList.length">暂无数据</p>

19
src/styles.scss
Unescape View File

@ -1,19 +1,14 @@
// @import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import './app/theme.scss';
html,body{
width: 100%;
height: 100%;
margin:0;
margin:0 auto;
padding:0;
}
ul,ol,dl,li,dt,dd,p,form,input,h1,h2,h3,h4,h5,h6,section,article,aside,header,footer,nav,figure,time,mark,main,canvas{
margin:0;
padding:0;
}
body{
margin: 0 auto;
}
b,strong,i,em,h1,h2,h3,h4,h5,h6{
font-weight:500;
font-style:normal;
@ -23,7 +18,8 @@ img{
}
a{
text-decoration: none;
color:#000;
color:#000;
}
ul,ol,li{
list-style:none;
overflow-x: hidden;
@ -36,10 +32,7 @@ ul,ol,li{
height:0;
visibility: hidden;
}
}
.mat-expansion-panel-body {
padding: 0px !important;
}
//root标签
app-root{
height: 100%;
}
@ -47,6 +40,9 @@ app-root{
h1{
font-size: 16px;
}
.mat-expansion-panel-body {
padding: 0px !important;
}
.mat-expansion-indicator::after {
color: white;
}
@ -59,6 +55,7 @@ table td.mat-footer-cell:last-of-type{
}
.mat-tab-body{
height: 100%;
overflow-y: auto;
}
//x轴滚动条隐藏

Write Preview
Loading…
Cancel
Save