From 12b04f145bae740e1971036b1e2dfc1bc224d17b Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Wed, 11 Jul 2018 14:38:47 +0800 Subject: [PATCH] Revert "框架调整" --- src/app/routes/dashboard/analysis/analysis.component.html | 226 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 226 insertions(+), 0 deletions(-) diff --git a/src/app/routes/dashboard/analysis/analysis.component.html b/src/app/routes/dashboard/analysis/analysis.component.html new file mode 100644 index 0000000..2b95509 --- /dev/null +++ b/src/app/routes/dashboard/analysis/analysis.component.html @@ -0,0 +1,226 @@ +<page-header></page-header> +<div nz-row [nzGutter]="24" class="pt-lg"> + <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6"> + <g2-card [title]="'������������'" total="�� 126,560" contentHeight="44px" [action]="action1" [footer]="footer1"> + <ng-template #action1> + <nz-tooltip [nzTitle]="'������������'"> + <i nz-tooltip class="anticon anticon-info-circle-o"></i> + </nz-tooltip> + </ng-template> + <trend flag="up" style="display:block; margin-top:2px;">��������� + <span class="pl-sm">12%</span> + </trend> + <trend flag="down">��������� + <span class="pl-sm">11%</span> + </trend> + <ng-template #footer1> + <p class="text-truncate mb0">��������������� + <span class="ml-sm">���12,423</span> + </p> + </ng-template> + </g2-card> + </div> + <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6"> + <g2-card [title]="'���������'" total="8,848" contentHeight="46px" [action]="action2" [footer]="footer2"> + <ng-template #action2> + <nz-tooltip [nzTitle]="'������������'"> + <i nz-tooltip class="anticon anticon-info-circle-o"></i> + </nz-tooltip> + </ng-template> + <g2-mini-area color="#975FE4" height="46" [data]="data.visitData"></g2-mini-area> + <ng-template #footer2> + <p class="text-truncate mb0">������������ + <span class="ml-sm">1,234</span> + </p> + </ng-template> + </g2-card> + </div> + <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6"> + <g2-card [title]="'������������'" total="6,560" contentHeight="46px" [action]="action3" [footer]="footer3"> + <ng-template #action3> + <nz-tooltip [nzTitle]="'������������'"> + <i nz-tooltip class="anticon anticon-info-circle-o"></i> + </nz-tooltip> + </ng-template> + <g2-mini-bar height="46" [data]="data.visitData"></g2-mini-bar> + <ng-template #footer3> + <p class="text-truncate mb0">��������� + <span class="ml-sm">60%</span> + </p> + </ng-template> + </g2-card> + </div> + <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6"> + <g2-card [title]="'������������������'" total="78%" contentHeight="46px" [action]="action4" [footer]="footer4"> + <ng-template #action4> + <nz-tooltip [nzTitle]="'������������'"> + <i nz-tooltip class="anticon anticon-info-circle-o"></i> + </nz-tooltip> + </ng-template> + <g2-mini-progress height="46" percent="78" strokeWidth="8" target="80" color="#13C2C2"></g2-mini-progress> + <ng-template #footer4> + <div class="d-flex justify-content-between"> + <trend flag="up">��������� + <span class="pl-sm">12%</span> + </trend> + <trend flag="down">��������� + <span class="pl-sm">11%</span> + </trend> + </div> + </ng-template> + </g2-card> + </div> +</div> +<nz-card [nzLoading]="loading" [nzBordered]="false" class="ant-card__body-nopadding sales-card"> + <nz-tabset [nzTabBarExtraContent]="extraTemplate"> + <nz-tab nzTitle="���������"> + <div nz-row> + <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16"> + <div class="bar"> + <g2-bar height="295" [title]="'���������������'" [data]="data.salesData"></g2-bar> + </div> + </div> + <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8"> + <div class="rank-list"> + <h4 class="rank-title">���������������������</h4> + <ul> + <li *ngFor="let i of rankingListData; let idx = index"> + <div> + <span class="icon" [ngClass]="{'active': idx < 3}">{{idx+1}}</span> + {{i.title}} + </div> + <span>{{i.total | number: '3.0'}}</span> + </li> + </ul> + </div> + </div> + </div> + </nz-tab> + <nz-tab nzTitle="���������"> + <div nz-row> + <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16"> + <div class="bar"> + <g2-bar height="295" [title]="'���������������'" [data]="data.salesData"></g2-bar> + </div> + </div> + <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8"> + <div class="rank-list"> + <h4 class="rank-title">���������������������</h4> + <ul> + <li *ngFor="let i of rankingListData; let idx = index"> + <div> + <span class="icon" [ngClass]="{'active': idx < 3}">{{idx+1}}</span> + {{i.title}} + </div> + <span>{{i.total | number: '3.0'}}</span> + </li> + </ul> + </div> + </div> + </div> + </nz-tab> + <ng-template #extraTemplate> + <div class="sales-extra-wrap"> + <div class="sales-extra"> + <a (click)="setDate('today')">������</a> + <a (click)="setDate('week')">������</a> + <a (click)="setDate('month')">������</a> + <a (click)="setDate('year')">������</a> + </div> + <nz-range-picker [(ngModel)]="date_range" style="display:inline-block; width: 256px;"></nz-range-picker> + </div> + </ng-template> + </nz-tabset> +</nz-card> +<div nz-row [nzGutter]="24"> + <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12"> + <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="������������������" [nzExtra]="extraOp"> + <ng-template #extraOp> + <nz-dropdown> + <i class="anticon anticon-ellipsis" nz-dropdown></i> + <ul nz-menu> + <li nz-menu-item>���������</li> + <li nz-menu-item>���������</li> + </ul> + </nz-dropdown> + </ng-template> + <div nz-row [nzGutter]="64"> + <div nz-col nzXs="24" nzSm="12" class="mb-md"> + <number-info total="12,321" subTotal="17.1" status="up" [subTitle]="subTitle"> + <ng-template #subTitle> + ��������������� + <nz-tooltip [nzTitle]="'������������'"> + <i nz-tooltip class="anticon anticon-info-circle-o ml-sm"></i> + </nz-tooltip> + </ng-template> + </number-info> + <g2-mini-area [line]="true" height="45" [data]="data.visitData2"></g2-mini-area> + </div> + <div nz-col nzXs="24" nzSm="12" class="mb-md"> + <number-info subTitle="������������������" total="2.7" subTotal="26.2" status="down"></number-info> + <g2-mini-area [line]="true" height="45" [data]="data.visitData2"></g2-mini-area> + </div> + </div> + <simple-table [data]="data.searchData" [columns]="searchColumn" size="small" ps="5" [toTopInChange]="false"> + <ng-template st-row="range" let-i> + <trend [flag]="i.status === 1 ? 'down' : 'up'"> + <span>{{i.range}}%</span> + </trend> + </ng-template> + </simple-table> + </nz-card> + </div> + <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12"> + <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="���������������������" [nzBodyStyle]="{'padding.px': 24}" [nzExtra]="extra" + class="sales-card" style="min-height: 482px;"> + <ng-template #extra> + <div class="sales-card-extra"> + <nz-dropdown> + <i class="anticon anticon-icon-group" nz-dropdown nzType="ellipsis"></i> + <ul nz-menu> + <li nz-menu-item>���������</li> + <li nz-menu-item>���������</li> + </ul> + </nz-dropdown> + <div class="sales-type-radio"> + <nz-radio-group [(ngModel)]="salesType" (ngModelChange)="changeSaleType()"> + <label nz-radio-button [nzValue]="'all'"> + <span>������������</span> + </label> + <label nz-radio-button [nzValue]="'online'"> + <span>������</span> + </label> + <label nz-radio-button [nzValue]="'offline'"> + <span>������</span> + </label> + </nz-radio-group> + </div> + </div> + </ng-template> + <h4 class="margin:8px 0 32px 0;">���������</h4> + <g2-pie [hasLegend]="true" subTitle="���������" [height]="248" [lineWidth]="4" [total]="salesTotal" [data]="salesPieData" [valueFormat]="handlePieValueFormat"> + </g2-pie> + </nz-card> + </div> +</div> +<nz-card [nzLoading]="loading" [nzBordered]="false" [nzBodyStyle]="{'padding': '0 0 32px'}" class="offline-card mt-lg"> + <nz-tabset [(nzSelectedIndex)]="_activeTab" (nzSelectChange)="_tabChange($event)"> + <nz-tab *ngFor="let tab of data.offlineData; let i = index;" [nzTitle]="nzTabHeading"> + <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;"> + <g2-pie [animate]="false" [color]="i !== _activeTab && '#BDE4FF'" [inner]="0.55" [tooltip]="false" [padding]="[0, 0, 0, 0]" + [percent]="tab.cvr * 100" [height]="64"> + </g2-pie> + </div> + </div> + </ng-template> + <div class="px-lg"> + <g2-timeline [data]="tab.chart" [titleMap]="{ y1: '���������', y2: '������������' }"></g2-timeline> + </div> + </nz-tab> + </nz-tabset> +</nz-card> -- Gitblit v1.8.0