可视化、tableconfig对于按钮and逻辑没有处理
This commit is contained in:
parent
fc170fd97b
commit
0522a8f2bc
File diff suppressed because it is too large
Load Diff
630
src/layout/FullOther/HomeContent.js
Normal file
630
src/layout/FullOther/HomeContent.js
Normal file
@ -0,0 +1,630 @@
|
|||||||
|
// HomeContent.js
|
||||||
|
import React, { useEffect, useRef } from 'react';
|
||||||
|
import { Row, Col, Icon, Carousel } from 'antd';
|
||||||
|
import styles from './../fullinter.less';
|
||||||
|
import echarts from 'echarts';
|
||||||
|
|
||||||
|
class HomeContent extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.carouselRef = React.createRef();
|
||||||
|
this.echartsInstances = {
|
||||||
|
riskLevel: null,
|
||||||
|
safeCheckChart: null,
|
||||||
|
dangerOperation: null,
|
||||||
|
backLogChart: null,
|
||||||
|
};
|
||||||
|
this.chartResizeHandlers = {};
|
||||||
|
this.isUnmounted = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
waitForElement = (elementId, maxRetries = 10) => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
let retries = 0;
|
||||||
|
const checkInterval = setInterval(() => {
|
||||||
|
const element = document.getElementById(elementId);
|
||||||
|
if (element || retries >= maxRetries) {
|
||||||
|
clearInterval(checkInterval);
|
||||||
|
resolve(!!element);
|
||||||
|
}
|
||||||
|
retries++;
|
||||||
|
}, 50);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
riskLevel = async () => {
|
||||||
|
if (this.isUnmounted) return;
|
||||||
|
const elementExists = await this.waitForElement('riskLevelFull');
|
||||||
|
if (!elementExists || this.isUnmounted) return;
|
||||||
|
|
||||||
|
if (this.echartsInstances.riskLevel) {
|
||||||
|
this.echartsInstances.riskLevel.dispose();
|
||||||
|
this.echartsInstances.riskLevel = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const riskLevels = document.getElementById('riskLevelFull');
|
||||||
|
if (!riskLevels) return;
|
||||||
|
|
||||||
|
this.echartsInstances.riskLevel = echarts.init(riskLevels);
|
||||||
|
const data = this.props.riskTypeRate || [];
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
color: ['#c92a2a', '#ffa94d', '#ffe066', '#4285F4'],
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
text: '风险分级占比',
|
||||||
|
x: 'center',
|
||||||
|
y: '5%',
|
||||||
|
textStyle: { fontSize: 16, color: '#000' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: function (params) {
|
||||||
|
const color = params.color;
|
||||||
|
return `<div style="display: flex; align-items: center;">
|
||||||
|
<span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: ${color}; margin-right: 8px;"></span>
|
||||||
|
<span>${params.name}:</span>
|
||||||
|
<span style="font-weight: bold; margin-left: 8px; font-size: 16px;">${params.value}</span>
|
||||||
|
</div>`;
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.5)',
|
||||||
|
borderColor: '#FFFFFF',
|
||||||
|
borderWidth: 2,
|
||||||
|
textStyle: { color: '#000', fontSize: 14 },
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '访问来源',
|
||||||
|
type: 'pie',
|
||||||
|
minAngle: 20,
|
||||||
|
radius: ['55%', '80%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
clockwise: true,
|
||||||
|
avoidLabelOverlap: true,
|
||||||
|
hoverOffset: 15,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'inside',
|
||||||
|
formatter: '{a|{b}：{c}}{e|({d}%)}\n',
|
||||||
|
color: '#000',
|
||||||
|
textBorderWidth: 0,
|
||||||
|
rich: {
|
||||||
|
a: { padding: [-15, 0, 0, 0], fontSize: 15, color: '#000', textBorderWidth: 0 },
|
||||||
|
e: { fontSize: 14, color: '#000', padding: [-15, 0, 0, 5], textBorderWidth: 0 },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: { normal: { show: false } },
|
||||||
|
data: data.map((item) => ({ name: item.riskType, value: item.count })),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
this.echartsInstances.riskLevel.setOption(option);
|
||||||
|
|
||||||
|
const resizeHandler = () => {
|
||||||
|
if (this.echartsInstances.riskLevel && !this.isUnmounted) {
|
||||||
|
this.echartsInstances.riskLevel.resize();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.chartResizeHandlers.riskLevel = resizeHandler;
|
||||||
|
window.addEventListener('resize', resizeHandler);
|
||||||
|
};
|
||||||
|
|
||||||
|
transformDat = (originalData, barTopColor, num) => {
|
||||||
|
if (!originalData || !Array.isArray(originalData) || originalData.length === 0) {
|
||||||
|
return { companyNames: [], series: [], legendData: [] };
|
||||||
|
}
|
||||||
|
|
||||||
|
let allTypes = [];
|
||||||
|
if (num == 1) {
|
||||||
|
allTypes = [...new Set(originalData.flatMap((item) => item.details?.map((detail) => detail.jobName)))];
|
||||||
|
} else {
|
||||||
|
allTypes = [...new Set(originalData.flatMap((item) => item.details?.map((detail) => detail.name)))];
|
||||||
|
}
|
||||||
|
|
||||||
|
allTypes = allTypes.filter(Boolean);
|
||||||
|
const companyNames = originalData?.map((item) => item.company);
|
||||||
|
const series = allTypes?.map((typeName, index) => ({
|
||||||
|
name: typeName,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function (params) {
|
||||||
|
if (num == 1) {
|
||||||
|
return barTopColor[index];
|
||||||
|
} else {
|
||||||
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: barTopColor[index][0] },
|
||||||
|
{ offset: 1, color: barTopColor[index][1] },
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: originalData?.map((company) => {
|
||||||
|
const detail = company.details?.find((d) => (num == 1 ? d.jobName : d.name) === typeName);
|
||||||
|
return detail ? detail.qty : 0;
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
return { companyNames, series, legendData: allTypes };
|
||||||
|
};
|
||||||
|
|
||||||
|
safeCheckChart = async () => {
|
||||||
|
if (this.isUnmounted) return;
|
||||||
|
const elementExists = await this.waitForElement('safeCheckChart');
|
||||||
|
if (!elementExists || this.isUnmounted) return;
|
||||||
|
|
||||||
|
if (this.echartsInstances.safeCheckChart) {
|
||||||
|
this.echartsInstances.safeCheckChart.dispose();
|
||||||
|
this.echartsInstances.safeCheckChart = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
let safeCheckCharts = document.getElementById('safeCheckChart');
|
||||||
|
if (!safeCheckCharts) return;
|
||||||
|
|
||||||
|
const barTopColor = ['#02c3f1', '#53e568', '#a154e9'];
|
||||||
|
const jobData = this.props.jobTodayTop3 || [];
|
||||||
|
|
||||||
|
if (jobData.length === 0) return;
|
||||||
|
|
||||||
|
this.echartsInstances.safeCheckChart = echarts.init(safeCheckCharts);
|
||||||
|
let xdata = this.transformDat(jobData, barTopColor, 1);
|
||||||
|
|
||||||
|
this.echartsInstances.safeCheckChart.setOption({
|
||||||
|
title: {
|
||||||
|
text: '当日工作票排名前三家的数据',
|
||||||
|
textStyle: { fontSize: 16, color: '#fff' },
|
||||||
|
},
|
||||||
|
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||||
|
legend: {
|
||||||
|
data: xdata.legendData,
|
||||||
|
align: 'right',
|
||||||
|
right: 10,
|
||||||
|
itemGap: 16,
|
||||||
|
itemWidth: 18,
|
||||||
|
itemHeight: 10,
|
||||||
|
textStyle: { color: '#fff', fontSize: 14 },
|
||||||
|
},
|
||||||
|
color: barTopColor,
|
||||||
|
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: xdata.companyNames,
|
||||||
|
axisLine: { lineStyle: { color: '#3eb2e8' } },
|
||||||
|
axisLabel: { textStyle: { color: '#fff' } },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisLine: { show: false },
|
||||||
|
axisLabel: { textStyle: { color: '#fff' } },
|
||||||
|
splitLine: { lineStyle: { color: '#4784e8' } },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: xdata.series,
|
||||||
|
});
|
||||||
|
|
||||||
|
const resizeHandler = () => {
|
||||||
|
if (this.echartsInstances.safeCheckChart && !this.isUnmounted) {
|
||||||
|
this.echartsInstances.safeCheckChart.resize();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.chartResizeHandlers.safeCheckChart = resizeHandler;
|
||||||
|
window.addEventListener('resize', resizeHandler);
|
||||||
|
};
|
||||||
|
|
||||||
|
dangerOperation = async () => {
|
||||||
|
if (this.isUnmounted) return;
|
||||||
|
const elementExists = await this.waitForElement('dangerOperationChart');
|
||||||
|
if (!elementExists || this.isUnmounted) return;
|
||||||
|
|
||||||
|
if (this.echartsInstances.dangerOperation) {
|
||||||
|
this.echartsInstances.dangerOperation.dispose();
|
||||||
|
this.echartsInstances.dangerOperation = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dangerOperationCharts = document.getElementById('dangerOperationChart');
|
||||||
|
if (!dangerOperationCharts) return;
|
||||||
|
|
||||||
|
const linkData = this.props.linkSum || [];
|
||||||
|
if (linkData.length === 0) return;
|
||||||
|
|
||||||
|
this.echartsInstances.dangerOperation = echarts.init(dangerOperationCharts);
|
||||||
|
const xAxisData = linkData.map((item) => item.name);
|
||||||
|
const seriesData = linkData.map((item) => item.qty);
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
color: ['#4285F4'],
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
text: '当日工作票的统计数量',
|
||||||
|
x: 'center',
|
||||||
|
y: '5%',
|
||||||
|
textStyle: { fontSize: 16, color: '#000' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { type: 'shadow' },
|
||||||
|
formatter: function (params) {
|
||||||
|
const color = params[0].color;
|
||||||
|
return `<div style="display: flex; align-items: center;">
|
||||||
|
<span style="display: inline-block; width: 12px; height: 12px; background-color: ${color}; margin-right: 8px;"></span>
|
||||||
|
<span>${params[0].name}:</span>
|
||||||
|
<span style="font-weight: bold; margin-left: 8px; font-size: 16px;">${params[0].value}</span>
|
||||||
|
</div>`;
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.5)',
|
||||||
|
borderColor: '#FFFFFF',
|
||||||
|
borderWidth: 2,
|
||||||
|
textStyle: { color: '#000', fontSize: 14 },
|
||||||
|
},
|
||||||
|
grid: { left: '10%', right: '5%', top: '15%', bottom: '10%', containLabel: true },
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: xAxisData,
|
||||||
|
axisLine: { lineStyle: { color: '#000' } },
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLabel: { textStyle: { color: '#000' }, rotate: 30, interval: 0 },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '',
|
||||||
|
nameTextStyle: { color: '#000' },
|
||||||
|
axisLine: { show: false },
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLabel: { textStyle: { color: '#000' } },
|
||||||
|
splitLine: { show: false },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '危险作业数量',
|
||||||
|
type: 'bar',
|
||||||
|
data: seriesData,
|
||||||
|
itemStyle: {
|
||||||
|
normal: { color: '#4285F4', borderRadius: 12 },
|
||||||
|
emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' },
|
||||||
|
},
|
||||||
|
label: { show: true, position: 'top', textStyle: { color: '#000', fontSize: 12 }, formatter: '{c}' },
|
||||||
|
barWidth: '60%',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
this.echartsInstances.dangerOperation.setOption(option);
|
||||||
|
|
||||||
|
const resizeHandler = () => {
|
||||||
|
if (this.echartsInstances.dangerOperation && !this.isUnmounted) {
|
||||||
|
this.echartsInstances.dangerOperation.resize();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.chartResizeHandlers.dangerOperation = resizeHandler;
|
||||||
|
window.addEventListener('resize', resizeHandler);
|
||||||
|
};
|
||||||
|
|
||||||
|
backLog = async () => {
|
||||||
|
if (this.isUnmounted) return;
|
||||||
|
const elementExists = await this.waitForElement('backLogChart');
|
||||||
|
if (!elementExists || this.isUnmounted) return;
|
||||||
|
|
||||||
|
if (this.echartsInstances.backLogChart) {
|
||||||
|
this.echartsInstances.backLogChart.dispose();
|
||||||
|
this.echartsInstances.backLogChart = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
let backLogCharts = document.getElementById('backLogChart');
|
||||||
|
if (!backLogCharts) return;
|
||||||
|
|
||||||
|
const taskData = this.props.taskTop3 || [];
|
||||||
|
if (taskData.length === 0) return;
|
||||||
|
|
||||||
|
const barTopColor = [
|
||||||
|
['#75baf3', '#2177d5'],
|
||||||
|
['#ffa94d', '#f76707'],
|
||||||
|
['#99ca6e', '#48a447'],
|
||||||
|
];
|
||||||
|
|
||||||
|
this.echartsInstances.backLogChart = echarts.init(backLogCharts);
|
||||||
|
let xdata = this.transformDat(taskData, barTopColor, 2);
|
||||||
|
const legendColors = barTopColor.map((gradient) => gradient[0]);
|
||||||
|
|
||||||
|
this.echartsInstances.backLogChart.setOption({
|
||||||
|
title: {
|
||||||
|
text: '各事项排名前三名统计',
|
||||||
|
x: 'center',
|
||||||
|
y: '5%',
|
||||||
|
textStyle: { fontSize: 16, color: '#000' },
|
||||||
|
},
|
||||||
|
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||||
|
legend: {
|
||||||
|
data: xdata.legendData.map((name, index) => ({
|
||||||
|
name: name,
|
||||||
|
itemStyle: { color: legendColors[index], borderWidth: 0 },
|
||||||
|
textStyle: { color: '#000', fontSize: 14 },
|
||||||
|
})),
|
||||||
|
align: 'right',
|
||||||
|
top: 10,
|
||||||
|
right: 10,
|
||||||
|
itemGap: 16,
|
||||||
|
itemWidth: 18,
|
||||||
|
itemHeight: 12,
|
||||||
|
},
|
||||||
|
color: legendColors,
|
||||||
|
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: xdata.companyNames,
|
||||||
|
axisLine: { lineStyle: { color: '#3eb2e8' } },
|
||||||
|
axisLabel: { textStyle: { color: '#000' } },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisLine: { show: false },
|
||||||
|
axisLabel: { textStyle: { color: '#000' } },
|
||||||
|
splitLine: { lineStyle: { color: '#4784e8' } },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: xdata.series,
|
||||||
|
});
|
||||||
|
|
||||||
|
const resizeHandler = () => {
|
||||||
|
if (this.echartsInstances.backLogChart && !this.isUnmounted) {
|
||||||
|
this.echartsInstances.backLogChart.resize();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.chartResizeHandlers.backLogChart = resizeHandler;
|
||||||
|
window.addEventListener('resize', resizeHandler);
|
||||||
|
};
|
||||||
|
|
||||||
|
initAllCharts = () => {
|
||||||
|
if (this.isUnmounted) return;
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.isUnmounted) return;
|
||||||
|
this.riskLevel();
|
||||||
|
this.safeCheckChart();
|
||||||
|
this.dangerOperation();
|
||||||
|
this.backLog();
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
|
||||||
|
disposeAllCharts = () => {
|
||||||
|
Object.keys(this.echartsInstances).forEach((key) => {
|
||||||
|
if (this.echartsInstances[key]) {
|
||||||
|
try {
|
||||||
|
this.echartsInstances[key].dispose();
|
||||||
|
} catch (e) {
|
||||||
|
console.warn(`Dispose chart ${key} error:`, e);
|
||||||
|
}
|
||||||
|
this.echartsInstances[key] = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Object.keys(this.chartResizeHandlers).forEach((key) => {
|
||||||
|
if (this.chartResizeHandlers[key]) {
|
||||||
|
window.removeEventListener('resize', this.chartResizeHandlers[key]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.chartResizeHandlers = {};
|
||||||
|
};
|
||||||
|
|
||||||
|
handlePrev = () => {
|
||||||
|
if (this.carouselRef.current) {
|
||||||
|
this.carouselRef.current.prev();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
handleNext = () => {
|
||||||
|
if (this.carouselRef.current) {
|
||||||
|
this.carouselRef.current.next();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
handleCarouselChange = (current) => {
|
||||||
|
this.props.onCarouselChange?.(current);
|
||||||
|
};
|
||||||
|
|
||||||
|
handleDotClick = (index) => {
|
||||||
|
this.props.onDotClick?.(index);
|
||||||
|
if (this.carouselRef.current) {
|
||||||
|
this.carouselRef.current.goTo(index);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.isUnmounted = false;
|
||||||
|
this.initAllCharts();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
if (
|
||||||
|
prevProps.riskTypeRate !== this.props.riskTypeRate ||
|
||||||
|
prevProps.jobTodayTop3 !== this.props.jobTodayTop3 ||
|
||||||
|
prevProps.linkSum !== this.props.linkSum ||
|
||||||
|
prevProps.taskTop3 !== this.props.taskTop3
|
||||||
|
) {
|
||||||
|
this.disposeAllCharts();
|
||||||
|
this.initAllCharts();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this.isUnmounted = true;
|
||||||
|
this.disposeAllCharts();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
riskTypeRate = [],
|
||||||
|
riskTotal = [],
|
||||||
|
mediaList = [],
|
||||||
|
announcementList = [],
|
||||||
|
currentMediaIndex = 0,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.homeContentWrapper}>
|
||||||
|
<Row className={styles.homeContentRow} gutter={0}>
|
||||||
|
{/* 左侧区域 */}
|
||||||
|
<Col span={7} className={styles.leftCol}>
|
||||||
|
<div className={styles.riskCard}>
|
||||||
|
<Row className={styles.riskRow}>
|
||||||
|
<Col span={8} className={styles.riskStatsCol}>
|
||||||
|
{riskTypeRate.map((item, index) => (
|
||||||
|
<div key={index} className={`${styles.riskStatItem} ${styles['riskLevel' + item.riskType]}`}>
|
||||||
|
<div className={styles.riskStatName}>{item.riskType}</div>
|
||||||
|
<div className={styles.riskStatValue}>{item.count}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</Col>
|
||||||
|
<Col span={16} className={styles.chartCol}>
|
||||||
|
<div id="riskLevelFull" className={styles.chartContainer}></div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.spacer}></div>
|
||||||
|
|
||||||
|
<div className={styles.hiddenCard}>
|
||||||
|
<Row className={styles.riskRow}>
|
||||||
|
<Col span={8} className={styles.hiddenStatsCol}>
|
||||||
|
<div className={styles.hiddenTitle}>年度隐患数据</div>
|
||||||
|
{riskTotal.map((item, index) => (
|
||||||
|
<div key={index} className={styles.hiddenStatItem}>
|
||||||
|
<div className={styles.hiddenStatName}>{item.name}</div>
|
||||||
|
<div className={styles.hiddenStatValue}>{item.value}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</Col>
|
||||||
|
<Col span={16} className={styles.chartCol}>
|
||||||
|
<div id="safeCheckChart" className={styles.chartContainer}></div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
{/* 中间区域 */}
|
||||||
|
<Col span={10} className={styles.middleCol}>
|
||||||
|
<div className={styles.sloganCard}>
|
||||||
|
<div className={styles.sloganText}>安全方针：以人为本、关注健康、依法治企、安全发展。</div>
|
||||||
|
<div className={styles.sloganSubText}>安全理念：一切风险皆可控，一切事故皆可防！</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.carouselCard}>
|
||||||
|
<div className={styles.carouselWrapper}>
|
||||||
|
<Carousel
|
||||||
|
ref={this.carouselRef}
|
||||||
|
autoplay
|
||||||
|
autoplaySpeed={5000}
|
||||||
|
effect="fade"
|
||||||
|
dots={false}
|
||||||
|
pauseOnHover={true}
|
||||||
|
afterChange={this.handleCarouselChange}
|
||||||
|
className={styles.carousel}
|
||||||
|
>
|
||||||
|
{mediaList.map((item, index) => (
|
||||||
|
<div key={index} className={styles.carouselItem}>
|
||||||
|
{item.type === 'video' ? (
|
||||||
|
<video src={item.url} className={styles.mediaVideo} autoPlay muted loop playsInline />
|
||||||
|
) : (
|
||||||
|
<img src={item.url} alt={`轮播图 ${index + 1}`} className={styles.mediaImage} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</Carousel>
|
||||||
|
<div className={styles.customArrowLeft} onClick={this.handlePrev}>
|
||||||
|
<Icon type="left" style={{ fontSize: '24px', color: 'rgba(0, 0, 0, 0.5)' }} />
|
||||||
|
</div>
|
||||||
|
<div className={styles.customArrowRight} onClick={this.handleNext}>
|
||||||
|
<Icon type="right" style={{ fontSize: '24px', color: 'rgba(0, 0, 0, 0.5)' }} />
|
||||||
|
</div>
|
||||||
|
<div className={styles.customDots}>
|
||||||
|
{mediaList.map((_, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className={`${styles.dot} ${currentMediaIndex === index ? styles.activeDot : ''}`}
|
||||||
|
onClick={() => this.handleDotClick(index)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.announcementCard}>
|
||||||
|
<div className={styles.announcementHeader}>
|
||||||
|
<div className={styles.announcementTitle}>
|
||||||
|
<Icon type="sound" className={styles.announcementIcon} />
|
||||||
|
<span>公司公告</span>
|
||||||
|
</div>
|
||||||
|
<span className={styles.announcementCount}>共 {announcementList.length} 条公告</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.announcementList}>
|
||||||
|
{announcementList.length > 0 ? (
|
||||||
|
<ul className={styles.announcementUl}>
|
||||||
|
{announcementList.map((item, index) => (
|
||||||
|
<li
|
||||||
|
key={item.id || index}
|
||||||
|
className={styles.announcementItem}
|
||||||
|
onClick={() => item.url && window.open(item.url)}
|
||||||
|
>
|
||||||
|
<span className={styles.announcementItemTitle} title={item.title}>
|
||||||
|
{item.title}
|
||||||
|
</span>
|
||||||
|
<span className={styles.announcementItemTime}>
|
||||||
|
{item.publishTime || item.createTime || item.date}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
) : (
|
||||||
|
<div className={styles.emptyAnnouncement}>
|
||||||
|
<Icon type="inbox" className={styles.emptyIcon} />
|
||||||
|
<span>暂无公告</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
{/* 右侧区域 */}
|
||||||
|
<Col span={7} className={styles.rightCol}>
|
||||||
|
<div className={styles.riskCard}>
|
||||||
|
<Row className={styles.riskRow}>
|
||||||
|
<Col span={8} className={styles.trainingStatsCol}>
|
||||||
|
<div className={styles.trainingTitle}>年度培训数据</div>
|
||||||
|
{riskTotal.map((item, index) => (
|
||||||
|
<div key={index} className={styles.trainingStatItem}>
|
||||||
|
<div className={styles.trainingStatName}>{item.name}</div>
|
||||||
|
<div className={styles.trainingStatValue}>{item.value}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</Col>
|
||||||
|
<Col span={16} className={styles.chartCol}>
|
||||||
|
<div id="backLogChart" className={styles.chartContainer}></div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.spacer}></div>
|
||||||
|
|
||||||
|
<div className={styles.dangerCard}>
|
||||||
|
<div id="dangerOperationChart" className={styles.fullChartContainer}></div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HomeContent;
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,4 @@
|
|||||||
|
// fullinter.less - 修复后的完整样式
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: pangmenzhengdao;
|
font-family: pangmenzhengdao;
|
||||||
src: url('../assets/fonts/pangmenzhengdao.ttf');
|
src: url('../assets/fonts/pangmenzhengdao.ttf');
|
||||||
@ -16,6 +17,7 @@
|
|||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 主容器
|
||||||
.box {
|
.box {
|
||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -25,76 +27,72 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.blackBack {
|
.blackBack {
|
||||||
background-image: url('../assets/login/bg.png');
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// height: calc(100% - 10px); // 进入全屏
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backImage {
|
.backImage {
|
||||||
background-color: #021428; //021428
|
background-color: #f2f5f9;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
opacity: 0.9;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 头部
|
||||||
.header {
|
.header {
|
||||||
// background-image: url('../assets/layout/full-header.png');
|
|
||||||
// background-size: cover;
|
|
||||||
// background-position: center;
|
|
||||||
// background-repeat: no-repeat;
|
|
||||||
height: 60px;
|
height: 60px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
background-color: rgba(73, 122, 175, 0.3);
|
background-color: #fff;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerText {
|
.headerText {
|
||||||
color: GoldenRod;
|
color: #000;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
// font-weight: bold;
|
font-weight: bold;
|
||||||
// margin-top: 10px;
|
|
||||||
font-family: 'pangmenzhengdao';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.configBanners {
|
.configBanners {
|
||||||
// height: 100%;
|
|
||||||
width: 110px;
|
width: 110px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
font-size: 20px; // 适当减小字体大小
|
font-size: 20px;
|
||||||
margin: 0px 10px;
|
margin: 0px 10px;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #fff;
|
color: #000;
|
||||||
border: 1px solid transparent; // 默认透明边框
|
border: 1px solid transparent;
|
||||||
// border: 1px solid #00caf7;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
background: linear-gradient(to bottom, #01408e, #07295e);
|
background: #e3f2e9;
|
||||||
display: flex; // 使用flex布局
|
display: flex;
|
||||||
align-items: center; // 垂直居中
|
align-items: center;
|
||||||
justify-content: center; // 水平居中
|
justify-content: center;
|
||||||
text-align: center; // 文字居中
|
text-align: center;
|
||||||
box-sizing: border-box; // 确保边框计算在内
|
box-sizing: border-box;
|
||||||
padding: 0 2px; // 如果需要可以添加内边距
|
padding: 0 2px;
|
||||||
overflow: hidden; // 防止内容溢出
|
|
||||||
text-overflow: ellipsis; // 文字过长显示省略号
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: #00caf7; // 悬停效果
|
border-color: #00caf7;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
border: 1px solid #00caf7 !important;
|
border: 1px solid #00caf7 !important;
|
||||||
background: linear-gradient(to bottom, #0150a0, #083070); // 激活时背景加深
|
background: linear-gradient(to bottom, #01408e, #07295e);
|
||||||
box-shadow: 0 0 10px rgba(0, 202, 247, 0.5); // 可选：添加发光效果
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
@ -116,6 +114,7 @@
|
|||||||
animation: pulse 2s infinite;
|
animation: pulse 2s infinite;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0% {
|
0% {
|
||||||
box-shadow: 0 0 5px rgba(0, 202, 247, 0.5);
|
box-shadow: 0 0 5px rgba(0, 202, 247, 0.5);
|
||||||
@ -127,18 +126,10 @@
|
|||||||
box-shadow: 0 0 5px rgba(0, 202, 247, 0.5);
|
box-shadow: 0 0 5px rgba(0, 202, 247, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.boxBack {
|
|
||||||
width: 100%;
|
// 其他tab内容
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 0px 20px;
|
|
||||||
}
|
|
||||||
.otherTabContent {
|
.otherTabContent {
|
||||||
flex: 1; // 占据剩余空间
|
flex: 1;
|
||||||
// width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -147,405 +138,455 @@
|
|||||||
margin: 0px 10px 10px 10px;
|
margin: 0px 10px 10px 10px;
|
||||||
border: 1px solid rgba(0, 202, 247, 0.3);
|
border: 1px solid rgba(0, 202, 247, 0.3);
|
||||||
}
|
}
|
||||||
.row {
|
|
||||||
// height: calc(65% - 200px);
|
// ========== HomeContent 组件样式 ==========
|
||||||
|
.homeContentWrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 10px 10px 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.rowTwo {
|
|
||||||
height: 30%;
|
.homeContentRow {
|
||||||
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 左右列通用样式
|
||||||
|
.leftCol,
|
||||||
|
.rightCol,
|
||||||
|
.middleCol {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 左侧和右侧卡片样式
|
||||||
|
.riskCard {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hiddenCard {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
min-height: 0;
|
||||||
}
|
}
|
||||||
.boxleft {
|
|
||||||
|
.dangerCard {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer {
|
||||||
|
height: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.riskRow {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// width: 100%;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.riskStatsCol,
|
||||||
|
.hiddenStatsCol,
|
||||||
|
.trainingStatsCol {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartCol {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullChartContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 风险等级统计项
|
||||||
|
.riskStatItem {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
|
||||||
.fullBorderBox {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 10px; // 如果需要内边距
|
|
||||||
box-sizing: border-box; // 确保内边距计算在内
|
|
||||||
}
|
|
||||||
.risklevel {
|
|
||||||
height: 50%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0px 10px;
|
|
||||||
}
|
|
||||||
.risklevelOne {
|
|
||||||
height: 50%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0px 10px;
|
|
||||||
}
|
|
||||||
.risklevelTwo {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0px 10px 10px 10px;
|
|
||||||
}
|
|
||||||
.riskChange {
|
|
||||||
width: 30%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
padding: 20px 10px;
|
|
||||||
}
|
|
||||||
.riskChangeTwo {
|
|
||||||
width: 70%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 26px 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.gradient {
|
|
||||||
background-image: linear-gradient(
|
|
||||||
250deg,
|
|
||||||
rgba(47, 109, 255, 1) 0%,
|
|
||||||
rgba(255, 255, 255, 54) 50%,
|
|
||||||
rgba(47, 109, 255, 1) 100%
|
|
||||||
);
|
|
||||||
width: 100%;
|
|
||||||
height: 30%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 2px;
|
|
||||||
// margin: 10px;
|
|
||||||
}
|
|
||||||
.gradientTwo {
|
|
||||||
background-image: linear-gradient(
|
|
||||||
250deg,
|
|
||||||
rgba(47, 109, 255, 1) 0%,
|
|
||||||
rgba(255, 255, 255, 54) 50%,
|
|
||||||
rgba(47, 109, 255, 1) 100%
|
|
||||||
);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
.gradientThree {
|
|
||||||
background-image: linear-gradient(
|
|
||||||
275deg,
|
|
||||||
rgba(47, 109, 255, 1) 0%,
|
|
||||||
rgba(255, 255, 255, 54) 50%,
|
|
||||||
rgba(47, 109, 255, 1) 100%
|
|
||||||
);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
.gradientNext {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #021428;
|
|
||||||
// z-index: 999;
|
|
||||||
}
|
|
||||||
.gradientNextTwo {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(47, 109, 255, 0.1);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 5px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.gradientText {
|
|
||||||
font-size: 34px;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #49ebff;
|
|
||||||
font-style: italic;
|
|
||||||
font-family: '站酷庆科黄油体';
|
|
||||||
}
|
|
||||||
.gradientName {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.gradientTextTwo {
|
|
||||||
font-size: 86px;
|
|
||||||
font-weight: bold;
|
|
||||||
// color: #ef595a;
|
|
||||||
color: #12f714;
|
|
||||||
}
|
|
||||||
.gradientNameTwo {
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
background-image: url('../assets/layout/title.png');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: bottom;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
width: 90%;
|
|
||||||
height: 25px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
// justify-content: center;
|
|
||||||
}
|
|
||||||
.circle {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
background: #021428;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 3px solid #fff;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
.titlename {
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 16px;
|
margin: 10px 20px;
|
||||||
font-family: '站酷庆科黄油体';
|
padding: 5px 10px;
|
||||||
letter-spacing: 3px;
|
border-radius: 4px;
|
||||||
}
|
|
||||||
// .risklevelOne {
|
|
||||||
// height: 60%;
|
|
||||||
// width: 90%;
|
|
||||||
// }
|
|
||||||
.boxTwo {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
// width: 100%;
|
|
||||||
}
|
|
||||||
.capsuleChart {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
.scrollboard {
|
|
||||||
width: 90%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0px 20px 20px 20px;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
.scrollboard :global(.header) {
|
|
||||||
height: auto;
|
.riskStatName {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.riskStatValue {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 风险等级背景色
|
||||||
|
.riskLevel重大风险 {
|
||||||
|
background-color: #c92a2a;
|
||||||
|
}
|
||||||
|
.riskLevel较大风险 {
|
||||||
|
background-color: #ffa94d;
|
||||||
|
}
|
||||||
|
.riskLevel一般风险 {
|
||||||
|
background-color: #ffe066;
|
||||||
|
}
|
||||||
|
.riskLevel低风险 {
|
||||||
|
background-color: #4285f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐患统计样式
|
||||||
|
.hiddenTitle {
|
||||||
|
color: #000;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 10px 0;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hiddenStatItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #1e2a3a;
|
||||||
|
margin: 10px 20px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hiddenStatName {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hiddenStatValue {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 培训统计样式
|
||||||
|
.trainingTitle {
|
||||||
|
color: #000;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 10px 0;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trainingStatItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #1e2a3a;
|
||||||
|
margin: 10px 20px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trainingStatName {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trainingStatValue {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 中间区域样式
|
||||||
|
.middleCol {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sloganCard {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 15px;
|
||||||
|
text-align: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sloganText {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sloganSubText {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselCard {
|
||||||
|
flex: 4;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-top: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselWrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselItem {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mediaVideo {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mediaImage {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcementCard {
|
||||||
|
flex: 3;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcementHeader {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-bottom: 2px solid #1890ff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcementTitle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcementIcon {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #1890ff;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcementTitle span {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcementCount {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcementList {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcementUl {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.scrollboard :global(.dv-scroll-board .rows .ceil) {
|
|
||||||
text-align: center;
|
.announcementItem {
|
||||||
}
|
display: flex;
|
||||||
.scrollboard :global(.dv-scroll-board .header .header-item) {
|
align-items: center;
|
||||||
text-align: center;
|
justify-content: space-between;
|
||||||
|
padding: 10px 16px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.scoreBox {
|
.announcementItemTitle {
|
||||||
// background-image: url("../assets/layout/score-box.png");
|
font-size: 18px;
|
||||||
// background-size: cover;
|
color: #333;
|
||||||
// background-position: center;
|
overflow: hidden;
|
||||||
// background-repeat: no-repeat;
|
text-overflow: ellipsis;
|
||||||
width: 100%;
|
white-space: nowrap;
|
||||||
display: flex;
|
flex: 1;
|
||||||
flex-direction: row;
|
text-align: left;
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
}
|
||||||
.scoreBox1 {
|
|
||||||
background-image: url('../assets/layout/score-box.png');
|
.announcementItemTime {
|
||||||
background-size: contain;
|
font-size: 16px;
|
||||||
background-position: center;
|
color: #999;
|
||||||
background-repeat: no-repeat;
|
margin-left: 16px;
|
||||||
width: 100%;
|
white-space: nowrap;
|
||||||
// height: 140px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
}
|
||||||
.score {
|
|
||||||
display: flex;
|
.emptyAnnouncement {
|
||||||
flex-direction: row;
|
|
||||||
// align-items: center;
|
|
||||||
// justify-content: space-between;
|
|
||||||
background-image: url('../assets/layout/ks.png');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
object-fit: cover;
|
|
||||||
// width: 230px;
|
|
||||||
width: 33%;
|
|
||||||
height: auto;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
.score2 {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
// align-items: center;
|
|
||||||
// justify-content: space-between;
|
|
||||||
background-image: url('../assets/layout/xk.png');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
object-fit: cover;
|
|
||||||
width: 33%;
|
|
||||||
height: auto;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
.score3 {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
// align-items: center;
|
|
||||||
// justify-content: space-between;
|
|
||||||
background-image: url('../assets/layout/wk.png');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
object-fit: cover;
|
|
||||||
width: 33%;
|
|
||||||
height: auto;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
.score4 {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background-image: url('../assets/layout/score.png');
|
|
||||||
background-size: contain;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
width: 30%;
|
|
||||||
padding: 0px 15px;
|
|
||||||
// height: 100%;
|
|
||||||
// margin: 10px;
|
|
||||||
}
|
|
||||||
.scoreRight {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 40%;
|
height: 100%;
|
||||||
margin-left: 50%;
|
color: #999;
|
||||||
}
|
}
|
||||||
.scoreLeft {
|
|
||||||
font-size: 12px;
|
.emptyIcon {
|
||||||
font-weight: bold;
|
font-size: 48px;
|
||||||
color: #6cc8d9;
|
margin-bottom: 16px;
|
||||||
margin-top: 5px;
|
|
||||||
}
|
}
|
||||||
.scoreText {
|
|
||||||
font-size: 13px;
|
// 轮播图控件
|
||||||
font-weight: bold;
|
.customArrowLeft,
|
||||||
color: #6cc8d9;
|
.customArrowRight {
|
||||||
}
|
|
||||||
.scoreText2 {
|
|
||||||
font-size: 33px;
|
|
||||||
color: #7fffff;
|
|
||||||
font-weight: bold;
|
|
||||||
// font-style: oblique;
|
|
||||||
}
|
|
||||||
.scoreText3 {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #6cc8d9;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.ulData {
|
|
||||||
li {
|
|
||||||
// transform: rotate(45deg);
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
top: 50%;
|
||||||
// margin-left: -20px;
|
transform: translateY(-50%);
|
||||||
// margin-right: -20px;
|
width: 40px;
|
||||||
transform: translate(-50%, -50%);
|
height: 60px;
|
||||||
}
|
|
||||||
li:nth-of-type(1) {
|
|
||||||
// transform: rotate(45deg);
|
|
||||||
transform: translate(-50%, -50%) rotate(12deg) translate(-280px) rotate(-12deg);
|
|
||||||
// transform-origin: 20px 220px;
|
|
||||||
}
|
|
||||||
li:nth-of-type(2) {
|
|
||||||
transform: translate(-50%, -50%) rotate(38deg) translate(-280px) rotate(-38deg);
|
|
||||||
}
|
|
||||||
li:nth-of-type(3) {
|
|
||||||
transform: translate(-50%, -50%) rotate(64deg) translate(-280px) rotate(-64deg);
|
|
||||||
}
|
|
||||||
li:nth-of-type(4) {
|
|
||||||
transform: translate(-50%, -50%) rotate(90deg) translate(-280px) rotate(-90deg);
|
|
||||||
}
|
|
||||||
li:nth-of-type(5) {
|
|
||||||
transform: translate(-50%, -50%) rotate(116deg) translate(-280px) rotate(-116deg);
|
|
||||||
}
|
|
||||||
li:nth-of-type(6) {
|
|
||||||
transform: translate(-50%, -50%) rotate(142deg) translate(-280px) rotate(-142deg);
|
|
||||||
}
|
|
||||||
li:nth-of-type(7) {
|
|
||||||
transform: translate(-50%, -50%) rotate(168deg) translate(-280px) rotate(-168deg);
|
|
||||||
}
|
|
||||||
li:nth-of-type(8) {
|
|
||||||
transform: translate(-50%, -50%) rotate(-12deg) translate(-280px) rotate(12deg);
|
|
||||||
}
|
|
||||||
li:nth-of-type(9) {
|
|
||||||
transform: translate(-50%, -50%) rotate(-38deg) translate(-280px) rotate(38deg);
|
|
||||||
}
|
|
||||||
li:nth-of-type(10) {
|
|
||||||
transform: translate(-50%, -50%) rotate(-64deg) translate(-280px) rotate(64deg);
|
|
||||||
}
|
|
||||||
li:nth-of-type(11) {
|
|
||||||
transform: translate(-50%, -50%) rotate(-116deg) translate(-280px) rotate(116deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
li:nth-of-type(12) {
|
|
||||||
transform: translate(-50%, -50%) rotate(-142deg) translate(-280px) rotate(142deg);
|
|
||||||
}
|
|
||||||
li:nth-of-type(13) {
|
|
||||||
transform: translate(-50%, -50%) rotate(-168deg) translate(-280px) rotate(168deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.roateData {
|
|
||||||
background-image: linear-gradient(
|
|
||||||
275deg,
|
|
||||||
rgba(47, 109, 255, 1) 0%,
|
|
||||||
rgba(255, 255, 255, 54) 50%,
|
|
||||||
rgba(47, 109, 255, 1) 100%
|
|
||||||
);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: center;
|
||||||
padding: 2px;
|
cursor: pointer;
|
||||||
// background-color: rgba(47, 109, 255, 0.1);
|
z-index: 10;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
transform: translateY(-50%) scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(-50%) scale(0.95);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.roatBack {
|
|
||||||
background-color: #021428;
|
.customArrowLeft {
|
||||||
width: 100%;
|
left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customArrowRight {
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customDots {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 16px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 24px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeDot {
|
||||||
|
width: 24px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 全局 Carousel 样式
|
||||||
|
:global {
|
||||||
|
.ant-carousel {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 5px;
|
width: 100%;
|
||||||
|
}
|
||||||
|
.slick-slider {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.slick-list {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.slick-track {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.slick-slider > div,
|
||||||
|
.slick-list > div,
|
||||||
|
.slick-track > div,
|
||||||
|
.slick-slide > div {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.slick-slide,
|
||||||
|
.slick-slide > div {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.slick-slider div,
|
||||||
|
.slick-list div,
|
||||||
|
.slick-track div {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user