init commit

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 page="home" />
+			<FaultType page="home" />
+			<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/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" style={{ opacity: 0.75 }}>
+        <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,20 @@
+import React from 'react';
+import Item2 from './RightTable';
+import Item1 from '../../../公共组件/时间火向数据';
+
+import cls from './index.module.less';
+
+export default function index() {
+	return (
+		<>
+			<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,21 @@
+import React from 'react';
+import Kiln from '../../../公共组件/窑炉信息/Kiln';
+import GoodProduction from '../../../公共组件/本日生产良品率/GoodProduction';
+import { motion } from 'framer-motion';
+
+import cls from './index.module.less';
+
+export default function index() {
+	return (
+		<motion.div
+			className={cls.leftBar}
+			initial={{ opacity: 0, position: 'absolute' }}
+			animate={{ opacity: 1, position: 'relative' }}
+			exit={{ opacity: 0, position: 'relative' }}
+			transition={{ type: 'tween' }}
+		>
+			<Kiln />
+			<GoodProduction />
+		</motion.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;
+}