update 窑炉内部
This commit is contained in:
parent
1b25fa6eec
commit
4a8f81592c
@ -1 +0,0 @@
|
|||||||
1
|
|
@ -1,5 +1,5 @@
|
|||||||
import React, { useState, useContext, useEffect } from 'react';
|
import React, { useState, useContext, useEffect } from 'react';
|
||||||
import SocketContext from '../../../../../store/socket-data-provider';
|
import SocketContext from '../../../store/socket-data-provider';
|
||||||
import icon1 from '@/assets/CenterChart2icon1.svg';
|
import icon1 from '@/assets/CenterChart2icon1.svg';
|
||||||
import icon2 from '@/assets/CenterChart2icon2.svg';
|
import icon2 from '@/assets/CenterChart2icon2.svg';
|
||||||
import icon3 from '@/assets/CenterChart2icon3.svg';
|
import icon3 from '@/assets/CenterChart2icon3.svg';
|
@ -6,7 +6,7 @@
|
|||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
background: url(../../../../../assets/CenterChart2ItemBg.png);
|
background: url(../../../assets/CenterChart2ItemBg.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
display: flex;
|
display: flex;
|
@ -1,6 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Item2 from './RightTable';
|
import Item2 from './RightTable';
|
||||||
import Item1 from './LeftBoxes';
|
import Item1 from '../../../公共组件/时间火向数据';
|
||||||
|
|
||||||
import cls from './index.module.less';
|
import cls from './index.module.less';
|
||||||
|
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { useRef, useState } from 'react';
|
import { useRef, useState } from 'react';
|
||||||
import cls from './index.module.css';
|
import cls from './index.module.css';
|
||||||
|
import Chart2 from '../../../公共组件/时间火向数据';
|
||||||
|
|
||||||
function KilnCenter() {
|
function KilnCenter() {
|
||||||
const videoRef = useRef(null);
|
const videoRef = useRef(null);
|
||||||
@ -20,6 +21,19 @@ function KilnCenter() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{ name: 'TE271', value: 163.3 },
|
||||||
|
{ name: 'TE271', value: 163.3 },
|
||||||
|
{ name: 'TE271', value: 163.3 },
|
||||||
|
{ name: 'TE271', value: 163.3 },
|
||||||
|
{ name: 'TE271', value: 163.3 },
|
||||||
|
{ name: 'TE271', value: 163.3 },
|
||||||
|
{ name: 'TE271', value: 163.3 },
|
||||||
|
{ name: 'TE271', value: 163.3 },
|
||||||
|
{ name: 'TE271', value: 163.3 },
|
||||||
|
{ name: 'TE271', value: 163.3 },
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="bgKilnInner"
|
className="bgKilnInner"
|
||||||
@ -31,6 +45,15 @@ function KilnCenter() {
|
|||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
{/* 时间火向数据 */}
|
||||||
|
<div
|
||||||
|
className="fireAndTime"
|
||||||
|
style={{ position: 'absolute', top: '-112px', height: '212px' }}
|
||||||
|
>
|
||||||
|
<Chart2 />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* menu */}
|
||||||
<div
|
<div
|
||||||
className="subMenu"
|
className="subMenu"
|
||||||
style={{
|
style={{
|
||||||
@ -63,6 +86,7 @@ function KilnCenter() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* video */}
|
||||||
<div
|
<div
|
||||||
className="video-wrapper"
|
className="video-wrapper"
|
||||||
style={{
|
style={{
|
||||||
@ -80,6 +104,64 @@ function KilnCenter() {
|
|||||||
ref={videoRef}
|
ref={videoRef}
|
||||||
></video>
|
></video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* left side */}
|
||||||
|
<div
|
||||||
|
className="leftSide"
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
left: '88px',
|
||||||
|
top: '24%',
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: '100px 100px',
|
||||||
|
gap: '20px 18px',
|
||||||
|
gridAutoRows: '64px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.map((item) => (
|
||||||
|
<div
|
||||||
|
className="leftSideItem"
|
||||||
|
style={{
|
||||||
|
background: '#fff3',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
background: '#32535d',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={{ fontSize: '18px', lineHeight: 1, color: '#2EE4E6' }}>
|
||||||
|
{item.name}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
style={{ fontSize: '24px', lineHeight: '32px', color: '#fff' }}
|
||||||
|
>
|
||||||
|
{item.value} ℃
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="toolbox"
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: '32px',
|
||||||
|
left: '64px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '24px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="tlj tlj1"
|
||||||
|
style={{ background: '#ccc', width: '200px', height: '100px' }}
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
className="tlj tlj2"
|
||||||
|
style={{ background: '#ccc', width: '200px', height: '100px' }}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user