edit

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

@@ -1,5 +1,3 @@
-<!-- 页头 -->
-<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万'"
@@ -11,9 +9,10 @@
         </p>
       </ng-template>
       <ng-template #AdvanceDepositFooter>
-        <g2-mini-area line color="#cceafe" height="45" [data]="totalAdvanceDeposit?.list || []"
+        <g2-custom #AdvanceDeposit delay="100"></g2-custom>
+        <!-- <g2-mini-area line color="#cceafe" height="45" [data]="totalAdvanceDeposit?.list || []"
           (clickItem)="handleClick($event)">
-        </g2-mini-area>
+        </g2-mini-area> -->
       </ng-template>
     </g2-card>
   </div>

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

@@ -19,6 +19,7 @@ import { GeometryLabelCfg } from '@antv/g2/lib/interface';
   providers: [CurrencyPipe]
 })
 export class DatatableDataindexComponent implements OnInit {
+  @ViewChild('AdvanceDeposit', { static: false }) AdvanceDeposit!: G2CustomComponent;
   @ViewChild('g2custom', { static: false }) g2custom!: G2CustomComponent;
   @ViewChild('RegionalPerforman', { static: false }) RegionalPerforman!: G2CustomComponent;
   @ViewChild('BillDirectProportion', { static: false }) BillDirectProportion!: G2CustomComponent;
@@ -49,6 +50,7 @@ export class DatatableDataindexComponent implements OnInit {
     this.service.request(this.service.$api_total_advance_deposit).subscribe((res: DataTotalVO) => {
       if (res) {
         this.totalAdvanceDeposit = this.formatMiniAreaData(res);
+        this.initAreaMap(this.AdvanceDeposit['el'].nativeElement as any, []);
       }
     });
     // 业绩量总额
@@ -179,7 +181,7 @@ export class DatatableDataindexComponent implements OnInit {
       .style({
         fillOpacity: 1,
         stroke: 'white',
-        lineWidth: 8
+        lineWidth: 4
       })
       .state({
         active: {
@@ -294,42 +296,57 @@ export class DatatableDataindexComponent implements OnInit {
    * @param el
    */
   private initAreaMap(el: HTMLElement, datas: any[]): void {
+    const data = [
+      { city: '冰岛（雷克雅未克）', type: '首都人口', value: 0.56 },
+      { city: '冰岛（雷克雅未克）', type: '城市人口', value: 0.38 }
+    ];
+
     const chart = new Chart({
       container: el,
       autoFit: true,
-      height: 500
+      height: 45
     });
-    chart.data(datas);
+    chart.data(data);
-    chart.scale('Data', {
+    chart.legend(false);
-      range: [0, 1],
+    chart.axis('city', false);
-      tickCount: 10,
+    chart.axis('value', {
-      type: 'timeCat'
+      label: {
+        formatter: val => val
+      },
+      title: null,
+      grid: null
     });
-    chart.scale('sales', {
+    chart.coordinate('rect').transpose();
-      nice: true
-    });
-    chart.axis('Data', false);
-    chart.axis('sales', false);
     chart.tooltip({
-      showCrosshairs: true
+      customItems: items => {
+        return [];
+      },
+      showContent: true,
+      title: '1,968.08万'
     });
-
+    chart.interaction('active-region');
-    // chart.annotation().dataMarker({
+    chart
-    //   position: ['2014-01', 1750],
+      .interval()
-    //   top: true,
+      .adjust('stack')
-    //   text: {
+      .position('city*value')
-    //     content: '因政策调整导致销量下滑',
+      .color('type*city', (type: any, city: any) => {
-    //     style: {
+        if (type === '首都人口') {
-    //       fontSize: 13
+          return '#E60012';
-    //     }
+        }
-    //   },
+        if (type === '城市人口') {
-    //   line: {
+          return '#EAEAEB';
-    //     length: 30
+        }
-    //   }
+        return '#EAEAEB';
-    // });
+      })
-
+      .style('type', (type: any, city: any) => {
-    chart.line().position('Data*sales');
+        if (type === '首都人口') {
-    chart.area().position('Data*sales');
+          return { radius: [0, 0, 20, 20] };
+        }
+        if (type === '城市人口') {
+          return { radius: [20, 20, 0, 0] };
+        }
+        return {};
+      });
     chart.render();
   }
 
@@ -409,7 +426,7 @@ export class DatatableDataindexComponent implements OnInit {
     chart.data(data);
     // 设置坐标轴
     chart.scale({
-      y1: { alias: y1Title, min: 0, max: 1000000 },
+      y1: { alias: y1Title, min: 0, max: 2000000000 },
       y2: { alias: y2Title, min: 0, max: 1, formatter: val => (val * 100).toFixed(0) + '%' },
       y3: { alias: y3Title, min: 0, max: 1, formatter: val => (val * 100).toFixed(0) + '%' }
     });
@@ -420,8 +437,8 @@ export class DatatableDataindexComponent implements OnInit {
       padding: [10, 0, 40, 0],
       items: [
         { value: 'y1', name: y1Title, marker: { symbol: 'circle', style: { fill: '#E60012', r: 5, fontSize: 13 } } },
-        { value: 'y3', name: y3Title, marker: { symbol: 'circle', style: { fill: '#6CBFFF', r: 5, fontSize: 13 } } },
+        { value: 'y2', name: y2Title, marker: { symbol: 'circle', style: { fill: '#FE7823', r: 5, fontSize: 13 } } },
-        { value: 'y2', name: y2Title, marker: { symbol: 'circle', style: { fill: '#50D4AB', r: 5, fontSize: 13 } } }
+        { value: 'y3', name: y3Title, marker: { symbol: 'circle', style: { fill: '#F7CFCE', r: 5, fontSize: 13 } } }
       ]
     });
     chart.axis('y2', {
@@ -440,16 +457,16 @@ export class DatatableDataindexComponent implements OnInit {
       .line()
       .position('x*y2')
       // .label('pre', val => ({ content: (val * 100).toFixed(0) + '%' }))
-      .color('#6CBFFF')
+      .color('#F7CFCE')
       .size(3);
-    chart.point().position('x*y2').color('#6CBFFF').size(3).shape('circle');
+    chart.point().position('x*y2').color('#F7CFCE').size(3).shape('circle');
     chart
       .line()
       .position('x*y3')
       // .label('pre2', val => ({ content: (val * 100).toFixed(0) + '%' }))
-      .color('#50D4AB')
+      .color('#FE7823')
       .size(3);
-    chart.point().position('x*y3').color('#50D4AB').size(3).shape('circle');
+    chart.point().position('x*y3').color('#FE7823').size(3).shape('circle');
 
     chart.interaction('active-region');
     chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互

src/app/routes/ticket-management/components/invoiced-list/invoiced-list.component.ts

@@ -258,6 +258,22 @@ export class InvoicedListComponent implements OnInit {
               expand: (value: boolean) => value
             }
           }
+        },
+        invoicetype: {
+          type: 'string',
+          title: '发票类型',
+          enum: [
+            { value: '', label: '全部' },
+            { value: '1', label: '运输专用发票' }
+          ],
+          ui: {
+            widget: 'select',
+            placeholder: '请选择',
+            visibleIf: {
+              expand: (value: boolean) => value
+            }
+          },
+          default: ''
         }
       }
     };

src/styles/compact.less

@@ -109,4 +109,28 @@ h2 {
         padding: 12px 0px !important;
         margin : 0 0 0 16px !important;
     }
+}
+
+.mini_area_title {
+    margin-bottom: 0px !important;
+
+    .title {
+        font-size: 13px !important;
+    }
+
+    .subtitle {
+        font-size: 12px !important;
+    }
+}
+
+.g2-card__meta-wrap {
+
+    .g2-card__total {
+        font-size : 24px !important;
+        margin-top: 0 !important;
+    }
+}
+
+.g2-card__footer {
+    padding-top: 0;
 }