fix: '登录日志样式优化'

src/pages/log/loginLog/index.jsx

@@ -28,6 +28,54 @@ const LoginLog = () => {
   const [chartData, setChartData] = useState([]);
   const [showChart, setShowChart] = useState(true);
 
+  const colorArr = ['#FFAB18',
+    '#17B5F9',
+    '#1975FF',
+    '#56CF3A',
+    '#7D5CD4',
+    '#FF0060',
+    '#CA4ED9',
+    '#01CC9F',
+    '#FF4C3E',
+    '#E945D0',
+    '#0EC6DC',
+    '#63636D',
+    '#66517F',
+    '#996B6B',
+    '#ACAFC6',
+    '#FFAB18',
+    '#17B5F9',
+    '#1975FF',
+    '#56CF3A',
+    '#7D5CD4',
+    '#FF0060',
+    '#CA4ED9',
+    '#01CC9F',
+    '#FF4C3E',
+    '#E945D0',
+    '#0EC6DC',
+    '#63636D',
+    '#66517F',
+    '#996B6B',
+    '#ACAFC6',
+    '#FFAB18',
+    '#17B5F9',
+    '#1975FF',
+    '#56CF3A',
+    '#7D5CD4',
+    '#FF0060',
+    '#CA4ED9',
+    '#01CC9F',
+    '#FF4C3E',
+    '#E945D0',
+    '#0EC6DC',
+    '#63636D',
+    '#66517F',
+    '#996B6B',
+    '#ACAFC6']
+
+  console.log(colorArr, 'colorArrcolorArrcolorArr');
+
   const columns = [
     // {
     //   title: 'IP',
@@ -103,7 +151,7 @@ const LoginLog = () => {
       .then(res => {
         if (res.code === 0) {
           setData0(res.data.tableData);
-          let chartArr1 = res.data.chartData.map(item => item.client)
+          let chartArr1 = res.data.chartData.map(item => item.clientName || item.client)
           let chartArr2 = res.data.chartData.map(item => item.count)
           let chartArr3 = res.data.chartData.map(item => {
             return {
@@ -174,6 +222,27 @@ const LoginLog = () => {
       xAxis: {
         type: 'category',
         data: chartData[0],
+        // axisLabel: {
+        //   interval: 0, //x轴文字全部显示
+        //   formatter: function (params) {
+        //     let newParamsName = ''
+        //     const paramsNameNumber = params.length // 获取文数总长度
+        //     const provideNumber = 8 //控制每行的字段
+        //     const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
+        //     if (paramsNameNumber > provideNumber) {
+        //       for (let p = 0; p < rowNumber; p++) {
+        //         const start = p * provideNumber
+        //         const end = start + provideNumber
+        //         const tempStr = p === rowNumber - 1 ? params.substring(start, paramsNameNumber) :
+        //           params.substring(start, end) + '\n'
+        //         newParamsName += tempStr
+        //       }
+        //     } else {
+        //       newParamsName = params
+        //     }
+        //     return newParamsName
+        //   },
+        // },
       },
       yAxis: {
         type: 'value',
@@ -190,9 +259,20 @@ const LoginLog = () => {
               const percentage = ((params.data / total) * 100).toFixed(2) + '%';
               return `${params.data}次 (${percentage})`;
             }
+          },
+          itemStyle: {
+            color: function (params) {
+              // 这里可以根据你的需求设置不同的颜色，例如根据数据值或索引
+              return (colorArr[params.dataIndex])
+            }
           }
         },
       ],
+      tooltip: {
+        trigger: 'item',
+        show: true,
+        formatter: '{b} : {c}次', // 展示的文字 类型+百分比
+      },
     };
   }, [chartData])
   const leftOption = useMemo(() => {
@@ -210,6 +290,7 @@ const LoginLog = () => {
         left: 'center',
         top: '10%',
       },
+      color: colorArr,
       series: [
         {
           name: '占比',
@@ -229,7 +310,7 @@ const LoginLog = () => {
             },
           },
         },
-      ],
+      ]
     };
   }, [chartData])
   return (
@@ -245,7 +326,7 @@ const LoginLog = () => {
               onChange={changeTime}
               value={allTime}
               allowClear={false}
-            /> 
+            />
             {/* <DatePicker
               showTime
               format="YYYY-MM-DD HH:mm:ss"

src/pages/log/loginLog/index.less

 .loginLog{
+    :global {
+        .ant-table-body {
+            transition: all 0.3s ease 0s;
+        }
+    }
     .head{
         padding: 10px;
         background: white;
@@ -12,6 +17,7 @@
     .table{
         position: relative;
         border-top: 1px solid #f0eded;
+        transition: all 0.3s;
         // overflow: auto;//不要这个，pagination否则无法固定底部
         .ant-table-thead tr th{
             font-weight: 600;