666

src/app/routes/datatable/components/compliance/index/index.component.ts

@@ -5,7 +5,6 @@ import { format } from 'date-fns';
 import { SFComponent, SFDateWidgetSchema, SFRadioWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
 import { G2TimelineData, G2TimelineMap } from '@delon/chart/timeline';
 import { Chart } from '@antv/g2';
-const DataSet = require('@antv/data-set');
 @Component({
   selector: 'app-datatable-compliance-index',
   templateUrl: './index.component.html',

src/app/routes/datatable/components/financetable/curve/curve.component.html

@@ -0,0 +1,5 @@
+<g2-custom delay="100" (render)="render($event)"></g2-custom>
+<nz-divider></nz-divider>
+
+<g2-custom delay="100" (render)="render2($event)"></g2-custom>
+

src/app/routes/datatable/components/financetable/curve/curve.component.ts

@@ -0,0 +1,168 @@
+import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
+import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
+import { DataService } from '../../../services/data.service';
+// import DataSet from '@antv/data-set';
+const DataSet = require('@antv/data-set');
+import { Chart } from '@antv/g2';
+@Component({
+  selector: 'app-financetable-curve',
+  templateUrl: './curve.component.html',
+  styleUrls: ['./curve.component.less']
+})
+export class FinanceTableCurveComponent implements OnInit {
+  constructor(private service: DataService, private ngZone: NgZone) {}
+
+  ngOnInit(): void {}
+
+  handleClick(data: G2MiniAreaClickItem): void {
+    this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
+  }
+
+  render(el: ElementRef<HTMLDivElement>): void {
+    this.ngZone.runOutsideAngular(() => this.initBar(el.nativeElement));
+  }
+  private initBar(el: HTMLElement): void {
+    const data = [
+      { name: '已收金额（元）', 月份: 'Jan.', 月均降雨量: 18.9 },
+      { name: '已收金额（元）', 月份: 'Feb.', 月均降雨量: 28.8 },
+      { name: '已收金额（元）', 月份: 'Mar.', 月均降雨量: 39.3 },
+      { name: '已收金额（元）', 月份: 'Apr.', 月均降雨量: 81.4 },
+      { name: '已收金额（元）', 月份: 'May', 月均降雨量: 47 },
+      { name: '已收金额（元）', 月份: 'Jun.', 月均降雨量: 20.3 },
+      { name: '已收金额（元）', 月份: 'Jul.', 月均降雨量: 24 },
+      { name: '已收金额（元）', 月份: 'Aug.', 月均降雨量: 35.6 },
+      { name: '已付运费（元）', 月份: 'Jan.', 月均降雨量: 12.4 },
+      { name: '已付运费（元）', 月份: 'Feb.', 月均降雨量: 23.2 },
+      { name: '已付运费（元）', 月份: 'Mar.', 月均降雨量: 34.5 },
+      { name: '已付运费（元）', 月份: 'Apr.', 月均降雨量: 99.7 },
+      { name: '已付运费（元）', 月份: 'May', 月均降雨量: 52.6 },
+      { name: '已付运费（元）', 月份: 'Jun.', 月均降雨量: 35.5 },
+      { name: '已付运费（元）', 月份: 'Jul.', 月均降雨量: 37.4 },
+      { name: '已付运费（元）', 月份: 'Aug.', 月均降雨量: 42.4 }
+    ];
+
+    const chart = new Chart({
+      container: el,
+      autoFit: true,
+      height: 500
+    });
+    chart.data(data);
+    chart.scale('月均降雨量', {
+      nice: true
+    });
+    chart.tooltip({
+      showMarkers: false,
+      shared: true
+    });
+    // 图表下方图形文字自定义
+    chart.legend({
+      items: [
+        {
+          name: '已收金额（元）',
+          value: 'node_load1',
+          marker: {
+            symbol: 'circle',
+            style: { fill: '#6395f9' }
+          }
+        },
+        {
+          name: '已付运费（元）',
+          value: 'node_load1',
+          marker: {
+            symbol: 'circle',
+            style: { fill: '#62daab' }
+          }
+        }
+      ]
+    });
+
+    chart
+      .interval()
+      .position('月份*月均降雨量')
+      .color('name')
+      .adjust([
+        {
+          type: 'dodge',
+          marginRatio: 0
+        }
+      ]);
+
+    chart.render();
+  }
+
+  render2(el: ElementRef<HTMLDivElement>): void {
+    this.ngZone.runOutsideAngular(() => this.initCurve(el.nativeElement));
+  }
+
+  private initCurve(el: HTMLElement): void {
+    const chart = new Chart({
+      container: el,
+      autoFit: true,
+      height: 400
+    });
+    // 以三组数据为例, 需要展示 91/92/93年中a/b/c数据走势
+    const data = [
+      { data: '1月', label: '平均附加费率', value: 5 },
+      { data: '2月', label: '平均附加费率', value: 10 },
+      { data: '3月', label: '平均附加费率', value: 25 },
+      { data: '4月', label: '平均附加费率', value: 35 },
+      { data: '5月', label: '平均附加费率', value: 15 },
+      { data: '6月', label: '平均附加费率', value: 5 },
+      { data: '7月', label: '平均附加费率', value: 95 },
+      { data: '8月', label: '平均附加费率', value: 45 }
+    ];
+
+    chart.data(data);
+    //刻度自定义
+    chart.scale({
+      data: {
+        range: [0, 1]
+      },
+      value: {
+        min: 0,
+        nice: true
+      }
+    });
+    // 图表下方图形文字自定义
+    chart.legend({
+      items: [
+        {
+          name: '平均附加费率',
+          value: 'node_load1',
+          marker: {
+            symbol: 'circle',
+            style: { fill: '#6193f7' }
+          }
+        }
+      ]
+    });
+    // 提示自定义
+    chart.tooltip({
+      showCrosshairs: true,
+      shared: true
+    });
+
+    //数据格式化
+    chart.axis('value', {
+      label: {
+        formatter: val => {
+          return val + ' %';
+        }
+      }
+    });
+    // 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
+    chart
+      .line()
+      .position('data*value')
+      .color('label')
+      .tooltip('label*value', (name: any, value: any) => {
+        return {
+          name: name,
+          value: value + '%'
+        };
+      });
+    // 在x*y的坐标上按z值绘制圆点
+    // chart.point().position('data*value').size(4).color('label').shape('circle');
+    chart.render();
+  }
+}

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

@@ -1,6 +1,68 @@
 <!-- 页头 -->
-<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
+<page-header-wrapper [title]="'财务报表'"></page-header-wrapper>
-<nz-card>
+<nz-card nzTitle="财务报表" [nzExtra]="extraTemplate">
-  <sf mode="search" [schema]="searchSchema" (formSubmit)="st.reset($event)" (formReset)="st.reset($event)"></sf>
+  <ng-template #extraTemplate>
-  <st #st [data]="url" [columns]="columns"></st>
+    <div class="chooseBox">
+      <!-- <button nz-button nzType="primary" (click)="exportFun()">导出</button> -->
+      <div class="timeBox">
+        <nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()">
+          <label nz-radio-button nzValue="year">年</label>
+          <label nz-radio-button nzValue="month">月</label>
+          <label nz-radio-button nzValue="date">日</label>
+          <label nz-radio-button nzValue="define">自定义</label>
+        </nz-radio-group>
+        <div class="dateBox">
+          <nz-date-picker [(ngModel)]="date" [nzMode]="mode" [nzFormat]="dateFormat" *ngIf="mode !== 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-date-picker>
+          <nz-range-picker [(ngModel)]="defineDate" [nzFormat]="dateFormat" *ngIf="mode === 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-range-picker>
+        </div>
+
+      </div>
+    </div>
+
+  </ng-template>
+  <st #st multiSort [columns]="columns" [ps]="20" [data]="service.$api_listFinancialReportPage"
+    [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
+    [scroll]="{ x: '1200px' }" [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
+    [page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="false">
+    <ng-template st-row="czcgje" let-item let-index="index">
+      {{item.czcgje | currency}}
+    </ng-template>
+    <ng-template st-row="yingsje" let-item let-index="index">
+      {{item.yingsje | currency}}
+    </ng-template>
+    <ng-template st-row="yisje" let-item let-index="index">
+      {{item.yisje | currency}}
+    </ng-template>
+    <ng-template st-row="yingfyf" let-item let-index="index">
+      {{item.yingfyf | currency}}
+    </ng-template>
+    <ng-template st-row="yifyf" let-item let-index="index">
+      {{item.yifyf | currency}}
+    </ng-template>
+    <ng-template st-row="ykpje" let-item let-index="index">
+      {{item.ykpje | currency}}
+    </ng-template>
+    <ng-template st-row="dkpje" let-item let-index="index">
+      {{item.dkpje | currency}}
+    </ng-template>
+  </st>
+</nz-card>
+<nz-card nzTitle="运营报表" [nzExtra]="extraTemplate01">
+  <ng-template #extraTemplate01>
+    <div class="chooseBox">
+      <nz-select [(ngModel)]="enterpriseInfoId" style="width: 200px" (ngModelChange)="changeCurve()">
+        <nz-option [nzValue]="item.value" [nzLabel]="item.label" *ngFor="let item of interManlist"></nz-option>
+      </nz-select>
+      <div class="timeBox">
+        <nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext()">
+          <label nz-radio-button nzValue="year">年</label>
+          <label nz-radio-button nzValue="month">月</label>
+        </nz-radio-group>
+        <div class="dateBox">
+          <nz-date-picker [nzDisabledDate]="disabledDate" [(ngModel)]="dateNext" [nzMode]="modeNext" (ngModelChange)="onChangeNext($event)"></nz-date-picker>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+  <app-financetable-curve></app-financetable-curve>
 </nz-card>

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

@@ -0,0 +1,11 @@
+.chooseBox{
+    display: flex;
+}
+.timeBox{
+    display: flex;
+    margin: 0 0 0 10px;
+}
+.dateBox{
+    display: inline-block;
+    margin: 0 0 0 10px;
+}

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

@@ -1,45 +1,124 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { STColumn, STComponent } from '@delon/abc/st';
 import { SFSchema } from '@delon/form';
-import { ModalHelper, _HttpClient } from '@delon/theme';
+import { DatePipe, ModalHelper, _HttpClient } from '@delon/theme';
+import { DataService } from '../../services/data.service';
+import { differenceInCalendarDays } from 'date-fns';
 
 @Component({
   selector: 'app-datatable-financetable',
   templateUrl: './financetable.component.html',
+  styleUrls: ['./financetable.component.less'],
+  providers: [DatePipe]
 })
 export class DatatableFinancetableComponent implements OnInit {
-  url = `/user`;
-  searchSchema: SFSchema = {
-    properties: {
-      no: {
-        type: 'string',
-        title: '编号'
-      }
-    }
-  };
   @ViewChild('st') private readonly st!: STComponent;
+  type = 1;
+  mode = 'year';
+  date: any = null;
+  defineDate = [];
+  time: any = ['2022-01-01 00:00:00']
+  dateFormat = 'yyyy-MM-dd';
+  dateNext: any = null;
+  modeNext = 'year';
+  timeNext: any = ['2022-01-01 00:00:00']
+  today = new Date();
+  enterpriseInfoId = ''
+  enterpriseInfoIdPie = ''
+  interManlist: any = []
   columns: STColumn[] = [
-    { title: '编号', index: 'no' },
+    { title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
-    { title: '调用次数', type: 'number', index: 'callNo' },
+    { title: '客户预存款', index: 'czcgje',render: 'czcgje', className: 'text-center' },
-    { title: '头像', type: 'img', width: '50px', index: 'avatar' },
+    { title: '应收金额', index: 'yingsje',render: 'yingsje', className: 'text-center' },
-    { title: '时间', type: 'date', index: 'updatedAt' },
+    { title: '已收金额', index: 'yisje',render: 'yisje', className: 'text-center' },
-    {
+    { title: '应付运费', index: 'yingfyf', render: 'yingfyf',className: 'text-center' },
-      title: '',
+    { title: '已付运费', index: 'yifyf',render: 'yifyf', className: 'text-center' },
-      buttons: [
+    { title: '已开票金额', index: 'ykpje',render: 'ykpje', className: 'text-center' },
-        // { text: '查看', click: (item: any) => `/form/${item.id}` },
+    { title: '待开票金额', index: 'dkpje',render: 'dkpje', className: 'text-center' },
-        // { text: '编辑', type: 'static', component: FormEditComponent, click: 'reload' },
+    { title: '应收附加费', index: 'yingsfjf', className: 'text-center' },
-      ]
+    { title: '已收附加费', index: 'yisfjf', className: 'text-center' },
-    }
+    { title: '平均附加费率', index: 'fjfl', className: 'text-center' }
   ];
+  /**
+   * 查询参数
+   */
+  get reqParams() {
+    if (this.mode === 'year') {
+      this.type = 1
+    } else if (this.mode === 'month') {
+      this.type = 2
+    } else if (this.mode === 'date') {
+      this.type = 3
+    } else {
+      this.type = 4
+    }
+    let params: any = {
+      time: this.time,
+      type: this.type
+    };
 
-  constructor(private http: _HttpClient, private modal: ModalHelper) { }
+    delete params._$expand;
+    return { ...params };
+  }
 
-  ngOnInit(): void { }
+  constructor(public service: DataService, private datePipe: DatePipe) { }
+  ngOnInit(): void {
+    this.initData()
+  }
+  initData() {
+    this.service.getNetworkFreightForwarder().subscribe(res => {
+      this.interManlist = res
+      this.enterpriseInfoId = res[0].value
+      this.enterpriseInfoIdPie = res[0].value
+    })
+  }
 
-  add(): void {
+  changeData() {
-    // this.modal
+    if (this.mode === 'year') {
-    //   .createStatic(FormEditComponent, { i: { id: 0 } })
+      this.dateFormat = 'yyyy'
-    //   .subscribe(() => this.st.reload());
+    } else if (this.mode === 'month') {
+      this.dateFormat = 'yyyy-MM'
+    } else {
+      this.dateFormat = 'yyyy-MM-dd'
+    }
+  }
+  onChange(result: any) {
+    if (this.mode === 'year') {
+      this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
+    } else if (this.mode === 'month') {
+      this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
+    } else if (this.mode === 'date') {
+      this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00']
+    } else {
+      this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + '00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00']
+    }
+    this.st.reload({ ...this.reqParams });
+  }
+  disabledDate = (current: Date): boolean =>
+    // Can not select days before today and today
+    differenceInCalendarDays(current, this.today) > 0;
+  exportFun() {
+
+  }
+  changeCurve(){
+
+  }
+  changePie(){
+
+  }
+  changeDataNext() {
+    if(this.mode === 'year') {
+      this.dateFormat = 'yyyy'
+    } else if(this.mode === 'month') {
+      this.dateFormat = 'yyyy-MM'
+    }
+  }
+  onChangeNext(result: any) {
+    if(this.mode === 'year') {
+      this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy') + '-01-01 00:00:00']
+    } else if(this.mode === 'month') {
+      this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01 00:00:00']
+    }
   }
 
 }

src/app/routes/datatable/datatable.module.ts

@@ -24,6 +24,7 @@ import { DatatableMantableComponent } from './components/busitable/mantable/mant
 import { BusitablePillarComponent } from './components/busitable/busiindex/pillar/pillar.component';
 import { DatatableReportingFundInfoComponent } from './reporting/components/fund-info/fund-info.component';
 import { BusitableCurveComponent } from './components/busitable/busiindex/curve2/curve.component';
+import { FinanceTableCurveComponent } from './components/financetable/curve/curve.component';
 
 const COMPONENTS: Type<void>[] = [
   DatatableDataindexComponent,
@@ -49,7 +50,9 @@ const COMPONENTS: Type<void>[] = [
   BusitablePillarComponent,
   DatatableFundReportingComponent,
   BusitableCurveComponent,
-  DatatableReportingFundInfoComponent]
+  DatatableReportingFundInfoComponent,
+  FinanceTableCurveComponent
+]
 
 
 @NgModule({

src/app/routes/datatable/services/data.service.ts

@@ -34,6 +34,8 @@ export class DataService extends BaseService {
 
   // 查询开票数据报表
   $api_findInvoiceReport = `/api/fcc/invoiceReport/findInvoiceReport`;
+  // 查询开票数据报表
+  $api_listFinancialReportPage = `/api/sdc/report/listFinancialReportPage`;
 
   constructor(public injector: Injector) {
     super(injector);