统计分析

src/pages/business_environmental_activities/components/StatisticsAnalysis.js

@@ -9,17 +9,24 @@ const statusOptions = [
     { label: '环保事件', value: 'incident' },
 ];
 
+const CardTitle = ({ children }) => (
+    <div className={styles.cardTitle}>
+        <span className={styles.cardTitleIcon} />
+        {children}
+    </div>
+);
+
 const StatisticsAnalysis = () => {
     const activityTypeOption = useMemo(
         () => ({
-            color: ['#6abdfc', '#a585ff', '#fa8c16', '#ff6b6b'],
-            tooltip: { trigger: 'item' },
-            legend: { orient: 'vertical', left: '70%' },
+            color: ['#1cd863', '#39a6ff', '#ffa74f', '#be70f0'],
+            // tooltip: { trigger: 'item' },
+            // legend: { orient: 'vertical', left: '70%' },
             series: [
                 {
                     type: 'pie',
                     radius: ['30%', '60%'],
-                    center: ['35%', '50%'],
+                    center: ['50%', '50%'],
                     label: { formatter: '{b}: {d}%' },
                     data: [
                         { value: 30, name: '培训' },
@@ -35,18 +42,20 @@ const StatisticsAnalysis = () => {
 
     const participationOption = useMemo(
         () => ({
-            color: ['#6ee7d8', '#8fd0ff'],
+            color: ['#AAFFE1', '#009DFF'],
             tooltip: { trigger: 'axis' },
             grid: { left: 80, right: 30, top: 30, bottom: 30 },
             xAxis: {
                 type: 'value',
                 boundaryGap: [0, 0.1],
                 axisLine: { lineStyle: { color: '#d8dfe6' } },
+                axisLabel: { color: '#333' },
             },
             yAxis: {
                 type: 'category',
                 data: ['xxx部门', 'xxx部门', 'xxx部门', 'xxx部门', 'xxx部门', 'xxx部门'],
                 axisLine: { lineStyle: { color: '#d8dfe6' } },
+                axisLabel: { color: '#333' },
             },
             series: [
                 {
@@ -54,6 +63,19 @@ const StatisticsAnalysis = () => {
                     type: 'bar',
                     barWidth: 16,
                     data: [92, 88, 74, 56, 48, 30],
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [
+                                { offset: 0, color: '#AAFFE1' },
+                                { offset: 1, color: '#009DFF' },
+                            ],
+                        },
+                    },
                     label: { show: false },
                 },
             ],
@@ -64,13 +86,13 @@ const StatisticsAnalysis = () => {
     const incidentTypeOption = useMemo(
         () => ({
             color: ['#4b7bff', '#5fd6f1', '#2fd192', '#ff9f7f', '#e85d8b', '#5e6ce6'],
-            tooltip: { trigger: 'item' },
-            legend: { orient: 'vertical', right: 10, top: 'middle' },
+            // tooltip: { trigger: 'item' },
+            // legend: { orient: 'vertical', right: 10, top: 'middle' },
             series: [
                 {
                     type: 'pie',
-                    radius: ['40%', '65%'],
-                    center: ['40%', '50%'],
+                    radius: ['0%', '65%'],
+                    center: ['50%', '50%'],
                     label: { formatter: '{b} {d}%' },
                     data: [
                         { value: 45, name: 'xxx2' },
@@ -89,12 +111,12 @@ const StatisticsAnalysis = () => {
     const trendOption = useMemo(
         () => ({
             color: ['#6abdfc', '#f7a35c'],
-            tooltip: { trigger: 'axis' },
+            // tooltip: { trigger: 'axis' },
             grid: { left: 50, right: 50, top: 30, bottom: 40 },
-            xAxis: [{ type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }],
+            xAxis: [{ type: 'category', axisLabel: { color: '#333' }, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }],
             yAxis: [
-                { type: 'value', name: '活动数', axisLine: { lineStyle: { color: '#d8dfe6' } } },
-                { type: 'value', name: '参与率', axisLine: { lineStyle: { color: '#d8dfe6' } } },
+                { type: 'value', name: '活动数',  axisLabel: { color: '#333' }, axisLine: { lineStyle: { color: '#d8dfe6' } } },
+                { type: 'value', name: '参与率', axisLabel: { color: '#333' }, axisLine: { lineStyle: { color: '#d8dfe6' } } },
             ],
             series: [
                 {
@@ -108,7 +130,7 @@ const StatisticsAnalysis = () => {
                     type: 'line',
                     yAxisIndex: 1,
                     data: [55, 60, 58, 63, 60, 62, 65, 63, 64, 68, 66, 70],
-                    smooth: true,
+                    smooth: false,
                 },
             ],
         }),
@@ -134,7 +156,7 @@ const StatisticsAnalysis = () => {
     return (
         <div className={styles.container}>
             <div className={styles.toolbar}>
-                <Button type="primary">导出PDF</Button>
+                <Button type="primary" className={styles.exportButton}>导出PDF</Button>
                 <div className={styles.toolbarFilters}>
                     <span className={styles.filterLabel}>事件状态</span>
                     <Checkbox.Group options={statusOptions} value={statusOptions.map((item) => item.value)} />
@@ -147,26 +169,26 @@ const StatisticsAnalysis = () => {
 
             <div className={styles.rowThree}>
                 <div className={styles.card}>
-                    <div className={styles.cardTitle}>活动类型分布</div>
+                    <CardTitle>活动类型分布</CardTitle>
                     <ReactECharts option={activityTypeOption} style={{ height: 240 }} />
                 </div>
                 <div className={styles.card}>
-                    <div className={styles.cardTitle}>活动参与热度</div>
+                    <CardTitle>活动参与热度</CardTitle>
                     <ReactECharts option={participationOption} style={{ height: 240 }} />
                 </div>
                 <div className={styles.card}>
-                    <div className={styles.cardTitle}>事件类型分布</div>
+                    <CardTitle>事件类型分布</CardTitle>
                     <ReactECharts option={incidentTypeOption} style={{ height: 240 }} />
                 </div>
             </div>
 
             <div className={styles.rowTwo}>
                 <div className={styles.cardWide}>
-                    <div className={styles.cardTitle}>月度活动趋势</div>
+                    <CardTitle>月度活动趋势</CardTitle>
                     <ReactECharts option={trendOption} style={{ height: 240 }} />
                 </div>
                 <div className={styles.card}>
-                    <div className={styles.cardTitle}>事件部门分布</div>
+                    <CardTitle>事件部门分布</CardTitle>
                     <ReactECharts option={departmentOption} style={{ height: 240 }} />
                 </div>
             </div>

src/pages/business_environmental_activities/components/StatisticsAnalysis.less

@@ -12,10 +12,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        background: #fff;
-        border-radius: 10px;
-        padding: 10px 12px;
-        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
+        padding: 0px 12px;
 
         .toolbarFilters {
             display: flex;
@@ -25,17 +22,47 @@
             justify-content: flex-end;
         }
 
+        :global(.ant-checkbox-wrapper-checked .ant-checkbox-inner) {
+            background: rgba(0, 212, 138, 1);
+            border-color: rgba(0, 212, 138, 1);
+        }
+
+        :global(.ant-checkbox-wrapper-checked::after) {
+            color: #fff;
+        }
+
+        :global(.ant-checkbox-wrapper-checked:hover .ant-checkbox-inner) {
+            background: rgba(0, 212, 138, 1);
+            border-color: rgba(0, 212, 138, 1);
+        }
+
+        .exportButton {
+            background: #fff !important;
+            border: 1px solid rgba(215, 215, 215, 1) !important;
+            border-radius: 2px;
+            color: rgba(51, 51, 51, 1) !important;
+            box-shadow: none !important;
+            padding: 0 16px;
+            &:hover,
+            &:focus {
+                background: #fff !important;
+                border-color: rgba(200, 200, 200, 1) !important;
+            }
+        }
+
         .filterLabel {
             color: #666;
             font-size: 13px;
         }
 
         .select {
-            width: 120px;
+            width: 140px;
 
             :global(.ant-select-selector) {
                 border-radius: 6px !important;
-                height: 34px;
+                display: flex;
+                align-items: center;
+                height: 30px;
                 box-shadow: none !important;
             }
         }
@@ -56,17 +83,28 @@
     .card,
     .cardWide {
         background: #fff;
-        border-radius: 10px;
+        border-radius: 2px;
         box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
         padding: 10px 12px 6px;
         display: flex;
         flex-direction: column;
 
         .cardTitle {
+            display: flex;
+            align-items: center;
+            gap: 8px;
             font-size: 14px;
             font-weight: 600;
             color: #333;
             margin-bottom: 4px;
+
+            .cardTitleIcon {
+                width: 3px;
+                height: 16px;
+                border-radius: 1px;
+                background: rgba(0, 157, 111, 1);
+                flex-shrink: 0;
+            }
         }
     }
 }