Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Taric Xin
2022-04-24 14:48:45 +08:00
parent 5b47f9a76b
commit dbf161e65f
4 changed files with 97 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/routes/datatable/components/dataindex/dataindex.component.html
View File

@ -1,5 +1,3 @@
<!-- 页头 -->
<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="AdvanceDepositTitle" [bordered]="true" [total]="totalAdvanceDeposit?.totalAmount || '¥ 0.00万'"
@ -11,9 +9,10 @@
</p>
</ng-template>
<ng-template #AdvanceDepositFooter>
<g2-mini-area line color="#cceafe" height="45" [data]="totalAdvanceDeposit?.list || []"
<g2-custom #AdvanceDeposit delay="100"></g2-custom>
<!-- <g2-mini-area line color="#cceafe" height="45" [data]="totalAdvanceDeposit?.list || []"
(clickItem)="handleClick($event)">
</g2-mini-area>
</g2-mini-area> -->
</ng-template>
</g2-card>
</div>

91
src/app/routes/datatable/components/dataindex/dataindex.component.ts
View File

@ -19,6 +19,7 @@ import { GeometryLabelCfg } from '@antv/g2/lib/interface';
providers: [CurrencyPipe]
})
export class DatatableDataindexComponent implements OnInit {
@ViewChild('AdvanceDeposit', { static: false }) AdvanceDeposit!: G2CustomComponent;
@ViewChild('g2custom', { static: false }) g2custom!: G2CustomComponent;
@ViewChild('RegionalPerforman', { static: false }) RegionalPerforman!: G2CustomComponent;
@ViewChild('BillDirectProportion', { static: false }) BillDirectProportion!: G2CustomComponent;
@ -49,6 +50,7 @@ export class DatatableDataindexComponent implements OnInit {
this.service.request(this.service.$api_total_advance_deposit).subscribe((res: DataTotalVO) => {
if (res) {
this.totalAdvanceDeposit = this.formatMiniAreaData(res);
this.initAreaMap(this.AdvanceDeposit['el'].nativeElement as any, []);
}
});
// 业绩量总额
@ -179,7 +181,7 @@ export class DatatableDataindexComponent implements OnInit {
.style({
fillOpacity: 1,
stroke: 'white',
lineWidth: 8
lineWidth: 4
})
.state({
active: {
@ -294,42 +296,57 @@ export class DatatableDataindexComponent implements OnInit {
* @param el
*/
private initAreaMap(el: HTMLElement, datas: any[]): void {
const data = [
{ city: '冰岛（雷克雅未克）', type: '首都人口', value: 0.56 },
{ city: '冰岛（雷克雅未克）', type: '城市人口', value: 0.38 }
];
const chart = new Chart({
container: el,
autoFit: true,
height: 500
height: 45
});
chart.data(datas);
chart.scale('Data', {
range: [0, 1],
tickCount: 10,
type: 'timeCat'
chart.data(data);
chart.legend(false);
chart.axis('city', false);
chart.axis('value', {
label: {
formatter: val => val
},
title: null,
grid: null
});
chart.scale('sales', {
nice: true
});
chart.axis('Data', false);
chart.axis('sales', false);
chart.coordinate('rect').transpose();
chart.tooltip({
showCrosshairs: true
customItems: items => {
return [];
},
showContent: true,
title: '1,968.08万'
});
// chart.annotation().dataMarker({
// position: ['2014-01', 1750],
// top: true,
// text: {
// content: '因政策调整导致销量下滑',
// style: {
// fontSize: 13
// }
// },
// line: {
// length: 30
// }
// });
chart.line().position('Data*sales');
chart.area().position('Data*sales');
chart.interaction('active-region');
chart
.interval()
.adjust('stack')
.position('city*value')
.color('type*city', (type: any, city: any) => {
if (type === '首都人口') {
return '#E60012';
}
if (type === '城市人口') {
return '#EAEAEB';
}
return '#EAEAEB';
})
.style('type', (type: any, city: any) => {
if (type === '首都人口') {
return { radius: [0, 0, 20, 20] };
}
if (type === '城市人口') {
return { radius: [20, 20, 0, 0] };
}
return {};
});
chart.render();
}
@ -409,7 +426,7 @@ export class DatatableDataindexComponent implements OnInit {
chart.data(data);
// 设置坐标轴
chart.scale({
y1: { alias: y1Title, min: 0, max: 1000000 },
y1: { alias: y1Title, min: 0, max: 2000000000 },
y2: { alias: y2Title, min: 0, max: 1, formatter: val => (val * 100).toFixed(0) + '%' },
y3: { alias: y3Title, min: 0, max: 1, formatter: val => (val * 100).toFixed(0) + '%' }
});
@ -420,8 +437,8 @@ export class DatatableDataindexComponent implements OnInit {
padding: [10, 0, 40, 0],
items: [
{ value: 'y1', name: y1Title, marker: { symbol: 'circle', style: { fill: '#E60012', r: 5, fontSize: 13 } } },
{ value: 'y3', name: y3Title, marker: { symbol: 'circle', style: { fill: '#6CBFFF', r: 5, fontSize: 13 } } },
{ value: 'y2', name: y2Title, marker: { symbol: 'circle', style: { fill: '#50D4AB', r: 5, fontSize: 13 } } }
{ value: 'y2', name: y2Title, marker: { symbol: 'circle', style: { fill: '#FE7823', r: 5, fontSize: 13 } } },
{ value: 'y3', name: y3Title, marker: { symbol: 'circle', style: { fill: '#F7CFCE', r: 5, fontSize: 13 } } }
]
});
chart.axis('y2', {
@ -440,16 +457,16 @@ export class DatatableDataindexComponent implements OnInit {
.line()
.position('x*y2')
// .label('pre', val => ({ content: (val * 100).toFixed(0) + '%' }))
.color('#6CBFFF')
.color('#F7CFCE')
.size(3);
chart.point().position('x*y2').color('#6CBFFF').size(3).shape('circle');
chart.point().position('x*y2').color('#F7CFCE').size(3).shape('circle');
chart
.line()
.position('x*y3')
// .label('pre2', val => ({ content: (val * 100).toFixed(0) + '%' }))
.color('#50D4AB')
.color('#FE7823')
.size(3);
chart.point().position('x*y3').color('#50D4AB').size(3).shape('circle');
chart.point().position('x*y3').color('#FE7823').size(3).shape('circle');
chart.interaction('active-region');
chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互

16
src/app/routes/ticket-management/components/invoiced-list/invoiced-list.component.ts
View File

@ -258,6 +258,22 @@ export class InvoicedListComponent implements OnInit {
expand: (value: boolean) => value
}
}
},
invoicetype: {
type: 'string',
title: '发票类型',
enum: [
{ value: '', label: '全部' },
{ value: '1', label: '运输专用发票' }
],
ui: {
widget: 'select',
placeholder: '请选择',
visibleIf: {
expand: (value: boolean) => value
}
},
default: ''
}
}
};

24
src/styles/compact.less
View File

@ -109,4 +109,28 @@ h2 {
padding: 12px 0px !important;
margin : 0 0 0 16px !important;
}
}
.mini_area_title {
margin-bottom: 0px !important;
.title {
font-size: 13px !important;
}
.subtitle {
font-size: 12px !important;
}
}
.g2-card__meta-wrap {
.g2-card__total {
font-size : 24px !important;
margin-top: 0 !important;
}
}
.g2-card__footer {
padding-top: 0;
}