import { environment } from '../../../../environments/environment';
|
import { zip } from 'rxjs/observable/zip';
|
import { Component, OnInit, OnDestroy } from '@angular/core';
|
import { NzMessageService } from 'ng-zorro-antd';
|
import { getTimeDistance, yuan, fixedZero } from '@delon/abc';
|
import { _HttpClient } from '@delon/theme';
|
import { HttpClient } from '@angular/common/http';
|
import * as moment from 'moment';
|
import { DeviceService } from '@business/services/http/device.service';
|
import { ExampleService } from '@business/services/util/example.service';
|
import { ResultBean } from '@business/entity/grid';
|
import { TimeUnits } from '@business/enum/types.enum';
|
import { ToolsService } from '@business/services/util/tools.service';
|
|
@Component({
|
selector: 'app-dashboard-workplace',
|
templateUrl: './workplace.component.html',
|
styleUrls: ['./workplace.component.less'],
|
providers: [DeviceService]
|
})
|
export class DashboardWorkplaceComponent implements OnInit, OnDestroy {
|
|
totalDeviceCountList: any[] = [];
|
totalDeviceCount = '';
|
avgDeviceCount = '';
|
deviceCountLoading = true;
|
// 报警统计
|
alarmCountList:{x: string,y: number}[] = null;
|
alarmCountCurrMonth = '';
|
alarmCountCurrDay = '';// 单月报警次数
|
alarmCountLoading = true;
|
operationLoading = true;
|
operNormalPercent = 0;
|
activities: any[] = [];
|
radarData: any[] = [];
|
loading = true;
|
public alarmData: any = {};
|
public alertData = [[], [], [], []];
|
salesType = '0';
|
salesTotal = 0;
|
salesPieData: any;
|
members = [
|
{
|
id: 'members-1',
|
title: '七星官网',
|
logo: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
link: '',
|
},
|
{
|
id: 'members-2',
|
title: '七星商城',
|
logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
|
link: '',
|
},
|
{
|
id: 'members-3',
|
title: '外链三',
|
logo: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
|
link: '',
|
},
|
{
|
id: 'members-4',
|
title: '外链四',
|
logo: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
|
link: '',
|
}
|
];
|
|
data: any = {};
|
|
q: any = {
|
start: null,
|
end: null
|
};
|
|
rankingListData: any[] = [];
|
|
constructor(
|
private deviceService: DeviceService,
|
private http: _HttpClient,
|
public msg: NzMessageService,
|
private http2: HttpClient) {
|
}
|
|
selectedIndexChange(index) {
|
this.rankingListData = [];
|
if (!this.alarmData['_' + index]) {
|
this.http2.get(environment.SERVER_BASH_URL + 'report/alarm-year', { params: { state: index > 0 ? index : null } }).subscribe((res: any) => {
|
const data = [];
|
for (let i = 0; i < res.data.length; i += 1) {
|
data.push({ x: `${i + 1}月`, y: !!res.data[i] ? res.data[i] : 0 });
|
}
|
this.alarmData['_' + index] = data;
|
});
|
}
|
if (this.alertData[index].length > 0) {
|
this.alertData[index].forEach(item => {
|
this.rankingListData.push(
|
{
|
title: item.x,
|
total: item.y
|
}
|
);
|
});
|
} else {
|
this.http2.get(environment.SERVER_BASH_URL + 'report/alarm-month', { params: { state: index > 0 ? index : null } }).subscribe((res: any) => {
|
const data = [];
|
for (let i = 0; i < res.data.length; i += 1) {
|
for (const key in res.data[i]) {
|
data.push({ x: key, y: res.data[i][key] });
|
this.rankingListData.push(
|
{
|
title: key,
|
total: res.data[i][key]
|
}
|
);
|
}
|
}
|
this.alertData[index] = data;
|
});
|
}
|
}
|
|
changeSaleType() {
|
if (this.alertData[this.salesType].length > 0) {
|
this.salesPieData = this.alertData[this.salesType];
|
this.salesTotal = this.salesPieData.reduce((pre, now) => now.y + pre, 0);
|
} else {
|
this.http2.get(environment.SERVER_BASH_URL + 'report/alarm-month', { params: { state: this.salesType === '0' ? null : this.salesType } }).subscribe((res: any) => {
|
const data = [];
|
for (let i = 0; i < res.data.length; i += 1) {
|
for (const key in res.data[i]) {
|
data.push({ x: key, y: res.data[i][key] });
|
}
|
}
|
this.salesPieData = this.alertData[this.salesType] = data;
|
this.salesTotal = this.salesPieData.reduce((pre, now) => now.y + pre, 0);
|
});
|
}
|
}
|
|
ngOnInit() {
|
this.selectedIndexChange(0);
|
this.changeSaleType();
|
|
// const today = new Date().getTime();
|
// const fakeDC = [60, 135, 70, 112, 80, 170, 200, 140, 52, 119, 164, 230];
|
// for (let i = 0; i < 12; i += 1) {
|
// this.totalDeviceCountList.push({
|
// x: moment(today).subtract(-1 * i, 'months').format(
|
// "YYYY-MM"
|
// ),
|
// y: fakeDC[i]
|
// });
|
// this.totalDeviceCount += fakeDC[i];
|
// }
|
let example1 = new ExampleService();
|
let mo = moment();
|
example1.or().andGreaterThanOrEqualTo({ name: "createTime", value: mo.format('YYYY-MM-01 00:00:00') });
|
let example2 = new ExampleService();
|
let example3 = new ExampleService();
|
example3.or().andNotEqualTo({name:'state',value:4});
|
zip(this.deviceService.countByExample(example1),
|
this.deviceService.countByExample(example2),
|
this.http.get<ResultBean<{time: string,count: number}[]>>('device/count-by-times',{start:mo.format('YYYY-01-01 00:00:00'),end:mo.format('YYYY-12-31 23:59:59')}),
|
this.deviceService.countByExample(example3)).subscribe(
|
([rWtihAvg, rWithToltal,rWithList,rWithNormal]) => {
|
if (!!rWtihAvg.code && !!rWithToltal&&!!rWithList.code) {
|
this.avgDeviceCount = ToolsService.toThousands(rWtihAvg.data.toString());
|
this.totalDeviceCount = ToolsService.toThousands(rWithToltal.data.toString());
|
rWithList.data.forEach( item =>{
|
this.totalDeviceCountList.push(
|
{
|
x:item.time,
|
y:item.count
|
}
|
);
|
});
|
this.operNormalPercent = Math.round(rWithNormal.data/rWithToltal.data*100);
|
this.deviceCountLoading = false;
|
this.operationLoading = false;
|
}
|
}
|
);
|
zip(
|
this.http.get<ResultBean<{time: string,count: number}[]>>("alarm/count-by-times",{start: mo.format('YYYY-MM-01 00:00:00'),end: null,timeUnits: TimeUnits.DAY}),
|
this.http.get<ResultBean<{time: string,count: number}[]>>("alarm/count-by-times",{start: mo.format('YYYY-MM-01 00:00:00'),end: null}),
|
this.http.get<ResultBean<{time: string,count: number}[]>>("alarm/count-by-times",{start: mo.format('YYYY-MM-DD 00:00:00'),end: null})
|
).subscribe(
|
([rWithList,rWithMonth,rWithDay]) => {
|
if(!!rWithList.code&&!!rWithMonth.code&&!!rWithDay.code){
|
this.alarmCountList = rWithList.data.map(
|
item => {
|
return {x:item.time,y:item.count};
|
}
|
);
|
if(!!rWithMonth.data&&rWithMonth.data.length>0){
|
this.alarmCountCurrMonth = ToolsService.toThousands(rWithMonth.data[0].count.toString());
|
}
|
if(!!rWithDay.data&&rWithDay.data.length>0) {
|
this.alarmCountCurrDay = ToolsService.toThousands(rWithDay.data[0].count.toString());
|
}
|
this.alarmCountLoading = false;
|
}
|
}
|
);
|
// this.avgDeviceCount = (this.totalDeviceCount / 12).toFixed(0);
|
|
|
const visitData = [];
|
const beginDay = new Date().getTime();
|
|
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
|
for (let i = 0; i < fakeY.length; i += 1) {
|
visitData.push({
|
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format(
|
'YYYY-MM-DD'
|
),
|
y: fakeY[i]
|
});
|
}
|
const visitData2 = [];
|
const fakeY2 = [1, 6, 4, 8, 3, 7, 2];
|
for (let i = 0; i < fakeY2.length; i += 1) {
|
visitData2.push({
|
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format(
|
'YYYY-MM-DD'
|
),
|
y: fakeY2[i]
|
});
|
}
|
|
const radarOriginData = [
|
{
|
name: '个人',
|
ref: 10,
|
koubei: 8,
|
output: 4,
|
contribute: 5,
|
hot: 7
|
},
|
{
|
name: '团队',
|
ref: 3,
|
koubei: 9,
|
output: 6,
|
contribute: 3,
|
hot: 1
|
},
|
{
|
name: '部门',
|
ref: 4,
|
koubei: 1,
|
output: 6,
|
contribute: 5,
|
hot: 7
|
}
|
];
|
|
const radarData = [];
|
const radarTitleMap = {
|
ref: '引用',
|
koubei: '口碑',
|
output: '产量',
|
contribute: '贡献',
|
hot: '热度'
|
};
|
radarOriginData.forEach(item => {
|
Object.keys(item).forEach(key => {
|
if (key !== 'name') {
|
radarData.push({
|
name: item.name,
|
label: radarTitleMap[key],
|
value: item[key]
|
});
|
}
|
});
|
});
|
const searchData = [];
|
for (let i = 0; i < 50; i += 1) {
|
searchData.push({
|
index: i + 1,
|
keyword: `搜索关键词-${i}`,
|
count: Math.floor(Math.random() * 1000),
|
range: Math.floor(Math.random() * 100),
|
status: Math.floor((Math.random() * 10) % 2)
|
});
|
}
|
const res = {
|
|
visitData: visitData,
|
visitData2: visitData2,
|
|
radarOriginData: radarOriginData,
|
radarData: radarData,
|
searchData: searchData
|
};
|
|
this.data = res;
|
this.loading = false;
|
|
this.radarData = res.radarData;
|
|
|
const avatars = [
|
'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
|
'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
|
'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
|
'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
|
'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
|
'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
|
'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
|
'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png' // Webpack
|
];
|
|
const activities = [
|
{
|
id: 'trend-1',
|
updatedAt: new Date(),
|
user: {
|
name: '林东东',
|
avatar: avatars[0],
|
},
|
group: {
|
name: '高逼格设计天团',
|
link: 'http://github.com/',
|
},
|
project: {
|
name: '六月迭代',
|
link: 'http://github.com/',
|
},
|
template: '在 @{group} 新建项目 @{project}',
|
},
|
{
|
id: 'trend-2',
|
updatedAt: new Date(),
|
user: {
|
name: '付小小',
|
avatar: avatars[1],
|
},
|
group: {
|
name: '高逼格设计天团',
|
link: 'http://github.com/',
|
},
|
project: {
|
name: '六月迭代',
|
link: 'http://github.com/',
|
},
|
template: '在 @{group} 新建项目 @{project}',
|
},
|
{
|
id: 'trend-3',
|
updatedAt: new Date(),
|
user: {
|
name: '曲丽丽',
|
avatar: avatars[2],
|
},
|
group: {
|
name: '中二少女团',
|
link: 'http://github.com/',
|
},
|
project: {
|
name: '六月迭代',
|
link: 'http://github.com/',
|
},
|
template: '在 @{group} 新建项目 @{project}',
|
},
|
{
|
id: 'trend-4',
|
updatedAt: new Date(),
|
user: {
|
name: '周星星',
|
avatar: avatars[3],
|
},
|
project: {
|
name: '5 月日常迭代',
|
link: 'http://github.com/',
|
},
|
template: '将 @{project} 更新至已发布状态',
|
},
|
{
|
id: 'trend-5',
|
updatedAt: new Date(),
|
user: {
|
name: '朱偏右',
|
avatar: avatars[4],
|
},
|
project: {
|
name: '工程效能',
|
link: 'http://github.com/',
|
},
|
comment: {
|
name: '留言',
|
link: 'http://github.com/',
|
},
|
template: '在 @{project} 发布了 @{comment}',
|
},
|
{
|
id: 'trend-6',
|
updatedAt: new Date(),
|
user: {
|
name: '乐哥',
|
avatar: avatars[5],
|
},
|
group: {
|
name: '程序员日常',
|
link: 'http://github.com/',
|
},
|
project: {
|
name: '品牌迭代',
|
link: 'http://github.com/',
|
},
|
template: '在 @{group} 新建项目 @{project}',
|
},
|
{
|
id: 'trend-7',
|
updatedAt: new Date(),
|
user: {
|
name: '周星星',
|
avatar: avatars[3],
|
},
|
project: {
|
name: '程序员日常',
|
link: 'http://github.com/',
|
},
|
template: '将 @{project} 更新至上线状态',
|
}
|
];
|
this.activities = activities.map((item: any) => {
|
item.template = item.template.split(/@\{([^{}]*)\}/gi).map((key: string) => {
|
if (item[key]) return `<a>${item[key].name}</a>`;
|
return key;
|
});
|
return item;
|
});
|
}
|
|
ngOnDestroy(): void {
|
}
|
|
sort(sortName, sortValue) {
|
this.data.searchData = [
|
...(<any[]>this.data.searchData).sort((a, b) => {
|
if (a[sortName] > b[sortName]) {
|
return (sortValue === 'ascend') ? 1 : -1;
|
} else if (a[sortName] < b[sortName]) {
|
return (sortValue === 'ascend') ? -1 : 1;
|
} else {
|
return 0;
|
}
|
})
|
];
|
}
|
|
handlePieValueFormat(value: any) {
|
return value + '次';
|
}
|
}
|
