jiangxucong
/
dq-fms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

上传

Browse Source
main
wangyunfei 3 weeks ago
parent 1881fcb3e8
commit d6676fcbdf
2 changed files with 240 additions and 169 deletions
Show Stats Download Patch File Download Diff File

291
src/pages/business_basic/module/EvaluationReport.js
Unescape Escape View File

@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Card, Result, Select, Button, Segmented } from 'antd'; 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 * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable'; import StandardTable from '@/components/StandardTable';
import styles from './EvaluationReport.less'; import styles from './EvaluationReport.less';
@ -31,119 +31,237 @@ const EvaluationReport = () => {
total: 0, total: 0,
}); });
// 饼图初始化 // 柱状图初始化
useEffect(() => { useEffect(() => {
if (pieChartRef.current) { if (pieChartRef.current) {
const pieChart = echarts.init(pieChartRef.current); const barChart = echarts.init(pieChartRef.current);
const pieOption = { const barOption = {
color: ['#44BB5F', '#F8C541', '#A493FB', '#4B69F1', '#949FD0'], grid: {
legend: { left: '5%',
orient: 'vertical', right: '5%',
right: '10%', bottom: '10%',
top: 'center', top: '20%',
itemWidth: 8, containLabel: true
itemHeight: 8, },
textStyle: { xAxis: {
type: 'category',
data: ['灭火器', '消火栓', '报警器', '疏散灯', '排烟设备'],
axisLabel: {
fontSize: 12, 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: [{ series: [{
name: '设备状态', name: '使用次数',
type: 'pie', type: 'bar',
radius: ['40%', '70%'], barWidth: 27,
center: ['35%', '50%'], data: [35, 28, 42, 31, 38],
avoidLabelOverlap: false, itemStyle: {
label: { color: {
show: false, type: 'linear',
position: 'center' x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#199BFB' },
{ offset: 1, color: '#1373FA' }
]
}
}, },
emphasis: { emphasis: {
label: { itemStyle: {
show: true, color: {
fontSize: '14', type: 'linear',
fontWeight: 'bold' 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: { data: [{
show: false name: '使用次数',
icon: 'rect',
itemStyle: {
color: '#4B69F1'
}
}]
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}, },
data: [ formatter: function(params) {
{ value: 480, name: '正常' }, return `${params[0].name}<br/>使用次数: ${params[0].value}`;
{ value: 289, name: '故障' }, }
{ value: 200, name: '维修中' }, }
{ value: 150, name: '待验收' },
{ value: 161, name: '停用' }
]
}]
}; };
pieChart.setOption(pieOption); barChart.setOption(barOption);
// 响应式调整 // 响应式调整
const handlePieResize = () => { const handleBarResize = () => {
if (pieChart && !pieChart.isDisposed()) { if (barChart && !barChart.isDisposed()) {
pieChart.resize(); barChart.resize();
} }
}; };
window.addEventListener('resize', handlePieResize); window.addEventListener('resize', handleBarResize);
return () => { return () => {
window.removeEventListener('resize', handlePieResize); window.removeEventListener('resize', handleBarResize);
if (pieChart && !pieChart.isDisposed()) { if (barChart && !barChart.isDisposed()) {
pieChart.dispose(); barChart.dispose();
} }
}; };
} }
}, []); }, []);
// 故障类型饼图初始化 // 维护费用趋势折线图初始化
useEffect(() => { useEffect(() => {
if (faultPieChartRef.current) { if (faultPieChartRef.current) {
const faultPieChart = echarts.init(faultPieChartRef.current); const faultPieChart = echarts.init(faultPieChartRef.current);
const faultPieOption = { const faultPieOption = {
color: ['#FF3E48', '#FF8800', '#FFC403'],
legend: { legend: {
orient: 'vertical', show: true,
right: '10%', left: 'center',
top: 'center', itemWidth: 20,
itemWidth: 8,
itemHeight: 8, itemHeight: 8,
textStyle: { 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, fontSize: 12,
color: '#333' interval: 0
} }
}, },
series: [{ yAxis: {
name: '设备故障类型', type: 'value',
type: 'pie', min: 20000,
radius: '70%', max: 30000,
center: ['35%', '50%'], interval: 2000,
avoidLabelOverlap: false, axisLine: {
label: { show: false
show: true,
position: 'outside',
formatter: '{b}: {c}',
fontSize: 12
}, },
emphasis: { axisTick: {
label: { show: false
show: true, },
fontSize: '14', axisLabel: {
fontWeight: 'bold' 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: { itemStyle: {
show: true color: '#FFFFFF',
borderColor: '#1269FF',
borderWidth: 1
}, },
data: [ areaStyle: {
{ value: 120, name: '紧急' }, color: {
{ value: 80, name: '重要' }, type: 'linear',
{ value: 60, name: '一般' } 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 = { const option = {
color: ['#8979FF', '#3CC3DF'], color: ['#8979FF', '#3CC3DF'],
legend: { legend: {
top: "-3px", top: "-3px",
itemWidth: 20, itemWidth: 20,
@ -639,13 +756,6 @@ const EvaluationReport = () => {
<div className={styles.titleIcon}></div> <div className={styles.titleIcon}></div>
设备使用频率分析 设备使用频率分析
</div> </div>
<Segmented
className={styles.block1Segmented}
options={['月', '季', '年']}
onChange={(value) => {
console.log(value);
}}
/>
</div> </div>
{/* 设备状态饼图 */} {/* 设备状态饼图 */}
<div className={styles.deviceStatusChart} ref={pieChartRef}> <div className={styles.deviceStatusChart} ref={pieChartRef}>
@ -658,18 +768,9 @@ const EvaluationReport = () => {
<div className={styles.titleIcon}></div> <div className={styles.titleIcon}></div>
近一年维护费用趋势 近一年维护费用趋势
</div> </div>
<Select
className={styles.customSelect}
style={{ width: 120 }}
defaultValue="全部区域"
options={[
{ value: '全部区域', label: '全部区域' },
{ value: '部分区域', label: '部分区域' },
]}
/>
</div> </div>
{/* 设备故障类型饼图 */} {/* 维护费用趋势折线图 */}
<div className={styles.deviceStatusChart} ref={faultPieChartRef}> <div className={styles.deviceStatusChart} ref={faultPieChartRef}>
</div> </div>
</div> </div>
@ -681,14 +782,6 @@ const EvaluationReport = () => {
<div>设备类型占比</div> <div>设备类型占比</div>
</div> </div>
<div className={styles.titleRight}> <div className={styles.titleRight}>
<Select
style={{ width: 80 }}
defaultValue="今日"
options={[
{ value: '近3天', label: '近3天' },
{ value: '近7天', label: '近7天' },
]}
/>
</div> </div>
</div> </div>
<div className={styles.middleBlock2Chart} ref={chartRef}> <div className={styles.middleBlock2Chart} ref={chartRef}>

118
src/pages/business_basic/module/EvaluationReport.less
Unescape Escape View File

@ -21,7 +21,7 @@
.middleBlock1 { .middleBlock1 {
// flex: 1; // flex: 1;
width: 28%; width: calc((100% - 42% - 10px) / 2);
height: 100%; height: 100%;
background: #fff; 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 { .deviceStatusChart {
position: absolute; position: absolute;
top: 35px; top: 10px;
left: 10px; left: 10px;
right: 10px; right: 10px;
bottom: 10px;
z-index: 10; 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) { .deviceStatusChart {
padding: 0; position: absolute;
margin: 0; top: 10px;
height: 28px; left: 10px;
} right: 10px;
// bottom: 10px;
z-index: 10;
}
}
:global(.ant-segmented-item) { .middleBlock12 {
font-size: 12px; width: 42%;
padding: 2px 8px; height: 100%;
height: 26px; background-color: #fff;
line-height: 26px; display: flex;
display: flex; flex-direction: column;
align-items: center; font-family: PingFang SC;
justify-content: center; font-size: 14px;
} color: #333333;
padding: 5px 10px 5px 10px;
position: relative;
:global(.ant-segmented-item-selected) { .block1Header {
background-color: #1890ff; position: absolute;
color: #fff; top: 5px;
} left: 10px;
} right: 10px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
.customSelect { .block1Title {
:global(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) { display: flex;
height: 26px !important; align-items: center;
display: flex !important; gap: 8px;
align-items: center !important; font-weight: 500;
} font-size: 14px;
color: #333333;
:global(.ant-select-selection-item) { .titleIcon {
line-height: 24px !important; width: 3px;
height: 24px !important; height: 14px;
display: flex !important; background-color: #2E4CD4;
align-items: center !important;
} }
} }
} }
.deviceStatusChart { .deviceStatusChart {
position: absolute; position: absolute;
top: 35px; top: 10px;
left: 10px; left: 10px;
right: 10px; right: 10px;
bottom: 10px; // bottom: 10px;
min-height: 100%;
z-index: 10; z-index: 10;
} }
} }
.middleBlock2 { .middleBlock2 {
flex: 1; width: calc((100% - 42% - 15px) / 2);
height: 100%; height: 100%;
// background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%); // background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
// border: 2px solid #fff; // border: 2px solid #fff;

Write Preview
Loading…
Cancel
Save