feat: hazard-statistics.component

Signed-off-by: carlos <568187512@qq.com>

src/app/pages/manager/workbench/my/hazard-statistics/getOption.ts

@@ -0,0 +1,72 @@
+import * as echarts from 'echarts';
+
+export interface Params {
+  title: string;
+  titleColor: string;
+  legend: boolean;
+}
+
+export function getOption(
+  { title, titleColor, legend = false }: Params,
+  fields: {
+    name: string;
+    color: string;
+    data: number;
+  }[]
+): echarts.EChartsOption {
+  return {
+    tooltip: {
+      trigger: 'item',
+    },
+    title: {
+      text: title,
+      left: 'left',
+      top: '8%',
+      textStyle: {
+        fontSize: '18px',
+        fontWeight: 'normal',
+        color: titleColor,
+      },
+    },
+    legend: legend
+      ? {
+          top: '44%',
+          left: 'right',
+          orient: 'vertical',
+        }
+      : {
+          show: false,
+        },
+    color: fields.map(field => field.color),
+    series: [
+      {
+        name: '',
+        type: 'pie',
+        radius: ['45%', '70%'],
+        avoidLabelOverlap: false,
+        center: legend ? ['30%', '60%'] : ['35%', '60%'],
+        label: {
+          show: false,
+          position: 'center',
+        },
+        // emphasis: {
+        //   label: {
+        //     show: false,
+        //     fontSize: 40,
+        //     fontWeight: 'bold',
+        //   },
+        // },
+        emphasis: {
+          focus: 'series',
+        },
+        labelLine: {
+          show: false,
+        },
+        data: fields.map(f => ({
+          name: f.name,
+          value: f.data,
+        })),
+      },
+    ],
+  };
+}

src/app/pages/manager/workbench/my/hazard-statistics/hazard-statistics.component.html

@@ -1 +1,33 @@
-<p>hazard-statistics works!</p>
+<div class="workbench-panel px-4 pb-4">
+  <div class="workbench-panel-header">
+    <div class="text-lg font-bold leading-[52px] pl-2">隐患统计</div>
+  </div>
+  <div class="flex justify-between relative" style="height: 208px">
+    <div #chart class="w-1/2"></div>
+    <div #chart2 class="w-1/2"></div>
+    <div class="absolute top-[18px] text-sm" style="left: calc(0% + 106px)">
+      <span>近30天新增</span>
+      <span class="font-bold mx-1">1</span>
+      <span>起</span>
+    </div>
+    <div class="absolute top-[18px] text-sm" style="left: calc(50% + 106px)">
+      <span>近30天新增</span>
+      <span class="font-bold mx-1">4</span>
+      <span>起</span>
+    </div>
+  </div>
+  <div class="flex justify-between relative" style="height: 208px">
+    <div #chart3 class="w-1/2"></div>
+    <div #chart4 class="w-1/2"></div>
+    <div class="absolute top-[18px] text-sm" style="left: calc(0% + 106px)">
+      <span>近30天新增</span>
+      <span class="font-bold mx-1">2</span>
+      <span>起</span>
+    </div>
+    <div class="absolute top-[18px] text-sm" style="left: calc(50% + 106px)">
+      <span>近30天新增</span>
+      <span class="font-bold mx-1">3</span>
+      <span>起</span>
+    </div>
+  </div>
+</div>

src/app/pages/manager/workbench/my/hazard-statistics/hazard-statistics.component.ts

@@ -1,12 +1,56 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import * as echarts from 'echarts';
+import { getOption } from './getOption';
 
 @Component({
-  selector: 'app-hazard-statistics',
+  selector: 'workbench-hazard-statistics',
   standalone: true,
   imports: [],
   templateUrl: './hazard-statistics.component.html',
-  styleUrl: './hazard-statistics.component.less'
+  styleUrl: './hazard-statistics.component.less',
 })
 export class HazardStatisticsComponent {
+  @ViewChild('chart') chartElement!: ElementRef<HTMLDivElement>;
+  @ViewChild('chart2') chart2Element!: ElementRef<HTMLDivElement>;
+  @ViewChild('chart3') chart3Element!: ElementRef<HTMLDivElement>;
+  @ViewChild('chart4') chart4Element!: ElementRef<HTMLDivElement>;
 
+  chart?: echarts.ECharts;
+  chart2?: echarts.ECharts;
+  chart3?: echarts.ECharts;
+  chart4?: echarts.ECharts;
+
+  ngAfterViewInit() {
+    const dom = this.chartElement?.nativeElement;
+    const dom2 = this.chart2Element?.nativeElement;
+    const dom3 = this.chart3Element?.nativeElement;
+    const dom4 = this.chart4Element?.nativeElement;
+    if (dom) {
+      this.chart = echarts.init(dom);
+      this.chart.setOption(getOption({ title: '重大隐患:', titleColor: '#EE1A1A', legend: false }, this.getParams()));
+    }
+    if (dom2) {
+      this.chart2 = echarts.init(dom2);
+      this.chart2.setOption(getOption({ title: 'A类隐患:', titleColor: '#F48323', legend: true }, this.getParams()));
+    }
+    if (dom3) {
+      this.chart3 = echarts.init(dom3);
+      this.chart3.setOption(getOption({ title: 'B类隐患:', titleColor: '#FFCB13', legend: false }, this.getParams()));
+    }
+    if (dom4) {
+      this.chart4 = echarts.init(dom4);
+      this.chart4.setOption(getOption({ title: 'C类隐患:', titleColor: '#0081FF', legend: true }, this.getParams()));
+    }
+  }
+
+  getParams() {
+    const getRandomNumber = (min: number, max: number) => {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    };
+    return [
+      { name: '已完成', color: '#0081FF', data: getRandomNumber(2, 20) },
+      { name: '整治中', color: '#FDBF5E ', data: getRandomNumber(5, 10) },
+      { name: '审核中', color: '#8291A9', data: getRandomNumber(2, 5) },
+    ];
+  }
 }

src/app/pages/manager/workbench/my/my.component.html

@@ -15,6 +15,8 @@
   <div class="" style="width: 600px">
     <div class="pl-4">
       <workbench-risk-statistics></workbench-risk-statistics>
+      <div style="height: 16px"></div>
+      <workbench-hazard-statistics></workbench-hazard-statistics>
     </div>
   </div>
 </div>

src/app/pages/manager/workbench/my/my.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { HazardRemediationComponent } from './hazard-remediation/hazard-remediation.component';
+import { HazardStatisticsComponent } from './hazard-statistics/hazard-statistics.component';
 import { ListingComponent } from './listing/listing.component';
 import { MyFlowComponent } from './my-flow/my-flow.component';
 import { MyPlanComponent } from './my-plan/my-plan.component';
@@ -16,6 +17,7 @@ import { RiskStatisticsComponent } from './risk-statistics/risk-statistics.compo
     HazardRemediationComponent,
     ListingComponent,
     RiskStatisticsComponent,
+    HazardStatisticsComponent,
   ],
   templateUrl: './my.component.html',
   styleUrl: './my.component.less',

src/app/pages/manager/workbench/my/risk-statistics/risk-statistics.component.html

@@ -1,6 +1,3 @@
 <div class="workbench-panel px-4 pt-4">
-  <!-- <div class="workbench-panel-header">
-    <div class="header-title">风险统计</div>
-  </div> -->
   <div #chart style="height: 300px"></div>
 </div>