update file structure
This commit is contained in:
lb
20
src/components/模块组件/总览/CenterTop/CenterMenu/index.jsx
Normal file
20
src/components/模块组件/总览/CenterTop/CenterMenu/index.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import cls from './index.module.less';
|
||||
|
||||
export default function CenterMenu() {
|
||||
const menuList = [
|
||||
['窑炉总览', '/kilnSummary'],
|
||||
['窑炉内部', '/kilnInner'],
|
||||
['退火监测', '/stopFire'],
|
||||
['质检统计', '/quailtyCheck'],
|
||||
['能耗分析', '/energyCost'],
|
||||
];
|
||||
return (
|
||||
<div className={`${cls.centerMenu} flex`}>
|
||||
{menuList.map((menu) => (
|
||||
<div key={menu[0]} className={cls.menuItem}>
|
||||
{menu[0]}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
.centerMenu {
|
||||
position: fixed;
|
||||
top: 120px;
|
||||
left: 1340px;
|
||||
color: white;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
transition: all 0.3s ease-out;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 10px 20px;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
letter-spacing: 6px;
|
||||
background: url(../../../assets/bg_center_menu.png) no-repeat;
|
||||
background-size: 100% 50%;
|
||||
background-position: bottom;
|
||||
color: #00fff788;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||
'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
|
||||
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
||||
}
|
||||
|
||||
.menuItem:hover {
|
||||
color: #00fff7;
|
||||
}
|
||||
|
||||
.menuItem:not(:first-child) {
|
||||
margin-left: 50px;
|
||||
}
|
||||
109
src/components/模块组件/总览/CenterTop/LeftBoxes/index.jsx
Normal file
109
src/components/模块组件/总览/CenterTop/LeftBoxes/index.jsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import React, { useState, useContext, useEffect } from 'react';
|
||||
import SocketContext from '../../../store/socket-data-provider';
|
||||
import icon1 from '@/assets/CenterChart2icon1.svg';
|
||||
import icon2 from '@/assets/CenterChart2icon2.svg';
|
||||
import icon3 from '@/assets/CenterChart2icon3.svg';
|
||||
import icon4 from '@/assets/CenterChart2icon4.svg';
|
||||
|
||||
import cls from './leftbox.module.less';
|
||||
|
||||
const Chart2 = () => {
|
||||
const ctx = useContext(SocketContext);
|
||||
let [time, setTime] = useState([0, 0]);
|
||||
|
||||
useEffect(() => {
|
||||
const restTime = ctx.runState?.lastFireChangeTime;
|
||||
if (restTime == null) return;
|
||||
console.log('restTime is:', restTime);
|
||||
let timer = null;
|
||||
if (/分/.test(restTime) && /秒/.test(restTime)) {
|
||||
let [min, sec] = restTime.replace(/分/, ':').replace(/秒/, '').split(':');
|
||||
timer = setInterval(() => {
|
||||
if (Number(sec) === 0 && Number(min) === 0) {
|
||||
clearInterval(timer);
|
||||
return;
|
||||
}
|
||||
if (Number(sec) === 0) {
|
||||
sec = 59;
|
||||
min--;
|
||||
} else {
|
||||
sec--;
|
||||
}
|
||||
setTime([min, sec]);
|
||||
}, 1000);
|
||||
} else if (/分/.test(restTime)) {
|
||||
let sec,
|
||||
min = restTime.replace(/分/, ':');
|
||||
sec = 0;
|
||||
|
||||
timer = setInterval(() => {
|
||||
if (Number(sec) === 0 && Number(min) === 0) {
|
||||
clearInterval(timer);
|
||||
return;
|
||||
}
|
||||
if (Number(sec) === 0) {
|
||||
sec = 59;
|
||||
min--;
|
||||
} else {
|
||||
sec--;
|
||||
}
|
||||
setTime([min, sec]);
|
||||
}, 1000);
|
||||
} else if (/秒/.test(restTime)) {
|
||||
let min,
|
||||
sec = restTime.replace(/秒/, '');
|
||||
min = 0;
|
||||
|
||||
timer = setInterval(() => {
|
||||
if (Number(sec) === 0 && Number(min) === 0) {
|
||||
clearInterval(timer);
|
||||
return;
|
||||
}
|
||||
if (Number(sec) === 0) {
|
||||
sec = 59;
|
||||
min--;
|
||||
} else {
|
||||
sec--;
|
||||
}
|
||||
setTime([min, sec]);
|
||||
}, 1000);
|
||||
}
|
||||
return () => {
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, [ctx.runState?.lastFireChangeTime]);
|
||||
|
||||
const data = [
|
||||
{
|
||||
icon: icon1,
|
||||
label: '换火时间',
|
||||
value: ctx.runState?.fireChangeTime || '00:00',
|
||||
},
|
||||
{
|
||||
icon: icon3,
|
||||
label: '剩余时间',
|
||||
value: `${time[0]}分${time[1]}秒`,
|
||||
},
|
||||
{
|
||||
icon: icon2,
|
||||
label: '当前火向',
|
||||
value: ctx.runState?.fireDirection || '东火',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={`${cls.leftbox} flex h-half`}>
|
||||
{data.map((item) => (
|
||||
<div className={cls.box} key={item.label}>
|
||||
<img src={item.icon} alt="Error" className="box__logo" />
|
||||
<div className={cls.box__inner}>
|
||||
<h2 className={cls.box__label}>{item.label}</h2>
|
||||
<h2 className={cls.box__value}> {item.value}</h2>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chart2;
|
||||
@@ -0,0 +1,33 @@
|
||||
.leftbox {
|
||||
// width: 440px;
|
||||
// background: rgb(127, 202, 42);
|
||||
|
||||
.box {
|
||||
margin-right: 16px;
|
||||
width: 200px;
|
||||
padding: 8px;
|
||||
background: url(../../../assets/CenterChart2ItemBg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
user-select: none;
|
||||
|
||||
.box__inner {
|
||||
padding-top: 12px;
|
||||
|
||||
.box__label {
|
||||
color: #fffa;
|
||||
font-size: 18px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.box__value {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
65
src/components/模块组件/总览/CenterTop/RightTable/index.jsx
Normal file
65
src/components/模块组件/总览/CenterTop/RightTable/index.jsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React, { Component } from 'react';
|
||||
import './righttable.module.less';
|
||||
|
||||
import { ScrollBoard } from '@jiaminghi/data-view-react';
|
||||
|
||||
let data = [
|
||||
['产线0', '10mm', '10mm', '10mm'],
|
||||
['产线2', '8mm', '8mm', '8mm'],
|
||||
['产线3', '15mm', '15mm', '15mm'],
|
||||
['产线4', '15mm', '15mm', '15mm'],
|
||||
];
|
||||
|
||||
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/>',
|
||||
'<span style="color:#fff">玻璃厚度<span/>',
|
||||
],
|
||||
oddRowBGC: '#042444',
|
||||
evenRowBGC: '#042c4c',
|
||||
columnWidth: [90],
|
||||
headerHeight: 40,
|
||||
hoverPause: false,
|
||||
data: replaceStyle(data, 0.7),
|
||||
};
|
||||
|
||||
function replaceStyle(Arr, opencity) {
|
||||
let temp = [];
|
||||
|
||||
for (let i = 0; i < Arr.length; i++) {
|
||||
temp[i] = [];
|
||||
for (let j = 0; j < Arr[i].length; j++) {
|
||||
temp[i][
|
||||
j
|
||||
] = ` <span style="color:rgba(255, 255, 255,${opencity})">${Arr[i][j]}<span/>`;
|
||||
}
|
||||
}
|
||||
|
||||
return temp;
|
||||
}
|
||||
|
||||
class Chart1 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="CenterChart1itemDetailBorder">
|
||||
<h2 className="CenterChart1itemTXT"> 当前产线生产规格</h2>
|
||||
<div className="CenterChart1itemContainer">
|
||||
<span className="CenterFormitemDetailBorderLine1"></span>
|
||||
<span className="CenterFormitemDetailBorderLine2"></span>
|
||||
<span className="CenterFormitemDetailBorderLine3"></span>
|
||||
<ScrollBoard
|
||||
config={config}
|
||||
style={{ width: '105%', height: '240%' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart1;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
22
src/components/模块组件/总览/CenterTop/index.jsx
Normal file
22
src/components/模块组件/总览/CenterTop/index.jsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import NavMenu from '../公共组件/导航菜单';
|
||||
import Item2 from './RightTable';
|
||||
import Item1 from './LeftBoxes';
|
||||
|
||||
import cls from './index.module.less';
|
||||
|
||||
export default function index() {
|
||||
return (
|
||||
<>
|
||||
<NavMenu />
|
||||
<div className="flex justify-between w-full h-full">
|
||||
<div className={cls.leftGrid}>
|
||||
<Item1 />
|
||||
</div>
|
||||
<div className={cls.rightTable}>
|
||||
<Item2 />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
8
src/components/模块组件/总览/CenterTop/index.module.less
Normal file
8
src/components/模块组件/总览/CenterTop/index.module.less
Normal file
@@ -0,0 +1,8 @@
|
||||
.leftGrid {
|
||||
// width: 416px;
|
||||
height: 212px;
|
||||
}
|
||||
.rightTable {
|
||||
width: 410px;
|
||||
height: 240px;
|
||||
}
|
||||
Reference in New Issue
Block a user