update file structure

src/components/模块组件/总览/Bottom/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+
+import GasI from '../../../公共组件/助燃风流量';
+import GasII from '../../../公共组件/天然气流量';
+import FaultTotal from '../../../公共组件/产线缺陷统计';
+import FaultType from '../../../公共组件/产线当日缺陷分类';
+
+import './index.less';
+import cls from './index.module.css';
+
+export default function index() {
+	return (
+		<div className={`${cls.bottomBar} flex justify-between`}>
+			<FaultTotal />
+			<FaultType />
+			<GasII />
+			<GasI />
+		</div>
+	);
+}

src/components/模块组件/总览/Bottom/index.less

@@ -0,0 +1,16 @@
+.ButtonBorder {
+	// width: 100%;
+	// height: 100%;
+
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+
+	position: fixed;
+	bottom: 0px;
+	left: 200px;
+
+	z-index: 10000;
+
+	background-color: #000;
+}

src/components/模块组件/总览/Bottom/index.module.css

@@ -0,0 +1,6 @@
+.bottomBar {
+	/* background-color: #3894; */
+	width: 100%;
+	height: 100%;
+	overflow: visible;
+}

src/components/模块组件/总览/CenterTop/CenterMenu/index.jsx

@@ -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>
+	);
+}

src/components/模块组件/总览/CenterTop/CenterMenu/index.module.less

@@ -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;
+}

src/components/模块组件/总览/CenterTop/LeftBoxes/index.jsx

@@ -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;

src/components/模块组件/总览/CenterTop/LeftBoxes/leftbox.module.less

@@ -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;
+			}
+		}
+	}
+}

src/components/模块组件/总览/CenterTop/RightTable/index.jsx

@@ -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;

src/components/模块组件/总览/CenterTop/RightTable/righttable.module.less

@@ -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;
+		}
+	}
+}

src/components/模块组件/总览/CenterTop/index.jsx

@@ -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>
+		</>
+	);
+}

src/components/模块组件/总览/CenterTop/index.module.less

@@ -0,0 +1,8 @@
+.leftGrid {
+	// width: 416px;
+	height: 212px;
+}
+.rightTable {
+	width: 410px;
+	height: 240px;
+}

src/components/模块组件/总览/LeftSide/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Kiln from '../../../公共组件/窑炉信息/Kiln';
+import GoodProduction from '../../../公共组件/本日生产良品率/GoodProduction';
+
+import cls from './index.module.less';
+
+export default function index() {
+	return (
+		<div className={cls.leftBar}>
+			<Kiln />
+			<GoodProduction />
+		</div>
+	);
+}

src/components/模块组件/总览/LeftSide/index.module.less

@@ -0,0 +1,9 @@
+.leftBar {
+	width: 625px;
+	height: 966px;
+	margin-left: 40px;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}

src/components/模块组件/总览/RightSide/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import SmokeHandle from '../../../公共组件/烟气处理';
+import EnergyCost from '../../../公共组件/能耗';
+
+import cls from './index.module.less';
+
+export default function index() {
+	return (
+		<div className={`${cls.rightBar} flex flex-col`}>
+			<EnergyCost />
+			<SmokeHandle />
+		</div>
+	);
+}

src/components/模块组件/总览/RightSide/index.module.less

@@ -0,0 +1,14 @@
+.rightBar {
+	> div {
+		&:first-child {
+			margin-bottom: 24px;
+		}
+	}
+}
+
+.demoFloat {
+	position: fixed;
+	top: 100px;
+	right: 600px;
+	z-index: 10000;
+}

src/components/模块组件/窑炉内部/1

@@ -0,0 +1 @@
+1

src/components/模块组件/能耗分析/1

@@ -0,0 +1 @@
+1

src/components/模块组件/质检统计/1

@@ -0,0 +1 @@
+1

src/components/模块组件/退火监测/1

@@ -0,0 +1 @@
+1