From 90a1992550f0e050ce710cb6db473c15f9ec9303 Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Thu, 9 Oct 2025 14:57:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BB=BA=E7=AD=91=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business_basic/module/EvaluationReport.js | 163 +++++-------------
 .../module/EvaluationReport.less              | 145 ++++++----------
 2 files changed, 92 insertions(+), 216 deletions(-)

diff --git a/src/pages/business_basic/module/EvaluationReport.js b/src/pages/business_basic/module/EvaluationReport.js
index 93acf8a..7818aa1 100644
--- a/src/pages/business_basic/module/EvaluationReport.js
+++ b/src/pages/business_basic/module/EvaluationReport.js
@@ -297,99 +297,52 @@ const EvaluationReport = () => {
             }, 100);
 
             const option = {
-                color: ['#8979FF', '#3CC3DF'],
+                color: ['#3C7EFF', '#FF8800', '#FFC403', '#31BCFF'],
                 legend: {
-                    top: "-3px",
-                    itemWidth: 20,
-                    itemHeight: 8,
+                    orient: 'vertical',
+                    right: '2%',
+                    top: 'middle',
+                    itemWidth: 14,
+                    itemHeight: 5,
                     textStyle: {
-                        fontSize: 10
+                        fontSize: 10,
+                        color: '#666'
                     }
                 },
-                grid: {
-                    left: '2%',
-                    right: '4%',
-                    bottom: '2%',
-                    top: '12%',
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'category',
-                    boundaryGap: false,
-                    data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
-                    axisLabel: {
-                        fontSize: 10
-                    }
-                },
-                yAxis: {
-                    type: 'value',
-                    min: 0,
-                    max: 30,
-                    axisLabel: {
-                        formatter: '{value}',
-                        fontSize: 10
-                    }
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{b}<br/>{d}%'
                 },
                 series: [
                     {
-                        name: '消防水泵1',
-                        type: 'line',
-                        smooth: false,
-                        lineStyle: {
-                            width: 2,
-                            color: '#8979FF'
-                        },
-                        areaStyle: {
-                            color: {
-                                type: 'linear',
-                                x: 0,
-                                y: 0,
-                                x2: 0,
-                                y2: 1,
-                                colorStops: [
-                                    { offset: 0, color: 'rgba(137, 121, 255, 0.3)' },
-                                    { offset: 1, color: 'rgba(137, 121, 255, 0.05)' }
-                                ]
-                            }
-                        },
-                        symbol: 'circle',
-                        symbolSize: 4,
+                        name: '设备类型占比',
+                        type: 'pie',
+                        radius: '70%',
+                        center: ['40%', '55%'],
+                        avoidLabelOverlap: false,
                         itemStyle: {
-                            color: '#fff',
-                            borderColor: '#8979FF',
+                            borderRadius: 0,
+                            borderColor: '#fff',
                             borderWidth: 1
                         },
-                        data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25]
-                    },
-                    {
-                        name: '消防水泵2',
-                        type: 'line',
-                        smooth: false,
-                        lineStyle: {
-                            width: 2,
-                            color: '#3CC3DF'
+                        label: {
+                            show: false,
+                            position: 'center'
                         },
-                        areaStyle: {
-                            color: {
-                                type: 'linear',
-                                x: 0,
-                                y: 0,
-                                x2: 0,
-                                y2: 1,
-                                colorStops: [
-                                    { offset: 0, color: 'rgba(60, 195, 223, 0.3)' },
-                                    { offset: 1, color: 'rgba(60, 195, 223, 0.05)' }
-                                ]
+                        emphasis: {
+                            label: {
+                                show: false
                             }
                         },
-                        symbol: 'circle',
-                        symbolSize: 4,
-                        itemStyle: {
-                            color: '#fff',
-                            borderColor: '#3CC3DF',
-                            borderWidth: 1
+                        labelLine: {
+                            show: false
                         },
-                        data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22]
+                        data: [
+                            { value: 25, name: '灭火器' },
+                            { value: 30, name: '消防栓' },
+                            { value: 20, name: '报警器' },
+                            { value: 25, name: '烟雾探测器' }
+                        ]
                     }
                 ]
             };
@@ -781,8 +734,6 @@ const EvaluationReport = () => {
                                 <div className={styles.titleIcon}></div>
                                 <div>设备类型占比</div>
                             </div>
-                            <div className={styles.titleRight}>
-                            </div>
                         </div>
                         <div className={styles.middleBlock2Chart} ref={chartRef}>
                         </div>
@@ -794,48 +745,20 @@ const EvaluationReport = () => {
             <div className={styles.EcontainerBottom}>
                 <div className={styles.sectionContent}>
                     <div className={styles.leftBlock}>
-                        {/* 第一行块 - 蓝色方块加标题 */}
-                        <div className={styles.leftBlockTitle}>
-                            <div className={styles.titleIcon}></div>
-                            <div>预警信息</div>
-                        </div>
-
-                        <div className={styles.developmentContainer}>
-                            <div className={styles.developmentBlock1}>
-                                <div className={styles.leftContent}>
-                                    <div className={styles.mainText}>灭火器压力不足</div>
-                                    <div className={styles.subText}>2号楼3层 丨 15分钟前</div>
-                                </div>
-                                <div className={styles.rightContent}>
-                                    <div className={styles.importantTag}>重要</div>
+                        <div className={styles.maintenanceStack}>
+                            <div className={styles.maintenanceSection}>
+                                <div className={styles.maintenanceTitle}>
+                                    <div className={styles.titleIcon}></div>
+                                    <div>近期维护提醒</div>
                                 </div>
+                                <div className={styles.maintenanceContent}></div>
                             </div>
-                            <div className={styles.developmentBlock1}>
-                                <div className={styles.leftContent}>
-                                    <div className={styles.mainText}>烟雾探测器电池低电量</div>
-                                    <div className={styles.subText}>1号楼5层 丨 1小时前</div>
-                                </div>
-                                <div className={styles.rightContent}>
-                                    <div className={styles.importantTag}>重要</div>
-                                </div>
-                            </div>
-                            <div className={styles.developmentBlock1}>
-                                <div className={styles.leftContent}>
-                                    <div className={styles.mainText}>消防栓维护到期</div>
-                                    <div className={styles.subText}>3号楼1层 丨 2小时前</div>
-                                </div>
-                                <div className={styles.rightContent}>
-                                    <div className={styles.normalTag}>一般</div>
-                                </div>
-                            </div>
-                            <div className={styles.developmentBlock1}>
-                                <div className={styles.leftContent}>
-                                    <div className={styles.mainText}>应急照明故障</div>
-                                    <div className={styles.subText}>地下停车场 丨 3小时前</div>
-                                </div>
-                                <div className={styles.rightContent}>
-                                    <div className={styles.normalTag}>一般</div>
+                            <div className={styles.maintenanceSection}>
+                                <div className={styles.maintenanceTitle}>
+                                    <div className={styles.titleIcon}></div>
+                                    <div>维护任务进度</div>
                                 </div>
+                                <div className={styles.maintenanceContent}></div>
                             </div>
                         </div>
                     </div>
diff --git a/src/pages/business_basic/module/EvaluationReport.less b/src/pages/business_basic/module/EvaluationReport.less
index 3b3ca80..8cad239 100644
--- a/src/pages/business_basic/module/EvaluationReport.less
+++ b/src/pages/business_basic/module/EvaluationReport.less
@@ -20,13 +20,10 @@
             height: 100%;
 
             .middleBlock1 {
-                // flex: 1;
-                width: calc((100% - 42% - 10px) / 2);
+                width: 30%;
                 height: 100%;
                 background: #fff;
-
                 border: 2px solid #fff;
-                // border-radius: 4px;
                 position: relative;
                 padding: 0px 10px 10px 2px;
                 font-family: PingFang SC;
@@ -49,6 +46,7 @@
                         gap: 8px;
                         font-weight: 500;
                         font-size: 14px;
+                        margin-top: 5px;
                         color: #333333;
 
                         .titleIcon {
@@ -66,7 +64,7 @@
                     left: 10px;
                     right: 10px;
                     z-index: 10;
-                    min-height: 100%;   
+                    min-height: 100%;
                 }
             }
 
@@ -98,6 +96,7 @@
                         gap: 8px;
                         font-weight: 500;
                         font-size: 14px;
+                        margin-top: 5px;
                         color: #333333;
 
                         .titleIcon {
@@ -120,7 +119,7 @@
             }
 
             .middleBlock12 {
-                width: 42%;
+                width: 45%;
                 height: 100%;
                 background-color: #fff;
                 display: flex;
@@ -169,7 +168,8 @@
             }
 
             .middleBlock2 {
-                width: calc((100% - 42% - 15px) / 2);
+                // flex: 1;
+                width: calc(100% - 75% - 15px);
                 height: 100%;
                 // background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
                 // border: 2px solid #fff;
@@ -186,7 +186,7 @@
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
-                    // margin-bottom: 10px;
+                    margin-top: 5px;
 
                     .titleLeft {
                         display: flex;
@@ -203,13 +203,6 @@
                         }
                     }
 
-                    .titleRight {
-                        display: flex;
-                        align-items: center;
-                        gap: 8px;
-                        font-size: 12px;
-                        color: #666;
-                    }
                 }
 
                 .middleBlock2Chart {
@@ -223,28 +216,30 @@
 
     // 第三个div - 高度不超过45%
     .EcontainerBottom {
-        height: 45%; // 限制高度不超过45%
-        max-height: 45%; // 确保最大高度不超过45%
+        // height: 45%; // 限制高度不超过45%
+        // max-height: 45%; // 确保最大高度不超过45%
         display: flex;
         flex-direction: column;
+        flex: 1;
 
         .sectionContent {
             display: flex;
             flex-direction: row;
+            flex: 1;
             gap: 10px;
             padding: 0;
 
             .leftBlock {
-                width: 28%;
+                width: 30%;
                 flex-shrink: 0;
                 height: 100%;
-                background: #fff;
+                // background: #fff;
                 // background-size: cover;
                 padding: 0;
                 display: flex;
                 flex-direction: column;
                 gap: 10px;
-                padding: 15px;
+                // padding: 15px;
 
                 .leftBlockTitle {
                     display: flex;
@@ -263,86 +258,44 @@
                     }
                 }
 
-                .developmentContainer {
+                .maintenanceStack {
                     width: 100%;
                     height: 100%;
                     display: flex;
                     flex-direction: column;
-                    gap: 8px;
+                    gap: 10px;
 
-                     .developmentBlock1 {
-                         flex: 1;
-                         background-color: #F1F7FF;
-                         border-radius: 4px;
-                         padding: 15px 20px;
-                         display: flex;
-                         align-items: center;
-                         width: 100%;
-
-                         .leftContent {
-                             flex: 1;
-                             display: flex;
-                             flex-direction: column;
-                             gap: 8px;
-                             min-width: 0;
-
-                             .mainText {
-                                 color: #333333;
-                                 font-size: 14px;
-                                 font-weight: 500;
-                                 font-family: PingFang SC;
-                                 width: 100%;
-                                 max-width: 500px;
-                             }
-
-                             .subText {
-                                 color: #666666;
-                                 font-size: 12px;
-                                 font-weight: 400;
-                                 font-family: PingFang SC;
-                                 width: 100%;
-                                 max-width: 400px;
-                             }
-                         }
-
-                         .rightContent {
-                             flex: 0 0 auto;
-                             display: flex;
-                             justify-content: flex-end;
-                             align-items: center;
-                             padding-right: 10px;
-                             min-width: 80px;
-
-                             .importantTag {
-                                 background-color: #FFE0E2;
-                                 color: #FF3E48;
-                                 font-size: 14px;
-                                 font-weight: 500;
-                                 font-family: PingFang SC;
-                                 width: 45px;
-                                 height: 25px;
-                                 display: flex;
-                                 align-items: center;
-                                 justify-content: center;
-                                 border-radius: 4px;
-                             }
-
-                             .normalTag {
-                                 background-color: #DAF3FF;
-                                 color: #00AAFA;
-                                 font-size: 14px;
-                                 font-weight: 500;
-                                 font-family: PingFang SC;
-                                 width: 45px;
-                                 height: 25px;
-
-                                 display: flex;
-                                 align-items: center;
-                                 justify-content: center;
-                                 border-radius: 4px;
-                             }
-                         }
-                     }
+                    .maintenanceSection {
+                        width: 100%;
+                        height: 50%;
+                        background: #FFF;
+                        border-radius: 4px;
+                        display: flex;
+                        flex-direction: column;
+                        padding: 12px 14px;
+
+                        .maintenanceTitle {
+                            display: flex;
+                            align-items: center;
+                            gap: 8px;
+                            font-family: PingFang SC;
+                            font-weight: 500;
+                            font-size: 14px;
+                            color: #333333;
+                            margin-bottom: 8px;
+                        }
+
+                        .titleIcon {
+                            width: 3px;
+                            height: 16px;
+                            background-color: #2E4CD4;
+                        }
+
+                        .maintenanceContent {
+                            flex: 1;
+                            width: 100%;
+                        }
+                    }
                 }
             }
 
@@ -450,4 +403,4 @@
             }
         }
     }
-}
+}
\ No newline at end of file