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

update

Browse Source
This commit is contained in:
lb
2023-12-19 15:15:10 +08:00
parent 31e065fa5a
commit 4fc0cf19e9
25 changed files with 341 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@@ -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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

5
src/components/Common/AmenSelector/index.jsx Normal file
View File

@@ -0,0 +1,5 @@
function AmenSelector() {
return <div className="amen-selector"></div>;
}
export default AmenSelector;

7
src/components/Common/Company/index.module.scss
View File

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

2
src/components/Common/CurrentTemp/index.jsx
View File

@@ -59,7 +59,7 @@ function WindFrequence(props) {
return (
<GraphBase
icon="pause"
icon="temp"
title="当前温度"
dateOptions={["Y61", "Y62", "Y63", "Y64", "Y65"]}
defaultSelect={dataSource}

9
src/components/Common/Energy/index.jsx
View File

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

108
src/components/Common/FanRunFrequence/index.jsx
View File

@@ -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 (
<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>
);
return [options, dataList];
}
export default WindFrequence;

124
src/components/Common/GasFlow/index.jsx
View File

@@ -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 (
<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>
);
return [options, dataList];
}
export default GasI;

19
src/components/Common/GasFlow/index.module.css
View File

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

4
src/components/Common/GraphBase/index.module.css
View File

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

4
src/components/Common/KilnInfo/Kiln.jsx
View File

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

13
src/components/Common/KilnInfo/kiln.module.scss
View File

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

4
src/components/Common/NatGasFlow/gridList/index.jsx
View File

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

23
src/components/Common/NatGasFlow/gridList/index.module.css
View File

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

3
src/components/Common/NatGasFlow/index.module.css
View File

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

135
src/components/Common/TodayFaultTotal/index.jsx
View File

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

14
src/components/Common/TodayFaultType/index.jsx
View File

@@ -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),
},
],

6
src/components/container.module.scss
View File

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

5
src/hooks/useIcon.js
View File

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

10
src/index.css
View File

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

3
src/utils/index.ts
View File

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