Compare commits
154 Commits
testing-re
...
zjl
| Author | SHA1 | Date | |
|---|---|---|---|
| 9b8e3734fa | |||
| 904b9212b8 | |||
| 1852bdc17f | |||
|
e2f8d9860a | ||
|
|
37c0c77078 | ||
| 9382cb4cf5 | |||
| 2325dc0373 | |||
|
|
196ad512af | ||
| fa03a0b329 | |||
| 29f8e96a2a | |||
|
|
aa86600a1a | ||
|
|
379de8fda0 | ||
| fa5cae9a78 | |||
| 50aada1223 | |||
| 248fafdf2c | |||
|
|
9589fba7c2 | ||
|
|
0739f8cf00 | ||
| e1f95bd009 | |||
|
|
6de0fe4753 | ||
|
|
a8b5e57f38 | ||
| a4985a5379 | |||
|
|
f9dde6e159 | ||
|
|
b27d70f0fc | ||
| fd34efc0b4 | |||
|
|
2d2d6d4c15 | ||
|
|
696d852cd2 | ||
| 637f387f02 | |||
|
|
6a25d4e30d | ||
|
|
270ca5dce7 | ||
| fcb1549ee3 | |||
|
|
e4e9ba11c3 | ||
|
|
f702e950ac | ||
| d7cc3deeee | |||
| c635243357 | |||
| 1e64a4d0e2 | |||
| a15105a9b0 | |||
| bace9fa501 | |||
| c6cd097433 | |||
| 4d7af62305 | |||
| 214e9fe892 | |||
| 9968280724 | |||
|
8b4322996e | ||
|
|
b325c3fc05 | ||
|
|
28c9c1906e | ||
|
|
7ddae1b3a4 | ||
|
|
61477cdd30 | ||
|
|
6e5badf01a | ||
| 311cdfc5f7 | |||
|
|
bc8b68e449 | ||
|
|
024f4bcf14 | ||
|
|
361aedd4ad | ||
|
|
60c6fdda79 | ||
|
|
15708c0eef | ||
|
|
2996c061dc | ||
|
|
9894aeca50 | ||
|
|
9f7652d9f3 | ||
|
|
e854b966dc | ||
|
|
dff017a5a2 | ||
|
|
e796a07e66 | ||
|
|
43635ff398 | ||
|
|
19ea3287ae | ||
|
|
4f6e4cbcf8 | ||
|
|
c9ccc6ebcb | ||
|
|
4374260acd | ||
|
|
6cf533e718 | ||
|
|
b0e7a7ca34 | ||
|
|
0b48f68078 | ||
|
|
c767a7fe2e | ||
|
|
97409d61a9 | ||
|
|
0da9ba434d | ||
|
|
0bd1f8dcac | ||
|
|
6e10a5aacd | ||
|
|
2fb3d05f8c | ||
|
|
b27a20f3cf | ||
|
|
be5fbe1c01 | ||
|
|
d6f9744ded | ||
|
|
1ebda5cf6f | ||
|
|
b7b2ad2ee5 | ||
|
|
446234c2aa | ||
|
|
909bd92ee6 | ||
|
|
b16ee86def | ||
|
|
c8d392ce51 | ||
|
|
d1212c8729 | ||
|
|
9d3c877628 | ||
|
|
e1e73b341d | ||
|
|
ac772e2caf | ||
|
|
0b1d3aa4b3 | ||
|
|
bee1aedda4 | ||
|
|
678c1b86ed | ||
|
|
0f56538c27 | ||
|
|
6b838ce089 | ||
|
|
e40e897882 | ||
|
|
15d05c26d8 | ||
|
|
c9829d4f5a | ||
|
|
a32e6fb591 | ||
|
|
4b043214ca | ||
|
|
871efd2eb2 | ||
|
|
0cd25a6972 | ||
|
|
a73d61fad8 | ||
|
|
3f44cb9e9a | ||
|
060616e845 | ||
|
|
2722ca6122 | ||
|
|
049a0804ac | ||
|
|
4e73410495 | ||
|
|
c2802627d6 | ||
|
|
b57b65ffd4 | ||
|
|
b35cf01fc8 | ||
|
|
f6cbc3a34a | ||
|
|
373f990517 | ||
|
|
94a713a803 | ||
|
|
903a576cdc | ||
|
|
4fc0cf19e9 | ||
| 6374fcdb6f | |||
|
|
31e065fa5a | ||
| 98ad9f590c | |||
| 682cfc0407 | |||
| f32306096f | |||
|
|
a2349e6f26 | ||
|
|
5107dd8ce8 | ||
|
|
0b91868b4f | ||
|
|
bb541962dd | ||
|
|
c3511e1bfe | ||
|
|
e4a2af8458 | ||
|
|
68065b612a | ||
|
|
ac711e6f2a | ||
|
|
19825dcb5f | ||
|
|
cb0de3b5d0 | ||
|
|
85ed13d8f5 | ||
|
|
aa2a730acc | ||
|
|
c549f38231 | ||
|
|
9f51f2b3cb | ||
|
|
d4a4e82aa6 | ||
|
|
dd5ce4d90d | ||
|
|
eadbfcb982 | ||
|
|
42e5bea184 | ||
|
|
5f92580c7e | ||
| 9a4f60a75a | |||
| 9814c2b6e9 | |||
|
|
49ac95fbbd | ||
|
|
6eb4102863 | ||
|
|
ad305f0c46 | ||
|
|
4a882104c8 | ||
|
|
ca6a1c6ede | ||
|
|
52f028d806 | ||
|
|
69dcea7909 | ||
|
|
04a15dc14c | ||
|
|
b601e9065a | ||
|
|
550da629c0 | ||
|
|
d1d47cf5ac | ||
|
|
a880f62393 | ||
|
|
d65fc0e3ed | ||
|
|
af531456f4 | ||
|
|
bc03a717bb | ||
|
|
3821121a6f |
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,7 +1,7 @@
|
|||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
# dependencies
|
# dependencies
|
||||||
/node_modules
|
**/node_modules
|
||||||
/.pnp
|
/.pnp
|
||||||
.pnp.js
|
.pnp.js
|
||||||
|
|
||||||
|
|||||||
12496
package-lock.json
generated
12496
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@@ -3,6 +3,7 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@ant-design/icons": "^5.2.6",
|
||||||
"@babel/core": "^7.16.0",
|
"@babel/core": "^7.16.0",
|
||||||
"@jiaminghi/data-view-react": "^1.2.5",
|
"@jiaminghi/data-view-react": "^1.2.5",
|
||||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
|
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
|
||||||
@@ -22,6 +23,7 @@
|
|||||||
"case-sensitive-paths-webpack-plugin": "^2.4.0",
|
"case-sensitive-paths-webpack-plugin": "^2.4.0",
|
||||||
"css-loader": "^6.5.1",
|
"css-loader": "^6.5.1",
|
||||||
"css-minimizer-webpack-plugin": "^3.2.0",
|
"css-minimizer-webpack-plugin": "^3.2.0",
|
||||||
|
"dayjs": "^1.11.10",
|
||||||
"dotenv": "^10.0.0",
|
"dotenv": "^10.0.0",
|
||||||
"dotenv-expand": "^5.1.0",
|
"dotenv-expand": "^5.1.0",
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
@@ -38,6 +40,7 @@
|
|||||||
"jest-resolve": "^27.4.2",
|
"jest-resolve": "^27.4.2",
|
||||||
"jest-watch-typeahead": "^1.0.0",
|
"jest-watch-typeahead": "^1.0.0",
|
||||||
"mini-css-extract-plugin": "^2.4.5",
|
"mini-css-extract-plugin": "^2.4.5",
|
||||||
|
"moment": "^2.30.1",
|
||||||
"postcss": "^8.4.4",
|
"postcss": "^8.4.4",
|
||||||
"postcss-flexbugs-fixes": "^5.0.2",
|
"postcss-flexbugs-fixes": "^5.0.2",
|
||||||
"postcss-loader": "^6.2.1",
|
"postcss-loader": "^6.2.1",
|
||||||
@@ -59,6 +62,7 @@
|
|||||||
"style-loader": "^3.3.1",
|
"style-loader": "^3.3.1",
|
||||||
"tailwindcss": "^3.0.2",
|
"tailwindcss": "^3.0.2",
|
||||||
"terser-webpack-plugin": "^5.2.5",
|
"terser-webpack-plugin": "^5.2.5",
|
||||||
|
"uuid": "^9.0.1",
|
||||||
"webpack": "^5.64.4",
|
"webpack": "^5.64.4",
|
||||||
"webpack-dev-server": "^4.6.0",
|
"webpack-dev-server": "^4.6.0",
|
||||||
"webpack-manifest-plugin": "^4.0.2",
|
"webpack-manifest-plugin": "^4.0.2",
|
||||||
@@ -67,7 +71,9 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "node scripts/start.js",
|
"start": "node scripts/start.js",
|
||||||
"build": "node scripts/build.js",
|
"build": "node scripts/build.js",
|
||||||
"test": "node scripts/test.js"
|
"server": "node websocket/server.js",
|
||||||
|
"test": "node scripts/test.js",
|
||||||
|
"ws": "node websocket/server.js"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": [
|
"extends": [
|
||||||
@@ -89,8 +95,10 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
||||||
|
"@types/uuid": "^9.0.7",
|
||||||
"less": "^4.2.0",
|
"less": "^4.2.0",
|
||||||
"less-loader": "^11.1.3"
|
"less-loader": "^11.1.3",
|
||||||
|
"typescript": "^5.3.3"
|
||||||
},
|
},
|
||||||
"jest": {
|
"jest": {
|
||||||
"roots": [
|
"roots": [
|
||||||
|
|||||||
@@ -29,6 +29,8 @@
|
|||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
<!-- <div id="alarm-list-container"></div> -->
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
This HTML file is a template.
|
This HTML file is a template.
|
||||||
If you open it directly in the browser, you will see an empty page.
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|||||||
Binary file not shown.
BIN
public/video/1to2_old.webm
Normal file
BIN
public/video/1to2_old.webm
Normal file
Binary file not shown.
Binary file not shown.
BIN
public/video/2to1_old.webm
Normal file
BIN
public/video/2to1_old.webm
Normal file
Binary file not shown.
BIN
public/video/east_fire.webm
Normal file
BIN
public/video/east_fire.webm
Normal file
Binary file not shown.
Binary file not shown.
BIN
public/video/enter_old.webm
Normal file
BIN
public/video/enter_old.webm
Normal file
Binary file not shown.
Binary file not shown.
BIN
public/video/floor1_old.webm
Normal file
BIN
public/video/floor1_old.webm
Normal file
Binary file not shown.
BIN
public/video/liquidSpeed.webm
Normal file
BIN
public/video/liquidSpeed.webm
Normal file
Binary file not shown.
BIN
public/video/west_fire.webm
Normal file
BIN
public/video/west_fire.webm
Normal file
Binary file not shown.
60
src/App.js
60
src/App.js
@@ -1,27 +1,75 @@
|
|||||||
// import "./App.css";
|
/*
|
||||||
|
* @Author: zhp
|
||||||
|
* @Date: 2024-08-20 14:09:17
|
||||||
|
* @LastEditTime: 2024-09-09 14:58:53
|
||||||
|
* @LastEditors: zhp
|
||||||
|
* @Description:
|
||||||
|
*/
|
||||||
import "./global.css";
|
import "./global.css";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
import Head from "./components/Common/Company";
|
import Head from "./components/Common/Company";
|
||||||
// import { SocketContextProvider } from "../store/socket-data-provider";
|
|
||||||
import useSlider, { Slider } from "./hooks/useSlider";
|
import useSlider, { Slider } from "./hooks/useSlider";
|
||||||
import NavMenu from "./components/Common/NavMenu";
|
import NavMenu from "./components/Common/NavMenu";
|
||||||
import { useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import Home from "./pages/Home";
|
import Home from "./pages/Home";
|
||||||
import EnergyAnalysis from "./pages/EnergyCostAnalysis";
|
import EnergyAnalysis from "./pages/EnergyCostAnalysis";
|
||||||
import RulerContainer from "./components/Tools/Ruler";
|
import RulerContainer from "./components/Tools/Ruler";
|
||||||
|
import { Switch } from "antd";
|
||||||
import { createPortal } from "react-dom";
|
import { createPortal } from "react-dom";
|
||||||
|
|
||||||
|
const Menus = ["窑炉总览", "窑炉内部", "AI窑炉","退火监测", "质检统计", "能耗分析"];
|
||||||
|
const LUNBO_INTERVAL = 60 * 1000;
|
||||||
function App() {
|
function App() {
|
||||||
const { styles, value, setValue } = useSlider(100);
|
const { styles, value, setValue } = useSlider(100);
|
||||||
const [navActive, setNavActive] = useState("窑炉总览");
|
const [navActive, setNavActive] = useState("窑炉总览");
|
||||||
|
const [lunbo, setlunbo] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let timer;
|
||||||
|
if (lunbo) {
|
||||||
|
timer = setInterval(() => {
|
||||||
|
handleMenuChange(Menus[(Menus.indexOf(navActive) + 1) % Menus.length]);
|
||||||
|
}, LUNBO_INTERVAL);
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
clearInterval(timer);
|
||||||
|
};
|
||||||
|
}, [lunbo, navActive]);
|
||||||
|
|
||||||
|
function handleSwitchChange(val) {
|
||||||
|
setlunbo(val);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMenuChange(value) {
|
||||||
|
setNavActive(value);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div id="FullScreen" style={styles}>
|
<div id="FullScreen" style={{ ...styles, overflow: "hidden" }}>
|
||||||
<NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
|
<NavMenu active={navActive} onChangeActive={handleMenuChange} />
|
||||||
<Head />
|
<Head />
|
||||||
|
<div
|
||||||
|
className="lunbo-setting"
|
||||||
|
style={{
|
||||||
|
position: "fixed",
|
||||||
|
top: "48px",
|
||||||
|
right: "680px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "16px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={{ fontSize: "20px", color: "#00fff7" }}>模块轮播</span>
|
||||||
|
<Switch
|
||||||
|
className="lunbo-btn"
|
||||||
|
size="small"
|
||||||
|
value={lunbo}
|
||||||
|
onChange={handleSwitchChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
{navActive == "能耗分析" && <EnergyAnalysis />}
|
{navActive == "能耗分析" && <EnergyAnalysis />}
|
||||||
|
{navActive == "能耗分析" && <div className="bgDitu"></div>}
|
||||||
{navActive != "能耗分析" && <Home active={navActive} />}
|
{navActive != "能耗分析" && <Home active={navActive} />}
|
||||||
</div>
|
</div>
|
||||||
<Slider value={value} setValue={setValue} />
|
<Slider value={value} setValue={setValue} />
|
||||||
|
|||||||
29
src/assets/CenterChart1icon1.svg
Normal file
29
src/assets/CenterChart1icon1.svg
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>泡界线</title>
|
||||||
|
<defs>
|
||||||
|
<filter x="-25.0%" y="-21.9%" width="150.0%" height="150.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="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="预测" transform="translate(-790.000000, -134.000000)" fill-rule="nonzero">
|
||||||
|
<g id="编组-32" transform="translate(763.000000, 122.000000)">
|
||||||
|
<g id="泡界线" filter="url(#filter-1)" transform="translate(32.000000, 16.000000)">
|
||||||
|
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
|
||||||
|
<path d="M13.3807264,21 C13.3807264,20.2857143 13.2366352,19.6071429 12.9484529,18.9642857 C12.6602706,18.3214286 12.271851,17.7678571 11.783194,17.3035714 C11.2945371,16.8392857 10.7181724,16.4702381 10.0541002,16.1964286 C9.39002788,15.922619 8.68210177,15.7857143 7.93032183,15.7857143 C7.1785419,15.7857143 6.46435096,15.922619 5.78774901,16.1964286 C5.11114707,16.4702381 4.52851762,16.8392857 4.03986066,17.3035714 C3.5512037,17.7678571 3.16278407,18.3214286 2.87460176,18.9642857 C2.58641945,19.6071429 2.44232829,20.2857143 2.44232829,21 C2.44232829,21.7142857 2.58641945,22.3869048 2.87460176,23.0178571 C3.16278407,23.6488095 3.5512037,24.1964286 4.03986066,24.6607143 C4.52851762,25.125 5.11114707,25.4940476 5.78774901,25.7678571 C6.46435096,26.0416667 7.1785419,26.1785714 7.93032183,26.1785714 C8.68210177,26.1785714 9.39002788,26.0416667 10.0541002,25.7678571 C10.7181724,25.4940476 11.2945371,25.125 11.783194,24.6607143 C12.271851,24.1964286 12.6602706,23.6488095 12.9484529,23.0178571 C13.2366352,22.3869048 13.3807264,21.7142857 13.3807264,21 Z M25.6890346,26.9815668 C25.6890346,26.4408602 25.5790969,25.9247312 25.3592214,25.4331797 C25.139346,24.9416283 24.8354006,24.5176651 24.4473851,24.1612903 C24.0593697,23.8049155 23.606685,23.5222734 23.089331,23.3133641 C22.5719771,23.1044547 22.0287555,23 21.4596661,23 C20.8647091,23 20.3150206,23.1044547 19.8106005,23.3133641 C19.3061804,23.5222734 18.8664295,23.8049155 18.4913479,24.1612903 C18.1162663,24.5176651 17.8187878,24.9416283 17.5989124,25.4331797 C17.379037,25.9247312 17.2690993,26.4408602 17.2690993,26.9815668 C17.2690993,27.546851 17.379037,28.0691244 17.5989124,28.5483871 C17.8187878,29.0276498 18.1162663,29.4516129 18.4913479,29.8202765 C18.8664295,30.1889401 19.3061804,30.4777266 19.8106005,30.6866359 C20.3150206,30.8955453 20.8647091,31 21.4596661,31 C22.0287555,31 22.5719771,30.8955453 23.089331,30.6866359 C23.606685,30.4777266 24.0593697,30.1889401 24.4473851,29.8202765 C24.8354006,29.4516129 25.139346,29.0276498 25.3592214,28.5483871 C25.5790969,28.0691244 25.6890346,27.546851 25.6890346,26.9815668 Z M17.696147,17 C16.4405427,17 15.2705477,16.7763158 14.1861621,16.3289474 C13.1017765,15.8815789 12.152939,15.2715311 11.3396498,14.4988038 C10.5263606,13.7260766 9.88429021,12.8245614 9.41343857,11.7942584 C8.94258692,10.7639553 8.7071611,9.66586922 8.7071611,8.5 C8.7071611,7.33413078 8.94258692,6.22926635 9.41343857,5.1854067 C9.88429021,4.14154705 10.5263606,3.2400319 11.3396498,2.48086124 C12.152939,1.72169059 13.1017765,1.11842105 14.1861621,0.671052632 C15.2705477,0.223684211 16.4405427,0 17.696147,0 C18.923215,0 20.0789417,0.223684211 21.1633273,0.671052632 C22.2477129,1.11842105 23.1965503,1.72169059 24.0098396,2.48086124 C24.8231288,3.2400319 25.4651992,4.14154705 25.9360508,5.1854067 C26.4069025,6.22926635 26.6423283,7.33413078 26.6423283,8.5 C26.6423283,9.66586922 26.4069025,10.7639553 25.9360508,11.7942584 C25.4651992,12.8245614 24.8231288,13.7260766 24.0098396,14.4988038 C23.1965503,15.2715311 22.2477129,15.8815789 21.1633273,16.3289474 C20.0789417,16.7763158 18.923215,17 17.696147,17 Z M14.1533891,4.14285714 C13.5715236,4.14285714 13.0752266,4.33797909 12.6644981,4.728223 C12.2537695,5.1184669 12.0484053,5.59001161 12.0484053,6.14285714 C12.0484053,6.69570267 12.2537695,7.16724739 12.6644981,7.55749129 C13.0752266,7.94773519 13.5715236,8.14285714 14.1533891,8.14285714 C14.7352545,8.14285714 15.2315515,7.94773519 15.6422801,7.55749129 C16.0530086,7.16724739 16.2583729,6.69570267 16.2583729,6.14285714 C16.2583729,5.59001161 16.0530086,5.1184669 15.6422801,4.728223 C15.2315515,4.33797909 14.7352545,4.14285714 14.1533891,4.14285714 Z" id="形状" fill="url(#linearGradient-2)"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.3 KiB |
36
src/assets/CenterChart1icon2.svg
Normal file
36
src/assets/CenterChart1icon2.svg
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>碹顶</title>
|
||||||
|
<defs>
|
||||||
|
<filter x="-25.0%" y="-21.9%" width="150.0%" height="150.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>
|
||||||
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
|
||||||
|
<stop stop-color="#FDB764" offset="0%"></stop>
|
||||||
|
<stop stop-color="#F43D0A" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="预测" transform="translate(-1036.201540, -134.000000)" fill-rule="nonzero">
|
||||||
|
<g id="编组-33" transform="translate(1009.000000, 122.000000)">
|
||||||
|
<g id="碹顶" filter="url(#filter-1)" transform="translate(32.201540, 16.000000)">
|
||||||
|
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
|
||||||
|
<g id="编组" transform="translate(1.602174, 1.600000)">
|
||||||
|
<path d="M26.7803321,0.00434714257 L14.3978264,0.00434714257 C14.0276789,0.00434714257 13.7276151,0.304410971 13.7276151,0.674558462 C13.7276151,1.04470595 14.0276789,1.34476978 14.3978264,1.34476978 L26.7803321,1.34476978 C27.1504012,1.34476978 27.4503559,1.6447245 27.450356,2.01516858 L27.450356,26.7801799 C27.450356,27.150249 27.1504012,27.4502038 26.7803321,27.4502038 L2.01532077,27.4502038 C1.64525164,27.4502038 1.34529693,27.150249 1.3452969,26.7801799 L1.3452969,2.01966791 C1.3452969,1.98704784 1.34979621,1.95405281 1.35429555,1.92593205 L1.34492198,1.92593205 L1.34492198,0.121329488 C0.539761675,0.405340909 0.000936313498,1.16588532 0,2.01966791 L0,26.7846792 C0.00165189001,27.8970252 0.902974797,28.7983481 2.01532077,28.8 L26.7803321,28.8 C27.8926781,28.7983481 28.794001,27.8970252 28.7956529,26.7846792 L28.7956529,2.01966791 C28.794001,0.907321939 27.8926781,0.00599903259 26.7803321,0.00434714257 Z" id="路径" fill="url(#linearGradient-2)"></path>
|
||||||
|
<path d="M3.36475692,0 L11.5177045,0 C11.8929336,4.20938436e-17 12.1971168,0.304183249 12.1971168,0.679412302 C12.1971168,1.05464136 11.8929336,1.3588246 11.5177045,1.3588246 L3.36475692,1.3588246 C2.98952786,1.3588246 2.68534461,1.05464136 2.68534461,0.679412302 C2.68534461,0.304183249 2.98952786,4.59523059e-17 3.36475692,0 Z M24.7646364,26.1088159 L4.03026656,26.1088159 C3.28975336,26.1088159 2.68534461,25.5089065 2.68534461,24.763894 L2.68534461,3.59659181 C3.28975336,3.31988357 4.00664513,3.10916539 4.79890053,3.10916539 C7.19853826,3.10916539 7.19853826,5.03075029 9.59817599,5.03075029 C11.9978137,5.03075029 11.9978137,3.10916539 14.3974515,3.10916539 C16.7970892,3.10916539 16.7970892,5.03075029 19.196727,5.03075029 C21.5963647,5.03075029 21.5963647,3.10916539 23.9960024,3.10916539 C24.7833836,3.10916539 25.5006503,3.31538426 26.1099333,3.59659181 L26.1099333,24.763894 C26.1080777,25.5060501 25.5067931,26.1071671 24.7646364,26.1088159 Z M8.97788835,18.5660828 L13.265104,14.2788672 L13.265104,14.2788672 L13.265104,22.5359782 C13.265104,23.16146 13.7721572,23.6685132 14.397639,23.6685132 C15.0231207,23.6685132 15.5301739,23.16146 15.5301739,22.5359782 L15.5301739,14.2788672 L15.5301739,14.2788672 L19.8173896,18.5660828 C20.1948661,18.9435594 20.8068766,18.9435594 21.1843531,18.5660828 C21.5618297,18.1886063 21.5618297,17.5765958 21.1843531,17.1991193 L14.6320676,10.6468337 L14.6320676,10.6468337 L14.1632103,10.6468337 L7.61092477,17.1991193 C7.2334482,17.5765958 7.2334482,18.1886063 7.61092477,18.5660828 C7.98840134,18.9435594 8.60041178,18.9435594 8.97788835,18.5660828 Z M21.1928485,7.24922894 L7.60242938,7.24922894 C6.97694761,7.24922894 6.46989445,7.7562821 6.46989445,8.38176387 C6.46989445,9.00724564 6.97694761,9.5142988 7.60242938,9.5142988 L21.1928485,9.5142988 C21.8183303,9.5142988 22.3253835,9.00724564 22.3253835,8.38176387 C22.3253835,7.7562821 21.8183303,7.24922894 21.1928485,7.24922894 Z" id="形状" fill="url(#linearGradient-3)"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
18
src/assets/CenterChart1icon3.svg
Normal file
18
src/assets/CenterChart1icon3.svg
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<?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>
|
||||||
|
<defs>
|
||||||
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||||
|
<stop stop-color="#FDB764" offset="0%"></stop>
|
||||||
|
<stop stop-color="#F43D0A" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="预测" transform="translate(-799.000000, -252.000000)">
|
||||||
|
<g id="液位" transform="translate(799.000000, 252.000000)">
|
||||||
|
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
|
||||||
|
<path d="M26.3958148,25.0213482 L26.3958148,22.0000163 L22.4895185,22.0000163 L22.4895185,19.3333243 L26.3958148,19.3333243 L26.3958148,15.3333568 L22.4895185,15.3333568 L22.4895185,12.6666703 L26.3958148,12.6666703 L26.3958148,8.66669737 L22.4895185,8.66669737 L22.4895185,6.00001084 L26.3958148,6.00001084 L26.3958148,3.3333243 L29,3.3333243 L29,26.7639693 C29.4283704,27.1587024 29.7682222,27.5279873 30,27.81338 L28,29.5200093 C27.6430412,29.1042014 27.2518491,28.7205726 26.8307407,28.3733565 C26.0234444,27.7133314 25.25,27.3333514 24.6601481,27.3333514 C24.2564815,27.3333514 24.0754815,27.466699 23.4895556,28.186685 C22.4478889,29.4666854 21.7252593,30 20.319,30 C18.9127407,30 18.1914074,29.4666854 17.1484444,28.186685 C16.5625185,27.466699 16.3814815,27.3333514 15.9791481,27.3333514 C15.5754815,27.3333514 15.3945185,27.466699 14.8098889,28.186685 C13.7682222,29.4666854 13.0442593,30 11.6392963,30 C10.233037,30 9.51040741,29.4666854 8.46874074,28.186685 C7.88281481,27.466699 7.70048148,27.3333514 7.29814815,27.3333514 C6.66041448,27.3384964 6.04093705,27.5519777 5.52992593,27.9427075 C5.20962963,28.1773552 4.99607407,28.4040006 4.91274074,28.5186887 L4.77211111,28.681353 C4.40751852,29.0400186 4.09766667,29.3680022 3.91666667,29.569351 L2,27.7640384 C2.2924622,27.4428839 2.59290632,27.1294497 2.90103704,26.824044 C3.138,26.521357 3.50781481,26.1453593 4.013,25.7759986 C4.95048148,25.0866946 6.05337037,24.6666649 7.29814815,24.6666649 C8.70440741,24.6666649 9.42703704,25.2000173 10.4687407,26.4800178 C11.0546667,27.2000038 11.236963,27.3333514 11.6392963,27.3333514 C12.0416296,27.3333514 12.2226296,27.2000038 12.8085556,26.4800178 C13.8502593,25.2000173 14.5728889,24.6667028 15.9791481,24.6667028 C17.3854074,24.6667028 18.108037,25.2000173 19.1497037,26.4800178 C19.7356296,27.2000038 19.917963,27.3333514 20.318963,27.3333514 C20.7226667,27.3333514 20.9036296,27.2000038 21.4895556,26.4800178 C22.5312593,25.2000173 23.2538889,24.6667028 24.6601481,24.6667028 C25.2460741,24.6667028 25.8254815,24.7920101 26.3958148,25.0213482 Z M5.53165581,13.8320585 C5.53165581,9.35334649 11.5772114,2 12.0420262,2 C12.506841,2 18.5525447,9.35330856 18.5525447,13.8319827 C18.5525447,17.6026933 15.622841,20.666692 12.0421003,20.666692 C8.46132247,20.666692 5.53165581,17.6027312 5.53165581,13.8320585 Z" fill="url(#linearGradient-1)" fill-rule="nonzero" transform="translate(16.000000, 16.000000) scale(-1, 1) translate(-16.000000, -16.000000) "></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
36
src/assets/CenterChart1icon4.svg
Normal file
36
src/assets/CenterChart1icon4.svg
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>池底</title>
|
||||||
|
<defs>
|
||||||
|
<filter x="-25.0%" y="-21.9%" width="150.0%" height="150.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>
|
||||||
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
|
||||||
|
<stop stop-color="#FDB764" offset="0%"></stop>
|
||||||
|
<stop stop-color="#F43D0A" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="预测" transform="translate(-1036.000000, -247.000000)" fill-rule="nonzero">
|
||||||
|
<g id="编组-33备份" transform="translate(1009.000000, 236.000000)">
|
||||||
|
<g id="池底" filter="url(#filter-1)" transform="translate(32.000000, 15.000000)">
|
||||||
|
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
|
||||||
|
<g id="编组" transform="translate(1.602174, 1.600000)">
|
||||||
|
<path d="M26.7803321,0.00434714257 L14.3978264,0.00434714257 C14.0276789,0.00434714257 13.7276151,0.304410971 13.7276151,0.674558462 C13.7276151,1.04470595 14.0276789,1.34476978 14.3978264,1.34476978 L26.7803321,1.34476978 C27.1504012,1.34476978 27.4503559,1.6447245 27.450356,2.01516858 L27.450356,26.7801799 C27.450356,27.150249 27.1504012,27.4502038 26.7803321,27.4502038 L2.01532077,27.4502038 C1.64525164,27.4502038 1.34529693,27.150249 1.3452969,26.7801799 L1.3452969,2.01966791 C1.3452969,1.98704784 1.34979621,1.95405281 1.35429555,1.92593205 L1.34492198,1.92593205 L1.34492198,0.121329488 C0.539761675,0.405340909 0.000936313498,1.16588532 0,2.01966791 L0,26.7846792 C0.00165189001,27.8970252 0.902974797,28.7983481 2.01532077,28.8 L26.7803321,28.8 C27.8926781,28.7983481 28.794001,27.8970252 28.7956529,26.7846792 L28.7956529,2.01966791 C28.794001,0.907321939 27.8926781,0.00599903259 26.7803321,0.00434714257 Z" id="路径" fill="url(#linearGradient-2)"></path>
|
||||||
|
<path d="M3.36475692,0 L11.5177045,0 C11.8929336,4.20938436e-17 12.1971168,0.304183249 12.1971168,0.679412302 C12.1971168,1.05464136 11.8929336,1.3588246 11.5177045,1.3588246 L3.36475692,1.3588246 C2.98952786,1.3588246 2.68534461,1.05464136 2.68534461,0.679412302 C2.68534461,0.304183249 2.98952786,4.59523059e-17 3.36475692,0 Z M24.7646364,26.1088159 L4.03026656,26.1088159 C3.28975336,26.1088159 2.68534461,25.5089065 2.68534461,24.763894 L2.68534461,3.59659181 C3.28975336,3.31988357 4.00664513,3.10916539 4.79890053,3.10916539 C7.19853826,3.10916539 7.19853826,5.03075029 9.59817599,5.03075029 C11.9978137,5.03075029 11.9978137,3.10916539 14.3974515,3.10916539 C16.7970892,3.10916539 16.7970892,5.03075029 19.196727,5.03075029 C21.5963647,5.03075029 21.5963647,3.10916539 23.9960024,3.10916539 C24.7833836,3.10916539 25.5006503,3.31538426 26.1099333,3.59659181 L26.1099333,24.763894 C26.1080777,25.5060501 25.5067931,26.1071671 24.7646364,26.1088159 Z M19.8173896,12.3516593 L15.5301739,16.638875 L15.5301739,16.638875 L15.5301739,8.38176387 C15.5301739,7.7562821 15.0231207,7.24922894 14.397639,7.24922894 C13.7721572,7.24922894 13.265104,7.7562821 13.265104,8.38176387 L13.265104,16.638875 L13.265104,16.638875 L8.97788835,12.3516593 C8.60041178,11.9741827 7.98840134,11.9741827 7.61092477,12.3516593 C7.2334482,12.7291358 7.2334482,13.3411463 7.61092477,13.7186229 L14.1632103,20.2709084 L14.1632103,20.2709084 L14.6320676,20.2709084 L21.1843531,13.7186229 C21.5618297,13.3411463 21.5618297,12.7291358 21.1843531,12.3516593 C20.8068766,11.9741827 20.1948661,11.9741827 19.8173896,12.3516593 Z M7.60242938,23.6685132 L21.1928485,23.6685132 C21.8183303,23.6685132 22.3253835,23.16146 22.3253835,22.5359782 C22.3253835,21.9104965 21.8183303,21.4034433 21.1928485,21.4034433 L7.60242938,21.4034433 C6.97694761,21.4034433 6.46989445,21.9104965 6.46989445,22.5359782 C6.46989445,23.16146 6.97694761,23.6685132 7.60242938,23.6685132 Z" id="形状" fill="url(#linearGradient-3)"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
BIN
src/assets/Icon/close.png
Normal file
BIN
src/assets/Icon/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 472 B |
BIN
src/assets/Icon/dontknowwhatitis.png
Normal file
BIN
src/assets/Icon/dontknowwhatitis.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
src/assets/Icon/forecast.png
Normal file
BIN
src/assets/Icon/forecast.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1021 B |
BIN
src/assets/Icon/kilnBottom.png
Normal file
BIN
src/assets/Icon/kilnBottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/Icon/kilnPress.png
Normal file
BIN
src/assets/Icon/kilnPress.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/Icon/kilnTop.png
Normal file
BIN
src/assets/Icon/kilnTop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/Icon/lightnen.png
Normal file
BIN
src/assets/Icon/lightnen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
src/assets/Icon/liquidTrend.png
Normal file
BIN
src/assets/Icon/liquidTrend.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/Icon/oilstation.png
Normal file
BIN
src/assets/Icon/oilstation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
14
src/assets/Icon/temp.svg
Normal file
14
src/assets/Icon/temp.svg
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>温度</title>
|
||||||
|
<g id="退火监测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g transform="translate(-64.000000, -134.000000)" fill-rule="nonzero" id="编组-8备份">
|
||||||
|
<g transform="translate(40.000000, 112.000000)">
|
||||||
|
<g id="温度" transform="translate(24.000000, 22.000000)">
|
||||||
|
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
|
||||||
|
<path d="M18.6,15 C18.15,14.25 17.4,13.5 16.5,13.05 L16.5,3 C16.5,1.35 15.3,0 13.65,0 C12,0 10.8,1.35 10.8,3 L10.8,13.2 C9.9,13.5 9.3,14.25 8.7,15 C8.1,15.9 7.8,16.95 7.8,18.15 C7.8,19.65 8.4,21.15 9.45,22.2 C10.5,23.25 12.15,24 13.65,24 C15.15,24 16.65,23.4 17.7,22.35 C18.75,21.3 19.35,19.8 19.35,18.3 C19.5,17.1 19.2,16.05 18.6,15 Z M13.65,22.95 C10.95,22.95 8.85,20.7 8.85,18.15 C8.85,16.35 9.9,14.7 11.55,13.8 L11.85,13.65 L11.85,3 C11.85,1.95 12.75,1.05 13.8,1.05 C14.85,1.05 15.75,1.95 15.75,3 L15.75,13.8 L16.05,13.95 C17.7,14.85 18.75,16.5 18.75,18.3 C18.6,20.85 16.35,22.95 13.65,22.95 Z M14.55,15.6 L14.55,6.15 C14.55,5.7 14.1,5.25 13.65,5.25 C13.2,5.25 12.75,5.7 12.75,6.15 L12.75,15.6 C11.7,15.9 11.1,16.95 11.1,18 C11.1,19.35 12.3,20.55 13.65,20.55 C15,20.55 16.2,19.35 16.2,18 C16.2,16.95 15.6,15.9 14.55,15.6 Z M8.25,4.35 L3.6,4.35 C3,4.35 2.7,4.05 2.7,3.45 C2.7,3 3,2.55 3.6,2.55 L8.4,2.55 C8.85,2.55 9.3,3 9.3,3.45 C9.15,4.05 8.85,4.35 8.25,4.35 L8.25,4.35 Z M8.25,7.2 L5.25,7.2 C4.8,7.2 4.35,6.75 4.35,6.3 C4.35,5.85 4.8,5.4 5.25,5.4 L8.25,5.4 C8.7,5.4 9.15,5.85 9.15,6.3 C9.15,6.9 8.85,7.2 8.25,7.2 Z M8.25,10.2 L7.35,10.2 C6.9,10.2 6.45,9.75 6.45,9.3 C6.45,8.85 6.9,8.4 7.35,8.4 L8.4,8.4 C8.85,8.4 9.3,8.85 9.3,9.3 C9.15,9.75 8.85,10.2 8.25,10.2 Z" id="形状" fill="#59D0E2"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
14
src/assets/Icon/triangle.svg
Normal file
14
src/assets/Icon/triangle.svg
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>编组 13</title>
|
||||||
|
<g id="·窑炉总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="总览" transform="translate(-1823.000000, -772.000000)">
|
||||||
|
<g id="编组-20备份-5" transform="translate(1786.000000, 764.000000)">
|
||||||
|
<g id="编组-13" transform="translate(45.000000, 16.000000) scale(1, -1) rotate(-180.000000) translate(-45.000000, -16.000000) translate(37.000000, 8.000000)">
|
||||||
|
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
|
||||||
|
<path d="M3.67840479,4.47768215 L12.3215952,4.47768215 C12.87388,4.47768215 13.3215952,4.9253974 13.3215952,5.47768215 C13.3215952,5.70423387 13.2446673,5.92407165 13.1034098,6.1011931 L8.78181462,11.5200015 C8.43745903,11.9517857 7.80827335,12.0226607 7.37648905,11.6783051 C7.31796217,11.6316289 7.2648616,11.5785283 7.21818538,11.5200015 L2.89659016,6.1011931 C2.55223458,5.6694088 2.62310955,5.04022312 3.05489384,4.69586753 C3.23201529,4.55461005 3.45185307,4.47768215 3.67840479,4.47768215 Z" id="路径-2" fill="#03233C"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/Icon/yieldRate.png
Normal file
BIN
src/assets/Icon/yieldRate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 516 B |
BIN
src/assets/blueBack.png
Normal file
BIN
src/assets/blueBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
src/assets/dayNight.png
Normal file
BIN
src/assets/dayNight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
src/assets/dayNightChange.png
Normal file
BIN
src/assets/dayNightChange.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 3.6 MiB |
BIN
src/assets/forecastBack.png
Normal file
BIN
src/assets/forecastBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
BIN
src/assets/forecastChartBack.png
Normal file
BIN
src/assets/forecastChartBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/large.png
Normal file
BIN
src/assets/large.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
src/assets/lastBack.png
Normal file
BIN
src/assets/lastBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
src/assets/lefTopBack.png
Normal file
BIN
src/assets/lefTopBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/leftMiddleBack.png
Normal file
BIN
src/assets/leftMiddleBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/assets/modelButton.png
Normal file
BIN
src/assets/modelButton.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
src/assets/offline.png
Normal file
BIN
src/assets/offline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/online.png
Normal file
BIN
src/assets/online.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/paramsData.png
Normal file
BIN
src/assets/paramsData.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
src/assets/pointBack.png
Normal file
BIN
src/assets/pointBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
src/assets/pointsBack.png
Normal file
BIN
src/assets/pointsBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/assets/seasonActive.png
Normal file
BIN
src/assets/seasonActive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/seasonChange.png
Normal file
BIN
src/assets/seasonChange.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
src/assets/tempIntr.png
Normal file
BIN
src/assets/tempIntr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/assets/toFourBack.png
Normal file
BIN
src/assets/toFourBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 MiB |
BIN
src/assets/warn-bg.png
Normal file
BIN
src/assets/warn-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/warn-icon.png
Normal file
BIN
src/assets/warn-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
5
src/components/Common/AmenSelector/index.jsx
Normal file
5
src/components/Common/AmenSelector/index.jsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
function AmenSelector() {
|
||||||
|
return <div className="amen-selector"></div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AmenSelector;
|
||||||
213
src/components/Common/AnnealFanRunFrequence/index.jsx
Normal file
213
src/components/Common/AnnealFanRunFrequence/index.jsx
Normal file
@@ -0,0 +1,213 @@
|
|||||||
|
// AnnealFanRunFrequence
|
||||||
|
import cls from "./index.module.css";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import GraphBase from "../GraphBase";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
|
function WindFrequence(props) {
|
||||||
|
const [currLine, setCurrLine] = useState('Y61')
|
||||||
|
const [showChart, setShowChart] = useState(false);
|
||||||
|
const [currentLine, setCurrentLine] = useState([]);
|
||||||
|
const runState = useSelector((state) => state.annealFanFrequence.runtime);
|
||||||
|
const hisState = useSelector((state) => state.annealFanFrequence.history);
|
||||||
|
|
||||||
|
let dataList = [];
|
||||||
|
let seriesData = [];
|
||||||
|
const colors = [
|
||||||
|
"#12FFF5",
|
||||||
|
"#2760FF",
|
||||||
|
"#FFD160",
|
||||||
|
"#E80091",
|
||||||
|
"#8064ff",
|
||||||
|
"#ff8a3b",
|
||||||
|
"#8cd26d",
|
||||||
|
"#2aa1ff",
|
||||||
|
];
|
||||||
|
let options = null;
|
||||||
|
if (showChart) {
|
||||||
|
// keys() 结果不是按照顺序，需要 sort()
|
||||||
|
seriesData =
|
||||||
|
hisState != null
|
||||||
|
? Object.keys(hisState)
|
||||||
|
.sort()
|
||||||
|
.map((key) => hisState[key])
|
||||||
|
: Array(8)
|
||||||
|
.fill(1)
|
||||||
|
.map((_) => Array(7).fill(0));
|
||||||
|
|
||||||
|
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, [
|
||||||
|
// i % 8 避免超过8个数据时无颜色的问题
|
||||||
|
{ offset: 0, color: colors[i % 8] + "40" },
|
||||||
|
{ offset: 0.5, color: colors[i % 8] + "20" },
|
||||||
|
{ offset: 1, color: colors[i % 8] + "00" },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
console.log('runstate changeD!......')
|
||||||
|
dataList =
|
||||||
|
runState != null
|
||||||
|
? Object.keys(runState).map((fan) => ({
|
||||||
|
id: Math.random(),
|
||||||
|
name: fan,
|
||||||
|
value: runState[fan],
|
||||||
|
}))
|
||||||
|
: [
|
||||||
|
{ id: 1, name: "1#风机#1", value: "0m³/h" },
|
||||||
|
// { id: 133, name: "1#风机#1", value: "0m³/h" },
|
||||||
|
// { id: 134, name: "1#风机#1", value: "0m³/h" },
|
||||||
|
// { id: 1344, name: "1#风机#1", value: "0m³/h" },
|
||||||
|
// { id: 51, name: "1#风机#1", value: "0m³/h" },
|
||||||
|
// { id: 1534, name: "1#风机#1", value: "0m³/h" },
|
||||||
|
// { id: 154, name: "1#风机#1", value: "0m³/h" },
|
||||||
|
// { id: 153, name: "1#风机#1", value: "0m³/h" },
|
||||||
|
// { id: 111, name: "1#风机#1", value: "0m³/h" },
|
||||||
|
{ id: 2, name: "2#风机#1", value: "0m³/h" },
|
||||||
|
{ id: 3, name: "3#风机#1", value: "0m³/h" },
|
||||||
|
{ id: 4, name: "4#风机#1", value: "0m³/h" },
|
||||||
|
{ id: 5, name: "5#风机#1", value: "0m³/h" },
|
||||||
|
{ id: 11, name: "1#风机#2", value: "0m³/h" },
|
||||||
|
{ id: 12, name: "2#风机#2", value: "0m³/h" },
|
||||||
|
{ id: 13, name: "3#风机#2", value: "0m³/h" },
|
||||||
|
{ id: 14, name: "4#风机#2", value: "0m³/h" },
|
||||||
|
{ id: 15, name: "5#风机#2", value: "0m³/h" },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSwitchChange(val) {
|
||||||
|
if (val) {
|
||||||
|
setShowChart(true);
|
||||||
|
} else {
|
||||||
|
setShowChart(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!showChart) {
|
||||||
|
setCurrentLine((old) =>
|
||||||
|
dataList.filter((item) => item?.name.startsWith("1#"))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, [showChart]);
|
||||||
|
|
||||||
|
function handleLineChange(line) {
|
||||||
|
const lineNum = line[2];
|
||||||
|
setCurrLine(line);
|
||||||
|
setCurrentLine((old) =>
|
||||||
|
dataList.filter((item) => item?.name.startsWith(`${lineNum}#`))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<GraphBase
|
||||||
|
icon="kiln"
|
||||||
|
title="风机运行频率"
|
||||||
|
size={["middle", "long"]}
|
||||||
|
switchOptions={false}
|
||||||
|
switchPosition={[null, 200]} // [top, left]
|
||||||
|
onSwitch={handleSwitchChange}
|
||||||
|
dateOptions={["Y61", "Y62", "Y63", "Y64", "Y65"]}
|
||||||
|
selectWidth={70}
|
||||||
|
defaultSelect={currLine}
|
||||||
|
onDateChange={handleLineChange}
|
||||||
|
>
|
||||||
|
<div className={cls.chart} style={{ marginTop: "24px" }}>
|
||||||
|
{/* {showChart && (
|
||||||
|
<ReactECharts option={options} style={{ height: "100%" }} />
|
||||||
|
)} */}
|
||||||
|
{!showChart && (
|
||||||
|
<div className={cls.gridList}>
|
||||||
|
{currentLine.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
className={cls.listItem}
|
||||||
|
style={{ padding: props.stretch ? "20px 0" : "" }}
|
||||||
|
>
|
||||||
|
<span className={cls.fanName}>{item.name}</span>
|
||||||
|
<span
|
||||||
|
className={cls.fanValue}
|
||||||
|
style={{
|
||||||
|
fontWeight: 700,
|
||||||
|
letterSpacing: 1,
|
||||||
|
fontSize: 16,
|
||||||
|
// color: "#e03537",
|
||||||
|
color: "#24aebb",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.value}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</GraphBase>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default WindFrequence;
|
||||||
52
src/components/Common/AnnealFanRunFrequence/index.module.css
Normal file
52
src/components/Common/AnnealFanRunFrequence/index.module.css
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
.chart {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridList {
|
||||||
|
margin-top: 12px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
/* grid-auto-row: ; */
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem {
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 10px 0;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headWidget {
|
||||||
|
position: absolute;
|
||||||
|
top: 22px;
|
||||||
|
right: 24px;
|
||||||
|
height: 32px;
|
||||||
|
width: 410px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fanName {
|
||||||
|
text-align: right;
|
||||||
|
flex: 7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fanValue {
|
||||||
|
flex: 3;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
28
src/components/Common/Arrow/index.jsx
Normal file
28
src/components/Common/Arrow/index.jsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import cls from "./index.module.css";
|
||||||
|
|
||||||
|
const Arrow = ({ direction, disabled, onClick }) => {
|
||||||
|
function handleClick() {
|
||||||
|
onClick(direction)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className={`${cls["arrow"]} ${
|
||||||
|
direction == "right" ? cls["arrow__right"] : ""
|
||||||
|
} ${true ? "disabled" : ""}`}
|
||||||
|
onClick={handleClick}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`${cls["arrow-top"]} ${
|
||||||
|
direction == "right" ? cls["arrow-top__right"] : ""
|
||||||
|
}`}
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
className={`${cls["arrow-bottom"]} ${
|
||||||
|
direction == "right" ? cls["arrow-bottom__right"] : ""
|
||||||
|
}`}
|
||||||
|
></div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Arrow;
|
||||||
60
src/components/Common/Arrow/index.module.css
Normal file
60
src/components/Common/Arrow/index.module.css
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
appearance: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
width: 16px;
|
||||||
|
height: 48px;
|
||||||
|
position: absolute;
|
||||||
|
top: 112px;
|
||||||
|
left: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow.disabled > div {
|
||||||
|
background: #3d4a56;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow__right {
|
||||||
|
left: unset;
|
||||||
|
right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow:hover > div {
|
||||||
|
background: #00f3ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-top {
|
||||||
|
transition: background 0.1s ease-out;
|
||||||
|
background: #1eaba9;
|
||||||
|
width: 8px;
|
||||||
|
height: 24px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
transform: rotateZ(20deg) translateY(2px) translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-bottom {
|
||||||
|
transition: background 0.1s ease-out;
|
||||||
|
background: #1eaba9;
|
||||||
|
width: 8px;
|
||||||
|
height: 24px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
transform: rotateZ(-20deg) translateY(-2px) translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-top__right {
|
||||||
|
transform: rotateZ(-20deg) translateY(4px) translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-bottom__right {
|
||||||
|
transform: rotateZ(20deg) translateY(-4px) translateX(4px);
|
||||||
|
}
|
||||||
32
src/components/Common/BlueRect/index.jsx
Normal file
32
src/components/Common/BlueRect/index.jsx
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import cls from "./index.module.css";
|
||||||
|
|
||||||
|
function BlueRect(props) {
|
||||||
|
const title = props.title || "DEFAULT";
|
||||||
|
const value = props.value || "0℃";
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`${cls.blueRect} ${cls[title]}`}
|
||||||
|
style={{
|
||||||
|
background: props.blue ? "#0a4268ee" : "#0a426860",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="title"
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "24px",
|
||||||
|
color: props.blue ? "#40afb8" : "#fff",
|
||||||
|
fontWeight: 600,
|
||||||
|
userSelect: "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</span>
|
||||||
|
<span className="value" style={{ userSelect: "none", fontSize: "22px" }}>
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BlueRect;
|
||||||
544
src/components/Common/BlueRect/index.module.css
Normal file
544
src/components/Common/BlueRect/index.module.css
Normal file
@@ -0,0 +1,544 @@
|
|||||||
|
.blueRect {
|
||||||
|
display: inline-block;
|
||||||
|
width: 106px;
|
||||||
|
height: 68px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 6px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
color: #fff;
|
||||||
|
background: #0a426820;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blueRect::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
transparent 0%,
|
||||||
|
transparent 50%,
|
||||||
|
#24aebb 100%
|
||||||
|
);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blueRect::after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#24aebb 0%,
|
||||||
|
transparent 50%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** left **/
|
||||||
|
|
||||||
|
.TE271 {
|
||||||
|
top: 160px;
|
||||||
|
left: 70px;
|
||||||
|
}
|
||||||
|
.TE272 {
|
||||||
|
top: 254px; /* +94px */
|
||||||
|
left: 70px;
|
||||||
|
}
|
||||||
|
.TE273 {
|
||||||
|
top: 348px; /* +94px */
|
||||||
|
left: 70px;
|
||||||
|
}
|
||||||
|
.TE274 {
|
||||||
|
top: 442px;
|
||||||
|
left: 70px;
|
||||||
|
}
|
||||||
|
.TE279 {
|
||||||
|
top: 536px;
|
||||||
|
left: 70px;
|
||||||
|
}
|
||||||
|
.TE275 {
|
||||||
|
top: 160px;
|
||||||
|
left: 206px;
|
||||||
|
}
|
||||||
|
.TE276 {
|
||||||
|
top: 254px;
|
||||||
|
left: 206px; /* +136px */
|
||||||
|
}
|
||||||
|
.TE277 {
|
||||||
|
top: 348px; /* +94px */
|
||||||
|
left: 206px; /* +136px */
|
||||||
|
}
|
||||||
|
.TE278 {
|
||||||
|
top: 442px; /* +94px */
|
||||||
|
left: 206px; /* +136px */
|
||||||
|
}
|
||||||
|
.TE280 {
|
||||||
|
top: 536px; /* +94px */
|
||||||
|
left: 206px; /* +136px */
|
||||||
|
}
|
||||||
|
|
||||||
|
/** center top **/
|
||||||
|
.TE227 {
|
||||||
|
top: 128px;
|
||||||
|
left: 630px;
|
||||||
|
}
|
||||||
|
.TE229 {
|
||||||
|
top: 128px;
|
||||||
|
left: 746px; /* +120px */
|
||||||
|
}
|
||||||
|
.TE231 {
|
||||||
|
top: 128px;
|
||||||
|
left: 866px;
|
||||||
|
}
|
||||||
|
.TE233 {
|
||||||
|
top: 128px;
|
||||||
|
left: 980px;
|
||||||
|
}
|
||||||
|
.TE235 {
|
||||||
|
top: 128px;
|
||||||
|
left: 1100px;
|
||||||
|
}
|
||||||
|
.TE237 {
|
||||||
|
top: 128px;
|
||||||
|
left: 1220px;
|
||||||
|
}
|
||||||
|
.TE239 {
|
||||||
|
top: 128px;
|
||||||
|
left: 1330px;
|
||||||
|
}
|
||||||
|
.TE241 {
|
||||||
|
top: 128px;
|
||||||
|
left: 1450px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** center bottom **/
|
||||||
|
.TE228 {
|
||||||
|
top: 620px;
|
||||||
|
left: 600px;
|
||||||
|
}
|
||||||
|
.TE230 {
|
||||||
|
top: 620px;
|
||||||
|
left: 720px;
|
||||||
|
}
|
||||||
|
.TE232 {
|
||||||
|
top: 620px;
|
||||||
|
left: 850px;
|
||||||
|
}
|
||||||
|
.TE234 {
|
||||||
|
top: 620px;
|
||||||
|
left: 970px;
|
||||||
|
}
|
||||||
|
.TE236 {
|
||||||
|
top: 620px;
|
||||||
|
left: 1100px;
|
||||||
|
}
|
||||||
|
.TE238 {
|
||||||
|
top: 620px;
|
||||||
|
left: 1225px;
|
||||||
|
}
|
||||||
|
.TE240 {
|
||||||
|
top: 620px;
|
||||||
|
left: 1350px;
|
||||||
|
}
|
||||||
|
.TE242 {
|
||||||
|
top: 620px;
|
||||||
|
left: 1470px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** center middle **/
|
||||||
|
.TE201 {
|
||||||
|
top: 410px;
|
||||||
|
/* transform: rotate(-1deg); */
|
||||||
|
left: 480px;
|
||||||
|
}
|
||||||
|
.TE202 {
|
||||||
|
top: 410px;
|
||||||
|
/* transform: rotate(-1deg); */
|
||||||
|
left: 610px;
|
||||||
|
}
|
||||||
|
.TE203 {
|
||||||
|
top: 410px;
|
||||||
|
/* transform: rotate(-1deg); */
|
||||||
|
left: 740px;
|
||||||
|
}
|
||||||
|
.TE204 {
|
||||||
|
top: 410px;
|
||||||
|
/* transform: rotate(-1deg); */
|
||||||
|
left: 870px;
|
||||||
|
}
|
||||||
|
.TE205 {
|
||||||
|
top: 410px;
|
||||||
|
/* transform: rotate(-1deg); */
|
||||||
|
left: 1000px;
|
||||||
|
}
|
||||||
|
.TE206 {
|
||||||
|
top: 410px;
|
||||||
|
/* transform: rotate(-1deg); */
|
||||||
|
left: 1130px;
|
||||||
|
}
|
||||||
|
.TE207 {
|
||||||
|
top: 330px;
|
||||||
|
/* transform: rotate(-1deg); */
|
||||||
|
left: 1260px;
|
||||||
|
}
|
||||||
|
.TE208 {
|
||||||
|
top: 410px;
|
||||||
|
/* transform: rotate(-1deg); */
|
||||||
|
left: 1260px;
|
||||||
|
}
|
||||||
|
.TE209 {
|
||||||
|
top: 485px;
|
||||||
|
/* transform: rotate(-1deg); */
|
||||||
|
left: 1260px;
|
||||||
|
}
|
||||||
|
.TE210 {
|
||||||
|
top: 410px;
|
||||||
|
/* transform: rotate(-1deg); */
|
||||||
|
left: 1390px;
|
||||||
|
}
|
||||||
|
.TE211 {
|
||||||
|
top: 410px;
|
||||||
|
/* transform: rotate(-1deg); */
|
||||||
|
left: 1520px;
|
||||||
|
}
|
||||||
|
.TE212 {
|
||||||
|
top: 410px;
|
||||||
|
/* transform: rotate(-1deg); */
|
||||||
|
left: 1650px;
|
||||||
|
}
|
||||||
|
.TE213 {
|
||||||
|
top: 410px;
|
||||||
|
/* transform: rotate(-1deg); */
|
||||||
|
left: 1780px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** right **/
|
||||||
|
.TE214 {
|
||||||
|
top: 168px;
|
||||||
|
left: 2000px;
|
||||||
|
}
|
||||||
|
.TE215 {
|
||||||
|
top: 265px;
|
||||||
|
left: 2030px;
|
||||||
|
}
|
||||||
|
.TE216 {
|
||||||
|
top: 400px;
|
||||||
|
left: 2050px;
|
||||||
|
}
|
||||||
|
.TE217 {
|
||||||
|
top: 520px;
|
||||||
|
left: 2070px;
|
||||||
|
}
|
||||||
|
.TE218 {
|
||||||
|
top: 660px;
|
||||||
|
left: 2090px;
|
||||||
|
}
|
||||||
|
.TE219 {
|
||||||
|
top: 168px;
|
||||||
|
left: 2120px;
|
||||||
|
}
|
||||||
|
.TE220 {
|
||||||
|
top: 265px;
|
||||||
|
left: 2135px;
|
||||||
|
}
|
||||||
|
.TE221 {
|
||||||
|
top: 400px;
|
||||||
|
left: 2170px;
|
||||||
|
}
|
||||||
|
.TE222 {
|
||||||
|
top: 520px;
|
||||||
|
left: 2180px;
|
||||||
|
}
|
||||||
|
.TE223 {
|
||||||
|
top: 660px;
|
||||||
|
left: 2200px;
|
||||||
|
}
|
||||||
|
.TE224 {
|
||||||
|
top: 265px;
|
||||||
|
left: 2240px;
|
||||||
|
}
|
||||||
|
.TE225 {
|
||||||
|
top: 400px;
|
||||||
|
left: 2290px;
|
||||||
|
}
|
||||||
|
.TE226 {
|
||||||
|
top: 520px;
|
||||||
|
left: 2290px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 一层 --- 窑底 **/
|
||||||
|
.TE401 {
|
||||||
|
top: 420px;
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
.TE402 {
|
||||||
|
top: 420px;
|
||||||
|
left: 140px;
|
||||||
|
}
|
||||||
|
.TE403 {
|
||||||
|
top: 420px;
|
||||||
|
left: 260px;
|
||||||
|
}
|
||||||
|
.PE401 {
|
||||||
|
top: 320px;
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
.PE402 {
|
||||||
|
top: 320px;
|
||||||
|
left: 140px;
|
||||||
|
}
|
||||||
|
.PE403 {
|
||||||
|
top: 320px;
|
||||||
|
left: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** center top **/
|
||||||
|
.TE333 {
|
||||||
|
top: 128px;
|
||||||
|
left: 660px;
|
||||||
|
}
|
||||||
|
.TE335 {
|
||||||
|
top: 128px;
|
||||||
|
left: 775px;
|
||||||
|
}
|
||||||
|
.TE337 {
|
||||||
|
top: 128px;
|
||||||
|
left: 880px;
|
||||||
|
}
|
||||||
|
.TE339 {
|
||||||
|
top: 128px;
|
||||||
|
left: 1000px;
|
||||||
|
}
|
||||||
|
.TE341 {
|
||||||
|
top: 128px;
|
||||||
|
left: 1110px;
|
||||||
|
}
|
||||||
|
.TE343 {
|
||||||
|
top: 128px;
|
||||||
|
left: 1225px;
|
||||||
|
}
|
||||||
|
.TE345 {
|
||||||
|
top: 128px;
|
||||||
|
left: 1335px;
|
||||||
|
}
|
||||||
|
.TE347 {
|
||||||
|
top: 128px;
|
||||||
|
left: 1440px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** center bottom **/
|
||||||
|
.TE334 {
|
||||||
|
top: 620px;
|
||||||
|
left: 610px;
|
||||||
|
}
|
||||||
|
.TE336 {
|
||||||
|
top: 620px;
|
||||||
|
left: 730px;
|
||||||
|
}
|
||||||
|
.TE338 {
|
||||||
|
top: 620px;
|
||||||
|
left: 860px;
|
||||||
|
}
|
||||||
|
.TE340 {
|
||||||
|
top: 620px;
|
||||||
|
left: 980px;
|
||||||
|
}
|
||||||
|
.TE342 {
|
||||||
|
top: 620px;
|
||||||
|
left: 1110px;
|
||||||
|
}
|
||||||
|
.TE344 {
|
||||||
|
top: 620px;
|
||||||
|
left: 1235px;
|
||||||
|
}
|
||||||
|
.TE346 {
|
||||||
|
top: 620px;
|
||||||
|
left: 1360px;
|
||||||
|
}
|
||||||
|
.TE348 {
|
||||||
|
top: 620px;
|
||||||
|
left: 1480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** center middle **/
|
||||||
|
.TE301 {
|
||||||
|
top: 340px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 450px;
|
||||||
|
}
|
||||||
|
.TE302 {
|
||||||
|
top: 400px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 450px;
|
||||||
|
}
|
||||||
|
.TE303 {
|
||||||
|
top: 460px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 450px;
|
||||||
|
}
|
||||||
|
.TE304 {
|
||||||
|
top: 400px;
|
||||||
|
/* transform: scaleY(0.8) skewX(-2deg); */
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 580px;
|
||||||
|
}
|
||||||
|
.TE305 {
|
||||||
|
top: 340px;
|
||||||
|
/* transform: scaleY(0.8) skewX(-2deg); */
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 720px;
|
||||||
|
}
|
||||||
|
.TE306 {
|
||||||
|
top: 400px;
|
||||||
|
/* transform: scaleY(0.8) skewX(-2deg); */
|
||||||
|
/* transform: scaleY(0.8) rotate(-1deg); */
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 720px;
|
||||||
|
}
|
||||||
|
.TE307 {
|
||||||
|
top: 460px;
|
||||||
|
/* transform: scaleY(0.8) rotate(-1deg); */
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 720px;
|
||||||
|
}
|
||||||
|
.TE308 {
|
||||||
|
top: 400px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 860px;
|
||||||
|
}
|
||||||
|
.TE309 {
|
||||||
|
top: 400px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 1000px;
|
||||||
|
}
|
||||||
|
.TE310 {
|
||||||
|
top: 400px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 1140px;
|
||||||
|
}
|
||||||
|
.TE311 {
|
||||||
|
top: 340px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 1280px;
|
||||||
|
}
|
||||||
|
.TE312 {
|
||||||
|
top: 400px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 1280px;
|
||||||
|
}
|
||||||
|
.TE313 {
|
||||||
|
top: 460px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 1280px;
|
||||||
|
}
|
||||||
|
.TE314 {
|
||||||
|
top: 400px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 1420px;
|
||||||
|
}
|
||||||
|
.TE315 {
|
||||||
|
top: 400px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 1560px;
|
||||||
|
}
|
||||||
|
.TE316 {
|
||||||
|
top: 400px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 1700px;
|
||||||
|
}
|
||||||
|
.TE317 {
|
||||||
|
top: 340px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 1840px;
|
||||||
|
}
|
||||||
|
.TE318 {
|
||||||
|
top: 400px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 1840px;
|
||||||
|
}
|
||||||
|
.TE319 {
|
||||||
|
top: 460px;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
left: 1840px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** right **/
|
||||||
|
.TE327 {
|
||||||
|
top: 152px;
|
||||||
|
left: 2000px;
|
||||||
|
transform: scale(0.8) skewX(5deg);
|
||||||
|
}
|
||||||
|
.TE320 {
|
||||||
|
top: 252px;
|
||||||
|
left: 2020px;
|
||||||
|
transform: scale(0.8) skewX(7deg);
|
||||||
|
}
|
||||||
|
.TE321 {
|
||||||
|
top: 400px;
|
||||||
|
left: 2040px;
|
||||||
|
transform: scale(0.8) skewX(7deg);
|
||||||
|
}
|
||||||
|
.TE322 {
|
||||||
|
top: 532px;
|
||||||
|
left: 2060px;
|
||||||
|
transform: scale(0.8) skewX(7deg);
|
||||||
|
}
|
||||||
|
.TE330 {
|
||||||
|
top: 656px;
|
||||||
|
left: 2080px;
|
||||||
|
transform: scale(0.8) skewX(7deg);
|
||||||
|
}
|
||||||
|
.TE323 {
|
||||||
|
top: 152px;
|
||||||
|
left: 2100px;
|
||||||
|
transform: scale(0.8) skewX(7deg);
|
||||||
|
}
|
||||||
|
.TE328 {
|
||||||
|
top: 252px;
|
||||||
|
left: 2120px;
|
||||||
|
transform: scale(0.8) skewX(7deg);
|
||||||
|
}
|
||||||
|
.TE331 {
|
||||||
|
top: 400px;
|
||||||
|
left: 2140px;
|
||||||
|
transform: scale(0.8) skewX(7deg);
|
||||||
|
}
|
||||||
|
.TE329 {
|
||||||
|
top: 532px;
|
||||||
|
left: 2160px;
|
||||||
|
transform: scale(0.8) skewX(7deg);
|
||||||
|
}
|
||||||
|
.TE326 {
|
||||||
|
top: 656px;
|
||||||
|
left: 2180px;
|
||||||
|
transform: scale(0.8) skewX(7deg);
|
||||||
|
}
|
||||||
|
.TE324 {
|
||||||
|
top: 252px;
|
||||||
|
left: 2220px;
|
||||||
|
transform: scale(0.8) skewX(7deg);
|
||||||
|
}
|
||||||
|
.TE332 {
|
||||||
|
top: 400px;
|
||||||
|
left: 2260px;
|
||||||
|
transform: scale(0.8) skewX(7deg);
|
||||||
|
}
|
||||||
|
.TE325 {
|
||||||
|
top: 532px;
|
||||||
|
left: 2260px;
|
||||||
|
transform: scale(0.8) skewX(7deg);
|
||||||
|
}
|
||||||
@@ -6,6 +6,7 @@ function BottomBarItem(props) {
|
|||||||
<Container
|
<Container
|
||||||
icon={props.icon}
|
icon={props.icon}
|
||||||
title={props.title}
|
title={props.title}
|
||||||
|
desc={props.desc}
|
||||||
className={`${cls.bottomBarItem} ${props.className}`}
|
className={`${cls.bottomBarItem} ${props.className}`}
|
||||||
style={props.style}
|
style={props.style}
|
||||||
>
|
>
|
||||||
|
|||||||
18
src/components/Common/BottomItemBackgroundForecast/index.jsx
Normal file
18
src/components/Common/BottomItemBackgroundForecast/index.jsx
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import cls from './index.module.css';
|
||||||
|
import Container from '../../Container';
|
||||||
|
|
||||||
|
function BottomBarItem(props) {
|
||||||
|
return (
|
||||||
|
<Container
|
||||||
|
icon={props.icon}
|
||||||
|
title={props.title}
|
||||||
|
desc={props.desc}
|
||||||
|
className={`${cls.bottomBarItem} ${props.className}`}
|
||||||
|
style={props.style}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BottomBarItem;
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
.bottomBarItem {
|
||||||
|
background: url(../../../assets/forecastChartBack.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 506px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import cls from './index.module.css';
|
||||||
|
import Container from '../../Container';
|
||||||
|
|
||||||
|
function BottomBarItem(props) {
|
||||||
|
return (
|
||||||
|
<Container
|
||||||
|
icon={props.icon}
|
||||||
|
title={props.title}
|
||||||
|
desc={props.desc}
|
||||||
|
className={`${cls.bottomBarItem} ${props.className}`}
|
||||||
|
style={props.style}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BottomBarItem;
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
.bottomBarItem {
|
||||||
|
background: url(../../../assets/forecastBack.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 506px;
|
||||||
|
height: 422px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import cls from './index.module.css';
|
||||||
|
import Container from '../../Container';
|
||||||
|
|
||||||
|
function BottomBarItem(props) {
|
||||||
|
return (
|
||||||
|
<Container
|
||||||
|
icon={props.icon}
|
||||||
|
title={props.title}
|
||||||
|
desc={props.desc}
|
||||||
|
className={`${cls.bottomBarItem} ${props.className}`}
|
||||||
|
style={props.style}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BottomBarItem;
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
.bottomBarItem {
|
||||||
|
background: url(../../../assets/leftMiddleBack.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 506px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import cls from './index.module.css';
|
||||||
|
import Container from '../../Container';
|
||||||
|
|
||||||
|
function BottomBarItem(props) {
|
||||||
|
return (
|
||||||
|
<Container
|
||||||
|
icon={props.icon}
|
||||||
|
title={props.title}
|
||||||
|
desc={props.desc}
|
||||||
|
className={`${cls.bottomBarItem} ${props.className}`}
|
||||||
|
style={props.style}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BottomBarItem;
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
.bottomBarItem {
|
||||||
|
background: url(../../../assets/lefTopBack.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 506px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
@@ -32,11 +32,11 @@ export default function CompanyName() {
|
|||||||
<img src={TopSide} alt="图片丢失" className={cls.TopSideLeft}/>
|
<img src={TopSide} alt="图片丢失" className={cls.TopSideLeft}/>
|
||||||
<div className={cls.TopSideLeftLine}>
|
<div className={cls.TopSideLeftLine}>
|
||||||
<img src={LeftLine} alt="图片丢失" className={cls.TopSideLeftLineicon}/>
|
<img src={LeftLine} alt="图片丢失" className={cls.TopSideLeftLineicon}/>
|
||||||
<h2 className={cls.TopSideLeftTxt}>单位：河南汇融科技服务有限公司</h2>
|
<h2 className={cls.TopSideLeftTxt}>单位：河南汇融数字科技有限公司</h2>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h2 className={cls.TopTitleText}>
|
<h2 className={cls.TopTitleText}>
|
||||||
许昌安彩新能科技  4800万方光伏轻质基板生产线{' '}
|
许昌安彩新能科技  许昌安彩窑炉生产指挥调度中心{' '}
|
||||||
</h2>
|
</h2>
|
||||||
<img src={ButtonLine} alt="图片加载错误" className={cls.TopButtonLine}/>
|
<img src={ButtonLine} alt="图片加载错误" className={cls.TopButtonLine}/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -41,6 +41,7 @@
|
|||||||
color: rgb(255, 255, 255, 0.8);
|
color: rgb(255, 255, 255, 0.8);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 300px;
|
font-weight: 300px;
|
||||||
|
letter-spacing: 1px;
|
||||||
line-height: 22.174976px;
|
line-height: 22.174976px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -77,9 +78,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.TopTitleText {
|
.TopTitleText {
|
||||||
margin-top: 16px;
|
margin-top: 40px;
|
||||||
letter-spacing: 8px;
|
letter-spacing: 8px;
|
||||||
font-size: 32px;
|
font-size: 34px;
|
||||||
color: #00fff7;
|
color: #00fff7;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
|
|||||||
@@ -1,60 +1,36 @@
|
|||||||
import BottomBarItem from "../BottomItemBackground";
|
import BottomBarItem from "../BottomItemBackground";
|
||||||
import React, { Component } from "react";
|
|
||||||
import cls from "./righttable.module.scss";
|
import cls from "./righttable.module.scss";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
import { ScrollBoard } from "@jiaminghi/data-view-react";
|
import { ScrollBoard } from "@jiaminghi/data-view-react";
|
||||||
|
|
||||||
let data = [
|
function Chart1(props) {
|
||||||
["产线0", "10mm", "10mm", "10mm"],
|
const rawData = useSelector((state) => state.cutting.productData);
|
||||||
["产线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 = {
|
let config = {
|
||||||
headerBGC: "rgba(4, 44, 76, 0.3)",
|
// headerBGC: "rgba(4, 44, 76, 0.3)",
|
||||||
|
headerBGC: "#044A8460",
|
||||||
header: [
|
header: [
|
||||||
'<span style="color:#fff">产线名<span/>',
|
'<span style="color:#fff; padding-left: 8px;">产线名<span/>',
|
||||||
'<span style="color:#fff">原板宽度<span/>',
|
'<span style="color:#fff; padding-left: 8px;">玻璃长度<span/>',
|
||||||
'<span style="color:#fff">净板宽<span/>',
|
'<span style="color:#fff; padding-left: 8px;">玻璃宽度<span/>',
|
||||||
'<span style="color:#fff">玻璃厚度<span/>',
|
'<span style="color:#fff; padding-left: 8px;">玻璃厚度<span/>',
|
||||||
],
|
],
|
||||||
oddRowBGC: "#042444",
|
// oddRowBGC: "#042444",
|
||||||
evenRowBGC: "#042c4c",
|
// evenRowBGC: "#042c4c",
|
||||||
|
oddRowBGC: "#044A8460",
|
||||||
|
evenRowBGC: "#0b549970",
|
||||||
columnWidth: [128],
|
columnWidth: [128],
|
||||||
headerHeight: 40,
|
headerHeight: 40,
|
||||||
hoverPause: false,
|
hoverPause: true,
|
||||||
data: replaceStyle(data, 0.7),
|
data: replaceStyle(filterData(rawData), 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 (
|
return (
|
||||||
<BottomBarItem
|
<BottomBarItem
|
||||||
icon="pause"
|
icon="pause"
|
||||||
title="当前产线生产规格"
|
title="当前产线生产规格"
|
||||||
className={this.props.className}
|
className={props.className}
|
||||||
style={this.props.style}
|
style={props.style}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={cls.CenterChart1itemDetailBorder}
|
className={cls.CenterChart1itemDetailBorder}
|
||||||
@@ -63,11 +39,115 @@ class Chart1 extends Component {
|
|||||||
<span className={cls.CenterFormitemDetailBorderLine1}></span>
|
<span className={cls.CenterFormitemDetailBorderLine1}></span>
|
||||||
<span className={cls.CenterFormitemDetailBorderLine2}></span>
|
<span className={cls.CenterFormitemDetailBorderLine2}></span>
|
||||||
<span className={cls.CenterFormitemDetailBorderLine3}></span>
|
<span className={cls.CenterFormitemDetailBorderLine3}></span>
|
||||||
<ScrollBoard config={config} style={{}} />
|
{config.data.length !== 0 && <ScrollBoard config={config} style={{}} />}
|
||||||
|
{config.data.length === 0 && (
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
color: "#cccf",
|
||||||
|
fontSize: "24px",
|
||||||
|
userSelect: "none",
|
||||||
|
textAlign: "center",
|
||||||
|
paddingTop: "72px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
暂无数据
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</BottomBarItem>
|
</BottomBarItem>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
export default Chart1;
|
export default Chart1;
|
||||||
|
|
||||||
|
// 测试数据
|
||||||
|
var rawData = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
length: 1209,
|
||||||
|
productionLine: "Y61",
|
||||||
|
square: 123.3,
|
||||||
|
thick: 2,
|
||||||
|
wide: 1089,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
length: 1119,
|
||||||
|
productionLine: "Y62",
|
||||||
|
square: 103.3,
|
||||||
|
thick: 2,
|
||||||
|
wide: 1339,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
length: 1019,
|
||||||
|
productionLine: "Y63",
|
||||||
|
square: 233,
|
||||||
|
thick: 1,
|
||||||
|
wide: 1111,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
length: 2000,
|
||||||
|
productionLine: "Y64",
|
||||||
|
square: 233,
|
||||||
|
thick: 1,
|
||||||
|
wide: 1232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
length: 1560,
|
||||||
|
productionLine: "Y65",
|
||||||
|
square: 233,
|
||||||
|
thick: 1,
|
||||||
|
wide: 996,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
length: 1990,
|
||||||
|
productionLine: "Y66",
|
||||||
|
square: 233,
|
||||||
|
thick: 1,
|
||||||
|
wide: 416,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function filterData(rawData) {
|
||||||
|
return (rawData ?? []).map((item) => [
|
||||||
|
// 产线名
|
||||||
|
item.productionLine,
|
||||||
|
// 原板宽度
|
||||||
|
item.length,
|
||||||
|
// 净板宽
|
||||||
|
item.wide,
|
||||||
|
// 玻璃厚度
|
||||||
|
item.thick,
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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 = ["产线名", "原板宽度", "净板宽", "玻璃厚度"];
|
||||||
|
|
||||||
|
function replaceStyle(Arr, opacity) {
|
||||||
|
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,${opacity})">${
|
||||||
|
Arr[i][j]
|
||||||
|
} ${j == 0 ? "" : "mm"}<span/>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return temp;
|
||||||
|
}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
||||||
background-color: rgba(4, 44, 76, 0.2);
|
// background-color: rgba(4, 44, 76, 0.2);
|
||||||
.CenterChart1itemTXT {
|
.CenterChart1itemTXT {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 10%;
|
height: 10%;
|
||||||
|
|||||||
BIN
src/components/Common/CurrentTemp/6778.ttf
Normal file
BIN
src/components/Common/CurrentTemp/6778.ttf
Normal file
Binary file not shown.
7
src/components/Common/CurrentTemp/font.css
Normal file
7
src/components/Common/CurrentTemp/font.css
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "HelloFont WenYiHei";
|
||||||
|
/* font-style: normal;
|
||||||
|
font-weight: 400; */
|
||||||
|
src: url("./ziyou.ttf");
|
||||||
|
/* font-display: swap; */
|
||||||
|
}
|
||||||
@@ -1,37 +1,39 @@
|
|||||||
import BottomBarItem from '../BottomItemBackground';
|
import GraphBase from "../GraphBase";
|
||||||
import GraphBase from '../GraphBase';
|
import "./font.css";
|
||||||
import { Radio } from 'antd';
|
import cls from "./index.module.css";
|
||||||
import cls from './index.module.css';
|
import { useEffect, useState } from "react";
|
||||||
import { useState } from 'react';
|
import { Tooltip, Button } from "antd";
|
||||||
|
import { InfoCircleOutlined } from "@ant-design/icons";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
const SmallBox = (props) => {
|
const SmallBox = (props) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="small-box"
|
className="small-box"
|
||||||
style={{
|
style={{
|
||||||
boxShadow: 'inset 0 0 18px 10px #fff1',
|
boxShadow: "inset 0 0 18px 10px #fff1",
|
||||||
borderRadius: '3px',
|
borderRadius: "3px",
|
||||||
padding: '6px',
|
padding: "6px",
|
||||||
display: 'flex',
|
display: "flex",
|
||||||
alignItems: 'center',
|
alignItems: "center",
|
||||||
justifyContent: 'center',
|
justifyContent: "center",
|
||||||
color: '#fff',
|
color: "#fff",
|
||||||
position: 'relative',
|
position: "relative",
|
||||||
userSelect: 'none',
|
userSelect: "none",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{props.split !== false && (
|
{props.split !== false && (
|
||||||
<span
|
<span
|
||||||
className="vertical-line"
|
className="vertical-line"
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: "absolute",
|
||||||
display: 'inline-block',
|
display: "inline-block",
|
||||||
width: '2px',
|
width: "2px",
|
||||||
height: '80%',
|
height: "80%",
|
||||||
top: '10%',
|
top: "10%",
|
||||||
left: '50%',
|
left: "45%",
|
||||||
background:
|
background:
|
||||||
'linear-gradient(to bottom, transparent, #fff3, #fffa, #fff3, transparent)',
|
"linear-gradient(to bottom, transparent, #fff3, #fffa, #fff3, transparent)",
|
||||||
}}
|
}}
|
||||||
></span>
|
></span>
|
||||||
)}
|
)}
|
||||||
@@ -41,93 +43,212 @@ const SmallBox = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
function WindFrequence(props) {
|
function WindFrequence(props) {
|
||||||
const [dataSource, setDataSource] = useState('风机');
|
const [dataSource, setDataSource] = useState("Y61");
|
||||||
|
const [currentLineTemp, setCurrentLineTemp] = useState([]);
|
||||||
function handleSourceChange(v) {
|
const currentTempList = useSelector((state) => state.annealTemperature?.data);
|
||||||
console.log('val', v);
|
const lines = ["Y61", "Y62", "Y63", "Y64", "Y65"];
|
||||||
|
function handleSourceChange(line) {
|
||||||
|
setDataSource(line);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setCurrentLineTemp(
|
||||||
|
(currentTempList &&
|
||||||
|
currentTempList[1 + lines.indexOf(dataSource) + "#"]) ||
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
}, [dataSource, currentTempList]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GraphBase
|
<GraphBase
|
||||||
icon="pause"
|
icon="temp"
|
||||||
title="当前温度"
|
title="当前温度"
|
||||||
dateOptions={['风机', '风阀', '电加热']}
|
dateOptions={["Y61", "Y62", "Y63", "Y64", "Y65"]}
|
||||||
|
selectWidth={70}
|
||||||
|
defaultSelect={dataSource}
|
||||||
onDateChange={handleSourceChange}
|
onDateChange={handleSourceChange}
|
||||||
size={['middle', 'long']}
|
size={["middle", "long"]}
|
||||||
>
|
>
|
||||||
<div className={cls.mainContent + ' ' + cls.grid}>
|
<div className={cls.mainContent + " " + cls.grid}>
|
||||||
<SmallBox>
|
<SmallBox>
|
||||||
<h1 className={cls.areaName}>A1区板上</h1>
|
<h1 className={cls.areaName}>A1区板上</h1>
|
||||||
<div className={cls.areaContent}>
|
<div className={cls.areaContent}>
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
<span className={cls.areaValue}>
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
{(+currentLineTemp[0]).toFixed(2) || 0} ℃
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[1]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[2]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</SmallBox>
|
</SmallBox>
|
||||||
<SmallBox>
|
<SmallBox>
|
||||||
<h1 className={cls.areaName}>A1区板上</h1>
|
<h1 className={cls.areaName}>A2区板上</h1>
|
||||||
<div className={cls.areaContent}>
|
<div className={cls.areaContent}>
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
<span className={cls.areaValue}>
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
{(+currentLineTemp[6]).toFixed(2) || 0} ℃
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[7]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[8]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</SmallBox>
|
</SmallBox>
|
||||||
<SmallBox>
|
<SmallBox>
|
||||||
<h1 className={cls.areaName}>A1区板上</h1>
|
<h1 className={cls.areaName}>B区板上</h1>
|
||||||
<div className={cls.areaContent}>
|
<div className={cls.areaContent}>
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
<span className={cls.areaValue}>
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
{(+currentLineTemp[12]).toFixed(2) || 0} ℃
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[13]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[14]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</SmallBox>
|
</SmallBox>
|
||||||
<SmallBox>
|
<SmallBox>
|
||||||
<h1 className={cls.areaName}>A1区板上</h1>
|
<h1 className={cls.areaName}>C区板上</h1>
|
||||||
<div className={cls.areaContent}>
|
<div className={cls.areaContent}>
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
<span className={cls.areaValue}>
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
{(+currentLineTemp[18]).toFixed(2) || 0} ℃
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[19]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[20]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</SmallBox>
|
</SmallBox>
|
||||||
<SmallBox>
|
<SmallBox>
|
||||||
<h1 className={cls.areaName}>A1区板上</h1>
|
<h1 className={cls.areaName}>A1区板下</h1>
|
||||||
<div className={cls.areaContent}>
|
<div className={cls.areaContent}>
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
<span className={cls.areaValue}>
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
{(+currentLineTemp[3]).toFixed(2) || 0} ℃
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[4]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[5]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</SmallBox>
|
</SmallBox>
|
||||||
<SmallBox split={false}>
|
<SmallBox>
|
||||||
|
<h1 className={cls.areaName}>A2区板下</h1>
|
||||||
|
<div className={cls.areaContent}>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[9]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[10]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[11]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</SmallBox>
|
||||||
|
<SmallBox>
|
||||||
|
<h1 className={cls.areaName}>B区板下</h1>
|
||||||
|
<div className={cls.areaContent}>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[15]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[16]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[17]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</SmallBox>
|
||||||
|
<SmallBox>
|
||||||
|
<h1 className={cls.areaName}>C区板下</h1>
|
||||||
|
<div className={cls.areaContent}>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[21]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[22]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[23]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</SmallBox>
|
||||||
|
<SmallBox split={false} style={{ position: "relative" }}>
|
||||||
<div className={cls.areaPureContent}>
|
<div className={cls.areaPureContent}>
|
||||||
<span className={cls.areaPureValue}>123.8℃</span>
|
<div
|
||||||
<span className={cls.areaPureValue}>123.8℃</span>
|
className="hint"
|
||||||
<span className={cls.areaPureValue}>123.8℃</span>
|
style={{ position: "absolute", top: "3px", right: "3px" }}
|
||||||
|
>
|
||||||
|
<Tooltip title="红外温度">
|
||||||
|
<Button
|
||||||
|
shape="circle"
|
||||||
|
type="text"
|
||||||
|
style={{ color: "#cccc" }}
|
||||||
|
icon={<InfoCircleOutlined />}
|
||||||
|
></Button>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
<span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
|
||||||
|
{(+currentLineTemp[26]).toFixed(2) || 0}℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
|
||||||
|
{(+currentLineTemp[27]).toFixed(2) || 0}℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
|
||||||
|
{(+currentLineTemp[28]).toFixed(2) || 0}℃
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</SmallBox>
|
</SmallBox>
|
||||||
<SmallBox>
|
|
||||||
<h1 className={cls.areaName}>A1区板上</h1>
|
<SmallBox split={false} style={{ position: "relative" }}>
|
||||||
<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}>
|
<div className={cls.areaPureContent}>
|
||||||
<span className={cls.areaPureValue}>123.8℃</span>
|
<div
|
||||||
<span className={cls.areaPureValue}>123.8℃</span>
|
className="hint"
|
||||||
<span className={cls.areaPureValue}>123.8℃</span>
|
style={{ position: "absolute", top: "3px", right: "3px" }}
|
||||||
|
>
|
||||||
|
<Tooltip title="压延机冷却水温度 | 过度辊台冷却水温度 | 唇砖冷却水温度">
|
||||||
|
<Button
|
||||||
|
shape="circle"
|
||||||
|
type="text"
|
||||||
|
style={{ color: "#cccc" }}
|
||||||
|
icon={<InfoCircleOutlined />}
|
||||||
|
></Button>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
<span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
|
||||||
|
{(+currentLineTemp[29]).toFixed(2) || 0}℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
|
||||||
|
{(+currentLineTemp[30]).toFixed(2) || 0}℃
|
||||||
|
</span>
|
||||||
|
<span className={cls.areaPureValue} style={{ fontSize: "12px" }}>
|
||||||
|
{(+currentLineTemp[31]).toFixed(2) || 0}℃
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</SmallBox>
|
</SmallBox>
|
||||||
<SmallBox>
|
<SmallBox>
|
||||||
<h1 className={cls.areaName}>A1区板上</h1>
|
<h1 className={cls.areaName}>RET1区</h1>
|
||||||
<div className={cls.areaContent}>
|
<div className={cls.areaContent}>
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[24]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</SmallBox>
|
</SmallBox>
|
||||||
<SmallBox>
|
<SmallBox>
|
||||||
<h1 className={cls.areaName}>A1区板上</h1>
|
<h1 className={cls.areaName}>RET2区</h1>
|
||||||
<div className={cls.areaContent}>
|
<div className={cls.areaContent}>
|
||||||
<span className={cls.areaValue}>123.8℃</span>
|
<span className={cls.areaValue}>
|
||||||
|
{(+currentLineTemp[25]).toFixed(2) || 0} ℃
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</SmallBox>
|
</SmallBox>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -50,7 +50,7 @@
|
|||||||
|
|
||||||
.areaName {
|
.areaName {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: 1.5px;
|
letter-spacing: 1.5px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -66,7 +66,7 @@
|
|||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.areaPureValue:not(:first-child) {
|
span.areaPureValue:not(:first-of-type) {
|
||||||
border-left: 2px solid #fff6;
|
border-left: 2px solid #fff6;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -80,9 +80,11 @@
|
|||||||
.areaPureValue,
|
.areaPureValue,
|
||||||
.areaValue {
|
.areaValue {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 17px;
|
font-size: 14px;
|
||||||
line-height: 22px;
|
line-height: 16px;
|
||||||
letter-spacing: 1.2px;
|
letter-spacing: 1.2px;
|
||||||
|
font-family: "HelloFont WenYiHei", sans-serif;
|
||||||
|
color: #53c2d4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switchLabel {
|
.switchLabel {
|
||||||
|
|||||||
BIN
src/components/Common/CurrentTemp/ziyou.ttf
Normal file
BIN
src/components/Common/CurrentTemp/ziyou.ttf
Normal file
Binary file not shown.
184
src/components/Common/Energy/EnergeCostRealtime/index.jsx
Normal file
184
src/components/Common/Energy/EnergeCostRealtime/index.jsx
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import cls from "./index.module.scss";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import Arrow from "../../Arrow";
|
||||||
|
|
||||||
|
const EnergyCostRealtime = () => {
|
||||||
|
const [isPage1, setIsPage1] = useState(false);
|
||||||
|
const energyInfo = useSelector((state) => state.energy?.info);
|
||||||
|
|
||||||
|
// function handleClick() {
|
||||||
|
// setIsPage1((pre) => !pre);
|
||||||
|
// }
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
setIsPage1(pre => !pre);
|
||||||
|
}, 10000);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearInterval(timer);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* <Arrow key="left" direction="left" onClick={handleClick} />
|
||||||
|
<Arrow key="right" direction="right" onClick={handleClick} /> */}
|
||||||
|
{isPage1 && (
|
||||||
|
<div className={`${cls.cost__info} flex`}>
|
||||||
|
<div className={`${cls.info__item_groups_col1}`}>
|
||||||
|
<div className={cls.info__item}>
|
||||||
|
<i
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
fontStyle: "normal",
|
||||||
|
paddingRight: "6px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
余热发电(昨日)
|
||||||
|
</i>
|
||||||
|
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
|
||||||
|
{(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={cls.info__item}>
|
||||||
|
<i
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
fontStyle: "normal",
|
||||||
|
paddingRight: "6px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
余热发电(总量)
|
||||||
|
</i>
|
||||||
|
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
|
||||||
|
{(+energyInfo?.elecQty3)?.toFixed(2) || 0}kWh
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={cls.info__item_groups}>
|
||||||
|
<div className={cls.info__item}>
|
||||||
|
<i
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
fontStyle: "normal",
|
||||||
|
paddingRight: "6px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
水耗量(昨日)
|
||||||
|
</i>
|
||||||
|
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
|
||||||
|
{(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={cls.info__item}>
|
||||||
|
<i
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
fontStyle: "normal",
|
||||||
|
paddingRight: "6px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
天然气I(累计)
|
||||||
|
</i>
|
||||||
|
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
|
||||||
|
{energyInfo?.ngQty1 || "0Nm³"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={cls.info__item}>
|
||||||
|
<i
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
fontStyle: "normal",
|
||||||
|
paddingRight: "6px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
电耗量(昨日)
|
||||||
|
</i>
|
||||||
|
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
|
||||||
|
{(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={cls.info__item}>
|
||||||
|
<i
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
fontStyle: "normal",
|
||||||
|
paddingRight: "6px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
天然气II(累计)
|
||||||
|
</i>
|
||||||
|
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
|
||||||
|
{energyInfo?.ngQty2 || "0Nm³"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!isPage1 && (
|
||||||
|
<div className={cls.energy_info_new}>
|
||||||
|
<div className="energy_info_new--item">
|
||||||
|
<i
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
fontStyle: "normal",
|
||||||
|
paddingRight: "6px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
智慧能源光伏发电(昨日)/kwh
|
||||||
|
</i>
|
||||||
|
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
|
||||||
|
{(+energyInfo?.elecQty6)?.toFixed(2) || 0}kWh
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="energy_info_new--item">
|
||||||
|
<i
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
fontStyle: "normal",
|
||||||
|
paddingRight: "6px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
许昌安彩光伏发电(昨日)/kwh
|
||||||
|
</i>
|
||||||
|
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
|
||||||
|
{(+energyInfo?.elecQty7)?.toFixed(2) || 0}kWh
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="energy_info_new--item">
|
||||||
|
<i
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
fontStyle: "normal",
|
||||||
|
paddingRight: "6px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
智慧能源光伏发电(总量)/kwh
|
||||||
|
</i>
|
||||||
|
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
|
||||||
|
{(+energyInfo?.elecQty4)?.toFixed(2) || 0}kWh
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="energy_info_new--item">
|
||||||
|
<i
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
fontStyle: "normal",
|
||||||
|
paddingRight: "6px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
许昌安彩光伏发电(总量)/kwh
|
||||||
|
</i>
|
||||||
|
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
|
||||||
|
{(+energyInfo?.elecQty5)?.toFixed(2) || 0}kWh
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EnergyCostRealtime;
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
.cost__info {
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
// margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info__item {
|
||||||
|
border-radius: 2px;
|
||||||
|
color: hsl(0, 0%, 100%, 0.9);
|
||||||
|
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 28px;
|
||||||
|
padding-left: 12px;
|
||||||
|
padding: 8px 0;
|
||||||
|
user-select: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hAuto {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info__item_groups {
|
||||||
|
flex: 2;
|
||||||
|
margin-left: 8px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info__item_groups_col1 {
|
||||||
|
flex: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.energy_info_new {
|
||||||
|
color: #fff;
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
height: 162px;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.energy_info_new > div {
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 28px;
|
||||||
|
color: hsl(0, 0%, 100%, 0.9);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
@@ -1,112 +1,92 @@
|
|||||||
import cls from './index.module.css';
|
import cls from "./index.module.css";
|
||||||
import { randomInt } from '../../../../utils';
|
import { Radio, Select } from "antd";
|
||||||
import * as echarts from 'echarts';
|
import ReactECharts from "echarts-for-react";
|
||||||
import { Switch, Radio } from 'antd';
|
import { useState } from "react";
|
||||||
import ReactECharts from 'echarts-for-react';
|
import { useSelector } from "react-redux";
|
||||||
|
import { getOptions } from "../../../../utils/energeChartOption";
|
||||||
|
import triangle from "../../../../assets/Icon/triangle.svg";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
|
||||||
const EnergyCostChart = (props) => {
|
const EnergyCostChart = (props) => {
|
||||||
const options = {
|
const elecTrend = useSelector((state) => state.energy.trend.elec);
|
||||||
color: ['#FFD160', '#12FFF5', '#2760FF'],
|
const gasITrend = useSelector((state) => state.energy.trend.natGas1);
|
||||||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
const gasIITrend = useSelector((state) => state.energy.trend.natGas2);
|
||||||
xAxis: {
|
const [source, setSource] = useState("elec");
|
||||||
type: 'category',
|
const [period, setPeriod] = useState("week");
|
||||||
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,
|
|
||||||
formatter: '{value} %',
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#213259',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#213259a0',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
interval: 10,
|
|
||||||
min: 0,
|
|
||||||
max: 100,
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: Array(7)
|
|
||||||
.fill(1)
|
|
||||||
.map((_) => {
|
|
||||||
return randomInt(60, 100);
|
|
||||||
}),
|
|
||||||
type: 'line',
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: '#FFD16040' },
|
|
||||||
{ offset: 0.5, color: '#FFD16020' },
|
|
||||||
{ offset: 1, color: '#FFD16010' },
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
// smooth: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
function handleSwitchChange(val) {
|
const [timestr, setTimestr] = useState(
|
||||||
// val: boolean
|
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
|
||||||
console.log('switch change', val);
|
" - " +
|
||||||
|
dayjs().subtract(1, "day").format("YYYY.MM.DD")
|
||||||
|
);
|
||||||
|
|
||||||
|
const currentTrend =
|
||||||
|
source == "elec" ? elecTrend : source == "gasi" ? gasITrend : gasIITrend;
|
||||||
|
|
||||||
|
const options = getOptions(
|
||||||
|
period,
|
||||||
|
source,
|
||||||
|
currentTrend ?? { week: [], month: [], year: [] }
|
||||||
|
);
|
||||||
|
|
||||||
|
function handleDateChange(value) {
|
||||||
|
setPeriod(
|
||||||
|
{
|
||||||
|
周: "week",
|
||||||
|
月: "month",
|
||||||
|
年: "year",
|
||||||
|
}[value]
|
||||||
|
);
|
||||||
|
setTimestr(
|
||||||
|
{
|
||||||
|
年:
|
||||||
|
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
|
||||||
|
"29 - " +
|
||||||
|
dayjs().endOf("year").format("YYYY.MM.") +
|
||||||
|
"28",
|
||||||
|
周:
|
||||||
|
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
|
||||||
|
" - " +
|
||||||
|
dayjs().subtract(1, "day").format("YYYY.MM.DD"),
|
||||||
|
月:
|
||||||
|
dayjs().subtract(1, "month").format("YYYY.MM.") +
|
||||||
|
"29 - " +
|
||||||
|
dayjs().format("YYYY.MM.") +
|
||||||
|
"28",
|
||||||
|
}[value]
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cls.energyCostChart}>
|
<div className={cls.energyCostChart}>
|
||||||
<div className={cls.titleBar}>
|
<div className={cls.titleBar}>
|
||||||
<h2>能耗趋势图</h2>
|
<h2>能耗趋势图</h2>
|
||||||
<Switch defaultChecked onChange={handleSwitchChange} />
|
|
||||||
<div className={cls.legend}>
|
|
||||||
<span className="legend__title">班次详情</span>
|
|
||||||
<ul className="legend__list">
|
|
||||||
<li>总量</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className={`${cls.choiceBar} flex items-center justify-between`}>
|
||||||
<Radio.Group
|
<Radio.Group
|
||||||
defaultValue="week"
|
value={source}
|
||||||
buttonStyle="solid"
|
buttonStyle="solid"
|
||||||
|
onChange={(v) => setSource(v.target.value)}
|
||||||
|
className={`${cls.radioGroup} flex items-center justify-between`}
|
||||||
|
>
|
||||||
|
<Radio.Button value="elec" className="radio-group__item">
|
||||||
|
电
|
||||||
|
</Radio.Button>
|
||||||
|
<Radio.Button value="gasi" className="radio-group__item">
|
||||||
|
天然气I
|
||||||
|
</Radio.Button>
|
||||||
|
<Radio.Button value="gasii" className="radio-group__item">
|
||||||
|
天然气II
|
||||||
|
</Radio.Button>
|
||||||
|
</Radio.Group>
|
||||||
|
|
||||||
|
{/* <Radio.Group
|
||||||
|
value={period}
|
||||||
|
buttonStyle="solid"
|
||||||
|
onChange={(v) => setPeriod(v.target.value)}
|
||||||
className={cls.radioGroup}
|
className={cls.radioGroup}
|
||||||
>
|
>
|
||||||
<Radio.Button value="day" className="radio-group__item">
|
|
||||||
日
|
|
||||||
</Radio.Button>
|
|
||||||
<Radio.Button value="week" className="radio-group__item">
|
<Radio.Button value="week" className="radio-group__item">
|
||||||
周
|
周
|
||||||
</Radio.Button>
|
</Radio.Button>
|
||||||
@@ -116,10 +96,53 @@ const EnergyCostChart = (props) => {
|
|||||||
<Radio.Button value="year" className="radio-group__item">
|
<Radio.Button value="year" className="radio-group__item">
|
||||||
年
|
年
|
||||||
</Radio.Button>
|
</Radio.Button>
|
||||||
</Radio.Group>
|
</Radio.Group> */}
|
||||||
|
|
||||||
|
<div className={cls.graphBaseDesc}>{timestr}</div>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
defaultValue={"周"}
|
||||||
|
style={{ width: 60 }}
|
||||||
|
popupClassName="xc-date-selector-menu"
|
||||||
|
className={cls.radioGroupShort}
|
||||||
|
options={["周", "月", "年"].map((item) => ({
|
||||||
|
label: item,
|
||||||
|
value: item,
|
||||||
|
}))}
|
||||||
|
suffixIcon={<img src={triangle} alt="#" />}
|
||||||
|
notFoundContent={
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "14px",
|
||||||
|
lineHeight: 1,
|
||||||
|
paddingLeft: "12px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
- 无 -
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
onChange={(value, option) => handleDateChange(value)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1">
|
|
||||||
<ReactECharts option={options} style={{ height: '180px' }} />
|
<div className="flex-1" style={{ marginTop: "8px" }}>
|
||||||
|
{options && (
|
||||||
|
<ReactECharts option={options} style={{ height: "180px" }} />
|
||||||
|
)}
|
||||||
|
{!options && (
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
color: "#cccf",
|
||||||
|
fontSize: "20px",
|
||||||
|
userSelect: "none",
|
||||||
|
textAlign: "center",
|
||||||
|
paddingTop: "32px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
暂无数据
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -16,6 +16,12 @@
|
|||||||
letter-spacing: 1.2px;
|
letter-spacing: 1.2px;
|
||||||
color: #52fff8;
|
color: #52fff8;
|
||||||
}
|
}
|
||||||
|
.graphBaseDesc {
|
||||||
|
margin: 0 12px;
|
||||||
|
line-height: 1;
|
||||||
|
color: #76fff9;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.energyCostChart .titleBar .legend {
|
.energyCostChart .titleBar .legend {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -41,7 +47,7 @@
|
|||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
}
|
}
|
||||||
.energyCostChart .titleBar .legend ul li::before {
|
.energyCostChart .titleBar .legend ul li::before {
|
||||||
content: '';
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 2px;
|
left: 2px;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
@@ -67,6 +73,10 @@
|
|||||||
border: none !important;
|
border: none !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
|
.radioGroupShort * {
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 6px !important;
|
||||||
|
}
|
||||||
.radioGroup *:focus-within {
|
.radioGroup *:focus-within {
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,26 +1,15 @@
|
|||||||
import cls from './index.module.scss';
|
import cls from "./index.module.scss";
|
||||||
import Container from '../../Container';
|
import Container from "../../Container";
|
||||||
import TechSplitline from '../TechSplitline';
|
import TechSplitline from "../TechSplitline";
|
||||||
import EnergyCostChart from './EnergyCostChart';
|
import EnergyCostChart from "./EnergyCostChart";
|
||||||
|
import EnergyCostRealtime from "./EnergeCostRealtime";
|
||||||
|
|
||||||
function EnergyCost(props) {
|
function EnergyCost(props) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container title="能耗" icon="charger" className={cls.energyCost}>
|
<Container title="能耗" icon="battery" className={cls.energyCost}>
|
||||||
<div className={`flex flex-col`}>
|
<div className={`flex flex-col`}>
|
||||||
<div className={`${cls.cost__info} flex`}>
|
<EnergyCostRealtime />
|
||||||
<div
|
|
||||||
className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`}
|
|
||||||
>
|
|
||||||
<span>余 热 发 电</span>
|
|
||||||
<span>922kWh</span>
|
|
||||||
</div>
|
|
||||||
<div className={cls.info__item_groups}>
|
|
||||||
<div className={cls.info__item}>水 耗 量 : 32Km³</div>
|
|
||||||
<div className={cls.info__item}>天 然 气 I : 83m³</div>
|
|
||||||
<div className={cls.info__item}>电 耗 量 : 52kWh</div>
|
|
||||||
<div className={cls.info__item}>天 然 气 II: 32m³</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TechSplitline />
|
<TechSplitline />
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
background: url(../../../assets/energy.png) no-repeat;
|
background: url(../../../assets/energy.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
width: 626px;
|
width: 626px;
|
||||||
height: 400px;
|
height: 460px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cost__info {
|
.cost__info {
|
||||||
@@ -18,12 +18,9 @@
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
color: hsl(0, 0%, 100%, 0.9);
|
color: hsl(0, 0%, 100%, 0.9);
|
||||||
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
|
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
|
||||||
// width: 288px;
|
font-size: 14px;
|
||||||
height: 43px;
|
|
||||||
font-size: 20px;
|
|
||||||
letter-spacing: 1.43px;
|
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
text-align: center;
|
padding-left: 12px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,46 +1,20 @@
|
|||||||
import GraphBase from "../../Common/GraphBase";
|
import GraphBase from "../../Common/GraphBase";
|
||||||
import "./index.module.scss";
|
import "./index.module.scss";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
import { ScrollBoard } from "@jiaminghi/data-view-react";
|
import { ScrollBoard } from "@jiaminghi/data-view-react";
|
||||||
|
|
||||||
function getRandomRow() {
|
|
||||||
const idx = Math.ceil(Math.random() * 100);
|
|
||||||
return [idx, `${idx}#风机`, Math.ceil(Math.random() * 2) - 1];
|
|
||||||
}
|
|
||||||
|
|
||||||
function getRandomRows(rows) {
|
|
||||||
return Array(rows)
|
|
||||||
.fill(0)
|
|
||||||
.map(() => getRandomRow());
|
|
||||||
}
|
|
||||||
|
|
||||||
// let data = [
|
|
||||||
// [1, '1#风机', 1], // 1 正常 2 故障 0 离线
|
|
||||||
// [2, '2#风机', 1],
|
|
||||||
// [3, '3#风机', 1],
|
|
||||||
// [4, '4#风机', 0],
|
|
||||||
// [5, '5#风机', 1],
|
|
||||||
// [6, '6#风机', 1],
|
|
||||||
// [7, '7#风机', 0],
|
|
||||||
// [8, '8#风机', 1],
|
|
||||||
// [9, '9#风机', 1],
|
|
||||||
// [10, '10#风机', 1],
|
|
||||||
// ];
|
|
||||||
|
|
||||||
// let header = ['序号', '风机名称', '故障情况'];
|
|
||||||
|
|
||||||
function attachStyle(data) {
|
function attachStyle(data) {
|
||||||
return data.map((arr) => {
|
return data.map((arr) => {
|
||||||
return arr.map((item, index) => {
|
return arr.map((item, index) => {
|
||||||
if (index == arr.length - 1) {
|
if (index == arr.length - 1) {
|
||||||
return `<div style="display: flex; align-items: center">
|
return `<div style="display: flex; align-items: center">
|
||||||
<span style="box-shadow: 0 0 4px 4px ${
|
<span style="box-shadow: 0 0 4px 4px ${
|
||||||
item == 1 ? "#2760ff55" : "#a81b2655"
|
item == 1 ? "#2760ff55" : item == 0 ? "#a81b2655" : "#E6A23C55"
|
||||||
}; margin-right: 8px; width: 8px; height: 8px; border-radius: 8px; background: ${
|
}; margin-right: 8px; width: 8px; height: 8px; border-radius: 8px; background: ${
|
||||||
item == 1 ? "#2760ff" : "#a81b26"
|
item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
|
||||||
}"></span><span style="color: ${item == 1 ? "#2760ff" : "#a81b26"}">${
|
}"></span><span style="color: ${
|
||||||
item == 1 ? "正常" : "故障"
|
item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
|
||||||
}</span></div>`;
|
}">${item == 1 ? "运行" : item == 0 ? "故障" : "未运行"}</span></div>`;
|
||||||
}
|
}
|
||||||
return `<span style='color: #fffa'>${item}</span>`;
|
return `<span style='color: #fffa'>${item}</span>`;
|
||||||
});
|
});
|
||||||
@@ -49,7 +23,17 @@ function attachStyle(data) {
|
|||||||
|
|
||||||
function FanInfo(props) {
|
function FanInfo(props) {
|
||||||
const rowNum = props.rows || 8;
|
const rowNum = props.rows || 8;
|
||||||
let data = getRandomRows(100);
|
// 默认使用风机信息，可以使用 source 来调整该组件使用 annealFanInfo 的数据
|
||||||
|
const fanInfo = useSelector((state) => state[props.source ?? "fanInfo"].data);
|
||||||
|
|
||||||
|
const data = Object.keys(fanInfo).map((key, index) => {
|
||||||
|
return [
|
||||||
|
index + 1,
|
||||||
|
key,
|
||||||
|
fanInfo[key] == "运行" ? 1 : fanInfo[key] == "故障" ? 0 : 2,
|
||||||
|
];
|
||||||
|
});
|
||||||
|
const dataRight = [...data.slice(rowNum), ...data.slice(0, rowNum)];
|
||||||
|
|
||||||
let config = {
|
let config = {
|
||||||
headerBGC: "rgba(4, 44, 76, 0.3)",
|
headerBGC: "rgba(4, 44, 76, 0.3)",
|
||||||
@@ -60,11 +44,10 @@ function FanInfo(props) {
|
|||||||
],
|
],
|
||||||
oddRowBGC: "#042444",
|
oddRowBGC: "#042444",
|
||||||
evenRowBGC: "#042c4c",
|
evenRowBGC: "#042c4c",
|
||||||
columnWidth: [70, 96],
|
// columnWidth: data.length > 12 ? [50, 136] : [88, 256],
|
||||||
|
columnWidth: [50, 136],
|
||||||
rowNum,
|
rowNum,
|
||||||
// headerHeight: 40,
|
hoverPause: true,
|
||||||
hoverPause: false,
|
|
||||||
// data: replaceStyle(data, 0.7),
|
|
||||||
data: attachStyle(data),
|
data: attachStyle(data),
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -78,7 +61,9 @@ function FanInfo(props) {
|
|||||||
className="flex"
|
className="flex"
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
flex: 1,
|
||||||
gap: "20px",
|
gap: "20px",
|
||||||
|
// gap: data.length > 12 ? "20px" : 0,
|
||||||
height: "100%",
|
height: "100%",
|
||||||
position: "relative",
|
position: "relative",
|
||||||
}}
|
}}
|
||||||
@@ -86,9 +71,15 @@ function FanInfo(props) {
|
|||||||
<div className="flex-1" style={{ flex: 1 }}>
|
<div className="flex-1" style={{ flex: 1 }}>
|
||||||
<ScrollBoard
|
<ScrollBoard
|
||||||
config={config}
|
config={config}
|
||||||
style={{ width: "280px", height: "100%" }}
|
style={{
|
||||||
|
width: "280px",
|
||||||
|
// width: data.length > 12 ? "280px" : "100%",
|
||||||
|
height: "100%",
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
{/* {data.length > 12 && (
|
||||||
|
<> */}
|
||||||
<div
|
<div
|
||||||
className="verticalLine"
|
className="verticalLine"
|
||||||
style={{
|
style={{
|
||||||
@@ -103,10 +94,12 @@ function FanInfo(props) {
|
|||||||
></div>
|
></div>
|
||||||
<div className="flex-1" style={{ flex: 1 }}>
|
<div className="flex-1" style={{ flex: 1 }}>
|
||||||
<ScrollBoard
|
<ScrollBoard
|
||||||
config={config}
|
config={{ ...config, data: attachStyle(dataRight) }}
|
||||||
style={{ width: "280px", height: "100%" }}
|
style={{ width: "280px", height: "100%" }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
{/* </>
|
||||||
|
)} */}
|
||||||
</div>
|
</div>
|
||||||
</GraphBase>
|
</GraphBase>
|
||||||
);
|
);
|
||||||
|
|||||||
248
src/components/Common/FanInfoStretch/index.jsx
Normal file
248
src/components/Common/FanInfoStretch/index.jsx
Normal file
@@ -0,0 +1,248 @@
|
|||||||
|
import GraphBase from "../GraphBase";
|
||||||
|
import "./index.module.scss";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { ScrollBoard } from "@jiaminghi/data-view-react";
|
||||||
|
import { useMemo } from "react";
|
||||||
|
|
||||||
|
function attachStyle(data) {
|
||||||
|
return data.map((arr) => {
|
||||||
|
return arr.map((item, index) => {
|
||||||
|
if (index == arr.length - 1) {
|
||||||
|
return `<div style="display: flex; align-items: center">
|
||||||
|
<span style="box-shadow: 0 0 4px 4px ${
|
||||||
|
item == 1 ? "#2760ff55" : item == 0 ? "#a81b2655" : "#E6A23C55"
|
||||||
|
}; margin-right: 8px; width: 8px; height: 8px; border-radius: 8px; background: ${
|
||||||
|
item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
|
||||||
|
}"></span><span style="color: ${
|
||||||
|
item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
|
||||||
|
}">${item == 1 ? "运行" : item == 0 ? "故障" : "未运行"}</span></div>`;
|
||||||
|
}
|
||||||
|
return `<span style='color: #fffa'>${item}</span>`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function FanInfo(props) {
|
||||||
|
// 默认使用风机信息，可以使用 source 来调整该组件使用 annealFanInfo 的数据
|
||||||
|
const fanInfo = useSelector((state) => state[props.source ?? "fanInfo"].data);
|
||||||
|
|
||||||
|
const data = Object.keys(fanInfo).map((key, index) => {
|
||||||
|
return [
|
||||||
|
index + 1,
|
||||||
|
key,
|
||||||
|
fanInfo[key] == "运行" ? 1 : fanInfo[key] == "故障" ? 0 : 2,
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
const y61 = useMemo(
|
||||||
|
() => data.filter((item) => item[1].startsWith("1#")) || [],
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
const y62 = useMemo(
|
||||||
|
() => data.filter((item) => item[1].startsWith("2#")) || [],
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
const y63 = useMemo(
|
||||||
|
() => data.filter((item) => item[1].startsWith("3#")) || [],
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
const y64 = useMemo(
|
||||||
|
() => data.filter((item) => item[1].startsWith("4#")) || [],
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
const y65 = useMemo(
|
||||||
|
() => data.filter((item) => item[1].startsWith("5#")) || [],
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
const y66 = useMemo(() => [...y65.slice(5), ...y65.slice(0, 5)], [y65]);
|
||||||
|
|
||||||
|
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/>',
|
||||||
|
],
|
||||||
|
oddRowBGC: "#042444",
|
||||||
|
evenRowBGC: "#042c4c",
|
||||||
|
// columnWidth: data.length > 12 ? [50, 136] : [88, 256],
|
||||||
|
columnWidth: [50, 136],
|
||||||
|
rowNum: 6,
|
||||||
|
hoverPause: true,
|
||||||
|
data: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<GraphBase
|
||||||
|
icon="kiln"
|
||||||
|
title="风机信息"
|
||||||
|
size={props.longBg ? ["middle", "full"] : ["middle", "short"]}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateRows: "auto 2px auto 2px auto",
|
||||||
|
gap: "4px",
|
||||||
|
// height: "100%",
|
||||||
|
position: "relative",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="" style={{ display: "flex", gap: "8px" }}>
|
||||||
|
<div>
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontSize: "16px",
|
||||||
|
fontWeight: 400,
|
||||||
|
textAlign: "center",
|
||||||
|
letterSpacing: "2px",
|
||||||
|
color: "#fff",
|
||||||
|
background: "#012041",
|
||||||
|
padding: "4px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
产线Y61
|
||||||
|
</h1>
|
||||||
|
<ScrollBoard
|
||||||
|
key="y61"
|
||||||
|
config={{ ...config, data: attachStyle(y61) }}
|
||||||
|
style={{
|
||||||
|
width: "280px",
|
||||||
|
height: "280px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontSize: "16px",
|
||||||
|
fontWeight: 400,
|
||||||
|
textAlign: "center",
|
||||||
|
letterSpacing: "2px",
|
||||||
|
color: "#fff",
|
||||||
|
background: "#012041",
|
||||||
|
padding: "4px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
产线Y62
|
||||||
|
</h1>
|
||||||
|
<ScrollBoard
|
||||||
|
key="y62"
|
||||||
|
config={{ ...config, data: attachStyle(y62) }}
|
||||||
|
style={{
|
||||||
|
width: "280px",
|
||||||
|
height: "280px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="horizontalLine"
|
||||||
|
style={{
|
||||||
|
height: "2px",
|
||||||
|
background:
|
||||||
|
"radial-gradient(ellipse, #15E8F563, #15E8F599, transparent, transparent)",
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div className="" style={{ display: "flex", gap: "8px" }}>
|
||||||
|
<div>
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontSize: "16px",
|
||||||
|
fontWeight: 400,
|
||||||
|
textAlign: "center",
|
||||||
|
letterSpacing: "2px",
|
||||||
|
color: "#fff",
|
||||||
|
background: "#012041",
|
||||||
|
padding: "4px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
产线Y63
|
||||||
|
</h1>
|
||||||
|
<ScrollBoard
|
||||||
|
key="y63"
|
||||||
|
config={{ ...config, data: attachStyle(y63) }}
|
||||||
|
style={{
|
||||||
|
width: "280px",
|
||||||
|
height: "280px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{/* <div style={{ display: "flex", flexDirection: "column" }}> */}
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontSize: "16px",
|
||||||
|
fontWeight: 400,
|
||||||
|
textAlign: "center",
|
||||||
|
letterSpacing: "2px",
|
||||||
|
color: "#fff",
|
||||||
|
background: "#012041",
|
||||||
|
padding: "4px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
产线Y64
|
||||||
|
</h1>
|
||||||
|
<ScrollBoard
|
||||||
|
key="y64"
|
||||||
|
config={{ ...config, data: attachStyle(y64) }}
|
||||||
|
style={{
|
||||||
|
width: "280px",
|
||||||
|
height: "280px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="horizontalLine"
|
||||||
|
style={{
|
||||||
|
height: "2px",
|
||||||
|
background:
|
||||||
|
"radial-gradient(ellipse, #15E8F563, #15E8F599, transparent, transparent)",
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className=""
|
||||||
|
style={{ height: "240px", display: "flex", flexDirection: "column" }}
|
||||||
|
>
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontSize: "16px",
|
||||||
|
fontWeight: 400,
|
||||||
|
textAlign: "center",
|
||||||
|
letterSpacing: "2px",
|
||||||
|
color: "#fff",
|
||||||
|
background: "#012041",
|
||||||
|
padding: "4px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
产线Y65
|
||||||
|
</h1>
|
||||||
|
<div style={{ flex: 1, height: "1px", display: "flex", gap: "4px" }}>
|
||||||
|
<ScrollBoard
|
||||||
|
key="y65"
|
||||||
|
config={{ ...config, data: attachStyle(y65), rowNum: 5 }}
|
||||||
|
style={{
|
||||||
|
width: "280px",
|
||||||
|
height: "220px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ScrollBoard
|
||||||
|
key="y66"
|
||||||
|
config={{ ...config, data: attachStyle(y66), rowNum: 5 }}
|
||||||
|
style={{
|
||||||
|
width: "280px",
|
||||||
|
height: "220px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</GraphBase>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FanInfo;
|
||||||
50
src/components/Common/FanInfoStretch/index.module.scss
Normal file
50
src/components/Common/FanInfoStretch/index.module.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,20 +1,71 @@
|
|||||||
// FanRunFrequence
|
// FanRunFrequence
|
||||||
import cls from "./index.module.css";
|
import cls from "./index.module.css";
|
||||||
import ReactECharts from "echarts-for-react";
|
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import { Switch } from "antd";
|
|
||||||
import GraphBase from "../../Common/GraphBase";
|
import GraphBase from "../../Common/GraphBase";
|
||||||
import { useState, useContext } from "react";
|
import { useState } from "react";
|
||||||
// import SocketContext from '../../../store/socket-data-provider';
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
function WindFrequence(props) {
|
function WindFrequence(props) {
|
||||||
const [showChart, setShowChart] = useState(true);
|
const [showChart, setShowChart] = useState(false);
|
||||||
// const { runState, hisState } = useContext(SocketContext);
|
const runState = useSelector((state) => state.fanFrequence.runtime);
|
||||||
|
const hisState = useSelector((state) => state.fanFrequence.history);
|
||||||
|
|
||||||
const runState = null;
|
const [options, dataList] = getOptions(showChart, hisState, runState);
|
||||||
const hisState = null;
|
|
||||||
|
|
||||||
let dataList = [];
|
function handleSwitchChange(val) {
|
||||||
|
if (val) {
|
||||||
|
setShowChart(true);
|
||||||
|
} else {
|
||||||
|
setShowChart(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<GraphBase
|
||||||
|
icon="smoke"
|
||||||
|
title="风机运行频率"
|
||||||
|
size={["middle", "long"]}
|
||||||
|
switchOptions={false}
|
||||||
|
switchPosition={[null, 200]} // [top, left]
|
||||||
|
onSwitch={handleSwitchChange}
|
||||||
|
>
|
||||||
|
<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}
|
||||||
|
style={{ padding: props.stretch ? "16px 0" : "" }}
|
||||||
|
>
|
||||||
|
<span className={cls.fanName}>{item.name}</span>
|
||||||
|
<span
|
||||||
|
className={cls.fanValue}
|
||||||
|
style={{
|
||||||
|
fontWeight: 700,
|
||||||
|
letterSpacing: 1,
|
||||||
|
fontSize: 16,
|
||||||
|
// color: "#e03537",
|
||||||
|
color: "#24aebb",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.value}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</GraphBase>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default WindFrequence;
|
||||||
|
|
||||||
|
function getOptions(showChart, hisState, runState) {
|
||||||
|
let dataList = null;
|
||||||
let seriesData = [];
|
let seriesData = [];
|
||||||
const colors = [
|
const colors = [
|
||||||
"#12FFF5",
|
"#12FFF5",
|
||||||
@@ -29,20 +80,15 @@ function WindFrequence(props) {
|
|||||||
let options = null;
|
let options = null;
|
||||||
if (showChart) {
|
if (showChart) {
|
||||||
// keys() 结果不是按照顺序，需要 sort()
|
// keys() 结果不是按照顺序，需要 sort()
|
||||||
seriesData = hisState?.combustionAir
|
seriesData =
|
||||||
? Object.keys(hisState.combustionAir)
|
hisState != null
|
||||||
|
? Object.keys(hisState)
|
||||||
.sort()
|
.sort()
|
||||||
.map((key) => hisState.combustionAir[key])
|
.map((key) => hisState[key])
|
||||||
: Array(8)
|
: Array(8)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map((_) => Array(7).fill(0));
|
.map((_) => Array(7).fill(0));
|
||||||
|
|
||||||
// debug
|
|
||||||
console.log(
|
|
||||||
"助燃风 chart series data",
|
|
||||||
hisState?.combustionAir,
|
|
||||||
seriesData
|
|
||||||
);
|
|
||||||
options = {
|
options = {
|
||||||
color: colors,
|
color: colors,
|
||||||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
||||||
@@ -104,9 +150,10 @@ function WindFrequence(props) {
|
|||||||
symbol: "circle",
|
symbol: "circle",
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: colors[i] + "40" },
|
// i % 8 避免超过8个数据时无颜色的问题
|
||||||
{ offset: 0.5, color: colors[i] + "20" },
|
{ offset: 0, color: colors[i % 8] + "40" },
|
||||||
{ offset: 1, color: colors[i] + "00" },
|
{ offset: 0.5, color: colors[i % 8] + "20" },
|
||||||
|
{ offset: 1, color: colors[i % 8] + "00" },
|
||||||
]),
|
]),
|
||||||
},
|
},
|
||||||
})),
|
})),
|
||||||
@@ -115,27 +162,12 @@ function WindFrequence(props) {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
dataList = runState?.combustionAirPressureArr
|
dataList =
|
||||||
? [
|
runState != null
|
||||||
{ id: 1, name: "1#风机", value: "0m³/h" },
|
? Object.keys(runState).map((fan) => ({
|
||||||
{ id: 2, name: "2#风机", value: "0m³/h" },
|
id: Math.random(),
|
||||||
{ id: 3, name: "3#风机", value: "0m³/h" },
|
name: fan,
|
||||||
{ id: 4, name: "4#风机", value: "0m³/h" },
|
value: (+runState[fan])?.toFixed(2),
|
||||||
{ 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" },
|
|
||||||
{ id: 9, name: "9#风机", value: "0m³/h" },
|
|
||||||
{ id: 10, name: "10#风机", value: "0m³/h" },
|
|
||||||
{ id: 11, name: "11#风机", value: "0m³/h" },
|
|
||||||
{ id: 12, name: "12#风机", value: "0m³/h" },
|
|
||||||
{ id: 13, name: "13#风机", value: "0m³/h" },
|
|
||||||
{ id: 14, name: "14#风机", value: "0m³/h" },
|
|
||||||
{ id: 15, name: "15#风机", value: "0m³/h" },
|
|
||||||
{ id: 16, name: "16#风机", value: "0m³/h" },
|
|
||||||
].map((item, index) => ({
|
|
||||||
...item,
|
|
||||||
value: runState.combustionAirPressureArr[index] ?? "/",
|
|
||||||
}))
|
}))
|
||||||
: [
|
: [
|
||||||
{ id: 1, name: "1#风机", value: "0m³/h" },
|
{ id: 1, name: "1#风机", value: "0m³/h" },
|
||||||
@@ -157,38 +189,5 @@ function WindFrequence(props) {
|
|||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSwitchChange(val) {
|
return [options, dataList];
|
||||||
if (val) {
|
|
||||||
setShowChart(true);
|
|
||||||
} else {
|
|
||||||
setShowChart(false);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
return (
|
|
||||||
<GraphBase
|
|
||||||
icon="kiln"
|
|
||||||
title="风机运行频率"
|
|
||||||
size={["middle", "long"]}
|
|
||||||
switchOptions={true}
|
|
||||||
switchPosition={[null, 200]} // [top, left]
|
|
||||||
onSwitch={handleSwitchChange}
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
</GraphBase>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default WindFrequence;
|
|
||||||
|
|||||||
@@ -12,11 +12,15 @@
|
|||||||
|
|
||||||
.listItem {
|
.listItem {
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
padding: 9px 0;
|
padding: 10px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
|
box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headWidget {
|
.headWidget {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 22px;
|
top: 22px;
|
||||||
@@ -31,3 +35,18 @@
|
|||||||
.relative {
|
.relative {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fanName {
|
||||||
|
text-align: right;
|
||||||
|
flex: 7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fanValue {
|
||||||
|
flex: 3;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|||||||
16
src/components/Common/Feeder/feeder.css
Normal file
16
src/components/Common/Feeder/feeder.css
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
.feeder {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feeder-running {
|
||||||
|
background: url(../../../assets/online.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.feeder-stop {
|
||||||
|
background: url(../../../assets/offline.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.feeder-error {
|
||||||
|
background: url(../../../assets/offline.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
104
src/components/Common/Feeder/index.jsx
Normal file
104
src/components/Common/Feeder/index.jsx
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import "./feeder.css";
|
||||||
|
|
||||||
|
function FeederStatus(props) {
|
||||||
|
const feeder = useSelector((state) => state.feeder);
|
||||||
|
const rightFeeder = feeder.rightFeeder;
|
||||||
|
const leftFeeder = feeder.leftFeeder;
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="feeder"
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
bottom: "56px",
|
||||||
|
left: "740px",
|
||||||
|
width: "400px",
|
||||||
|
height: "128px",
|
||||||
|
zIndex: "-1",
|
||||||
|
display: "flex",
|
||||||
|
gap: "8px",
|
||||||
|
paddingTop: "12px",
|
||||||
|
justifyContent: "center",
|
||||||
|
...props.style,
|
||||||
|
}}
|
||||||
|
animate={{
|
||||||
|
opacity: [0, 0, 0, 0.6, 1],
|
||||||
|
transition: { duration: 0.3, delay: 2 },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
color: "#6be1e1",
|
||||||
|
top: "-32px",
|
||||||
|
left: "20px",
|
||||||
|
fontSize: "22px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
1#投料{" "}
|
||||||
|
<b
|
||||||
|
style={{
|
||||||
|
fontWeight: 400,
|
||||||
|
color:
|
||||||
|
leftFeeder == "故障"
|
||||||
|
? "#f83a35"
|
||||||
|
: leftFeeder == "运行"
|
||||||
|
? "#9af72b"
|
||||||
|
: "#ccc",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{leftFeeder}
|
||||||
|
</b>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
color: "#6be1e1",
|
||||||
|
top: "-32px",
|
||||||
|
left: "230px",
|
||||||
|
fontSize: "22px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
2#投料{" "}
|
||||||
|
<b
|
||||||
|
style={{
|
||||||
|
fontWeight: 400,
|
||||||
|
color:
|
||||||
|
rightFeeder == "故障"
|
||||||
|
? "#f83a35"
|
||||||
|
: rightFeeder == "运行"
|
||||||
|
? "#9af72b"
|
||||||
|
: "#ccc",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{rightFeeder}
|
||||||
|
</b>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`
|
||||||
|
feeder ${
|
||||||
|
leftFeeder == "运行"
|
||||||
|
? "feeder-running"
|
||||||
|
: leftFeeder == "故障"
|
||||||
|
? "feeder-error"
|
||||||
|
: "feeder-stop"
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
></span>
|
||||||
|
<span
|
||||||
|
className={`
|
||||||
|
feeder ${
|
||||||
|
rightFeeder == "运行"
|
||||||
|
? "feeder-running"
|
||||||
|
: rightFeeder == "故障"
|
||||||
|
? "feeder-error"
|
||||||
|
: "feeder-stop"
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
></span>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FeederStatus;
|
||||||
143
src/components/Common/ForecastTemperature/index.jsx
Normal file
143
src/components/Common/ForecastTemperature/index.jsx
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
import cls from "./leftbox.module.scss";
|
||||||
|
import React, { useState, useContext, useEffect } from "react";
|
||||||
|
import { useSelector, useDispatch } from "react-redux";
|
||||||
|
|
||||||
|
import icon1 from "../../../assets/CenterChart1icon1.svg";
|
||||||
|
import icon2 from "../../../assets/CenterChart1icon2.svg";
|
||||||
|
import icon3 from "../../../assets/CenterChart1icon3.svg";
|
||||||
|
import icon4 from "../../../assets/CenterChart1icon4.svg";
|
||||||
|
// import icon4 from "../../../assets/CenterChart2icon4.svg";
|
||||||
|
|
||||||
|
import useTimeCounter from "../../../hooks/useTimeCounter";
|
||||||
|
|
||||||
|
const FireInfo = () => {
|
||||||
|
// const dispatch = useDispatch();
|
||||||
|
const KilnInfo = useSelector((state) => state.kiln);
|
||||||
|
// const time = KilnInfo.lastFireChangeTime || "0分0秒";
|
||||||
|
// const minsec = useTimeCounter(time);
|
||||||
|
// let [min, sec] = [0, 0];
|
||||||
|
// if (minsec) {
|
||||||
|
// min = minsec[0];
|
||||||
|
// sec = minsec[1];
|
||||||
|
// }
|
||||||
|
// useEffect(() => {
|
||||||
|
// const restTime = ctx?.runState?.lastFireChangeTime;
|
||||||
|
// if (restTime == null) return;
|
||||||
|
// 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]);
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// setInterval(() => {
|
||||||
|
// dispatch({
|
||||||
|
// type: "fireInfo/setFireInfo",
|
||||||
|
// payload: {
|
||||||
|
// fireChangeTime: `${Math.ceil(Math.random() * 10)}:${Math.ceil(
|
||||||
|
// Math.random() * 10
|
||||||
|
// )}`,
|
||||||
|
// fireDirection: Math.random * 10 < 5 ? "东火" : "西火",
|
||||||
|
// lastFireChangeTime: `${Math.ceil(Math.random() * 60)}分${Math.ceil(
|
||||||
|
// Math.random() * 50
|
||||||
|
// )}秒`,
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// }, 10000);
|
||||||
|
// }, []);
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
icon: icon1,
|
||||||
|
label: "泡界线",
|
||||||
|
// value: ctx?.runState?.fireChangeTime || "00:00",
|
||||||
|
// value: KilnInfo.fireChangeTime || "00:00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: icon2,
|
||||||
|
label: "磴顶加权温度",
|
||||||
|
// value: `${time[0]}分${time[1]}秒`,
|
||||||
|
value: KilnInfo.topTemp|| "℃",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: icon3,
|
||||||
|
label: "液位",
|
||||||
|
// value: ctx?.runState?.fireDirection || "东火",
|
||||||
|
value: KilnInfo.liquidLevel || "0",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: icon4,
|
||||||
|
label: "池底加权温度",
|
||||||
|
// value: ctx?.runState?.fireDirection || "东火",
|
||||||
|
value: KilnInfo.meltTemp || "℃",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`${cls.leftbox}`}>
|
||||||
|
{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 FireInfo;
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
.leftbox {
|
||||||
|
// height: 128px;
|
||||||
|
height: 230px;
|
||||||
|
display: flex;
|
||||||
|
width: 640px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.box {
|
||||||
|
margin-right: 16px;
|
||||||
|
width: 272px;
|
||||||
|
height: 100px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: url(../../../assets/CenterChart2ItemBg.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
align-items: flex-start;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
.box__inner {
|
||||||
|
padding-top: 12px;
|
||||||
|
margin-left: 20px;
|
||||||
|
|
||||||
|
.box__label {
|
||||||
|
color: #fffa;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box__value {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 8px;
|
||||||
|
font-size: 34px;
|
||||||
|
line-height: 54px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,148 +1,20 @@
|
|||||||
// 助燃风流量
|
// 助燃风流量
|
||||||
import cls from './index.module.css';
|
import cls from "./index.module.css";
|
||||||
import BottomBarItem from '../BottomItemBackground';
|
import BottomBarItem from "../BottomItemBackground";
|
||||||
import ReactECharts from 'echarts-for-react';
|
import ReactECharts from "echarts-for-react";
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from "echarts";
|
||||||
import { randomInt } from '../../../utils';
|
import { Switch } from "antd";
|
||||||
import { Switch } from 'antd';
|
import { useState, useEffect } from "react";
|
||||||
import { useState, useContext } from 'react';
|
import { useSelector, useDispatch } from "react-redux";
|
||||||
// import SocketContext from '../../../store/socket-data-provider';
|
import dayjs from "dayjs";
|
||||||
|
|
||||||
|
/** 助燃风流量 */
|
||||||
function GasI(props) {
|
function GasI(props) {
|
||||||
const [showChart, setShowChart] = useState(true);
|
const [showChart, setShowChart] = useState(true);
|
||||||
// const { runState, hisState } = useContext(SocketContext);
|
const runState = useSelector((state) => state.combustionAir.runtime);
|
||||||
|
const hisState = useSelector((state) => state.combustionAir.history);
|
||||||
|
|
||||||
const runState = null;
|
let [options, dataList] = getOptions(showChart, hisState, runState);
|
||||||
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) {
|
function handleSwitchChange(val) {
|
||||||
if (val) {
|
if (val) {
|
||||||
@@ -151,10 +23,17 @@ function GasI(props) {
|
|||||||
setShowChart(false);
|
setShowChart(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const desc =
|
||||||
|
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
|
||||||
|
" - " +
|
||||||
|
dayjs().subtract(1, "day").format("YYYY.MM.DD");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BottomBarItem
|
<BottomBarItem
|
||||||
icon="pause"
|
icon="pause"
|
||||||
title="助燃风流量"
|
title="助燃风流量"
|
||||||
|
desc={desc}
|
||||||
className={cls.gas}
|
className={cls.gas}
|
||||||
style={props.style}
|
style={props.style}
|
||||||
>
|
>
|
||||||
@@ -168,13 +47,15 @@ function GasI(props) {
|
|||||||
|
|
||||||
<div className={cls.chart}>
|
<div className={cls.chart}>
|
||||||
{showChart && (
|
{showChart && (
|
||||||
<ReactECharts option={options} style={{ height: '100%' }} />
|
<ReactECharts option={options} style={{ height: "100%" }} />
|
||||||
)}
|
)}
|
||||||
{!showChart && (
|
{!showChart && (
|
||||||
<div className={cls.gridList}>
|
<div className={cls.gridList}>
|
||||||
{dataList.map((item) => (
|
{dataList.map((item) => (
|
||||||
<div key={item.id} className={cls.listItem}>
|
<div key={item.id} className={cls.listItem}>
|
||||||
{item.name}: {item.value}
|
<span className={cls.item_label}>{item.name}</span>
|
||||||
|
<span className={cls.item_value}>{item.value}</span>
|
||||||
|
{/* {item.name}: {item.value} */}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -185,3 +66,158 @@ function GasI(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default GasI;
|
export default GasI;
|
||||||
|
|
||||||
|
function getOptions(showChart, hisState, runState) {
|
||||||
|
const colors = [
|
||||||
|
"#12FFF5",
|
||||||
|
"#2760FF",
|
||||||
|
"#FFD160",
|
||||||
|
"#E80091",
|
||||||
|
"#8064ff",
|
||||||
|
"#ff8a3b",
|
||||||
|
"#8cd26d",
|
||||||
|
"#2aa1ff",
|
||||||
|
];
|
||||||
|
let seriesData = null;
|
||||||
|
let dataList = null;
|
||||||
|
let options = null;
|
||||||
|
|
||||||
|
if (showChart) {
|
||||||
|
// keys() 结果不是按照顺序，需要 sort()
|
||||||
|
seriesData =
|
||||||
|
hisState != null
|
||||||
|
? Object.keys(hisState)
|
||||||
|
.sort()
|
||||||
|
.map((key) => hisState[key])
|
||||||
|
: Array(8)
|
||||||
|
.fill(1)
|
||||||
|
.map((_) => Array(7).fill(0));
|
||||||
|
|
||||||
|
options = {
|
||||||
|
color: colors,
|
||||||
|
grid: { top: 36, 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 + 1) * 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,
|
||||||
|
},
|
||||||
|
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",
|
||||||
|
symbolSize: 6,
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// position: "top",
|
||||||
|
// distance: 10,
|
||||||
|
// color: "#fffc",
|
||||||
|
// },
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: colors[i % colors.length] + "40" },
|
||||||
|
{ offset: 0.5, color: colors[i % colors.length] + "20" },
|
||||||
|
{ offset: 1, color: colors[i % colors.length] + "00" },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
},
|
||||||
|
className: "xc-chart-tooltip",
|
||||||
|
// backgroundColor: ''
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
dataList =
|
||||||
|
runState != null
|
||||||
|
? [
|
||||||
|
{ 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[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" },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return [options, dataList];
|
||||||
|
}
|
||||||
|
|||||||
@@ -26,9 +26,10 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
/* background: #00ee33; */
|
/* background: #00ee33; */
|
||||||
top: 20px;
|
top: 20px;
|
||||||
|
left: 180px;
|
||||||
right: 24px;
|
right: 24px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 190px;
|
width: 128px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -62,7 +63,21 @@
|
|||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
|
box-shadow: inset 0 0 12px 2px rgba(255, 255, 255, 0.197);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_label {
|
||||||
|
flex: 5;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_value {
|
||||||
|
flex: 4;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headWidget {
|
.headWidget {
|
||||||
|
|||||||
@@ -1,34 +1,36 @@
|
|||||||
// TODO: 通用组件 - 按钮 菜单控制层
|
// TODO: 通用组件 - 按钮 菜单控制层
|
||||||
import useIcon from '../../../hooks/useIcon';
|
import useIcon from "../../../hooks/useIcon";
|
||||||
import cls from './index.module.css';
|
import cls from "./index.module.css";
|
||||||
import { useMemo, useState } from 'react';
|
import { useMemo, useState } from "react";
|
||||||
import { Switch, Radio } from 'antd';
|
import { Switch, Select } from "antd";
|
||||||
|
import "./selector.style.overwrite.css";
|
||||||
|
import triangle from "../../../assets/Icon/triangle.svg";
|
||||||
|
|
||||||
function choseBg(size) {
|
function choseBg(size) {
|
||||||
const [width, height] = size;
|
const [width, height] = size;
|
||||||
return width === 'long' && height === 'middle'
|
return width === "long" && height === "middle"
|
||||||
? 'long-middle'
|
? "long-middle"
|
||||||
: width === 'long' && height === 'short'
|
: width === "long" && height === "short"
|
||||||
? 'long-short'
|
? "long-short"
|
||||||
: width === 'short' && height === 'middle'
|
: width === "short" && height === "middle"
|
||||||
? 'short-middle'
|
? "short-middle"
|
||||||
: width === 'short' && height === 'short'
|
: width === "short" && height === "short"
|
||||||
? 'short-short'
|
? "short-short"
|
||||||
: width === 'short' && height === 'long'
|
: width === "short" && height === "long"
|
||||||
? 'short-long'
|
? "short-long"
|
||||||
: width === 'middle' && height === 'middle'
|
: width === "middle" && height === "middle"
|
||||||
? 'middle-middle'
|
? "middle-middle"
|
||||||
: width === 'middle' && height === 'short'
|
: width === "middle" && height === "short"
|
||||||
? 'middle-short'
|
? "middle-short"
|
||||||
: width === 'middle' && height === 'long'
|
: width === "middle" && height === "long"
|
||||||
? 'middle-long'
|
? "middle-long"
|
||||||
: width === 'middle' && height === 'full'
|
: width === "middle" && height === "full"
|
||||||
? 'middle-full'
|
? "middle-full"
|
||||||
: 'middle-middle';
|
: "middle-middle";
|
||||||
}
|
}
|
||||||
|
|
||||||
function GraphBase(props) {
|
function GraphBase(props) {
|
||||||
const size = props.size || ['middle', 'middle'];
|
const size = props.size || ["middle", "middle"];
|
||||||
const bgClass = choseBg(size);
|
const bgClass = choseBg(size);
|
||||||
const {
|
const {
|
||||||
icon,
|
icon,
|
||||||
@@ -38,10 +40,13 @@ function GraphBase(props) {
|
|||||||
onSwitch,
|
onSwitch,
|
||||||
dateOptions,
|
dateOptions,
|
||||||
onDateChange,
|
onDateChange,
|
||||||
|
defaultSelect,
|
||||||
|
selectWidth,
|
||||||
legend,
|
legend,
|
||||||
} = props;
|
} = props;
|
||||||
|
const descSmall = props.descSmall || false;
|
||||||
const iconSrc = useIcon(icon);
|
const iconSrc = useIcon(icon);
|
||||||
const colors = useMemo(() => ['#ffd160', '#2760ff', '#15e8f5'], []);
|
const colors = useMemo(() => ["#ffd160", "#2760ff", "#15e8f5"], []);
|
||||||
const [showChart, setShowChart] = useState(true);
|
const [showChart, setShowChart] = useState(true);
|
||||||
|
|
||||||
let dto = null;
|
let dto = null;
|
||||||
@@ -50,16 +55,35 @@ function GraphBase(props) {
|
|||||||
if (props.switchPosition) {
|
if (props.switchPosition) {
|
||||||
props.switchPosition.forEach((item, index) => {
|
props.switchPosition.forEach((item, index) => {
|
||||||
if (item != null) {
|
if (item != null) {
|
||||||
switchStyle[index == 0 ? 'top' : 'left'] = item + 'px';
|
switchStyle[index == 0 ? "top" : "left"] = item + "px";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (dateOptions) {
|
if (dateOptions) {
|
||||||
dto = dateOptions.map((item) => (
|
dto = (
|
||||||
<Radio.Button value={item} key={item} className="radio-group__item">
|
<Select
|
||||||
{item}
|
defaultValue={defaultSelect || dateOptions[0]}
|
||||||
</Radio.Button>
|
style={{ width: selectWidth || 60 }}
|
||||||
));
|
popupClassName="xc-date-selector-menu"
|
||||||
|
className={cls.graphBaseDate + " " + cls.radioGroup}
|
||||||
|
options={dateOptions.map((item) => ({ label: item, value: item }))}
|
||||||
|
suffixIcon={<img src={triangle} alt="#" />}
|
||||||
|
notFoundContent={
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "calc(14px * var(--scale))",
|
||||||
|
lineHeight: 1,
|
||||||
|
paddingLeft: "calc(12px * var(--scale))",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
- 无 -
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
onChange={(value, option) => onDateChange(value)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSwitchChange(v) {
|
function handleSwitchChange(v) {
|
||||||
@@ -70,11 +94,11 @@ function GraphBase(props) {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={
|
className={
|
||||||
'graph-base ' +
|
"graph-base " +
|
||||||
cls[bgClass] +
|
cls[bgClass] +
|
||||||
' ' +
|
" " +
|
||||||
cls.graphBase +
|
cls.graphBase +
|
||||||
' ' +
|
" " +
|
||||||
props.className
|
props.className
|
||||||
}
|
}
|
||||||
style={{ ...props.style }}
|
style={{ ...props.style }}
|
||||||
@@ -82,9 +106,9 @@ function GraphBase(props) {
|
|||||||
<div className={cls.graphBaseTitle}>
|
<div className={cls.graphBaseTitle}>
|
||||||
<img src={iconSrc} alt="#" />
|
<img src={iconSrc} alt="#" />
|
||||||
<h2>{title}</h2>
|
<h2>{title}</h2>
|
||||||
|
{desc && <div className={`${cls.graphBaseDesc} ${descSmall ? cls.graphBaseDescSmall : ''}`}>{desc}</div>}
|
||||||
</div>
|
</div>
|
||||||
<div className={cls.graphBaseContent}>
|
<div className={cls.graphBaseContent}>
|
||||||
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
|
|
||||||
{switchOptions && (
|
{switchOptions && (
|
||||||
<div className={cls.graphBaseSwitch} style={switchStyle}>
|
<div className={cls.graphBaseSwitch} style={switchStyle}>
|
||||||
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
|
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
|
||||||
@@ -105,16 +129,7 @@ function GraphBase(props) {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{dateOptions && (
|
{dateOptions && dto}
|
||||||
<Radio.Group
|
|
||||||
defaultValue={dateOptions[0]}
|
|
||||||
buttonStyle="solid"
|
|
||||||
className={cls.graphBaseDate + ' ' + cls.radioGroup}
|
|
||||||
onChange={({ target }) => onDateChange(target.value)}
|
|
||||||
>
|
|
||||||
{dto}
|
|
||||||
</Radio.Group>
|
|
||||||
)}
|
|
||||||
{props.children}
|
{props.children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -63,7 +63,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.graphBaseTitle > img {
|
.graphBaseTitle > img {
|
||||||
width: 20px;
|
width: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graphBaseTitle > h2 {
|
.graphBaseTitle > h2 {
|
||||||
@@ -72,7 +72,7 @@
|
|||||||
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
font-size: 20px;
|
font-size: 22px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -85,13 +85,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.graphBaseDesc {
|
.graphBaseDesc {
|
||||||
position: absolute;
|
margin-left: 8px;
|
||||||
|
/* position: absolute;
|
||||||
top: 25px;
|
top: 25px;
|
||||||
left: 150px;
|
left: 150px; */
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
color: #76fff9;
|
color: #76fff9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.graphBaseDescSmall {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #76fff9;
|
||||||
|
}
|
||||||
|
|
||||||
.graphBaseSwitch {
|
.graphBaseSwitch {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 30px;
|
top: 30px;
|
||||||
@@ -114,7 +120,7 @@
|
|||||||
|
|
||||||
.radioGroup * {
|
.radioGroup * {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 6px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radioGroup *:focus-within {
|
.radioGroup *:focus-within {
|
||||||
|
|||||||
38
src/components/Common/GraphBase/selector.style.overwrite.css
Normal file
38
src/components/Common/GraphBase/selector.style.overwrite.css
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
.xc-date-selector-menu {
|
||||||
|
background-color: #04233c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xc-date-selector-menu .ant-select-item {
|
||||||
|
color: #fff;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xc-date-selector-menu .ant-select-item-option-content {
|
||||||
|
text-align: center;
|
||||||
|
font-size: calc(14px * var(--scale));
|
||||||
|
}
|
||||||
|
|
||||||
|
.xc-date-selector-menu .ant-select-item-option-selected {
|
||||||
|
color: #fff !important;
|
||||||
|
background-color: #02457E !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-select-selector {
|
||||||
|
background-color: #02457E !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xc-date-selector-menu .ant-select-item-option {
|
||||||
|
/* padding: 5px 8px; */
|
||||||
|
padding: .3em .35em;
|
||||||
|
min-height: unset;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
.ant-select-selector::after {
|
||||||
|
content: '\25BC' !important;
|
||||||
|
visibility: visible !important; L
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 22px;
|
||||||
|
color: #04233c;
|
||||||
|
} */
|
||||||
@@ -1,60 +1,31 @@
|
|||||||
|
/*
|
||||||
|
* @Author: zhp
|
||||||
|
* @Date: 2024-08-20 14:08:32
|
||||||
|
* @LastEditTime: 2024-08-30 09:50:51
|
||||||
|
* @LastEditors: zhp
|
||||||
|
* @Description:
|
||||||
|
*/
|
||||||
import cls from "./kiln.module.scss";
|
import cls from "./kiln.module.scss";
|
||||||
import Container from "../../Container";
|
import Container from "../../Container";
|
||||||
import { useEffect } from "react";
|
import { useSelector } from "react-redux";
|
||||||
import { useSelector, useDispatch } from "react-redux";
|
|
||||||
import { stateNameMap } from "../../../store/features/kilnSlice";
|
import { stateNameMap } from "../../../store/features/kilnSlice";
|
||||||
|
|
||||||
export default function Kiln() {
|
export default function Kiln() {
|
||||||
const kilnInfo = useSelector((state) => state.kiln);
|
const kilnInfo = useSelector((state) => state.kiln);
|
||||||
const dispatch = useDispatch();
|
|
||||||
console.log("state: ", kilnInfo, stateNameMap);
|
|
||||||
|
|
||||||
const infos = Object.keys(kilnInfo).map((key) => ({
|
const infos = Object.keys(kilnInfo).map((key) => ({
|
||||||
label: stateNameMap[key],
|
label: stateNameMap[key],
|
||||||
value: kilnInfo[key],
|
value: kilnInfo[key],
|
||||||
}));
|
}));
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setInterval(() => {
|
|
||||||
dispatch({
|
|
||||||
type: "kiln/setKilnInfo",
|
|
||||||
payload: {
|
|
||||||
kilnPressure: Math.ceil(Math.random() * 100) + "Pa",
|
|
||||||
waterTemp: Math.ceil(Math.random() * 100) + "℃",
|
|
||||||
waterFlow: Math.ceil(Math.random() * 100) + "m³/h",
|
|
||||||
waterPressure: Math.ceil(Math.random() * 100) + "Pa",
|
|
||||||
combustionAirPressure: Math.ceil(Math.random() * 100) + "Pa",
|
|
||||||
topTemp: Math.ceil(Math.random() * 100) + "℃",
|
|
||||||
compressedAirPressure: Math.ceil(Math.random() * 100) + "Pa",
|
|
||||||
meltTemp: Math.ceil(Math.random() * 100) + "℃",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}, 30000);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// const infos = [
|
|
||||||
// { label: "窑炉压力", value: ctx?.runState?.kilnPressure || "0Pa" },
|
|
||||||
// { label: "循环水温度", value: ctx?.runState?.waterTemp || "0℃" },
|
|
||||||
// { label: "循环水流量", value: ctx?.runState?.waterFlow || "0㎡/h" },
|
|
||||||
// { label: "循环水压力", value: ctx?.runState?.waterPressure || "0Pa" },
|
|
||||||
// {
|
|
||||||
// label: "助燃风压力",
|
|
||||||
// value: ctx?.runState?.combustionAirPressure || "0℃",
|
|
||||||
// },
|
|
||||||
// { label: "碹顶加权温度", value: ctx?.runState?.topTemp || "0℃" },
|
|
||||||
// {
|
|
||||||
// label: "压缩气压力",
|
|
||||||
// value: ctx?.runState?.compressedAirPressure || "0Pa",
|
|
||||||
// },
|
|
||||||
// { label: "融化加权温度", value: ctx?.runState?.meltTemp || "0℃" },
|
|
||||||
// ];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
|
<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
|
||||||
<div className={cls.leftBar__top__content}>
|
<div className={cls.leftBar__top__content}>
|
||||||
{infos.map((item) => (
|
{infos.slice(0,infos.length-1).map((item) => (
|
||||||
<div key={item.label} className={cls.info__item}>
|
<div key={item.label} className={cls.info__item}>
|
||||||
{item.label}: {item.value}
|
<span className={cls.label}>{item.label}</span>
|
||||||
|
<span className={cls.value}>{item.value}</span>
|
||||||
|
{/* {item.label}: {item.value} */}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user