src/app/analysis/crowd/crowd.component.ts
| selector | app-crowd |
| styleUrls | ./crowd.component.scss |
| templateUrl | ./crowd.component.html |
Properties |
Methods |
constructor(_service)
|
||||
|
Defined in src/app/analysis/crowd/crowd.component.ts:12
|
||||
|
Parameters :
|
| actvieDatas |
actvieDatas()
|
|
Defined in src/app/analysis/crowd/crowd.component.ts:29
|
|
Returns :
void
|
| age |
age()
|
|
Defined in src/app/analysis/crowd/crowd.component.ts:56
|
|
Returns :
void
|
| consumer |
consumer()
|
|
Defined in src/app/analysis/crowd/crowd.component.ts:69
|
|
Returns :
void
|
| getCrowdOverview |
getCrowdOverview()
|
|
Defined in src/app/analysis/crowd/crowd.component.ts:20
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/analysis/crowd/crowd.component.ts:16
|
|
Returns :
void
|
| operators |
operators()
|
|
Defined in src/app/analysis/crowd/crowd.component.ts:43
|
|
Returns :
void
|
| ageData |
Type : any
|
Default value : []
|
|
Defined in src/app/analysis/crowd/crowd.component.ts:10
|
| consumerData |
Type : any
|
Default value : []
|
|
Defined in src/app/analysis/crowd/crowd.component.ts:11
|
| operatorData |
Type : any
|
Default value : []
|
|
Defined in src/app/analysis/crowd/crowd.component.ts:12
|
| permeability |
Type : any
|
Default value : []
|
|
Defined in src/app/analysis/crowd/crowd.component.ts:9
|
import { Component, Inject, OnInit } from '@angular/core';
@Component({
selector: 'app-crowd',
templateUrl: './crowd.component.html',
styleUrls: ['./crowd.component.scss']
})
export class CrowdComponent implements OnInit {
permeability: any = [];
ageData: any = [];
consumerData: any = [];
operatorData: any = [];
constructor(@Inject('AnalysisService') private _service) {}
ngOnInit() {
this.getCrowdOverview();
}
getCrowdOverview() {
this._service.getCrowdOverview();
this.actvieDatas();
this.age();
this.consumer();
this.operators();
}
// 渗透
actvieDatas() {
this._service.crowdOverview$.subscribe(res => {
if (res.datas) {
console.log(res.datas);
res.datas.actvieDatas.map(item => {
this.permeability.push({
name: item.appName,
value: (item.crowdRate * 100).toFixed(2)
});
});
}
});
}
operators() {
this._service.crowdOverview$.subscribe(res => {
if (res.datas) {
res.datas.operators.map(item => {
this.operatorData.push({
name: item.attrName,
value: (item.attrValue * 100).toFixed(2)
});
});
}
});
}
age() {
this._service.crowdOverview$.subscribe(res => {
if (res.datas) {
res.datas.age.map(item => {
this.ageData.push({
name: item.attrName,
value: (item.attrValue * 100).toFixed(2)
});
});
}
});
}
consumer() {
this._service.crowdOverview$.subscribe(res => {
if (res.datas) {
res.datas.consumer.map(item => {
this.consumerData.push({
name: item.attrName,
value: (item.attrValue * 100).toFixed(2)
});
});
}
});
}
}
<div fxLayout="row wrap">
<analysis-crowd-permeability [data]="permeability" fxFlex></analysis-crowd-permeability>
</div>
<div fxLayout="row wrap">
<div fxFlex.gt-sm="50">
<analysis-crowd-age [data]="ageData"></analysis-crowd-age>
</div>
<div fxFlex.gt-sm="50">
<analysis-crowd-consumer [data]="consumerData"></analysis-crowd-consumer>
</div>
</div>
<div fxLayout="row wrap">
<div fxFlex.gt-sm="50">
<analysis-crowd-operators [data]="operatorData"></analysis-crowd-operators>
</div>
<div fxFlex.gt-sm="50">
<analysis-crowd-brand></analysis-crowd-brand>
</div>
</div>
<div fxLayout="row wrap">
<div fxFlex.gt-sm="50">
<analysis-crowd-gender></analysis-crowd-gender>
</div>
<div fxFlex.gt-sm="50">
<analysis-crowd-region></analysis-crowd-region>
</div>
</div>
./crowd.component.scss
:host {
display: block;
margin: 5px;
}
mat-card {
margin: 5px;
padding: 0;
}
mat-card-title {
padding: 16px 24px;
}
mat-card-content {
min-height: 400px;
}