666

src/app/routes/datatable/components/compliance/customer/customer.component.html

@@ -0,0 +1,6 @@
+<!-- 页头 -->
+<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
+<nz-card>
+  <sf mode="search" [schema]="searchSchema" (formSubmit)="st.reset($event)" (formReset)="st.reset($event)"></sf>
+  <st #st [data]="url" [columns]="columns"></st>
+</nz-card>

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

@@ -0,0 +1,45 @@
+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';
+
+@Component({
+  selector: 'app-datatable-compliance-customer',
+  templateUrl: './customer.component.html',
+})
+export class DatatableComplianceCustomerComponent implements OnInit {
+  url = `/user`;
+  searchSchema: SFSchema = {
+    properties: {
+      no: {
+        type: 'string',
+        title: '编号'
+      }
+    }
+  };
+  @ViewChild('st') private readonly st!: STComponent;
+  columns: STColumn[] = [
+    { title: '编号', index: 'no' },
+    { title: '调用次数', type: 'number', index: 'callNo' },
+    { title: '头像', type: 'img', width: '50px', index: 'avatar' },
+    { title: '时间', type: 'date', index: 'updatedAt' },
+    {
+      title: '',
+      buttons: [
+        // { text: '查看', click: (item: any) => `/form/${item.id}` },
+        // { text: '编辑', type: 'static', component: FormEditComponent, click: 'reload' },
+      ]
+    }
+  ];
+
+  constructor(private http: _HttpClient, private modal: ModalHelper) { }
+
+  ngOnInit(): void { }
+
+  add(): void {
+    // this.modal
+    //   .createStatic(FormEditComponent, { i: { id: 0 } })
+    //   .subscribe(() => this.st.reload());
+  }
+
+}

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

@@ -0,0 +1,66 @@
+<!-- 页头 -->
+<page-header-wrapper [title]="'合规监控报表'"></page-header-wrapper>
+<nz-card>
+  <!-- 搜索区 -->
+  <div nz-row>
+    <div nz-col nzSpan="18">
+      <sf #sf [ui]="ui" [schema]="schema" [button]="'none'"></sf>
+    </div>
+    <div nz-col nzSpan="6">
+      <div class="chooseBox">
+        <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>
+          </nz-radio-group>
+          <div class="dateBox">
+            <nz-date-picker [(ngModel)]="date" [nzMode]="mode" [nzFormat]="dateFormat" (ngModelChange)="onChange($event)"></nz-date-picker>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</nz-card>
+
+<div nz-row [nzGutter]="16">
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'订单合格率'" [bordered]="true" [total]="'95.00%'" [footer]="footer1" contentHeight="46">
+      <ng-template #footer1>
+        <div class="card-f">
+          <span class="card-f-l">合格：12423</span> <span>不合格：12423</span>
+        </div>
+      </ng-template>
+    </g2-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'货源单占比'" [bordered]="true" [total]="'94.00%'" [footer]="footer2" contentHeight="46">
+      <ng-template #footer2>
+        <div class="card-f">
+          <span class="card-f-l">货源单：12423</span> <span>合同单：12423</span>
+        </div>
+      </ng-template>
+    </g2-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'运费直付占比'" [bordered]="true" [total]="'95.10%'" [footer]="footer3" contentHeight="46">
+      <ng-template #footer3>
+        <div class="card-f">
+          <span class="card-f-l">司机：12423</span> <span>车队长：12423</span>
+        </div>
+      </ng-template>
+    </g2-card>
+    </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'付款及时率'" [bordered]="true" [total]="'90.00%'" [footer]="footer4" contentHeight="46">
+      <ng-template #footer4>
+        <div class="card-f">
+          <span class="card-f-l">准时：12423</span> <span>逾期：12423</span>
+        </div>
+      </ng-template>
+    </g2-card>
+  </div>
+</div>
+
+<nz-card nzTitle="平台合规情况监控报表">
+  <g2-custom delay="100" (render)="render($event)"></g2-custom>
+</nz-card>

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

@@ -0,0 +1,17 @@
+.card-f{
+    color: #5a5a5a;
+    .card-f-l{
+      margin-right: 24px;  
+    }
+}
+.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/compliance/index/index.component.ts

@@ -0,0 +1,125 @@
+import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
+import { DatePipe, ModalHelper, _HttpClient } from '@delon/theme';
+import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
+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',
+  styleUrls: ['./index.component.less'],
+  providers: [DatePipe]
+})
+export class DatatableComplianceIndexComponent implements OnInit {
+  @ViewChild('sf', { static: false })
+  sf!: SFComponent;
+  ui!: SFUISchema;
+  schema: SFSchema = {};
+
+  mode = 'year';
+  date: any = null;
+  dateFormat = 'yyyy-MM-dd';
+  time: any = ['2022-01-01 00:00:00']
+  constructor(private http: _HttpClient, private modal: ModalHelper, private ngZone: NgZone, private datePipe: DatePipe) {}
+
+  ngOnInit(): void {
+    this.initSF();
+  }
+
+  changeData(){
+    if(this.mode === 'year') {
+      this.dateFormat = 'yyyy'
+    } 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']
+    }
+  }
+
+  initSF() {
+    this.schema = {
+      properties: {
+        name: {
+          type: 'string',
+          title: '',
+          ui: {
+            widget: 'select',
+            placeholder: '网络货运人'
+          }
+        },
+        name2: {
+          type: 'string',
+          title: '',
+          ui: {
+            widget: 'select',
+            placeholder: '部门'
+          }
+        },
+        name3: {
+          type: 'string',
+          title: '',
+          ui: {
+            placeholder: '业务员'
+          }
+        }
+      }
+    };
+    this.ui = {
+      '*': {
+        grid: { span: 4 }
+      }
+    };
+
+  }
+
+  data = [
+    { Date: '22 February', 订单合格率: 50000, 付款及时率: 125000 },
+    { Date: '28 February', 订单合格率: 60000, 付款及时率: 150000 },
+    { Date: '3 March', 订单合格率: 100000, 付款及时率: 250000 },
+    { Date: '20 March', 订单合格率: 200000, 付款及时率: 500000 },
+    { Date: '7 April', 订单合格率: 250000, 付款及时率: 625000 },
+    { Date: '13 June', 订单合格率: 210000, 付款及时率: 525000 }
+  ];
+  render(el: ElementRef<HTMLDivElement>) {
+    this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
+  }
+
+  private init(el: HTMLElement): void {
+    const chart = new Chart({
+      container: el,
+      autoFit: true,
+      height: 400
+    });
+    // 以三组数据为例, 需要展示 91/92/93年中a/b/c数据走势
+		const data = [
+			{x: '1991', z: 'a', y: 1},
+			{x: '1991', z: 'b', y: 2},
+			{x: '1991', z: 'c', y: 3},
+
+			{x: '1992', z: 'a', y: 11},
+			{x: '1992', z: 'b', y: 22},
+			{x: '1992', z: 'c', y: 33},
+			
+			{x: '1993', z: 'a', y: 1},
+			{x: '1993', z: 'b', y: 2},
+			{x: '1993', z: 'c', y: 3}
+		];
+
+    chart.data(data);
+		// 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
+		chart.line().position('x*y').color('z');
+		// 在x*y的坐标上按z值绘制圆点
+		chart.point().position('x*y').size(4).color('z').shape('circle');
+		chart.render();
+  }
+}

src/app/routes/datatable/components/compliance/salesman/salesman.component.html

@@ -0,0 +1,6 @@
+<!-- 页头 -->
+<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
+<nz-card>
+  <sf mode="search" [schema]="searchSchema" (formSubmit)="st.reset($event)" (formReset)="st.reset($event)"></sf>
+  <st #st [data]="url" [columns]="columns"></st>
+</nz-card>

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

@@ -0,0 +1,45 @@
+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';
+
+@Component({
+  selector: 'app-datatable-compliance-salesman',
+  templateUrl: './salesman.component.html',
+})
+export class DatatableComplianceSalesmanComponent implements OnInit {
+  url = `/user`;
+  searchSchema: SFSchema = {
+    properties: {
+      no: {
+        type: 'string',
+        title: '编号'
+      }
+    }
+  };
+  @ViewChild('st') private readonly st!: STComponent;
+  columns: STColumn[] = [
+    { title: '编号', index: 'no' },
+    { title: '调用次数', type: 'number', index: 'callNo' },
+    { title: '头像', type: 'img', width: '50px', index: 'avatar' },
+    { title: '时间', type: 'date', index: 'updatedAt' },
+    {
+      title: '',
+      buttons: [
+        // { text: '查看', click: (item: any) => `/form/${item.id}` },
+        // { text: '编辑', type: 'static', component: FormEditComponent, click: 'reload' },
+      ]
+    }
+  ];
+
+  constructor(private http: _HttpClient, private modal: ModalHelper) { }
+
+  ngOnInit(): void { }
+
+  add(): void {
+    // this.modal
+    //   .createStatic(FormEditComponent, { i: { id: 0 } })
+    //   .subscribe(() => this.st.reload());
+  }
+
+}

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

@@ -0,0 +1,6 @@
+<!-- 页头 -->
+<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
+<nz-card>
+  <sf mode="search" [schema]="searchSchema" (formSubmit)="st.reset($event)" (formReset)="st.reset($event)"></sf>
+  <st #st [data]="url" [columns]="columns"></st>
+</nz-card>

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

@@ -0,0 +1,45 @@
+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';
+
+@Component({
+  selector: 'app-datatable-financetable',
+  templateUrl: './financetable.component.html',
+})
+export class DatatableFinancetableComponent implements OnInit {
+  url = `/user`;
+  searchSchema: SFSchema = {
+    properties: {
+      no: {
+        type: 'string',
+        title: '编号'
+      }
+    }
+  };
+  @ViewChild('st') private readonly st!: STComponent;
+  columns: STColumn[] = [
+    { title: '编号', index: 'no' },
+    { title: '调用次数', type: 'number', index: 'callNo' },
+    { title: '头像', type: 'img', width: '50px', index: 'avatar' },
+    { title: '时间', type: 'date', index: 'updatedAt' },
+    {
+      title: '',
+      buttons: [
+        // { text: '查看', click: (item: any) => `/form/${item.id}` },
+        // { text: '编辑', type: 'static', component: FormEditComponent, click: 'reload' },
+      ]
+    }
+  ];
+
+  constructor(private http: _HttpClient, private modal: ModalHelper) { }
+
+  ngOnInit(): void { }
+
+  add(): void {
+    // this.modal
+    //   .createStatic(FormEditComponent, { i: { id: 0 } })
+    //   .subscribe(() => this.st.reload());
+  }
+
+}

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

@@ -0,0 +1,14 @@
+<!-- 页头 -->
+<page-header-wrapper [title]="'开票数据报表'"></page-header-wrapper>
+<nz-card nzTitle="开票数据报表">
+  <st
+    #st
+    [data]="data"
+    [columns]="columns"
+    [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
+    [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
+    [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
+    [loadingDelay]="500"
+  >
+  </st>
+</nz-card>

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

@@ -0,0 +1,70 @@
+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';
+
+@Component({
+  selector: 'app-datatable-invoicetable',
+  templateUrl: './invoicetable.component.html',
+})
+export class DatatableInvoicetableComponent implements OnInit {
+  @ViewChild('st', { static: false })
+  st!: STComponent;
+  columns!: STColumn[];
+
+  data=[{name1:1111}]
+  constructor(private http: _HttpClient, private modal: ModalHelper) { }
+
+  /**
+   * 查询参数
+   */
+   get reqParams() {
+    return {  };
+  }
+  ngOnInit(): void { 
+    this.initST();
+  }
+  initST() {
+    this.columns = [
+      {
+        title: '运营主体',
+        index: 'name1'
+      },
+      {
+        title: '已开票总金额',
+        index: 'name1'
+      },
+      {
+        title: '当月已开票金额',
+        index: 'name1'
+      },
+      {
+        title: '已申请待开金额',
+        index: 'name1'
+      },
+      {
+        title: '未申请开票金额（历史）',
+        index: 'name1'
+      },
+      {
+        title: '未申请开票金额（当月）',
+        index: 'name1'
+      },
+      {
+        title: '当月发票张数',
+        index: 'name1'
+      },
+      {
+        title: '剩余发票张数',
+        index: 'name1'
+      },
+      
+    ];
+  }
+  add(): void {
+    // this.modal
+    //   .createStatic(FormEditComponent, { i: { id: 0 } })
+    //   .subscribe(() => this.st.reload());
+  }
+
+}

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

@@ -7,6 +7,11 @@ import { DatatableDriverComponent } from './components/customtable/driver/driver
 import { DatatableOperationtableComponent } from './components/operationtable/operationtable.component';
 import { DatatableOrderReportingComponent } from './reporting/components/order-reporting/order-reporting.component';
 import { DatatableDataindexComponent } from './components/dataindex/dataindex.component';
+import { DatatableComplianceIndexComponent } from './components/compliance/index/index.component';
+import { DatatableFinancetableComponent } from './components/financetable/financetable.component';
+import { DatatableInvoicetableComponent } from './components/invoicetable/invoicetable.component';
+import { DatatableComplianceSalesmanComponent } from './components/compliance/salesman/salesman.component';
+import { DatatableComplianceCustomerComponent } from './components/compliance/customer/customer.component';
 
 const routes: Routes = [
   { path: 'dataindex', component: DatatableDataindexComponent },
@@ -15,8 +20,13 @@ const routes: Routes = [
   { path: 'owner', component: DatatableOwnerComponent },
   { path: 'driver', component: DatatableDriverComponent },
   { path: 'operationtable', component: DatatableOperationtableComponent },
-  { path: 'reporting/order', component: DatatableOrderReportingComponent }];
+  { path: 'reporting/order', component: DatatableOrderReportingComponent },
-  
+  { path: 'compliancetabel/index', component: DatatableComplianceIndexComponent },
+  { path: 'compliancetabel/salesman', component: DatatableComplianceSalesmanComponent },
+  { path: 'compliancetabel/customer', component: DatatableComplianceCustomerComponent },
+  { path: 'financetable', component: DatatableFinancetableComponent },
+  { path: 'invoicetable', component: DatatableInvoicetableComponent },
+];
   
 @NgModule({
   imports: [RouterModule.forChild(routes)],

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

@@ -9,6 +9,11 @@ import { DatatableOperationtableComponent } from './components/operationtable/op
 import { OperationtablePieComponent } from './components/operationtable/pie/pie.component';
 import { DatatableOrderReportingComponent } from './reporting/components/order-reporting/order-reporting.component';
 import { DatatableDataindexComponent } from './components/dataindex/dataindex.component';
+import { DatatableComplianceIndexComponent } from './components/compliance/index/index.component';
+import { DatatableFinancetableComponent } from './components/financetable/financetable.component';
+import { DatatableInvoicetableComponent } from './components/invoicetable/invoicetable.component';
+import { DatatableComplianceSalesmanComponent } from './components/compliance/salesman/salesman.component';
+import { DatatableComplianceCustomerComponent } from './components/compliance/customer/customer.component';
 
 const COMPONENTS: Type<void>[] = [
   DatatableDataindexComponent,
@@ -18,8 +23,13 @@ const COMPONENTS: Type<void>[] = [
   DatatableDriverComponent,
   DatatableOperationtableComponent,
   OperationtablePieComponent,
-  DatatableOrderReportingComponent
+  DatatableOrderReportingComponent,
-];
+  DatatableComplianceIndexComponent,
+  DatatableFinancetableComponent,
+  DatatableInvoicetableComponent,
+  DatatableComplianceSalesmanComponent,
+  DatatableComplianceCustomerComponent
+]
 
 @NgModule({
   imports: [

src/assets/mocks/menu-data.json

@@ -646,8 +646,32 @@
             {
               "text": "订单上报",
               "link": "/datatable/reporting/order"
+            },
+            {
+              "text": "合规监控报表",
+              "children": [{
+                  "text": "合规监控报表",
+                  "link": "/datatable/compliancetabel/index"
+                },
+                {
+                  "text": "业务员-合规报表",
+                  "link": "/datatable/compliancetabel/salesman"
+                },
+                {
+                  "text": "客户-合规报表",
+                  "link": "/datatable/compliancetabel/customer"
+                }
+              ]
+            },
+            {
+              "text": "财务报表",
+              "link": "/datatable/financetable"
+            },
+            {
+              "text": "开票数据报表",
+              "link": "/datatable/invoicetable"
             }
-          ]
+        ]
         }
       ]
     }]