From f4839b6e3fac1f877190a78c36d7affdde091efe Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Fri, 03 Aug 2018 08:46:30 +0800 Subject: [PATCH] 设备数据 --- src/app/routes/operation/device-data/device-data.component.html | 287 ++++++++++++++++++++++----------------------------------- 1 files changed, 112 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..26fe8a1 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,118 @@ <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> + <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 [nzSize]="'default'"> + <nz-tab> + <ng-template #nzTabHeading>������������</ng-template> + <ng-container *ngTemplateOutlet="realTimeData"> + </ng-container> + </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 #realTimeData> + <nz-card [nzBordered]="false" class="mb-lg" nzTitle="������������"> <div nz-row> - <div nz-col nzXs="24" nzSm="12"> - <p class="text-grey">������</p> - <p class="text-lg">���������</p> + <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-red"> + <i class="fa fa-code-fork fa-2x"></i> + </div> + <div nz-col [nzSpan]="12" class="py-md"> + <h4 class="h4">35</h4> + <p class="text-grey">SO2</p> + </div> + </div> </div> - <div nz-col nzXs="24" nzSm="12"> - <p class="text-grey">������������</p> - <p class="text-lg">�� 568.08</p> + <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-pink"> + <i class="fa fa-inbox fa-2x"></i> + </div> + <div nz-col [nzSpan]="12" class="py-md"> + <h4 class="h4">35</h4> + <p class="text-grey">PM2.5</p> + </div> + </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> + <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-green"> + <i class="fa fa-code-fork fa-2x"></i> + </div> + <div nz-col [nzSpan]="12" class="py-md"> + <h4 class="h4">25</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-green"> + <i class="fa fa-inbox fa-2x"></i> + </div> + <div nz-col [nzSpan]="12" class="py-md"> + <h4 class="h4">45</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-green"> + <i class="fa fa-code-fork fa-2x"></i> + </div> + <div nz-col [nzSpan]="12" class="py-md"> + <h4 class="h4">11</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-green"> + <i class="fa fa-inbox fa-2x"></i> + </div> + <div nz-col [nzSpan]="12" class="py-md"> + <h4 class="h4">10</h4> + <p class="text-grey">CO</p> + </div> + </div> + </div> + </div> </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-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> - </nz-card> - \ No newline at end of file +</ng-template> -- Gitblit v1.8.0