feat: risk-statistics.component

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

package.json

@@ -41,6 +41,7 @@
     "@types/d3": "^7.4.3",
     "@types/jasmine": "~5.1.0",
     "autoprefixer": "^10.4.19",
+    "echarts": "^5.5.1",
     "gulp": "^5.0.0",
     "gulp-shell": "^0.8.0",
     "gulp-zip": "^6.0.0",

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

@@ -0,0 +1 @@
+<p>hazard-statistics works!</p>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HazardStatisticsComponent } from './hazard-statistics.component';
+
+describe('HazardStatisticsComponent', () => {
+  let component: HazardStatisticsComponent;
+  let fixture: ComponentFixture<HazardStatisticsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HazardStatisticsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HazardStatisticsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-hazard-statistics',
+  standalone: true,
+  imports: [],
+  templateUrl: './hazard-statistics.component.html',
+  styleUrl: './hazard-statistics.component.less'
+})
+export class HazardStatisticsComponent {
+
+}

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

@@ -13,6 +13,8 @@
     <workbench-my-listing></workbench-my-listing>
   </div>
   <div class="" style="width: 600px">
-    <div>你的工作</div>
+    <div class="pl-4">
+      <workbench-risk-statistics></workbench-risk-statistics>
+    </div>
   </div>
 </div>

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

@@ -4,11 +4,19 @@ import { ListingComponent } from './listing/listing.component';
 import { MyFlowComponent } from './my-flow/my-flow.component';
 import { MyPlanComponent } from './my-plan/my-plan.component';
 import { MyWorkComponent } from './my-work/my-work.component';
+import { RiskStatisticsComponent } from './risk-statistics/risk-statistics.component';
 
 @Component({
   selector: 'manager-workbench-my',
   standalone: true,
-  imports: [MyWorkComponent, MyFlowComponent, MyPlanComponent, HazardRemediationComponent, ListingComponent],
+  imports: [
+    MyWorkComponent,
+    MyFlowComponent,
+    MyPlanComponent,
+    HazardRemediationComponent,
+    ListingComponent,
+    RiskStatisticsComponent,
+  ],
   templateUrl: './my.component.html',
   styleUrl: './my.component.less',
 })

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

@@ -0,0 +1,158 @@
+import * as echarts from 'echarts';
+
+const getSeriesOption = (name: string, color: string, data: number[]) => {
+  return {
+    name: name,
+    type: 'line',
+    smooth: true,
+    yAxisIndex: 0,
+    symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+    lineStyle: {
+      width: 3,
+      color: color, // 线条颜色
+    },
+    showSymbol: false,
+    itemStyle: {
+      // color: 'transparent', //拐点颜色
+      color: color, //拐点颜色
+      borderColor: color, //拐点边框颜色
+      borderWidth: 0, //拐点边框大小
+    },
+    label: {
+      show: false, //开启显示
+      color: '#fff',
+      position: 'top', //在上方显示
+    },
+    areaStyle: {
+      //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+      color: new echarts.graphic.LinearGradient(
+        0,
+        0,
+        0,
+        1,
+        [
+          {
+            offset: 0,
+            color: `${color}50`,
+          },
+          {
+            offset: 0.5,
+            color: `${color}20`,
+          },
+          {
+            offset: 0.8,
+            color: `${color}00`,
+          },
+          {
+            offset: 1,
+            color: `${color}00`,
+          },
+        ],
+        false
+      ),
+    },
+    emphasis: {
+      focus: 'series',
+    },
+    data: data,
+  };
+};
+
+export const getOption = (
+  fields: {
+    name: string;
+    color: string;
+    data: number[];
+  }[],
+  labels: string[],
+  pageWidth: number = 1920
+) => {
+  const scale = Number((pageWidth / 1920).toFixed(1));
+  console.log(fields.map(field => field.color));
+
+  return {
+    title: {
+      text: '风险统计',
+      left: '5%',
+    },
+    tooltip: {
+      show: true,
+      trigger: 'axis',
+      axisPointer: {
+        // type: 'shadow',
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a798580',
+        },
+      },
+    },
+    grid: {
+      top: '48px',
+      right: '12px',
+      left: '5%',
+      bottom: '24px',
+      containLabel: true,
+    },
+    legend: {
+      data: fields.map(field => ({
+        name: field.name,
+        textStyle: {
+          color: field.color,
+        },
+      })),
+      icon: 'circle',
+      itemHeight: 12,
+      itemGap: 30,
+      textStyle: {
+        padding: [0, 0, 0, -5],
+        fontSize: 14,
+        lineHeight: 28,
+      },
+    },
+    colors: fields.map(field => field.color),
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      axisLabel: {
+        color: '#A5B4CB',
+        interval: 0,
+        fontSize: 12,
+        padding: [scale * 10, 0, 0, 0],
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#ffffff30',
+        },
+      },
+      // axisTick: {
+      //   show: false,
+      // },
+      // splitLine: {
+      //   show: false,
+      // },
+      data: labels,
+    },
+
+    yAxis: [
+      {
+        type: 'value',
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(165,180,203,0.7)',
+            width: 2,
+            type: [4, 4],
+            // offset: 2,
+          },
+        },
+        axisLabel: {
+          show: true,
+          color: '#A5B4CB',
+          align: 'right',
+        },
+      },
+    ],
+    series: [...fields.map(field => getSeriesOption(field.name, field.color, field.data))],
+  };
+};

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

@@ -1 +1,6 @@
-<p>risk-statistics works!</p>
+<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>

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

@@ -1,12 +1,34 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import * as echarts from 'echarts';
+import { getOption } from './getOption';
 
 @Component({
-  selector: 'app-risk-statistics',
+  selector: 'workbench-risk-statistics',
   standalone: true,
   imports: [],
   templateUrl: './risk-statistics.component.html',
-  styleUrl: './risk-statistics.component.less'
+  styleUrl: './risk-statistics.component.less',
 })
 export class RiskStatisticsComponent {
+  @ViewChild('chart') chartElement!: ElementRef<HTMLDivElement>;
+  chart?: echarts.ECharts;
 
+  ngAfterViewInit() {
+    const dom = this.chartElement?.nativeElement;
+    if (dom) {
+      this.chart = echarts.init(dom);
+      this.chart.setOption(
+        getOption(
+          [
+            { name: 'R1', color: '#F42323', data: [12, 2, 6, 9, 10, 4, 5, 7, 3, 7, 11, 8] },
+            { name: 'R2', color: '#F48323', data: [5, 15, 12, 4, 4, 11, 4, 2, 5, 9, 12, 16] },
+            { name: 'R3', color: '#FFCB13', data: [7, 12, 8, 4, 5, 5, 5, 7, 6, 7, 3, 7] },
+            { name: 'R4', color: '#0177FB', data: [10, 8, 8, 5, 9, 8, 6, 7, 10, 12, 10, 8] },
+          ],
+          ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          window.innerWidth
+        )
+      );
+    }
+  }
 }

src/app/shared/workbench-tabs/workbench-tabs.component.ts

@@ -18,7 +18,9 @@ export class WorkbenchTabsComponent {
   activeOffsetLeft = '0px';
 
   ngAfterViewInit() {
-    this.handleChange(this.tabs.find(tab => tab.value === this.activeTab)!);
+    setTimeout(() => {
+      this.handleChange(this.tabs.find(tab => tab.value === this.activeTab)!);
+    }, 100);
   }
   handleChange(tab: Option) {
     this.activeTab = tab.value;