fix: '登录日志功能新增echarts样式'

src/pages/log/loginLog/index.jsx

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { DatePicker, Table, Row, Col, Button, notification, message, Spin } from 'antd';
 import { SwapRightOutlined, SyncOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import 'moment/dist/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';
+import ReactEcharts from 'echarts-for-react';
 import { post, PUBLISH_SERVICE } from '@/services/index';
 import styles from './index.less';
 const { RangePicker } = DatePicker;
@@ -24,6 +25,8 @@ const LoginLog = () => {
     moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
   ]);
   const [filteredValue, setFilteredValue] = useState([]);
+  const [chartData, setChartData] = useState([]);
+  const [showChart, setShowChart] = useState(true);
 
   const columns = [
     // {
@@ -99,17 +102,26 @@ const LoginLog = () => {
     })
       .then(res => {
         if (res.code === 0) {
-          setData0(res.data);
+          setData0(res.data.tableData);
+          let chartArr1 = res.data.chartData.map(item => item.client)
+          let chartArr2 = res.data.chartData.map(item => item.count)
+          let chartArr3 = res.data.chartData.map(item => {
+            return {
+              value: item.count,
+              name: item.client,
+            }
+          });
+          setChartData([chartArr1, chartArr2, chartArr3])
           // 过滤LoginName
-          let arr1 = res.data.map(item => item.LoginName);
+          let arr1 = res.data.tableData.map(item => item.LoginName);
           arr1 = arr1.filter((value, index) => arr1.indexOf(value) === index);
           setLoginNameFilters(arr1.map(item => ({ text: item, value: item })));
           // 过滤ShowName
-          let arr2 = res.data.map(item => item.ShowName);
+          let arr2 = res.data.tableData.map(item => item.ShowName);
           arr2 = arr2.filter((value, index) => arr2.indexOf(value) === index);
           setShowNameFilters(arr2.map(item => ({ text: item, value: item })));
           // 过滤系统类型Ciient
-          let arr3 = res.data.map(item => item.Ciient);
+          let arr3 = res.data.tableData.map(item => item.Ciient);
           arr3 = arr3.filter((value, index) => arr3.indexOf(value) === index);
           setSystemTypeFilters(arr3.map(item => ({ text: item, value: item })));
         } else {
@@ -156,6 +168,70 @@ const LoginLog = () => {
     // console.log('filters', filters);
     setFilteredValue(filters.LoginName, filters.ShowName, filters.Ciient);
   };
+
+  const rightOption = useMemo(() => {
+    return {
+      xAxis: {
+        type: 'category',
+        data: chartData[0],
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [
+        {
+          data: chartData[1],
+          type: 'bar',
+          label: {
+            show: true,
+            position: 'top',
+            formatter: params => {
+              const total = chartData[1].reduce((acc, val) => acc + val, 0);
+              const percentage = ((params.data / total) * 100).toFixed(2) + '%';
+              return `${params.data}次 (${percentage})`;
+            }
+          }
+        },
+      ],
+    };
+  }, [chartData])
+  const leftOption = useMemo(() => {
+    return {
+      title: {
+        left: 'center',
+      },
+      tooltip: {
+        trigger: 'item',
+        show: true,
+        formatter: '{b} : {c}次 {d}%', // 展示的文字 类型+百分比
+      },
+      legend: {
+        orient: 'horizontal',
+        left: 'center',
+        top: '10%',
+      },
+      series: [
+        {
+          name: '占比',
+          type: 'pie',
+          radius: '50%',
+          data: chartData[2],
+          label: {
+            show: true,
+            // formatter: '{b}次6666 : {d}%', // 展示的文字 类型+百分比
+            position: 'outer', // 标签位置在饼图外部
+          },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            },
+          },
+        },
+      ],
+    };
+  }, [chartData])
   return (
     <>
       <div className={styles.loginLog}>
@@ -216,7 +292,8 @@ const LoginLog = () => {
               bordered
               columns={columns}
               dataSource={data0}
-              scroll={{ x: 'max-content', y: 'calc(100vh - 230px)' }}
+              // scroll={{ x: 'max-content', y: 'calc(100vh - 230px)' }}
+              scroll={{ x: 'max-content', y: `calc(100vh - ${showChart ? '630' : '230'}px)` }}
               pagination={{
                 showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                 pageSizeOptions: [10, 20, 50, 100],
@@ -226,7 +303,18 @@ const LoginLog = () => {
               }}
               onChange={onChangeInput}
             />
+            <Button style={{ position: 'absolute', bottom: '2px', left: '10px' }} onClick={() => setShowChart(!showChart)}>{showChart ? '收起' : '展开'}</Button>
           </div>
+          {
+            showChart ? <div className={styles.chartDiv}>
+              <div>
+                <ReactEcharts style={{ width: '100%', height: '100%' }} option={leftOption} />
+              </div>
+              <div>
+                <ReactEcharts style={{ width: '100%', height: '100%' }} option={rightOption} />
+              </div>
+            </div> : null
+          }
         </Spin>
       </div>
     </>

src/pages/log/loginLog/index.less

@@ -10,6 +10,7 @@
         background: white;
     }
     .table{
+        position: relative;
         border-top: 1px solid #f0eded;
         // overflow: auto;//不要这个，pagination否则无法固定底部
         .ant-table-thead tr th{
@@ -37,6 +38,19 @@
             width: 99%;
             margin: 10px auto;
         }
+    }
+    .chartDiv {
+        height: 400px;
+        width: 100%;
+        // background-color: red;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        >div {
+            width: 49%;
+            height: 100%;
+        }
     }  
     .ant-spin-container {
         background-color: white;