| | |
| | | totalDeviceCount = 0; |
| | | avgDeviceCount: string; |
| | | |
| | | notice: any[] = []; |
| | | activities: any[] = []; |
| | | radarData: any[] = []; |
| | | loading = true; |
| | | |
| | | // region: mock data |
| | | links = [ |
| | | { |
| | | title: '操作一', |
| | | href: '', |
| | | }, |
| | | { |
| | | title: '操作二', |
| | | href: '', |
| | | }, |
| | | { |
| | | title: '操作三', |
| | | href: '', |
| | | }, |
| | | { |
| | | title: '操作四', |
| | | href: '', |
| | | }, |
| | | { |
| | | title: '操作五', |
| | | href: '', |
| | | }, |
| | | { |
| | | title: '操作六', |
| | | href: '', |
| | | }, |
| | | ]; |
| | | members = [ |
| | | { |
| | | id: 'members-1', |
| | | title: '科学搬砖组', |
| | | title: '七星官网', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', |
| | | link: '', |
| | | }, |
| | | { |
| | | id: 'members-2', |
| | | title: '程序员日常', |
| | | title: '七星商城', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', |
| | | link: '', |
| | | }, |
| | | { |
| | | id: 'members-3', |
| | | title: '设计天团', |
| | | title: '外链三', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', |
| | | link: '', |
| | | }, |
| | | { |
| | | id: 'members-4', |
| | | title: '中二少女团', |
| | | title: '外链四', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', |
| | | link: '', |
| | | }, |
| | | { |
| | | id: 'members-5', |
| | | title: '骗你学计算机', |
| | | logo: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', |
| | | link: '', |
| | | }, |
| | | } |
| | | ]; |
| | | // endregion |
| | | |
| | | ngOnDestroy(): void { |
| | | } |
| | | |
| | | |
| | | data: any = { |
| | | salesData: [], |
| | | offlineData: [] |
| | | }; |
| | | data: any = {}; |
| | | |
| | | q: any = { |
| | | start: null, |
| | | end: null |
| | | }; |
| | | rankingListData: any[] = Array(7).fill({}).map((item, i) => { |
| | | return { |
| | | title: `工专路 ${i} 号店`, |
| | | total: 323234 |
| | | }; |
| | | }); |
| | | |
| | | constructor(private http: _HttpClient, public msg: NzMessageService, |
| | | private http2: HttpClient) {} |
| | | rankingListData: any[] = [ |
| | | {title: `PM 2.5`, total: 230}, |
| | | {title: `PM 10`, total: 175}, |
| | | {title: `二氧化硫`, total: 123}, |
| | | {title: `二氧化氮`, total: 92}, |
| | | {title: `甲醛`, total: 39}, |
| | | {title: `氯气`, total: 24}, |
| | | {title: `一氧化碳`, total: 8} |
| | | ]; |
| | | |
| | | constructor( |
| | | private http: _HttpClient, |
| | | public msg: NzMessageService, |
| | | private http2: HttpClient) { |
| | | } |
| | | |
| | | ngOnInit() { |
| | | |
| | | 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.avgDeviceCount = (this.totalDeviceCount/12).toFixed(0); |
| | | |
| | | const alarmData = []; |
| | | const alarmData_1 = []; |
| | | const alarmData_2 = []; |
| | | const alarmData_3 = []; |
| | | for (let i = 0; i < 12; i += 1) { |
| | | alarmData.push({ x: `${i + 1}月`, y: Math.floor(Math.random() * 1000) + 500 }); |
| | | alarmData_1.push({ x: `${i + 1}月`, y: Math.floor(Math.random() * 1000) + 100 }); |
| | | alarmData_2.push({ x: `${i + 1}月`, y: Math.floor(Math.random() * 1000) + 200 }); |
| | | alarmData_3.push({ x: `${i + 1}月`, y: Math.floor(Math.random() * 1000) + 300 }); |
| | | } |
| | | |
| | | const alertData = []; |
| | | const alertData_1 = []; |
| | | const alertData_2 = []; |
| | | const alertData_3 = []; |
| | | for (let i = 0; i < 7; i += 1) { |
| | | alertData.push({ x: this.rankingListData[i].title, y: Math.floor(Math.random() * 1000) + 500 }); |
| | | alertData_1.push({ x: this.rankingListData[i].title, y: Math.floor(Math.random() * 1000) + 100 }); |
| | | alertData_2.push({ x: this.rankingListData[i].title, y: Math.floor(Math.random() * 1000) + 200 }); |
| | | alertData_3.push({ x: this.rankingListData[i].title, y: Math.floor(Math.random() * 1000) + 300 }); |
| | | } |
| | | |
| | | const visitData = []; |
| | | const beginDay = new Date().getTime(); |
| | |
| | | "YYYY-MM-DD" |
| | | ), |
| | | y: fakeY2[i] |
| | | }); |
| | | } |
| | | const salesData = []; |
| | | for (let i = 0; i < 12; i += 1) { |
| | | salesData.push({ |
| | | x: `${i + 1}月`, |
| | | y: Math.floor(Math.random() * 1000) + 200 |
| | | }); |
| | | } |
| | | |
| | | const salesTypeData = [ |
| | | { |
| | | x: "家用电器", |
| | | y: 4544 |
| | | }, |
| | | { |
| | | x: "食用酒水", |
| | | y: 3321 |
| | | }, |
| | | { |
| | | x: "个护健康", |
| | | y: 3113 |
| | | }, |
| | | { |
| | | x: "服饰箱包", |
| | | y: 2341 |
| | | }, |
| | | { |
| | | x: "母婴产品", |
| | | y: 1231 |
| | | }, |
| | | { |
| | | x: "其他", |
| | | y: 1231 |
| | | } |
| | | ]; |
| | | |
| | | const salesTypeDataOnline = [ |
| | | { |
| | | x: "家用电器", |
| | | y: 244 |
| | | }, |
| | | { |
| | | x: "食用酒水", |
| | | y: 321 |
| | | }, |
| | | { |
| | | x: "个护健康", |
| | | y: 311 |
| | | }, |
| | | { |
| | | x: "服饰箱包", |
| | | y: 41 |
| | | }, |
| | | { |
| | | x: "母婴产品", |
| | | y: 121 |
| | | }, |
| | | { |
| | | x: '其他', |
| | | y: 111 |
| | | } |
| | | ]; |
| | | |
| | | const salesTypeDataOffline = [ |
| | | { |
| | | x: '家用电器', |
| | | y: 99 |
| | | }, |
| | | { |
| | | x: '个护健康', |
| | | y: 188 |
| | | }, |
| | | { |
| | | x: '服饰箱包', |
| | | y: 344 |
| | | }, |
| | | { |
| | | x: '母婴产品', |
| | | y: 255 |
| | | }, |
| | | { |
| | | x: '其他', |
| | | y: 65 |
| | | } |
| | | ]; |
| | | |
| | | const offlineData = []; |
| | | for (let i = 0; i < 10; i += 1) { |
| | | offlineData.push({ |
| | | name: `门店${i}`, |
| | | cvr: Math.ceil(Math.random() * 9) / 10 |
| | | }); |
| | | } |
| | | const offlineChartData = []; |
| | | for (let i = 0; i < 20; i += 1) { |
| | | offlineChartData.push({ |
| | | x: new Date().getTime() + 1000 * 60 * 30 * i, |
| | | y1: Math.floor(Math.random() * 100) + 10, |
| | | y2: Math.floor(Math.random() * 100) + 10 |
| | | }); |
| | | } |
| | | |
| | |
| | | }); |
| | | } |
| | | var res = { |
| | | alarmData: alarmData, |
| | | alarmData_1: alarmData_1, |
| | | alarmData_2: alarmData_2, |
| | | alarmData_3: alarmData_3, |
| | | |
| | | alertData: alertData, |
| | | alertData_1: alertData_1, |
| | | alertData_2: alertData_2, |
| | | alertData_3: alertData_3, |
| | | |
| | | visitData: visitData, |
| | | salesData: salesData, |
| | | visitData2: visitData2, |
| | | salesTypeData: salesTypeData, |
| | | salesTypeDataOnline: salesTypeDataOnline, |
| | | salesTypeDataOffline: salesTypeDataOffline, |
| | | offlineData: offlineData, |
| | | offlineChartData: offlineChartData, |
| | | |
| | | radarOriginData: radarOriginData, |
| | | radarData: radarData, |
| | | searchData: searchData |
| | | }; |
| | | |
| | | res.offlineData.forEach((item: any) => { |
| | | item.chart = Object.assign([], res.offlineChartData); |
| | | }); |
| | | this.data = res; |
| | | this.loading = false; |
| | | this.changeSaleType(); |
| | | |
| | | this.radarData = res.radarData; |
| | | |
| | | const titles = [ |
| | | 'Alipay', |
| | | 'Angular', |
| | | 'Ant Design', |
| | | 'Ant Design Pro', |
| | | 'Bootstrap', |
| | | 'React', |
| | | 'Vue', |
| | | 'Webpack' |
| | | ]; |
| | | |
| | | const avatars = [ |
| | | 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay |
| | |
| | | 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue |
| | | 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png' // Webpack |
| | | ]; |
| | | |
| | | var notice = [ |
| | | { |
| | | id: 'xxx1', |
| | | title: titles[0], |
| | | logo: avatars[0], |
| | | description: '那是一种内在的东西, 他们到达不了,也无法触及的', |
| | | updatedAt: new Date(), |
| | | member: '科学搬砖组', |
| | | href: '', |
| | | memberLink: '', |
| | | }, |
| | | { |
| | | id: 'xxx2', |
| | | title: titles[1], |
| | | logo: avatars[1], |
| | | description: '希望是一个好东西,也许是最好的,好东西是不会消亡的', |
| | | updatedAt: new Date('2017-07-24'), |
| | | member: '全组都是吴彦祖', |
| | | href: '', |
| | | memberLink: '', |
| | | }, |
| | | { |
| | | id: 'xxx3', |
| | | title: titles[2], |
| | | logo: avatars[2], |
| | | description: '城镇中有那么多的酒馆,她却偏偏走进了我的酒馆', |
| | | updatedAt: new Date(), |
| | | member: '中二少女团', |
| | | href: '', |
| | | memberLink: '', |
| | | }, |
| | | { |
| | | id: 'xxx4', |
| | | title: titles[3], |
| | | logo: avatars[3], |
| | | description: '那时候我只会想自己想要什么,从不想自己拥有什么', |
| | | updatedAt: new Date('2017-07-23'), |
| | | member: '程序员日常', |
| | | href: '', |
| | | memberLink: '', |
| | | }, |
| | | { |
| | | id: 'xxx5', |
| | | title: titles[4], |
| | | logo: avatars[4], |
| | | description: '凛冬将至', |
| | | updatedAt: new Date('2017-07-23'), |
| | | member: '高逼格设计天团', |
| | | href: '', |
| | | memberLink: '', |
| | | }, |
| | | { |
| | | id: 'xxx6', |
| | | title: titles[5], |
| | | logo: avatars[5], |
| | | description: '生命就像一盒巧克力,结果往往出人意料', |
| | | updatedAt: new Date('2017-07-23'), |
| | | member: '骗你来学计算机', |
| | | href: '', |
| | | memberLink: '', |
| | | }, |
| | | ]; |
| | | this.notice = notice; |
| | | |
| | | var activities = [ |
| | | { |
| | |
| | | }, |
| | | 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) => { |
| | |
| | | }); |
| | | return item; |
| | | }); |
| | | |
| | | |
| | | |
| | | } |
| | | |
| | | setDate(type: any) { |
| | | const rank = getTimeDistance(type); |
| | | this.q.start = rank[0]; |
| | | this.q.end = rank[1]; |
| | | ngOnDestroy(): void { |
| | | } |
| | | |
| | | sort(sortName, sortValue) { |
| | |
| | | ]; |
| | | } |
| | | |
| | | salesType = 'all'; |
| | | salesType = '0'; |
| | | salesPieData: any; |
| | | salesTotal = 0; |
| | | changeSaleType() { |
| | | this.salesPieData = this.salesType === 'all' ? this.data.salesTypeData : ( |
| | | this.salesType === 'online' ? this.data.salesTypeDataOnline : this.data.salesTypeDataOffline |
| | | ); |
| | | if(this.salesType == '0') { |
| | | this.salesPieData = this.data.alertData; |
| | | } else if(this.salesType == '1') { |
| | | this.salesPieData = this.data.alertData_1; |
| | | } else if(this.salesType == '2') { |
| | | this.salesPieData = this.data.alertData_2; |
| | | } else if(this.salesType == '3') { |
| | | this.salesPieData = this.data.alertData_3; |
| | | } |
| | | if (this.salesPieData) this.salesTotal = this.salesPieData.reduce((pre, now) => now.y + pre, 0); |
| | | } |
| | | |
| | | handlePieValueFormat(value: any) { |
| | | return yuan(value); |
| | | } |
| | | |
| | | _activeTab = 0; |
| | | _tabChange(value: any) { |
| | | console.log('tab', this._activeTab, value); |
| | | return value + "次"; |
| | | } |
| | | } |