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

fix bug

Browse Source
This commit is contained in:
Lingzi
2022-03-29 18:41:51 +08:00
parent ca0cc0f24c
commit 6bbbc68ff7
25 changed files with 742 additions and 591 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/app/routes/datatable/components/operationtable/curve/curve.component.html
View File

@ -1,69 +1 @@
<!-- 页头 -->
<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'客户预存款总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
<ng-template #footer>
<g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'业绩量总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
<ng-template #footer>
<g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'司机应付总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
<ng-template #footer>
<g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'附加费总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
<ng-template #footer>
<g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
</g2-card>
</div>
</div>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="12">
<nz-card [nzTitle]="'订单类型比例'">
<g2-custom delay="100" (render)="render($event)"></g2-custom>
</nz-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="12">
<nz-card [nzTitle]="'大区业绩完成情况'">
<g2-timeline
[data]="chartData"
[titleMap]="{ y1: '客流量', y2: '支付笔数' }"
[height]="200"
mask="MM月DD日"
[slider]="false"
></g2-timeline>
</nz-card>
</div>
</div>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="12">
<nz-card [nzTitle]="'运单直付比例'">
<g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294"
(clickItem)="handleClick($event)" [lineWidth]="10">
</g2-pie>
</nz-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="12">
<nz-card [nzTitle]="'业绩完成情况'">
<g2-bar height="200" [title]="'销售额趋势'" [data]="salesData" (clickItem)="handleClick($event)"></g2-bar>
</nz-card>
</div>
</div>
<g2-custom delay="100" (render)="render($event)"></g2-custom>

296
src/app/routes/datatable/components/operationtable/curve/curve.component.ts
View File

@ -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 = `&yen ${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 `&yen ${val.toFixed(2)}`;
}
render(el: ElementRef<HTMLDivElement>): 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: 213 },
{ 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;
}
}
}

1
src/app/routes/datatable/components/operationtable/operationtable.component.html
View File

@ -40,6 +40,7 @@
</div>
</div>
</ng-template>
<app-datatable-curve></app-datatable-curve>
</nz-card>
<nz-card nzTitle="运单状态分布">
<app-opeationtable-pie></app-opeationtable-pie>

5
src/app/routes/datatable/components/operationtable/operationtable.component.ts
View File

@ -11,7 +11,8 @@ 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;
@ -19,7 +20,7 @@ export class DatatableOperationtableComponent implements OnInit {;
time: any = ['2022-01-01 00:00:00']
dateFormat = 'yyyy-MM-dd';
today = new Date();
@ViewChild('st') private readonly st!: STComponent;
columns: STColumn[] = [
{ title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
{ title: '订单数', index: 'zsl', className: 'text-center' },

4
src/app/routes/datatable/components/operationtable/pie/pie.component.html
View File

@ -1 +1,3 @@
<g2-custom delay="100" (render)="render($event)"></g2-custom>
<div class="box">
<g2-custom delay="100" (render)="render($event)"></g2-custom>
</div>

5
src/app/routes/datatable/components/operationtable/pie/pie.component.less
View File

@ -0,0 +1,5 @@
.box{
width: 50%;
overflow: hidden;
margin:0 auto;
}

129
src/app/routes/datatable/components/operationtable/pie/pie.component.ts
View File

@ -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 = `&yen ${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 `&yen ${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<HTMLDivElement>): 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;