@@ -29,7 +29,8 @@ | |||||
} | } | ||||
.middle-short { | .middle-short { | ||||
background: url('../../../assets/middle-short.png') no-repeat; | |||||
/* background: url('../../../assets/middle-short.png') no-repeat; */ | |||||
background: url('../../../assets/energy.png') no-repeat; | |||||
background-size: 100% 100%; | background-size: 100% 100%; | ||||
background-position: 0 0; | background-position: 0 0; | ||||
} | } | ||||
@@ -0,0 +1,97 @@ | |||||
import GraphBase from '../../公共组件/GraphBase'; | |||||
import './index.module.less'; | |||||
import { ScrollBoard } from '@jiaminghi/data-view-react'; | |||||
let data = [ | |||||
[1, '1#风机', 1], // 1 正常 2 故障 0 离线 | |||||
[2, '2#风机', 1], | |||||
[3, '3#风机', 1], | |||||
[4, '4#风机', 0], | |||||
[5, '5#风机', 1], | |||||
[6, '6#风机', 1], | |||||
[7, '7#风机', 0], | |||||
[8, '8#风机', 1], | |||||
[9, '9#风机', 1], | |||||
[10, '10#风机', 1], | |||||
]; | |||||
let header = ['序号', '风机名称', '故障情况']; | |||||
let config = { | |||||
headerBGC: 'rgba(4, 44, 76, 0.3)', | |||||
header: [ | |||||
'<span style="color:#fff">序号<span/>', | |||||
'<span style="color:#fff">风机名称<span/>', | |||||
'<span style="color:#fff">故障情况<span/>', | |||||
], | |||||
oddRowBGC: '#042444', | |||||
evenRowBGC: '#042c4c', | |||||
columnWidth: [70, 96], | |||||
rowNum: 8, | |||||
// headerHeight: 40, | |||||
hoverPause: false, | |||||
// data: replaceStyle(data, 0.7), | |||||
data: attachStyle(data), | |||||
}; | |||||
function attachStyle(data) { | |||||
return data.map((arr) => { | |||||
return arr.map((item, index) => { | |||||
if (index == arr.length - 1) { | |||||
return `<div style="display: flex; align-items: center"> | |||||
<span style="box-shadow: 0 0 4px 4px ${ | |||||
item == 1 ? '#2760ff55' : '#a81b2655' | |||||
}; margin-right: 8px; width: 8px; height: 8px; border-radius: 8px; background: ${ | |||||
item == 1 ? '#2760ff' : '#a81b26' | |||||
}"></span><span style="color: ${item == 1 ? '#2760ff' : '#a81b26'}">${ | |||||
item == 1 ? '正常' : '故障' | |||||
}</span></div>`; | |||||
} | |||||
return `<span style='color: #fffa'>${item}</span>`; | |||||
}); | |||||
}); | |||||
} | |||||
function FanInfo(props) { | |||||
return ( | |||||
<GraphBase icon="kiln" title="风机信息" size={['middle', 'short']}> | |||||
<div | |||||
className="flex" | |||||
style={{ | |||||
display: 'flex', | |||||
gap: '20px', | |||||
height: '100%', | |||||
position: 'relative', | |||||
}} | |||||
> | |||||
<div className="flex-1" style={{ flex: 1 }}> | |||||
<ScrollBoard | |||||
config={config} | |||||
style={{ width: '280px', height: '100%' }} | |||||
/> | |||||
</div> | |||||
<div | |||||
className="verticalLine" | |||||
style={{ | |||||
position: 'absolute', | |||||
top: '10%', | |||||
left: '50%', | |||||
height: '80%', | |||||
width: '2px', | |||||
background: | |||||
'linear-gradient(transparent, #15E8F563, #15E8F599, #15E8F563, transparent)', | |||||
}} | |||||
></div> | |||||
<div className="flex-1" style={{ flex: 1 }}> | |||||
<ScrollBoard | |||||
config={config} | |||||
style={{ width: '280px', height: '100%' }} | |||||
/> | |||||
</div> | |||||
</div> | |||||
</GraphBase> | |||||
); | |||||
} | |||||
export default FanInfo; |
@@ -0,0 +1,50 @@ | |||||
.CenterChart1itemDetailBorder { | |||||
width: 100%; | |||||
height: 240px; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: flex-start; | |||||
background-color: rgba(4, 44, 76, 0.2); | |||||
.CenterChart1itemTXT { | |||||
width: 100%; | |||||
height: 10%; | |||||
font-size: 20px; | |||||
color: rgba(255, 255, 255, 0.8); | |||||
text-align: center; | |||||
margin-top: 2%; | |||||
} | |||||
.CenterChart1itemContainer { | |||||
width: 95%; | |||||
height: 100px; | |||||
position: relative; | |||||
.CenterFormitemDetailBorderLine1 { | |||||
width: 1px; | |||||
height: 200px; | |||||
background-color: #041c2c; | |||||
float: left; | |||||
margin-left: 18%; | |||||
z-index: 10; | |||||
position: absolute; | |||||
} | |||||
.CenterFormitemDetailBorderLine2 { | |||||
width: 1px; | |||||
height: 200px; | |||||
background-color: #041c2c; | |||||
float: left; | |||||
margin-left: 46%; | |||||
z-index: 10; | |||||
position: absolute; | |||||
} | |||||
.CenterFormitemDetailBorderLine3 { | |||||
width: 1px; | |||||
height: 200px; | |||||
background-color: #041c2c; | |||||
float: left; | |||||
margin-left: 72%; | |||||
z-index: 10; | |||||
position: absolute; | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,25 @@ | |||||
import React from 'react'; | |||||
import FanInfo from '../../../公共组件/风机信息'; | |||||
import { motion } from 'framer-motion'; | |||||
import cls from './index.module.less'; | |||||
export default function index() { | |||||
return ( | |||||
<motion.div | |||||
style={{ | |||||
width: '625px', | |||||
height: '966px', | |||||
// background: '#fff3', | |||||
}} | |||||
initial={{ opacity: 0, position: 'absolute' }} | |||||
animate={{ opacity: 1, position: 'relative' }} | |||||
exit={{ opacity: 0, position: 'absolute' }} | |||||
transition={{ type: 'tween' }} | |||||
> | |||||
<div style={{ height: '380px' }}> | |||||
<FanInfo /> | |||||
</div> | |||||
</motion.div> | |||||
); | |||||
} |
@@ -5,6 +5,7 @@ import CenterTopData from '../../components/模块组件/总览/CenterTop'; | |||||
import { AnimatePresence, motion } from 'framer-motion'; | import { AnimatePresence, motion } from 'framer-motion'; | ||||
import KilnInnerLeft from '../../components/模块组件/窑炉内部/LeftSide'; | import KilnInnerLeft from '../../components/模块组件/窑炉内部/LeftSide'; | ||||
import KilnInnerRight from '../../components/模块组件/窑炉内部/RightSide'; | |||||
import FireCheckLeft from '../../components/模块组件/退火监测/LeftSide'; | import FireCheckLeft from '../../components/模块组件/退火监测/LeftSide'; | ||||
import QualityCheckLeft from '../../components/模块组件/质检统计/LeftSide'; | import QualityCheckLeft from '../../components/模块组件/质检统计/LeftSide'; | ||||
@@ -28,23 +29,6 @@ const KilnTotalRight = (props) => { | |||||
); | ); | ||||
}; | }; | ||||
const KilnInnerRight = (props) => { | |||||
return ( | |||||
<motion.div | |||||
style={{ | |||||
width: '625px', | |||||
height: '900px', | |||||
background: '#fff3', | |||||
}} | |||||
initial={{ opacity: 0, position: 'absolute' }} | |||||
animate={{ opacity: 1, position: 'relative' }} | |||||
exit={{ opacity: 0, position: 'absolute' }} | |||||
transition={{ type: 'tween' }} | |||||
> | |||||
窑炉内部 RIGHT | |||||
</motion.div> | |||||
); | |||||
}; | |||||
const FireCheckRight = (props) => { | const FireCheckRight = (props) => { | ||||
return ( | return ( | ||||
<motion.div | <motion.div | ||||