| | |
|---|
| | | </ng-template> |
|---|
| | | </pro-header> |
|---|
| | | |
|---|
| | | <div nz-row [nzGutter]="24" class="pt-lg" style="margin-top: -24px"> |
|---|
| | | <div nz-row [nzGutter]="24" class="pt-lg" style="margin-top: -24px;"> |
|---|
| | | <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6"> |
|---|
| | | <chart-card [title]="'监控仪台数'" total="{{totalDeviceCount | number: '1.0'}}" contentHeight="46px" [action]="action1" [footer]="footer1"> |
|---|
| | | <ng-template #action1> |
|---|
| | |
|---|
| | | </chart-card> |
|---|
| | | </div> |
|---|
| | | <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6"> |
|---|
| | | <chart-card [title]="'虚拟机台数'" total="1,260" contentHeight="46px" [action]="action4" [footer]="footer4"> |
|---|
| | | <chart-card [title]="'虚拟设备台数'" total="1,260" contentHeight="46px" [action]="action4" [footer]="footer4"> |
|---|
| | | <ng-template #action4> |
|---|
| | | <nz-tooltip [nzTitle]="'最近一年新增的监控模拟设备总台数'"> |
|---|
| | | <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon> |
|---|
| | |
|---|
| | | </nz-card> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <nz-card [nzLoading]="loading" [nzBordered]="false" [nzBodyStyle]="{'padding': '0 0 32px'}" class="offline-card mt-lg"> |
|---|
| | | <ng-template #body> |
|---|
| | | <nz-tabset [(nzSelectedIndex)]="_activeTab" (nzSelectChange)="_tabChange($event)"> |
|---|
| | | <nz-tab *ngFor="let tab of data.offlineData; let i = index;"> |
|---|
| | | <ng-template #nzTabHeading> |
|---|
| | | <div nz-row [nzGutter]="8" style="width: 138px; margin: 8px 0"> |
|---|
| | | <div nz-col [nzSpan]="12"> |
|---|
| | | <number-info |
|---|
| | | [title]="tab.name" |
|---|
| | | subTitle="转化率" |
|---|
| | | gap="2" |
|---|
| | | [total]="(tab.cvr * 100) + '%'" |
|---|
| | | [theme]="i !== _activeTab && 'light'"></number-info> |
|---|
| | | </div> |
|---|
| | | <div nz-col [nzSpan]="12" style="padding-top: 36px"> |
|---|
| | | <pie |
|---|
| | | [animate]="false" |
|---|
| | | [color]="i !== _activeTab && '#BDE4FF'" |
|---|
| | | [inner]="0.55" |
|---|
| | | [tooltip]="false" |
|---|
| | | [padding]="[0, 0, 0, 0]" |
|---|
| | | [percent]="tab.cvr * 100" |
|---|
| | | [height]="64"> |
|---|
| | | </pie> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </ng-template> |
|---|
| | | <div class="px-lg"> |
|---|
| | | <timeline [data]="tab.chart" |
|---|
| | | [titleMap]="{ y1: '客流量', y2: '支付笔数' }"></timeline> |
|---|
| | | </div> |
|---|
| | | </nz-tab> |
|---|
| | | </nz-tabset> |
|---|
| | | </ng-template> |
|---|
| | | </nz-card> |
|---|
| | | |
|---|
| | | <div nz-row [nzGutter]="24"> |
|---|
| | | <div nz-col nzXs="24" nzSm="24" nzMd="16"> |
|---|
