update 风机信息
This commit is contained in:
parent
21070337c5
commit
ec07109c2e
@ -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;
|
||||||
}
|
}
|
||||||
|
97
src/components/公共组件/风机信息/index.jsx
Normal file
97
src/components/公共组件/风机信息/index.jsx
Normal file
@ -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;
|
50
src/components/公共组件/风机信息/index.module.less
Normal file
50
src/components/公共组件/风机信息/index.module.less
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
25
src/components/模块组件/窑炉内部/RightSide/index.jsx
Normal file
25
src/components/模块组件/窑炉内部/RightSide/index.jsx
Normal file
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user