2 changed files with 28 additions and 88 deletions
--- a/src/pages/business_environmental_activities/components/StatisticsAnalysis.js
+++ b/src/pages/business_environmental_activities/components/StatisticsAnalysis.js
@ -9,24 +9,17 @@ const statusOptions = [
    { label: '环保事件', value: 'incident' },
 ];

-const CardTitle = ({ children }) => (
-    <div className={styles.cardTitle}>
-        <span className={styles.cardTitleIcon} />
-        {children}
-    </div>
-);
-
 const StatisticsAnalysis = () => {
    const activityTypeOption = useMemo(
        () => ({
-            color: ['#1cd863', '#39a6ff', '#ffa74f', '#be70f0'],
-            // tooltip: { trigger: 'item' },
-            // legend: { orient: 'vertical', left: '70%' },
+            color: ['#6abdfc', '#a585ff', '#fa8c16', '#ff6b6b'],
+            tooltip: { trigger: 'item' },
+            legend: { orient: 'vertical', left: '70%' },
            series: [
                {
                    type: 'pie',
                    radius: ['30%', '60%'],
-                    center: ['50%', '50%'],
+                    center: ['35%', '50%'],
                    label: { formatter: '{b}: {d}%' },
                    data: [
                        { value: 30, name: '培训' },
@ -42,20 +35,18 @@ const StatisticsAnalysis = () => {

    const participationOption = useMemo(
        () => ({
-            color: ['#AAFFE1', '#009DFF'],
+            color: ['#6ee7d8', '#8fd0ff'],
            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: [
                {
@ -63,19 +54,6 @@ 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 },
                },
            ],
@ -86,13 +64,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: ['0%', '65%'],
-                    center: ['50%', '50%'],
+                    radius: ['40%', '65%'],
+                    center: ['40%', '50%'],
                    label: { formatter: '{b} {d}%' },
                    data: [
                        { value: 45, name: 'xxx2' },
@ -111,12 +89,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', axisLabel: { color: '#333' }, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }],
+            xAxis: [{ type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }],
            yAxis: [
-                { type: 'value', name: '活动数',  axisLabel: { color: '#333' }, axisLine: { lineStyle: { color: '#d8dfe6' } } },
-                { type: 'value', name: '参与率', axisLabel: { color: '#333' }, axisLine: { lineStyle: { color: '#d8dfe6' } } },
+                { type: 'value', name: '活动数', axisLine: { lineStyle: { color: '#d8dfe6' } } },
+                { type: 'value', name: '参与率', axisLine: { lineStyle: { color: '#d8dfe6' } } },
            ],
            series: [
                {
@ -130,7 +108,7 @@ const StatisticsAnalysis = () => {
                    type: 'line',
                    yAxisIndex: 1,
                    data: [55, 60, 58, 63, 60, 62, 65, 63, 64, 68, 66, 70],
-                    smooth: false,
+                    smooth: true,
                },
            ],
        }),
@ -156,7 +134,7 @@ const StatisticsAnalysis = () => {
    return (
        <div className={styles.container}>
            <div className={styles.toolbar}>
-                <Button type="primary" className={styles.exportButton}>导出PDF</Button>
+                <Button type="primary">导出PDF</Button>
                <div className={styles.toolbarFilters}>
                    <span className={styles.filterLabel}>事件状态</span>
                    <Checkbox.Group options={statusOptions} value={statusOptions.map((item) => item.value)} />
@ -169,26 +147,26 @@ const StatisticsAnalysis = () => {

            <div className={styles.rowThree}>
                <div className={styles.card}>
-                    <CardTitle>活动类型分布</CardTitle>
+                    <div className={styles.cardTitle}>活动类型分布</div>
                    <ReactECharts option={activityTypeOption} style={{ height: 240 }} />
                </div>
                <div className={styles.card}>
-                    <CardTitle>活动参与热度</CardTitle>
+                    <div className={styles.cardTitle}>活动参与热度</div>
                    <ReactECharts option={participationOption} style={{ height: 240 }} />
                </div>
                <div className={styles.card}>
-                    <CardTitle>事件类型分布</CardTitle>
+                    <div className={styles.cardTitle}>事件类型分布</div>
                    <ReactECharts option={incidentTypeOption} style={{ height: 240 }} />
                </div>
            </div>

            <div className={styles.rowTwo}>
                <div className={styles.cardWide}>
-                    <CardTitle>月度活动趋势</CardTitle>
+                    <div className={styles.cardTitle}>月度活动趋势</div>
                    <ReactECharts option={trendOption} style={{ height: 240 }} />
                </div>
                <div className={styles.card}>
-                    <CardTitle>事件部门分布</CardTitle>
+                    <div className={styles.cardTitle}>事件部门分布</div>
                    <ReactECharts option={departmentOption} style={{ height: 240 }} />
                </div>
            </div>
--- a/src/pages/business_environmental_activities/components/StatisticsAnalysis.less
+++ b/src/pages/business_environmental_activities/components/StatisticsAnalysis.less
@ -12,7 +12,10 @@
        display: flex;
        align-items: center;
        justify-content: space-between;
-        padding: 0px 12px;
+        background: #fff;
+        border-radius: 10px;
+        padding: 10px 12px;
+        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);

        .toolbarFilters {
            display: flex;
@ -22,47 +25,17 @@
            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: 140px;
+            width: 120px;

            :global(.ant-select-selector) {
                border-radius: 6px !important;
-                display: flex;
-                align-items: center;
-                height: 30px;
+                height: 34px;
                box-shadow: none !important;
            }
        }
@ -83,28 +56,17 @@
    .card,
    .cardWide {
        background: #fff;
-        border-radius: 2px;
+        border-radius: 10px;
        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;
-            }
        }
    }
 }