wyw/mh_jy_safe_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

可视化

Browse Source
This commit is contained in:
yunkexin 2026-01-19 08:56:29 +08:00
parent 827ce856f7
commit c47798866f
8 changed files with 2722 additions and 467 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/CustomPages/BI/BI00FullScreen.js Normal file
View 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
View 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;

842
src/layout/FullScreen.js
View File

@ -8,9 +8,10 @@ import { $consts } from '../plugins';
import styles from './full.less'; import styles from './full.less';
import echarts from 'echarts'; import echarts from 'echarts';
import realGif from '../assets/layout/mofang.png'; 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 storage from '../utils/storage';
import { initFilter } from '../utils/common'; import { initFilter } from '../utils/common';
import logo from '../assets/layout/headerno-logo-new.png';
import { import {
FullScreenContainer, FullScreenContainer,
BorderBox8, BorderBox8,
@ -20,6 +21,7 @@ import {
WaterLevelPond, WaterLevelPond,
} from '@jiaminghi/data-view-react'; } from '@jiaminghi/data-view-react';
import { text } from '@jiaminghi/data-view-react/lib/index-cd27b7f6'; import { text } from '@jiaminghi/data-view-react/lib/index-cd27b7f6';
import { Scale } from 'canvg';
const stud = (eve) => { const stud = (eve) => {
return ( return (
@ -39,6 +41,13 @@ const stud = (eve) => {
</div> </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 { class FullScreen extends React.Component {
constructor(props) { constructor(props) {
@ -48,7 +57,7 @@ class FullScreen extends React.Component {
animationDuration: 20, animationDuration: 20,
sliderColor: '#de4e58', sliderColor: '#de4e58',
sliderSize: '24px', sliderSize: '24px',
screenWidh: window.screen.width > 2000 ? true : false, // screenWidh: window.screen.width > 2000 ? true : false,
nowDate: '', nowDate: '',
checkData: [ checkData: [
{ name: '公司检查', value: 103 }, { name: '公司检查', value: 103 },
@ -238,6 +247,7 @@ class FullScreen extends React.Component {
value: 132, value: 132,
}, },
], ],
scale: getScale(),
}; };
// this.scrollConfig = { // this.scrollConfig = {
// header: ["检查类型", "检查次数", "完成率"], // header: ["检查类型", "检查次数", "完成率"],
@ -255,7 +265,15 @@ class FullScreen extends React.Component {
// }; // };
} }
setScale = debounce(() => {
// debounce节流
// 获取到缩放比，设置它
let scale = getScale();
this.setState({ scale });
}, 500);
componentDidMount() { componentDidMount() {
window.addEventListener('resize', this.setScale); // 得到呈现的屏幕宽高比
this.riskLevel(); this.riskLevel();
this.safedanger(); this.safedanger();
const eve = () => { const eve = () => {
@ -298,6 +316,7 @@ class FullScreen extends React.Component {
// }); // });
} }
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener('resize', this.setScale);
clearInterval(this.timer); clearInterval(this.timer);
} }
getHomeTitle = () => { getHomeTitle = () => {
@ -932,202 +951,213 @@ class FullScreen extends React.Component {
}; };
render() { render() {
const { safetySloganOne, animationDuration, sliderColor, sliderSize } = this.state; const width = 1920,
height = 1080;
// 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
const { scale, safetySloganOne, animationDuration, sliderColor, sliderSize } = this.state;
return ( return (
<React.Fragment> <React.Fragment>
<FullScreenContainer> <FullScreenContainer>
<div className={styles.blackBack}> <div
<div className={styles.backImage}> className={styles.box}
<div className={styles.header}> style={{
<Row style={{ width: '100%', height: '100%' }}> transform: `scale(${scale}) translate(-50%, -50%)`,
<Col WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,
span={8} width,
style={{ height,
display: 'flex', }}
alignItems: 'center', >
justifyContent: 'flex-start', <div className={styles.blackBack}>
}} <div className={styles.backImage}>
> <div className={styles.header}>
<div <Row style={{ width: '100%', height: '100%' }}>
<Col
span={8}
style={{ style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'flex-start', justifyContent: 'flex-start',
flexDirection: 'row',
width: '80%',
}} }}
> >
<img
src={logo}
alt="logo"
style={{
width: 'auto',
height: '52px',
margin: '10px 20px 10px 50px',
}}
></img>
<div <div
className="slide-style"
style={{ style={{
'--animation-duration': `${animationDuration}s`, // 动态设置动画时长 display: 'flex',
'--slider-color': `${sliderColor}`, // 动态设置颜色 alignItems: 'center',
'--slider-size': `${sliderSize}px`, // 动态设置颜色 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>
</div> </Col>
</Col> <Col
<Col span={8}
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
style={{ style={{
color: '#fff', display: 'flex',
fontSize: '20px', alignItems: 'center',
margin: '10px 50px 10px 20px', justifyContent: 'center',
fontWeight: 'bold',
height: '52px',
}} }}
> >
{this.state.nowDate} <div className={styles.headerText}>金源公司安全生产管控平台</div>
</div> </Col>
</Col> <Col
</Row> span={8}
</div> style={{
<div className={styles.row}> display: 'flex',
<Row style={{ width: '100%', height: '100%' }}> alignItems: 'center',
<Col span={8} className={styles.boxleft}> justifyContent: 'flex-end',
<div className={styles.risklevel}> }}
{/* <BorderBox10> */} >
<div className={styles.title}> <div
<div className={styles.circle}></div> style={{
<div className={styles.titlename}>风险等级基本信息</div> 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>
<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 <div
id="riskLevelFull"
style={{ style={{
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
width: '100%', 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.scoreBox}>
<div className={styles.score}> <div className={styles.score}>
{/* <div className={styles.scoreLeft}>矿山</div> */} {/* <div className={styles.scoreLeft}>矿山</div> */}
@ -1149,103 +1179,111 @@ class FullScreen extends React.Component {
</div> </div>
</div> </div>
</div> </div>
) : ( {/* {this.state.screenWidh ? (
<div className={styles.scoreBox1}>
<div className={styles.score4}> ) : (
<div className={styles.scoreLeft}>矿山</div> <div className={styles.scoreBox1}>
<div className={styles.scoreText3}>标准化得分</div> <div className={styles.score4}>
<div className={styles.scoreText2}>83</div> <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>
<div className={styles.score4}> )} */}
<div className={styles.scoreLeft}>选矿</div> </div>
<div className={styles.scoreText3}>标准化得分</div> <div
<div className={styles.scoreText2}>88</div> style={{
</div> display: 'flex',
<div className={styles.score4}> alignItems: 'center',
<div className={styles.scoreLeft}>尾矿</div> justifyContent: 'center',
<div className={styles.scoreText3}>标准化得分</div> // height: "100%",
<div className={styles.scoreText2}>93</div> // 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>
)} </div>
</div> </Col>
<div <Col span={8} className={styles.boxTwo}>
style={{ <div className={styles.risklevel}>
display: 'flex', {/* <BorderBox10> */}
alignItems: 'center', <div className={styles.title}>
justifyContent: 'center', <div className={styles.circle}></div>
// height: "100%", <div className={styles.titlename}>基本会议完成情况</div>
// width: "100%", </div>
flex: 1,
position: 'relative',
}}
>
<div>
<img src={realGif} alt="1" style={{ width: '100%', height: '100%' }}></img>
<div <div
style={{ style={{
position: 'absolute', display: 'flex',
fontSize: '14px', flexDirection: 'column',
color: '#fff', alignItems: 'center',
top: '0', width: '90%',
left: '0',
width: '100%',
height: '100%', height: '100%',
}} }}
> >
<div <div
style={{ style={{
position: 'relative', display: 'flex',
flexDirection: 'row',
alignItems: 'center',
width: '100%', width: '100%',
height: '100%', height: '50%',
borderRadius: '50%', justifyContent: 'space-between',
}} }}
className={styles.ulData}
> >
{this.state.roaData.map((item, index) => { <div id="completeone" style={{ width: '100%', height: '100%' }}></div>
return ( {/* <div
<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
id="completetwo" id="completetwo"
style={{ width: "100%", height: "100%" }} style={{ width: "100%", height: "100%" }}
></div> ></div>
@ -1253,7 +1291,7 @@ class FullScreen extends React.Component {
id="completethree" id="completethree"
style={{ width: "100%", height: "100%" }} style={{ width: "100%", height: "100%" }}
></div> */} ></div> */}
{/* <WaterLevelPond {/* <WaterLevelPond
config={this.state.WaterLevelPondconfig1} config={this.state.WaterLevelPondconfig1}
style={{ width: "20%", height: "100%" }} style={{ width: "20%", height: "100%" }}
/> />
@ -1265,183 +1303,187 @@ class FullScreen extends React.Component {
config={this.state.WaterLevelPondconfig3} config={this.state.WaterLevelPondconfig3}
style={{ width: "20%", height: "100%" }} 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>
<div <div
style={{ style={{
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center',
width: '100%', width: '100%',
height: '50%', height: '100%',
justifyContent: 'space-between',
marginBottom: '10px',
}} }}
> >
<Row gutter={[8, 8]} style={{ padding: '0px 10px' }}> <div className={styles.riskChange}>
{this.state.meetingData.map((item, index) => ( <div className={styles.gradient}>
<Col span={6}> <div className={styles.gradientNext}>
<div className={styles.gradientThree}> <div className={styles.gradientNextTwo}>
<div className={styles.gradientNext}> <div className={styles.gradientText}>83</div>
<div className={styles.gradientNextTwo}> <div className={styles.gradientName}>隐患数</div>
<div className={styles.gradientText}>{item.value}</div> </div>
<div className={styles.gradientName}>{item.name}</div> </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>
</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>
</div> </div>
<div className={styles.gradient}> <div className={styles.riskChangeTwo}>
<div className={styles.gradientNext}> <div className={styles.gradientTwo}>
<div className={styles.gradientNextTwo}> <div className={styles.gradientNext}>
<div className={styles.gradientText}>23</div> <div className={styles.gradientNextTwo}>
<div className={styles.gradientName}>延期整改数</div> <div className={styles.gradientTextTwo}>83%</div>
</div> <div className={styles.gradientNameTwo}>整改率</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> </div>
</div> </div>
</div> </div>
</div> </div>
{/* </BorderBox10> */}
</div> </div>
{/* </BorderBox10> */} </Col>
</div> <Col span={8} className={styles.boxTwo}>
</Col> {/* <BorderBox8> */}
<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',
}}
>
<div <div
style={{ style={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',
width: '90%', width: '100%',
height: '100%', height: '100%',
alignItems: 'center', alignItems: 'center',
}} }}
> >
<div className={styles.title}> <div className={styles.title}>
<div className={styles.circle}></div> <div className={styles.circle}></div>
<div className={styles.titlename}>班组完成率TOP5</div> <div className={styles.titlename}>安全生产标准化运行走势图</div>
</div> </div>
<div className={styles.capsuleChart}> <div
<CapsuleChart config={this.state.chartConfig} style={{ width: '100%', height: '100%' }} /> 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> </div>
</div> </Col>
</Col> </Row>
</Row> </div>
</div> </div>
</div> </div>
</div> </div>

1531
src/layout/FullScreenInter.js Normal file
View File

File diff suppressed because it is too large Load Diff

78
src/layout/full.less
View File

@ -1,24 +1,31 @@
@font-face { @font-face {
font-family: pangmenzhengdao; font-family: pangmenzhengdao;
src: url("../assets/fonts/pangmenzhengdao.ttf"); src: url('../assets/fonts/pangmenzhengdao.ttf');
} }
@font-face { @font-face {
font-family: "阿里妈妈东方大楷 Regular"; font-family: '阿里妈妈东方大楷 Regular';
font-weight: normal; font-weight: normal;
src: url("../assets/fonts/AlimamaDongFangDaKai-Regular.ttf") src: url('../assets/fonts/AlimamaDongFangDaKai-Regular.ttf') format('truetype');
format("truetype");
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: "站酷庆科黄油体"; font-family: '站酷庆科黄油体';
font-weight: normal; font-weight: normal;
src: url("../assets/fonts/zhankuqingke.ttf") format("truetype"); src: url('../assets/fonts/zhankuqingke.ttf') format('truetype');
font-display: swap; font-display: swap;
} }
.box {
transform-origin: 0 0;
position: absolute;
left: 50%;
top: 50%;
transition: 0.3s;
}
.blackBack { .blackBack {
background-image: url("../assets/login/bg.png"); background-image: url('../assets/login/bg.png');
width: 100%; width: 100%;
// height: calc(100% - 10px); // 进入全屏 // height: calc(100% - 10px); // 进入全屏
height: 100%; height: 100%;
@ -35,7 +42,7 @@
flex-direction: column; flex-direction: column;
} }
.header { .header {
background-image: url("../assets/layout/full-header.png"); background-image: url('../assets/layout/full-header.png');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -51,7 +58,7 @@
font-size: 32px; font-size: 32px;
// font-weight: bold; // font-weight: bold;
margin-top: 10px; margin-top: 10px;
font-family: "pangmenzhengdao"; font-family: 'pangmenzhengdao';
} }
.row { .row {
// height: calc(65% - 200px); // height: calc(65% - 200px);
@ -185,7 +192,7 @@
font-size: 18px; font-size: 18px;
} }
.title { .title {
background-image: url("../assets/layout/title.png"); background-image: url('../assets/layout/title.png');
background-size: cover; background-size: cover;
background-position: bottom; background-position: bottom;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -208,7 +215,7 @@
.titlename { .titlename {
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
font-family: "站酷庆科黄油体"; font-family: '站酷庆科黄油体';
letter-spacing: 3px; letter-spacing: 3px;
} }
.risklevelOne { .risklevelOne {
@ -264,7 +271,7 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.scoreBox1 { .scoreBox1 {
background-image: url("../assets/layout/score-box.png"); background-image: url('../assets/layout/score-box.png');
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -282,7 +289,7 @@
flex-direction: row; flex-direction: row;
// align-items: center; // align-items: center;
// justify-content: space-between; // justify-content: space-between;
background-image: url("../assets/layout/ks.png"); background-image: url('../assets/layout/ks.png');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -297,7 +304,7 @@
flex-direction: row; flex-direction: row;
// align-items: center; // align-items: center;
// justify-content: space-between; // justify-content: space-between;
background-image: url("../assets/layout/xk.png"); background-image: url('../assets/layout/xk.png');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -311,7 +318,7 @@
flex-direction: row; flex-direction: row;
// align-items: center; // align-items: center;
// justify-content: space-between; // justify-content: space-between;
background-image: url("../assets/layout/wk.png"); background-image: url('../assets/layout/wk.png');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -325,7 +332,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-image: url("../assets/layout/score.png"); background-image: url('../assets/layout/score.png');
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -376,58 +383,45 @@
} }
li:nth-of-type(1) { li:nth-of-type(1) {
// transform: rotate(45deg); // transform: rotate(45deg);
transform: translate(-50%, -50%) rotate(12deg) translate(-280px) transform: translate(-50%, -50%) rotate(12deg) translate(-280px) rotate(-12deg);
rotate(-12deg);
// transform-origin: 20px 220px; // transform-origin: 20px 220px;
} }
li:nth-of-type(2) { li:nth-of-type(2) {
transform: translate(-50%, -50%) rotate(38deg) translate(-280px) transform: translate(-50%, -50%) rotate(38deg) translate(-280px) rotate(-38deg);
rotate(-38deg);
} }
li:nth-of-type(3) { li:nth-of-type(3) {
transform: translate(-50%, -50%) rotate(64deg) translate(-280px) transform: translate(-50%, -50%) rotate(64deg) translate(-280px) rotate(-64deg);
rotate(-64deg);
} }
li:nth-of-type(4) { li:nth-of-type(4) {
transform: translate(-50%, -50%) rotate(90deg) translate(-280px) transform: translate(-50%, -50%) rotate(90deg) translate(-280px) rotate(-90deg);
rotate(-90deg);
} }
li:nth-of-type(5) { li:nth-of-type(5) {
transform: translate(-50%, -50%) rotate(116deg) translate(-280px) transform: translate(-50%, -50%) rotate(116deg) translate(-280px) rotate(-116deg);
rotate(-116deg);
} }
li:nth-of-type(6) { li:nth-of-type(6) {
transform: translate(-50%, -50%) rotate(142deg) translate(-280px) transform: translate(-50%, -50%) rotate(142deg) translate(-280px) rotate(-142deg);
rotate(-142deg);
} }
li:nth-of-type(7) { li:nth-of-type(7) {
transform: translate(-50%, -50%) rotate(168deg) translate(-280px) transform: translate(-50%, -50%) rotate(168deg) translate(-280px) rotate(-168deg);
rotate(-168deg);
} }
li:nth-of-type(8) { li:nth-of-type(8) {
transform: translate(-50%, -50%) rotate(-12deg) translate(-280px) transform: translate(-50%, -50%) rotate(-12deg) translate(-280px) rotate(12deg);
rotate(12deg);
} }
li:nth-of-type(9) { li:nth-of-type(9) {
transform: translate(-50%, -50%) rotate(-38deg) translate(-280px) transform: translate(-50%, -50%) rotate(-38deg) translate(-280px) rotate(38deg);
rotate(38deg);
} }
li:nth-of-type(10) { li:nth-of-type(10) {
transform: translate(-50%, -50%) rotate(-64deg) translate(-280px) transform: translate(-50%, -50%) rotate(-64deg) translate(-280px) rotate(64deg);
rotate(64deg);
} }
li:nth-of-type(11) { li:nth-of-type(11) {
transform: translate(-50%, -50%) rotate(-116deg) translate(-280px) transform: translate(-50%, -50%) rotate(-116deg) translate(-280px) rotate(116deg);
rotate(116deg);
} }
li:nth-of-type(12) { li:nth-of-type(12) {
transform: translate(-50%, -50%) rotate(-142deg) translate(-280px) transform: translate(-50%, -50%) rotate(-142deg) translate(-280px) rotate(142deg);
rotate(142deg);
} }
li:nth-of-type(13) { li:nth-of-type(13) {
transform: translate(-50%, -50%) rotate(-168deg) translate(-280px) transform: translate(-50%, -50%) rotate(-168deg) translate(-280px) rotate(168deg);
rotate(168deg);
} }
} }

551
src/layout/fullinter.less Normal file
View 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;
}

4
src/plugins/consts/services/route.ts
View File

@ -3,6 +3,10 @@ export default [
name: 'LOGIN', name: 'LOGIN',
value: '/login' value: '/login'
}, },
{
name: 'POPUPWINDOW',
value: '/popup'
},
{ {
name: 'HOME', name: 'HOME',
value: '/home' value: '/home'

58
src/router.js
View File

@ -1,34 +1,42 @@
import React from 'react' import React from 'react';
import { ConfigProvider } from 'antd' import { ConfigProvider } from 'antd';
import { Router, Route, Switch } from 'dva/router' import { Router, Route, Switch } from 'dva/router';
import MainLayout from './layout/Main' import MainLayout from './layout/Main';
import Login from './routes/Login' import Login from './routes/Login';
import Home from './routes/Home' import Home from './routes/Home';
import GroupHome from './routes/GroupHome' import GroupHome from './routes/GroupHome';
import Main from './routes/Main' import Main from './routes/Main';
import Backend from './routes/Backend' import Backend from './routes/Backend';
import HomeMobileNew from './routes/HomeMobileNew' import HomeMobileNew from './routes/HomeMobileNew';
import { $consts } from './plugins' import { $consts } from './plugins';
import zhCN from 'antd/lib/locale-provider/zh_CN' import zhCN from 'antd/lib/locale-provider/zh_CN';
import 'moment/src/locale/zh-cn' import 'moment/src/locale/zh-cn';
import PopupWindow from './components/PopupWindow';
function RouterConfig({ history }) { function RouterConfig({ history }) {
return ( return (
<Router history={history}> <Router history={history}>
<ConfigProvider locale={zhCN}> <ConfigProvider locale={zhCN}>
<MainLayout> <Switch>
<Switch> <Route path={$consts['ROUTE/POPUPWINDOW']} component={PopupWindow} />
<Route path={$consts['ROUTE/LOGIN']} component={Login} /> {/* 其他页面使用 MainLayout */}
<Route path={$consts['ROUTE/HOME']} component={Home} /> <Route
<Route path={$consts['ROUTE/GROUPHOME']} component={GroupHome} /> render={() => (
<Route path={$consts['ROUTE/MAIN']} component={Main} /> <MainLayout>
<Route path={$consts['ROUTE/BACKEND']} component={Backend} /> <Switch>
{/* <Route path={$consts['ROUTE/HomeMobileNew']} component={HomeMobileNew} /> */} <Route path={$consts['ROUTE/LOGIN']} component={Login} />
</Switch> <Route path={$consts['ROUTE/HOME']} component={Home} />
</MainLayout> <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> </ConfigProvider>
</Router> </Router>
) );
} }
export default RouterConfig export default RouterConfig;