parent
870745d337
commit
ee60233488
@ -0,0 +1,64 @@ |
|||||||
|
<!-- start 面包屑 --> |
||||||
|
<app-breadcrumb></app-breadcrumb> |
||||||
|
<!-- end 面包屑 --> |
||||||
|
|
||||||
|
<div class="inner-content"> |
||||||
|
<form nz-form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)"> |
||||||
|
<div nz-row> |
||||||
|
<div nz-col nzSpan="8"> |
||||||
|
<nz-form-item> |
||||||
|
<nz-form-label [nzSpan]="8">业务类型</nz-form-label> |
||||||
|
<nz-form-control [nzSpan]="14"> |
||||||
|
<nz-select ngModel="4" formControlName="couponSource" (ngModelChange)="getCouponSalesPrice()"> |
||||||
|
<nz-option *ngFor="let item of couponSourceArray" nzValue="{{item.codeValue}}" nzLabel="{{item.codeName}}"></nz-option> |
||||||
|
</nz-select> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="8"> |
||||||
|
<nz-form-item> |
||||||
|
<nz-form-label [nzSpan]="8">卡券销售面值</nz-form-label> |
||||||
|
<nz-form-control [nzSpan]="14"> |
||||||
|
<nz-select formControlName="salesPrice"> |
||||||
|
<nz-option nzValue="null" nzLabel="全部" ></nz-option> |
||||||
|
<nz-option *ngFor="let item of salesPriceArray" nzValue="{{item.codeValue}}" nzLabel="{{item.codeName}}" ></nz-option> |
||||||
|
</nz-select> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="8"> |
||||||
|
<nz-form-item> |
||||||
|
<nz-form-label [nzSpan]="8">状态</nz-form-label> |
||||||
|
<nz-form-control [nzSpan]="14"> |
||||||
|
<nz-select formControlName="status"> |
||||||
|
<nz-option nzValue="null" nzLabel="全部"></nz-option> |
||||||
|
<nz-option *ngFor="let item of statusArray" nzValue="{{item.codeValue}}" nzLabel="{{item.codeName}}"></nz-option> |
||||||
|
</nz-select> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="8"> |
||||||
|
<nz-form-item> |
||||||
|
<nz-form-label [nzSpan]="8">销售起止时间</nz-form-label> |
||||||
|
<nz-form-control [nzSpan]="14"> |
||||||
|
<nz-date-picker formControlName="salesTimeS" style="width: 100%;"></nz-date-picker> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="8"> |
||||||
|
<nz-form-item> |
||||||
|
<nz-form-label [nzSpan]="8">销售结束时间</nz-form-label> |
||||||
|
<nz-form-control [nzSpan]="14"> |
||||||
|
<nz-date-picker formControlName="salesTimeE" style="width: 100%;"></nz-date-picker> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="8"> |
||||||
|
<button nz-button nzType="primary"><i nz-icon nzType="search" nzTheme="outline"></i>筛选</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div class="inner-content"> |
||||||
|
<div echarts [options]="dataObject"></div> |
||||||
|
</div> |
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { CouponUseComponent } from './coupon-use.component'; |
||||||
|
|
||||||
|
describe('CouponUseComponent', () => { |
||||||
|
let component: CouponUseComponent; |
||||||
|
let fixture: ComponentFixture<CouponUseComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ CouponUseComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(CouponUseComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
@ -0,0 +1,167 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import {FormBuilder, FormGroup} from '@angular/forms'; |
||||||
|
import {CouponService} from '../../../services/coupon.service'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-coupon-use', |
||||||
|
templateUrl: './coupon-use.component.html', |
||||||
|
styleUrls: ['./coupon-use.component.scss'] |
||||||
|
}) |
||||||
|
export class CouponUseComponent implements OnInit { |
||||||
|
|
||||||
|
dataObject: {}; |
||||||
|
couponSourceArray = [ |
||||||
|
{ codeValue: 4, codeName: '贵州中石化'}, |
||||||
|
{ codeValue: 5, codeName: '重庆中石油'}, |
||||||
|
] |
||||||
|
statusArray = [ |
||||||
|
{ codeValue: 20, codeName: '未使用'}, |
||||||
|
{ codeValue: 40, codeName: '已使用'}, |
||||||
|
] |
||||||
|
salesPriceArray = []; |
||||||
|
searchForm: FormGroup; |
||||||
|
whereObject: any = {}; |
||||||
|
constructor(private form: FormBuilder, |
||||||
|
private couponService: CouponService) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
let salesTimeS = new Date(); |
||||||
|
salesTimeS.setDate(salesTimeS.getDate() - 7) |
||||||
|
salesTimeS.setHours(0); |
||||||
|
salesTimeS.setMinutes(0); |
||||||
|
salesTimeS.setSeconds(0); |
||||||
|
|
||||||
|
let salesTimeE = new Date(); |
||||||
|
salesTimeE.setHours(23); |
||||||
|
salesTimeE.setMinutes(59); |
||||||
|
salesTimeE.setSeconds(59); |
||||||
|
|
||||||
|
this.searchForm = this.form.group({ |
||||||
|
couponSource: [String(this.couponSourceArray[0].codeValue)], |
||||||
|
salesPrice: ['null'], |
||||||
|
status: ['null'], |
||||||
|
salesTimeS: [salesTimeS.getTime()], |
||||||
|
salesTimeE: [salesTimeE.getTime()], |
||||||
|
}); |
||||||
|
this.getCouponSalesPrice(); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
getData() { |
||||||
|
const param = this.searchForm.value; |
||||||
|
if (this.searchForm.controls['salesPrice'].value == 'null') { |
||||||
|
param['salesPrice'] = null; |
||||||
|
} |
||||||
|
if (this.searchForm.controls['status'].value == 'null') { |
||||||
|
param['status'] = null; |
||||||
|
} |
||||||
|
this.couponService.useCouponStatistics(param, response => { |
||||||
|
let returnData = response['return_data']; |
||||||
|
var dataArray = []; |
||||||
|
for (let obj of returnData['salesPriceList']) { |
||||||
|
dataArray.push({ |
||||||
|
value: obj['count'], |
||||||
|
name: obj['salesPrice'] + '【' + (obj['status']===20?'未使用':'已使用') + '】', |
||||||
|
}); |
||||||
|
} |
||||||
|
this.dataObject = { |
||||||
|
title: { |
||||||
|
text: this.couponSourceArray.find(o => o.codeValue == this.searchForm.controls['couponSource']['value']).codeName, |
||||||
|
left: 'center' |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item' |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
orient: 'vertical', |
||||||
|
left: 'left' |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '', |
||||||
|
type: 'pie', |
||||||
|
radius: '50%', |
||||||
|
data: dataArray, |
||||||
|
emphasis: { |
||||||
|
itemStyle: { |
||||||
|
shadowBlur: 10, |
||||||
|
shadowOffsetX: 0, |
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||||
|
} |
||||||
|
}, |
||||||
|
/*label: { |
||||||
|
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ', |
||||||
|
backgroundColor: '#F6F8FC', |
||||||
|
borderColor: '#8C8D8E', |
||||||
|
borderWidth: 1, |
||||||
|
borderRadius: 4, |
||||||
|
rich: { |
||||||
|
a: { |
||||||
|
color: '#6E7079', |
||||||
|
lineHeight: 22, |
||||||
|
align: 'center' |
||||||
|
}, |
||||||
|
hr: { |
||||||
|
borderColor: '#8C8D8E', |
||||||
|
width: '100%', |
||||||
|
borderWidth: 1, |
||||||
|
height: 0 |
||||||
|
}, |
||||||
|
b: { |
||||||
|
color: '#4C5058', |
||||||
|
fontSize: 14, |
||||||
|
fontWeight: 'bold', |
||||||
|
lineHeight: 33 |
||||||
|
}, |
||||||
|
per: { |
||||||
|
color: '#fff', |
||||||
|
backgroundColor: '#4C5058', |
||||||
|
padding: [3, 4], |
||||||
|
borderRadius: 4 |
||||||
|
} |
||||||
|
} |
||||||
|
},*/ |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* 搜索 |
||||||
|
* @param whereObject 条件 |
||||||
|
*/ |
||||||
|
search(whereObject: object) { |
||||||
|
if (this.searchForm.controls['salesTimeS'].value != null) { |
||||||
|
this.searchForm.controls['salesTimeS'].setValue(new Date(this.searchForm.controls['salesTimeS'].value).getTime()); |
||||||
|
} |
||||||
|
if (this.searchForm.controls['salesTimeE'].value != null) { |
||||||
|
this.searchForm.controls['salesTimeE'].setValue(new Date(this.searchForm.controls['salesTimeE'].value).getTime()); |
||||||
|
} |
||||||
|
this.getData(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 重置 |
||||||
|
*/ |
||||||
|
resetForm(): void { |
||||||
|
this.searchForm.reset(); |
||||||
|
this.searchForm.controls['couponSource'].setValue(String(this.couponSourceArray[0].codeValue)); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 查询卡券销售面值 |
||||||
|
*/ |
||||||
|
getCouponSalesPrice() { |
||||||
|
this.salesPriceArray = []; |
||||||
|
this.couponService.getCouponSalesPrice({couponSource : this.searchForm.controls['couponSource'].value}, data => { |
||||||
|
for (let obj of data['return_data']) { |
||||||
|
this.salesPriceArray.push({ codeValue: obj, codeName: obj}); |
||||||
|
} |
||||||
|
this.searchForm.controls['salesPrice'].setValue('null'); |
||||||
|
this.getData(); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,14 @@ |
|||||||
|
import { NgModule } from '@angular/core'; |
||||||
|
import { Routes, RouterModule } from '@angular/router'; |
||||||
|
import {CouponUseComponent} from './coupon-use/coupon-use.component'; |
||||||
|
|
||||||
|
|
||||||
|
const routes: Routes = [ |
||||||
|
{ path: 'coupon-use', component: CouponUseComponent} |
||||||
|
]; |
||||||
|
|
||||||
|
@NgModule({ |
||||||
|
imports: [RouterModule.forChild(routes)], |
||||||
|
exports: [RouterModule] |
||||||
|
}) |
||||||
|
export class StatisticsRoutingModule { } |
@ -0,0 +1,26 @@ |
|||||||
|
import { NgModule } from '@angular/core'; |
||||||
|
import { CommonModule } from '@angular/common'; |
||||||
|
|
||||||
|
import { StatisticsRoutingModule } from './statistics-routing.module'; |
||||||
|
import { CouponUseComponent } from './coupon-use/coupon-use.component'; |
||||||
|
import {NgZorroAntdModule} from 'ng-zorro-antd'; |
||||||
|
import {FormsModule, ReactiveFormsModule} from '@angular/forms'; |
||||||
|
import {BreadcrumbModule} from '../../common/breadcrumb/breadcrumb.module'; |
||||||
|
import {AppCommonModule} from '../../app-common.module'; |
||||||
|
import {NgxEchartsModule} from 'ngx-echarts'; |
||||||
|
|
||||||
|
|
||||||
|
@NgModule({ |
||||||
|
declarations: [CouponUseComponent], |
||||||
|
imports: [ |
||||||
|
CommonModule, |
||||||
|
StatisticsRoutingModule, |
||||||
|
NgZorroAntdModule, |
||||||
|
ReactiveFormsModule, |
||||||
|
FormsModule, |
||||||
|
BreadcrumbModule, |
||||||
|
AppCommonModule, |
||||||
|
NgxEchartsModule, |
||||||
|
] |
||||||
|
}) |
||||||
|
export class StatisticsModule { } |
Loading…
Reference in new issue