可视化
This commit is contained in:
parent
827ce856f7
commit
c47798866f
66
src/components/CustomPages/BI/BI00FullScreen.js
Normal file
66
src/components/CustomPages/BI/BI00FullScreen.js
Normal file
@ -0,0 +1,66 @@
|
||||
import React, { useState, useEffect, useRef, Component } from 'react';
|
||||
import { withRouter } from 'dva/router';
|
||||
import { connect } from 'dva';
|
||||
import {
|
||||
initFilter,
|
||||
addRuleAndGroups,
|
||||
guid,
|
||||
extendInclude,
|
||||
extendRule,
|
||||
extendOrder,
|
||||
extend,
|
||||
} from '../../../utils/common';
|
||||
import { Table, Row, Col, Button, Select, Divider } from 'antd';
|
||||
import echarts from 'echarts';
|
||||
import styles from '../HI/StepForm1.css';
|
||||
import moment from 'moment';
|
||||
const { Option } = Select;
|
||||
|
||||
class BI00FullScreen extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
pagination: {},
|
||||
retData: [],
|
||||
displayNum: 24,
|
||||
totalCount: 0,
|
||||
finishCount: 0,
|
||||
overtimeCount: 0,
|
||||
unfinishCount: 0,
|
||||
filterType: 1,
|
||||
timeRange: '',
|
||||
departmentType: '',
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
width: '1200px',
|
||||
top: '0',
|
||||
bottom: '0',
|
||||
left: '0',
|
||||
right: '0',
|
||||
margin: 'auto',
|
||||
borderStyle: 'solid',
|
||||
borderColor: '#ccc',
|
||||
borderWidth: '1px',
|
||||
}}
|
||||
>
|
||||
<h1 style={{ textAlign: 'center', marginTop: '30px' }}>金源公司生产安全管控平台</h1>
|
||||
<Button
|
||||
type={this.state.filterType == 1 ? 'primary' : 'default'}
|
||||
onClick={() => window.open('#/popup', '_blank', 'noreferrer')}
|
||||
style={{ marginRight: '5px' }}
|
||||
>
|
||||
最近1周
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default connect(({ login, app }) => ({ login, app }))(BI00FullScreen);
|
||||
59
src/components/PopupWindow.js
Normal file
59
src/components/PopupWindow.js
Normal file
@ -0,0 +1,59 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Modal, Button, message } from 'antd';
|
||||
import FullScreenPage from '../layout/FullScreenInter';
|
||||
const PopupWindow = () => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [params, setParams] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
// 尝试从 URL 查询参数获取
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
const timeRange = searchParams.get('timeRange') || '';
|
||||
const filterType = searchParams.get('filterType') || '';
|
||||
|
||||
if (timeRange || filterType) {
|
||||
setParams({ timeRange, filterType });
|
||||
setVisible(true);
|
||||
} else {
|
||||
// 从 localStorage 获取
|
||||
const storedParams = localStorage.getItem('popupParams');
|
||||
if (storedParams) {
|
||||
try {
|
||||
const parsedParams = JSON.parse(storedParams);
|
||||
setParams(parsedParams);
|
||||
setVisible(true);
|
||||
localStorage.removeItem('popupParams');
|
||||
} catch (error) {
|
||||
message.error('参数解析错误');
|
||||
}
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ background: '#f0f2f5' }}>
|
||||
<Modal
|
||||
title="数据筛选"
|
||||
visible={visible}
|
||||
onCancel={() => setVisible(false)}
|
||||
footer={[
|
||||
<Button key="close" onClick={() => setVisible(false)}>
|
||||
关闭
|
||||
</Button>,
|
||||
]}
|
||||
width={700}
|
||||
centered
|
||||
>
|
||||
<FullScreenPage />
|
||||
</Modal>
|
||||
|
||||
{!visible && (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<FullScreenPage />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PopupWindow;
|
||||
@ -8,9 +8,10 @@ import { $consts } from '../plugins';
|
||||
import styles from './full.less';
|
||||
import echarts from 'echarts';
|
||||
import realGif from '../assets/layout/mofang.png';
|
||||
import logo from '../assets/layout/headerno-logo-new.png';
|
||||
import debounce from 'lodash.debounce';
|
||||
import storage from '../utils/storage';
|
||||
import { initFilter } from '../utils/common';
|
||||
import logo from '../assets/layout/headerno-logo-new.png';
|
||||
import {
|
||||
FullScreenContainer,
|
||||
BorderBox8,
|
||||
@ -20,6 +21,7 @@ import {
|
||||
WaterLevelPond,
|
||||
} from '@jiaminghi/data-view-react';
|
||||
import { text } from '@jiaminghi/data-view-react/lib/index-cd27b7f6';
|
||||
import { Scale } from 'canvg';
|
||||
|
||||
const stud = (eve) => {
|
||||
return (
|
||||
@ -39,6 +41,13 @@ const stud = (eve) => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const getScale = () => {
|
||||
const width = 1920,
|
||||
height = 1080; // 此处可以根据实际设计稿尺寸修改
|
||||
let ww = window.innerWidth / width;
|
||||
let wh = window.innerHeight / height;
|
||||
return ww < wh ? ww : wh;
|
||||
};
|
||||
|
||||
class FullScreen extends React.Component {
|
||||
constructor(props) {
|
||||
@ -48,7 +57,7 @@ class FullScreen extends React.Component {
|
||||
animationDuration: 20,
|
||||
sliderColor: '#de4e58',
|
||||
sliderSize: '24px',
|
||||
screenWidh: window.screen.width > 2000 ? true : false,
|
||||
// screenWidh: window.screen.width > 2000 ? true : false,
|
||||
nowDate: '',
|
||||
checkData: [
|
||||
{ name: '公司检查', value: 103 },
|
||||
@ -238,6 +247,7 @@ class FullScreen extends React.Component {
|
||||
value: 132,
|
||||
},
|
||||
],
|
||||
scale: getScale(),
|
||||
};
|
||||
// this.scrollConfig = {
|
||||
// header: ["检查类型", "检查次数", "完成率"],
|
||||
@ -255,7 +265,15 @@ class FullScreen extends React.Component {
|
||||
// };
|
||||
}
|
||||
|
||||
setScale = debounce(() => {
|
||||
// debounce节流
|
||||
// 获取到缩放比，设置它
|
||||
let scale = getScale();
|
||||
this.setState({ scale });
|
||||
}, 500);
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener('resize', this.setScale); // 得到呈现的屏幕宽高比
|
||||
this.riskLevel();
|
||||
this.safedanger();
|
||||
const eve = () => {
|
||||
@ -298,6 +316,7 @@ class FullScreen extends React.Component {
|
||||
// });
|
||||
}
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('resize', this.setScale);
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
getHomeTitle = () => {
|
||||
@ -932,202 +951,213 @@ class FullScreen extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { safetySloganOne, animationDuration, sliderColor, sliderSize } = this.state;
|
||||
const width = 1920,
|
||||
height = 1080;
|
||||
// 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
|
||||
const { scale, safetySloganOne, animationDuration, sliderColor, sliderSize } = this.state;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<FullScreenContainer>
|
||||
<div className={styles.blackBack}>
|
||||
<div className={styles.backImage}>
|
||||
<div className={styles.header}>
|
||||
<Row style={{ width: '100%', height: '100%' }}>
|
||||
<Col
|
||||
span={8}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
<div
|
||||
className={styles.box}
|
||||
style={{
|
||||
transform: `scale(${scale}) translate(-50%, -50%)`,
|
||||
WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,
|
||||
width,
|
||||
height,
|
||||
}}
|
||||
>
|
||||
<div className={styles.blackBack}>
|
||||
<div className={styles.backImage}>
|
||||
<div className={styles.header}>
|
||||
<Row style={{ width: '100%', height: '100%' }}>
|
||||
<Col
|
||||
span={8}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
flexDirection: 'row',
|
||||
width: '80%',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={logo}
|
||||
alt="logo"
|
||||
style={{
|
||||
width: 'auto',
|
||||
height: '52px',
|
||||
margin: '10px 20px 10px 50px',
|
||||
}}
|
||||
></img>
|
||||
<div
|
||||
className="slide-style"
|
||||
style={{
|
||||
'--animation-duration': `${animationDuration}s`, // 动态设置动画时长
|
||||
'--slider-color': `${sliderColor}`, // 动态设置颜色
|
||||
'--slider-size': `${sliderSize}px`, // 动态设置颜色
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
flexDirection: 'row',
|
||||
width: '80%',
|
||||
}}
|
||||
>
|
||||
<p className="slide-text-style">{safetySloganOne || '暂无公告'}</p>
|
||||
<img
|
||||
src={logo}
|
||||
alt="logo"
|
||||
style={{
|
||||
width: 'auto',
|
||||
height: '52px',
|
||||
margin: '10px 20px 10px 50px',
|
||||
}}
|
||||
></img>
|
||||
<div
|
||||
className="slide-style"
|
||||
style={{
|
||||
'--animation-duration': `${animationDuration}s`, // 动态设置动画时长
|
||||
'--slider-color': `${sliderColor}`, // 动态设置颜色
|
||||
'--slider-size': `${sliderSize}px`, // 动态设置颜色
|
||||
}}
|
||||
>
|
||||
<p className="slide-text-style">{safetySloganOne || '暂无公告'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col
|
||||
span={8}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div className={styles.headerText}>安全生产标准化运营平台</div>
|
||||
</Col>
|
||||
<Col
|
||||
span={8}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
</Col>
|
||||
<Col
|
||||
span={8}
|
||||
style={{
|
||||
color: '#fff',
|
||||
fontSize: '20px',
|
||||
margin: '10px 50px 10px 20px',
|
||||
fontWeight: 'bold',
|
||||
height: '52px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{this.state.nowDate}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<div className={styles.row}>
|
||||
<Row style={{ width: '100%', height: '100%' }}>
|
||||
<Col span={8} className={styles.boxleft}>
|
||||
<div className={styles.risklevel}>
|
||||
{/* <BorderBox10> */}
|
||||
<div className={styles.title}>
|
||||
<div className={styles.circle}></div>
|
||||
<div className={styles.titlename}>风险等级基本信息</div>
|
||||
<div className={styles.headerText}>金源公司安全生产管控平台</div>
|
||||
</Col>
|
||||
<Col
|
||||
span={8}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
color: '#fff',
|
||||
fontSize: '20px',
|
||||
margin: '10px 50px 10px 20px',
|
||||
fontWeight: 'bold',
|
||||
height: '52px',
|
||||
}}
|
||||
>
|
||||
{this.state.nowDate}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<div className={styles.row}>
|
||||
<Row style={{ width: '100%', height: '100%' }}>
|
||||
<Col span={8} className={styles.boxleft}>
|
||||
<div className={styles.risklevel}>
|
||||
{/* <BorderBox10> */}
|
||||
<div className={styles.title}>
|
||||
<div className={styles.circle}></div>
|
||||
<div className={styles.titlename}>风险等级基本信息</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="riskLevelFull"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
></div>
|
||||
{/* </BorderBox10> */}
|
||||
</div>
|
||||
|
||||
<div style={{ height: '10px' }}></div>
|
||||
<div className={styles.risklevelOne}>
|
||||
{/* <BorderBox10> */}
|
||||
<div className={styles.title}>
|
||||
<div className={styles.circle}></div>
|
||||
<div className={styles.titlename}>隐患检查基本信息</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
height: '30%',
|
||||
padding: '10px 30px',
|
||||
}}
|
||||
>
|
||||
{this.state.checkData.map((item, index) => {
|
||||
return (
|
||||
<div>
|
||||
<BorderBox8>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
color: '#fff',
|
||||
padding: '10px 25px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '14px' }}>{item.name}</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
/次
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '22px',
|
||||
color: '#febc22',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
{item.value}
|
||||
</div>
|
||||
</div>
|
||||
</BorderBox8>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className={styles.scrollboard}>
|
||||
<ScrollBoard config={this.state.scrollConfig} style={{ width: '100%', height: '100%' }} />
|
||||
</div>
|
||||
</div>
|
||||
{/* </BorderBox10> */}
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={8} className={styles.boxTwo}>
|
||||
<div
|
||||
id="riskLevelFull"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
></div>
|
||||
{/* </BorderBox10> */}
|
||||
</div>
|
||||
|
||||
<div style={{ height: '10px' }}></div>
|
||||
<div className={styles.risklevelOne}>
|
||||
{/* <BorderBox10> */}
|
||||
<div className={styles.title}>
|
||||
<div className={styles.circle}></div>
|
||||
<div className={styles.titlename}>隐患检查基本信息</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
height: '30%',
|
||||
padding: '10px 30px',
|
||||
}}
|
||||
>
|
||||
{this.state.checkData.map((item, index) => {
|
||||
return (
|
||||
<div>
|
||||
<BorderBox8>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
color: '#fff',
|
||||
padding: '10px 25px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '14px' }}>{item.name}</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
/次
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '22px',
|
||||
color: '#febc22',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
{item.value}
|
||||
</div>
|
||||
</div>
|
||||
</BorderBox8>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className={styles.scrollboard}>
|
||||
<ScrollBoard config={this.state.scrollConfig} style={{ width: '100%', height: '100%' }} />
|
||||
</div>
|
||||
</div>
|
||||
{/* </BorderBox10> */}
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={8} className={styles.boxTwo}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{this.state.screenWidh ? (
|
||||
<div className={styles.scoreBox}>
|
||||
<div className={styles.score}>
|
||||
{/* <div className={styles.scoreLeft}>矿山</div> */}
|
||||
@ -1149,103 +1179,111 @@ class FullScreen extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.scoreBox1}>
|
||||
<div className={styles.score4}>
|
||||
<div className={styles.scoreLeft}>矿山</div>
|
||||
<div className={styles.scoreText3}>标准化得分</div>
|
||||
<div className={styles.scoreText2}>83</div>
|
||||
{/* {this.state.screenWidh ? (
|
||||
|
||||
) : (
|
||||
<div className={styles.scoreBox1}>
|
||||
<div className={styles.score4}>
|
||||
<div className={styles.scoreLeft}>矿山</div>
|
||||
<div className={styles.scoreText3}>
|
||||
标准化得分
|
||||
</div>
|
||||
<div className={styles.scoreText2}>83</div>
|
||||
</div>
|
||||
<div className={styles.score4}>
|
||||
<div className={styles.scoreLeft}>选矿</div>
|
||||
<div className={styles.scoreText3}>
|
||||
标准化得分
|
||||
</div>
|
||||
<div className={styles.scoreText2}>88</div>
|
||||
</div>
|
||||
<div className={styles.score4}>
|
||||
<div className={styles.scoreLeft}>尾矿</div>
|
||||
<div className={styles.scoreText3}>
|
||||
标准化得分
|
||||
</div>
|
||||
<div className={styles.scoreText2}>93</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.score4}>
|
||||
<div className={styles.scoreLeft}>选矿</div>
|
||||
<div className={styles.scoreText3}>标准化得分</div>
|
||||
<div className={styles.scoreText2}>88</div>
|
||||
</div>
|
||||
<div className={styles.score4}>
|
||||
<div className={styles.scoreLeft}>尾矿</div>
|
||||
<div className={styles.scoreText3}>标准化得分</div>
|
||||
<div className={styles.scoreText2}>93</div>
|
||||
)} */}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
// height: "100%",
|
||||
// width: "100%",
|
||||
flex: 1,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<img src={realGif} alt="1" style={{ width: '100%', height: '100%' }}></img>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
fontSize: '14px',
|
||||
color: '#fff',
|
||||
top: '0',
|
||||
left: '0',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
className={styles.ulData}
|
||||
>
|
||||
{this.state.roaData.map((item, index) => {
|
||||
return (
|
||||
<li>
|
||||
<div className={styles.roateData}>
|
||||
<div className={styles.roatBack}>
|
||||
{item.name}:{item.value}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
// height: "100%",
|
||||
// width: "100%",
|
||||
flex: 1,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<img src={realGif} alt="1" style={{ width: '100%', height: '100%' }}></img>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={8} className={styles.boxTwo}>
|
||||
<div className={styles.risklevel}>
|
||||
{/* <BorderBox10> */}
|
||||
<div className={styles.title}>
|
||||
<div className={styles.circle}></div>
|
||||
<div className={styles.titlename}>基本会议完成情况</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
fontSize: '14px',
|
||||
color: '#fff',
|
||||
top: '0',
|
||||
left: '0',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
width: '90%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRadius: '50%',
|
||||
height: '50%',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
className={styles.ulData}
|
||||
>
|
||||
{this.state.roaData.map((item, index) => {
|
||||
return (
|
||||
<li>
|
||||
<div className={styles.roateData}>
|
||||
<div className={styles.roatBack}>
|
||||
{item.name}:{item.value}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={8} className={styles.boxTwo}>
|
||||
<div className={styles.risklevel}>
|
||||
{/* <BorderBox10> */}
|
||||
<div className={styles.title}>
|
||||
<div className={styles.circle}></div>
|
||||
<div className={styles.titlename}>基本会议完成情况</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
width: '90%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '50%',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<div id="completeone" style={{ width: '100%', height: '100%' }}></div>
|
||||
{/* <div
|
||||
<div id="completeone" style={{ width: '100%', height: '100%' }}></div>
|
||||
{/* <div
|
||||
id="completetwo"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
></div>
|
||||
@ -1253,7 +1291,7 @@ class FullScreen extends React.Component {
|
||||
id="completethree"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
></div> */}
|
||||
{/* <WaterLevelPond
|
||||
{/* <WaterLevelPond
|
||||
config={this.state.WaterLevelPondconfig1}
|
||||
style={{ width: "20%", height: "100%" }}
|
||||
/>
|
||||
@ -1265,183 +1303,187 @@ class FullScreen extends React.Component {
|
||||
config={this.state.WaterLevelPondconfig3}
|
||||
style={{ width: "20%", height: "100%" }}
|
||||
/> */}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '50%',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '10px',
|
||||
}}
|
||||
>
|
||||
<Row gutter={[8, 8]} style={{ padding: '0px 10px' }}>
|
||||
{this.state.meetingData.map((item, index) => (
|
||||
<Col span={6}>
|
||||
<div className={styles.gradientThree}>
|
||||
<div className={styles.gradientNext}>
|
||||
<div className={styles.gradientNextTwo}>
|
||||
<div className={styles.gradientText}>{item.value}</div>
|
||||
<div className={styles.gradientName}>{item.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ height: '10px' }}></div>
|
||||
<div className={styles.risklevelOne}>
|
||||
{/* <BorderBox10> */}
|
||||
<div className={styles.title}>
|
||||
<div className={styles.circle}></div>
|
||||
<div className={styles.titlename}>安全任务完成情况</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div className={styles.scrollboard} style={{ marginTop: '20px' }}>
|
||||
<ScrollBoard
|
||||
config={this.state.safescrollConfig}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* </BorderBox10> */}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<div className={styles.rowTwo}>
|
||||
<Row style={{ width: '100%', height: '100%' }}>
|
||||
<Col span={8} className={styles.boxleft}>
|
||||
<div className={styles.risklevelTwo}>
|
||||
{/* <BorderBox10> */}
|
||||
<div className={styles.title}>
|
||||
<div className={styles.circle}></div>
|
||||
<div className={styles.titlename}>隐患整改数据</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '50%',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '10px',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<Row gutter={[8, 8]} style={{ padding: '0px 10px' }}>
|
||||
{this.state.meetingData.map((item, index) => (
|
||||
<Col span={6}>
|
||||
<div className={styles.gradientThree}>
|
||||
<div className={styles.gradientNext}>
|
||||
<div className={styles.gradientNextTwo}>
|
||||
<div className={styles.gradientText}>{item.value}</div>
|
||||
<div className={styles.gradientName}>{item.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.riskChange}>
|
||||
<div className={styles.gradient}>
|
||||
<div className={styles.gradientNext}>
|
||||
<div className={styles.gradientNextTwo}>
|
||||
<div className={styles.gradientText}>83</div>
|
||||
<div className={styles.gradientName}>隐患数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.gradient}>
|
||||
<div className={styles.gradientNext}>
|
||||
<div className={styles.gradientNextTwo}>
|
||||
<div className={styles.gradientText}>23</div>
|
||||
<div className={styles.gradientName}>延期整改数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.gradient}>
|
||||
<div className={styles.gradientNext}>
|
||||
<div className={styles.gradientNextTwo}>
|
||||
<div className={styles.gradientText}>56</div>
|
||||
<div className={styles.gradientName}>按期整改数</div>
|
||||
</div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ height: '10px' }}></div>
|
||||
<div className={styles.risklevelOne}>
|
||||
{/* <BorderBox10> */}
|
||||
<div className={styles.title}>
|
||||
<div className={styles.circle}></div>
|
||||
<div className={styles.titlename}>安全任务完成情况</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div className={styles.scrollboard} style={{ marginTop: '20px' }}>
|
||||
<ScrollBoard config={this.state.safescrollConfig} style={{ width: '100%', height: '100%' }} />
|
||||
</div>
|
||||
</div>
|
||||
{/* </BorderBox10> */}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<div className={styles.rowTwo}>
|
||||
<Row style={{ width: '100%', height: '100%' }}>
|
||||
<Col span={8} className={styles.boxleft}>
|
||||
<div className={styles.risklevelTwo}>
|
||||
{/* <BorderBox10> */}
|
||||
<div className={styles.title}>
|
||||
<div className={styles.circle}></div>
|
||||
<div className={styles.titlename}>隐患整改数据</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div className={styles.riskChange}>
|
||||
<div className={styles.gradient}>
|
||||
<div className={styles.gradientNext}>
|
||||
<div className={styles.gradientNextTwo}>
|
||||
<div className={styles.gradientText}>83</div>
|
||||
<div className={styles.gradientName}>隐患数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.gradient}>
|
||||
<div className={styles.gradientNext}>
|
||||
<div className={styles.gradientNextTwo}>
|
||||
<div className={styles.gradientText}>23</div>
|
||||
<div className={styles.gradientName}>延期整改数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.gradient}>
|
||||
<div className={styles.gradientNext}>
|
||||
<div className={styles.gradientNextTwo}>
|
||||
<div className={styles.gradientText}>56</div>
|
||||
<div className={styles.gradientName}>按期整改数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.riskChangeTwo}>
|
||||
<div className={styles.gradientTwo}>
|
||||
<div className={styles.gradientNext}>
|
||||
<div className={styles.gradientNextTwo}>
|
||||
<div className={styles.gradientTextTwo}>83%</div>
|
||||
<div className={styles.gradientNameTwo}>整改率</div>
|
||||
<div className={styles.riskChangeTwo}>
|
||||
<div className={styles.gradientTwo}>
|
||||
<div className={styles.gradientNext}>
|
||||
<div className={styles.gradientNextTwo}>
|
||||
<div className={styles.gradientTextTwo}>83%</div>
|
||||
<div className={styles.gradientNameTwo}>整改率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* </BorderBox10> */}
|
||||
</div>
|
||||
{/* </BorderBox10> */}
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={8} className={styles.boxTwo}>
|
||||
{/* <BorderBox8> */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div className={styles.title}>
|
||||
<div className={styles.circle}></div>
|
||||
<div className={styles.titlename}>安全生产标准化运行走势图</div>
|
||||
</div>
|
||||
<div
|
||||
id="opretionTrend"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '90%',
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
{/* </BorderBox8> */}
|
||||
</Col>
|
||||
<Col span={8} className={styles.boxTwo}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
</Col>
|
||||
<Col span={8} className={styles.boxTwo}>
|
||||
{/* <BorderBox8> */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
width: '90%',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div className={styles.title}>
|
||||
<div className={styles.circle}></div>
|
||||
<div className={styles.titlename}>班组完成率TOP5</div>
|
||||
<div className={styles.titlename}>安全生产标准化运行走势图</div>
|
||||
</div>
|
||||
<div className={styles.capsuleChart}>
|
||||
<CapsuleChart config={this.state.chartConfig} style={{ width: '100%', height: '100%' }} />
|
||||
<div
|
||||
id="opretionTrend"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '90%',
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
{/* </BorderBox8> */}
|
||||
</Col>
|
||||
<Col span={8} className={styles.boxTwo}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
width: '90%',
|
||||
height: '100%',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div className={styles.title}>
|
||||
<div className={styles.circle}></div>
|
||||
<div className={styles.titlename}>班组完成率TOP5</div>
|
||||
</div>
|
||||
<div className={styles.capsuleChart}>
|
||||
<CapsuleChart config={this.state.chartConfig} style={{ width: '100%', height: '100%' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
1531
src/layout/FullScreenInter.js
Normal file
1531
src/layout/FullScreenInter.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,24 +1,31 @@
|
||||
@font-face {
|
||||
font-family: pangmenzhengdao;
|
||||
src: url("../assets/fonts/pangmenzhengdao.ttf");
|
||||
src: url('../assets/fonts/pangmenzhengdao.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "阿里妈妈东方大楷 Regular";
|
||||
font-family: '阿里妈妈东方大楷 Regular';
|
||||
font-weight: normal;
|
||||
src: url("../assets/fonts/AlimamaDongFangDaKai-Regular.ttf")
|
||||
format("truetype");
|
||||
src: url('../assets/fonts/AlimamaDongFangDaKai-Regular.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "站酷庆科黄油体";
|
||||
font-family: '站酷庆科黄油体';
|
||||
font-weight: normal;
|
||||
src: url("../assets/fonts/zhankuqingke.ttf") format("truetype");
|
||||
src: url('../assets/fonts/zhankuqingke.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.box {
|
||||
transform-origin: 0 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.blackBack {
|
||||
background-image: url("../assets/login/bg.png");
|
||||
background-image: url('../assets/login/bg.png');
|
||||
width: 100%;
|
||||
// height: calc(100% - 10px); // 进入全屏
|
||||
height: 100%;
|
||||
@ -35,7 +42,7 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
.header {
|
||||
background-image: url("../assets/layout/full-header.png");
|
||||
background-image: url('../assets/layout/full-header.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -51,7 +58,7 @@
|
||||
font-size: 32px;
|
||||
// font-weight: bold;
|
||||
margin-top: 10px;
|
||||
font-family: "pangmenzhengdao";
|
||||
font-family: 'pangmenzhengdao';
|
||||
}
|
||||
.row {
|
||||
// height: calc(65% - 200px);
|
||||
@ -185,7 +192,7 @@
|
||||
font-size: 18px;
|
||||
}
|
||||
.title {
|
||||
background-image: url("../assets/layout/title.png");
|
||||
background-image: url('../assets/layout/title.png');
|
||||
background-size: cover;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
@ -208,7 +215,7 @@
|
||||
.titlename {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-family: "站酷庆科黄油体";
|
||||
font-family: '站酷庆科黄油体';
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
.risklevelOne {
|
||||
@ -264,7 +271,7 @@
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.scoreBox1 {
|
||||
background-image: url("../assets/layout/score-box.png");
|
||||
background-image: url('../assets/layout/score-box.png');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -282,7 +289,7 @@
|
||||
flex-direction: row;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
background-image: url("../assets/layout/ks.png");
|
||||
background-image: url('../assets/layout/ks.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -297,7 +304,7 @@
|
||||
flex-direction: row;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
background-image: url("../assets/layout/xk.png");
|
||||
background-image: url('../assets/layout/xk.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -311,7 +318,7 @@
|
||||
flex-direction: row;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
background-image: url("../assets/layout/wk.png");
|
||||
background-image: url('../assets/layout/wk.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -325,7 +332,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-image: url("../assets/layout/score.png");
|
||||
background-image: url('../assets/layout/score.png');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -376,58 +383,45 @@
|
||||
}
|
||||
li:nth-of-type(1) {
|
||||
// transform: rotate(45deg);
|
||||
transform: translate(-50%, -50%) rotate(12deg) translate(-280px)
|
||||
rotate(-12deg);
|
||||
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);
|
||||
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);
|
||||
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);
|
||||
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);
|
||||
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);
|
||||
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);
|
||||
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);
|
||||
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);
|
||||
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);
|
||||
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);
|
||||
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);
|
||||
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);
|
||||
transform: translate(-50%, -50%) rotate(-168deg) translate(-280px) rotate(168deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
551
src/layout/fullinter.less
Normal file
551
src/layout/fullinter.less
Normal file
@ -0,0 +1,551 @@
|
||||
@font-face {
|
||||
font-family: pangmenzhengdao;
|
||||
src: url('../assets/fonts/pangmenzhengdao.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: '阿里妈妈东方大楷 Regular';
|
||||
font-weight: normal;
|
||||
src: url('../assets/fonts/AlimamaDongFangDaKai-Regular.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: '站酷庆科黄油体';
|
||||
font-weight: normal;
|
||||
src: url('../assets/fonts/zhankuqingke.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.box {
|
||||
transform-origin: 0 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.blackBack {
|
||||
background-image: url('../assets/login/bg.png');
|
||||
width: 100%;
|
||||
// height: calc(100% - 10px); // 进入全屏
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.backImage {
|
||||
background-color: #021428; //021428
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.header {
|
||||
// background-image: url('../assets/layout/full-header.png');
|
||||
// background-size: cover;
|
||||
// background-position: center;
|
||||
// background-repeat: no-repeat;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
margin: 10px;
|
||||
background-color: rgba(73, 122, 175, 0.3);
|
||||
}
|
||||
.headerText {
|
||||
color: GoldenRod;
|
||||
font-size: 32px;
|
||||
white-space: nowrap;
|
||||
// font-weight: bold;
|
||||
// margin-top: 10px;
|
||||
font-family: 'pangmenzhengdao';
|
||||
}
|
||||
.configBanners {
|
||||
// height: 100%;
|
||||
width: 110px;
|
||||
height: 48px;
|
||||
font-size: 20px; // 适当减小字体大小
|
||||
margin: 0px 10px;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
border: 1px solid transparent; // 默认透明边框
|
||||
// border: 1px solid #00caf7;
|
||||
white-space: nowrap;
|
||||
background: linear-gradient(to bottom, #01408e, #07295e);
|
||||
display: flex; // 使用flex布局
|
||||
align-items: center; // 垂直居中
|
||||
justify-content: center; // 水平居中
|
||||
text-align: center; // 文字居中
|
||||
box-sizing: border-box; // 确保边框计算在内
|
||||
padding: 0 2px; // 如果需要可以添加内边距
|
||||
overflow: hidden; // 防止内容溢出
|
||||
text-overflow: ellipsis; // 文字过长显示省略号
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border-color: #00caf7; // 悬停效果
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 1px solid #00caf7 !important;
|
||||
background: linear-gradient(to bottom, #0150a0, #083070); // 激活时背景加深
|
||||
box-shadow: 0 0 10px rgba(0, 202, 247, 0.5); // 可选：添加发光效果
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 202, 247, 0.2), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
&.active::after {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
&.active {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 5px rgba(0, 202, 247, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 15px rgba(0, 202, 247, 0.8);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 5px rgba(0, 202, 247, 0.5);
|
||||
}
|
||||
}
|
||||
.boxBack {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
.otherTabContent {
|
||||
flex: 1; // 占据剩余空间
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(2, 20, 40, 0.7);
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
border: 1px solid rgba(0, 202, 247, 0.3);
|
||||
}
|
||||
.row {
|
||||
// height: calc(65% - 200px);
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
.rowTwo {
|
||||
height: 30%;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.boxleft {
|
||||
height: 100%;
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: 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;
|
||||
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;
|
||||
font-size: 16px;
|
||||
font-family: '站酷庆科黄油体';
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
// .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;
|
||||
}
|
||||
.scrollboard :global(.header) {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
.scrollboard :global(.dv-scroll-board .rows .ceil) {
|
||||
text-align: center;
|
||||
}
|
||||
.scrollboard :global(.dv-scroll-board .header .header-item) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scoreBox {
|
||||
// background-image: url("../assets/layout/score-box.png");
|
||||
// background-size: cover;
|
||||
// background-position: center;
|
||||
// background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.scoreBox1 {
|
||||
background-image: url('../assets/layout/score-box.png');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
// height: 140px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 20px;
|
||||
padding: 5px;
|
||||
}
|
||||
.score {
|
||||
display: flex;
|
||||
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;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40%;
|
||||
margin-left: 50%;
|
||||
}
|
||||
.scoreLeft {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #6cc8d9;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.scoreText {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #6cc8d9;
|
||||
}
|
||||
.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;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
// margin-left: -20px;
|
||||
// margin-right: -20px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
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;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 2px;
|
||||
// background-color: rgba(47, 109, 255, 0.1);
|
||||
}
|
||||
.roatBack {
|
||||
background-color: #021428;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5px;
|
||||
}
|
||||
@ -3,6 +3,10 @@ export default [
|
||||
name: 'LOGIN',
|
||||
value: '/login'
|
||||
},
|
||||
{
|
||||
name: 'POPUPWINDOW',
|
||||
value: '/popup'
|
||||
},
|
||||
{
|
||||
name: 'HOME',
|
||||
value: '/home'
|
||||
|
||||
@ -1,34 +1,42 @@
|
||||
import React from 'react'
|
||||
import { ConfigProvider } from 'antd'
|
||||
import { Router, Route, Switch } from 'dva/router'
|
||||
import MainLayout from './layout/Main'
|
||||
import Login from './routes/Login'
|
||||
import Home from './routes/Home'
|
||||
import GroupHome from './routes/GroupHome'
|
||||
import Main from './routes/Main'
|
||||
import Backend from './routes/Backend'
|
||||
import HomeMobileNew from './routes/HomeMobileNew'
|
||||
import { $consts } from './plugins'
|
||||
import zhCN from 'antd/lib/locale-provider/zh_CN'
|
||||
import 'moment/src/locale/zh-cn'
|
||||
import React from 'react';
|
||||
import { ConfigProvider } from 'antd';
|
||||
import { Router, Route, Switch } from 'dva/router';
|
||||
import MainLayout from './layout/Main';
|
||||
import Login from './routes/Login';
|
||||
import Home from './routes/Home';
|
||||
import GroupHome from './routes/GroupHome';
|
||||
import Main from './routes/Main';
|
||||
import Backend from './routes/Backend';
|
||||
import HomeMobileNew from './routes/HomeMobileNew';
|
||||
import { $consts } from './plugins';
|
||||
import zhCN from 'antd/lib/locale-provider/zh_CN';
|
||||
import 'moment/src/locale/zh-cn';
|
||||
import PopupWindow from './components/PopupWindow';
|
||||
|
||||
function RouterConfig({ history }) {
|
||||
return (
|
||||
<Router history={history}>
|
||||
<ConfigProvider locale={zhCN}>
|
||||
<MainLayout>
|
||||
<Switch>
|
||||
<Route path={$consts['ROUTE/LOGIN']} component={Login} />
|
||||
<Route path={$consts['ROUTE/HOME']} component={Home} />
|
||||
<Route path={$consts['ROUTE/GROUPHOME']} component={GroupHome} />
|
||||
<Route path={$consts['ROUTE/MAIN']} component={Main} />
|
||||
<Route path={$consts['ROUTE/BACKEND']} component={Backend} />
|
||||
{/* <Route path={$consts['ROUTE/HomeMobileNew']} component={HomeMobileNew} /> */}
|
||||
</Switch>
|
||||
</MainLayout>
|
||||
<Switch>
|
||||
<Route path={$consts['ROUTE/POPUPWINDOW']} component={PopupWindow} />
|
||||
{/* 其他页面使用 MainLayout */}
|
||||
<Route
|
||||
render={() => (
|
||||
<MainLayout>
|
||||
<Switch>
|
||||
<Route path={$consts['ROUTE/LOGIN']} component={Login} />
|
||||
<Route path={$consts['ROUTE/HOME']} component={Home} />
|
||||
<Route path={$consts['ROUTE/GROUPHOME']} component={GroupHome} />
|
||||
<Route path={$consts['ROUTE/MAIN']} component={Main} />
|
||||
<Route path={$consts['ROUTE/BACKEND']} component={Backend} />
|
||||
</Switch>
|
||||
</MainLayout>
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
</ConfigProvider>
|
||||
</Router>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default RouterConfig
|
||||
export default RouterConfig;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user