From e91e87b7b86e8d1d66caeab727a3cdc68fdc09ef Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Fri, 03 Aug 2018 16:56:41 +0800 Subject: [PATCH] Merge branch 'master' of http://blit.7drlb.com:8888/r/screen_demo2 --- src/app/routes/operation/device-data/device-data.component.html | 369 +++++++++++++++++++++++++++------------------------- 1 files changed, 194 insertions(+), 175 deletions(-) diff --git a/src/app/routes/operation/device-data/device-data.component.html b/src/app/routes/operation/device-data/device-data.component.html index 0543e0d..feedafe 100644 --- a/src/app/routes/operation/device-data/device-data.component.html +++ b/src/app/routes/operation/device-data/device-data.component.html @@ -1,181 +1,200 @@ <pro-header [title]="'������:'+ deviceData.name"> - <ng-template #logo><img src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png"></ng-template> - <ng-template #action> - <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click) ="toDeviceStatus()">������</button> - </ng-template> - <ng-template #content> - <desc-list size="small" col="2"> - <desc-list-item term="���������">���������</desc-list-item> - <desc-list-item term="������������">XX ������</desc-list-item> - <desc-list-item term="������������">2017-07-07</desc-list-item> - <desc-list-item term="������������"><a (click)="msg.success('yes')">12421</a></desc-list-item> - <desc-list-item term="������������">2017-07-07 ~ 2017-08-08</desc-list-item> - <desc-list-item term="������">������������������������������</desc-list-item> - </desc-list> - </ng-template> - <ng-template #extra> - <div nz-row> - <div nz-col nzXs="24" nzSm="12"> - <p class="text-grey">������</p> - <p class="text-lg">���������</p> - </div> - <div nz-col nzXs="24" nzSm="12"> - <p class="text-grey">������������</p> - <p class="text-lg">�� 568.08</p> + <ng-template #logo> + <img src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png"> + </ng-template> + <ng-template #action> + <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="toDeviceStatus()">������</button> + </ng-template> + <ng-template #content> + <desc-list size="small" col="2"> + <desc-list-item term="������������">{{deviceStatusName}}</desc-list-item> + <desc-list-item term="������������">{{deviceData.monitorPoint.name}}</desc-list-item> + <desc-list-item term="������������">{{deviceData.address}}</desc-list-item> + <desc-list-item term="������������">{{ deviceData.longitude +' , ' + deviceData.latitude}}</desc-list-item> + </desc-list> + </ng-template> + <ng-template #extra> + <div nz-row> + <div nz-col nzXs="24" nzSm="24"> + <p class="text-grey">sim������</p> + <p class="text-lg">{{deviceData.mac}}</p> + </div> + </div> + </ng-template> + <ng-template #tab> + <nz-tabset [(nzSelectedIndex)]="selectedIndex" [nzSize]="'default'"> + <nz-tab> + <ng-template #nzTabHeading>������������</ng-template> + </nz-tab> + <nz-tab> + <ng-template #nzTabHeading>������������</ng-template> + </nz-tab> + <nz-tab> + <ng-template #nzTabHeading>������������</ng-template> + </nz-tab> + <nz-tab> + <ng-template #nzTabHeading>������������</ng-template> + </nz-tab> + </nz-tabset> + </ng-template> +</pro-header> +<ng-template [ngIf]="selectedIndex == 0"> + <nz-card [nzBordered]="false" class="mb-lg" nzTitle="������������"> + <div nz-row> + <div nz-col [nzSpan]="12" class="border-right-1 border-bottom-1"> + <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"> + <div nz-col [nzSpan]="12" class="text-center text-gray"> + <i class="fa fa-code-fork fa-2x"></i> + </div> + <div nz-col [nzSpan]="12" class="py-md"> + <h4 class="h4">32 mg/m3</h4> + <p class="text-grey">SO2</p> + </div> </div> </div> - </ng-template> - <ng-template #tab> - <nz-tabset [nzSize]="'default'"> - <nz-tab><ng-template #nzTabHeading>������</ng-template></nz-tab> - <nz-tab><ng-template #nzTabHeading>������</ng-template></nz-tab> - </nz-tabset> - </ng-template> - </pro-header> - <nz-card [nzBordered]="false" class="mb-lg" nzTitle="������������"> - <nz-steps [nzCurrent]="1"> - <nz-step [nzTitle]="'������������'" [nzDescription]="createDesc"> - <ng-template #createDesc> - <p class="my-sm">���������<nz-icon nzType="dingding-o" class="ml-sm"></nz-icon></p> - <p>2016-12-12 12:32</p> - </ng-template> - </nz-step> - <nz-step [nzTitle]="'������������'" [nzDescription]="checkedDesc"> - <ng-template #checkedDesc> - <p class="my-sm">���������<nz-icon nzType="dingding-o" style="color: #00A0E9" class="ml-sm"></nz-icon></p> - <a (click)="msg.success('click')">���������</a> - </ng-template> - </nz-step> - <nz-step [nzTitle]="'������������'"></nz-step> - <nz-step [nzTitle]="'������'"></nz-step> - </nz-steps> - <div class="steps-content"></div> - </nz-card> - <nz-card [nzBordered]="false" nzTitle="������������" class="mb-lg"> - <desc-list class="mb-lg"> - <desc-list-item term="������������">���������</desc-list-item> - <desc-list-item term="������������">32943898021309809423</desc-list-item> - <desc-list-item term="���������">3321944288191034921</desc-list-item> - <desc-list-item term="������������">18112345678</desc-list-item> - <desc-list-item term="������������">��������� 18100000000 ������������������������������������������������������������</desc-list-item> - </desc-list> - <desc-list class="mb-lg" title="���������"> - <desc-list-item term="������������">725</desc-list-item> - <desc-list-item term="���������������������">2017-08-08</desc-list-item> - <desc-list-item> </desc-list-item> - <desc-list-item [term]="term"> - <ng-template #term> - ������������ - <nz-tooltip [nzTitle]="'������������'"> - <span nz-tooltip><i class="anticon anticon-info-circle-o"></i></span> - </nz-tooltip> - </ng-template> - 725 - </desc-list-item> - <desc-list-item term="���������������������">2017-08-08</desc-list-item> - </desc-list> - <h4 class="mb-md">���������</h4> - <nz-card nzType="inner" nzTitle="������������������"> - <desc-list size="small" title="���������" class="mb-md"> - <desc-list-item term="���������">���������</desc-list-item> - <desc-list-item term="���������">1234567</desc-list-item> - <desc-list-item term="������������">XX������ - YY���</desc-list-item> - <desc-list-item term="������������">2017-08-08</desc-list-item> - <desc-list-item term="������">������������������������������������������������������������������������������������������������...</desc-list-item> - </desc-list> - <nz-divider class="mb-md"></nz-divider> - <desc-list size="small" title="���������" col="1" class="mb-md"> - <desc-list-item term="������"> - Citrullus lanatus (Thunb.) Matsum. et Nakai������������������������������������������������������������������������.. - </desc-list-item> - </desc-list> - <nz-divider class="mb-md"></nz-divider> - <desc-list size="small" title="���������"> - <desc-list-item term="���������">���������</desc-list-item> - <desc-list-item term="���������">1234568</desc-list-item> - </desc-list> - </nz-card> - </nz-card> - <nz-card [nzBordered]="false" nzTitle="���������������������������" class="mb-lg"> - <div class="no-data"> - <i class="anticon anticon-frown-o"></i>������������ + <div nz-col [nzSpan]="12" class="border-bottom-1"> + <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"> + <div nz-col [nzSpan]="12" class="text-center text-gray"> + <i class="fa fa-inbox fa-2x"></i> + </div> + <div nz-col [nzSpan]="12" class="py-md"> + <h4 class="h4">35 mg/m3</h4> + <p class="text-grey">PM2.5</p> + </div> + </div> + </div> + </div> + <div nz-row> + <div nz-col [nzSpan]="12" class="border-bottom-1 border-right-1"> + <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"> + <div nz-col [nzSpan]="12" class="text-center text-gray"> + <i class="fa fa-code-fork fa-2x"></i> + </div> + <div nz-col [nzSpan]="12" class="py-md"> + <h4 class="h4">25 mg/m3</h4> + <p class="text-grey">PM10</p> + </div> + </div> + </div> + <div nz-col [nzSpan]="12" class="border-bottom-1"> + <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"> + <div nz-col [nzSpan]="12" class="text-center text-gray"> + <i class="fa fa-inbox fa-2x"></i> + </div> + <div nz-col [nzSpan]="12" class="py-md"> + <h4 class="h4">45 mg/m3</h4> + <p class="text-grey">NO</p> + </div> + </div> + </div> + </div> + <div nz-row> + <div nz-col [nzSpan]="12" class="border-right-1"> + <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"> + <div nz-col [nzSpan]="12" class="text-center text-gray"> + <i class="fa fa-code-fork fa-2x"></i> + </div> + <div nz-col [nzSpan]="12" class="py-md"> + <h4 class="h4">11 mg/m3</h4> + <p class="text-grey">O3</p> + </div> + </div> + </div> + <div nz-col [nzSpan]="12"> + <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"> + <div nz-col [nzSpan]="12" class="text-center text-gray"> + <i class="fa fa-inbox fa-2x"></i> + </div> + <div nz-col [nzSpan]="12" class="py-md"> + <h4 class="h4">10 ug/m3</h4> + <p class="text-grey">CO</p> + </div> + </div> + </div> </div> </nz-card> - <nz-card [nzBordered]="false"> - <nz-card-tab nzTabHeading="���������������"> - <nz-table [nzDataSource]="data.advancedOperation1" [nzIsPagination]="false"> - <thead nz-thead> - <tr> - <th nz-th><span>������������</span></th> - <th nz-th><span>���������</span></th> - <th nz-th><span>������������</span></th> - <th nz-th><span>������������</span></th> - <th nz-th><span>������</span></th> - </tr> - </thead> - <tbody nz-tbody> - <tr nz-tbody-tr *ngFor="let i of data.advancedOperation1"> - <td nz-td>{{i.type}}</td> - <td nz-td>{{i.name}}</td> - <td nz-td> - <nz-badge *ngIf="i.status === 'success'" [nzStatus]="'success'" [nzText]="'������'"></nz-badge> - <nz-badge *ngIf="i.status !== 'success'" [nzStatus]="'processing'" [nzText]="'���������'"></nz-badge> - </td> - <td nz-td>{{i.updatedAt | _date}}</td> - <td nz-td>{{i.memo}}</td> - </tr> - </tbody> - </nz-table> - </nz-card-tab> - <nz-card-tab nzTabHeading="���������������"> - <nz-table [nzDataSource]="data.advancedOperation2" [nzIsPagination]="false"> - <thead nz-thead> - <tr> - <th nz-th><span>������������</span></th> - <th nz-th><span>���������</span></th> - <th nz-th><span>������������</span></th> - <th nz-th><span>������������</span></th> - <th nz-th><span>������</span></th> - </tr> - </thead> - <tbody nz-tbody> - <tr nz-tbody-tr *ngFor="let i of data.advancedOperation2"> - <td nz-td>{{i.type}}</td> - <td nz-td>{{i.name}}</td> - <td nz-td> - <nz-badge *ngIf="i.status === 'success'" [nzStatus]="'success'" [nzText]="'������'"></nz-badge> - <nz-badge *ngIf="i.status !== 'success'" [nzStatus]="'processing'" [nzText]="'���������'"></nz-badge> - </td> - <td nz-td>{{i.updatedAt | _date}}</td> - <td nz-td>{{i.memo}}</td> - </tr> - </tbody> - </nz-table> - </nz-card-tab> - <nz-card-tab nzTabHeading="���������������"> - <nz-table [nzDataSource]="data.advancedOperation3" [nzIsPagination]="false"> - <thead nz-thead> - <tr> - <th nz-th><span>������������</span></th> - <th nz-th><span>���������</span></th> - <th nz-th><span>������������</span></th> - <th nz-th><span>������������</span></th> - <th nz-th><span>������</span></th> - </tr> - </thead> - <tbody nz-tbody> - <tr nz-tbody-tr *ngFor="let i of data.advancedOperation3"> - <td nz-td>{{i.type}}</td> - <td nz-td>{{i.name}}</td> - <td nz-td> - <nz-badge *ngIf="i.status === 'success'" [nzStatus]="'success'" [nzText]="'������'"></nz-badge> - <nz-badge *ngIf="i.status !== 'success'" [nzStatus]="'processing'" [nzText]="'���������'"></nz-badge> - </td> - <td nz-td>{{i.updatedAt | _date}}</td> - <td nz-td>{{i.memo}}</td> - </tr> - </tbody> - </nz-table> - </nz-card-tab> +</ng-template> +<ng-template [ngIf]="selectedIndex == 1"> + <nz-card [nzBordered]="false" class="mb-lg" nzTitle="������������"> + <nz-table #keyTable [nzDataSource]="getTableList('history')" [nzLoading]="apiSortedTableLoading" [nzPageSize]="8" nzSize="small"> + <thead nz-thead> + <tr> + <th nz-th> + <span>������</span> + </th> + <th nz-th> + <span>������</span> + </th> + <th nz-th class="text-right"> + <span>������������</span> + </th> + </tr> + </thead> + <tbody nz-tbody> + <tr nz-tbody-tr *ngFor="let i of keyTable.data;let j = index"> + <td nz-td>{{j + 1}}</td> + <td nz-td> + <a>{{i.date}}</a> + </td> + <td nz-td class="text-right">{{i.content}}</td> + </tr> + </tbody> + </nz-table> </nz-card> - \ No newline at end of file +</ng-template> +<ng-template [ngIf]="selectedIndex == 2"> + <nz-card [nzBordered]="false" class="mb-lg" nzTitle="������������"> + <nz-table #keyTable [nzDataSource]="getTableList('alarm')" [nzLoading]="apiSortedTableLoading" [nzPageSize]="8" nzSize="small"> + <thead nz-thead> + <tr> + <th nz-th> + <span>������</span> + </th> + <th nz-th> + <span>������</span> + </th> + <th nz-th class="text-right"> + <span>������������</span> + </th> + </tr> + </thead> + <tbody nz-tbody> + <tr nz-tbody-tr *ngFor="let i of keyTable.data;let j = index"> + <td nz-td>{{j + 1}}</td> + <td nz-td> + <a>{{i.date}}</a> + </td> + <td nz-td class="text-right">{{i.content}}</td> + </tr> + </tbody> + </nz-table> + </nz-card> +</ng-template> +<ng-template [ngIf]="selectedIndex == 3"> + <nz-card [nzBordered]="false" class="mb-lg" nzTitle="������������"> + <nz-table #keyTable [nzDataSource]="getTableList('violation')" [nzLoading]="apiSortedTableLoading" [nzPageSize]="8" nzSize="small"> + <thead nz-thead> + <tr> + <th nz-th> + <span>������</span> + </th> + <th nz-th> + <span>������</span> + </th> + <th nz-th class="text-right"> + <span>������������</span> + </th> + </tr> + </thead> + <tbody nz-tbody> + <tr nz-tbody-tr *ngFor="let i of keyTable.data;let j = index"> + <td nz-td>{{j + 1}}</td> + <td nz-td> + <a>{{i.date}}</a> + </td> + <td nz-td class="text-right">{{i.content}}</td> + </tr> + </tbody> + </nz-table> + </nz-card> +</ng-template> -- Gitblit v1.8.0