mt-fe-group/xuchang-new
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

init commit

Browse Source
This commit is contained in:
lb 2023-11-09 13:36:21 +08:00
commit b59332d676
207 changed files with 42797 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

46
README.md Normal file
View File

@ -0,0 +1,46 @@
# Getting Started with Create React App and Redux
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) template.
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).

34692
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

46
package.json Normal file
View File

@ -0,0 +1,46 @@
{
"name": "xuchang",
"version": "0.1.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.9.7",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.5.1",
"antd": "^4.20.6",
"echarts": "^5.4.3",
"echarts-for-react": "^3.0.2",
"framer-motion": "^10.16.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.1.3",
"react-scripts": "5.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

43
public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React Redux App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

25
public/manifest.json Normal file
View File

@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

2
public/robots.txt Normal file
View File

@ -0,0 +1,2 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *

33
src/App.js Normal file
View File

@ -0,0 +1,33 @@
// import "./App.css";
import "./global.css";
import "./index.css";
import Head from "./components/公共组件/顶部公司名称";
// import { SocketContextProvider } from "../store/socket-data-provider";
import useSlider, { Slider } from "./hooks/useSlider";
import NavMenu from "./components/公共组件/导航菜单";
import { useState } from "react";
import Home from "./pages/总览";
import EnergyAnalysis from "./pages/能耗分析";
import RulerContainer from "./components/工具组件/Ruler";
import { createPortal } from "react-dom";
function App() {
const { styles, value, setValue } = useSlider(100);
const [navActive, setNavActive] = useState("窑炉总览");
return (
<>
<div id="FullScreen" style={styles}>
<NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
<Head />
{navActive == "能耗分析" && <EnergyAnalysis />}
{navActive != "能耗分析" && <Home active={navActive} />}
</div>
<Slider value={value} setValue={setValue} />
{createPortal(<RulerContainer />, document.body)}
</>
);
}
export default App;

BIN
src/assets/3D.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 MiB

BIN
src/assets/ButtonChart7Icon1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 869 B

14
src/assets/ButtonChart7Icon1.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>水管</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="大屏" transform="translate(-5444.000000, -790.000000)" fill-rule="nonzero">
<g id="编组-25备份-2" transform="translate(5420.000000, 709.000000)">
<g id="水管" transform="translate(24.000000, 81.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<path d="M13.3588747,23.8585638 C13.7532735,23.8585638 14.0730263,24.1783252 14.0730263,24.5727154 C14.0730263,24.9342218 13.8043415,25.233032 13.4557765,25.2803233 L13.3588747,25.286843 L10.6642057,25.286843 C10.2698275,25.286843 9.95005406,24.9670783 9.95005406,24.5727154 C9.95005406,24.2111831 10.2187425,23.9123743 10.5673047,23.8650835 L10.6642057,23.8585638 L13.3588747,23.8585638 Z M6.18349159,7.62514607 C6.54500583,7.62514607 6.84380955,7.89383809 6.89109965,8.24239766 L6.89761923,8.33929768 L6.89761923,16.1327417 C6.89761923,18.9917725 9.22406717,21.3180383 12.0835154,21.3180383 C14.8691769,21.3180383 17.1491857,19.1094706 17.2642777,16.3515809 L17.2688359,16.1327417 L17.2688359,14.7482084 C17.2688359,13.2821404 18.4575317,12.0896711 19.9192667,12.0896711 C21.3293781,12.0896711 22.4865245,13.1921615 22.5734498,14.5803115 L22.5786915,14.7482084 L22.5786915,18.4129717 C22.5786915,18.8073619 22.2589627,19.1270994 21.8645638,19.1270994 C21.5030417,19.1270994 21.2042647,18.8584202 21.1569791,18.5098695 L21.1504602,18.4129717 L21.1504602,14.7482084 C21.1504602,14.069923 20.5981372,13.5179504 19.9192907,13.5179504 C19.2877541,13.5179504 18.7661709,14.0029965 18.7034399,14.6225979 L18.6971152,14.7482084 L18.6971152,16.1327431 C18.6970664,19.7795754 15.7303408,22.7462935 12.0835154,22.7462935 C8.51397236,22.7462935 5.59590461,19.904448 5.47334743,16.3645484 L5.46933998,16.1327177 L5.46933998,8.33929768 C5.46933998,7.94489885 5.78910139,7.62514607 6.18349159,7.62514607 Z M10.1391057,7.62514607 C10.500623,7.62514607 10.7994443,7.89384092 10.8467373,8.24239837 L10.8532573,8.33929768 L10.8532573,16.1327417 C10.8532573,16.811246 11.4051994,17.3632636 12.0834914,17.3632636 C12.7191782,17.3632636 13.2439808,16.8780586 13.307098,16.2583689 L13.3134617,16.1327417 L13.3134617,14.7482084 C13.3134617,11.1011078 16.27657,8.13429686 19.9192428,8.13429686 C23.4888324,8.13429686 26.4068326,10.976211 26.5293868,14.5163612 L26.5333942,14.7482084 L26.5333942,18.4129717 C26.5333942,18.8073456 26.2136577,19.1270994 25.8192665,19.1270994 C25.4577562,19.1270994 25.1589492,18.858411 25.1116586,18.5098672 L25.1051389,18.4129717 L25.1051389,14.7482084 C25.1051389,11.8889012 22.7787743,9.56262405 19.9192427,9.56262405 C17.1377144,9.56262405 14.8612073,11.7711721 14.7462921,14.5293462 L14.7417409,14.7482084 L14.7417409,16.1327417 C14.7417409,17.5988863 13.5493467,18.7915429 12.0834914,18.7915429 C10.6738022,18.7915429 9.51710874,17.6889041 9.43021766,16.3006508 L9.42497805,16.1327417 L9.42497805,8.33929768 C9.42497805,7.94489548 9.74471885,7.62514607 10.1391057,7.62514607 Z" id="形状结合" fill="#4DD2FE"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/assets/ButtonChart7Icon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

17
src/assets/ButtonChart7Icon2.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>氢气</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="大屏" transform="translate(-5887.000000, -789.000000)" fill-rule="nonzero">
<g id="编组-25备份-2" transform="translate(5420.000000, 709.000000)">
<g id="氢气" transform="translate(467.000000, 80.000000)">
<g id="编组-27">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<path d="M15.8300132,6 C19.3162134,6 22.3562729,8.21924344 23.2982198,11.463727 L23.2982198,11.463727 L23.3521332,11.6494289 L23.5401045,11.6948013 L23.7765815,11.7564336 C26.669032,12.5666036 28.6600263,15.215386 28.6600263,18.2815414 C28.6600263,22.0464564 25.6281178,25.0783649 21.8632028,25.0783649 L21.8632028,25.0783649 L9.79682351,25.0783649 L9.56725392,25.0745961 C5.90941991,24.9543082 3,21.9696214 3,18.2815414 C3,15.132517 5.10007,12.423731 8.11992177,11.6948013 L8.11992177,11.6948013 L8.30789306,11.6494289 L8.36180652,11.463727 L8.43636068,11.2223317 C9.45603517,8.1096683 12.4309679,6 15.8300132,6 Z M15.8300132,7.52726775 C12.9179264,7.52726775 10.2728813,9.62269311 9.58241176,12.4996493 C9.50332061,12.8159528 9.26748105,13.0517924 8.94812355,13.1316318 C6.42196272,13.4740953 4.52726775,15.6845728 4.52726775,18.2815414 C4.52726775,21.2079821 6.87038274,23.5510971 9.79682351,23.5510971 L9.79682351,23.5510971 L21.8632028,23.5510971 L22.0712185,23.547136 C24.8998922,23.4391896 27.1327586,21.138305 27.1327586,18.2815414 C27.1327586,15.6845728 25.2380636,13.4740953 22.6760978,13.1247364 C22.3925453,13.0517924 22.1567057,12.8159528 22.0768663,12.4965953 C21.3871451,9.62269311 18.7420999,7.52726775 15.8300132,7.52726775 Z" id="形状结合" fill="#4DD2FE"></path>
</g>
<path d="M16.2799128,13 C16.5732619,13 16.8620795,13.3343183 16.9667945,13.7787622 L16.9667945,13.7787622 L16.9617185,19.2883603 L16.9566559,19.4027576 C16.9196395,19.8055051 16.6808359,20.0234437 16.2799128,20.0234437 C15.8829731,20.0234437 15.5981071,19.6936996 15.5981071,19.2883603 L15.5981071,19.2883603 L15.5981071,17.2468053 L13.3636114,17.2468053 L13.3636114,19.2883603 L13.3585488,19.4027576 C13.3215324,19.8055051 13.0827288,20.0234437 12.6818057,20.0234437 C12.284866,20.0234437 12,19.6936996 12,19.2883603 L12,19.2883603 L12,13.7350835 L12.0050626,13.6206861 C12.042079,13.2179387 12.2808826,13 12.6818057,13 C13.0787454,13 13.3636114,13.3297442 13.3636114,13.7350835 L13.3636114,13.7350835 L13.3636114,15.7766384 L15.5981071,15.7766384 L15.5981071,13.7350835 L15.6044227,13.6295523 C15.6502104,13.2534034 15.9391358,13 16.2799128,13 Z M18.5867987,16.4525186 C19.0475943,16.1332391 19.6386699,16.1883755 20.0665128,16.6423509 C20.3714291,16.8626653 20.538097,17.2458358 20.4569612,17.505142 L20.4569612,17.505142 L20.344127,17.8635438 C20.2452371,18.1497167 20.1371658,18.3318431 19.9860943,18.4387091 L19.9860943,18.4387091 L19.1147518,19.1317432 L20.4231876,19.1317432 L20.4716953,19.1383122 C20.5949966,19.1732299 20.6688591,19.3464168 20.6688591,19.6354401 C20.6688591,19.879772 20.5334576,20.0234437 20.314154,20.0234437 L20.314154,20.0234437 L18.0244495,20.0234437 L17.9464468,20.0163643 C17.81968,19.992924 17.7111495,19.9120676 17.6515741,19.7856393 C17.6697445,19.7502844 17.6710651,19.6935306 17.6770584,19.6267571 C17.6916825,19.4638258 17.7307503,19.370554 17.7866122,19.3409171 L17.7866122,19.3409171 L19.4714599,17.9149767 L19.5339119,17.8386585 C19.6055791,17.7366092 19.6323483,17.6349905 19.6323483,17.5529613 C19.6323483,17.4501105 19.6292211,17.4169278 19.6005488,17.3560807 C19.5956431,17.34567 19.5909943,17.3364876 19.5860044,17.3277248 L19.5860044,17.3277248 L19.5471841,17.2737123 L19.4714598,17.1909458 C19.2872403,16.9954742 19.0513632,16.9954742 18.8671437,17.1909458 L18.8671437,17.1909458 L18.5400431,17.5380256 L18.4813475,17.5563761 C18.353828,17.5829996 18.1720888,17.5476087 18.0540237,17.4223323 C17.99658,17.2783851 18.0204553,17.0250494 18.1630573,16.8737374 L18.1630573,16.8737374 L18.4901579,16.5266576 Z" id="形状结合" fill="#4DD2FE"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
src/assets/ButtonChart7ItemBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/assets/CenterChart2ItemBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

26
src/assets/CenterChart2icon1.svg Normal file
View File

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>217时间-线性</title>
<defs>
<filter x="-37.5%" y="-37.5%" width="175.0%" height="175.0%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.976470588 0 0 0 0 0.470588235 0 0 0 0 0.207843137 0 0 0 0.54411604 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="大屏" transform="translate(-4990.000000, -249.000000)" fill="url(#linearGradient-2)" fill-rule="nonzero">
<g id="217时间-线性" filter="url(#filter-1)" transform="translate(4999.000000, 258.000000)">
<path d="M16,1.6 C23.9460448,1.6 30.4,8.05395518 30.4,16 C30.4,23.9460448 23.9460448,30.4 16,30.4 C8.05395518,30.4 1.6,23.9460448 1.6,16 C1.6,8.05395518 8.05395518,1.6 16,1.6 Z M16,4.88722317 C9.86495453,4.88722317 4.88722317,9.86495453 4.88722317,16 C4.88722317,22.1350455 9.86495453,27.1127768 16,27.1127768 C22.1350455,27.1127768 27.1127768,22.1350455 27.1127768,16 C27.1127768,9.86495453 22.1350455,4.88722317 16,4.88722317 Z M16.0294265,7.78807438 C17.0230184,7.78807438 17.5855877,8.46206131 17.6393607,9.52946239 L17.6436116,9.70122787 L17.6436116,15.3219489 L22.5390914,18.1258595 L22.6982275,18.2531376 C23.2309886,18.8345811 23.3297441,19.5452248 22.9656969,20.2344077 C22.612546,20.902963 21.9860289,21.192737 21.2378137,21.070287 L21.0756744,21.037726 L20.8987082,20.9676172 L14.9586778,17.5556032 L14.8387144,17.4673926 C14.7077136,17.3461631 14.6058372,17.1980839 14.5326157,17.0292186 C14.4900581,16.931071 14.4510456,16.8115857 14.4124791,16.6655317 L14.3739463,16.5104279 L14.3563884,16.3589329 L14.3571204,9.67009722 C14.4115027,8.51431125 14.9983246,7.78807438 16.0294265,7.78807438 Z" id="形状结合"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

29
src/assets/CenterChart2icon2.svg Normal file
View File

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>燃脂</title>
<defs>
<filter x="-37.5%" y="-37.5%" width="175.0%" height="175.0%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.976470588 0 0 0 0 0.470588235 0 0 0 0 0.207843137 0 0 0 0.54411604 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="大屏" transform="translate(-5195.000000, -136.000000)" fill-rule="nonzero">
<g id="编组-32" transform="translate(5180.000000, 129.000000)">
<g id="燃脂" filter="url(#filter-1)" transform="translate(24.000000, 16.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<path d="M27.9713882,14.2442728 C27.9302101,14.6047268 27.9302101,14.996073 27.9713882,15.3976363 L27.9713882,18.4354197 C27.9713882,23.9654205 24.1817358,28.6407275 19.0842248,30.0000156 L19.0842248,28.17738 C19.0842248,26.4678894 17.7043305,25.087995 16.0051602,25.087995 L15.9948398,25.087995 C14.2956351,25.087995 12.9054549,26.4678894 12.9054549,28.17738 L12.9054549,30.0000156 C7.80794394,28.6304416 4.02861183,23.9551002 4.02861183,18.4354197 L4.02861183,13.2247981 C5.39825464,14.3369836 7.23127939,16.3656814 7.11799678,19.1667513 C8.26103997,13.8942079 10.5266233,13.1012296 12.4420386,10.9283914 C14.9341871,8.09646384 15.6755982,4.98643827 14.2441712,2.00001563 C20.4435817,4.15228198 22.0500412,12.4730667 21.5351609,16.849704 C23.7698178,12.8849503 26.5811735,11.8242976 27.9713882,11.546234 L27.9713882,14.2442728 Z" id="路径" fill="url(#linearGradient-2)"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

29
src/assets/CenterChart2icon3.svg Normal file
View File

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>沙漏</title>
<defs>
<filter x="-37.5%" y="-37.5%" width="175.0%" height="175.0%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.976470588 0 0 0 0 0.470588235 0 0 0 0 0.207843137 0 0 0 0.54411604 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="大屏" transform="translate(-5195.000000, -248.000000)" fill-rule="nonzero">
<g id="编组-33" transform="translate(5180.000000, 241.000000)">
<g id="沙漏" filter="url(#filter-1)" transform="translate(24.000000, 16.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<path d="M25.0449735,29 L7.16137566,29 C6.4047619,29 5.78571429,28.3809524 5.78571429,27.6243386 L5.78571429,24.9417989 C5.78571429,21.2962963 7.71164021,17.9259259 10.8756614,16.0687831 C7.64285714,14.2116402 5.64814815,10.7724868 5.64814815,7.05820106 L5.64814815,4.37566138 C5.64814815,3.61904762 6.26719577,3 7.02380952,3 L24.9074074,3 C25.6640212,3 26.2830688,3.61904762 26.2830688,4.37566138 L26.2830688,7.05820106 C26.2830688,9.74074074 25.2513228,12.3544974 23.3253968,14.2804233 L23.2566138,14.3492063 C22.6375661,14.968254 21.9497354,15.5185185 21.1243386,16 C21.9497354,16.4814815 22.6375661,17.031746 23.3253968,17.7195767 L23.3941799,17.7883598 C25.2513228,19.7142857 26.3518519,22.3280423 26.3518519,25.010582 L26.3518519,27.6931217 C26.3518519,28.3809524 25.8015873,29 25.0449735,29 Z M8.53703704,26.2486772 L23.6693122,26.2486772 L23.6693122,24.9417989 C23.6693122,22.9470899 22.9126984,21.021164 21.468254,19.6455026 L21.3994709,19.5767196 C20.7116402,18.8888889 19.8862434,18.3386243 19.0608466,17.994709 C18.8544974,17.9259259 18.5793651,17.7883598 18.3730159,17.7883598 C17.8227513,17.5820106 17.4100529,17.1005291 17.4100529,16.4814815 L17.4100529,15.5873016 C17.4100529,14.968254 17.8227513,14.4179894 18.3730159,14.2804233 C18.5793651,14.2116402 18.7857143,14.1428571 18.9232804,14.0740741 C19.8174603,13.7301587 20.6428571,13.1798942 21.3306878,12.4920635 L21.3994709,12.4232804 C22.7751323,11.047619 23.531746,9.12169312 23.531746,7.1957672 L23.531746,5.88888889 L8.3994709,5.88888889 L8.3994709,7.1957672 C8.3994709,10.2222222 10.1878307,12.973545 13.0079365,14.1428571 C13.2142857,14.2116402 13.489418,14.3492063 13.6957672,14.4179894 C14.2460317,14.6243386 14.6587302,15.1746032 14.6587302,15.7248677 L14.6587302,16.6190476 C14.6587302,17.2380952 14.2460317,17.7195767 13.6957672,17.9259259 C13.489418,17.994709 13.2830688,18.0634921 13.1455026,18.1322751 C10.3253968,19.3015873 8.53703704,22.0529101 8.53703704,25.0793651 L8.53703704,26.2486772 L8.53703704,26.2486772 Z M10.6004389,7.7408411 C10.9109505,10.6891693 13.5502989,12.9392092 16.5777868,12.6288589 C19.1395073,12.3960961 21.1578326,10.3012314 21.4683442,7.7408411 L10.6004389,7.7408411 Z" id="形状" fill="url(#linearGradient-2)"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

31
src/assets/CenterChart2icon4.svg Normal file
View File

@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 36</title>
<defs>
<filter x="-37.5%" y="-37.5%" width="175.0%" height="175.0%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.976470588 0 0 0 0 0.470588235 0 0 0 0 0.207843137 0 0 0 0.54411604 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="大屏" transform="translate(-4985.000000, -136.000000)" fill-rule="nonzero">
<g id="编组-31" transform="translate(4970.000000, 129.000000)">
<g id="温度" filter="url(#filter-1)" transform="translate(24.000000, 16.000000)">
<g id="编组-36">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<path d="M16.9717801,19.6980764 L16.9717801,11.1145396 C16.9717801,10.5927156 16.5468216,10.1677571 16.0249976,10.1677571 L15.9500049,10.1677571 C15.4406796,10.1677571 15.0313446,10.5802168 15.0313446,11.0864173 L15.0313446,19.6980764 C13.6189825,20.1074114 12.5847085,21.3697881 12.5847085,22.875891 C12.5847085,24.7163363 14.1126843,26.2068157 16.0031247,26.2068157 C17.8904404,26.2068157 19.4184162,24.7132116 19.4184162,22.875891 C19.4152915,21.3697881 18.3810175,20.1105361 16.9717801,19.6980764 L16.9717801,19.6980764 Z M21.9994141,15.8953227 C21.7869349,15.7203398 21.6619471,15.482863 21.6619471,15.2391368 L21.6619471,5.53383459 C21.6619471,2.48100772 19.1215702,0 16,0 C12.8784298,0 10.3380529,2.48100772 10.3380529,5.53383459 L10.3380529,14.9641637 C10.3380529,15.3734987 10.1693194,15.7515868 9.87872278,15.9984377 C7.83204766,17.7263939 6.66028709,20.2355239 6.66028709,22.8790157 C6.66028709,27.9066497 10.8505029,32 16.0031247,32 C21.1557465,32 25.3459623,27.9097744 25.3459623,22.8790157 C25.3428376,20.17303 24.1242066,17.6264037 21.9994141,15.8953227 Z M16,29.1034079 C12.4690948,29.1034079 9.60062494,26.3099307 9.60062494,22.875891 C9.60062494,20.7354751 10.7192657,18.7669173 12.5909579,17.6139049 L13.0440387,17.3358071 C13.1908993,17.2451909 13.2815155,17.0827068 13.2815155,16.9108486 L13.2815155,5.53383459 C13.2815155,4.07772678 14.5032712,2.89346744 16.0031247,2.89346744 C17.5029782,2.89346744 18.7247339,4.07772678 18.7247339,5.53383459 L18.7247339,16.9108486 C18.7247339,17.0827068 18.8153501,17.2451909 18.9622107,17.3358071 L19.4152915,17.6139049 C21.2869837,18.7669173 22.4024997,20.7323504 22.4024997,22.875891 C22.3993751,26.3099307 19.5277805,29.1034079 16,29.1034079 L16,29.1034079 Z" id="形状" fill="url(#linearGradient-2)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
src/assets/Gap.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 832 B

BIN
src/assets/Icon/icon-ab.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 595 B

BIN
src/assets/Icon/icon-bar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 538 B

BIN
src/assets/Icon/icon-charge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 296 B

BIN
src/assets/Icon/icon-chart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 336 B

BIN
src/assets/Icon/icon-clock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 545 B

BIN
src/assets/Icon/icon-good.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 745 B

BIN
src/assets/Icon/icon-lighten.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 677 B

BIN
src/assets/Icon/icon-pause.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 532 B

BIN
src/assets/Icon/icon-puzzle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 593 B

BIN
src/assets/Icon/icon-qrcode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 432 B

BIN
src/assets/Icon/icon-stack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 589 B

BIN
src/assets/Icon/icon-taiji.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 703 B

BIN
src/assets/Icon/icon-temp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 605 B

BIN
src/assets/ItemBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
src/assets/ItemBg2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/ItemBg3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
src/assets/ItemLineTop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 B

BIN
src/assets/MainBG.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/assets/TH.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
src/assets/Thumbs.db Normal file
View File

Binary file not shown.

BIN
src/assets/TopButtonLine.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 900 B

BIN
src/assets/TopSide.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/TopTitleLeft.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/assets/TopTitleLeftIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 804 B

BIN
src/assets/TopTitleRight.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/assets/TopTitleRightIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 802 B

BIN
src/assets/V3DBG.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 370 KiB

BIN
src/assets/ZL.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
src/assets/bg-bottom-item.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/bg_center_menu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/assets/buttonChart2GapLine.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 B

BIN
src/assets/ditu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
src/assets/energy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/assets/floor1-status.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 426 KiB

BIN
src/assets/good.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/assets/line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
src/assets/long-middle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
src/assets/long-short.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
src/assets/middle-long.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

BIN
src/assets/middle-middle-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
src/assets/middle-middle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
src/assets/middle-short.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
src/assets/moxing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
src/assets/smoke.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

27
src/assets/status/fault.svg Normal file
View File

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>矩形备份 7</title>
<defs>
<rect id="path-1" x="0" y="4" width="6" height="6" rx="3"></rect>
<filter x="-100.0%" y="-100.0%" width="300.0%" height="300.0%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.151676829 0 0 0 0 0.151676829 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="大屏" transform="translate(-3951.000000, -854.000000)">
<g id="编组-10备份-3" transform="translate(3629.000000, 715.000000)">
<g id="编组-21" transform="translate(30.000000, 79.000000)">
<g id="编组-30备份" transform="translate(295.000000, 7.000000)">
<g id="矩形备份-7" transform="translate(1.000000, 53.000000)">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FF0C0C" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

25
src/assets/status/maintenance.svg Normal file
View File

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>矩形备份 16 2</title>
<defs>
<rect id="path-1" x="296" y="38" width="6" height="6" rx="3"></rect>
<filter x="-100.0%" y="-100.0%" width="300.0%" height="300.0%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.717647059 0 0 0 0 0.0470588235 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="大屏" transform="translate(-3951.000000, -934.000000)">
<g id="编组-10备份-3" transform="translate(3629.000000, 715.000000)">
<g id="编组-21" transform="translate(30.000000, 79.000000)">
<g id="矩形备份-16" transform="translate(0.000000, 106.000000)">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFB70C" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

29
src/assets/status/normal.svg Normal file
View File

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>矩形备份 16</title>
<defs>
<rect id="path-1" x="0" y="0" width="6" height="6" rx="3"></rect>
<filter x="-100.0%" y="-100.0%" width="300.0%" height="300.0%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.152941176 0 0 0 0 0.376470588 0 0 0 0 1 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="大屏" transform="translate(-3951.000000, -828.000000)">
<g id="编组-10备份-3" transform="translate(3629.000000, 715.000000)">
<g id="编组-21" transform="translate(30.000000, 79.000000)">
<g id="编组-30备份" transform="translate(295.000000, 7.000000)">
<g id="编组-14" transform="translate(1.000000, 27.000000)">
<g transform="translate(0.000000, 4.000000)" id="矩形备份-16">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#2760FF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/video-layer-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 394 KiB

BIN
src/assets/wave.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 714 KiB

23
src/components/Container.jsx Normal file
View File

@ -0,0 +1,23 @@
import { useEffect, useRef } from 'react';
import useIcon from '../hooks/useIcon';
import cls from './container.module.less';
const Container = (props) => {
let icon = useIcon(props.icon);
return (
<div className={`${cls.container} ${props.className}`} style={props.style}>
<div className={cls.container__head}>
<img
src={icon}
alt="#"
className={props.icon == 'kiln' ? cls.bigger : ''}
/>
<h2>{props.title}</h2>
</div>
<div className={cls.container__content}>{props.children}</div>
</div>
);
};
export default Container;

64
src/components/container.module.less Normal file
View File

@ -0,0 +1,64 @@
.container {
padding: 24px;
display: flex;
flex-direction: column;
background-size: 100% 100%;
background-repeat: no-repeat;
.container__head {
display: flex;
align-items: center;
img {
width: 20px;
&.bigger {
width: 24px;
}
}
h2 {
font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system,
BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei',
sans-serif;
margin: 0;
margin-left: 6px;
font-size: 18px;
color: #fff;
letter-spacing: 2px;
font-weight: 500;
}
}
.container__content {
height: 1px;
flex: 1;
// background: #25a78672;
}
}
.bgKiln {
background: url('');
}
.bgGood {
background: url('../assets/good.png');
}
.bgFaultTotal {
background: url('');
}
.bgFaultType {
background: url('');
}
.bgGas {
background: url('');
}
.bgWind {
background: url('');
}
.bgEnergy {
background: url('../assets/energy.png');
}
.bgSmoke {
background: url('../assets/smoke.png');
}

17
src/components/公共组件/BottomItemBackground/index.jsx Normal file
View File

@ -0,0 +1,17 @@
import cls from './index.module.css';
import Container from '../../Container';
function BottomBarItem(props) {
return (
<Container
icon={props.icon}
title={props.title}
className={`${cls.bottomBarItem} ${props.className}`}
style={props.style}
>
{props.children}
</Container>
);
}
export default BottomBarItem;

5
src/components/公共组件/BottomItemBackground/index.module.css Normal file
View File

@ -0,0 +1,5 @@
.bottomBarItem {
background: url(../../../assets/bg-bottom-item.png) no-repeat;
background-size: 100% 100%;
width: 600px;
}

25
src/components/公共组件/GradientText/index.jsx Normal file
View File

@ -0,0 +1,25 @@
const GradientText = ({ text, spacing }) => {
return (
<svg>
<defs>
<linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style={{ stopColor: '#4EFFF6', stopOpacity: 1 }} />
<stop
offset="100%"
style={{ stopColor: '#00B2F9', stopOpacity: 1 }}
/>
</linearGradient>
</defs>
<text
x={0}
y={36}
fill="url(#smoke-text)"
style={{ fontSize: '28px', letterSpacing: spacing || '2px' }}
>
{text}
</text>
</svg>
);
};
export default GradientText;

124
src/components/公共组件/GraphBase/index.jsx Normal file
View File

@ -0,0 +1,124 @@
// TODO: 通用组件 - 按钮 菜单控制层
import useIcon from '../../../hooks/useIcon';
import cls from './index.module.css';
import { useMemo, useState } from 'react';
import { Switch, Radio } from 'antd';
function choseBg(size) {
const [width, height] = size;
return width === 'long' && height === 'middle'
? 'long-middle'
: width === 'long' && height === 'short'
? 'long-short'
: width === 'short' && height === 'middle'
? 'short-middle'
: width === 'short' && height === 'short'
? 'short-short'
: width === 'short' && height === 'long'
? 'short-long'
: width === 'middle' && height === 'middle'
? 'middle-middle'
: width === 'middle' && height === 'short'
? 'middle-short'
: width === 'middle' && height === 'long'
? 'middle-long'
: width === 'middle' && height === 'full'
? 'middle-full'
: 'middle-middle';
}
function GraphBase(props) {
const size = props.size || ['middle', 'middle'];
const bgClass = choseBg(size);
const {
icon,
title,
desc,
switchOptions,
onSwitch,
dateOptions,
onDateChange,
legend,
} = props;
const iconSrc = useIcon(icon);
const colors = useMemo(() => ['#ffd160', '#2760ff', '#15e8f5'], []);
const [showChart, setShowChart] = useState(true);
let dto = null;
const switchStyle = {};
if (props.switchPosition) {
props.switchPosition.forEach((item, index) => {
if (item != null) {
switchStyle[index == 0 ? 'top' : 'left'] = item + 'px';
}
});
}
if (dateOptions) {
dto = dateOptions.map((item) => (
<Radio.Button value={item} key={item} className="radio-group__item">
{item}
</Radio.Button>
));
}
function handleSwitchChange(v) {
v ? setShowChart(true) : setShowChart(false);
onSwitch(v);
}
return (
<div
className={
'graph-base ' +
cls[bgClass] +
' ' +
cls.graphBase +
' ' +
props.className
}
style={{ ...props.style }}
>
<div className={cls.graphBaseTitle}>
<img src={iconSrc} alt="#" />
<h2>{title}</h2>
</div>
<div className={cls.graphBaseContent}>
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
{switchOptions && (
<div className={cls.graphBaseSwitch} style={switchStyle}>
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
{showChart && <span className={cls.switchLabel}>历史详情</span>}
{!showChart && <span className={cls.switchLabel}>实时流量</span>}
</div>
)}
{legend && showChart && (
<div className={cls.legend}>
{legend.map((item, index) => (
<div className={cls.legendItem} key={item}>
<span
className={cls.lengedItemPrefix}
style={{ backgroundColor: colors[index] }}
></span>
<span className={cls.legendItemLabel}>{item}</span>
</div>
))}
</div>
)}
{dateOptions && (
<Radio.Group
defaultValue={dateOptions[0]}
buttonStyle="solid"
className={cls.graphBaseDate + ' ' + cls.radioGroup}
onChange={({ target }) => onDateChange(target.value)}
>
{dto}
</Radio.Group>
)}
{props.children}
</div>
</div>
);
}
export default GraphBase;

153
src/components/公共组件/GraphBase/index.module.css Normal file
View File

@ -0,0 +1,153 @@
/* .long-long {
background: url('../../../../assets/long-long.png') no-repeat;
background-size: 100% 100%;
background-position: 0 0;
} */
.long-middle {
background: url('../../../assets/long-middle.png') no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
.long-short {
background: url('../../../assets/long-short.png') no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
.middle-long {
background: url('../../../assets/middle-middle.png') no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
.middle-full {
background: url('../../../assets/middle-long.png') no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
.middle-middle {
background: url('../../../assets/middle-middle-2.png') no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
.middle-short {
/* background: url('../../../assets/middle-short.png') no-repeat; */
/* background: url('../../../assets/energy.png') no-repeat; */
background: url('../../../assets/bg-bottom-item.png') no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
/*
* more...
*/
.graphBase {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
/* justify-content: flex-end;
align-items: center; */
position: relative;
padding: 24px;
}
.graphBaseTitle {
display: flex;
align-items: center;
}
.graphBaseTitle > img {
width: 20px;
}
.graphBaseTitle > h2 {
font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system,
BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
margin: 0;
margin-left: 6px;
font-size: 20px;
color: #fff;
letter-spacing: 2px;
font-weight: 500;
}
.graphBaseContent {
height: 1px;
flex: 1;
/* background: #fff3; */
}
.graphBaseDesc {
position: absolute;
top: 25px;
left: 150px;
font-size: 19px;
color: #76fff9;
}
.graphBaseSwitch {
position: absolute;
top: 30px;
left: 258px;
display: flex;
align-items: center;
}
.graphBaseDate {
position: absolute;
right: 0;
top: 24px;
color: #fff;
margin-right: 24px;
}
.radioGroup {
user-select: none;
}
.radioGroup * {
border: none !important;
border-radius: 0 !important;
}
.radioGroup *:focus-within {
box-shadow: none !important;
}
.radioGroup *::before {
width: 0 !important;
}
.switchLabel {
color: white;
margin-left: 6px;
}
.legend {
position: absolute;
top: 30px;
left: 360px;
color: #fff;
display: flex;
align-items: center;
}
.legendItem {
display: flex;
align-items: center;
margin-left: 8px;
}
.lengedItemPrefix {
width: 12px;
height: 12px;
border-radius: 2px;
margin-right: 4px;
}

7
src/components/公共组件/TechSplitline/index.jsx Normal file
View File

@ -0,0 +1,7 @@
import cls from './index.module.less';
const TechSplitline = (props) => {
return <div className={cls.techSplitline}></div>;
};
export default TechSplitline;

5
src/components/公共组件/TechSplitline/index.module.less Normal file
View File

@ -0,0 +1,5 @@
.techSplitline {
height: 2px;
width: 100%;
background: radial-gradient(#3ce7ff, #3ce8ff92, #3ce8ff32, transparent);
}

107
src/components/公共组件/产线当日缺陷分类/index.jsx Normal file
View File

@ -0,0 +1,107 @@
import cls from './index.module.css';
import GraphBase from '../GraphBase';
import ReactECharts from 'echarts-for-react';
import { useState } from 'react';
function FaultType(props) {
const options = {
colors: [
'#2760FF',
'#5B9BFF',
'#FFD160',
'#8167F6',
'#99D66C',
'#FF8A40',
'#12FFF5',
],
grid: {
left: 24,
top: 10,
bottom: 10,
right: 24,
},
legend: {
icon: 'circle',
top: 32,
right: 0,
bottom: 32,
width: 296,
height: 130,
itemGap: 30,
formatter: function (name) {
return `${name} {sub|${
options.series[0].data.find((o) => o.name == name).value
}}`;
},
textStyle: {
color: '#DFF1FE',
fontSize: 18,
rich: {
sub: {
color: '#fff9',
fontSize: 18,
},
},
},
},
series: [
{
type: 'pie',
center: ['26%', '54%'],
radius: ['55%', '75%'],
avoidLabelOverlap: false,
label: {
show: true,
formatter: '{d}%',
fontSize: 14,
color: 'inherit',
},
labelLine: {
length: 0,
},
data: [
{ value: 1048, name: '缺陷1' },
{ value: 735, name: '缺陷2' },
{ value: 580, name: '缺陷3' },
{ value: 484, name: '缺陷4' },
{ value: 300, name: '缺陷5' },
{ value: 300, name: '缺陷6' },
{ value: 300, name: '缺陷8' },
],
},
],
};
const [lines, setLines] = useState([
{ id: 1, label: '产线1', value: 'l1' },
{ id: 2, label: '产线2', value: 'l2' },
{ id: 3, label: '产线3', value: 'l3' },
{ id: 4, label: '产线4', value: 'l4' },
{ id: 5, label: '产线5', value: 'l5' },
]);
function handleDateChange(v) {
console.log('date ', v);
}
// 根据使用的页面决定背景的大小
const bgSize =
props.page == 'home' ? ['middle', 'short'] : ['middle', 'short'];
return (
<GraphBase
icon="battery"
title="产线当日缺陷分类"
dateOptions={lines.map((item) => item.label)}
onDateChange={handleDateChange}
size={bgSize}
style={{ width: '600px' }}
>
<div className={cls.chart}>
<ReactECharts option={options} style={{ height: '100%' }} />
</div>
</GraphBase>
);
}
export default FaultType;

34
src/components/公共组件/产线当日缺陷分类/index.module.css Normal file
View File

@ -0,0 +1,34 @@
.chart {
height: 100%;
}
.faultType {
position: relative;
}
.headWidget {
position: absolute;
top: 20px;
right: 24px;
height: 32px;
width: 340px;
text-align: right;
}
.radioGroup * {
border: none !important;
border-radius: 0 !important;
}
.radioGroup *:focus-within {
box-shadow: none !important;
}
.radioGroup *::before {
width: 0 !important;
}
.radioGroup_button_wrapper {
color: #fff !important;
background: #03233c !important;
}

163
src/components/公共组件/产线缺陷统计/index.jsx Normal file
View File

@ -0,0 +1,163 @@
import cls from './index.module.css';
import GraphBase from '../GraphBase';
import ReactECharts from 'echarts-for-react';
function FaultTotal(props) {
const options = {
color: [
'#2760FF',
'#5B9BFF',
'#FFD160',
'#8167F6',
'#99D66C',
'#FF8A40',
'#12FFF5',
],
grid: { top: 42, right: 12, bottom: 20, left: 48 },
legend: {
top: 10,
padding: 5,
itemWidth: 12,
itemHeight: 12,
itemGap: 12,
height: 12,
textStyle: {
color: '#DFF1FE',
fontSize: 12,
},
},
xAxis: {
type: 'category',
data: Array(5)
.fill(1)
.map((_, index) => {
return '产线' + (index + 1);
}),
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: '#213259',
},
},
},
yAxis: {
name: '单位/个',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value',
axisLabel: {
color: '#fff',
fontSize: 12,
formatter: '{value}',
},
axisLine: {
show: true,
lineStyle: {
color: '#213259',
},
},
splitLine: {
lineStyle: {
color: '#213259a0',
},
},
// interval: 10,
// min: 0,
// max: 100,
},
series: [
{
name: '缺陷1',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name: '缺陷2',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: '缺陷3',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: '缺陷4',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: '缺陷5',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
},
{
name: '缺陷6',
type: 'bar',
barGap: 20,
barWidth: 12,
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [620, 732, 701, 734, 1090, 1130, 1120],
},
],
tooltip: {
trigger: 'axis',
},
};
function handleDateChange(v) {
console.log('date ', v);
}
// 根据使用的页面决定背景的大小
const bgSize =
props.page == 'home' ? ['middle', 'short'] : ['middle', 'long'];
return (
<GraphBase
icon="battery"
title="产线当日缺陷分类"
dateOptions={['日', '周', '月', '年']}
onDateChange={handleDateChange}
size={bgSize}
style={{ width: '600px' }}
>
<div className={cls.chart}>
<ReactECharts option={options} style={{ height: '100%' }} />
</div>
</GraphBase>
);
}
export default FaultTotal;

36
src/components/公共组件/产线缺陷统计/index.module.css Normal file
View File

@ -0,0 +1,36 @@
.chart {
height: 100%;
/* background-color: #00ee33; */
}
.faultTotal {
position: relative;
}
.headWidget {
position: absolute;
/* background: #00ee33; */
top: 20px;
right: 24px;
height: 32px;
width: 190px;
text-align: right;
}
.radioGroup * {
border: none !important;
border-radius: 0 !important;
}
.radioGroup *:focus-within {
box-shadow: none !important;
}
.radioGroup *::before {
width: 0 !important;
}
.radioGroup_button_wrapper {
color: #fff !important;
background: #03233c !important;
}

187
src/components/公共组件/助燃风流量/index.jsx Normal file
View File

@ -0,0 +1,187 @@
// 助燃风流量
import cls from './index.module.css';
import BottomBarItem from '../BottomItemBackground';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { randomInt } from '../../../utils';
import { Switch } from 'antd';
import { useState, useContext } from 'react';
// import SocketContext from '../../../store/socket-data-provider';
function GasI(props) {
const [showChart, setShowChart] = useState(true);
// const { runState, hisState } = useContext(SocketContext);
const runState = null;
const hisState = null;
let dataList = [];
let seriesData = [];
const colors = [
'#12FFF5',
'#2760FF',
'#FFD160',
'#E80091',
'#8064ff',
'#ff8a3b',
'#8cd26d',
'#2aa1ff',
];
let options = null;
if (showChart) {
// keys() 结果不是按照顺序，需要 sort()
seriesData = hisState?.combustionAir
? Object.keys(hisState.combustionAir)
.sort()
.map((key) => hisState.combustionAir[key])
: Array(8)
.fill(1)
.map((_) => Array(7).fill(0));
// debug
console.log(
'助燃风 chart series data',
hisState?.combustionAir,
seriesData,
);
options = {
color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 48 },
xAxis: {
type: 'category',
data: Array(7)
.fill(1)
.map((_, index) => {
const today = new Date();
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp,
).getDate()}`;
})
.reverse(),
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: '#213259',
},
},
},
yAxis: {
name: '单位/m³',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value',
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: '#213259',
},
},
splitLine: {
lineStyle: {
color: '#213259a0',
},
},
// interval: 10,
// min: 0,
// max: 100,
},
series: seriesData.map((v, i) => ({
name: i + 1 + '#助燃风',
data: v,
type: 'line',
symbol: 'circle',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[i] + '40' },
{ offset: 0.5, color: colors[i] + '20' },
{ offset: 1, color: colors[i] + '00' },
]),
},
})),
tooltip: {
trigger: 'axis',
},
};
} else {
dataList = runState?.combustionAirPressureArr
? [
{ id: 1, name: '1#助燃风', value: '0m³/h' },
{ id: 2, name: '2#助燃风', value: '0m³/h' },
{ id: 3, name: '3#助燃风', value: '0m³/h' },
{ id: 4, name: '4#助燃风', value: '0m³/h' },
{ id: 5, name: '5#助燃风', value: '0m³/h' },
{ id: 6, name: '6#助燃风', value: '0m³/h' },
{ id: 7, name: '7#助燃风', value: '0m³/h' },
{ id: 8, name: '8#助燃风', value: '0m³/h' },
].map((item, index) => ({
...item,
value: runState.combustionAirPressureArr[index] ?? '/',
}))
: [
{ id: 1, name: '1#助燃风', value: '0m³/h' },
{ id: 2, name: '2#助燃风', value: '0m³/h' },
{ id: 3, name: '3#助燃风', value: '0m³/h' },
{ id: 4, name: '4#助燃风', value: '0m³/h' },
{ id: 5, name: '5#助燃风', value: '0m³/h' },
{ id: 6, name: '6#助燃风', value: '0m³/h' },
{ id: 7, name: '7#助燃风', value: '0m³/h' },
{ id: 8, name: '8#助燃风', value: '0m³/h' },
];
// debug
console.log('助燃风 实时 data', runState?.combustionAirPressureArr);
}
function handleSwitchChange(val) {
if (val) {
setShowChart(true);
} else {
setShowChart(false);
}
}
return (
<BottomBarItem
icon="pause"
title="助燃风流量"
className={cls.gas}
style={props.style}
>
<div className={cls.headWidget}>
<div className="flex items-center">
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
{showChart && <span className={cls.switchLabel}>历史详情</span>}
{!showChart && <span className={cls.switchLabel}>实时流量</span>}
</div>
</div>
<div className={cls.chart}>
{showChart && (
<ReactECharts option={options} style={{ height: '100%' }} />
)}
{!showChart && (
<div className={cls.gridList}>
{dataList.map((item) => (
<div key={item.id} className={cls.listItem}>
{item.name}: {item.value}
</div>
))}
</div>
)}
</div>
</BottomBarItem>
);
}
export default GasI;

83
src/components/公共组件/助燃风流量/index.module.css Normal file
View File

@ -0,0 +1,83 @@
.chart {
height: 100%;
/* background-color: #00ee33; */
}
.gas {
position: relative;
}
.currentFlow {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 8px 22px;
border-radius: 2px;
letter-spacing: 2px;
box-shadow: inset 0 0 22px 0px hsla(0, 0%, 100%, 0.15);
line-height: 18px;
font-size: 18px;
text-align: center;
color: #12fff5;
}
.headWidget {
position: absolute;
/* background: #00ee33; */
top: 20px;
right: 24px;
height: 32px;
width: 190px;
text-align: right;
}
.radioGroup * {
border: none !important;
border-radius: 0 !important;
}
.radioGroup *:focus-within {
box-shadow: none !important;
}
.radioGroup *::before {
width: 0 !important;
}
.radioGroup_button_wrapper {
color: #fff !important;
background: #03233c !important;
}
.gridList {
margin-top: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.listItem {
border-radius: 2px;
padding: 12px 0;
text-align: center;
color: #fff;
box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
}
.headWidget {
position: absolute;
/* background: #00ee33; */
top: 22px;
right: 24px;
height: 32px;
width: 410px;
display: flex;
align-items: center;
justify-content: space-between;
}
.switchLabel {
color: white;
margin-left: 6px;
}

98
src/components/公共组件/天然气流量/gasChart/chart.config.js Normal file
View File

@ -0,0 +1,98 @@
import * as echarts from 'echarts';
import { randomInt } from '../../../../utils';
export default function getOptions(seriesData, name) {
const colors = [
'#12FFF5',
'#2760FF',
'#FFD160',
'#E80091',
'#8064ff',
'#ff8a3b',
'#8cd26d',
'#2aa1ff',
];
return {
color: colors,
grid: { top: 38, right: 12, bottom: 20, left: 48 },
legend: {
show: true,
icon: 'roundRect',
top: 10,
right: 10,
padding: 0,
itemWidth: 8,
itemHeight: 8,
itemGap: 3,
height: 8,
textStyle: {
color: '#DFF1FE',
fontSize: 10,
},
},
xAxis: {
type: 'category',
data: Array(7)
.fill(1)
.map((_, index) => {
const today = new Date();
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp,
).getDate()}`;
})
.reverse(),
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: '#213259',
},
},
},
yAxis: {
name: '单位m³/h',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value',
axisLabel: {
color: '#fff',
fontSize: 12,
formatter: '{value}',
},
axisLine: {
show: true,
lineStyle: {
color: '#213259',
},
},
splitLine: {
lineStyle: {
color: '#213259a0',
},
},
},
series: seriesData.map((arr, index) => ({
name: index + 1 + '#' + name,
data: arr,
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[index] + '40' },
{ offset: 0.5, color: colors[index] + '20' },
{ offset: 1, color: colors[index] + '00' },
]),
},
})),
tooltip: {
trigger: 'axis',
},
};
}

37
src/components/公共组件/天然气流量/gasChart/index.jsx Normal file
View File

@ -0,0 +1,37 @@
import cls from './index.module.css';
import ReactECharts from 'echarts-for-react';
import getOptions from './chart.config';
// import SocketContext from '../../../../store/socket-data-provider';
import { useContext } from 'react';
function GasChart(props) {
const { dataSource } = props;
// const { hisState } = useContext(SocketContext);
const hisState = null;
const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
// keys() 的结果不是按照顺序的，需要 sort()
const seriesData = hisState?.[dataName]
? Object.keys(hisState?.[dataName])
.sort()
.map((key, index) => hisState?.[dataName][key])
: Array(dataSource == 'gas-i' ? 8 : 4).fill(Array(7).fill(0));
// debug
console.log('天然气 series data', dataName, hisState?.[dataName], seriesData);
return (
<div className={cls.gasChart}>
<ReactECharts
key={Math.random()}
option={getOptions(
seriesData,
dataSource == 'gas-i' ? '天然气I' : '天然气II',
)}
style={{ height: '100%' }}
/>
</div>
);
}
export default GasChart;

3
src/components/公共组件/天然气流量/gasChart/index.module.css Normal file
View File

@ -0,0 +1,3 @@
.gasChart {
height: 100%;
}

55
src/components/公共组件/天然气流量/gridList/index.jsx Normal file
View File

@ -0,0 +1,55 @@
import cls from './index.module.css';
import { useContext, useEffect, useState } from 'react';
// import SocketContext from '../../../../store/socket-data-provider';
function getData(type) {
let data = [];
switch (type) {
case 'gas-i':
data = [
{ id: 1, name: '1#天然气I', value: '0m³/h' },
{ id: 2, name: '2#天然气I', value: '0m³/h' },
{ id: 3, name: '3#天然气I', value: '0m³/h' },
{ id: 4, name: '4#天然气I', value: '0m³/h' },
{ id: 5, name: '5#天然气I', value: '0m³/h' },
{ id: 6, name: '6#天然气I', value: '0m³/h' },
{ id: 7, name: '7#天然气I', value: '0m³/h' },
{ id: 8, name: '8#天然气I', value: '0m³/h' },
];
break;
case 'gas-ii':
data = [
{ id: 11, name: '1#天然气II', value: '0m³/h' },
{ id: 12, name: '2#天然气II', value: '0m³/h' },
{ id: 13, name: '3#天然气II', value: '0m³/h' },
{ id: 14, name: '4#天然气II', value: '0m³/h' },
// { id: 15, name: '5#天然气II', value: '0m³/h' },
];
break;
}
return data;
}
function GridList(props) {
// const { runState } = useContext(SocketContext);
const runState = null;
const key = props.dataSource == 'gas-i' ? 'gasFlowArr' : 'furnaceGasFlowArr';
let dataList = getData(props.dataSource);
dataList = runState?.[key]
? dataList.map((v, i) => ({ ...v, value: runState[key][i] ?? '/' }))
: dataList;
return (
<div className={cls.gridList}>
{dataList.map((item) => (
<div key={item.id} className={cls.listItem}>
{item.name}: {item.value}
</div>
))}
</div>
);
}
export default GridList;

14
src/components/公共组件/天然气流量/gridList/index.module.css Normal file
View File

@ -0,0 +1,14 @@
.gridList {
margin-top: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.listItem {
border-radius: 2px;
padding: 12px 0;
text-align: center;
color: #fff;
box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
}

71
src/components/公共组件/天然气流量/index.jsx Normal file
View File

@ -0,0 +1,71 @@
// 天然气流量
import cls from './index.module.css';
import BottomBarItem from '../BottomItemBackground';
import { Switch, Radio } from 'antd';
import { useState } from 'react';
import GridList from './gridList';
import GasChart from './gasChart';
function GasII(props) {
const [dataSource, setDataSource] = useState('gas-i'); // gas-i , gas-ii
const [showChart, setShowChart] = useState(true);
function handleSwitchChange(val) {
if (val) {
setShowChart(true);
} else {
setShowChart(false);
}
}
function handleSourceChange(e) {
console.log('val', e.target.value);
if (e.target.value == 'ii') {
// 天然气II
setDataSource('gas-ii');
} else if (e.target.value == 'i') {
// 天然气 I
setDataSource('gas-i');
}
}
return (
<BottomBarItem
icon="pause"
title="天然气流量"
className={`${cls.gas} ${props.className}`}
style={props.style}
>
{/* legend */}
<div className={cls.headWidget}>
<div className="flex items-center">
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
{showChart && <span className={cls.switchLabel}>历史详情</span>}
{!showChart && <span className={cls.switchLabel}>实时流量</span>}
</div>
<Radio.Group
defaultValue="i"
buttonStyle="solid"
className={cls.radioGroup}
onChange={handleSourceChange}
>
<Radio.Button value="i" className="radio-group__item">
天然气 I
</Radio.Button>
<Radio.Button value="ii" className="radio-group__item">
天然气 II
</Radio.Button>
</Radio.Group>
</div>
<div className={cls.chart}>
{showChart && <GasChart dataSource={dataSource} />}
{!showChart && <GridList dataSource={dataSource} />}
</div>
</BottomBarItem>
);
}
export default GasII;

86
src/components/公共组件/天然气流量/index.module.css Normal file
View File

@ -0,0 +1,86 @@
.chart {
height: 100%;
}
.gas {
position: relative;
}
.currentFlow {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 8px 22px;
border-radius: 2px;
letter-spacing: 2px;
box-shadow: inset 0 0 22px 0px hsla(0, 0%, 100%, 0.15);
line-height: 18px;
font-size: 18px;
text-align: center;
color: #12fff5;
}
.headWidget {
position: absolute;
top: 22px;
right: 24px;
height: 32px;
width: 410px;
display: flex;
align-items: center;
justify-content: space-between;
}
.switchLabel {
color: white;
margin-left: 6px;
}
.legend:last-child {
margin-left: 8px;
}
.legend > span {
display: inline-block;
color: #dff1fe;
font-size: 14px;
letter-spacing: 2px;
}
.legend > span:first-child {
width: 12px;
height: 12px;
margin-right: 4px;
border-radius: 2px;
}
.gasIcon {
background: #12fff5;
}
.gas2Icon {
background: #2760ff;
}
.radioGroup {
user-select: none;
}
.radioGroup * {
border: none !important;
border-radius: 0 !important;
}
.radioGroup *:focus-within {
box-shadow: none !important;
}
.radioGroup *::before {
width: 0 !important;
}
.radioGroup_button_wrapper {
color: #fff !important;
background: #03233c !important;
}

25
src/components/公共组件/导航菜单/index.jsx Normal file
View File

@ -0,0 +1,25 @@
import { useCallback, useState } from 'react';
import cls from './index.module.less';
export default function CenterMenu({ active, onChangeActive }) {
const menuList = [
['窑炉总览', '/kilnSummary'],
['窑炉内部', '/kilnInner'],
['退火监测', '/stopFire'],
['质检统计', '/quailtyCheck'],
['能耗分析', '/energyCost'],
];
return (
<div className={`${cls.centerMenu} flex`}>
{menuList.map((menu) => (
<div
key={menu[0]}
className={`${cls.menuItem} ${active == menu[0] ? cls.active : ''}`}
onClick={() => onChangeActive(menu[0])}
>
{menu[0]}
</div>
))}
</div>
);
}

33
src/components/公共组件/导航菜单/index.module.less Normal file
View File

@ -0,0 +1,33 @@
.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.active,
.menuItem:hover {
color: #00fff7;
}
.menuItem:not(:first-child) {
margin-left: 50px;
}

78
src/components/公共组件/当前产线生产规格/index.jsx Normal file
View File

@ -0,0 +1,78 @@
import BottomBarItem from '../BottomItemBackground';
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'],
['产线42', '15mm', '15mm', '15mm'],
['产线5', '15mm', '15mm', '15mm'],
['产线6', '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: [128],
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 (
<BottomBarItem
icon="pause"
title="当前产线生产规格"
className={this.props.className}
style={this.props.style}
>
<div
className="CenterChart1itemDetailBorder"
style={{ paddingTop: '6px' }}
>
<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>
</BottomBarItem>
);
}
}
export default Chart1;

50
src/components/公共组件/当前产线生产规格/righttable.module.less Normal file
View 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;
}
}
}

138
src/components/公共组件/当前温度/index.jsx Normal file
View File

@ -0,0 +1,138 @@
import BottomBarItem from '../BottomItemBackground';
import GraphBase from '../GraphBase';
import { Radio } from 'antd';
import cls from './index.module.css';
import { useState } from 'react';
const SmallBox = (props) => {
return (
<div
className="small-box"
style={{
boxShadow: 'inset 0 0 18px 10px #fff1',
borderRadius: '3px',
padding: '6px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#fff',
position: 'relative',
userSelect: 'none',
}}
>
{props.split !== false && (
<span
className="vertical-line"
style={{
position: 'absolute',
display: 'inline-block',
width: '2px',
height: '80%',
top: '10%',
left: '50%',
background:
'linear-gradient(to bottom, transparent, #fff3, #fffa, #fff3, transparent)',
}}
></span>
)}
{props.children}
</div>
);
};
function WindFrequence(props) {
const [dataSource, setDataSource] = useState('风机');
function handleSourceChange(v) {
console.log('val', v);
}
return (
<GraphBase
icon="pause"
title="当前温度"
dateOptions={['风机', '风阀', '电加热']}
onDateChange={handleSourceChange}
size={['middle', 'long']}
>
<div className={cls.mainContent + ' ' + cls.grid}>
<SmallBox>
<h1 className={cls.areaName}>A1区板上</h1>
<div className={cls.areaContent}>
<span className={cls.areaValue}>123.8℃</span>
<span className={cls.areaValue}>123.8℃</span>
<span className={cls.areaValue}>123.8℃</span>
</div>
</SmallBox>
<SmallBox>
<h1 className={cls.areaName}>A1区板上</h1>
<div className={cls.areaContent}>
<span className={cls.areaValue}>123.8℃</span>
<span className={cls.areaValue}>123.8℃</span>
<span className={cls.areaValue}>123.8℃</span>
</div>
</SmallBox>
<SmallBox>
<h1 className={cls.areaName}>A1区板上</h1>
<div className={cls.areaContent}>
<span className={cls.areaValue}>123.8℃</span>
<span className={cls.areaValue}>123.8℃</span>
<span className={cls.areaValue}>123.8℃</span>
</div>
</SmallBox>
<SmallBox>
<h1 className={cls.areaName}>A1区板上</h1>
<div className={cls.areaContent}>
<span className={cls.areaValue}>123.8℃</span>
<span className={cls.areaValue}>123.8℃</span>
<span className={cls.areaValue}>123.8℃</span>
</div>
</SmallBox>
<SmallBox>
<h1 className={cls.areaName}>A1区板上</h1>
<div className={cls.areaContent}>
<span className={cls.areaValue}>123.8℃</span>
<span className={cls.areaValue}>123.8℃</span>
<span className={cls.areaValue}>123.8℃</span>
</div>
</SmallBox>
<SmallBox split={false}>
<div className={cls.areaPureContent}>
<span className={cls.areaPureValue}>123.8℃</span>
<span className={cls.areaPureValue}>123.8℃</span>
<span className={cls.areaPureValue}>123.8℃</span>
</div>
</SmallBox>
<SmallBox>
<h1 className={cls.areaName}>A1区板上</h1>
<div className={cls.areaContent}>
<span className={cls.areaValue}>123.8℃</span>
<span className={cls.areaValue}>123.8℃</span>
<span className={cls.areaValue}>123.8℃</span>
</div>
</SmallBox>
<SmallBox split={false}>
<div className={cls.areaPureContent}>
<span className={cls.areaPureValue}>123.8℃</span>
<span className={cls.areaPureValue}>123.8℃</span>
<span className={cls.areaPureValue}>123.8℃</span>
</div>
</SmallBox>
<SmallBox>
<h1 className={cls.areaName}>A1区板上</h1>
<div className={cls.areaContent}>
<span className={cls.areaValue}>123.8℃</span>
</div>
</SmallBox>
<SmallBox>
<h1 className={cls.areaName}>A1区板上</h1>
<div className={cls.areaContent}>
<span className={cls.areaValue}>123.8℃</span>
</div>
</SmallBox>
</div>
</GraphBase>
);
}
export default WindFrequence;

139
src/components/公共组件/当前温度/index.module.css Normal file
View File

@ -0,0 +1,139 @@
.chart {
height: 100%;
}
.gas {
position: relative;
}
.currentFlow {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 8px 22px;
border-radius: 2px;
letter-spacing: 2px;
box-shadow: inset 0 0 22px 0px hsla(0, 0%, 100%, 0.15);
line-height: 18px;
font-size: 18px;
text-align: center;
color: #12fff5;
}
.floatHead {
position: absolute;
top: 22px;
right: 24px;
height: 32px;
width: 410px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.mainContent {
padding-top: 16px;
}
.alignRight {
text-align: right;
justify-self: flex-end;
}
.grid {
display: grid;
gap: 6px;
grid-template-columns: repeat(2, minmax(100px, 1fr));
grid-auto-rows: minmax(64px, min-content);
}
.areaName {
color: #fff;
font-size: 20px;
line-height: 1;
letter-spacing: 1.5px;
margin: 0;
padding-left: 20px;
width: 50%;
}
.areaPureContent {
display: flex;
}
.areaPureValue {
padding: 0 8px;
}
.areaPureValue:not(:first-child) {
border-left: 2px solid #fff6;
}
.areaContent {
width: 50%;
padding-left: 12px;
display: flex;
flex-direction: column;
}
.areaPureValue,
.areaValue {
display: inline-block;
font-size: 17px;
line-height: 22px;
letter-spacing: 1.2px;
}
.switchLabel {
color: white;
margin-left: 6px;
}
.legend:last-child {
margin-left: 8px;
}
.legend > span {
display: inline-block;
color: #dff1fe;
font-size: 14px;
letter-spacing: 2px;
}
.legend > span:first-child {
width: 12px;
height: 12px;
margin-right: 4px;
border-radius: 2px;
}
.gasIcon {
background: #12fff5;
}
.gas2Icon {
background: #2760ff;
}
.radioGroup {
user-select: none;
}
.radioGroup * {
border: none !important;
border-radius: 0 !important;
}
.radioGroup *:focus-within {
box-shadow: none !important;
}
.radioGroup *::before {
width: 0 !important;
}
.radioGroup_button_wrapper {
color: #fff !important;
background: #03233c !important;
}

111
src/components/公共组件/时间火向数据/index.jsx Normal file
View File

@ -0,0 +1,111 @@
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);
const ctx = null;
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;

33
src/components/公共组件/时间火向数据/leftbox.module.less Normal file
View File

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

Some files were not shown because too many files have changed in this diff Show More