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 { Card, Result, Select, Button } from 'antd';
import { Card, Result, Select, Button, Segmented } from 'antd';
import { CheckCircleOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable';
@ -21,6 +21,7 @@ import eqicon4 from '@/assets/business_basic/eqicon4.png';
const RiskAssessment = () => {
const chartRef = useRef(null);
const pieChartRef = useRef(null);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [selectedRows, setSelectedRows] = useState([]);
const [loading, setLoading] = useState(false);
@ -31,6 +32,74 @@ const RiskAssessment = () => {
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(() => {
if (chartRef.current) {
const chart = echarts.init(chartRef.current);
@ -43,13 +112,13 @@ const RiskAssessment = () => {
}, 100);
const option = {
color: ['#FF2526', '#FF8800', '#FFC403', '#65E5F9'],
color: ['#8979FF', '#3CC3DF'],
legend: {
data: ['重大风险', '较高风险', '一般风险', '低风险'],
data: ['消防水泵1', '消防水泵2'],
top: "-3px",
left: "center",
itemGap: 40, // 图例间距
itemGap: 40,
textStyle: {
fontSize: 10
}
@ -64,7 +133,7 @@ const RiskAssessment = () => {
xAxis: {
type: 'category',
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: {
fontSize: 10
}
@ -80,12 +149,12 @@ const RiskAssessment = () => {
},
series: [
{
name: '重大风险',
name: '消防水泵1',
type: 'line',
smooth: true,
lineStyle: {
width: 1.5,
color: '#FF2526'
width: 2,
color: '#8979FF'
},
areaStyle: {
color: {
@ -95,45 +164,27 @@ const RiskAssessment = () => {
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(38, 12, 12, 0.4)' },
{ offset: 1, color: 'rgba(255, 37, 38, 0)' }
{ offset: 0, color: 'rgba(137, 121, 255, 0.3)' },
{ offset: 1, color: 'rgba(137, 121, 255, 0.05)' }
]
}
},
symbol: 'none',
data: [8, 15, 12, 22, 18, 26, 20]
},
{
name: '较高风险',
type: 'line',
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: 'circle',
symbolSize: 4,
itemStyle: {
color: '#fff',
borderColor: '#8979FF',
borderWidth: 1
},
symbol: 'none',
data: [5, 8, 6, 12, 10, 15, 13]
data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25, 24]
},
{
name: '一般风险',
name: '消防水泵2',
type: 'line',
smooth: true,
lineStyle: {
width: 1.5,
color: '#FFC403'
width: 2,
color: '#3CC3DF'
},
areaStyle: {
color: {
@ -143,37 +194,19 @@ const RiskAssessment = () => {
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(255, 196, 3, 0.4)' },
{ offset: 1, color: 'rgba(255, 196, 3, 0)' }
{ offset: 0, color: 'rgba(60, 195, 223, 0.3)' },
{ offset: 1, color: 'rgba(60, 195, 223, 0.05)' }
]
}
},
symbol: 'none',
data: [12, 18, 15, 25, 22, 24, 26]
},
{
name: '低风险',
type: 'line',
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: 'circle',
symbolSize: 4,
itemStyle: {
color: '#fff',
borderColor: '#3CC3DF',
borderWidth: 1
},
symbol: 'none',
data: [3, 5, 7, 9, 6, 8, 4]
data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22, 21]
}
]
};
@ -553,60 +586,43 @@ const RiskAssessment = () => {
<div className={styles.sectionContent}>
<div className={styles.middleBlock1}>
<div className={styles.block1Header}>
<div className={styles.block1Title}>
<div className={styles.titleIcon}></div>
危险源风险热力分布
设备状态分布
</div>
<Select
className={styles.block1Select}
defaultValue="全部区域"
options={[
{ value: '全部区域', label: '全部区域' },
{ value: '区域A', label: '区域A' },
{ value: '区域B', label: '区域B' },
{ value: '区域C', label: '区域C' }
]}
<Segmented
className={styles.block1Segmented}
options={['月', '季', '年']}
onChange={(value) => {
console.log(value);
}}
/>
</div>
{/* 风险等级图例 */}
<div className={styles.riskLegend}>
<div className={styles.legendItem}>
<div className={styles.legendDot} style={{ backgroundColor: '#F53F3F' }}></div>
<span className={styles.legendText}>重大风险</span>
{/* 设备状态饼图 */}
<div className={styles.deviceStatusChart} ref={pieChartRef}>
</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 className={styles.block1Chart}>
{/* <div className={styles.block1Chart}>
<img src={map1} alt="地图" className={styles.mapImage} />
</div> */}
</div>
</div>
<div className={styles.middleBlock2}>
<div className={styles.middleBlock2Title}>
<div className={styles.titleLeft}>
<div className={styles.titleIcon}></div>
<div>风险等级趋势</div>
<div>设备运行参数</div>
</div>
<div className={styles.titleRight}>
<Select
style={{ width: 100 }}
defaultValue="近七天"
style={{ width: 80 }}
defaultValue="今日"
options={[
{ value: '近三天', label: '近3天' },
{ value: '近30天', label: '近30天' },
{ value: '近3天', label: '近3天' },
{ value: '近7天', label: '近7天' },
]}
/>
</div>

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

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

Write Preview
Loading…
Cancel
Save