update
This commit is contained in:
lb
parent
31e065fa5a
commit
4fc0cf19e9
41
package-lock.json
generated
41
package-lock.json
generated
@ -65,6 +65,7 @@
|
||||
"style-loader": "^3.3.1",
|
||||
"tailwindcss": "^3.0.2",
|
||||
"terser-webpack-plugin": "^5.2.5",
|
||||
"uuid": "^9.0.1",
|
||||
"webpack": "^5.64.4",
|
||||
"webpack-dev-server": "^4.6.0",
|
||||
"webpack-manifest-plugin": "^4.0.2",
|
||||
@ -72,6 +73,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
||||
"@types/uuid": "^9.0.7",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^11.1.3",
|
||||
"typescript": "^5.3.3"
|
||||
@ -4786,6 +4788,12 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
|
||||
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
|
||||
},
|
||||
"node_modules/@types/uuid": {
|
||||
"version": "9.0.7",
|
||||
"resolved": "https://registry.npmmirror.com/@types/uuid/-/uuid-9.0.7.tgz",
|
||||
"integrity": "sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.5.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
|
||||
@ -17485,6 +17493,14 @@
|
||||
"websocket-driver": "^0.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/sockjs/node_modules/uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"bin": {
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/source-list-map": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
|
||||
@ -18785,9 +18801,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"version": "9.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-9.0.1.tgz",
|
||||
"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
|
||||
"bin": {
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
@ -23064,6 +23080,12 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
|
||||
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
|
||||
},
|
||||
"@types/uuid": {
|
||||
"version": "9.0.7",
|
||||
"resolved": "https://registry.npmmirror.com/@types/uuid/-/uuid-9.0.7.tgz",
|
||||
"integrity": "sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/ws": {
|
||||
"version": "8.5.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
|
||||
@ -32061,6 +32083,13 @@
|
||||
"faye-websocket": "^0.11.3",
|
||||
"uuid": "^8.3.2",
|
||||
"websocket-driver": "^0.7.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"source-list-map": {
|
||||
@ -33024,9 +33053,9 @@
|
||||
"integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
|
||||
},
|
||||
"uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
|
||||
"version": "9.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-9.0.1.tgz",
|
||||
"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
|
||||
},
|
||||
"v8-to-istanbul": {
|
||||
"version": "8.1.1",
|
||||
|
||||
@ -60,6 +60,7 @@
|
||||
"style-loader": "^3.3.1",
|
||||
"tailwindcss": "^3.0.2",
|
||||
"terser-webpack-plugin": "^5.2.5",
|
||||
"uuid": "^9.0.1",
|
||||
"webpack": "^5.64.4",
|
||||
"webpack-dev-server": "^4.6.0",
|
||||
"webpack-manifest-plugin": "^4.0.2",
|
||||
@ -90,6 +91,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
||||
"@types/uuid": "^9.0.7",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^11.1.3",
|
||||
"typescript": "^5.3.3"
|
||||
|
||||
@ -15,7 +15,7 @@ function App() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id="FullScreen" style={styles}>
|
||||
<div id="FullScreen" style={{ ...styles, overflow: "hidden" }}>
|
||||
<NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
|
||||
<Head />
|
||||
|
||||
|
||||
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 |
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 |
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;
|
||||
@ -38,9 +38,10 @@
|
||||
.TopSideLeftTxt {
|
||||
margin-right: 120px;
|
||||
margin-top: 15px;
|
||||
color: rgb(255, 255, 255, 0.8);
|
||||
color: rgb(255, 255, 255, 0.6);
|
||||
font-size: 20px;
|
||||
font-weight: 300px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 22.174976px;
|
||||
}
|
||||
}
|
||||
@ -77,9 +78,9 @@
|
||||
}
|
||||
|
||||
.TopTitleText {
|
||||
margin-top: 16px;
|
||||
margin-top: 40px;
|
||||
letter-spacing: 8px;
|
||||
font-size: 32px;
|
||||
font-size: 34px;
|
||||
color: #00fff7;
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
|
||||
@ -59,7 +59,7 @@ function WindFrequence(props) {
|
||||
|
||||
return (
|
||||
<GraphBase
|
||||
icon="pause"
|
||||
icon="temp"
|
||||
title="当前温度"
|
||||
dateOptions={["Y61", "Y62", "Y63", "Y64", "Y65"]}
|
||||
defaultSelect={dataSource}
|
||||
|
||||
@ -9,13 +9,18 @@ function EnergyCost(props) {
|
||||
if (energyInfo) {
|
||||
}
|
||||
return (
|
||||
<Container title="能耗" icon="charger" className={cls.energyCost} pending={true}>
|
||||
<Container
|
||||
title="能耗"
|
||||
icon="battery"
|
||||
className={cls.energyCost}
|
||||
pending={true}
|
||||
>
|
||||
<div className={`flex flex-col`}>
|
||||
<div className={`${cls.cost__info} flex`}>
|
||||
<div
|
||||
className={`${cls.info__item} flex flex-col justify-center items-center`}
|
||||
>
|
||||
<span style={{ fontSize: "18px" }}>余 热 发 电</span>
|
||||
<span style={{ fontSize: "22px" }}>余 热 发 电</span>
|
||||
<span>{energyInfo?.elecQty1 || 0}kWh</span>
|
||||
</div>
|
||||
<div className={cls.info__item_groups}>
|
||||
|
||||
@ -10,7 +10,62 @@ function WindFrequence(props) {
|
||||
const runState = useSelector((state) => state.fanFrequence.runtime);
|
||||
const hisState = useSelector((state) => state.fanFrequence.history);
|
||||
|
||||
let dataList = [];
|
||||
const [options, dataList] = getOptions(showChart, hisState, runState);
|
||||
|
||||
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 = [];
|
||||
const colors = [
|
||||
"#12FFF5",
|
||||
@ -134,54 +189,5 @@ function WindFrequence(props) {
|
||||
];
|
||||
}
|
||||
|
||||
function handleSwitchChange(val) {
|
||||
if (val) {
|
||||
setShowChart(true);
|
||||
} else {
|
||||
setShowChart(false);
|
||||
return [options, dataList];
|
||||
}
|
||||
}
|
||||
return (
|
||||
<GraphBase
|
||||
icon="kiln"
|
||||
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;
|
||||
|
||||
@ -7,45 +7,59 @@ import { Switch } from "antd";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
|
||||
// function mockData(type = "runtime") {
|
||||
// const RUNTIME_DATA_LENGTH = 8;
|
||||
// const MAX_HISTORY_DATA_LENGTH = 8;
|
||||
// const WEEK = 7;
|
||||
|
||||
// switch (type) {
|
||||
// case "runtime":
|
||||
// return [
|
||||
// ...Array.from(
|
||||
// { length: RUNTIME_DATA_LENGTH },
|
||||
// () => Math.floor(Math.random() * 100) + "m³/h"
|
||||
// ),
|
||||
// ];
|
||||
// case "history":
|
||||
// return {
|
||||
// ...Array.from(
|
||||
// { length: Math.floor(Math.random() * MAX_HISTORY_DATA_LENGTH) },
|
||||
// (_, index) => ({
|
||||
// ["GAS_" + index]: [
|
||||
// ...Array.from({ length: WEEK }, () =>
|
||||
// Math.floor(Math.random() * 100)
|
||||
// ),
|
||||
// ],
|
||||
// })
|
||||
// ).reduce((arr, curr) => ({ ...arr, ...curr }), {}),
|
||||
// };
|
||||
// default:
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
|
||||
/** 助燃风流量 */
|
||||
function GasI(props) {
|
||||
const [showChart, setShowChart] = useState(true);
|
||||
const runState = useSelector((state) => state.combustionAir.runtime);
|
||||
const hisState = useSelector((state) => state.combustionAir.history);
|
||||
|
||||
let dataList = [];
|
||||
let seriesData = [];
|
||||
let [options, dataList] = getOptions(showChart, hisState, runState);
|
||||
|
||||
function handleSwitchChange(val) {
|
||||
if (val) {
|
||||
setShowChart(true);
|
||||
} else {
|
||||
setShowChart(false);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<BottomBarItem
|
||||
icon="pause"
|
||||
title="助燃风流量"
|
||||
className={cls.gas}
|
||||
style={props.style}
|
||||
>
|
||||
<div className={cls.headWidget}>
|
||||
<div className="flex items-center">
|
||||
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
|
||||
{showChart && <span className={cls.switchLabel}>历史详情</span>}
|
||||
{!showChart && <span className={cls.switchLabel}>实时流量</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cls.chart}>
|
||||
{showChart && (
|
||||
<ReactECharts option={options} style={{ height: "100%" }} />
|
||||
)}
|
||||
{!showChart && (
|
||||
<div className={cls.gridList}>
|
||||
{dataList.map((item) => (
|
||||
<div key={item.id} className={cls.listItem}>
|
||||
<span className={cls.item_label}>{item.name}</span>
|
||||
<span className={cls.item_value}>{item.value}</span>
|
||||
{/* {item.name}: {item.value} */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</BottomBarItem>
|
||||
);
|
||||
}
|
||||
|
||||
export default GasI;
|
||||
|
||||
function getOptions(showChart, hisState, runState) {
|
||||
const colors = [
|
||||
"#12FFF5",
|
||||
"#2760FF",
|
||||
@ -56,7 +70,10 @@ function GasI(props) {
|
||||
"#8cd26d",
|
||||
"#2aa1ff",
|
||||
];
|
||||
let seriesData = null;
|
||||
let dataList = null;
|
||||
let options = null;
|
||||
|
||||
if (showChart) {
|
||||
// keys() 结果不是按照顺序，需要 sort()
|
||||
seriesData =
|
||||
@ -167,44 +184,5 @@ function GasI(props) {
|
||||
];
|
||||
}
|
||||
|
||||
function handleSwitchChange(val) {
|
||||
if (val) {
|
||||
setShowChart(true);
|
||||
} else {
|
||||
setShowChart(false);
|
||||
return [options, dataList];
|
||||
}
|
||||
}
|
||||
return (
|
||||
<BottomBarItem
|
||||
icon="pause"
|
||||
title="助燃风流量"
|
||||
className={cls.gas}
|
||||
style={props.style}
|
||||
>
|
||||
<div className={cls.headWidget}>
|
||||
<div className="flex items-center">
|
||||
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
|
||||
{showChart && <span className={cls.switchLabel}>历史详情</span>}
|
||||
{!showChart && <span className={cls.switchLabel}>实时流量</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cls.chart}>
|
||||
{showChart && (
|
||||
<ReactECharts option={options} style={{ height: "100%" }} />
|
||||
)}
|
||||
{!showChart && (
|
||||
<div className={cls.gridList}>
|
||||
{dataList.map((item) => (
|
||||
<div key={item.id} className={cls.listItem}>
|
||||
{item.name}: {item.value}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</BottomBarItem>
|
||||
);
|
||||
}
|
||||
|
||||
export default GasI;
|
||||
|
||||
@ -26,9 +26,10 @@
|
||||
position: absolute;
|
||||
/* background: #00ee33; */
|
||||
top: 20px;
|
||||
left: 180px;
|
||||
right: 24px;
|
||||
height: 32px;
|
||||
width: 190px;
|
||||
width: 128px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@ -62,7 +63,21 @@
|
||||
padding: 12px 0;
|
||||
text-align: center;
|
||||
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 {
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
}
|
||||
|
||||
.graphBaseTitle > img {
|
||||
width: 20px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.graphBaseTitle > h2 {
|
||||
@ -72,7 +72,7 @@
|
||||
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
||||
margin: 0;
|
||||
margin-left: 6px;
|
||||
font-size: 20px;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 500;
|
||||
|
||||
@ -16,7 +16,9 @@ export default function Kiln() {
|
||||
<div className={cls.leftBar__top__content}>
|
||||
{infos.map((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>
|
||||
|
||||
@ -24,6 +24,19 @@
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.label {
|
||||
flex: 6;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 4;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,7 +46,9 @@ function GridList(props) {
|
||||
<div className={cls.gridList}>
|
||||
{dataList.map((item) => (
|
||||
<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>
|
||||
|
||||
@ -11,4 +11,17 @@
|
||||
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;
|
||||
}
|
||||
|
||||
.item_label {
|
||||
flex: 5;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.item_value {
|
||||
flex: 6;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -26,7 +26,8 @@
|
||||
top: 22px;
|
||||
right: 24px;
|
||||
height: 32px;
|
||||
width: 410px;
|
||||
width: 400px;
|
||||
/* background: #12fff5; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -4,6 +4,65 @@ import ReactECharts from "echarts-for-react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useState } from "react";
|
||||
|
||||
function FaultTotal(props) {
|
||||
const [currentSelect, setCurrentSelect] = useState("日");
|
||||
const isra = useSelector((state) => state.isra);
|
||||
|
||||
const currentStatistic =
|
||||
currentSelect == "日"
|
||||
? isra.dayStatistic
|
||||
: currentSelect == "周"
|
||||
? isra.weekStatistic
|
||||
: currentSelect == "月"
|
||||
? isra.monthStatistic
|
||||
: currentSelect == "月"
|
||||
? isra.yearStatistic
|
||||
: [];
|
||||
|
||||
const series = preHandleStatisticData(currentStatistic, isra.checkType);
|
||||
const options = getOptions(series, isra, currentStatistic);
|
||||
|
||||
function handleDateChange(v) {
|
||||
setCurrentSelect(v);
|
||||
}
|
||||
|
||||
// 根据使用的页面决定背景的大小
|
||||
const bgSize =
|
||||
props.page == "home" ? ["middle", "short"] : ["middle", "long"];
|
||||
|
||||
return (
|
||||
<GraphBase
|
||||
icon="chart"
|
||||
title="产线缺陷统计"
|
||||
dateOptions={["日", "周", "月", "年"]}
|
||||
defaultSelect={currentSelect}
|
||||
onDateChange={handleDateChange}
|
||||
size={bgSize}
|
||||
style={{ width: "600px" }}
|
||||
>
|
||||
<div className={cls.chart}>
|
||||
{currentStatistic.length != 0 && (
|
||||
<ReactECharts option={options} style={{ height: "100%" }} />
|
||||
)}
|
||||
{currentStatistic.length == 0 && (
|
||||
<p
|
||||
style={{
|
||||
paddingTop: "72px",
|
||||
color: "#fff6",
|
||||
textAlign: "center",
|
||||
fontSize: "24px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</GraphBase>
|
||||
);
|
||||
}
|
||||
|
||||
export default FaultTotal;
|
||||
|
||||
function preHandleStatisticData(data, legend) {
|
||||
const obj = {};
|
||||
data.forEach((item) => {
|
||||
@ -28,7 +87,15 @@ function preHandleStatisticData(data, legend) {
|
||||
|
||||
legend.forEach((item, index) => {
|
||||
series[index].name = item;
|
||||
data.forEach((d) => {
|
||||
data.forEach((d, index) => {
|
||||
if (index == 0) {
|
||||
series[index].label = {
|
||||
show: true,
|
||||
position: "top",
|
||||
distance: 10,
|
||||
color: "#fffc",
|
||||
};
|
||||
}
|
||||
series[index].data.push(obj[d.name][item] || 0);
|
||||
});
|
||||
});
|
||||
@ -57,7 +124,7 @@ function getOptions(series, isra, currentStatistic) {
|
||||
type: "category",
|
||||
data: currentStatistic.map((item) => item.name),
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
color: "#fffc",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
@ -96,65 +163,11 @@ function getOptions(series, isra, currentStatistic) {
|
||||
series,
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
className: "xc-chart-tooltip",
|
||||
// backgroundColor: ''
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function FaultTotal(props) {
|
||||
const [currentSelect, setCurrentSelect] = useState("日");
|
||||
const isra = useSelector((state) => state.isra);
|
||||
|
||||
const currentStatistic =
|
||||
currentSelect == "日"
|
||||
? isra.dayStatistic
|
||||
: currentSelect == "周"
|
||||
? isra.weekStatistic
|
||||
: currentSelect == "月"
|
||||
? isra.monthStatistic
|
||||
: currentSelect == "月"
|
||||
? isra.yearStatistic
|
||||
: [];
|
||||
|
||||
const series = preHandleStatisticData(currentStatistic, isra.checkType);
|
||||
const options = getOptions(series, isra, currentStatistic);
|
||||
|
||||
function handleDateChange(v) {
|
||||
setCurrentSelect(v);
|
||||
}
|
||||
|
||||
// 根据使用的页面决定背景的大小
|
||||
const bgSize =
|
||||
props.page == "home" ? ["middle", "short"] : ["middle", "long"];
|
||||
|
||||
return (
|
||||
<GraphBase
|
||||
icon="battery"
|
||||
title="产线缺陷统计"
|
||||
dateOptions={["日", "周", "月", "年"]}
|
||||
defaultSelect={currentSelect}
|
||||
onDateChange={handleDateChange}
|
||||
size={bgSize}
|
||||
style={{ width: "600px" }}
|
||||
>
|
||||
<div className={cls.chart}>
|
||||
{currentStatistic.length != 0 && (
|
||||
<ReactECharts option={options} style={{ height: "100%" }} />
|
||||
)}
|
||||
{currentStatistic.length == 0 && (
|
||||
<p
|
||||
style={{
|
||||
paddingTop: "72px",
|
||||
color: "#fff6",
|
||||
textAlign: "center",
|
||||
fontSize: "24px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</GraphBase>
|
||||
);
|
||||
}
|
||||
|
||||
export default FaultTotal;
|
||||
|
||||
@ -45,7 +45,7 @@ function FaultType(props) {
|
||||
|
||||
return (
|
||||
<GraphBase
|
||||
icon="battery"
|
||||
icon="default"
|
||||
title="产线当日缺陷分类"
|
||||
dateOptions={lines}
|
||||
defaultSelect={currentLine}
|
||||
@ -142,6 +142,11 @@ function getOptions(data, chart_type) {
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
className: 'xc-chart-tooltip'
|
||||
// backgroundColor: ''
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
@ -195,6 +200,13 @@ function getOptions(data, chart_type) {
|
||||
{ offset: 1, color: "#364BFE" },
|
||||
]),
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
distance: 10,
|
||||
fontSize: 10,
|
||||
color: "#fffc",
|
||||
},
|
||||
data: (dataList || []).map((item) => item.value),
|
||||
},
|
||||
],
|
||||
|
||||
@ -11,10 +11,10 @@
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
width: 24px;
|
||||
|
||||
&.bigger {
|
||||
width: 24px;
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
sans-serif;
|
||||
margin: 0;
|
||||
margin-left: 6px;
|
||||
font-size: 18px;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 500;
|
||||
|
||||
@ -6,13 +6,14 @@ import IconChart from '../assets/Icon/icon-chart.png';
|
||||
import IconPuzzle from '../assets/Icon/icon-puzzle.png';
|
||||
import IconPause from '../assets/Icon/icon-pause.png';
|
||||
import IconDefault from '../assets/Icon/icon-puzzle.png';
|
||||
import IconTemp from '../assets/Icon/temp.svg';
|
||||
|
||||
function useIcon(iconName) {
|
||||
// const icon = require(`../assets/icons/${iconName}.svg`).default;
|
||||
// return icon;
|
||||
return iconName == 'kiln'
|
||||
? IconStack
|
||||
: iconName == 'goods'
|
||||
: iconName == 'good'
|
||||
? IconGood
|
||||
: iconName == 'battery'
|
||||
? IconCharger
|
||||
@ -24,6 +25,8 @@ function useIcon(iconName) {
|
||||
? IconPuzzle
|
||||
: iconName == 'pause'
|
||||
? IconPause
|
||||
: iconName == 'temp'
|
||||
? IconTemp
|
||||
: IconDefault;
|
||||
}
|
||||
|
||||
|
||||
@ -115,3 +115,13 @@ body {
|
||||
.bgQuality {
|
||||
background: url(./assets/ZL.png) no-repeat;
|
||||
}
|
||||
|
||||
.xc-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.xc-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { store } from "../store";
|
||||
import { MessageItem } from "./checkTypeHelper";
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
|
||||
export function randomInt(min: number, max: number, includeMax = false) {
|
||||
let Fn = includeMax ? Math.ceil : Math.floor;
|
||||
@ -175,7 +176,7 @@ new XClient(
|
||||
}
|
||||
);
|
||||
|
||||
const newUser = crypto.randomUUID();
|
||||
const newUser = uuidv4()
|
||||
console.log("websocket user:", newUser);
|
||||
new XClient(
|
||||
"ws://10.70.2.2:8080/websocket/message?userId=ENERGY" + newUser,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user