From d6676fcbdfa2bea6dbd36d8377c7359420deedf8 Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Thu, 9 Oct 2025 14:15:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business_basic/module/EvaluationReport.js | 291 ++++++++++++------
 .../module/EvaluationReport.less              | 118 +++----
 2 files changed, 240 insertions(+), 169 deletions(-)

diff --git a/src/pages/business_basic/module/EvaluationReport.js b/src/pages/business_basic/module/EvaluationReport.js
index 9b088e0..93acf8a 100644
--- a/src/pages/business_basic/module/EvaluationReport.js
+++ b/src/pages/business_basic/module/EvaluationReport.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Card, Result, Select, Button, Segmented } from 'antd';
-import { CheckCircleOutlined, ExportOutlined } from '@ant-design/icons';
+import { CheckCircleOutlined, ExportOutlined, HeartFilled, LineHeightOutlined } from '@ant-design/icons';
 import * as echarts from 'echarts';
 import StandardTable from '@/components/StandardTable';
 import styles from './EvaluationReport.less';
@@ -31,119 +31,237 @@ const EvaluationReport = () => {
         total: 0,
     });
 
-    // 饼图初始化
+    // 柱状图初始化
     useEffect(() => {
         if (pieChartRef.current) {
-            const pieChart = echarts.init(pieChartRef.current);
+            const barChart = echarts.init(pieChartRef.current);
 
-            const pieOption = {
-                color: ['#44BB5F', '#F8C541', '#A493FB', '#4B69F1', '#949FD0'],
-                legend: {
-                    orient: 'vertical',
-                    right: '10%',
-                    top: 'center',
-                    itemWidth: 8,
-                    itemHeight: 8,
-                    textStyle: {
+            const barOption = {
+                grid: {
+                    left: '5%',
+                    right: '5%',
+                    bottom: '10%',
+                    top: '20%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['灭火器', '消火栓', '报警器', '疏散灯', '排烟设备'],
+                    axisLabel: {
                         fontSize: 12,
-                        color: '#333'
+                        color: '#333',
+                        interval: 0,
+                        rotate: 0
+                    },
+                    axisLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    min: 0,
+                    max: 50,
+                    interval: 10,
+                    axisLabel: {
+                        fontSize: 12,
+                        color: '#666',
+                        formatter: '{value}'
+                    },
+                    axisLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: '#00001A26',
+                            type: 'dashed'
+                        }
                     }
                 },
                 series: [{
-                    name: '设备状态',
-                    type: 'pie',
-                    radius: ['40%', '70%'],
-                    center: ['35%', '50%'],
-                    avoidLabelOverlap: false,
-                    label: {
-                        show: false,
-                        position: 'center'
+                    name: '使用次数',
+                    type: 'bar',
+                    barWidth: 27,
+                    data: [35, 28, 42, 31, 38],
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [
+                                { offset: 0, color: '#199BFB' },
+                                { offset: 1, color: '#1373FA' }
+                            ]
+                        }
                     },
                     emphasis: {
-                        label: {
-                            show: true,
-                            fontSize: '14',
-                            fontWeight: 'bold'
+                        itemStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    { offset: 0, color: '#0D7AE8' },
+                                    { offset: 1, color: '#0F5BC7' }
+                                ]
+                            }
                         }
+                    }
+                }],
+                legend: {
+                    show: true,
+                    top: '5%',
+                    left: 'center',
+                    itemWidth: 15,
+                    itemHeight: 3,
+                    textStyle: {
+                        fontSize: 12,
+                        color: '#333'
                     },
-                    labelLine: {
-                        show: false
+                    data: [{
+                        name: '使用次数',
+                        icon: 'rect',
+                        itemStyle: {
+                            color: '#4B69F1'
+                        }
+                    }]
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
                     },
-                    data: [
-                        { value: 480, name: '正常' },
-                        { value: 289, name: '故障' },
-                        { value: 200, name: '维修中' },
-                        { value: 150, name: '待验收' },
-                        { value: 161, name: '停用' }
-                    ]
-                }]
+                    formatter: function(params) {
+                        return `${params[0].name}<br/>使用次数: ${params[0].value}`;
+                    }
+                }
             };
 
-            pieChart.setOption(pieOption);
+            barChart.setOption(barOption);
 
             // 响应式调整
-            const handlePieResize = () => {
-                if (pieChart && !pieChart.isDisposed()) {
-                    pieChart.resize();
+            const handleBarResize = () => {
+                if (barChart && !barChart.isDisposed()) {
+                    barChart.resize();
                 }
             };
 
-            window.addEventListener('resize', handlePieResize);
+            window.addEventListener('resize', handleBarResize);
 
             return () => {
-                window.removeEventListener('resize', handlePieResize);
-                if (pieChart && !pieChart.isDisposed()) {
-                    pieChart.dispose();
+                window.removeEventListener('resize', handleBarResize);
+                if (barChart && !barChart.isDisposed()) {
+                    barChart.dispose();
                 }
             };
         }
     }, []);
 
-    // 故障类型饼图初始化
+    // 维护费用趋势折线图初始化
     useEffect(() => {
         if (faultPieChartRef.current) {
             const faultPieChart = echarts.init(faultPieChartRef.current);
 
             const faultPieOption = {
-                color: ['#FF3E48', '#FF8800', '#FFC403'],
+
                 legend: {
-                    orient: 'vertical',
-                    right: '10%',
-                    top: 'center',
-                    itemWidth: 8,
+                    show: true,
+                    left: 'center',
+                    itemWidth: 20,
                     itemHeight: 8,
                     textStyle: {
+                        color: '#333',
+                        fontSize: 12
+                    }
+                },
+                grid: {
+                    left: '5%',
+                    right: '5%',
+                    bottom: '10%',
+                    top: '15%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#E5E5E5'
+                        }
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        color: '#666',
                         fontSize: 12,
-                        color: '#333'
+                        interval: 0
                     }
                 },
-                series: [{
-                    name: '设备故障类型',
-                    type: 'pie',
-                    radius: '70%',
-                    center: ['35%', '50%'],
-                    avoidLabelOverlap: false,
-                    label: {
-                        show: true,
-                        position: 'outside',
-                        formatter: '{b}: {c}',
-                        fontSize: 12
+                yAxis: {
+                    type: 'value',
+                    min: 20000,
+                    max: 30000,
+                    interval: 2000,
+                    axisLine: {
+                        show: false
                     },
-                    emphasis: {
-                        label: {
-                            show: true,
-                            fontSize: '14',
-                            fontWeight: 'bold'
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        color: '#666',
+                        fontSize: 12,
+                        formatter: '¥{value}'
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: '#00001A26',
+                            type: 'dashed'
                         }
+                    }
+                },
+                series: [{
+                    name: '费用',
+                    type: 'line',
+                    data: [29000, 21000, 27500, 21900, 26000, 25000, 27000, 24000, 22300, 28000, 29000, 27000],
+                    smooth: false,
+                    symbol: 'circle',
+                    symbolSize: 6,
+                    lineStyle: {
+                        color: '#1269FF',
+                        width: 1
                     },
-                    labelLine: {
-                        show: true
+                    itemStyle: {
+                        color: '#FFFFFF',
+                        borderColor: '#1269FF',
+                        borderWidth: 1
                     },
-                    data: [
-                        { value: 120, name: '紧急' },
-                        { value: 80, name: '重要' },
-                        { value: 60, name: '一般' }
-                    ]
+                    areaStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0,
+                                color: 'rgba(18, 105, 255, 0.3)'
+                            }, {
+                                offset: 1,
+                                color: 'rgba(18, 105, 255, 0.05)'
+                            }]
+                        }
+                    }
                 }]
             };
 
@@ -180,7 +298,6 @@ const EvaluationReport = () => {
 
             const option = {
                 color: ['#8979FF', '#3CC3DF'],
-
                 legend: {
                     top: "-3px",
                     itemWidth: 20,
@@ -639,13 +756,6 @@ const EvaluationReport = () => {
                                 <div className={styles.titleIcon}></div>
                                 设备使用频率分析
                             </div>
-                            <Segmented
-                                className={styles.block1Segmented}
-                                options={['月', '季', '年']}
-                                onChange={(value) => {
-                                    console.log(value);
-                                }}
-                            />
                         </div>
                         {/* 设备状态饼图 */}
                         <div className={styles.deviceStatusChart} ref={pieChartRef}>
@@ -658,18 +768,9 @@ const EvaluationReport = () => {
                                 <div className={styles.titleIcon}></div>
                                 近一年维护费用趋势
                             </div>
-                            <Select
-                                className={styles.customSelect}
-                                style={{ width: 120 }}
-                                defaultValue="全部区域"
-                                options={[
-                                    { value: '全部区域', label: '全部区域' },
-                                    { value: '部分区域', label: '部分区域' },
-                                ]}
-                            />
                         </div>
 
-                        {/* 设备故障类型饼图 */}
+                        {/* 维护费用趋势折线图 */}
                         <div className={styles.deviceStatusChart} ref={faultPieChartRef}>
                         </div>
                     </div>
@@ -681,14 +782,6 @@ const EvaluationReport = () => {
                                 <div>设备类型占比</div>
                             </div>
                             <div className={styles.titleRight}>
-                                <Select
-                                    style={{ width: 80 }}
-                                    defaultValue="今日"
-                                    options={[
-                                        { value: '近3天', label: '近3天' },
-                                        { value: '近7天', label: '近7天' },
-                                    ]}
-                                />
                             </div>
                         </div>
                         <div className={styles.middleBlock2Chart} ref={chartRef}>
diff --git a/src/pages/business_basic/module/EvaluationReport.less b/src/pages/business_basic/module/EvaluationReport.less
index 6293138..3b3ca80 100644
--- a/src/pages/business_basic/module/EvaluationReport.less
+++ b/src/pages/business_basic/module/EvaluationReport.less
@@ -21,7 +21,7 @@
 
             .middleBlock1 {
                 // flex: 1;
-                width: 28%;
+                width: calc((100% - 42% - 10px) / 2);
                 height: 100%;
                 background: #fff;
 
@@ -58,43 +58,15 @@
                         }
                     }
 
-                    .block1Segmented {
-                        padding: 0;
-                        margin: 0;
-                        border: 1px solid #E3E3E3;
-                        border-radius: 4px;
-                        height: 28px;
-
-                        :global(.ant-segmented) {
-                            padding: 0;
-                            margin: 0;
-                            height: 28px;
-                        }
-
-                        :global(.ant-segmented-item) {
-                            font-size: 12px;
-                            padding: 2px 8px;
-                            height: 26px;
-                            line-height: 26px;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                        }
-
-                        :global(.ant-segmented-item-selected) {
-                            background-color: #1890ff;
-                            color: #fff;
-                        }
-                    }
                 }
 
                 .deviceStatusChart {
                     position: absolute;
-                    top: 35px;
+                    top: 10px;
                     left: 10px;
                     right: 10px;
-                    bottom: 10px;
                     z-index: 10;
+                    min-height: 100%;   
                 }
             }
 
@@ -135,63 +107,69 @@
                         }
                     }
 
-                    .block1Segmented {
-                        padding: 0;
-                        margin: 0;
-                        border: 1px solid #E3E3E3;
-                        border-radius: 4px;
-                        height: 28px;
+                }
 
-                        :global(.ant-segmented) {
-                            padding: 0;
-                            margin: 0;
-                            height: 28px;
-                        }
+                .deviceStatusChart {
+                    position: absolute;
+                    top: 10px;
+                    left: 10px;
+                    right: 10px;
+                    // bottom: 10px;
+                    z-index: 10;
+                }
+            }
 
-                        :global(.ant-segmented-item) {
-                            font-size: 12px;
-                            padding: 2px 8px;
-                            height: 26px;
-                            line-height: 26px;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                        }
+            .middleBlock12 {
+                width: 42%;
+                height: 100%;
+                background-color: #fff;
+                display: flex;
+                flex-direction: column;
+                font-family: PingFang SC;
+                font-size: 14px;
+                color: #333333;
+                padding: 5px 10px 5px 10px;
+                position: relative;
 
-                        :global(.ant-segmented-item-selected) {
-                            background-color: #1890ff;
-                            color: #fff;
-                        }
-                    }
+                .block1Header {
+                    position: absolute;
+                    top: 5px;
+                    left: 10px;
+                    right: 10px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    z-index: 10;
 
-                    .customSelect {
-                        :global(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) {
-                            height: 26px !important;
-                            display: flex !important;
-                            align-items: center !important;
-                        }
+                    .block1Title {
+                        display: flex;
+                        align-items: center;
+                        gap: 8px;
+                        font-weight: 500;
+                        font-size: 14px;
+                        color: #333333;
 
-                        :global(.ant-select-selection-item) {
-                            line-height: 24px !important;
-                            height: 24px !important;
-                            display: flex !important;
-                            align-items: center !important;
+                        .titleIcon {
+                            width: 3px;
+                            height: 14px;
+                            background-color: #2E4CD4;
                         }
                     }
                 }
 
                 .deviceStatusChart {
                     position: absolute;
-                    top: 35px;
+                    top: 10px;
                     left: 10px;
                     right: 10px;
-                    bottom: 10px;
+                    // bottom: 10px;
+                    min-height: 100%;
                     z-index: 10;
                 }
             }
 
             .middleBlock2 {
-                flex: 1;
+                width: calc((100% - 42% - 15px) / 2);
                 height: 100%;
                 // background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
                 // border: 2px solid #fff;