From b91095ed9a645ed4b9e674564650d1c034e1a0fe Mon Sep 17 00:00:00 2001 From: heqinghang Date: Tue, 29 Mar 2022 17:57:06 +0800 Subject: [PATCH] 666 --- .../customer/customer.component.html | 6 + .../compliance/customer/customer.component.ts | 45 +++++++ .../compliance/index/index.component.html | 66 +++++++++ .../compliance/index/index.component.less | 17 +++ .../compliance/index/index.component.ts | 125 ++++++++++++++++++ .../salesman/salesman.component.html | 6 + .../compliance/salesman/salesman.component.ts | 45 +++++++ .../financetable/financetable.component.html | 6 + .../financetable/financetable.component.ts | 45 +++++++ .../invoicetable/invoicetable.component.html | 14 ++ .../invoicetable/invoicetable.component.ts | 70 ++++++++++ .../datatable/datatable-routing.module.ts | 14 +- src/app/routes/datatable/datatable.module.ts | 14 +- src/assets/mocks/menu-data.json | 26 +++- 14 files changed, 494 insertions(+), 5 deletions(-) create mode 100644 src/app/routes/datatable/components/compliance/customer/customer.component.html create mode 100644 src/app/routes/datatable/components/compliance/customer/customer.component.ts create mode 100644 src/app/routes/datatable/components/compliance/index/index.component.html create mode 100644 src/app/routes/datatable/components/compliance/index/index.component.less create mode 100644 src/app/routes/datatable/components/compliance/index/index.component.ts create mode 100644 src/app/routes/datatable/components/compliance/salesman/salesman.component.html create mode 100644 src/app/routes/datatable/components/compliance/salesman/salesman.component.ts create mode 100644 src/app/routes/datatable/components/financetable/financetable.component.html create mode 100644 src/app/routes/datatable/components/financetable/financetable.component.ts create mode 100644 src/app/routes/datatable/components/invoicetable/invoicetable.component.html create mode 100644 src/app/routes/datatable/components/invoicetable/invoicetable.component.ts diff --git a/src/app/routes/datatable/components/compliance/customer/customer.component.html b/src/app/routes/datatable/components/compliance/customer/customer.component.html new file mode 100644 index 00000000..56092666 --- /dev/null +++ b/src/app/routes/datatable/components/compliance/customer/customer.component.html @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/routes/datatable/components/compliance/customer/customer.component.ts b/src/app/routes/datatable/components/compliance/customer/customer.component.ts new file mode 100644 index 00000000..1546a048 --- /dev/null +++ b/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()); + } + +} diff --git a/src/app/routes/datatable/components/compliance/index/index.component.html b/src/app/routes/datatable/components/compliance/index/index.component.html new file mode 100644 index 00000000..dbcfc3c0 --- /dev/null +++ b/src/app/routes/datatable/components/compliance/index/index.component.html @@ -0,0 +1,66 @@ + + + + +
+
+ +
+
+
+
+ + + + +
+ +
+
+
+
+
+ + +
+
+ + +
+ 合格：12423 不合格：12423 +
+ + +
+
+ + +
+ 货源单：12423 合同单：12423 +
+ + +
+
+ + +
+ 司机：12423 车队长：12423 +
+ + +
+
+ + +
+ 准时：12423 逾期：12423 +
+ + +
+
+ + + + diff --git a/src/app/routes/datatable/components/compliance/index/index.component.less b/src/app/routes/datatable/components/compliance/index/index.component.less new file mode 100644 index 00000000..3d0d3e63 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/routes/datatable/components/compliance/index/index.component.ts b/src/app/routes/datatable/components/compliance/index/index.component.ts new file mode 100644 index 00000000..b50e7764 --- /dev/null +++ b/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) { + 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(); + } +} diff --git a/src/app/routes/datatable/components/compliance/salesman/salesman.component.html b/src/app/routes/datatable/components/compliance/salesman/salesman.component.html new file mode 100644 index 00000000..56092666 --- /dev/null +++ b/src/app/routes/datatable/components/compliance/salesman/salesman.component.html @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/routes/datatable/components/compliance/salesman/salesman.component.ts b/src/app/routes/datatable/components/compliance/salesman/salesman.component.ts new file mode 100644 index 00000000..3b6cd019 --- /dev/null +++ b/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()); + } + +} diff --git a/src/app/routes/datatable/components/financetable/financetable.component.html b/src/app/routes/datatable/components/financetable/financetable.component.html new file mode 100644 index 00000000..56092666 --- /dev/null +++ b/src/app/routes/datatable/components/financetable/financetable.component.html @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/routes/datatable/components/financetable/financetable.component.ts b/src/app/routes/datatable/components/financetable/financetable.component.ts new file mode 100644 index 00000000..00e0f1b3 --- /dev/null +++ b/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()); + } + +} diff --git a/src/app/routes/datatable/components/invoicetable/invoicetable.component.html b/src/app/routes/datatable/components/invoicetable/invoicetable.component.html new file mode 100644 index 00000000..13411ab5 --- /dev/null +++ b/src/app/routes/datatable/components/invoicetable/invoicetable.component.html @@ -0,0 +1,14 @@ + + + + + + diff --git a/src/app/routes/datatable/components/invoicetable/invoicetable.component.ts b/src/app/routes/datatable/components/invoicetable/invoicetable.component.ts new file mode 100644 index 00000000..9916e4c4 --- /dev/null +++ b/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()); + } + +} diff --git a/src/app/routes/datatable/datatable-routing.module.ts b/src/app/routes/datatable/datatable-routing.module.ts index c71ba4c6..2bea9ee5 100644 --- a/src/app/routes/datatable/datatable-routing.module.ts +++ b/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,9 +20,14 @@ 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)], exports: [RouterModule] diff --git a/src/app/routes/datatable/datatable.module.ts b/src/app/routes/datatable/datatable.module.ts index d37e1e6b..6516ec67 100644 --- a/src/app/routes/datatable/datatable.module.ts +++ b/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[] = [ DatatableDataindexComponent, @@ -18,8 +23,13 @@ const COMPONENTS: Type[] = [ DatatableDriverComponent, DatatableOperationtableComponent, OperationtablePieComponent, - DatatableOrderReportingComponent -]; + DatatableOrderReportingComponent, + DatatableComplianceIndexComponent, + DatatableFinancetableComponent, + DatatableInvoicetableComponent, + DatatableComplianceSalesmanComponent, + DatatableComplianceCustomerComponent +] @NgModule({ imports: [ diff --git a/src/assets/mocks/menu-data.json b/src/assets/mocks/menu-data.json index 824190d8..69601b29 100644 --- a/src/assets/mocks/menu-data.json +++ b/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" } - ] + ] } ] }]