邵佳豪 3 years ago
parent
commit
4e8ac998e9
  1. 176
      src/app/pages/plan-admin/plan-admin.component.html
  2. 10
      src/app/pages/plan-admin/plan-admin.component.scss
  3. 76
      src/theme.less

176
src/app/pages/plan-admin/plan-admin.component.html

@ -1,97 +1,97 @@
<!-- <p>站点预案!</p> -->
<div class="stationPlanBox" id="stationPlanBox">
<div class="orbox">
<div class="title">
<app-title [name]="'组织机构'"></app-title>
</div>
<div class="or">
<nz-tree [nzExpandedKeys]="nzExpandedKeys" [nzShowExpand]="false" #nzTreeComponent
[nzExpandAll]="nzExpandAll" nzBlockNode [nzData]="nodes" (nzClick)="activeNode($event)"
[nzTreeTemplate]="nzTreeTemplate" [nzMultiple]="false"></nz-tree>
<ng-template #nzTreeTemplate let-node let-origin="origin">
<ng-container *ngIf="node.origin.parentId == null; else elseTemplate">
<img style="vertical-align: bottom;" src="../../../assets/images/flower.png" alt="">
</ng-container>
<ng-template #elseTemplate>
<img src="../../../assets/images/point.png" alt="">
</ng-template>
<span>{{ node.title }}</span>
<img (click)="expand($event,node)" *ngIf="node.isExpanded && node.children.length != 0 "
src="../../../assets/images/expand.png" alt="">
<img (click)="expand($event,node)" *ngIf="!node.isExpanded && node.children.length != 0"
src="../../../assets/images/unexpand.png" alt="">
</ng-template>
</div>
<div class="orbox">
<div class="title">
<app-title [name]="'组织机构'"></app-title>
</div>
<div class="stationList">
<div class="title">
<app-title [name]="'站点管理'"></app-title>
</div>
<div class="search">
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item class="searchParams">
<nz-form-control>
<nz-input-group>
<input required nz-input type="text" formControlName="name" placeholder="请输入名称" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
</nz-form-control>
</nz-form-item>
<div class="or">
<nz-tree [nzExpandedKeys]="nzExpandedKeys" [nzShowExpand]="false" #nzTreeComponent [nzExpandAll]="nzExpandAll"
nzBlockNode [nzData]="nodes" (nzClick)="activeNode($event)" [nzTreeTemplate]="nzTreeTemplate"
[nzMultiple]="false"></nz-tree>
<ng-template #nzTreeTemplate let-node let-origin="origin">
<ng-container *ngIf="node.origin.parentId == null; else elseTemplate">
<img style="vertical-align: bottom;" src="../../../assets/images/flower.png" alt="">
</ng-container>
<ng-template #elseTemplate>
<img src="../../../assets/images/point.png" alt="">
</ng-template>
<span>{{ node.title }}</span>
<img (click)="expand($event,node)" *ngIf="node.isExpanded && node.children.length != 0 "
src="../../../assets/images/expand.png" alt="">
<img (click)="expand($event,node)" *ngIf="!node.isExpanded && node.children.length != 0"
src="../../../assets/images/unexpand.png" alt="">
</ng-template>
</div>
</div>
<div class="stationList">
<div class="title">
<app-title [name]="'站点管理'"></app-title>
</div>
<div class="search">
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item class="searchParams">
<nz-form-control>
<nz-input-group>
<input required nz-input type="text" formControlName="name" placeholder="请输入名称" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
</nz-form-control>
</nz-form-item>
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon
[nzType]="'sync'"></i>重置</button>
</nz-form-control>
</nz-form-item>
</form>
</div>
<div class="tablebox">
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon
[nzType]="'sync'"></i>重置</button>
</nz-form-control>
</nz-form-item>
</form>
</div>
<div class="tablebox">
<nz-table #basicTable [nzData]="list" [nzShowPagination]="false">
<thead>
<tr>
<th>加油站名称</th>
<th>区域</th>
<th>所属公司</th>
<th>联系人</th>
<th>联系电话</th>
<th>油站等级</th>
<th>经营品类</th>
<th>油机数量</th>
<th>车道数量</th>
<th>油罐容积</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<th>加油站名称</th>
<th>区域</th>
<th>所属公司</th>
<th>联系人</th>
<th>联系电话</th>
<th>油站等级</th>
<th>经营品类</th>
<th>油机数量</th>
<th>车道数量</th>
<th>油罐容积</th>
<th (click)="look()">查看</th>
</tr>
</tbody>
</nz-table>
<nz-table #basicTable [nzData]="list" [nzShowPagination]="false">
<thead>
<tr>
<th style="text-align: center;">加油站名称</th>
<th>区域</th>
<th>所属公司</th>
<th>联系人</th>
<th>联系电话</th>
<th>油站等级</th>
<th>经营品类</th>
<th>油机数量</th>
<th>车道数量</th>
<th>油罐容积</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<th style="text-align: center;">加油站名称</th>
<th>区域</th>
<th>所属公司</th>
<th>联系人</th>
<th>联系电话</th>
<th>油站等级</th>
<th>经营品类</th>
<th>油机数量</th>
<th>车道数量</th>
<th>油罐容积</th>
<th class="look" (click)="look()" style="cursor:pointer;color: #36A2FF">查看</th>
</tr>
</tbody>
</nz-table>
<div class="pagination">
<nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate"
nzShowQuickJumper></nz-pagination>
<ng-template #totalTemplate let-total> 16条/页,共100条 </ng-template>
</div>
</div>
<div class="pagination">
<nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate"
nzShowQuickJumper></nz-pagination>
<ng-template #totalTemplate let-total> 16条/页,共100条 </ng-template>
</div>
</div>
</div>
</div>
</div>

10
src/app/pages/plan-admin/plan-admin.component.scss

@ -29,7 +29,7 @@
nz-tree {
background: none;
color: #C4E2FC;
color: #c4e2fc;
}
}
}
@ -57,7 +57,7 @@
input {
background: none;
border: 1px solid #91CCFF;
border: 1px solid #91ccff;
color: #fff;
}
@ -70,8 +70,6 @@
margin-left: 16px;
}
}
}
.tablebox {
@ -80,9 +78,6 @@
flex-direction: column;
align-items: center;
overflow: hidden;
.pagination {
margin-top: 26px;
display: flex;
@ -93,6 +88,5 @@
::-webkit-scrollbar {
width: 0px;
}
}
}

76
src/theme.less

@ -298,52 +298,54 @@
margin-left: 0px;
}
}
.ant-table table{
.ant-table table {
border-collapse: collapse;
}
nz-table {
flex: 1;
width: 96%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.ant-table {
background: none;
}
.ant-table {
background: none;
}
.ant-table-thead>tr {
height: 40px;
line-height: 40px;
background: rgba(35, 153, 255, 0.2);
border: 1px solid rgba(35, 217, 255, 0.4);
box-shadow: 0 0 3px 0 rgba(35, 217, 255, 0.4) inset;
}
thead {
tr {
height: 40px;
line-height: 40px;
background: rgba(35, 153, 255, 0.2);
border: 1px solid rgba(35, 217, 255, 0.4);
box-shadow: 0 0 3px 0 rgba(35, 217, 255, 0.4) inset;
th {
text-align: left;
padding: 0;
background: none;
color: #23D9FF;
}
}
}
.ant-table-thead>tr>th {
background: none;
border-bottom: none;
padding: 0;
color: #23D9FF;
}
tbody {
flex: 1;
overflow-y: auto;
tr {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #0d3761;
color: #91CCFF;
.look {
color: #36A2FF;
cursor: pointer;
}
}
}
.ant-table-tbody>tr {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #0d3761;
}
.ant-table-tbody>tr>th {
font-weight: 400;
font-family: synormal;
background: none;
border-bottom: none;
padding: 0;
color: #91CCFF;
}
.look {
color: #36A2FF;
cursor: pointer;
}
}

Loading…
Cancel
Save