diff --git a/src/app/routes/datatable/components/financetable/curve/curve.component.html b/src/app/routes/datatable/components/financetable/curve/curve.component.html
index bcfe240b..7ceba0b7 100644
--- a/src/app/routes/datatable/components/financetable/curve/curve.component.html
+++ b/src/app/routes/datatable/components/financetable/curve/curve.component.html
@@ -1,5 +1,2 @@
-
-
-
diff --git a/src/app/routes/datatable/components/financetable/curve/curve.component.ts b/src/app/routes/datatable/components/financetable/curve/curve.component.ts
index 620d2029..9f345eda 100644
--- a/src/app/routes/datatable/components/financetable/curve/curve.component.ts
+++ b/src/app/routes/datatable/components/financetable/curve/curve.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
import { DataService } from '../../../services/data.service';
// import DataSet from '@antv/data-set';
@@ -9,160 +9,75 @@ import { Chart } from '@antv/g2';
templateUrl: './curve.component.html',
styleUrls: ['./curve.component.less']
})
-export class FinanceTableCurveComponent implements OnInit {
- constructor(private service: DataService, private ngZone: NgZone) {}
+export class FinanceTableCurveComponent implements OnInit,OnChanges {
+ el: any;
+ @Input() chartData: any;
+ chart: any;
+ constructor(private service: DataService, private ngZone: NgZone) {
- ngOnInit(): void {}
+ }
+ ngOnChanges(changes: SimpleChanges): void {
+ if (this.chartData) {
+ // setTimeout(()=>{
+ // this.chart.render(true)
+ // }, 1000)
- handleClick(data: G2MiniAreaClickItem): void {
- this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
+ }
}
+ ngOnInit(): void {
+
+ }
+ reRender() {
+ setTimeout(() => {
+ this.chart.data(this.chartData);
+ this.chart.render();
+ }, 1000)
+ }
render(el: ElementRef): void {
- this.ngZone.runOutsideAngular(() => this.initBar(el.nativeElement));
+ this.el = el.nativeElement
+ setTimeout(() => {
+ this.ngZone.runOutsideAngular(() => this.init(this.el));
+ }, 1000)
}
- private initBar(el: HTMLElement): void {
- const data = [
- { name: '已收金额（元）', 月份: 'Jan.', 月均降雨量: 18.9 },
- { name: '已收金额（元）', 月份: 'Feb.', 月均降雨量: 28.8 },
- { name: '已收金额（元）', 月份: 'Mar.', 月均降雨量: 39.3 },
- { name: '已收金额（元）', 月份: 'Apr.', 月均降雨量: 81.4 },
- { name: '已收金额（元）', 月份: 'May', 月均降雨量: 47 },
- { name: '已收金额（元）', 月份: 'Jun.', 月均降雨量: 20.3 },
- { name: '已收金额（元）', 月份: 'Jul.', 月均降雨量: 24 },
- { name: '已收金额（元）', 月份: 'Aug.', 月均降雨量: 35.6 },
- { name: '已付运费（元）', 月份: 'Jan.', 月均降雨量: 12.4 },
- { name: '已付运费（元）', 月份: 'Feb.', 月均降雨量: 23.2 },
- { name: '已付运费（元）', 月份: 'Mar.', 月均降雨量: 34.5 },
- { name: '已付运费（元）', 月份: 'Apr.', 月均降雨量: 99.7 },
- { name: '已付运费（元）', 月份: 'May', 月均降雨量: 52.6 },
- { name: '已付运费（元）', 月份: 'Jun.', 月均降雨量: 35.5 },
- { name: '已付运费（元）', 月份: 'Jul.', 月均降雨量: 37.4 },
- { name: '已付运费（元）', 月份: 'Aug.', 月均降雨量: 42.4 }
- ];
- const chart = new Chart({
+ private init(el: HTMLElement): void {
+ this.chart = new Chart({
container: el,
autoFit: true,
- height: 500
- });
- chart.data(data);
- chart.scale('月均降雨量', {
- nice: true
- });
- chart.tooltip({
- showMarkers: false,
- shared: true
- });
- // 图表下方图形文字自定义
- chart.legend({
- items: [
- {
- name: '已收金额（元）',
- value: 'node_load1',
- marker: {
- symbol: 'circle',
- style: { fill: '#6395f9' }
- }
- },
- {
- name: '已付运费（元）',
- value: 'node_load1',
- marker: {
- symbol: 'circle',
- style: { fill: '#62daab' }
- }
- }
- ]
+ height: 500,
});
- chart
- .interval()
- .position('月份*月均降雨量')
- .color('name')
- .adjust([
- {
- type: 'dodge',
- marginRatio: 0
- }
- ]);
-
- chart.render();
- }
-
- render2(el: ElementRef): void {
- this.ngZone.runOutsideAngular(() => this.initCurve(el.nativeElement));
- }
-
- private initCurve(el: HTMLElement): void {
- const chart = new Chart({
- container: el,
- autoFit: true,
- height: 400
- });
- // 以三组数据为例, 需要展示 91/92/93年中a/b/c数据走势
- const data = [
- { data: '1月', label: '平均附加费率', value: 5 },
- { data: '2月', label: '平均附加费率', value: 10 },
- { data: '3月', label: '平均附加费率', value: 25 },
- { data: '4月', label: '平均附加费率', value: 35 },
- { data: '5月', label: '平均附加费率', value: 15 },
- { data: '6月', label: '平均附加费率', value: 5 },
- { data: '7月', label: '平均附加费率', value: 95 },
- { data: '8月', label: '平均附加费率', value: 45 }
- ];
-
- chart.data(data);
- //刻度自定义
- chart.scale({
- data: {
- range: [0, 1]
+ this.chart.data(this.chartData);
+ this.chart.scale({
+ time: {
+ range: [0, 1],
+ },
+ number: {
+ nice: true,
},
- value: {
- min: 0,
- nice: true
- }
});
- // 图表下方图形文字自定义
- chart.legend({
- items: [
- {
- name: '平均附加费率',
- value: 'node_load1',
- marker: {
- symbol: 'circle',
- style: { fill: '#6193f7' }
- }
- }
- ]
- });
- // 提示自定义
- chart.tooltip({
+
+ this.chart.tooltip({
showCrosshairs: true,
- shared: true
+ shared: true,
});
-
- //数据格式化
- chart.axis('value', {
+
+ this.chart.axis('number', {
label: {
- formatter: val => {
- return val + ' %';
- }
- }
+ formatter: (val: any) => {
+ return val;
+ },
+ },
});
- // 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
- chart
+
+ this.chart
.line()
- .position('data*value')
- .color('label')
- .tooltip('label*value', (name: any, value: any) => {
- return {
- name: name,
- value: value + '%'
- };
- });
- // 在x*y的坐标上按z值绘制圆点
- // chart.point().position('data*value').size(4).color('label').shape('circle');
- chart.render();
+ .position('time*number')
+ .color('name')
+
+
+ this.chart.render();
+
}
}
diff --git a/src/app/routes/datatable/components/financetable/financetable.component.html b/src/app/routes/datatable/components/financetable/financetable.component.html
index a25ffb3f..25eded17 100644
--- a/src/app/routes/datatable/components/financetable/financetable.component.html
+++ b/src/app/routes/datatable/components/financetable/financetable.component.html
@@ -64,5 +64,12 @@
-
+
\ No newline at end of file
diff --git a/src/app/routes/datatable/components/financetable/financetable.component.ts b/src/app/routes/datatable/components/financetable/financetable.component.ts
index 0c64cc9e..9f8cf423 100644
--- a/src/app/routes/datatable/components/financetable/financetable.component.ts
+++ b/src/app/routes/datatable/components/financetable/financetable.component.ts
@@ -4,6 +4,8 @@ import { SFSchema } from '@delon/form';
import { DatePipe, ModalHelper, _HttpClient } from '@delon/theme';
import { DataService } from '../../services/data.service';
import { differenceInCalendarDays } from 'date-fns';
+import { OperationCurveComponent } from '../operationtable/curve/curve.component';
+import { OperationPillarComponent } from '../operationtable/pillar/pillar.component';
@Component({
selector: 'app-datatable-financetable',
@@ -12,6 +14,8 @@ import { differenceInCalendarDays } from 'date-fns';
providers: [DatePipe]
})
export class DatatableFinancetableComponent implements OnInit {
+ @ViewChild('curve') private readonly curve!: OperationCurveComponent;
+ @ViewChild('pillar') private readonly pillar!: OperationPillarComponent;
@ViewChild('st') private readonly st!: STComponent;
type = 1;
mode = 'year';
@@ -24,8 +28,9 @@ export class DatatableFinancetableComponent implements OnInit {
timeNext: any = ['2022-01-01 00:00:00']
today = new Date();
enterpriseInfoId = ''
- enterpriseInfoIdPie = ''
interManlist: any = []
+ chartData: any = {}
+ flag = false;
columns: STColumn[] = [
{ title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
{ title: '客户预存款', index: 'czcgje',render: 'czcgje', className: 'text-center' },
@@ -63,13 +68,37 @@ export class DatatableFinancetableComponent implements OnInit {
constructor(public service: DataService, private datePipe: DatePipe) { }
ngOnInit(): void {
- this.initData()
+ this.initData();
+ this.initPillarData();
+ }
+
+ initPillarData(){
+ let type = 1
+ if(this.mode === 'year') {
+ type = 1
+ } else if(this.mode === 'month') {
+ type = 2
+ }
+ const params: any = {
+ time: this.timeNext,
+ type,
+ enterpriseInfoId: this.enterpriseInfoId
+ };
+ this.flag = true
+ this.service.request(this.service.$api_operationalReportHistogram, params).subscribe(res => {
+ if (res) {
+ this.chartData = res
+ if(this.flag) {
+ this.pillar.reRender()
+ this.curve.reRender()
+ }
+ }
+ })
}
initData() {
this.service.getNetworkFreightForwarder().subscribe(res => {
this.interManlist = res
this.enterpriseInfoId = res[0].value
- this.enterpriseInfoIdPie = res[0].value
})
}
diff --git a/src/app/routes/datatable/components/financetable/pillar/pillar.component.html b/src/app/routes/datatable/components/financetable/pillar/pillar.component.html
new file mode 100644
index 00000000..0640a4d4
--- /dev/null
+++ b/src/app/routes/datatable/components/financetable/pillar/pillar.component.html
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/app/routes/datatable/components/financetable/pillar/pillar.component.less b/src/app/routes/datatable/components/financetable/pillar/pillar.component.less
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/routes/datatable/components/financetable/pillar/pillar.component.ts b/src/app/routes/datatable/components/financetable/pillar/pillar.component.ts
new file mode 100644
index 00000000..9959782e
--- /dev/null
+++ b/src/app/routes/datatable/components/financetable/pillar/pillar.component.ts
@@ -0,0 +1,75 @@
+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-financetable-pillar',
+ templateUrl: './pillar.component.html',
+ styleUrls: ['./pillar.component.less']
+})
+export class FinancetablePillarComponent implements OnInit, OnChanges {
+ el: any;
+ @Input() chartData: any;
+ chart: any;
+ constructor(private service: DataService, private ngZone: NgZone) {
+
+ }
+ ngOnChanges(changes: SimpleChanges): void {
+ if (this.chartData) {
+ // setTimeout(()=>{
+ // this.chart.render(true)
+ // }, 1000)
+
+ }
+ }
+
+ ngOnInit(): void {
+
+ }
+ reRender() {
+ setTimeout(() => {
+ this.chart.data(this.chartData);
+ console.log(this.chartData)
+ this.chart.render();
+ }, 1000)
+ }
+ render(el: ElementRef): void {
+ this.el = el.nativeElement
+ setTimeout(() => {
+ this.ngZone.runOutsideAngular(() => this.init(this.el));
+ },1000)
+ }
+
+ private init(el: HTMLElement): void {
+ this.chart = new Chart({
+ container: el,
+ autoFit: true,
+ height: 500,
+ });
+
+ this.chart.data(this.chartData);
+
+ this.chart.scale('number', {
+ nice: true,
+ });
+ this.chart.tooltip({
+ showMarkers: false,
+ shared: true,
+ });
+
+ this.chart
+ .interval()
+ .position('time*number')
+ .color('name')
+ .adjust([
+ {
+ type: 'dodge',
+ marginRatio: 0,
+ },
+ ]);
+
+ this.chart.interaction('active-region');
+
+ this.chart.render();
+ }
+
+}
\ No newline at end of file
diff --git a/src/app/routes/datatable/datatable.module.ts b/src/app/routes/datatable/datatable.module.ts
index 2929d78c..0eaeb61f 100644
--- a/src/app/routes/datatable/datatable.module.ts
+++ b/src/app/routes/datatable/datatable.module.ts
@@ -26,6 +26,7 @@ import { BusitableCurveComponent } from './components/busitable/busiindex/curve/
import { OperationPillarComponent } from './components/operationtable/pillar/pillar.component';
import { OperationCurveComponent } from './components/operationtable/curve/curve.component';
import { FinanceTableCurveComponent } from './components/financetable/curve/curve.component';
+import { FinancetablePillarComponent } from './components/financetable/pillar/pillar.component';
const COMPONENTS: Type[] = [
DatatableDataindexComponent,
@@ -54,7 +55,8 @@ const COMPONENTS: Type[] = [
OperationPillarComponent,
OperationCurveComponent,
DatatableReportingFundInfoComponent,
- FinanceTableCurveComponent
+ FinanceTableCurveComponent,
+ FinancetablePillarComponent
]
diff --git a/src/app/routes/datatable/services/data.service.ts b/src/app/routes/datatable/services/data.service.ts
index 5dd77204..ff5b2a14 100644
--- a/src/app/routes/datatable/services/data.service.ts
+++ b/src/app/routes/datatable/services/data.service.ts
@@ -42,6 +42,8 @@ export class DataService extends BaseService {
// 查询货主报表
$api_listShipperReportPage = `/api/sdc/report/listShipperReportPage`;
+ // 查询货主报表
+ $api_financialReportHistogram = `/api/sdc/report/financialReportHistogram`;
constructor(public injector: Injector) {
super(injector);