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}
使用次数: ${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 = () => {
设备使用频率分析 - { - console.log(value); - }} - /> {/* 设备状态饼图 */}
@@ -658,18 +768,9 @@ const EvaluationReport = () => {
近一年维护费用趋势
-
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;