edit

2022-04-22 15:35:07 +08:00
parent 155812d124
commit c2d5ef9261
4 changed files with 85 additions and 23 deletions
--- a/src/app/routes/datatable/components/dataindex/dataindex.component.html
+++ b/src/app/routes/datatable/components/dataindex/dataindex.component.html
@ -2,8 +2,14 @@
 <page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
 <div nz-row [nzGutter]="16">
  <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'客户预存款总额'" [bordered]="true" [total]="totalAdvanceDeposit?.totalAmount || '¥ 0.00万'"
+    <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)">
@ -12,8 +18,14 @@
    </g2-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'业绩量总额'" [bordered]="true" [total]="totalPerformanceVolume?.totalAmount || '¥ 0.00万'"
-      [footer]="PerformanceVolumeFooter" contentHeight="46">
+    <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)">
@ -22,18 +34,28 @@
    </g2-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'司机应付总额'" [bordered]="true" [total]="totalFreight?.totalAmount || '¥ 0.00万'" [footer]="footer"
-      contentHeight="46">
-      <ng-template #footer>
-        <g2-mini-area line borderColor="#E60012" color="#F09896"  height="45" [data]="totalFreight?.list || []"
+    <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]="'附加费总额'" [bordered]="true" [total]="totalSurcharge?.totalAmount || '¥ 0.00万'"
+    <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)">
@ -43,12 +65,12 @@
  </div>
 </div>
 <div nz-row [nzGutter]="16">
-  <div nz-col class="gutter-row" [nzSpan]="7">
+  <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]="17">
+  <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> -->
@ -57,7 +79,7 @@
  </div>
 </div>
 <div nz-row [nzGutter]="16">
-  <div nz-col class="gutter-row" [nzSpan]="7">
+  <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">
@ -65,7 +87,7 @@
      <g2-custom #BillDirectProportion delay="100"></g2-custom>
    </nz-card>
  </div>
-  <div nz-col class="gutter-row" [nzSpan]="17">
+  <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> -->
--- a/src/app/routes/datatable/components/dataindex/dataindex.component.less
+++ b/src/app/routes/datatable/components/dataindex/dataindex.component.less
@ -6,4 +6,44 @@
    background-clip        : text;
    -webkit-background-clip: text;
    position               : absolute;
+}
+
+
+.mini_area_title {
+    display        : flex;
+    justify-content: space-between;
+
+    .title {
+        font-size  : 16px;
+        font-weight: 500;
+        color      : #1D2129;
+    }
+
+    .subtitle {
+        font-size  : 14px;
+        font-weight: 400;
+        color      : #575D6C;
+        text-align : right;
+
+        .percent {
+            color: #E60012
+        }
+    }
+}
+
+:host::ng-deep {
+    .g2-card__meta-wrap {
+        width: 100%;
+
+        .g2-card__total {
+            font-size  : 28px;
+            font-weight: 500;
+            color      : #1D2129;
+            margin-top : 8px;
+        }
+    }
+
+    .g2-card__footer {
+        border: 0px;
+    }
 }
--- a/src/app/routes/datatable/components/dataindex/dataindex.component.ts
+++ b/src/app/routes/datatable/components/dataindex/dataindex.component.ts
@ -126,7 +126,7 @@ export class DatatableDataindexComponent implements OnInit {
    const chart = new Chart({
      container: el,
      autoFit: true,
-      height: 400
+      height: 380
    });
    // 新建一个 view 用来单独渲染Annotation
    const innerView = chart.createView();
@ -208,21 +208,21 @@ export class DatatableDataindexComponent implements OnInit {
        position: ['50%', '50%'],
        content: data[0].item,
        style: {
-          fontSize: 20,
+          fontSize: 14,
          fill: '#8c8c8c',
          textAlign: 'center'
        },
-        offsetY: -20
+        offsetY: -10
      })
      .text({
        position: ['50%', '50%'],
        content: data[0].count,
        style: {
-          fontSize: 28,
+          fontSize: 16,
          fill: '##000',
          textAlign: 'center'
        },
-        offsetY: 20
+        offsetY: 10
      });
    innerView.render(true);

@ -260,21 +260,21 @@ export class DatatableDataindexComponent implements OnInit {
            position: ['50%', '50%'],
            content: data.item,
            style: {
-              fontSize: 20,
+              fontSize: 14,
              fill: '#8c8c8c',
              textAlign: 'center'
            },
-            offsetY: -20
+            offsetY: -10
          })
          .text({
            position: ['50%', '50%'],
            content: data.count,
            style: {
-              fontSize: 28,
+              fontSize: 16,
              fill: '##000',
              textAlign: 'center'
            },
-            offsetY: 20
+            offsetY: 10
          });
        innerView.render(true);
        lastItem = data.item;
@ -404,7 +404,7 @@ export class DatatableDataindexComponent implements OnInit {
    const chart = new Chart({
      container: el,
      autoFit: true,
-      height: 400
+      height: 380
    });
    chart.data(data);
    // 设置坐标轴