diff --git a/package-lock.json b/package-lock.json index 50a51aea..93e9c26a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2733,11 +2733,46 @@ "integrity": "sha1-ayxRCnrXA56Y57jT1lmPQ1nlwIA=", "dev": true }, + "@types/d3-geo": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.2.tgz", + "integrity": "sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==", + "dev": true, + "requires": { + "@types/geojson": "*" + } + }, "@types/d3-path": { "version": "2.0.1", "resolved": "https://registry.nlark.com/@types/d3-path/download/@types/d3-path-2.0.1.tgz", "integrity": "sha1-ygPfqLlNit2XrQzZfpbiAGtHY8s=" }, + "@types/d3-sankey": { + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/@types/d3-sankey/-/d3-sankey-0.11.2.tgz", + "integrity": "sha512-U6SrTWUERSlOhnpSrgvMX64WblX1AxX6nEjI2t3mLK2USpQrnbwYYK+AS9SwiE7wgYmOsSSKoSdr8aoKBH0HgQ==", + "dev": true, + "requires": { + "@types/d3-shape": "^1" + }, + "dependencies": { + "@types/d3-path": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.9.tgz", + "integrity": "sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==", + "dev": true + }, + "@types/d3-shape": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.8.tgz", + "integrity": "sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==", + "dev": true, + "requires": { + "@types/d3-path": "^1" + } + } + } + }, "@types/d3-shape": { "version": "2.1.3", "resolved": "https://registry.npmmirror.com/@types/d3-shape/download/@types/d3-shape-2.1.3.tgz", @@ -2783,6 +2818,12 @@ "integrity": "sha512-sPZYQEIF/SOnLAvaz9lTuydniP+afBMtElRTdYkeV1QtEgvtJ7qolCPjly6O32QI8CbEmP5O/fztMXEDWfEcrg==", "dev": true }, + "@types/geojson": { + "version": "7946.0.8", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz", + "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==", + "dev": true + }, "@types/glob": { "version": "7.2.0", "resolved": "https://registry.npmmirror.com/@types/glob/download/@types/glob-7.2.0.tgz?cache=0&sync_timestamp=1637267477186&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fglob%2Fdownload%2F%40types%2Fglob-7.2.0.tgz", diff --git a/package.json b/package.json index e39be873..f7a7e591 100644 --- a/package.json +++ b/package.json @@ -75,22 +75,22 @@ }, "devDependencies": { "@angular-devkit/build-angular": "~12.2.0", - "@angular/cli": "~12.2.0", - "@angular/compiler-cli": "~12.2.0", - "@types/jasmine": "~3.8.0", - "@types/node": "^12.11.1", - "jasmine-core": "~3.8.0", - "karma": "~6.3.0", - "karma-chrome-launcher": "~3.1.0", - "karma-coverage": "~2.0.3", - "karma-jasmine": "~4.0.0", - "karma-jasmine-html-reporter": "~1.7.0", - "typescript": "~4.3.5", "@angular-eslint/builder": "~12.3.1", "@angular-eslint/eslint-plugin": "~12.3.1", "@angular-eslint/eslint-plugin-template": "~12.3.1", "@angular-eslint/schematics": "~12.3.1", "@angular-eslint/template-parser": "~12.3.1", + "@angular/cli": "~12.2.0", + "@angular/compiler-cli": "~12.2.0", + "@angular/language-service": "~12.2.0", + "@delon/testing": "^12.3.0", + "@types/d3-geo": "^3.0.2", + "@types/d3-sankey": "^0.11.2", + "@types/file-saver": "^2.0.3", + "@types/jasmine": "~3.8.0", + "@types/jasminewd2": "~2.0.3", + "@types/js-base64": "^3.0.0", + "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "~4.29.2", "@typescript-eslint/parser": "~4.29.2", "eslint": "^7.32.0", @@ -99,29 +99,31 @@ "eslint-plugin-jsdoc": "~36.0.7", "eslint-plugin-prefer-arrow": "~1.2.3", "eslint-plugin-prettier": "~3.4.1", - "@angular/language-service": "~12.2.0", - "source-map-explorer": "^2.5.2", + "husky": "^6.0.0", + "jasmine-core": "~3.8.0", + "jasmine-spec-reporter": "~5.0.0", + "karma": "~6.3.0", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage": "~2.0.3", + "karma-coverage-istanbul-reporter": "~3.0.2", + "karma-jasmine": "~4.0.0", + "karma-jasmine-html-reporter": "~1.7.0", + "lint-staged": "^11.1.2", + "ng-alain": "^12.3.0", + "ng-alain-plugin-theme": "^12.0.0", + "ng-alain-sts": "^0.0.1", + "node-fetch": "^2.6.1", "prettier": "^2.2.1", + "protractor": "~7.0.0", + "source-map-explorer": "^2.5.2", "stylelint": "^13.13.1", "stylelint-config-prettier": "^8.0.2", "stylelint-config-rational-order": "^0.1.2", "stylelint-config-standard": "^22.0.0", "stylelint-declaration-block-no-ignored-properties": "^2.4.0", "stylelint-order": "^4.1.0", - "@delon/testing": "^12.3.0", - "ng-alain": "^12.3.0", - "ng-alain-plugin-theme": "^12.0.0", - "ng-alain-sts": "^0.0.1", - "@types/jasminewd2": "~2.0.3", - "jasmine-spec-reporter": "~5.0.0", - "karma-coverage-istanbul-reporter": "~3.0.2", - "protractor": "~7.0.0", "ts-node": "~8.3.0", - "node-fetch": "^2.6.1", - "husky": "^6.0.0", - "lint-staged": "^11.1.2", - "@types/file-saver": "^2.0.3", - "@types/js-base64": "^3.0.0" + "typescript": "~4.3.5" }, "lint-staged": { "(src)/**/*.{html,ts}": [ diff --git a/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html new file mode 100644 index 00000000..f8c1a030 --- /dev/null +++ b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html @@ -0,0 +1,50 @@ + + + + +
+ +
+ + + + + + +
+ + +
+
+
+ + + + + +
+
+ + + + +
+ +
+
+
+ +
+
+ +
+
+ +
+ +
+ + \ No newline at end of file diff --git a/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.less b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.less new file mode 100644 index 00000000..32c6893e --- /dev/null +++ b/src/app/routes/datatable/components/busitable/busiindex/busiindex.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; +} diff --git a/src/app/routes/datatable/components/customtable/customtable.component.spec.ts b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.spec.ts similarity index 50% rename from src/app/routes/datatable/components/customtable/customtable.component.spec.ts rename to src/app/routes/datatable/components/busitable/busiindex/busiindex.component.spec.ts index 980fc9d9..00c629be 100644 --- a/src/app/routes/datatable/components/customtable/customtable.component.spec.ts +++ b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.spec.ts @@ -1,19 +1,19 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; -import { DatatableCustomtableComponent } from './customtable.component'; +import { DatatableBusiindexComponent } from './busiindex.component'; -describe('DatatableCustomtableComponent', () => { - let component: DatatableCustomtableComponent; - let fixture: ComponentFixture; +describe('DatatableBusiindexComponent', () => { + let component: DatatableBusiindexComponent; + let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ DatatableCustomtableComponent ] + declarations: [ DatatableBusiindexComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(DatatableCustomtableComponent); + fixture = TestBed.createComponent(DatatableBusiindexComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.ts b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.ts new file mode 100644 index 00000000..bfe52480 --- /dev/null +++ b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.ts @@ -0,0 +1,125 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { STColumn, STComponent } from '@delon/abc/st'; +import { DatePipe, _HttpClient } from '@delon/theme'; +import { differenceInCalendarDays } from 'date-fns'; +import { DataService } from '../../../services/data.service'; + +@Component({ + selector: 'app-datatable-busiindex', + templateUrl: './busiindex.component.html', + styleUrls: ['./busiindex.component.less'], + providers: [DatePipe] + +}) +export class DatatableBusiindexComponent implements OnInit { + @ViewChild('st') private readonly st!: STComponent; + type = 1; + mode = 'year'; + date: any = null; + time: any = ['2022-01-01 00:00:00'] + defineDate = []; + dateNext: any = null; + modeNext = 'year'; + timeNext: any = ['2022-01-01 00:00:00'] + dateFormat = 'yyyy-MM-dd'; + today = new Date(); + chartData: any = [] + + columns: STColumn[] = [ + { title: '运营主体', index: 'networkTransporterName', className: 'text-center' }, + { title: '合伙人数', index: 'partnerNumber', className: 'text-center' }, + { title: '客户数', index: 'enterpriseNumbe', className: 'text-center' }, + { title: '订单数', index: 'zsl', className: 'text-center' }, + { title: '客户预存款', index: 'czcgje', className: 'text-center' }, + { title: '业绩量', index: 'yisje', className: 'text-center' }, + { title: '已收附加费', index: 'yisfjf', className: 'text-center' }, + { title: '平均附加费率', index: 'fjfl', className: 'text-center' }, + { title: '已开票金额', index: 'ykpje', 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 + }; + + delete params._$expand; + return { ...params }; + } + + constructor(public service: DataService, private datePipe: DatePipe) { } + ngOnInit(): void { + this.initData() + } + initData(){ + let type = 1 + if(this.mode === 'year') { + type = 1 + } else if(this.mode === 'month') { + type = 2 + } + const params: any = { + time: this.timeNext, + type + }; + this.service.getPerformanceReportHistogram(params).subscribe(res => { + if (res) { + this.chartData = res + } + }) + } + 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'] + } 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 }); + } + + 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'] + } + } + disabledDate = (current: Date): boolean => + // Can not select days before today and today + differenceInCalendarDays(current, this.today) > 0; + exportFun(){ + + } + +} diff --git a/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.html b/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.html new file mode 100644 index 00000000..0640a4d4 --- /dev/null +++ b/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.less b/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.less new file mode 100644 index 00000000..e69de29b diff --git a/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.spec.ts b/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.spec.ts new file mode 100644 index 00000000..cd009e56 --- /dev/null +++ b/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.spec.ts @@ -0,0 +1,24 @@ +import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; +import { DatatableDataindexComponent } from './dataindex.component'; + +describe('DatatableDataindexComponent', () => { + let component: DatatableDataindexComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ DatatableDataindexComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DatatableDataindexComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.ts b/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.ts new file mode 100644 index 00000000..35dbdcdb --- /dev/null +++ b/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.ts @@ -0,0 +1,74 @@ +import { Component, ElementRef, Input, NgZone, OnInit, ViewChild } from '@angular/core'; +import { G2MiniAreaClickItem } from '@delon/chart/mini-area'; +import DataSet from '@antv/data-set'; +import { Chart } from '@antv/g2'; +import { DataService } from 'src/app/routes/datatable/services/data.service'; +@Component({ + selector: 'app-busitable-curve', + templateUrl: './curve.component.html', + styleUrls: ['./curve.component.less'] +}) +export class busitableCurveComponent implements OnInit { + @Input() chartData: any = {} + 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): void { + this.ngZone.runOutsideAngular(() => this.init(el.nativeElement)); + } + private init(el: HTMLElement): void { + const data = [ + { month: '01月', value: 3 }, + { month: '02月', value: 4 }, + { month: '03月', value: 3.5 }, + { month: '04月', value: 5 }, + { month: '05月', value: 4.9 }, + { month: '06月', value: 6 }, + { month: '07月', value: 7 }, + { month: '08月', value: 9 }, + { month: '09月', value: 13 }, + { month: '10月', value: 13 }, + { month: '11月', value: 13 }, + { month: '12月', value: 13 }, + ]; + const chart = new Chart({ + container: el, + autoFit: true, + height: 500, + }); + + chart.data(data); + chart.scale({ + month: { + range: [0, 1], + }, + value: { + min: 0, + nice: true, + }, + }); + + chart.tooltip({ + showCrosshairs: true, // 展示 Tooltip 辅助线 + shared: true, + }); + + chart.line().position('month*value').label('value'); + //chart.point().position('month*value'); + + chart.render(); +} + +} \ No newline at end of file diff --git a/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.html b/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.html new file mode 100644 index 00000000..0640a4d4 --- /dev/null +++ b/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.less b/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.less new file mode 100644 index 00000000..e69de29b diff --git a/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.spec.ts b/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.spec.ts new file mode 100644 index 00000000..cd009e56 --- /dev/null +++ b/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.spec.ts @@ -0,0 +1,24 @@ +import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; +import { DatatableDataindexComponent } from './dataindex.component'; + +describe('DatatableDataindexComponent', () => { + let component: DatatableDataindexComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ DatatableDataindexComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DatatableDataindexComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.ts b/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.ts new file mode 100644 index 00000000..b651b086 --- /dev/null +++ b/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.ts @@ -0,0 +1,52 @@ +import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core'; +import { Chart } from '@antv/g2'; +import { DataService } from 'src/app/routes/datatable/services/data.service'; +@Component({ + selector: 'app-busitable-pillar', + templateUrl: './pillar.component.html', + styleUrls: ['./pillar.component.less'] +}) +export class busitablePillarComponent implements OnInit { + el: any; + @Input() chartData: any ; + constructor(private service: DataService, private ngZone: NgZone) { + + } + ngOnInit(): void { + this.initData() + } + initData(){ + this.service.request(this.service.$api_performanceReportHistogram).subscribe(res => { + if (res) { + this.chartData = res.performance + this.ngZone.runOutsideAngular(() => this.init(this.el)); + } + }) + } + render(el: ElementRef): void { + this.el = el + } + + + private init(el: HTMLElement): void { + const chart = new Chart({ + container: el, + autoFit: true, + height: 500, + }); + + chart.data(this.chartData); + + chart.tooltip({ + showMarkers: false, + }); + + chart.interval().position('time*number'); + + chart.interaction('element-active'); + + chart.render(); + + } + +} \ No newline at end of file diff --git a/src/app/routes/datatable/components/busitable/mantable/mantable.component.html b/src/app/routes/datatable/components/busitable/mantable/mantable.component.html new file mode 100644 index 00000000..835e4a2e --- /dev/null +++ b/src/app/routes/datatable/components/busitable/mantable/mantable.component.html @@ -0,0 +1,42 @@ + + + + +
+
+ + + + + + +
+ + +
+ +
+
+ + + + + + +
+
+ + + + +
+ +
+
+
+ + + \ No newline at end of file diff --git a/src/app/routes/datatable/components/busitable/mantable/mantable.component.less b/src/app/routes/datatable/components/busitable/mantable/mantable.component.less new file mode 100644 index 00000000..6b4b1cba --- /dev/null +++ b/src/app/routes/datatable/components/busitable/mantable/mantable.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; +} \ No newline at end of file diff --git a/src/app/routes/datatable/components/busitable/mantable/mantable.component.spec.ts b/src/app/routes/datatable/components/busitable/mantable/mantable.component.spec.ts new file mode 100644 index 00000000..2aa60931 --- /dev/null +++ b/src/app/routes/datatable/components/busitable/mantable/mantable.component.spec.ts @@ -0,0 +1,24 @@ +import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; +import { DatatableMantableComponent } from './mantable.component'; + +describe('DatatableMantableComponent', () => { + let component: DatatableMantableComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ DatatableMantableComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DatatableMantableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/routes/datatable/components/busitable/mantable/mantable.component.ts b/src/app/routes/datatable/components/busitable/mantable/mantable.component.ts new file mode 100644 index 00000000..61eec620 --- /dev/null +++ b/src/app/routes/datatable/components/busitable/mantable/mantable.component.ts @@ -0,0 +1,109 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { STColumn, STComponent } from '@delon/abc/st'; +import { DatePipe, _HttpClient } from '@delon/theme'; +import { differenceInCalendarDays } from 'date-fns'; +import { DataService } from '../../../services/data.service'; + +@Component({ + selector: 'app-datatable-mantable', + templateUrl: './mantable.component.html', + styleUrls: ['./mantable.component.less'], + providers: [DatePipe] + +}) +export class DatatableMantableComponent implements OnInit { + @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'; + today = new Date(); + dateNext: any = null; + modeNext = 'year'; + timeNext: any = ['2022-01-01 00:00:00'] + + columns: STColumn[] = [ + { title: '部门', index: 'networkTransporterName', className: 'text-center' }, + { title: '业务员', index: 'zsl', className: 'text-center' }, + { title: '合伙人数', index: 'yingsje', className: 'text-center' }, + { title: '客户数', index: 'cys', className: 'text-center' }, + { title: '客户活跃率', index: 'yingfyf', className: 'text-center' }, + { title: '客户预存款', index: 'yl', className: 'text-center' }, + { title: '订单数', index: 'djd', className: 'text-center' }, + { title: '订单金额', index: 'ysz', className: 'text-center' }, + { title: '业绩量', index: 'yswc', className: 'text-center' }, + { title: '附加费金额', index: 'yisje', className: 'text-center' }, + { title: '平均附加费率', index: 'yifyf', className: 'text-center' }, + { title: '已开票金额', index: 'yifyf', 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 + }; + + delete params._$expand; + return { ...params }; + } + + constructor(public service: DataService, private datePipe: DatePipe) { } + ngOnInit(): void { } + + 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'] + } 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 }); + } + + 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'] + } + } + disabledDate = (current: Date): boolean => + // Can not select days before today and today + differenceInCalendarDays(current, this.today) > 0; + exportFun(){ + + } + +} diff --git a/src/app/routes/datatable/components/customtable/customindex/customindex.component.html b/src/app/routes/datatable/components/customtable/customindex/customindex.component.html index 56092666..d70ba207 100644 --- a/src/app/routes/datatable/components/customtable/customindex/customindex.component.html +++ b/src/app/routes/datatable/components/customtable/customindex/customindex.component.html @@ -1,6 +1,59 @@ - - - - + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + + + + +
+ + +
+
+
+ + + + + +
+
+ + + + +
+ +
+
+
+ + + \ No newline at end of file diff --git a/src/app/routes/datatable/components/customtable/customindex/customindex.component.less b/src/app/routes/datatable/components/customtable/customindex/customindex.component.less new file mode 100644 index 00000000..6b4b1cba --- /dev/null +++ b/src/app/routes/datatable/components/customtable/customindex/customindex.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; +} \ No newline at end of file diff --git a/src/app/routes/datatable/components/customtable/customindex/customindex.component.ts b/src/app/routes/datatable/components/customtable/customindex/customindex.component.ts index 7e720e39..c2acb2b1 100644 --- a/src/app/routes/datatable/components/customtable/customindex/customindex.component.ts +++ b/src/app/routes/datatable/components/customtable/customindex/customindex.component.ts @@ -1,45 +1,105 @@ 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, _HttpClient } from '@delon/theme'; +import { differenceInCalendarDays } from 'date-fns'; +import { DataService } from '../../../services/data.service'; @Component({ selector: 'app-datatable-customindex', templateUrl: './customindex.component.html', + styleUrls: ['./customindex.component.less'], + providers: [DatePipe] + }) export class DatatableCustomindexComponent 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'; + today = new Date(); + dateNext: any = null; + modeNext = 'year'; + timeNext: any = ['2022-01-01 00:00:00'] + 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' }, - ] - } + { title: '用户类型', index: 'networkTransporterName', className: 'text-center' }, + { title: '用户总数', index: 'zsl', className: 'text-center' }, + { title: '已认证数量', index: 'yingsje', className: 'text-center' }, + { title: '活跃用户数', index: 'cys', className: 'text-center' }, + { title: '未激活用户数', index: 'yingfyf', className: 'text-center' }, + { title: '沉默用户数', index: 'yl', className: 'text-center' }, + { title: '流失用户数', index: 'djd', className: 'text-center' }, + { title: '流失率', index: 'ysz', 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 }; + } + constructor(public service: DataService, private datePipe: DatePipe) { } ngOnInit(): void { } - add(): void { - // this.modal - // .createStatic(FormEditComponent, { i: { id: 0 } }) - // .subscribe(() => this.st.reload()); + 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'] + } 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; + + 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'] + } + } + exportFun() { + } } diff --git a/src/app/routes/datatable/components/customtable/driver/driver.component.html b/src/app/routes/datatable/components/customtable/driver/driver.component.html index 56092666..bd6e93bb 100644 --- a/src/app/routes/datatable/components/customtable/driver/driver.component.html +++ b/src/app/routes/datatable/components/customtable/driver/driver.component.html @@ -1,6 +1,45 @@ - + - - + +
+ + +
+ +
+
+ + + + +
+ +
+ + +
+
+ + + + + + +
+ + +
+ +
+
+ + + \ No newline at end of file diff --git a/src/app/routes/datatable/components/customtable/driver/driver.component.less b/src/app/routes/datatable/components/customtable/driver/driver.component.less new file mode 100644 index 00000000..6b4b1cba --- /dev/null +++ b/src/app/routes/datatable/components/customtable/driver/driver.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; +} \ No newline at end of file diff --git a/src/app/routes/datatable/components/customtable/driver/driver.component.ts b/src/app/routes/datatable/components/customtable/driver/driver.component.ts index f27f6788..b69286d8 100644 --- a/src/app/routes/datatable/components/customtable/driver/driver.component.ts +++ b/src/app/routes/datatable/components/customtable/driver/driver.component.ts @@ -1,45 +1,154 @@ 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 { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form'; +import { DatePipe, _HttpClient } from '@delon/theme'; +import { differenceInCalendarDays } from 'date-fns'; +import { DataService } from '../../../services/data.service'; @Component({ selector: 'app-datatable-driver', templateUrl: './driver.component.html', + styleUrls: ['./driver.component.less'], + providers: [DatePipe] }) export class DatatableDriverComponent implements OnInit { - url = `/user`; - searchSchema: SFSchema = { - properties: { - no: { - type: 'string', - title: '编号' - } - } - }; - @ViewChild('st') private readonly st!: STComponent; + @ViewChild('st', { static: false }) st!: STComponent; + @ViewChild('sf', { static: false }) sf!: SFComponent; + _$expand = false; + type = 1; + mode = 'year'; + date: any = null; + defineDate = []; + time: any = ['2022-01-01 00:00:00'] + dateFormat = 'yyyy-MM-dd'; + today = new Date(); + ui: SFUISchema = {}; + schema: SFSchema = {}; + 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' }, - ] - } + { title: '司机姓名', index: 'networkTransporterName', className: 'text-center' }, + { title: '手机号', index: 'zsl', className: 'text-center' }, + { title: '注册时间', index: 'yingsje', className: 'text-center' }, + { title: '司机状态', index: 'cys', className: 'text-center' }, + { title: '运单数', index: 'yingfyf', className: 'text-center' }, + { title: '待接单运单', index: 'yl', className: 'text-center' }, + { title: '已完成运单', index: 'djd', className: 'text-center' }, + { title: '运费金额', index: 'ysz', className: 'text-center' }, + { title: '已收运费金额', index: 'yswc', className: 'text-center' }, + { title: '待收运费金额', index: 'yisje', className: 'text-center' } ]; - - constructor(private http: _HttpClient, private modal: ModalHelper) { } - - ngOnInit(): void { } - - add(): void { - // this.modal - // .createStatic(FormEditComponent, { i: { id: 0 } }) - // .subscribe(() => this.st.reload()); + /** + * 查询参数 + */ + 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 + }; + + delete params._$expand; + return { ...params }; } + constructor(public service: DataService, private datePipe: DatePipe) { } + ngOnInit(): void { + this.initSF(); + } + /** + * 初始化查询表单 + */ + initSF() { + this.schema = { + properties: { + _$expand: { type: 'boolean', ui: { hidden: true } }, + billCode: { + type: 'string', + title: '司机姓名', + ui: { + placeholder: '请输入', + } + }, + resourceCode: { + type: 'string', + title: '手机号', + ui: { + placeholder: '请选择', + } + }, + loadingPlace: { + type: 'string', + title: '司机状态', + ui: { + placeholder: '请选择', + } + }, + createTime: { + title: '注册时间', + type: 'string', + ui: { + widget: 'sl-from-to', type: 'date', format: 'yyyy-MM-dd', visibleIf: { + _$expand: (value: boolean) => value, + }, + } as SFDateWidgetSchema, + } + }, + type: 'object' + }; + this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } }; + } + 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'] + } 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; + export() { + // this.service.downloadFile(this.service.$api_exportUploadBill, this.sf.value, {}); + } + search() { + this.st?.load(1) + + } + /** + * 伸缩查询条件 + */ + expandToggle() { + this._$expand = !this._$expand; + this.sf?.setValue('/_$expand', this._$expand); + } + + /** + * 重置表单 + */ + resetSF() { + this.sf.reset(); + this._$expand = false; + } } diff --git a/src/app/routes/datatable/components/customtable/customtable.component.html b/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.html similarity index 51% rename from src/app/routes/datatable/components/customtable/customtable.component.html rename to src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.html index 56092666..482ccb06 100644 --- a/src/app/routes/datatable/components/customtable/customtable.component.html +++ b/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.html @@ -1,5 +1,8 @@ - - + + + + + diff --git a/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.spec.ts b/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.spec.ts new file mode 100644 index 00000000..8df0f556 --- /dev/null +++ b/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.spec.ts @@ -0,0 +1,24 @@ +import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; +import { DatatableMancustomtableComponent } from './mancustomtable.component'; + +describe('DatatableMancustomtableComponent', () => { + let component: DatatableMancustomtableComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ DatatableMancustomtableComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DatatableMancustomtableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/routes/datatable/components/customtable/customtable.component.ts b/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.ts similarity index 87% rename from src/app/routes/datatable/components/customtable/customtable.component.ts rename to src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.ts index 292a9c25..7f41c8ca 100644 --- a/src/app/routes/datatable/components/customtable/customtable.component.ts +++ b/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.ts @@ -4,10 +4,10 @@ import { SFSchema } from '@delon/form'; import { ModalHelper, _HttpClient } from '@delon/theme'; @Component({ - selector: 'app-datatable-customtable', - templateUrl: './customtable.component.html', + selector: 'app-datatable-mancustomtable', + templateUrl: './mancustomtable.component.html', }) -export class DatatableCustomtableComponent implements OnInit { +export class DatatableMancustomtableComponent implements OnInit { url = `/user`; searchSchema: SFSchema = { properties: { diff --git a/src/app/routes/datatable/components/customtable/owner/owner.component.html b/src/app/routes/datatable/components/customtable/owner/owner.component.html index 3a90b91b..71e913ac 100644 --- a/src/app/routes/datatable/components/customtable/owner/owner.component.html +++ b/src/app/routes/datatable/components/customtable/owner/owner.component.html @@ -1,5 +1,45 @@ - + - + +
+ + +
+ +
+
+ + + + +
+ +
+ + +
+
+ + + + + + +
+ + +
+ +
+
+ + + \ No newline at end of file diff --git a/src/app/routes/datatable/components/customtable/owner/owner.component.less b/src/app/routes/datatable/components/customtable/owner/owner.component.less new file mode 100644 index 00000000..6b4b1cba --- /dev/null +++ b/src/app/routes/datatable/components/customtable/owner/owner.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; +} \ No newline at end of file diff --git a/src/app/routes/datatable/components/customtable/owner/owner.component.ts b/src/app/routes/datatable/components/customtable/owner/owner.component.ts index af6bf032..40bb4492 100644 --- a/src/app/routes/datatable/components/customtable/owner/owner.component.ts +++ b/src/app/routes/datatable/components/customtable/owner/owner.component.ts @@ -1,45 +1,161 @@ 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 { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form'; +import { DatePipe, _HttpClient } from '@delon/theme'; +import { differenceInCalendarDays } from 'date-fns'; +import { DataService } from '../../../services/data.service'; @Component({ selector: 'app-datatable-owner', templateUrl: './owner.component.html', + styleUrls: ['./owner.component.less'], + providers: [DatePipe] }) export class DatatableOwnerComponent implements OnInit { - url = `/user`; - searchSchema: SFSchema = { - properties: { - no: { - type: 'string', - title: '编号' - } - } - }; - @ViewChild('st') private readonly st!: STComponent; + @ViewChild('st', { static: false }) st!: STComponent; + @ViewChild('sf', { static: false }) sf!: SFComponent; + _$expand = false; + type = 1; + mode = 'year'; + date: any = null; + defineDate = []; + time: any = ['2022-01-01 00:00:00'] + dateFormat = 'yyyy-MM-dd'; + today = new Date(); + ui: SFUISchema = {}; + schema: SFSchema = {}; + 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' }, - ] - } + { title: '货主名称', index: 'networkTransporterName', className: 'text-center' }, + { title: '注册时间', index: 'zsl', className: 'text-center' }, + { title: '客户类型', index: 'yingsje', className: 'text-center' }, + { title: '业务员', index: 'cys', className: 'text-center' }, + { title: '合伙人', index: 'yingfyf', className: 'text-center' }, + { title: '客户状态', index: 'yl', className: 'text-center' }, + { title: '订单数', index: 'djd', className: 'text-center' }, + { title: '订单金额', index: 'ysz', className: 'text-center' }, + { title: '应收订单数', index: 'yswc', className: 'text-center' }, + { title: '应收金额', index: 'yisje', className: 'text-center' }, + { title: '待开票订单数', index: 'yifyf', className: 'text-center' }, + { title: '待开票金额', index: 'yifyf', className: 'text-center' }, + { title: '已收金额', render: 'yifyf', className: 'text-center' }, + { title: '附加费金额', index: 'yifyf', className: 'text-center' }, + { title: '已收附加费', index: 'yifyf', className: 'text-center' }, + { title: '附加费率', index: 'yifyf', className: 'text-center' }, + { title: '已开票金额', index: 'yifyf', className: 'text-center' } ]; - - constructor(private http: _HttpClient, private modal: ModalHelper) { } - - ngOnInit(): void { } - - add(): void { - // this.modal - // .createStatic(FormEditComponent, { i: { id: 0 } }) - // .subscribe(() => this.st.reload()); + /** + * 查询参数 + */ + 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 + }; + + delete params._$expand; + return { ...params }; } + constructor(public service: DataService, private datePipe: DatePipe) { } + ngOnInit(): void { + this.initSF(); + } + /** + * 初始化查询表单 + */ + initSF() { + this.schema = { + properties: { + _$expand: { type: 'boolean', ui: { hidden: true } }, + billCode: { + type: 'string', + title: '货主名称', + ui: { + placeholder: '请输入', + } + }, + resourceCode: { + type: 'string', + title: '客户类型', + ui: { + placeholder: '请选择', + } + }, + loadingPlace: { + type: 'string', + title: '客户状态', + ui: { + placeholder: '请选择', + } + }, + createTime: { + title: '注册时间', + type: 'string', + ui: { + widget: 'sl-from-to', type: 'date', format: 'yyyy-MM-dd', visibleIf: { + _$expand: (value: boolean) => value, + }, + } as SFDateWidgetSchema, + } + }, + type: 'object' + }; + this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } }; + } + 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'] + } 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; + export() { + // this.service.downloadFile(this.service.$api_exportUploadBill, this.sf.value, {}); + } + search() { + this.st?.load(1) + + } + /** + * 伸缩查询条件 + */ + expandToggle() { + this._$expand = !this._$expand; + this.sf?.setValue('/_$expand', this._$expand); + } + + /** + * 重置表单 + */ + resetSF() { + this.sf.reset(); + this._$expand = false; + } } diff --git a/src/app/routes/datatable/components/customtable/partnertable/partnertable.component.html b/src/app/routes/datatable/components/customtable/partnertable/partnertable.component.html new file mode 100644 index 00000000..e5937465 --- /dev/null +++ b/src/app/routes/datatable/components/customtable/partnertable/partnertable.component.html @@ -0,0 +1,43 @@ + + + +
+ +
+ + + + +
+ + + +
+ +
+
+ + + +
+ +
+ + + +
+ +
+ + + + + \ No newline at end of file diff --git a/src/app/routes/datatable/components/customtable/partnertable/partnertable.component.spec.ts b/src/app/routes/datatable/components/customtable/partnertable/partnertable.component.spec.ts new file mode 100644 index 00000000..69ae8c3b --- /dev/null +++ b/src/app/routes/datatable/components/customtable/partnertable/partnertable.component.spec.ts @@ -0,0 +1,24 @@ +import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; +import { DatatablePartnertableComponent } from './partnertable.component'; + +describe('DatatablePartnertableComponent', () => { + let component: DatatablePartnertableComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ DatatablePartnertableComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DatatablePartnertableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/routes/datatable/components/customtable/partnertable/partnertable.component.ts b/src/app/routes/datatable/components/customtable/partnertable/partnertable.component.ts new file mode 100644 index 00000000..444a18c8 --- /dev/null +++ b/src/app/routes/datatable/components/customtable/partnertable/partnertable.component.ts @@ -0,0 +1,147 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { STChange, STColumn, STComponent, STData } from '@delon/abc/st'; +import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form'; +import { ModalHelper } from '@delon/theme'; +import { EAEnvironmentService } from '@shared'; +import { NzModalService } from 'ng-zorro-antd/modal'; +import { DataService } from '../../../services/data.service'; + +@Component({ + selector: 'app-datatable-partnertable', + templateUrl: './partnertable.component.html', +}) +export class DatatablePartnertableComponent implements OnInit { + @ViewChild('st', { static: false }) st!: STComponent; + @ViewChild('sf', { static: false }) sf!: SFComponent; + _$expand = false; + ui!: SFUISchema; + schema!: SFSchema; + phone = ''; + columns!: STColumn[]; + + constructor( + public service: DataService, + private modalSrv: NzModalService, + private modal: ModalHelper, + private envSrv: EAEnvironmentService, + ) {} + + /** + * 查询字段个数 + */ + get queryFieldCount(): number { + return Object.keys(this.schema?.properties || {}).length; + } + + /** + * 查询参数 + */ + get reqParams() { + const params = Object.assign({}, this.sf?.value || {}); + delete params._$expand; + return { ...params }; + } + + /** + * 选中行 + */ + get selectedRows() { + return this.st?.list.filter((item) => item.checked) || []; + } + + /** + * 伸缩查询条件 + */ + expandToggle() { + this._$expand = !this._$expand; + this.sf?.setValue('/_$expand', this._$expand); + } + /** + * 重置表单 + */ + resetSF() { + this.sf.reset(); + this._$expand = false; + } + /** + * 程序初始化入口 + */ + ngOnInit() { + this.initSF(); + this.initST() + } + + /** + * 初始化查询表单 + */ + initSF() { + this.schema = { + properties: { + _$expand: { type: 'boolean', ui: { hidden: true } }, + name: { + title: '合伙人名称', + type: 'string', + ui: { placeholder: '请输入' }, + readOnly: false, + }, + phone: { + title: '合伙人类型', + type: 'string', + ui: { + widget: 'select', + placeholder: '请输入' }, + readOnly: false, + }, + phone01: { + title: '合伙人状态', + type: 'string', + ui: { + widget: 'select', + placeholder: '请输入' }, + readOnly: false, + }, + createTime: { + type: 'string', + title: '注册时间', + ui: { widget: 'sl-from-to', type: 'date', format: 'yyyy-MM-dd' } as SFDateWidgetSchema, + }, + }, + type: 'object', + }; + this.ui = { '*': { spanLabelFixed: 80, grid: { span: 8, gutter: 4 }, enter: () => this.st?.load(1) } }; + } + + /** + * 初始化数据列表 + */ + initST() { + this.columns = [ + { title: '合伙人名称', index: 'name', className: 'text-center' }, + { title: '注册时间', index: 'telephone', className: 'text-center' }, + { title: '注册时间', index: 'roleName', className: 'text-center' }, + { title: '业务员', index: 'lastLoginDate', className: 'text-center' }, + { + title: '合伙人状态', + index: 'stateLocked', + className: 'text-center', + type: 'enum', + enum: { 0: '正常', 1: '冻结' }, + }, + { title: '客户数', index: 'lastLoginDate', className: 'text-center' }, + { title: '收益额', index: 'lastLoginDate', className: 'text-center' }, + { title: '已提现金额', index: 'lastLoginDate', className: 'text-center' }, + { title: '订单数', index: 'lastLoginDate', className: 'text-center' }, + { title: '订单金额', index: 'lastLoginDate', className: 'text-center' }, + { title: '应收订单数', index: 'lastLoginDate', className: 'text-center' }, + ]; + } + + /** + * 数据列表状态变化事件 + */ + change(change: STChange) { + // console.log(change); + } + + +} diff --git a/src/app/routes/datatable/components/operationtable/curve/curve.component.html b/src/app/routes/datatable/components/operationtable/curve/curve.component.html index 3f148bfd..0640a4d4 100644 --- a/src/app/routes/datatable/components/operationtable/curve/curve.component.html +++ b/src/app/routes/datatable/components/operationtable/curve/curve.component.html @@ -1,69 +1 @@ - - -
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
-
-
- - - -
-
- - - -
-
-
-
- - - - -
-
- - - - -
-
\ No newline at end of file + \ No newline at end of file diff --git a/src/app/routes/datatable/components/operationtable/curve/curve.component.ts b/src/app/routes/datatable/components/operationtable/curve/curve.component.ts index aedbf57a..8f76f6cd 100644 --- a/src/app/routes/datatable/components/operationtable/curve/curve.component.ts +++ b/src/app/routes/datatable/components/operationtable/curve/curve.component.ts @@ -1,248 +1,130 @@ import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core'; -import { ModalHelper, _HttpClient } from '@delon/theme'; -import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area'; -import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie'; -import { format } from 'date-fns'; -import { Chart, registerShape, Util } from '@antv/g2'; -import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline'; +import { G2MiniAreaClickItem } from '@delon/chart/mini-area'; import { DataService } from '../../../services/data.service'; - +import DataSet from '@antv/data-set'; +import { Chart } from '@antv/g2'; @Component({ selector: 'app-datatable-curve', templateUrl: './curve.component.html', styleUrls: ['./curve.component.less'] }) -export class DatatableDataindexComponent implements OnInit { - @ViewChild('pie', { static: false }) pie!: G2PieComponent; - chartData: G2TimelineData[] = []; - visitData = this.genData(); - salesData = this.genData(); - salesPieData: G2PieData[] = []; - total = ''; +export class OperationtableCurveComponent implements OnInit { constructor(private service: DataService, private ngZone: NgZone) { } ngOnInit(): void { - this.refreshPie(); - this.initLineData() - } - initLineData(){ - for (let i = 0; i < 20; i += 1) { - this.chartData.push({ - time: new Date().getTime() + 1000 * 60 * 60 * 24 * i, - y1: Math.floor(Math.random() * 100) + 1000, - y2: Math.floor(Math.random() * 100) + 10, - }); - } - } - private genData(): G2MiniAreaData[] { - const beginDay = new Date().getTime(); - const res: G2MiniAreaData[] = []; - for (let i = 0; i < 20; i += 1) { - res.push({ - x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'), - y: Math.floor(Math.random() * 100) + 10, - }); - } - return res; + } - refresh(): void { - this.visitData = this.genData(); - } - refreshPie(): void { - const rv = (min: number = 0, max: number = 5000) => Math.floor(Math.random() * (max - min + 1) + min); - this.salesPieData = [ - { - x: '家用电器', - y: rv(), - }, - { - x: '食用酒水', - y: rv(), - }, - { - x: '个护健康', - y: rv(), - }, - { - x: '服饰箱包', - y: rv(), - }, - { - x: '母婴产品', - y: rv(), - }, - ]; - if (Math.random() > 0.5) { - this.salesPieData.push({ - x: '其他', - y: rv(), - }); - } - this.total = `¥ ${this.salesPieData.reduce((pre, now) => now.y + pre, 0).toFixed(2)}`; - if (this.pie) { - // 等待组件渲染 - setTimeout(() => { - console.log('a') - this.pie.changeData() - }); - } - } + + handleClick(data: G2MiniAreaClickItem): void { this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`); } - format(val: number): string { - return `¥ ${val.toFixed(2)}`; - } + render(el: ElementRef): void { this.ngZone.runOutsideAngular(() => this.init(el.nativeElement)); } private init(el: HTMLElement): void { const data = [ - { item: '货源单', count: 40, percent: 0.4 }, - { item: '合同单', count: 21, percent: 0.21 }, - { item: '事例三', count: 17, percent: 0.17 }, - { item: '事例四', count: 13, percent: 0.13 }, - { item: '事例五', count: 9, percent: 0.09 }, + { name: '订单数', month: '01', count: 150, }, + { name: '订单数', month: '02', count: 288 }, + { name: '订单数', month: '03', count: 393 }, + { name: '订单数', month: '04', count: 814 }, + { name: '订单数', month: '05', count: 47 }, + { name: '承运数', month: '05', count: 124 }, + { name: '订单数', month: '06', count: 203 }, + { name: '承运数', month: '06', count: 203 }, + { name: '订单数', month: '07', count: 24 }, + { name: '订单数', month: '08', count: 356 }, + { name: '承运数', month: '09', count: 124 }, + { name: '承运数', month: '10', count: 232 }, + { name: '承运数', month: '11', count: 345 }, + { name: '承运数', month: '12', count: 997 } ]; + const dataPillar = [ + { name: '应收金额(元)', month: '01', price: 18.9, }, + { name: '应收金额(元)', month: '02', price: 28.8 }, + { name: '应收金额(元)', month: '03', price: 39.3 }, + { name: '应收金额(元)', month: '04', price: 81.4 }, + { name: '应收金额(元)', month: '05', price: 47 }, + { name: '应付金额(元)', month: '05', price: 12.4 }, + { name: '应收金额(元)', month: '06', price: 20.3 }, + { name: '应付金额(元)', month: '06', price: 20.3 }, + { name: '应收金额(元)', month: '07', price: 24 }, + { name: '应收金额(元)', month: '08', price: 35.6 }, + { name: '应付金额(元)', month: '09', price: 12.4 }, + { name: '应付金额(元)', month: '10', price: 23.2 }, + { name: '应付金额(元)', month: '11', price: 34.5 }, + { name: '应付金额(元)', month: '12', price: 99.7 } + ]; + const ds = new DataSet(); + const dv = ds.createView().source(data); + dv.transform({ + type: 'map', + callback: row => { + row.year = parseInt(row.year, 10); + return row; + } + }).transform({ + type: 'regression', + method: 'polynomial', + fields: ['year', 'value'], + bandwidth: 0.1, + as: ['Year', 'Value'] + }); + const chart = new Chart({ container: el, autoFit: true, - height: 400, - }); - // 新建一个 view 用来单独渲染Annotation - const innerView = chart.createView(); - chart.coordinate('theta', { - radius: 0.6, - innerRadius: 0.7, + height: 500, + padding: [20, 40], }); - chart.data(data); - - chart.scale('percent', { - formatter: val => { - val = val * 100 + '%'; - return val; - }, + const view1 = chart.createView(); + view1.data(dataPillar); + view1.scale('price', { + nice: true, + }); + view1.tooltip({ + showMarkers: false, + shared: true, }); - chart.tooltip(false); - - // 声明需要进行自定义图例字段： 'item' - chart.legend('item', { - position: 'right', // 配置图例显示位置 - custom: true, // 关键字段，告诉 G2，要使用自定义的图例 - items: data.map((obj, index) => { - return { - name: obj.item, // 对应 itemName - value: obj.percent, // 对应 itemValue - marker: { - symbol: 'square', // marker 的形状 - style: { - r: 5, // marker 图形半径 - fill: chart.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应 - }, - }, // marker 配置 - }; - }), - itemValue: { - style: { - fill: '#999', - }, // 配置 itemValue 样式 - formatter: (val: any) => `${val * 100}%` // 格式化 itemValue 内容 - }, - }); - - chart + view1 .interval() - .adjust('stack') - .position('percent') - .color('item') - .style({ - fillOpacity: 1, - stroke: 'white', - lineWidth: 8, - }) - .state({ - active: { - style: element => { - const shape = element.shape; - return { - lineWidth: 1, - stroke: 'white', - strokeOpacity: shape.attr('fillOpacity'), - }; - }, + .position('month*price') + .color('name') + .adjust([ + { + type: 'dodge', + marginRatio: 0, }, - }); + ]); - // 移除图例点击过滤交互 - chart.removeInteraction('legend-filter'); - chart.interaction('element-active'); + const view2 = chart.createView(); + // view2.axis('count', { + // label: { + // formatter: (val) => { + // return val + ' °C'; + // }, + // }, + // }); + view2.data(data); + view2 + .line() + .position('month*count') + .color('name') + + + + // chart.interaction('active-region'); chart.render(); - // 监听 element 上状态的变化来动态更新 Annotation 信息 - chart.on('element:statechange', (ev: any) => { - const { state, stateStatus, element } = ev.gEvent.originalEvent; - - // 本示例只需要监听 active 的状态变化 - if (state === 'active') { - const data = element.getData(); - if (stateStatus) { - // 更新 Annotation - updateAnnotation(data); - } else { - // 隐藏 Annotation - clearAnnotation(); - } - } - }); - - // 绘制 annotation - let lastItem: any; - function updateAnnotation(data: any) { - if (data.item !== lastItem) { - innerView.annotation().clear(true); - innerView - .annotation() - .text({ - position: ['50%', '50%'], - content: data.item, - style: { - fontSize: 20, - fill: '#8c8c8c', - textAlign: 'center', - }, - offsetY: -20, - }) - .text({ - position: ['50%', '50%'], - content: data.count, - style: { - fontSize: 28, - fill: '#8c8c8c', - textAlign: 'center', - }, - offsetX: -10, - offsetY: 20, - }) - innerView.render(true); - lastItem = data.item; - } - } - - // 清空 annotation - function clearAnnotation() { - innerView.annotation().clear(true); - innerView.render(true); - lastItem = null; - } - } } diff --git a/src/app/routes/datatable/components/operationtable/operationtable.component.html b/src/app/routes/datatable/components/operationtable/operationtable.component.html index d50b08b2..bfd7283d 100644 --- a/src/app/routes/datatable/components/operationtable/operationtable.component.html +++ b/src/app/routes/datatable/components/operationtable/operationtable.component.html @@ -25,22 +25,28 @@ [scroll]="{ x: '1200px' }" [res]="{ reName: { list: 'data.records', total: 'data.total' } }" [page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="false"> - - + +
- + + +
- +
- +
+ + + + \ No newline at end of file diff --git a/src/app/routes/datatable/components/operationtable/operationtable.component.ts b/src/app/routes/datatable/components/operationtable/operationtable.component.ts index aa4ed793..51a2f215 100644 --- a/src/app/routes/datatable/components/operationtable/operationtable.component.ts +++ b/src/app/routes/datatable/components/operationtable/operationtable.component.ts @@ -11,15 +11,21 @@ import { differenceInCalendarDays } from 'date-fns'; providers: [DatePipe] }) -export class DatatableOperationtableComponent implements OnInit {; +export class DatatableOperationtableComponent implements OnInit { + @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(); - @ViewChild('st') private readonly st!: STComponent; + enterpriseInfoId = '' + enterpriseInfoIdPie = '' + interManlist: any = [] columns: STColumn[] = [ { title: '运营主体', index: 'networkTransporterName', className: 'text-center' }, { title: '订单数', index: 'zsl', className: 'text-center' }, @@ -36,12 +42,12 @@ export class DatatableOperationtableComponent implements OnInit {; /** * 查询参数 */ - get reqParams() { - if(this.mode === 'year') { + get reqParams() { + if (this.mode === 'year') { this.type = 1 - } else if(this.mode === 'month') { + } else if (this.mode === 'month') { this.type = 2 - } else if(this.mode === 'date') { + } else if (this.mode === 'date') { this.type = 3 } else { this.type = 4 @@ -49,32 +55,41 @@ export class DatatableOperationtableComponent implements OnInit {; let params: any = { time: this.time, type: this.type - }; - + }; + delete params._$expand; return { ...params }; } constructor(public service: DataService, private datePipe: DatePipe) { } - ngOnInit(): void { } + ngOnInit(): void { + this.initData() + } + initData() { + this.service.getNetworkFreightForwarder().subscribe(res => { + this.interManlist = res + this.enterpriseInfoId = res[0].value + this.enterpriseInfoIdPie = res[0].value + }) + } - changeData(){ - if(this.mode === 'year') { + changeData() { + if (this.mode === 'year') { this.dateFormat = 'yyyy' - } else if(this.mode === 'month') { + } else if (this.mode === 'month') { this.dateFormat = 'yyyy-MM' } else { this.dateFormat = 'yyyy-MM-dd' - } + } } onChange(result: any) { - if(this.mode === 'year') { + if (this.mode === 'year') { this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00'] - } else if(this.mode === 'month') { + } else if (this.mode === 'month') { this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00'] - } else if(this.mode === 'date') { + } else if (this.mode === 'date') { this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00'] - } else{ + } 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 }); @@ -82,8 +97,27 @@ export class DatatableOperationtableComponent implements OnInit {; disabledDate = (current: Date): boolean => // Can not select days before today and today differenceInCalendarDays(current, this.today) > 0; - exportFun(){ + 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'] + } + } } diff --git a/src/app/routes/datatable/components/operationtable/pie/pie.component.html b/src/app/routes/datatable/components/operationtable/pie/pie.component.html index 0640a4d4..f36f8f9d 100644 --- a/src/app/routes/datatable/components/operationtable/pie/pie.component.html +++ b/src/app/routes/datatable/components/operationtable/pie/pie.component.html @@ -1 +1,3 @@ - \ No newline at end of file +
+ +
\ No newline at end of file diff --git a/src/app/routes/datatable/components/operationtable/pie/pie.component.less b/src/app/routes/datatable/components/operationtable/pie/pie.component.less index e69de29b..a69b0822 100644 --- a/src/app/routes/datatable/components/operationtable/pie/pie.component.less +++ b/src/app/routes/datatable/components/operationtable/pie/pie.component.less @@ -0,0 +1,5 @@ +.box{ + width: 50%; + overflow: hidden; + margin:0 auto; +} \ No newline at end of file diff --git a/src/app/routes/datatable/components/operationtable/pie/pie.component.ts b/src/app/routes/datatable/components/operationtable/pie/pie.component.ts index 1e69183a..594ed06d 100644 --- a/src/app/routes/datatable/components/operationtable/pie/pie.component.ts +++ b/src/app/routes/datatable/components/operationtable/pie/pie.component.ts @@ -1,10 +1,7 @@ import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core'; -import { ModalHelper, _HttpClient } from '@delon/theme'; -import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area'; -import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie'; +import { G2PieComponent, G2PieData } from '@delon/chart/pie'; import { format } from 'date-fns'; -import { Chart, registerShape, Util } from '@antv/g2'; -import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline'; +import { Chart } from '@antv/g2'; import { DataService } from '../../../services/data.service'; @Component({ @@ -14,101 +11,27 @@ import { DataService } from '../../../services/data.service'; }) export class OperationtablePieComponent implements OnInit { @ViewChild('pie', { static: false }) pie!: G2PieComponent; - chartData: G2TimelineData[] = []; - visitData = this.genData(); - salesData = this.genData(); - salesPieData: G2PieData[] = []; - total = ''; + chartData: any = []; + el: any; constructor(private service: DataService, private ngZone: NgZone) { - } ngOnInit(): void { - this.refreshPie(); - this.initLineData() + this.initData() } - initLineData() { - for (let i = 0; i < 20; i += 1) { - this.chartData.push({ - time: new Date().getTime() + 1000 * 60 * 60 * 24 * i, - y1: Math.floor(Math.random() * 100) + 1000, - y2: Math.floor(Math.random() * 100) + 10, - }); - } - } - private genData(): G2MiniAreaData[] { - const beginDay = new Date().getTime(); - const res: G2MiniAreaData[] = []; - for (let i = 0; i < 20; i += 1) { - res.push({ - x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'), - y: Math.floor(Math.random() * 100) + 10, - }); - } - return res; - } - - refresh(): void { - this.visitData = this.genData(); - } - refreshPie(): void { - const rv = (min: number = 0, max: number = 5000) => Math.floor(Math.random() * (max - min + 1) + min); - this.salesPieData = [ - { - x: '家用电器', - y: rv(), - }, - { - x: '食用酒水', - y: rv(), - }, - { - x: '个护健康', - y: rv(), - }, - { - x: '服饰箱包', - y: rv(), - }, - { - x: '母婴产品', - y: rv(), - }, - ]; - if (Math.random() > 0.5) { - this.salesPieData.push({ - x: '其他', - y: rv(), - }); - } - this.total = `¥ ${this.salesPieData.reduce((pre, now) => now.y + pre, 0).toFixed(2)}`; - if (this.pie) { - // 等待组件渲染 - setTimeout(() => { - console.log('a') - this.pie.changeData() - }); - } - } - - handleClick(data: G2MiniAreaClickItem): void { - this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`); - } - format(val: number): string { - return `¥ ${val.toFixed(2)}`; + initData(){ + this.service.request(this.service.$api_operationalReportWaybillStatusDistribution).subscribe(res => { + if (res) { + this.chartData = res + this.ngZone.runOutsideAngular(() => this.init(this.el)); + } + }) } render(el: ElementRef): void { - this.ngZone.runOutsideAngular(() => this.init(el.nativeElement)); + this.el = el.nativeElement } private init(el: HTMLElement): void { - const data = [ - { item: '货源单', count: 40, percent: 0.4 }, - { item: '合同单', count: 21, percent: 0.21 }, - { item: '事例三', count: 17, percent: 0.17 }, - { item: '事例四', count: 13, percent: 0.13 }, - { item: '事例五', count: 9, percent: 0.09 }, - ]; const chart = new Chart({ container: el, autoFit: true, @@ -121,14 +44,14 @@ export class OperationtablePieComponent implements OnInit { innerRadius: 0.7, }); - chart.data(data); + chart.data(this.chartData); - chart.scale('percent', { - formatter: val => { - val = val * 100 + '%'; - return val; - }, - }); + // chart.scale('percent', { + // formatter: val => { + // val = val * 100 + '%'; + // return val; + // }, + // }); chart.tooltip(false); @@ -136,10 +59,11 @@ export class OperationtablePieComponent implements OnInit { chart.legend('item', { position: 'right', // 配置图例显示位置 custom: true, // 关键字段，告诉 G2，要使用自定义的图例 - items: data.map((obj, index) => { + items: this.chartData.map((obj: any, index: any) => { return { name: obj.item, // 对应 itemName - value: obj.percent, // 对应 itemValue + value: obj.percent+ '% ' + obj.count, + count: obj.count, // 对应 itemValue marker: { symbol: 'square', // marker 的形状 style: { @@ -153,7 +77,7 @@ export class OperationtablePieComponent implements OnInit { style: { fill: '#999', }, // 配置 itemValue 样式 - formatter: (val: any) => `${val * 100}%` // 格式化 itemValue 内容 + formatter: (val: any) => `${val}` // 格式化 itemValue 内容 }, }); @@ -184,9 +108,12 @@ export class OperationtablePieComponent implements OnInit { chart.removeInteraction('legend-filter'); chart.interaction('element-active'); - chart.render(); + chart.render(true); // 默认选择 interval.elements[0].setState('selected', true); + const ele = interval.elements[0].getData(); + + // 监听 element 上状态的变化来动态更新 Annotation 信息 chart.on('element:statechange', (ev: any) => { const { state, stateStatus, element } = ev.gEvent.originalEvent; diff --git a/src/app/routes/datatable/datatable-routing.module.ts b/src/app/routes/datatable/datatable-routing.module.ts index 0ac5eb06..b309be67 100644 --- a/src/app/routes/datatable/datatable-routing.module.ts +++ b/src/app/routes/datatable/datatable-routing.module.ts @@ -1,6 +1,5 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { DatatableCustomtableComponent } from './components/customtable/customtable.component'; import { DatatableCustomindexComponent } from './components/customtable/customindex/customindex.component'; import { DatatableOwnerComponent } from './components/customtable/owner/owner.component'; import { DatatableDriverComponent } from './components/customtable/driver/driver.component'; @@ -13,14 +12,19 @@ import { DatatableInvoicetableComponent } from './components/invoicetable/invoic import { DatatableComplianceSalesmanComponent } from './components/compliance/salesman/salesman.component'; import { DatatableComplianceCustomerComponent } from './components/compliance/customer/customer.component'; import { DatatableFundReportingComponent } from './reporting/components/fund-reporting/fund-reporting.component'; +import { DatatableMancustomtableComponent } from './components/customtable/mancustomtable/mancustomtable.component'; +import { DatatablePartnertableComponent } from './components/customtable/partnertable/partnertable.component'; +import { DatatableBusiindexComponent } from './components/busitable/busiindex/busiindex.component'; +import { DatatableMantableComponent } from './components/busitable/mantable/mantable.component'; import { DatatableReportingFundInfoComponent } from './reporting/components/fund-info/fund-info.component'; const routes: Routes = [ { path: 'dataindex', component: DatatableDataindexComponent }, - { path: 'customtable', component: DatatableCustomtableComponent }, - { path: 'customindex', component: DatatableCustomindexComponent }, - { path: 'owner', component: DatatableOwnerComponent }, - { path: 'driver', component: DatatableDriverComponent }, + { path: 'customtable/customindex', component: DatatableCustomindexComponent }, + { path: 'customtable/owner', component: DatatableOwnerComponent }, + { path: 'customtable/driver', component: DatatableDriverComponent }, + { path: 'customtable/mancustomtable', component: DatatableMancustomtableComponent }, + { path: 'customtable/partnertable', component: DatatablePartnertableComponent }, { path: 'operationtable', component: DatatableOperationtableComponent }, { path: 'reporting/order', component: DatatableOrderReportingComponent }, { path: 'compliancetabel/index', component: DatatableComplianceIndexComponent }, @@ -28,8 +32,10 @@ const routes: Routes = [ { path: 'compliancetabel/customer', component: DatatableComplianceCustomerComponent }, { path: 'financetable', component: DatatableFinancetableComponent }, { path: 'invoicetable', component: DatatableInvoicetableComponent }, - { path: 'reporting/fund', component: DatatableFundReportingComponent } - , + { path: 'reporting/fund', component: DatatableFundReportingComponent }, + { path: 'busitable/busiindex', component: DatatableBusiindexComponent }, + { path: 'busitable/mantable', component: DatatableMantableComponent }, + { path: 'reporting/fund', component: DatatableFundReportingComponent }, { path: 'fund-info', component: DatatableReportingFundInfoComponent }]; diff --git a/src/app/routes/datatable/datatable.module.ts b/src/app/routes/datatable/datatable.module.ts index f361242a..cb63fd77 100644 --- a/src/app/routes/datatable/datatable.module.ts +++ b/src/app/routes/datatable/datatable.module.ts @@ -1,7 +1,6 @@ import { NgModule, Type } from '@angular/core'; import { SharedModule, SHARED_G2_MODULES } from '@shared'; import { DatatableRoutingModule } from './datatable-routing.module'; -import { DatatableCustomtableComponent } from './components/customtable/customtable.component'; import { DatatableCustomindexComponent } from './components/customtable/customindex/customindex.component'; import { DatatableOwnerComponent } from './components/customtable/owner/owner.component'; import { DatatableDriverComponent } from './components/customtable/driver/driver.component'; @@ -9,6 +8,7 @@ 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 { OperationtableCurveComponent } from './components/operationtable/curve/curve.component'; import { DatatableComplianceIndexComponent } from './components/compliance/index/index.component'; import { DatatableFinancetableComponent } from './components/financetable/financetable.component'; import { DatatableInvoicetableComponent } from './components/invoicetable/invoicetable.component'; @@ -17,17 +17,23 @@ import { DatatableComplianceCustomerComponent } from './components/compliance/cu import { DatatableReportingUploadSettingComponent } from './reporting/components/upload-setting/upload-setting.component'; import { DatatableReportingVerifyResultComponent } from './reporting/components/verify-result/verify-result.component'; import { DatatableFundReportingComponent } from './reporting/components/fund-reporting/fund-reporting.component'; +import { DatatableMancustomtableComponent } from './components/customtable/mancustomtable/mancustomtable.component'; +import { DatatablePartnertableComponent } from './components/customtable/partnertable/partnertable.component'; +import { DatatableBusiindexComponent } from './components/busitable/busiindex/busiindex.component'; +import { DatatableMantableComponent } from './components/busitable/mantable/mantable.component'; +import { busitableCurveComponent } from './components/busitable/busiindex/curve/curve.component'; +import { busitablePillarComponent } from './components/busitable/busiindex/pillar/pillar.component'; import { DatatableReportingFundInfoComponent } from './reporting/components/fund-info/fund-info.component'; const COMPONENTS: Type[] = [ DatatableDataindexComponent, - DatatableCustomtableComponent, DatatableCustomindexComponent, DatatableOwnerComponent, DatatableDriverComponent, DatatableOperationtableComponent, OperationtablePieComponent, DatatableOrderReportingComponent, + OperationtableCurveComponent, DatatableComplianceIndexComponent, DatatableFinancetableComponent, DatatableInvoicetableComponent, @@ -35,8 +41,14 @@ const COMPONENTS: Type[] = [ DatatableComplianceCustomerComponent, DatatableReportingUploadSettingComponent, DatatableReportingVerifyResultComponent, - DatatableFundReportingComponent - , + DatatableFundReportingComponent, + DatatableMancustomtableComponent, + DatatablePartnertableComponent, + DatatableBusiindexComponent, + DatatableMantableComponent, + busitableCurveComponent, + busitablePillarComponent, + DatatableFundReportingComponent, DatatableReportingFundInfoComponent] diff --git a/src/app/routes/datatable/services/data.service.ts b/src/app/routes/datatable/services/data.service.ts index 4522bacd..c9aafb0e 100644 --- a/src/app/routes/datatable/services/data.service.ts +++ b/src/app/routes/datatable/services/data.service.ts @@ -23,6 +23,14 @@ export class DataService extends BaseService { // 查询运营报表 $api_listOperationalReportPage = `/api/sdc/report/listOperationalReportPage`; + // 查询业绩报表 + $api_listPerformanceReportPage = `/api/sdc/report/listPerformanceReportPage`; + // 运营报表运单状态分布 + $api_operationalReportWaybillStatusDistribution = `/api/sdc/report/operationalReportWaybillStatusDistribution`; + // 获取网络货运人 + $api_get_network_freight_forwarder_list = `/api/mdc/cuc/networkTransporter/findAll`; + // 业绩报表柱状图 + $api_performanceReportHistogram = `/api/sdc/report/performanceReportHistogram`; // 查询开票数据报表 $api_findInvoiceReport = `/api/fcc/invoiceReport/findInvoiceReport`; @@ -30,4 +38,33 @@ export class DataService extends BaseService { constructor(public injector: Injector) { super(injector); } + + /** +* 获取网络货运人 +* @returns +*/ + getNetworkFreightForwarder(params = {}, containerAll = false) { + return this.request(this.$api_get_network_freight_forwarder_list, params).pipe( + map((res: any) => { + if (!res) { + return []; + } + const list = res.map((item: any) => { + return { + label: item.enterpriseName, + value: item.id + }; + }); + const obj = []; + if (containerAll) { + obj.push({ label: '全部', value: '' }); + } + return [...obj, ...list]; + }) + ); + } + + getPerformanceReportHistogram(params = {}){ + return this.request(this.$api_performanceReportHistogram, params) + } }