10 changed files with 200 additions and 11132 deletions
@ -0,0 +1,17 @@ |
|||||||
|
import { Pipe, PipeTransform } from '@angular/core'; |
||||||
|
/* |
||||||
|
* Raise the value exponentially |
||||||
|
* Takes an exponent argument that defaults to 1. |
||||||
|
* Usage: |
||||||
|
* value | exponentialStrength:exponent |
||||||
|
* Example: |
||||||
|
* {{ 2 | exponentialStrength:10 }} |
||||||
|
* formats to: 1024 |
||||||
|
*/ |
||||||
|
@Pipe({ name: 'cameraType' }) |
||||||
|
export class cameraType implements PipeTransform { |
||||||
|
transform(value: number): string { |
||||||
|
let arr = ['收银区', '进口', '出口', '卸油区', '加油区1', '加油区2', '加油区3', '加油区4'] |
||||||
|
return arr[value] |
||||||
|
} |
||||||
|
} |
@ -1,71 +1,70 @@ |
|||||||
<div class="bigbox" id="hostbox"> |
<div class="bigbox" id="hostbox"> |
||||||
<div class="orbox"> |
<div class="orbox"> |
||||||
<div class="topbox"> |
<div class="topbox"> |
||||||
<div class="lefttop"> |
<div class="lefttop"> |
||||||
<span>组织机构列表</span> |
<span>组织机构列表</span> |
||||||
</div> |
</div> |
||||||
<div class="righttop"> |
<div class="righttop"> |
||||||
<nz-input-group nzPrefixIcon="search"> |
<nz-input-group nzPrefixIcon="search"> |
||||||
<input type="text" nz-input placeholder="请输入机构名称" [(ngModel)]="searchValue" /> |
<input type="text" nz-input placeholder="请输入机构名称" [(ngModel)]="searchValue" /> |
||||||
</nz-input-group> |
</nz-input-group> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div class="treeTitle"> |
<div class="treeTitle"> |
||||||
<span>组织机构</span> |
<span>组织机构</span> |
||||||
|
</div> |
||||||
|
<div class="treebox"> |
||||||
|
<nz-tree [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" [nzExpandAll]="nzExpandAll" |
||||||
|
[nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]='nzSelectedKeys' (nzClick)="nzClick($event)" |
||||||
|
[nzTreeTemplate]="nzTreeTemplate" [nzExpandedIcon]="multiExpandedIconTpl"> |
||||||
|
</nz-tree> |
||||||
|
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||||
|
<div class="nodebox"> |
||||||
|
<span class="name">{{ node.title }}</span> |
||||||
</div> |
</div> |
||||||
<div class="treebox"> |
</ng-template> |
||||||
<nz-tree [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" [nzExpandAll]="nzExpandAll" |
<ng-template #multiExpandedIconTpl let-node let-origin="origin"> |
||||||
[nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]='nzSelectedKeys' (nzClick)="nzClick($event)" |
<ng-container *ngIf="node.children.length == 0; else elseTemplate"> |
||||||
[nzTreeTemplate]="nzTreeTemplate" [nzExpandedIcon]="multiExpandedIconTpl"> |
|
||||||
</nz-tree> |
|
||||||
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
|
||||||
<div class="nodebox"> |
|
||||||
<span class="name">{{ node.title }}</span> |
|
||||||
</div> |
|
||||||
</ng-template> |
|
||||||
<ng-template #multiExpandedIconTpl let-node let-origin="origin"> |
|
||||||
<ng-container *ngIf="node.children.length == 0; else elseTemplate"> |
|
||||||
|
|
||||||
</ng-container> |
</ng-container> |
||||||
<ng-template #elseTemplate> |
<ng-template #elseTemplate> |
||||||
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" |
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" class="ant-tree-switcher-line-icon"></i> |
||||||
class="ant-tree-switcher-line-icon"></i> |
</ng-template> |
||||||
</ng-template> |
</ng-template> |
||||||
</ng-template> |
</div> |
||||||
</div> |
|
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="hostListbox"> |
||||||
|
<div class="topbox"> |
||||||
|
<div class="lefttop"> |
||||||
|
<span>{{selectedOilStation ? selectedOilStation.displayName : '加油站'}} 分析主机列表 |
||||||
|
<span class="yellowspan">(请从左侧选择加油站)</span> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="righttop" *ngIf="selectedOilStation"> |
||||||
|
<button nz-button nzType="primary" (click)="addHost()"><i nz-icon nzType="plus-circle" |
||||||
|
nzTheme="outline"></i>新增分析主机</button> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
<div class="hostListbox"> |
<div class="tablebox"> |
||||||
<div class="topbox"> |
<nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='16'> |
||||||
<div class="lefttop"> |
<thead> |
||||||
<span>{{selectedOilStation ? selectedOilStation.displayName : '加油站'}} 分析主机列表 |
<tr> |
||||||
<span class="yellowspan">(请从左侧选择加油站)</span> |
<th>ip</th> |
||||||
</span> |
<th>操作</th> |
||||||
</div> |
</tr> |
||||||
<div class="righttop" *ngIf="selectedOilStation"> |
</thead> |
||||||
<button nz-button nzType="primary" (click)="addHost()"><i nz-icon nzType="plus-circle" |
<tbody> |
||||||
nzTheme="outline"></i>新增分析主机</button> |
<tr *ngFor="let data of basicTable.data"> |
||||||
</div> |
<td>{{data.hostIPAddress}}</td> |
||||||
</div> |
<td class="operation"> |
||||||
<div class="tablebox"> |
<a (click)="edit(data)" style="margin-right: 12px;">编辑</a> |
||||||
<nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='16'> |
<a (click)="config(data)" style="margin-right: 12px;">配置</a> |
||||||
<thead> |
<a (click)="delete(data)">删除</a> |
||||||
<tr> |
</td> |
||||||
<th>ip</th> |
</tr> |
||||||
<th>操作</th> |
</tbody> |
||||||
</tr> |
</nz-table> |
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
<tr *ngFor="let data of basicTable.data"> |
|
||||||
<td>{{data.hostIPAddress}}</td> |
|
||||||
<td class="operation"> |
|
||||||
<a (click)="edit(data)" style="margin-right: 12px;">编辑</a> |
|
||||||
<a (click)="config(data)" style="margin-right: 12px;">配置</a> |
|
||||||
<a (click)="delete(data)">删除</a> |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
</tbody> |
|
||||||
</nz-table> |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
|
</div> |
||||||
</div> |
</div> |
@ -1,42 +1,42 @@ |
|||||||
<div class="box"> |
<div class="box"> |
||||||
<div class="leftbox"> |
<div class="leftbox"> |
||||||
<nz-page-header class="site-page-header" (nzBack)="goback()" nzBackIcon nzSubtitle="返回上一页"></nz-page-header> |
<nz-page-header class="site-page-header" (nzBack)="goback()" nzBackIcon nzSubtitle="返回上一页"></nz-page-header> |
||||||
<div class="cameraList"> |
<div class="cameraList"> |
||||||
<div class="title"> |
<div class="title"> |
||||||
<span>摄像头列表</span> |
<span>摄像头列表</span> |
||||||
<button nz-button nzType="primary" (click)="addCamera()">新增摄像头</button> |
<button nz-button nzType="primary" (click)="addCamera()">新增摄像头</button> |
||||||
</div> |
</div> |
||||||
<nz-table #basicTable [nzData]="listOfData" [nzShowPagination]="false"> |
<nz-table #basicTable [nzData]="listOfData" [nzShowPagination]="false"> |
||||||
<thead> |
<thead> |
||||||
<tr> |
<tr> |
||||||
<th>名称</th> |
<th>名称</th> |
||||||
<th>用户名</th> |
<th>用户名</th> |
||||||
<th>密码</th> |
<th>密码</th> |
||||||
<th>地址</th> |
<th>地址</th> |
||||||
<th>类型</th> |
<th>类型</th> |
||||||
<th>操作</th> |
<th>操作</th> |
||||||
</tr> |
</tr> |
||||||
</thead> |
</thead> |
||||||
<tbody> |
<tbody> |
||||||
<tr *ngFor="let item of basicTable.data"> |
<tr *ngFor="let item of basicTable.data"> |
||||||
<td>{{ item.name }}</td> |
<td>{{ item.name }}</td> |
||||||
<td>{{ item.user }}</td> |
<td>{{ item.user }}</td> |
||||||
<td>{{ item.password }}</td> |
<td>{{ item.password }}</td> |
||||||
<td>{{ item.url }}</td> |
<td>{{ item.uri }}</td> |
||||||
<td>{{ item.type }}</td> |
<td>{{ item.type | cameraType}}</td> |
||||||
<td> |
<td> |
||||||
<span class="blue" style="margin-right: 12px;" (click)="editCamera(item)">编辑</span> |
<span class="blue" style="margin-right: 12px;" (click)="editCamera(item)">编辑</span> |
||||||
<span class="red" (click)="deleteCamera(item)">删除</span> |
<span class="red" (click)="deleteCamera(item)">删除</span> |
||||||
</td> |
</td> |
||||||
</tr> |
</tr> |
||||||
</tbody> |
</tbody> |
||||||
</nz-table> |
</nz-table> |
||||||
<div class="footer"> |
<div class="footer"> |
||||||
<button nz-button nzType="primary">连接</button> |
<button nz-button nzType="primary">连接</button> |
||||||
</div> |
</div> |
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
<div class="rightbox"> |
</div> |
||||||
|
<div class="rightbox"> |
||||||
|
|
||||||
</div> |
</div> |
||||||
</div> |
</div> |
Loading…
Reference in new issue