Files
bbq/src/app/routes/datatable/components/dataindex/dataindex.component.html
Taric Xin c2d5ef9261 edit
2022-04-22 15:35:07 +08:00

98 lines
4.1 KiB
HTML

<!-- 页头 -->
<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="AdvanceDepositTitle" [bordered]="true" [total]="totalAdvanceDeposit?.totalAmount || '¥ 0.00万'"
[footer]="AdvanceDepositFooter" contentHeight="46">
<ng-template #AdvanceDepositTitle>
<p class="mini_area_title">
<span class="title">客户预存款总额</span>
<span class="subtitle">完成率 <span class="percent">32.12%</span></span>
</p>
</ng-template>
<ng-template #AdvanceDepositFooter>
<g2-mini-area line color="#cceafe" height="45" [data]="totalAdvanceDeposit?.list || []"
(clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="PerformanceVolumeTitle" [bordered]="true"
[total]="totalPerformanceVolume?.totalAmount || '¥ 0.00万'" [footer]="PerformanceVolumeFooter" contentHeight="46">
<ng-template #PerformanceVolumeTitle>
<p class="mini_area_title">
<span class="title">业绩量总额</span>
<span class="subtitle">完成率 <span class="percent">32.12%</span></span>
</p>
</ng-template>
<ng-template #PerformanceVolumeFooter>
<g2-mini-area line color="#cceafe" height="45" [data]="totalPerformanceVolume?.list || []"
(clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="FreightTitle" [bordered]="true" [total]="totalFreight?.totalAmount || '¥ 0.00万'"
[footer]="Freightfooter" contentHeight="46">
<ng-template #FreightTitle>
<p class="mini_area_title">
<span class="title">司机应付总额</span>
</p>
</ng-template>
<ng-template #Freightfooter>
<g2-mini-area line borderColor="#E60012" color="#F09896" height="45" [data]="totalFreight?.list || []"
(clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="SurchargeTitle" [bordered]="true" [total]="totalSurcharge?.totalAmount || '¥ 0.00万'"
[footer]="SurchargeFooter" contentHeight="46">
<ng-template #SurchargeTitle>
<p class="mini_area_title">
<span class="title">附加费总额</span>
</p>
</ng-template>
<ng-template #SurchargeFooter>
<g2-mini-area line borderColor="#E60012" color="#F09896" height="45" [data]="totalSurcharge?.list || []"
(clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
</g2-card>
</div>
</div>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="6">
<nz-card><label class="chart_title">订单类型比例</label>
<g2-custom #g2custom delay="100"></g2-custom>
</nz-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="18">
<nz-card><label class="chart_title">大区业绩完成情况</label>
<!-- <g2-timeline [data]="chartData" [titleMap]="{ y1: '订单金额(元)', y2: '' }" [height]="200" mask="MM月DD日"
[slider]="false"></g2-timeline> -->
<g2-custom #RegionalPerforman delay="100"></g2-custom>
</nz-card>
</div>
</div>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="6">
<nz-card> <label class="chart_title">运单直付比例</label>
<!-- <g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294"
(clickItem)="handleClick($event)" [lineWidth]="10">
</g2-pie> -->
<g2-custom #BillDirectProportion delay="100"></g2-custom>
</nz-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="18">
<nz-card>
<label class="chart_title">业绩完成情况</label>
<!-- <g2-bar [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar> -->
<g2-custom #SaleProportion delay="100"></g2-custom>
</nz-card>
</div>
</div>