import { DatePipe } from '@angular/common'; import { Component, ViewEncapsulation } from '@angular/core'; import { CompStarRatingComponent } from '../../componets/star-rating/comp-star-rating.component'; import { TokPipe } from '../../pipes/tok-pipe/tok.pipe'; @Component({ standalone: true, selector: 'app-factory-overview', styleUrls: ['./factory-overview.css'], templateUrl: './factory-overview.component.html', encapsulation: ViewEncapsulation.None, imports: [ DatePipe,TokPipe, CompStarRatingComponent ] }) export class FactoryOverviewComponent { // 在组件类中添加以下属性 // 设备状态数据 deviceStatus = { total: 24, normal: { count: 19, percentage: 80 }, warning: { count: 4, percentage: 15 }, danger: { count: 1, percentage: 5 } }; // 饼图角度计算 get pieChartStyle() { return { 'background': `conic-gradient( #27ae60 0% ${this.deviceStatus.normal.percentage}%, #f39c12 ${this.deviceStatus.normal.percentage}% ${this.deviceStatus.normal.percentage + this.deviceStatus.warning.percentage}%, #e74c3c ${this.deviceStatus.normal.percentage + this.deviceStatus.warning.percentage}% 100% )` }; } rating:number = 0 ratingChange(rating: number) { this.rating = rating; } currentTime: Date = new Date(); ngOnInit(): void { // 更新时间,每秒更新一次 setInterval(() => { this.currentTime = new Date(); }, 1000); } tok(value:number){ if(value<=1000){ return value } if(value<=999999){ return (value/1000).toFixed(0) + 'k' } if(value<=999999999){ return (value/10000).toFixed(0) + '万' } return value } }