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

样式

Browse Source
main
wangyunfei 4 weeks ago
parent b8fa9e826b
commit 7ad16dac75
2 changed files with 161 additions and 151 deletions
Show Stats Download Patch File Download Diff File

218
src/pages/business_basic/module/RiskAssessment.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 } from 'antd'; import { Card, Result, Select, Button, Segmented } from 'antd';
import { CheckCircleOutlined } from '@ant-design/icons'; import { CheckCircleOutlined } from '@ant-design/icons';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable'; import StandardTable from '@/components/StandardTable';
@ -21,6 +21,7 @@ import eqicon4 from '@/assets/business_basic/eqicon4.png';
const RiskAssessment = () => { const RiskAssessment = () => {
const chartRef = useRef(null); const chartRef = useRef(null);
const pieChartRef = useRef(null);
const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [selectedRows, setSelectedRows] = useState([]); const [selectedRows, setSelectedRows] = useState([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@ -31,6 +32,74 @@ const RiskAssessment = () => {
total: 0, total: 0,
}); });
// 饼图初始化
useEffect(() => {
if (pieChartRef.current) {
const pieChart = echarts.init(pieChartRef.current);
const pieOption = {
color: ['#44BB5F', '#F8C541', '#A493FB', '#4B69F1', '#949FD0'],
legend: {
orient: 'vertical',
right: '10%',
top: 'center',
itemWidth: 8,
itemHeight: 8,
textStyle: {
fontSize: 12,
color: '#333'
}
},
series: [{
name: '设备状态',
type: 'pie',
radius: ['40%', '70%'],
center: ['35%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '14',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 480, name: '正常' },
{ value: 289, name: '故障' },
{ value: 200, name: '维修中' },
{ value: 150, name: '待验收' },
{ value: 161, name: '停用' }
]
}]
};
pieChart.setOption(pieOption);
// 响应式调整
const handlePieResize = () => {
if (pieChart && !pieChart.isDisposed()) {
pieChart.resize();
}
};
window.addEventListener('resize', handlePieResize);
return () => {
window.removeEventListener('resize', handlePieResize);
if (pieChart && !pieChart.isDisposed()) {
pieChart.dispose();
}
};
}
}, []);
useEffect(() => { useEffect(() => {
if (chartRef.current) { if (chartRef.current) {
const chart = echarts.init(chartRef.current); const chart = echarts.init(chartRef.current);
@ -43,13 +112,13 @@ const RiskAssessment = () => {
}, 100); }, 100);
const option = { const option = {
color: ['#FF2526', '#FF8800', '#FFC403', '#65E5F9'], color: ['#8979FF', '#3CC3DF'],
legend: { legend: {
data: ['重大风险', '较高风险', '一般风险', '低风险'], data: ['消防水泵1', '消防水泵2'],
top: "-3px", top: "-3px",
left: "center", left: "center",
itemGap: 40, // 图例间距 itemGap: 40,
textStyle: { textStyle: {
fontSize: 10 fontSize: 10
} }
@ -64,7 +133,7 @@ const RiskAssessment = () => {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['9/22', '9/23', '9/24', '9/25', '9/26', '9/27', '9/28'], 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', '21:00'],
axisLabel: { axisLabel: {
fontSize: 10 fontSize: 10
} }
@ -80,12 +149,12 @@ const RiskAssessment = () => {
}, },
series: [ series: [
{ {
name: '重大风险', name: '消防水泵1',
type: 'line', type: 'line',
smooth: true, smooth: true,
lineStyle: { lineStyle: {
width: 1.5, width: 2,
color: '#FF2526' color: '#8979FF'
}, },
areaStyle: { areaStyle: {
color: { color: {
@ -95,45 +164,27 @@ const RiskAssessment = () => {
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: 'rgba(38, 12, 12, 0.4)' }, { offset: 0, color: 'rgba(137, 121, 255, 0.3)' },
{ offset: 1, color: 'rgba(255, 37, 38, 0)' } { offset: 1, color: 'rgba(137, 121, 255, 0.05)' }
] ]
} }
}, },
symbol: 'none', symbol: 'circle',
data: [8, 15, 12, 22, 18, 26, 20] symbolSize: 4,
}, itemStyle: {
{ color: '#fff',
name: '较高风险', borderColor: '#8979FF',
type: 'line', borderWidth: 1
smooth: true,
lineStyle: {
width: 1.5,
color: '#FF8800'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(255, 136, 0, 0.4)' },
{ offset: 1, color: 'rgba(255, 136, 0, 0)' }
]
}
}, },
symbol: 'none', data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25, 24]
data: [5, 8, 6, 12, 10, 15, 13]
}, },
{ {
name: '一般风险', name: '消防水泵2',
type: 'line', type: 'line',
smooth: true, smooth: true,
lineStyle: { lineStyle: {
width: 1.5, width: 2,
color: '#FFC403' color: '#3CC3DF'
}, },
areaStyle: { areaStyle: {
color: { color: {
@ -143,37 +194,19 @@ const RiskAssessment = () => {
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: 'rgba(255, 196, 3, 0.4)' }, { offset: 0, color: 'rgba(60, 195, 223, 0.3)' },
{ offset: 1, color: 'rgba(255, 196, 3, 0)' } { offset: 1, color: 'rgba(60, 195, 223, 0.05)' }
] ]
} }
}, },
symbol: 'none', symbol: 'circle',
data: [12, 18, 15, 25, 22, 24, 26] symbolSize: 4,
}, itemStyle: {
{ color: '#fff',
name: '低风险', borderColor: '#3CC3DF',
type: 'line', borderWidth: 1
smooth: true,
lineStyle: {
width: 1.5,
color: '#65E5F9'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(101, 229, 249, 0.4)' },
{ offset: 1, color: 'rgba(101, 229, 249, 0)' }
]
}
}, },
symbol: 'none', data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22, 21]
data: [3, 5, 7, 9, 6, 8, 4]
} }
] ]
}; };
@ -553,60 +586,43 @@ const RiskAssessment = () => {
<div className={styles.sectionContent}> <div className={styles.sectionContent}>
<div className={styles.middleBlock1}> <div className={styles.middleBlock1}>
<div className={styles.block1Header}> <div className={styles.block1Header}>
<div className={styles.block1Title}> <div className={styles.block1Title}>
<div className={styles.titleIcon}></div> <div className={styles.titleIcon}></div>
危险源风险热力分布 设备状态分布
</div> </div>
<Select <Segmented
className={styles.block1Select} className={styles.block1Segmented}
defaultValue="全部区域" options={['月', '季', '年']}
options={[ onChange={(value) => {
{ value: '全部区域', label: '全部区域' }, console.log(value);
{ value: '区域A', label: '区域A' }, }}
{ value: '区域B', label: '区域B' },
{ value: '区域C', label: '区域C' }
]}
/> />
</div> </div>
{/* 风险等级图例 */} {/* 设备状态饼图 */}
<div className={styles.riskLegend}> <div className={styles.deviceStatusChart} ref={pieChartRef}>
<div className={styles.legendItem}>
<div className={styles.legendDot} style={{ backgroundColor: '#F53F3F' }}></div>
<span className={styles.legendText}>重大风险</span>
</div>
<div className={styles.legendItem}>
<div className={styles.legendDot} style={{ backgroundColor: '#FF7D00' }}></div>
<span className={styles.legendText}>较大风险</span>
</div>
<div className={styles.legendItem}>
<div className={styles.legendDot} style={{ backgroundColor: '#FFAA01' }}></div>
<span className={styles.legendText}>一般风险</span>
</div>
<div className={styles.legendItem}>
<div className={styles.legendDot} style={{ backgroundColor: '#65E5F9' }}></div>
<span className={styles.legendText}>低风险</span>
</div>
</div> </div>
<div className={styles.block1Chart}> {/* <div className={styles.block1Chart}>
<img src={map1} alt="地图" className={styles.mapImage} /> <img src={map1} alt="地图" className={styles.mapImage} />
</div> </div> */}
</div> </div>
<div className={styles.middleBlock2}> <div className={styles.middleBlock2}>
<div className={styles.middleBlock2Title}> <div className={styles.middleBlock2Title}>
<div className={styles.titleLeft}> <div className={styles.titleLeft}>
<div className={styles.titleIcon}></div> <div className={styles.titleIcon}></div>
<div>风险等级趋势</div> <div>设备运行参数</div>
</div> </div>
<div className={styles.titleRight}> <div className={styles.titleRight}>
<Select <Select
style={{ width: 100 }} style={{ width: 80 }}
defaultValue="近七天" defaultValue="今日"
options={[ options={[
{ value: '近三天', label: '近3天' }, { value: '近3天', label: '近3天' },
{ value: '近30天', label: '近30天' }, { value: '近7天', label: '近7天' },
]} ]}
/> />
</div> </div>

94
src/pages/business_basic/module/RiskAssessment.less
Unescape Escape View File

@ -157,67 +157,61 @@
} }
} }
.block1Select { .block1Segmented {
width: 100px; padding: 0;
margin: 0;
border: 1px solid #E3E3E3;
border-radius: 4px;
height: 28px;
:global(.ant-select-selector) { :global(.ant-segmented) {
height: 28px !important; padding: 0;
font-size: 12px !important; margin: 0;
height: 28px;
} }
:global(.ant-select-selection-item) { :global(.ant-segmented-item) {
line-height: 26px !important; font-size: 12px;
font-size: 12px !important; 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;
} }
} }
} }
.riskLegend { .deviceStatusChart {
position: absolute; position: absolute;
Top: 18px; top: 35px;
left: 50%; left: 10px;
transform: translateX(-50%); right: 10px;
display: flex; bottom: 10px;
justify-content: center;
align-items: center;
gap: 10px;
z-index: 10; z-index: 10;
.legendItem {
display: flex;
align-items: center;
gap: 5px;
.legendDot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.legendText {
font-size: 12px;
color: #333;
font-weight: 400;
}
}
} }
.block1Chart { // .block1Chart {
width: 100%; // width: 100%;
height: 100%; // height: 100%;
margin-top: 20px; // margin-top: 20px;
.mapImage { // .mapImage {
margin-top: 7%; // margin-top: 7%;
width: 90%; // width: 90%;
height: 77%; // height: 77%;
object-fit: cover; // object-fit: cover;
border-radius: 4px; // border-radius: 4px;
display: block; // display: block;
margin-left: auto; // margin-left: auto;
margin-right: auto; // margin-right: auto;
} // }
} // }
} }
.middleBlock2 { .middleBlock2 {

Write Preview
Loading…
Cancel
Save