edit

proxy.conf.js

@@ -30,7 +30,7 @@ module.exports = {
   // },
   '//api': {
     target: {
-      host: 'tms-api-dev.eascs.com',
+      host: 'tms-api-test.eascs.com',
       protocol: 'https:',
       port: 443
     },

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万'"
+    <g2-card [title]="PerformanceVolumeTitle" [bordered]="true"
-      [footer]="PerformanceVolumeFooter" contentHeight="46">
+      [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"
+    <g2-card [title]="FreightTitle" [bordered]="true" [total]="totalFreight?.totalAmount || '¥ 0.00万'"
-      contentHeight="46">
+      [footer]="Freightfooter" contentHeight="46">
-      <ng-template #footer>
+      <ng-template #FreightTitle>
-        <g2-mini-area line borderColor="#E60012" color="#F09896"  height="45" [data]="totalFreight?.list || []"
+        <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> -->

src/app/routes/datatable/components/dataindex/dataindex.component.less

@@ -7,3 +7,43 @@
     -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;
+    }
+}

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);
     // 设置坐标轴