fix bug
This commit is contained in:
Lingzi
@ -82,14 +82,6 @@ export class DatatableComplianceIndexComponent implements OnInit {
|
||||
|
||||
}
|
||||
|
||||
data = [
|
||||
{ Date: '22 February', 订单合格率: 50000, 付款及时率: 125000 },
|
||||
{ Date: '28 February', 订单合格率: 60000, 付款及时率: 150000 },
|
||||
{ Date: '3 March', 订单合格率: 100000, 付款及时率: 250000 },
|
||||
{ Date: '20 March', 订单合格率: 200000, 付款及时率: 500000 },
|
||||
{ Date: '7 April', 订单合格率: 250000, 付款及时率: 625000 },
|
||||
{ Date: '13 June', 订单合格率: 210000, 付款及时率: 525000 }
|
||||
];
|
||||
render(el: ElementRef<HTMLDivElement>) {
|
||||
this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
|
||||
}
|
||||
@ -102,24 +94,105 @@ export class DatatableComplianceIndexComponent implements OnInit {
|
||||
});
|
||||
// 以三组数据为例, 需要展示 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},
|
||||
{ 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 },
|
||||
|
||||
{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}
|
||||
];
|
||||
{ data: '1月', label: '付款及时率', value: 10 },
|
||||
{ data: '2月', label: '付款及时率', value: 15 },
|
||||
{ data: '3月', label: '付款及时率', value: 30 },
|
||||
{ data: '4月', label: '付款及时率', value: 8 },
|
||||
{ data: '5月', label: '付款及时率', value: 9 },
|
||||
{ data: '6月', label: '付款及时率', value: 5 },
|
||||
{ data: '7月', label: '付款及时率', value: 80 },
|
||||
{ data: '8月', label: '付款及时率', value: 55 },
|
||||
|
||||
{ data: '1月', label: '货源占比率', value: 90 },
|
||||
{ data: '2月', label: '货源占比率', value: 30 },
|
||||
{ data: '3月', label: '货源占比率', value: 45 },
|
||||
{ data: '4月', label: '货源占比率', value: 35 },
|
||||
{ data: '5月', label: '货源占比率', value: 95 },
|
||||
{ data: '6月', label: '货源占比率', value: 35 },
|
||||
{ data: '7月', label: '货源占比率', value: 65 },
|
||||
{ data: '8月', label: '货源占比率', value: 63 },
|
||||
|
||||
{ data: '1月', label: '运费直付占比', value: 30 },
|
||||
{ data: '2月', label: '运费直付占比', value: 60 },
|
||||
{ data: '3月', label: '运费直付占比', value: 25 },
|
||||
{ data: '4月', label: '运费直付占比', value: 35 },
|
||||
{ data: '5月', label: '运费直付占比', value: 15 },
|
||||
{ data: '6月', label: '运费直付占比', value: 55 },
|
||||
{ data: '7月', label: '运费直付占比', value: 50 },
|
||||
{ data: '8月', label: '运费直付占比', value: 30 },
|
||||
];
|
||||
|
||||
chart.data(data);
|
||||
//刻度自定义
|
||||
chart.scale({
|
||||
data: {
|
||||
range: [0, 1],
|
||||
},
|
||||
value: {
|
||||
min: 0,
|
||||
nice: true,
|
||||
},
|
||||
});
|
||||
// 图表下方图形文字自定义
|
||||
chart.legend({
|
||||
items:[
|
||||
{
|
||||
name: '订单合格率',
|
||||
value: 'node_load1',
|
||||
marker: {
|
||||
symbol: 'circle',
|
||||
style: {fill: '#6193f7'}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '付款及时率',
|
||||
value: 'node_load2',
|
||||
marker: {symbol: 'circle',style: {fill: '#58d3a2'}},
|
||||
},
|
||||
{
|
||||
name: '货源占比率',
|
||||
value: 'node_load13',
|
||||
marker: {symbol: 'circle',style: {fill: '#5b6d8f'}},
|
||||
},
|
||||
{
|
||||
name: '运费直付占比',
|
||||
value: 'node_load13',
|
||||
marker: {symbol: 'circle',style: {fill: '#f0b915'}},
|
||||
},
|
||||
]
|
||||
});
|
||||
// 提示自定义
|
||||
chart.tooltip({
|
||||
showCrosshairs: true,
|
||||
shared: true,
|
||||
});
|
||||
|
||||
//数据格式化
|
||||
chart.axis('value', {
|
||||
label: {
|
||||
formatter: (val) => {
|
||||
return val + ' %';
|
||||
},
|
||||
},
|
||||
});
|
||||
// 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
|
||||
chart.line().position('x*y').color('z');
|
||||
chart.line().position('data*value').color('label').tooltip('label*value', (name:any, value:any) => {
|
||||
return {
|
||||
name: name,
|
||||
value: value + '%'
|
||||
};
|
||||
});;
|
||||
// 在x*y的坐标上按z值绘制圆点
|
||||
chart.point().position('x*y').size(4).color('z').shape('circle');
|
||||
chart.point().position('data*value').size(4).color('label').shape('circle');
|
||||
chart.render();
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,12 +3,27 @@
|
||||
<nz-card nzTitle="开票数据报表">
|
||||
<st
|
||||
#st
|
||||
[data]="data"
|
||||
[data]="service.$api_findInvoiceReport"
|
||||
[columns]="columns"
|
||||
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
|
||||
[res]="{ reName: { list: 'data.records', total: 'data.total' } }"
|
||||
[res]="{ reName: { list: 'data', total: 'data.total' }}"
|
||||
[page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
|
||||
[loadingDelay]="500"
|
||||
>
|
||||
<ng-template st-row="totalInvoicedAmount" let-item let-index="index">
|
||||
{{item.totalInvoicedAmount | currency}}
|
||||
</ng-template>
|
||||
<ng-template st-row="invAmountMonth" let-item let-index="index">
|
||||
{{item.invAmountMonth | currency}}
|
||||
</ng-template>
|
||||
<ng-template st-row="applyWaitInvAmount" let-item let-index="index">
|
||||
{{item.applyWaitInvAmount | currency}}
|
||||
</ng-template>
|
||||
<ng-template st-row="unInvoicedAmountHistory" let-item let-index="index">
|
||||
{{item.unInvoicedAmountHistory | currency}}
|
||||
</ng-template>
|
||||
<ng-template st-row="unInvoicedAmountCurMonth" let-item let-index="index">
|
||||
{{item.unInvoicedAmountCurMonth | currency}}
|
||||
</ng-template>
|
||||
</st>
|
||||
</nz-card>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { STColumn, STComponent } from '@delon/abc/st';
|
||||
import { STColumn, STComponent, STData } from '@delon/abc/st';
|
||||
import { SFSchema } from '@delon/form';
|
||||
import { ModalHelper, _HttpClient } from '@delon/theme';
|
||||
import { DataService } from '../../services/data.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-invoicetable',
|
||||
@ -13,7 +14,7 @@ export class DatatableInvoicetableComponent implements OnInit {
|
||||
columns!: STColumn[];
|
||||
|
||||
data=[{name1:1111}]
|
||||
constructor(private http: _HttpClient, private modal: ModalHelper) { }
|
||||
constructor(private http: _HttpClient, private modal: ModalHelper,public service :DataService) { }
|
||||
|
||||
/**
|
||||
* 查询参数
|
||||
@ -23,48 +24,48 @@ export class DatatableInvoicetableComponent implements OnInit {
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.initST();
|
||||
|
||||
}
|
||||
initST() {
|
||||
this.columns = [
|
||||
{
|
||||
title: '运营主体',
|
||||
index: 'name1'
|
||||
index: 'operationName'
|
||||
},
|
||||
{
|
||||
title: '已开票总金额',
|
||||
index: 'name1'
|
||||
index: 'totalInvoicedAmount',
|
||||
render: 'totalInvoicedAmount',
|
||||
},
|
||||
{
|
||||
title: '当月已开票金额',
|
||||
index: 'name1'
|
||||
index: 'invAmountMonth',
|
||||
render: 'invAmountMonth',
|
||||
},
|
||||
{
|
||||
title: '当月已开票张数',
|
||||
index: 'numInvAmountMonth',
|
||||
},
|
||||
{
|
||||
title: '已申请待开金额',
|
||||
index: 'name1'
|
||||
index: 'applyWaitInvAmount',
|
||||
render: 'applyWaitInvAmount',
|
||||
},
|
||||
{
|
||||
title: '申请待开客户',
|
||||
index: 'applyWaitCustomer',
|
||||
},
|
||||
{
|
||||
title: '未申请开票金额（历史）',
|
||||
index: 'name1'
|
||||
index: 'unInvoicedAmountHistory',
|
||||
render: 'unInvoicedAmountHistory',
|
||||
},
|
||||
{
|
||||
title: '未申请开票金额（当月）',
|
||||
index: 'name1'
|
||||
index: 'unInvoicedAmountCurMonth',
|
||||
render: 'unInvoicedAmountCurMonth',
|
||||
},
|
||||
{
|
||||
title: '当月发票张数',
|
||||
index: 'name1'
|
||||
},
|
||||
{
|
||||
title: '剩余发票张数',
|
||||
index: 'name1'
|
||||
},
|
||||
|
||||
];
|
||||
}
|
||||
add(): void {
|
||||
// this.modal
|
||||
// .createStatic(FormEditComponent, { i: { id: 0 } })
|
||||
// .subscribe(() => this.st.reload());
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user