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;

62
src/layout/FullScreen.js
View File

@ -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,10 +951,22 @@ 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.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}>
@ -986,7 +1017,7 @@ class FullScreen extends React.Component {
justifyContent: 'center',
}}
>
<div className={styles.headerText}>安全生产标准化运营平台</div>
<div className={styles.headerText}>金源公司安全生产管控平台</div>
</Col>
<Col
span={8}
@ -1127,7 +1158,6 @@ class FullScreen extends React.Component {
width: '100%',
}}
>
{this.state.screenWidh ? (
<div className={styles.scoreBox}>
<div className={styles.score}>
{/* <div className={styles.scoreLeft}>矿山</div> */}
@ -1149,25 +1179,33 @@ class FullScreen extends React.Component {
</div>
</div>
</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.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.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.scoreText3}>
标准化得分
</div>
<div className={styles.scoreText2}>93</div>
</div>
</div>
)}
)} */}
</div>
<div
style={{
@ -1313,7 +1351,10 @@ class FullScreen extends React.Component {
}}
>
<div className={styles.scrollboard} style={{ marginTop: '20px' }}>
<ScrollBoard config={this.state.safescrollConfig} style={{ width: '100%', height: '100%' }} />
<ScrollBoard
config={this.state.safescrollConfig}
style={{ width: '100%', height: '100%' }}
/>
</div>
</div>
{/* </BorderBox10> */}
@ -1445,6 +1486,7 @@ class FullScreen extends React.Component {
</div>
</div>
</div>
</div>
</FullScreenContainer>
</React.Fragment>
);

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-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
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',
value: '/login'
},
{
name: 'POPUPWINDOW',
value: '/popup'
},
{
name: 'HOME',
value: '/home'

40
src/router.js
View File

@ -1,21 +1,27 @@
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}>
<Switch>
<Route path={$consts['ROUTE/POPUPWINDOW']} component={PopupWindow} />
{/* 其他页面使用 MainLayout */}
<Route
render={() => (
<MainLayout>
<Switch>
<Route path={$consts['ROUTE/LOGIN']} component={Login} />
@ -23,12 +29,14 @@ function RouterConfig({ history }) {
<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>
</ConfigProvider>
</Router>
)
);
}
export default RouterConfig
export default RouterConfig;