style: dashboard utilization

src/components/echarts/config.ts

@@ -100,3 +100,84 @@ export const lineItemConfig = {
     opacity: 0.7
   }
 };
+
+export const gaugeItemConfig = {
+  type: 'gauge',
+  radius: '88%',
+  center: ['50%', '65%'],
+  startAngle: 190,
+  endAngle: -10,
+  min: 0,
+  max: 100,
+  splitNumber: 5,
+  progress: {
+    show: true,
+    roundCap: false,
+    width: 12
+  },
+  pointer: {
+    length: '80%',
+    width: 4,
+    itemStyle: {
+      color: 'auto'
+    }
+  },
+  axisLine: {
+    roundCap: false,
+    lineStyle: {
+      width: 12,
+      // color: [[1, 'rgba(221, 221, 221, 0.5)']],
+      color: [
+        [0.5, 'rgba(84, 204, 152, 80%)'],
+        [0.8, 'rgba(250, 173, 20, 80%)'],
+        [1, 'rgba(255, 77, 79, 80%)']
+      ]
+    }
+  },
+  axisTick: {
+    distance: -12,
+    length: 6,
+    splitNumber: 5,
+    lineStyle: {
+      width: 1.5,
+      color: 'rgba(255, 255, 255, 1)'
+    }
+  },
+  splitLine: {
+    distance: -12,
+    length: 12,
+    lineStyle: {
+      width: 1.5,
+      color: 'rgba(255, 255, 255, 1)'
+    }
+  },
+  axisLabel: {
+    distance: 14,
+    color: 'rgba(0, 0, 0, .5)',
+    fontSize: 12
+  },
+  detail: {
+    lineHeight: 40,
+    height: 40,
+    offsetCenter: [5, 30],
+    valueAnimation: false,
+    fontSize: 20,
+    color: 'rgba(0, 0, 0, 0.88)',
+    formatter(value: any) {
+      return '{value|' + value + '}{unit|%}';
+    },
+    rich: {
+      value: {
+        fontSize: 20,
+        fontWeight: '500',
+        color: 'rgba(0, 0, 0, 0.88)'
+      },
+      unit: {
+        fontSize: 16,
+        color: 'rgba(0, 0, 0, 0.88)',
+        fontWeight: '500',
+        padding: [0, 0, 0, 2]
+      }
+    }
+  }
+};

src/components/echarts/gauge.tsx

@@ -0,0 +1,63 @@
+import Chart from '@/components/echarts/chart';
+import {
+  gaugeItemConfig,
+  title as titleConfig
+} from '@/components/echarts/config';
+import EmptyData from '@/components/empty-data';
+import { memo } from 'react';
+import { ChartProps } from './types';
+
+const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
+  props
+) => {
+  const { value, height, width, labelFormatter, title, color } = props;
+  if (!value && value !== 0) {
+    return <EmptyData height={height} title={title}></EmptyData>;
+  }
+
+  const setDataOptions = () => {
+    return {
+      title: {
+        ...titleConfig,
+        text: title,
+        top: '0',
+        left: 'center'
+      },
+      series: [
+        {
+          ...gaugeItemConfig,
+          axisLine: {
+            ...gaugeItemConfig.axisLine,
+            lineStyle: {
+              ...gaugeItemConfig.axisLine.lineStyle,
+              color: [
+                [value / 100, color],
+                [1, 'rgba(221, 221, 221, 0.5)']
+              ]
+            }
+          },
+          itemStyle: {
+            color: 'transparent'
+          },
+          detail: {
+            ...gaugeItemConfig.detail,
+            formatter: labelFormatter || gaugeItemConfig.detail.formatter
+          },
+          data: [{ value }]
+        }
+      ]
+    };
+  };
+
+  const dataOptions: any = setDataOptions();
+
+  return (
+    <Chart
+      height={height}
+      options={dataOptions}
+      width={width || '100%'}
+    ></Chart>
+  );
+};
+
+export default memo(GaugeChart);

src/components/echarts/index.ts

@@ -1,9 +1,10 @@
 import type {
   // 系列类型的定义后缀都为 SeriesOption
   BarSeriesOption,
+  GaugeSeriesOption,
   LineSeriesOption
 } from 'echarts/charts';
-import { BarChart, LineChart } from 'echarts/charts';
+import { BarChart, GaugeChart, LineChart } from 'echarts/charts';
 import type {
   DatasetComponentOption,
   GridComponentOption,
@@ -34,6 +35,7 @@ type ECOption = ComposeOption<
   | TooltipComponentOption
   | GridComponentOption
   | DatasetComponentOption
+  | GaugeSeriesOption
 >;
 
 // 注册必须的组件
@@ -46,6 +48,7 @@ echarts.use([
   TransformComponent,
   BarChart,
   LineChart,
+  GaugeChart,
   LabelLayout,
   UniversalTransition,
   CanvasRenderer

src/components/echarts/types.ts

@@ -6,7 +6,9 @@ export interface ChartProps {
   height: string | number;
   width?: string | number;
   title?: string;
+  value?: number;
   smooth?: boolean;
+  color?: string;
 }
 
 export interface AreaChartItemProps {

src/components/icon-font/index.tsx

@@ -1,7 +1,7 @@
 import { createFromIconfontCN } from '@ant-design/icons';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_n8fe7jbl7n.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_t2n96lwj8gf.js'
 });
 
 export default IconFont;

src/components/seal-table/components/table-row.tsx

@@ -35,9 +35,10 @@ const TableRow: React.FC<
   const [firstLoad, setFirstLoad] = useState(true);
   const pollTimer = useRef<any>(null);
   const chunkRequestRef = useRef<any>(null);
+  const childrenDataRef = useRef<any[]>([]);
 
   console.log('table row====');
-  const { updateChunkedList } = useUpdateChunkedList(childrenData, {
+  const { updateChunkedList } = useUpdateChunkedList({
     setDataList: setChildrenData,
     callback: (list) => renderChildren?.(list)
   });
@@ -54,12 +55,16 @@ const TableRow: React.FC<
   }, [rowSelection]);
 
   useEffect(() => {
-    if (expandedRowKeys?.includes(record[rowKey])) {
-      setExpanded(true);
-    } else {
-      setExpanded(false);
-    }
-  }, [expandedRowKeys]);
+    childrenDataRef.current = childrenData;
+  }, [childrenData]);
+
+  // useEffect(() => {
+  //   if (expandedRowKeys?.includes(record[rowKey])) {
+  //     setExpanded(true);
+  //   } else {
+  //     setExpanded(false);
+  //   }
+  // }, [expandedRowKeys]);
 
   useEffect(() => {
     return () => {
@@ -102,7 +107,7 @@ const TableRow: React.FC<
 
   const updateChildrenHandler = (list: any) => {
     _.each(list, (data: any) => {
-      updateChunkedList(data);
+      updateChunkedList(data, childrenDataRef.current);
     });
   };
   const createChunkRequest = () => {