factory-overview.component.ts 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import { DatePipe } from '@angular/common';
  2. import { Component, ViewEncapsulation } from '@angular/core';
  3. import { CompStarRatingComponent } from '../../componets/star-rating/comp-star-rating.component';
  4. import { TokPipe } from '../../pipes/tok-pipe/tok.pipe';
  5. @Component({
  6. standalone: true,
  7. selector: 'app-factory-overview',
  8. styleUrls: ['./factory-overview.css'],
  9. templateUrl: './factory-overview.component.html',
  10. encapsulation: ViewEncapsulation.None,
  11. imports: [
  12. DatePipe,TokPipe,
  13. CompStarRatingComponent
  14. ]
  15. })
  16. export class FactoryOverviewComponent {
  17. // 在组件类中添加以下属性
  18. // 设备状态数据
  19. deviceStatus = {
  20. total: 24,
  21. normal: { count: 19, percentage: 80 },
  22. warning: { count: 4, percentage: 15 },
  23. danger: { count: 1, percentage: 5 }
  24. };
  25. // 饼图角度计算
  26. get pieChartStyle() {
  27. return {
  28. 'background': `conic-gradient(
  29. #27ae60 0% ${this.deviceStatus.normal.percentage}%,
  30. #f39c12 ${this.deviceStatus.normal.percentage}% ${this.deviceStatus.normal.percentage + this.deviceStatus.warning.percentage}%,
  31. #e74c3c ${this.deviceStatus.normal.percentage + this.deviceStatus.warning.percentage}% 100%
  32. )`
  33. };
  34. }
  35. rating:number = 0
  36. ratingChange(rating: number) {
  37. this.rating = rating;
  38. }
  39. currentTime: Date = new Date();
  40. ngOnInit(): void {
  41. // 更新时间,每秒更新一次
  42. setInterval(() => {
  43. this.currentTime = new Date();
  44. }, 1000);
  45. }
  46. tok(value:number){
  47. if(value<=1000){
  48. return value
  49. }
  50. if(value<=999999){
  51. return (value/1000).toFixed(0) + 'k'
  52. }
  53. if(value<=999999999){
  54. return (value/10000).toFixed(0) + '万'
  55. }
  56. return value
  57. }
  58. }