Vertaa committeja
19 Commitit
| Tekijä | SHA1 | Päivämäärä | |
|---|---|---|---|
| e909784dee | |||
| cacfdf53c2 | |||
| b5602d4981 | |||
| 3d42b358d0 | |||
| 612deda821 | |||
| 448082e74f | |||
| b9f191459f | |||
| 39a75ef213 | |||
| 6133117039 | |||
| aba16e68c2 | |||
| f13e543c0a | |||
| ab954d3695 | |||
| 7029191579 | |||
| 3e7205e5b4 | |||
| e9153c3b41 | |||
| e83594bbbc | |||
| d56573acbb | |||
| b619c8b90b | |||
| 6c1435c7ff |
@ -1,6 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"server": "nodemon --watch websocket/**/*.ts --exec ts-node websocket/server.ts",
|
||||
"start": "umi dev",
|
||||
"build": "umi build",
|
||||
"postinstall": "umi generate tmp",
|
||||
@ -28,6 +29,7 @@
|
||||
"framer-motion": "^6.3.3",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^11.0.0",
|
||||
"moment": "^2.29.4",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-router-dom": "^6.3.0",
|
||||
@ -36,6 +38,11 @@
|
||||
"umi": "^3.5.23"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.6.0",
|
||||
"@types/ws": "^8.5.5",
|
||||
"nodemon": "^3.0.1",
|
||||
"ws": "^8.14.1",
|
||||
"ts-node": "^10.9.1",
|
||||
"@babel/runtime": "^7.18.0",
|
||||
"@types/react": "^17.0.0",
|
||||
"@types/react-dom": "^17.0.0",
|
||||
@ -43,7 +50,7 @@
|
||||
"@umijs/test": "^3.5.23",
|
||||
"lint-staged": "^10.0.7",
|
||||
"prettier": "^2.2.0",
|
||||
"typescript": "^4.1.2",
|
||||
"typescript": "^5.2.2",
|
||||
"yorkie": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Leveys: | Korkeus: | Koko: 32 MiB After Leveys: | Korkeus: | Koko: 6.3 MiB |
BIN
src/assets/Icon/icon-signal.png
Normal file
BIN
src/assets/Icon/icon-signal.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 777 B |
BIN
src/assets/energy-bg.png
Normal file
BIN
src/assets/energy-bg.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 464 KiB |
BIN
src/assets/good-bg.png
Normal file
BIN
src/assets/good-bg.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 641 KiB |
BIN
src/assets/kiln-bg.png
Normal file
BIN
src/assets/kiln-bg.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 359 KiB |
BIN
src/assets/smoke-bg.png
Normal file
BIN
src/assets/smoke-bg.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 561 KiB |
@ -6,7 +6,7 @@ function BottomBarItem(props) {
|
||||
<Container
|
||||
icon={props.icon}
|
||||
title={props.title}
|
||||
className={`${cls.bottomBarItem} ${props.className}`}
|
||||
className={`${props.className}`}
|
||||
>
|
||||
{props.children}
|
||||
</Container>
|
||||
|
||||
@ -1,5 +1 @@
|
||||
.bottomBarItem {
|
||||
background: url(../../../assets/bg-bottom-item.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
|
||||
@ -4,13 +4,14 @@
|
||||
}
|
||||
|
||||
.faultTotal {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.headWidget {
|
||||
position: absolute;
|
||||
/* background: #00ee33; */
|
||||
top: 20px;
|
||||
top: 28px;
|
||||
right: 24px;
|
||||
height: 32px;
|
||||
width: 190px;
|
||||
|
||||
@ -38,11 +38,11 @@ function FaultType(props) {
|
||||
},
|
||||
textStyle: {
|
||||
color: '#DFF1FE',
|
||||
fontSize: 18,
|
||||
fontSize: 16,
|
||||
rich: {
|
||||
sub: {
|
||||
color: '#fff9',
|
||||
fontSize: 18,
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -109,7 +109,7 @@ function FaultType(props) {
|
||||
<Radio.Button
|
||||
key={l.label}
|
||||
value={l.value}
|
||||
className="radio-group__item"
|
||||
className={`radio-group__item ${cls['radio-group__item']}`}
|
||||
>
|
||||
{l.label}
|
||||
</Radio.Button>
|
||||
|
||||
@ -4,11 +4,12 @@
|
||||
|
||||
.faultType {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.headWidget {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
top: 28px;
|
||||
right: 24px;
|
||||
height: 32px;
|
||||
width: 340px;
|
||||
@ -32,3 +33,7 @@
|
||||
color: #fff !important;
|
||||
background: #03233c !important;
|
||||
}
|
||||
|
||||
.radio-group__item {
|
||||
padding: 0 8px;
|
||||
}
|
||||
45
src/components/BottomBar/SpecPL/index.jsx
Normal file
45
src/components/BottomBar/SpecPL/index.jsx
Normal file
@ -0,0 +1,45 @@
|
||||
import { useState } from 'react';
|
||||
import cls from './index.module.less';
|
||||
import { ScrollBoard } from '@jiaminghi/data-view-react';
|
||||
import BottomBarItem from '../BottomBarItem';
|
||||
|
||||
const TodayTableData = (props) => {
|
||||
const [config, setConfig] = useState({
|
||||
// headerBGC: 'rgba(4, 44, 76, 0.3)',
|
||||
// headerBGC: 'rgba(4, 44, 76, .8)',
|
||||
headerBGC: '#044A8425',
|
||||
header: [
|
||||
'<span style="color:#fff">产线名<span/>',
|
||||
'<span style="color:#fff">原板宽度<span/>',
|
||||
'<span style="color:#fff">净板宽度<span/>',
|
||||
'<span style="color:#fff">玻璃厚度<span/>',
|
||||
],
|
||||
// oddRowBGC: '#042444',
|
||||
oddRowBGC: '#044A8425',
|
||||
// evenRowBGC: '#042c4c',
|
||||
evenRowBGC: '#0B549945',
|
||||
columnWidth: [90],
|
||||
headerHeight: 40,
|
||||
hoverPause: false,
|
||||
data: [
|
||||
['产线1', '1000mm', '1000mm', '3.2mm'],
|
||||
['产线2', '100mm', '100mm', '2.2mm'],
|
||||
['产线3', '100mm', '100mm', '2.0mm'],
|
||||
['产线4', '100mm', '100mm', '2.1mm'],
|
||||
['产线5', '100mm', '100mm', '2.2mm'],
|
||||
],
|
||||
});
|
||||
return (
|
||||
<BottomBarItem icon="signal" title="当前产线生产规格" className={cls.spec}>
|
||||
<div className={cls.todayTableData}>
|
||||
<ScrollBoard
|
||||
config={config}
|
||||
className={cls.tableClass}
|
||||
style={{ height: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
</BottomBarItem>
|
||||
);
|
||||
};
|
||||
|
||||
export default TodayTableData;
|
||||
7
src/components/BottomBar/SpecPL/index.module.less
Normal file
7
src/components/BottomBar/SpecPL/index.module.less
Normal file
@ -0,0 +1,7 @@
|
||||
.spec {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.todayTableData {
|
||||
height: 100%;
|
||||
}
|
||||
@ -10,7 +10,7 @@ import SocketContext from '../../../store/socket-data-provider';
|
||||
|
||||
function GasI(props) {
|
||||
const [showChart, setShowChart] = useState(true);
|
||||
const { runState, hisState } = useContext(SocketContext);
|
||||
const { realtimeState, hisState } = useContext(SocketContext);
|
||||
|
||||
let dataList = [];
|
||||
let seriesData = [];
|
||||
@ -27,23 +27,36 @@ function GasI(props) {
|
||||
let options = null;
|
||||
if (showChart) {
|
||||
// keys() 结果不是按照顺序，需要 sort()
|
||||
seriesData = hisState?.combustionAir
|
||||
? Object.keys(hisState.combustionAir)
|
||||
seriesData = hisState?.wind
|
||||
? Object.keys(hisState.wind)
|
||||
.sort()
|
||||
.map((key) => hisState.combustionAir[key])
|
||||
.map((key) => hisState.wind[key])
|
||||
: Array(8)
|
||||
.fill(1)
|
||||
.map((_) => Array(7).fill(0));
|
||||
seriesData.unshift(hisState?.wind['FE_totalair'] || 1);
|
||||
seriesData.splice(8, 1);
|
||||
|
||||
// debug
|
||||
console.log(
|
||||
'助燃风 chart series data',
|
||||
hisState?.combustionAir,
|
||||
seriesData,
|
||||
);
|
||||
// console.log('助燃风 chart series data', hisState?.wind, seriesData);
|
||||
options = {
|
||||
color: colors,
|
||||
grid: { top: 32, 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)
|
||||
@ -64,12 +77,13 @@ function GasI(props) {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#213259',
|
||||
color: '#4561AE',
|
||||
// color: '#213259',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位/m³',
|
||||
name: '单位m³/h',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
@ -83,12 +97,14 @@ function GasI(props) {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#213259',
|
||||
color: '#4561AE',
|
||||
// color: '#213259',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259a0',
|
||||
color: '#4561AEa0',
|
||||
// color: '#213259a0',
|
||||
},
|
||||
},
|
||||
// interval: 10,
|
||||
@ -96,7 +112,7 @@ function GasI(props) {
|
||||
// max: 100,
|
||||
},
|
||||
series: seriesData.map((v, i) => ({
|
||||
name: i + 1 + '#助燃风',
|
||||
name: i ? i + '#助燃风' : '助燃风总流量',
|
||||
data: v,
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
@ -113,8 +129,9 @@ function GasI(props) {
|
||||
},
|
||||
};
|
||||
} else {
|
||||
dataList = runState?.combustionAirPressureArr
|
||||
dataList = realtimeState?.wind
|
||||
? [
|
||||
{ id: 0, name: '助燃风总流量', value: '0m³/h' },
|
||||
{ id: 1, name: '1#助燃风', value: '0m³/h' },
|
||||
{ id: 2, name: '2#助燃风', value: '0m³/h' },
|
||||
{ id: 3, name: '3#助燃风', value: '0m³/h' },
|
||||
@ -122,12 +139,12 @@ function GasI(props) {
|
||||
{ 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] ?? '/',
|
||||
value: realtimeState.wind[index] ?? '/',
|
||||
}))
|
||||
: [
|
||||
{ id: 0, name: '助燃风总流量', value: '0m³/h' },
|
||||
{ id: 1, name: '1#助燃风', value: '0m³/h' },
|
||||
{ id: 2, name: '2#助燃风', value: '0m³/h' },
|
||||
{ id: 3, name: '3#助燃风', value: '0m³/h' },
|
||||
@ -135,10 +152,7 @@ function GasI(props) {
|
||||
{ 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) {
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
|
||||
.gas {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.currentFlow {
|
||||
@ -25,7 +26,7 @@
|
||||
.headWidget {
|
||||
position: absolute;
|
||||
/* background: #00ee33; */
|
||||
top: 20px;
|
||||
top: 28px;
|
||||
right: 24px;
|
||||
height: 32px;
|
||||
width: 190px;
|
||||
@ -68,7 +69,7 @@
|
||||
.headWidget {
|
||||
position: absolute;
|
||||
/* background: #00ee33; */
|
||||
top: 22px;
|
||||
top: 28px;
|
||||
right: 24px;
|
||||
height: 32px;
|
||||
width: 410px;
|
||||
|
||||
@ -50,12 +50,13 @@ export default function getOptions(seriesData, name) {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#213259',
|
||||
// color: '#213259',
|
||||
color: '#4561AE',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位m³/h',
|
||||
name: '单位Nm³/h',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
@ -69,18 +70,22 @@ export default function getOptions(seriesData, name) {
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
// lineStyle: {
|
||||
// color: '#213259',
|
||||
// },
|
||||
lineStyle: {
|
||||
color: '#213259',
|
||||
color: '#4561AE',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259a0',
|
||||
// color: '#213259a0',
|
||||
color: '#4561AEa0',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: seriesData.map((arr, index) => ({
|
||||
name: index + 1 + '#' + name,
|
||||
name: index !== 0 ? index + '#' + name : '天然气总流量',
|
||||
data: arr,
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
|
||||
@ -8,8 +8,8 @@ function GasChart(props) {
|
||||
const { dataSource } = props;
|
||||
const { hisState } = useContext(SocketContext);
|
||||
|
||||
const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
|
||||
|
||||
// const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
|
||||
const dataName = 'gas';
|
||||
// keys() 的结果不是按照顺序的，需要 sort()
|
||||
const seriesData = hisState?.[dataName]
|
||||
? Object.keys(hisState?.[dataName])
|
||||
@ -18,7 +18,7 @@ function GasChart(props) {
|
||||
: Array(dataSource == 'gas-i' ? 8 : 4).fill(Array(7).fill(0));
|
||||
|
||||
// debug
|
||||
console.log('天然气 series data', dataName, hisState?.[dataName], seriesData);
|
||||
// console.log('天然气 series data', dataName, hisState?.[dataName], seriesData);
|
||||
|
||||
return (
|
||||
<div className={cls.gasChart}>
|
||||
@ -26,7 +26,7 @@ function GasChart(props) {
|
||||
key={Math.random()}
|
||||
option={getOptions(
|
||||
seriesData,
|
||||
dataSource == 'gas-i' ? '天然气I' : '天然气II',
|
||||
dataSource == 'gas-i' ? '天然气' : '天然气II',
|
||||
)}
|
||||
style={{ height: '100%' }}
|
||||
/>
|
||||
|
||||
@ -7,14 +7,14 @@ function getData(type) {
|
||||
switch (type) {
|
||||
case 'gas-i':
|
||||
data = [
|
||||
{ id: 1, name: '1#天然气I', value: '0m³/h' },
|
||||
{ id: 2, name: '2#天然气I', value: '0m³/h' },
|
||||
{ id: 3, name: '3#天然气I', value: '0m³/h' },
|
||||
{ id: 4, name: '4#天然气I', value: '0m³/h' },
|
||||
{ id: 5, name: '5#天然气I', value: '0m³/h' },
|
||||
{ id: 6, name: '6#天然气I', value: '0m³/h' },
|
||||
{ id: 7, name: '7#天然气I', value: '0m³/h' },
|
||||
{ id: 8, name: '8#天然气I', value: '0m³/h' },
|
||||
{ id: 0, name: '天然气总流量', value: '0Nm³/h' },
|
||||
{ id: 1, name: '1#天然气', value: '0Nm³/h' },
|
||||
{ id: 2, name: '2#天然气', value: '0Nm³/h' },
|
||||
{ id: 3, name: '3#天然气', value: '0Nm³/h' },
|
||||
{ id: 4, name: '4#天然气', value: '0Nm³/h' },
|
||||
{ id: 5, name: '5#天然气', value: '0Nm³/h' },
|
||||
{ id: 6, name: '6#天然气', value: '0Nm³/h' },
|
||||
{ id: 7, name: '7#天然气', value: '0Nm³/h' },
|
||||
];
|
||||
break;
|
||||
case 'gas-ii':
|
||||
@ -31,12 +31,16 @@ function getData(type) {
|
||||
}
|
||||
|
||||
function GridList(props) {
|
||||
const { runState } = useContext(SocketContext);
|
||||
const key = props.dataSource == 'gas-i' ? 'gasFlowArr' : 'furnaceGasFlowArr';
|
||||
const { realtimeState } = useContext(SocketContext);
|
||||
// const key = props.dataSource == 'gas-i' ? 'gasFlowArr' : 'furnaceGasFlowArr';
|
||||
|
||||
let dataList = getData(props.dataSource);
|
||||
dataList = runState?.[key]
|
||||
? dataList.map((v, i) => ({ ...v, value: runState[key][i] ?? '/' }))
|
||||
// dataList = realtimeState?.[key]
|
||||
dataList = realtimeState?.['gasii']
|
||||
? dataList.map((v, i) => ({
|
||||
...v,
|
||||
value: realtimeState['gasii'][i] ?? '/',
|
||||
}))
|
||||
: dataList;
|
||||
|
||||
return (
|
||||
|
||||
@ -19,16 +19,16 @@ function GasII(props) {
|
||||
}
|
||||
}
|
||||
|
||||
function handleSourceChange(e) {
|
||||
console.log('val', e.target.value);
|
||||
if (e.target.value == 'ii') {
|
||||
// 天然气II
|
||||
setDataSource('gas-ii');
|
||||
} else if (e.target.value == 'i') {
|
||||
// 天然气 I
|
||||
setDataSource('gas-i');
|
||||
}
|
||||
}
|
||||
// function handleSourceChange(e) {
|
||||
// console.log('val', e.target.value);
|
||||
// if (e.target.value == 'ii') {
|
||||
// // 天然气II
|
||||
// setDataSource('gas-ii');
|
||||
// } else if (e.target.value == 'i') {
|
||||
// // 天然气 I
|
||||
// setDataSource('gas-i');
|
||||
// }
|
||||
// }
|
||||
|
||||
return (
|
||||
<BottomBarItem icon="pause" title="天然气流量" className={cls.gas}>
|
||||
@ -40,7 +40,7 @@ function GasII(props) {
|
||||
{!showChart && <span className={cls.switchLabel}>实时流量</span>}
|
||||
</div>
|
||||
|
||||
<Radio.Group
|
||||
{/* <Radio.Group
|
||||
defaultValue="i"
|
||||
buttonStyle="solid"
|
||||
className={cls.radioGroup}
|
||||
@ -52,7 +52,7 @@ function GasII(props) {
|
||||
<Radio.Button value="ii" className="radio-group__item">
|
||||
天然气 II
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Radio.Group> */}
|
||||
</div>
|
||||
|
||||
<div className={cls.chart}>
|
||||
|
||||
@ -4,11 +4,12 @@
|
||||
|
||||
.gas {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.currentFlow {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
top: 28px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 8px 22px;
|
||||
@ -23,7 +24,7 @@
|
||||
|
||||
.headWidget {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
top: 28px;
|
||||
right: 24px;
|
||||
height: 32px;
|
||||
width: 410px;
|
||||
|
||||
@ -1,18 +1,21 @@
|
||||
import React, { useState, useContext, useEffect } from 'react';
|
||||
import React, { useState, useContext, useEffect, useMemo } from 'react';
|
||||
import SocketContext from '../../../store/socket-data-provider';
|
||||
import icon1 from '@/assets/CenterChart2icon1.svg';
|
||||
import icon2 from '@/assets/CenterChart2icon2.svg';
|
||||
import icon3 from '@/assets/CenterChart2icon3.svg';
|
||||
import icon4 from '@/assets/CenterChart2icon4.svg';
|
||||
// import icon4 from '@/assets/CenterChart2icon4.svg';
|
||||
|
||||
import cls from './leftbox.module.less';
|
||||
|
||||
const Chart2 = () => {
|
||||
const ctx = useContext(SocketContext);
|
||||
let [time, setTime] = useState([0, 0]);
|
||||
const { runState } = useContext(SocketContext);
|
||||
const [time, setTime] = useState([0, 0]);
|
||||
|
||||
// console.clear();
|
||||
// console.log('>>>>>>>> runstate 更新 (', runState, ')');
|
||||
|
||||
useEffect(() => {
|
||||
const restTime = ctx.runState?.lastFireChangeTime;
|
||||
const restTime = runState?.lastFireChangeTime;
|
||||
if (restTime == null) return;
|
||||
console.log('restTime is:', restTime);
|
||||
let timer = null;
|
||||
@ -71,23 +74,38 @@ const Chart2 = () => {
|
||||
return () => {
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, [ctx.runState?.lastFireChangeTime]);
|
||||
}, [runState?.lastFireChangeTime, runState?.updateKey]);
|
||||
|
||||
const lastFireChangeTime = {
|
||||
icon: icon3,
|
||||
label: '剩余时间',
|
||||
value: `${time[0]}分${time[1]}秒`,
|
||||
};
|
||||
|
||||
const fireChangeTime = useMemo(() => {
|
||||
return runState?.fireChangeTime || '00:00';
|
||||
}, [runState?.fireChangeTime]);
|
||||
|
||||
const fireDirection = useMemo(() => {
|
||||
// let lastValue = null;
|
||||
// if (runState?.fireDirection) {
|
||||
// lastValue = runState?.fireDirection;
|
||||
// }
|
||||
// console.log('换火方向： <', runState?.fireDirection, '>')
|
||||
return runState?.fireDirection || '南火';
|
||||
}, [runState?.fireDirection]);
|
||||
|
||||
const data = [
|
||||
{
|
||||
icon: icon1,
|
||||
label: '换火时间',
|
||||
value: ctx.runState?.fireChangeTime || '00:00',
|
||||
},
|
||||
{
|
||||
icon: icon3,
|
||||
label: '剩余时间',
|
||||
value: `${time[0]}分${time[1]}秒`,
|
||||
value: fireChangeTime,
|
||||
},
|
||||
lastFireChangeTime,
|
||||
{
|
||||
icon: icon2,
|
||||
label: '当前火向',
|
||||
value: ctx.runState?.fireDirection || '东火',
|
||||
value: fireDirection,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@ -1,33 +1,34 @@
|
||||
.leftbox {
|
||||
// width: 440px;
|
||||
// background: rgb(127, 202, 42);
|
||||
|
||||
.box {
|
||||
margin-right: 16px;
|
||||
width: 200px;
|
||||
padding: 8px;
|
||||
background: url(../../../assets/CenterChart2ItemBg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
user-select: none;
|
||||
// width: 440px;
|
||||
// background: rgb(127, 202, 42);
|
||||
height: 98px;
|
||||
|
||||
.box__inner {
|
||||
padding-top: 12px;
|
||||
.box {
|
||||
margin-right: 16px;
|
||||
width: 200px;
|
||||
padding: 8px;
|
||||
background: url(../../../assets/CenterChart2ItemBg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
user-select: none;
|
||||
|
||||
.box__label {
|
||||
color: #fffa;
|
||||
font-size: 18px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.box__value {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box__inner {
|
||||
padding-top: 12px;
|
||||
|
||||
.box__label {
|
||||
color: #fffa;
|
||||
font-size: 18px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.box__value {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import IconSmoke from '../assets/Icon/icon-taiji.png';
|
||||
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 IconSignal from '../assets/Icon/icon-signal.png';
|
||||
|
||||
const Container = (props) => {
|
||||
let icon = useRef(null);
|
||||
@ -35,6 +36,9 @@ const Container = (props) => {
|
||||
case 'pause':
|
||||
icon.current = IconPause;
|
||||
break;
|
||||
case 'signal':
|
||||
icon.current = IconSignal;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -8,17 +8,17 @@ export default function Kiln() {
|
||||
const ctx = useContext(SocketContext);
|
||||
|
||||
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.kilnInfo?.kilnPressure || '0Pa' },
|
||||
{ label: '循环水温度', value: ctx.kilnInfo?.waterLoopTemperature || '0℃' },
|
||||
{ label: '循环水流量', value: ctx.kilnInfo?.waterLoopFlow || '0㎡/h' },
|
||||
{ label: '循环水压力', value: ctx.kilnInfo?.waterLoopPressure || '0Pa' },
|
||||
{ label: '助燃风压力', value: ctx.kilnInfo?.windPressure || '0℃' },
|
||||
{ label: '碹顶加权温度', value: ctx.kilnInfo?.topTemperature || '0℃' },
|
||||
{
|
||||
label: '压缩气压力',
|
||||
value: ctx.runState?.compressedAirPressure || '0Pa',
|
||||
value: ctx.kilnInfo?.gasPressure || '0Pa',
|
||||
},
|
||||
{ label: '融化加权温度', value: ctx.runState?.meltTemp || '0℃' },
|
||||
{ label: '熔化加权温度', value: ctx.kilnInfo?.meltTemperature || '0℃' },
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
@ -1,11 +1,7 @@
|
||||
.goodProd {
|
||||
background: url(../../assets/good.png) no-repeat;
|
||||
background: url(../../assets/good-bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 625px;
|
||||
// height: 626px;
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
margin-top: 24px;
|
||||
height: 610px;
|
||||
|
||||
.goodProd__content {
|
||||
display: flex;
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
.leftBar {
|
||||
width: 625px;
|
||||
height: 966px;
|
||||
height: 100%;
|
||||
margin-left: 40px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
.leftBar__top {
|
||||
width: 625px;
|
||||
// height: 305px;
|
||||
height: 300px;
|
||||
background: url('../../assets/ItemBg.png') no-repeat;
|
||||
background: url('../../assets/kiln-bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 306px;
|
||||
|
||||
.leftBar__top__content {
|
||||
flex: 1;
|
||||
@ -11,7 +9,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
padding-top: 18px;
|
||||
padding-top: 8px;
|
||||
|
||||
.info__item {
|
||||
border-radius: 2px;
|
||||
|
||||
@ -8,7 +8,7 @@ import { randomInt } from '../../../../utils';
|
||||
const GoodRateChart = (props) => {
|
||||
const options = {
|
||||
color: ['#FFD160', '#12FFF5', '#2760FF'],
|
||||
grid: { top: 28, right: 12, bottom: 32, left: 48 },
|
||||
grid: { top: 28, right: 12, bottom: 48, left: 48 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array(7)
|
||||
@ -29,7 +29,7 @@ const GoodRateChart = (props) => {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#213259',
|
||||
color: '#4561AE',
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -43,12 +43,12 @@ const GoodRateChart = (props) => {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#213259',
|
||||
color: '#4561AE',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259a0',
|
||||
color: '#4561AEa0',
|
||||
},
|
||||
},
|
||||
interval: 10,
|
||||
@ -112,16 +112,16 @@ const GoodRateChart = (props) => {
|
||||
|
||||
function handleSwitchChange(val) {
|
||||
// val: boolean
|
||||
console.log('switch change', val);
|
||||
// console.log('switch change', val);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cls.GoodRateChart}>
|
||||
<div className={cls.titleBar}>
|
||||
<h2>生产良品率</h2>
|
||||
<Switch defaultChecked onChange={handleSwitchChange} />
|
||||
{/* <Switch defaultChecked onChange={handleSwitchChange} /> */}
|
||||
<div className={cls.legend}>
|
||||
<span className="legend__title">班次详情</span>
|
||||
{/* <span className="legend__title">班次详情</span> */}
|
||||
<ul className="legend__list">
|
||||
<li>总量</li>
|
||||
<li>白班</li>
|
||||
@ -147,7 +147,7 @@ const GoodRateChart = (props) => {
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<ReactECharts option={options} />
|
||||
<ReactECharts option={options} style={{ height: '100%' }} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -5,7 +5,8 @@ import { ScrollBoard } from '@jiaminghi/data-view-react';
|
||||
const TodayTableData = (props) => {
|
||||
const [config, setConfig] = useState({
|
||||
// headerBGC: 'rgba(4, 44, 76, 0.3)',
|
||||
headerBGC: 'rgba(4, 44, 76, .8)',
|
||||
// headerBGC: 'rgba(4, 44, 76, .8)',
|
||||
headerBGC: '#044A8425',
|
||||
header: [
|
||||
'<span style="color:#fff">产线<span/>',
|
||||
'<span style="color:#fff">一等率<span/>',
|
||||
@ -13,8 +14,10 @@ const TodayTableData = (props) => {
|
||||
'<span style="color:#fff">成品率<span/>',
|
||||
'<span style="color:#fff">废品率<span/>',
|
||||
],
|
||||
oddRowBGC: '#042444',
|
||||
evenRowBGC: '#042c4c',
|
||||
// oddRowBGC: '#042444',
|
||||
oddRowBGC: '#044A8425',
|
||||
// evenRowBGC: '#042c4c',
|
||||
evenRowBGC: '#0B549945',
|
||||
columnWidth: [90],
|
||||
headerHeight: 40,
|
||||
hoverPause: false,
|
||||
@ -28,7 +31,11 @@ const TodayTableData = (props) => {
|
||||
});
|
||||
return (
|
||||
<div className={cls.todayTableData}>
|
||||
<ScrollBoard config={config} style={{ width: '100%' }} />
|
||||
<ScrollBoard
|
||||
config={config}
|
||||
className={cls.tableClass}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -7,7 +7,7 @@ import ReactECharts from 'echarts-for-react';
|
||||
const EnergyCostChart = (props) => {
|
||||
const options = {
|
||||
color: ['#FFD160', '#12FFF5', '#2760FF'],
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
||||
grid: { top: 26, right: 12, bottom: 18, left: 48 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array(7)
|
||||
@ -33,7 +33,7 @@ const EnergyCostChart = (props) => {
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位/m³',
|
||||
name: '单位/kWh',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
@ -43,7 +43,7 @@ const EnergyCostChart = (props) => {
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
formatter: '{value} %',
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -85,20 +85,43 @@ const EnergyCostChart = (props) => {
|
||||
|
||||
function handleSwitchChange(val) {
|
||||
// val: boolean
|
||||
console.log('switch change', val);
|
||||
// console.log('switch change', val);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cls.energyCostChart}>
|
||||
<div className={cls.titleBar}>
|
||||
<h2>能耗趋势图</h2>
|
||||
<Switch defaultChecked onChange={handleSwitchChange} />
|
||||
{/* <Switch defaultChecked onChange={handleSwitchChange} /> */}
|
||||
<div className={cls.legend}>
|
||||
<span className="legend__title">班次详情</span>
|
||||
{/* <span className="legend__title">班次详情</span> */}
|
||||
<ul className="legend__list">
|
||||
<li>总量</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className={cls.radioGroupWrapper}>
|
||||
<Radio.Group
|
||||
defaultValue="elecCost"
|
||||
buttonStyle="solid"
|
||||
className={cls.radioGroup}
|
||||
>
|
||||
<Radio.Button value="elecCost" className="radio-group__item">
|
||||
电耗能
|
||||
</Radio.Button>
|
||||
<Radio.Button value="restHeat" className="radio-group__item">
|
||||
余热发电
|
||||
</Radio.Button>
|
||||
<Radio.Button value="waterCost" className="radio-group__item">
|
||||
水耗能
|
||||
</Radio.Button>
|
||||
<Radio.Button value="gasCost" className="radio-group__item">
|
||||
天然气
|
||||
</Radio.Button>
|
||||
{/* <Radio.Button value="gasiiCost" className="radio-group__item">
|
||||
焦炉煤气
|
||||
</Radio.Button> */}
|
||||
</Radio.Group>
|
||||
<Radio.Group
|
||||
defaultValue="week"
|
||||
buttonStyle="solid"
|
||||
@ -119,7 +142,7 @@ const EnergyCostChart = (props) => {
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<ReactECharts option={options} style={{ height: '180px' }} />
|
||||
<ReactECharts option={options} style={{ height: '145px' }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
}
|
||||
.energyCostChart .titleBar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
@ -63,6 +63,13 @@
|
||||
background-color: #2760ff;
|
||||
}
|
||||
|
||||
.radioGroupWrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.radioGroup * {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
@ -2,8 +2,25 @@ import cls from './index.module.less';
|
||||
import Container from '../../Container';
|
||||
import TechSplitline from '../TechSplitline';
|
||||
import EnergyCostChart from './EnergyCostChart';
|
||||
import SocketContext from '../../../store/socket-data-provider';
|
||||
import { useContext } from 'react';
|
||||
|
||||
function EnergyCost(props) {
|
||||
const { energyState = {} } = useContext(SocketContext);
|
||||
// console.log('energyState', energyState);
|
||||
// let {
|
||||
// restHeat = '0kWh',
|
||||
// water = '0Km³',
|
||||
// gasi = '0m³',
|
||||
// gasii = '0m³',
|
||||
// electricity = '0kWh',
|
||||
// } = energyState;
|
||||
let restHeat = energyState?.restHeat || '0kWh';
|
||||
let water = energyState?.water || '0m³';
|
||||
let gasi = energyState?.gasi || '0m³';
|
||||
let gasii = energyState?.gasii || '0m³';
|
||||
let electricity = energyState?.electricity || '0kWh';
|
||||
|
||||
return (
|
||||
<Container title="能耗" icon="charger" className={cls.energyCost}>
|
||||
<div className={`flex flex-col`}>
|
||||
@ -12,13 +29,13 @@ function EnergyCost(props) {
|
||||
className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`}
|
||||
>
|
||||
<span>余 热 发 电</span>
|
||||
<span>922kWh</span>
|
||||
<span>{restHeat}</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 className={cls.info__item}>水 耗 量 : {water}</div>
|
||||
<div className={cls.info__item}>天 然 气 : {gasi}</div>
|
||||
<div className={cls.info__item}>电 耗 量 : {electricity}</div>
|
||||
{/* <div className={cls.info__item}>天 然 气 II: {gasii}</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
.energyCost {
|
||||
background: url(../../../assets/energy.png) no-repeat;
|
||||
background: url(../../../assets/energy-bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 626px;
|
||||
height: 400px;
|
||||
height: 395px;
|
||||
}
|
||||
|
||||
.cost__info {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 12px;
|
||||
// margin-bottom: 12px;
|
||||
|
||||
div {
|
||||
flex-grow: 1;
|
||||
@ -19,7 +19,7 @@
|
||||
color: hsl(0, 0%, 100%, 0.9);
|
||||
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
|
||||
// width: 288px;
|
||||
height: 43px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1.43px;
|
||||
line-height: 40px;
|
||||
@ -35,5 +35,5 @@
|
||||
margin-left: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ import ReactECharts from 'echarts-for-react';
|
||||
const SmokeTrendChart = (props) => {
|
||||
const options = {
|
||||
color: ['#FFD160', '#12FFF5', '#2760FF'],
|
||||
grid: { top: 38, right: 12, bottom: 20, left: 48 },
|
||||
grid: { top: 32, right: 12, bottom: 18, left: 48 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array(7)
|
||||
@ -34,7 +34,7 @@ const SmokeTrendChart = (props) => {
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位m³/h',
|
||||
name: '单位mg/m³',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
@ -44,7 +44,7 @@ const SmokeTrendChart = (props) => {
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
formatter: '{value} %',
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -125,9 +125,9 @@ const SmokeTrendChart = (props) => {
|
||||
<div className={cls.energyCostChart}>
|
||||
<div className={cls.titleBar}>
|
||||
<h2>烟气趋势图</h2>
|
||||
<Switch defaultChecked onChange={handleSwitchChange} />
|
||||
{/* <Switch defaultChecked onChange={handleSwitchChange} /> */}
|
||||
<div className={cls.legend}>
|
||||
<span className="legend__title">班次详情</span>
|
||||
{/* <span className="legend__title">班次详情</span> */}
|
||||
<ul className="legend__list">
|
||||
<li>总量</li>
|
||||
<li>白班</li>
|
||||
@ -138,13 +138,10 @@ const SmokeTrendChart = (props) => {
|
||||
|
||||
<div className={`${cls.choiceBar} flex items-center justify-between`}>
|
||||
<Radio.Group
|
||||
defaultValue="oxygen"
|
||||
defaultValue="so2"
|
||||
buttonStyle="solid"
|
||||
className={`${cls.radioGroup} flex items-center justify-between`}
|
||||
>
|
||||
<Radio.Button value="oxygen" className="radio-group__item">
|
||||
氧气含量
|
||||
</Radio.Button>
|
||||
<Radio.Button value="so2" className="radio-group__item">
|
||||
二氧化硫
|
||||
</Radio.Button>
|
||||
@ -154,6 +151,9 @@ const SmokeTrendChart = (props) => {
|
||||
<Radio.Button value="no2" className="radio-group__item">
|
||||
二氧化氮
|
||||
</Radio.Button>
|
||||
<Radio.Button value="oxygen" className="radio-group__item">
|
||||
氧气含量
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
|
||||
<Radio.Group
|
||||
@ -175,7 +175,7 @@ const SmokeTrendChart = (props) => {
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<ReactECharts option={options} style={{ height: '240px' }} />
|
||||
<ReactECharts option={options} style={{ height: '220px' }} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
width: 400px;
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* justify-content: space-between; */
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
.smokeHandle {
|
||||
// background: #b730305c;
|
||||
background: url(../../../assets/smoke.png) no-repeat;
|
||||
background: url(../../../assets/smoke-bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 626px;
|
||||
height: 540px;
|
||||
height: 512px;
|
||||
.smokeHandle__content {
|
||||
margin-top: 8px;
|
||||
}
|
||||
@ -14,7 +14,7 @@
|
||||
color: hsl(0, 0%, 100%, 0.9);
|
||||
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
|
||||
// width: 288px;
|
||||
height: 56px;
|
||||
height: 52px;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1.43px;
|
||||
line-height: 56px;
|
||||
@ -23,7 +23,7 @@
|
||||
}
|
||||
|
||||
.info__item_groups {
|
||||
margin-bottom: 12px;
|
||||
// margin-bottom: 12px;
|
||||
margin-left: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
width: 24px;
|
||||
|
||||
&.bigger {
|
||||
width: 24px;
|
||||
@ -24,7 +24,7 @@
|
||||
sans-serif;
|
||||
margin: 0;
|
||||
margin-left: 6px;
|
||||
font-size: 18px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 500;
|
||||
|
||||
5
src/components/yx-dark/Bottom.jsx
Normal file
5
src/components/yx-dark/Bottom.jsx
Normal file
@ -0,0 +1,5 @@
|
||||
import './styles/bottom.module.css';
|
||||
|
||||
export default (props) => {
|
||||
return <div className={`bottom ${props.className}`}>{props.children}</div>;
|
||||
};
|
||||
26
src/components/yx-dark/Header.jsx
Normal file
26
src/components/yx-dark/Header.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import './styles/header.module.css';
|
||||
import moment from 'moment';
|
||||
|
||||
export default (props) => {
|
||||
let [today, setToday] = useState(new Date());
|
||||
moment.locale('zh-cn');
|
||||
setTimeout(() => {
|
||||
setToday(new Date());
|
||||
}, 1000);
|
||||
|
||||
return (
|
||||
<header className="header">
|
||||
<div>
|
||||
<span className="header--logo"></span>
|
||||
<h1>宜兴新能源生产线大数据指挥中心</h1>
|
||||
</div>
|
||||
<span className="header--wing absolute company">
|
||||
设计单位：中建材智能自动化研究院
|
||||
</span>
|
||||
<span className="header--wing absolute datetime">
|
||||
{moment(today).format('YYYY.M.D dddd HH:mm:ss')}
|
||||
</span>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
13
src/components/yx-dark/LeftContent.jsx
Normal file
13
src/components/yx-dark/LeftContent.jsx
Normal file
@ -0,0 +1,13 @@
|
||||
import './styles/left.module.css';
|
||||
|
||||
import Kiln from '../LeftBar/Kiln';
|
||||
import GoodProduction from '../LeftBar/GoodProduction';
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<div className={`left-content ${props.className}`}>
|
||||
<Kiln />
|
||||
<GoodProduction />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
38
src/components/yx-dark/MainContainer.jsx
Normal file
38
src/components/yx-dark/MainContainer.jsx
Normal file
@ -0,0 +1,38 @@
|
||||
import Bottom from './Bottom';
|
||||
import LeftContent from './LeftContent';
|
||||
import RightContent from './RightContent';
|
||||
import './styles/main.module.css';
|
||||
|
||||
import FaultTotal from '../BottomBar/FaultTotal';
|
||||
import FaultType from '../BottomBar/FaultType';
|
||||
import GasFlow from '../BottomBar/gasii';
|
||||
import WindFlow from '../BottomBar/gasi';
|
||||
import SpecPL from '../BottomBar/SpecPL';
|
||||
import CenterTopBox from '../CenterTopData/LeftBoxes';
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<div className="main-container">
|
||||
<LeftContent className="left"></LeftContent>
|
||||
<div className="main-center">
|
||||
<CenterTopBox />
|
||||
</div>
|
||||
<Bottom title="产线缺陷统计" className="bottom-1">
|
||||
<FaultTotal />
|
||||
</Bottom>
|
||||
<Bottom title="产线当日缺陷分类" className="bottom-2">
|
||||
<FaultType />
|
||||
</Bottom>
|
||||
<Bottom title="天然气流量" className="bottom-3">
|
||||
<GasFlow />
|
||||
</Bottom>
|
||||
<Bottom title="助燃风流量" className="bottom-4">
|
||||
<WindFlow />
|
||||
</Bottom>
|
||||
<Bottom title="当前产线生产风格" className="bottom-5">
|
||||
<SpecPL />
|
||||
</Bottom>
|
||||
<RightContent className="right"></RightContent>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
13
src/components/yx-dark/RightContent.jsx
Normal file
13
src/components/yx-dark/RightContent.jsx
Normal file
@ -0,0 +1,13 @@
|
||||
import './styles/right.module.css';
|
||||
|
||||
import Energy from '../RightBar/EnergyCost';
|
||||
import Smoke from '../RightBar/SmokeHandle';
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<div className={`right-content ${props.className}`}>
|
||||
<Energy />
|
||||
<Smoke />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
BIN
src/components/yx-dark/images/3d.png
Normal file
BIN
src/components/yx-dark/images/3d.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 5.8 MiB |
BIN
src/components/yx-dark/images/bg.png
Normal file
BIN
src/components/yx-dark/images/bg.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 1.2 MiB |
BIN
src/components/yx-dark/images/company.png
Normal file
BIN
src/components/yx-dark/images/company.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 32 KiB |
BIN
src/components/yx-dark/images/date.png
Normal file
BIN
src/components/yx-dark/images/date.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 6.3 KiB |
BIN
src/components/yx-dark/images/fenlei-bg.png
Normal file
BIN
src/components/yx-dark/images/fenlei-bg.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 252 KiB |
BIN
src/components/yx-dark/images/gas-bg.png
Normal file
BIN
src/components/yx-dark/images/gas-bg.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 294 KiB |
BIN
src/components/yx-dark/images/header.png
Normal file
BIN
src/components/yx-dark/images/header.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 309 KiB |
BIN
src/components/yx-dark/images/logo.png
Normal file
BIN
src/components/yx-dark/images/logo.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 8.2 KiB |
BIN
src/components/yx-dark/images/spec-bg.png
Normal file
BIN
src/components/yx-dark/images/spec-bg.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 218 KiB |
BIN
src/components/yx-dark/images/tongji-bg.png
Normal file
BIN
src/components/yx-dark/images/tongji-bg.png
Normal file
Binary file not shown.
|
After Leveys: | Korkeus: | Koko: 284 KiB |
3
src/components/yx-dark/styles/bottom.module.css
Normal file
3
src/components/yx-dark/styles/bottom.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.bottom {
|
||||
background: #f0f3;
|
||||
}
|
||||
53
src/components/yx-dark/styles/header.module.css
Normal file
53
src/components/yx-dark/styles/header.module.css
Normal file
@ -0,0 +1,53 @@
|
||||
header {
|
||||
height: 121px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
background: url(../images/header.png) 100% 100% / contain no-repeat;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
header > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
header > div .header--logo {
|
||||
margin-top: 12px;
|
||||
width: 48px;
|
||||
height: 67px;
|
||||
background: url(../images/logo.png) center/contain no-repeat;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin-bottom: 0;
|
||||
margin-left: 36px;
|
||||
font-size: 52px;
|
||||
/* line-height: 97px; */
|
||||
user-select: none;
|
||||
letter-spacing: 9px;
|
||||
font-weight: 400;
|
||||
color: #6bf2ff;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
}
|
||||
|
||||
.header--wing {
|
||||
left: 0;
|
||||
bottom: -12px;
|
||||
height: 48px;
|
||||
font-size: 28px;
|
||||
line-height: 48px;
|
||||
color: #51f0ff;
|
||||
}
|
||||
|
||||
.company {
|
||||
margin-left: 960px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.datetime {
|
||||
text-align: center;
|
||||
left: unset;
|
||||
right: 1100px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
7
src/components/yx-dark/styles/left.module.css
Normal file
7
src/components/yx-dark/styles/left.module.css
Normal file
@ -0,0 +1,7 @@
|
||||
.left-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
/* background: #fcc3; */
|
||||
}
|
||||
54
src/components/yx-dark/styles/main.module.css
Normal file
54
src/components/yx-dark/styles/main.module.css
Normal file
@ -0,0 +1,54 @@
|
||||
.main-container {
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
/* background: #ccc4; */
|
||||
display: grid;
|
||||
grid-template-columns: 626px 576px 580px 626px 626px 450px 626px;
|
||||
grid-template-rows: 600px 306px;
|
||||
gap: 20px;
|
||||
grid-template-areas:
|
||||
'left main main main main main right'
|
||||
'left bottom1 bottom2 bottom3 bottom4 bottom5 right';
|
||||
place-content: end center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.main-center {
|
||||
grid-area: main;
|
||||
background: url(../images/3d.png) 100% 80% / contain no-repeat;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
grid-area: left;
|
||||
}
|
||||
|
||||
.bottom-1 {
|
||||
grid-area: bottom1;
|
||||
background: url('../images/tongji-bg.png') 100% / contain no-repeat;
|
||||
}
|
||||
|
||||
.bottom-2 {
|
||||
grid-area: bottom2;
|
||||
background: url('../images/fenlei-bg.png') 100% / contain no-repeat;
|
||||
}
|
||||
|
||||
.bottom-3 {
|
||||
grid-area: bottom3;
|
||||
background: url('../images/gas-bg.png') 100% / contain no-repeat;
|
||||
}
|
||||
|
||||
.bottom-4 {
|
||||
grid-area: bottom4;
|
||||
background: url('../images/gas-bg.png') 100% / contain no-repeat;
|
||||
}
|
||||
|
||||
.bottom-5 {
|
||||
grid-area: bottom5;
|
||||
background: url('../images/spec-bg.png') 100% / contain no-repeat;
|
||||
}
|
||||
|
||||
.right {
|
||||
grid-area: right;
|
||||
}
|
||||
7
src/components/yx-dark/styles/right.module.css
Normal file
7
src/components/yx-dark/styles/right.module.css
Normal file
@ -0,0 +1,7 @@
|
||||
.right-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
/* background: #fcc3; */
|
||||
}
|
||||
@ -1,36 +1,32 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import './global.less';
|
||||
import './index.less';
|
||||
import Head from '../components/Head';
|
||||
import LeftBar from '../components/LeftBar';
|
||||
import BottomBar from '../components/BottomBar';
|
||||
import RightBar from '../components/RightBar';
|
||||
import CenterTopData from '../components/CenterTopData';
|
||||
import Header from '../components/yx-dark/Header';
|
||||
// import LeftBar from '../components/LeftBar';
|
||||
// import BottomBar from '../components/BottomBar';
|
||||
// import RightBar from '../components/RightBar';
|
||||
// import CenterTopData from '../components/CenterTopData';
|
||||
import Slider from '../components/Slider';
|
||||
import { SocketContextProvider } from '../store/socket-data-provider';
|
||||
|
||||
import V3DBG from '../assets/V3DBG.png';
|
||||
// import V3D from './V3D';
|
||||
import MainContainer from '../components/yx-dark/MainContainer';
|
||||
|
||||
export default function index() {
|
||||
const [value, setValue] = useState(100);
|
||||
|
||||
const v = (value / 100).toFixed(2);
|
||||
const styles = {
|
||||
transform: `scale(${v})`,
|
||||
transform: `scale(${(v * 3840) / 4320}, ${v})`,
|
||||
// transform: `scale(${v * 24 / 33}, ${v})`,
|
||||
transformOrigin: 'top left',
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let fn = (e) => {
|
||||
console.log('add fn');
|
||||
if (e.shiftKey && e.key === 'L') {
|
||||
document.getElementById('slider').classList.toggle('show');
|
||||
}
|
||||
};
|
||||
let fn2 = () => {
|
||||
console.log('add fn2');
|
||||
setTimeout(() => {
|
||||
document.getElementById('slider').classList.remove('show');
|
||||
}, 200);
|
||||
@ -40,7 +36,6 @@ export default function index() {
|
||||
document.getElementById('slider').addEventListener('mouseleave', fn2);
|
||||
|
||||
return () => {
|
||||
console.log('remove fn, fn2');
|
||||
document.removeEventListener('keydown', fn);
|
||||
document.getElementById('slider').removeEventListener('mouseleave', fn2);
|
||||
};
|
||||
@ -50,21 +45,21 @@ export default function index() {
|
||||
// <FullScreenContainer>
|
||||
<SocketContextProvider>
|
||||
<div id="FullScreen" style={styles}>
|
||||
<Head />
|
||||
<div className="Main">
|
||||
<Header />
|
||||
<MainContainer />
|
||||
{/* <div className="Main">
|
||||
<LeftBar />
|
||||
<div className="Center">
|
||||
<div className="CenterData">
|
||||
<CenterTopData />
|
||||
</div>
|
||||
<img src={V3DBG} alt="图片加载错误" className="V3DBG" />
|
||||
<div className="V3DBorder">{/* <V3D /> */}</div>
|
||||
<div className="V3DBorder"></div>
|
||||
<div className="Button">
|
||||
<BottomBar />
|
||||
</div>
|
||||
</div>
|
||||
<RightBar />
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
<Slider handleSlide={setValue} />
|
||||
</SocketContextProvider>
|
||||
|
||||
@ -1,20 +1,25 @@
|
||||
#FullScreen {
|
||||
width: 3840px;
|
||||
width: 4320px;
|
||||
height: 1080px;
|
||||
transform-origin: 'lefttop';
|
||||
background-color: #040c1c;
|
||||
background: url(../components/yx-dark/images/bg.png) 100% / cover no-repeat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.Main {
|
||||
margin-top: 100px;
|
||||
// background: #a935355f;
|
||||
width: 3840px;
|
||||
height: 996px;
|
||||
width: 4320px;
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
background: #ccc3;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.Center {
|
||||
margin: 22px;
|
||||
width: 2472px;
|
||||
height: 940px;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
flex: 1;
|
||||
|
||||
.CenterData {
|
||||
position: absolute;
|
||||
@ -28,7 +33,6 @@
|
||||
width: 2472px;
|
||||
height: 640px;
|
||||
z-index: 1;
|
||||
box-shadow: inset 0 0 128px 64px #0a2859;
|
||||
}
|
||||
|
||||
.V3DBorder {
|
||||
|
||||
@ -3,29 +3,45 @@ import { useState, useEffect } from 'react';
|
||||
const SocketContext = React.createContext();
|
||||
|
||||
export const SocketContextProvider = (props) => {
|
||||
const [kilnInfo, setkilnInfo] = useState(null);
|
||||
const [runState, setRunState] = useState(null);
|
||||
const [energyState, setEnergyState] = useState(null);
|
||||
const [hisState, setHisState] = useState(null);
|
||||
const [realtimeState, setRealtimeState] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
// const socket = new WebSocket('ws://172.16.1.55:8081/xc-screen/websocket/1');
|
||||
const socket = new WebSocket(
|
||||
'ws://192.168.1.12:8081/xc-screen/websocket/1',
|
||||
// 'ws://192.168.1.12:8081/xc-screen/websocket/1',
|
||||
'ws://127.0.0.1:9800',
|
||||
);
|
||||
socket.onopen = () => {
|
||||
console.log('[*] socket connected!');
|
||||
};
|
||||
socket.onmessage = (e) => {
|
||||
if ('data' in e) {
|
||||
console.log('[ws] data ===> ', e.data);
|
||||
if (e.data == '连接成功') return;
|
||||
|
||||
let incommingData = JSON.parse(e.data);
|
||||
switch (incommingData.type) {
|
||||
case 'RunData':
|
||||
console.log('run data arrived, set 运行时数据');
|
||||
setRunState(incommingData.data);
|
||||
case 'kiln-info':
|
||||
console.log('设置窑炉信息');
|
||||
setkilnInfo(incommingData.data);
|
||||
break;
|
||||
case 'HisData':
|
||||
console.log('his data arrived, set 历史数据');
|
||||
case 'run-state':
|
||||
console.log('设置运行时数据');
|
||||
setRunState({ ...incommingData.data, updateKey: Math.random() });
|
||||
break;
|
||||
case 'energy-cost':
|
||||
console.log('设置能耗数据');
|
||||
setEnergyState(incommingData.data);
|
||||
break;
|
||||
case 'realtime':
|
||||
console.log('设置流量实时数据');
|
||||
setRealtimeState(incommingData.data);
|
||||
break;
|
||||
case 'his-trend':
|
||||
console.log('设置历史数据');
|
||||
setHisState(incommingData.data);
|
||||
break;
|
||||
}
|
||||
@ -34,7 +50,9 @@ export const SocketContextProvider = (props) => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SocketContext.Provider value={{ runState, hisState }}>
|
||||
<SocketContext.Provider
|
||||
value={{ kilnInfo, energyState, runState, hisState, realtimeState }}
|
||||
>
|
||||
{props.children}
|
||||
</SocketContext.Provider>
|
||||
);
|
||||
|
||||
458
websocket/d.txt
Normal file
458
websocket/d.txt
Normal file
@ -0,0 +1,458 @@
|
||||
推送火向,剩余换火时间,压力,换火时间等信息
|
||||
|
||||
目前缺少四个温度
|
||||
循环水温
|
||||
|
||||
熔化温度
|
||||
|
||||
碹顶温度
|
||||
|
||||
支通路温度
|
||||
{
|
||||
"data": {
|
||||
"waterFlow": "99.0m³/h",
|
||||
"fireChangeTime": "46.0S",
|
||||
"compressedAirPressure": "95.0MPa",
|
||||
"combustionAirPressure": "73.0Pa",
|
||||
"waterPressure": "29.0MPa",
|
||||
"lastFireChangeTime": "10分20秒",
|
||||
"combustionAirPressureArr": [
|
||||
"1.0m³/h",
|
||||
"16.0m³/h",
|
||||
"23.0m³/h",
|
||||
"65.0m³/h",
|
||||
"70.0m³/h",
|
||||
"78.0m³/h",
|
||||
"9.0m³/h",
|
||||
"94.0m³/h"
|
||||
],
|
||||
"kilnPressure": "99.0Pa",
|
||||
"fireDirection": "东火"
|
||||
},
|
||||
"type": "RunData"
|
||||
}左右投料机信息{"rightFeeder":"运行","leftFeeder":"运行"}
|
||||
|
||||
|
||||
天然气流量历史趋势
|
||||
{
|
||||
"kilnGasT1": {
|
||||
"FE111R": [
|
||||
53.02,
|
||||
69.84,
|
||||
99.33,
|
||||
17.21,
|
||||
1.17,
|
||||
27.84,
|
||||
95.44,
|
||||
30.72,
|
||||
32.24,
|
||||
64.16,
|
||||
59.65,
|
||||
14.59,
|
||||
78.58,
|
||||
99.15,
|
||||
58.91,
|
||||
34.13,
|
||||
99.62,
|
||||
2.23,
|
||||
28.31,
|
||||
91.17,
|
||||
97.15,
|
||||
60.62,
|
||||
94.12,
|
||||
23.24
|
||||
],
|
||||
"FE113R": [
|
||||
22.04,
|
||||
40.78,
|
||||
75.62,
|
||||
61.01,
|
||||
72.7,
|
||||
48.46,
|
||||
32.44,
|
||||
42.51,
|
||||
59.61,
|
||||
22.86,
|
||||
32.95,
|
||||
21.32,
|
||||
23.59,
|
||||
84.16,
|
||||
55.14,
|
||||
55.71,
|
||||
10.81,
|
||||
56.53,
|
||||
75.51,
|
||||
2.85,
|
||||
27.77,
|
||||
52.42,
|
||||
43.34,
|
||||
22.04
|
||||
],
|
||||
"FE112R": [
|
||||
77.02,
|
||||
13.83,
|
||||
1.71,
|
||||
53.99,
|
||||
4.03,
|
||||
1,
|
||||
22.17,
|
||||
61.73,
|
||||
11.25,
|
||||
31.69,
|
||||
90.31,
|
||||
69.26,
|
||||
68.72,
|
||||
80.79,
|
||||
3.08,
|
||||
39.17,
|
||||
12.6,
|
||||
35.31,
|
||||
97.2,
|
||||
38.77,
|
||||
27.5,
|
||||
11.78,
|
||||
72.32,
|
||||
23.13
|
||||
],
|
||||
"FE115R": [
|
||||
28.31,
|
||||
10.16,
|
||||
13.22,
|
||||
41.44,
|
||||
97.19,
|
||||
60.08,
|
||||
34.13,
|
||||
16.75,
|
||||
92.7,
|
||||
79.48,
|
||||
3.08,
|
||||
14.71,
|
||||
4.4,
|
||||
0.88,
|
||||
77.6,
|
||||
57,
|
||||
31,
|
||||
86.14,
|
||||
44.31,
|
||||
45.7,
|
||||
6.85,
|
||||
65.62,
|
||||
77.97,
|
||||
49.2
|
||||
],
|
||||
"FE114R": [
|
||||
17.72,
|
||||
32.45,
|
||||
1.42,
|
||||
24.51,
|
||||
68.57,
|
||||
61.48,
|
||||
2.08,
|
||||
3.1,
|
||||
38.27,
|
||||
20.07,
|
||||
25.71,
|
||||
85.58,
|
||||
48.31,
|
||||
78.14,
|
||||
22.43,
|
||||
87.47,
|
||||
83.78,
|
||||
17.66,
|
||||
72.36,
|
||||
19,
|
||||
20.69,
|
||||
33.92,
|
||||
25.66,
|
||||
91.28
|
||||
],
|
||||
"FE117R": [
|
||||
47.8,
|
||||
62.27,
|
||||
90.23,
|
||||
28.31,
|
||||
73.09,
|
||||
34.04,
|
||||
9.03,
|
||||
44.69,
|
||||
32.62,
|
||||
25.78,
|
||||
27.79,
|
||||
25.42,
|
||||
28.96,
|
||||
56.52,
|
||||
75.43,
|
||||
50.56,
|
||||
90.22,
|
||||
11.85,
|
||||
4.56,
|
||||
39.9,
|
||||
9.83,
|
||||
65.98,
|
||||
91.22,
|
||||
92.43
|
||||
],
|
||||
"FE116R": [
|
||||
64.79,
|
||||
46.14,
|
||||
58.67,
|
||||
54.46,
|
||||
15.67,
|
||||
72.02,
|
||||
15.06,
|
||||
5.88,
|
||||
38.19,
|
||||
66.98,
|
||||
89.24,
|
||||
33.13,
|
||||
87.57,
|
||||
43.95,
|
||||
55.06,
|
||||
93.26,
|
||||
96.91,
|
||||
56.5,
|
||||
20.75,
|
||||
83.76,
|
||||
60.88,
|
||||
62.04,
|
||||
22.34,
|
||||
82.43
|
||||
],
|
||||
"FE118R": [
|
||||
94.32,
|
||||
86.26,
|
||||
5.13,
|
||||
47.33,
|
||||
40.01,
|
||||
34.97,
|
||||
18.69,
|
||||
81.81,
|
||||
87.37,
|
||||
96.47,
|
||||
16.04,
|
||||
23.33,
|
||||
0.66,
|
||||
16.86,
|
||||
13.19,
|
||||
67.32,
|
||||
37.63,
|
||||
13.74,
|
||||
22.85,
|
||||
78.89,
|
||||
9.52,
|
||||
75.46,
|
||||
0.2,
|
||||
1.51
|
||||
]
|
||||
},
|
||||
"kilnGasT2": {
|
||||
"FE124R": [
|
||||
53.02,
|
||||
69.84,
|
||||
99.33,
|
||||
17.21,
|
||||
1.17,
|
||||
27.84,
|
||||
95.44,
|
||||
30.72,
|
||||
32.24,
|
||||
64.16,
|
||||
59.65,
|
||||
14.59,
|
||||
78.58,
|
||||
99.15,
|
||||
58.91,
|
||||
34.13,
|
||||
99.62,
|
||||
2.23,
|
||||
28.31,
|
||||
91.17,
|
||||
97.15,
|
||||
60.62,
|
||||
94.12,
|
||||
23.24
|
||||
],
|
||||
"FE123aR": [
|
||||
17.72,
|
||||
32.45,
|
||||
1.42,
|
||||
24.51,
|
||||
68.57,
|
||||
61.48,
|
||||
2.08,
|
||||
3.1,
|
||||
38.27,
|
||||
20.07,
|
||||
25.71,
|
||||
85.58,
|
||||
48.31,
|
||||
78.14,
|
||||
22.43,
|
||||
87.47,
|
||||
83.78,
|
||||
17.66,
|
||||
72.36,
|
||||
19,
|
||||
20.69,
|
||||
33.92,
|
||||
25.66,
|
||||
91.28
|
||||
],
|
||||
"FE123R": [
|
||||
77.02,
|
||||
13.83,
|
||||
1.71,
|
||||
53.99,
|
||||
4.03,
|
||||
1,
|
||||
22.17,
|
||||
61.73,
|
||||
11.25,
|
||||
31.69,
|
||||
90.31,
|
||||
69.26,
|
||||
68.72,
|
||||
80.79,
|
||||
3.08,
|
||||
39.17,
|
||||
12.6,
|
||||
35.31,
|
||||
97.2,
|
||||
38.77,
|
||||
27.5,
|
||||
11.78,
|
||||
72.32,
|
||||
23.13
|
||||
],
|
||||
"FE124aR": [
|
||||
22.04,
|
||||
40.78,
|
||||
75.62,
|
||||
61.01,
|
||||
72.7,
|
||||
48.46,
|
||||
32.44,
|
||||
42.51,
|
||||
59.61,
|
||||
22.86,
|
||||
32.95,
|
||||
21.32,
|
||||
23.59,
|
||||
84.16,
|
||||
55.14,
|
||||
55.71,
|
||||
10.81,
|
||||
56.53,
|
||||
75.51,
|
||||
2.85,
|
||||
27.77,
|
||||
52.42,
|
||||
43.34,
|
||||
22.04
|
||||
],
|
||||
"FE126R": [
|
||||
64.79,
|
||||
46.14,
|
||||
58.67,
|
||||
54.46,
|
||||
15.67,
|
||||
72.02,
|
||||
15.06,
|
||||
5.88,
|
||||
38.19,
|
||||
66.98,
|
||||
89.24,
|
||||
33.13,
|
||||
87.57,
|
||||
43.95,
|
||||
55.06,
|
||||
93.26,
|
||||
96.91,
|
||||
56.5,
|
||||
20.75,
|
||||
83.76,
|
||||
60.88,
|
||||
62.04,
|
||||
22.34,
|
||||
82.43
|
||||
],
|
||||
"FE125aR": [
|
||||
47.8,
|
||||
62.27,
|
||||
90.23,
|
||||
28.31,
|
||||
73.09,
|
||||
34.04,
|
||||
9.03,
|
||||
44.69,
|
||||
32.62,
|
||||
25.78,
|
||||
27.79,
|
||||
25.42,
|
||||
28.96,
|
||||
56.52,
|
||||
75.43,
|
||||
50.56,
|
||||
90.22,
|
||||
11.85,
|
||||
4.56,
|
||||
39.9,
|
||||
9.83,
|
||||
65.98,
|
||||
91.22,
|
||||
92.43
|
||||
],
|
||||
"FE125R": [
|
||||
28.31,
|
||||
10.16,
|
||||
13.22,
|
||||
41.44,
|
||||
97.19,
|
||||
60.08,
|
||||
34.13,
|
||||
16.75,
|
||||
92.7,
|
||||
79.48,
|
||||
3.08,
|
||||
14.71,
|
||||
4.4,
|
||||
0.88,
|
||||
77.6,
|
||||
57,
|
||||
31,
|
||||
86.14,
|
||||
44.31,
|
||||
45.7,
|
||||
6.85,
|
||||
65.62,
|
||||
77.97,
|
||||
49.2
|
||||
],
|
||||
"FE126aR": [
|
||||
94.32,
|
||||
86.26,
|
||||
5.13,
|
||||
47.33,
|
||||
40.01,
|
||||
34.97,
|
||||
18.69,
|
||||
81.81,
|
||||
87.37,
|
||||
96.47,
|
||||
16.04,
|
||||
23.33,
|
||||
0.66,
|
||||
16.86,
|
||||
13.19,
|
||||
67.32,
|
||||
37.63,
|
||||
13.74,
|
||||
22.85,
|
||||
78.89,
|
||||
9.52,
|
||||
75.46,
|
||||
0.2,
|
||||
1.51
|
||||
]
|
||||
}
|
||||
}
|
||||
112
websocket/response-example.json
Normal file
112
websocket/response-example.json
Normal file
@ -0,0 +1,112 @@
|
||||
[
|
||||
/** 窑炉信息下的8个字段 **/
|
||||
{
|
||||
"type": "kiln-info",
|
||||
"data": {
|
||||
/** 窑炉压力 **/
|
||||
"kilnPressure": "***Kpa",
|
||||
/** 循环水温度 **/
|
||||
"waterLoopTemperature": "...℃",
|
||||
/** 循环水流量 **/
|
||||
"waterLoopFlow": "+++m³/h",
|
||||
/** 循环水压力 **/
|
||||
"waterLoopPressure": "***Kpa",
|
||||
/** 助燃风压力 **/
|
||||
"windPressure": "***Kpa",
|
||||
/** 压缩气压力 **/
|
||||
"gasPressure": "***Kpa",
|
||||
/** 碹顶加权温度 **/
|
||||
"topTemperature": "...℃",
|
||||
/** 融化加权温度 **/
|
||||
"meltTemperature": "...℃"
|
||||
}
|
||||
},
|
||||
|
||||
/** 运行状态数据 **/
|
||||
{
|
||||
"type": "run-state",
|
||||
"data": {
|
||||
/** 剩余时间 **/
|
||||
"lastFireChangeTime": "3分28秒",
|
||||
/** 换火时间 **/
|
||||
"fireChangeTime": "20:00",
|
||||
/** 当前火向 **/
|
||||
"fireDirection": "东火"
|
||||
}
|
||||
},
|
||||
|
||||
/** 能源数据 **/
|
||||
{
|
||||
"type": "energy-cost",
|
||||
"data": {
|
||||
/** 余热发电 **/
|
||||
"restHeat": "***kWh",
|
||||
/** 水耗量 **/
|
||||
"water": "+++Km³",
|
||||
/** 电耗量 **/
|
||||
"electricity": "+++kWh",
|
||||
/** 天然气I **/
|
||||
"gasi": "...m³",
|
||||
/** 天然气II **/
|
||||
"gasii": "...m³"
|
||||
}
|
||||
},
|
||||
|
||||
/** 实时数据 gasii 代表天然气流量实时数据， wind 代表助燃风实时数据 **/
|
||||
{
|
||||
"type": "realtime",
|
||||
"data": {
|
||||
/** 天然气 **/
|
||||
"gasii": [
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h"
|
||||
],
|
||||
/** 助燃风 **/
|
||||
"wind": [
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h"
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
/** 历史趋势数据 gas 代表天然气流量历史趋势数据， wind 代表助燃风历史趋势数据 **/
|
||||
{
|
||||
"type": "his-trend",
|
||||
"data": {
|
||||
/** 天然气 **/
|
||||
"gas": {
|
||||
"FE111R": [],
|
||||
"FE113R": [],
|
||||
"FE112R": [],
|
||||
"FE115R": [],
|
||||
"FE116R": [],
|
||||
"FE117R": [],
|
||||
"FE114R": [],
|
||||
"FE118R": []
|
||||
},
|
||||
/** 助燃风 **/
|
||||
"wind": {
|
||||
"FE124R": [],
|
||||
"FE124aR": [],
|
||||
"FE123R": [],
|
||||
"FE123aR": [],
|
||||
"FE125R": [],
|
||||
"FE125aR": [],
|
||||
"FE126R": [],
|
||||
"FE126aR": []
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
133
websocket/server.ts
Normal file
133
websocket/server.ts
Normal file
@ -0,0 +1,133 @@
|
||||
import { WebSocket, WebSocketServer } from 'ws';
|
||||
import template from './template.json';
|
||||
import utils from './utils';
|
||||
|
||||
const wss = new WebSocketServer({ port: 9800 });
|
||||
const frequency = 10; // seconds
|
||||
const frequency1 = 1200; // seconds
|
||||
wss.on('connection', function (ws, req) {
|
||||
// console.log("ws", ws);
|
||||
console.log(
|
||||
'Client in: ',
|
||||
req.socket.remoteAddress,
|
||||
'current users:',
|
||||
wss.clients.size,
|
||||
);
|
||||
// ws.on("error", console.error);
|
||||
// ws.emit("message", "connected");
|
||||
ws.on('open', function () {
|
||||
console.log('connected');
|
||||
ws.send('connected');
|
||||
});
|
||||
ws.on('message', function (msg) {
|
||||
console.log('message from client', msg);
|
||||
ws.send('echo ' + msg.toString());
|
||||
});
|
||||
ws.on('error', console.error);
|
||||
|
||||
const timer = setInterval(() => {
|
||||
sendMsg(ws, 'kiln-info'); // 窑炉信息
|
||||
sendMsg(ws, 'energy-cost'); // 运行状态
|
||||
sendMsg(ws, 'run-state'); // 运行状态
|
||||
sendMsg(ws, 'realtime');
|
||||
sendMsg(ws, 'his-trend');
|
||||
// sendMsg(ws, 'gas');
|
||||
// sendMsg(ws, 'kiln-top');
|
||||
// sendMsg(ws, 'kiln-bottom');
|
||||
}, frequency * 1000);
|
||||
|
||||
const timer1 = setInterval(() => {
|
||||
// sendMsg(ws, 'run-state'); // 运行状态
|
||||
}, frequency1 * 1000);
|
||||
|
||||
ws.on('close', function () {
|
||||
console.log('停止监听');
|
||||
clearInterval(timer);
|
||||
clearInterval(timer1);
|
||||
});
|
||||
});
|
||||
|
||||
type MsgType =
|
||||
| 'kiln-info'
|
||||
| 'run-state'
|
||||
| 'energy-cost'
|
||||
| 'realtime'
|
||||
| 'his-trend'
|
||||
| 'fan'
|
||||
| 'gas'
|
||||
| 'kiln-top'
|
||||
| 'kiln-bottom';
|
||||
|
||||
type ResponseData = {
|
||||
[key: string]: string | string[];
|
||||
};
|
||||
|
||||
type ResponseDataComplex = {
|
||||
[key: string]: ResponseData;
|
||||
};
|
||||
|
||||
function sendMsg(ws: WebSocket, type: MsgType) {
|
||||
let data: ResponseData | ResponseDataComplex = {};
|
||||
switch (type) {
|
||||
case 'kiln-info':
|
||||
for (const key in template.kilnInfo) {
|
||||
data[key] = utils.getRandom(
|
||||
template.kilnInfo[key as keyof typeof template.kilnInfo],
|
||||
);
|
||||
}
|
||||
break;
|
||||
case 'energy-cost':
|
||||
for (const key in template.energyCost) {
|
||||
data[key] = utils.getRandom(
|
||||
template.energyCost[key as keyof typeof template.energyCost],
|
||||
);
|
||||
}
|
||||
break;
|
||||
case 'run-state':
|
||||
data = template.runState;
|
||||
data.fireDirection =
|
||||
Math.floor(Math.random() * 10) % 2 === 0 ? '南火' : '北火';
|
||||
break;
|
||||
case 'realtime':
|
||||
/** 天然气 实时流量 */
|
||||
data.gasii = template.realtime.gasii.map((v) => utils.getRandom(v));
|
||||
/** 助燃风 实时流量 */
|
||||
data.wind = template.realtime.wind.map((v) => utils.getRandom(v));
|
||||
break;
|
||||
case 'his-trend':
|
||||
const hisTrend: {
|
||||
gas: ResponseData;
|
||||
wind: ResponseData;
|
||||
} = {
|
||||
gas: {},
|
||||
wind: {},
|
||||
};
|
||||
Object.keys(template.hisTrend.gas).forEach((key) => {
|
||||
hisTrend.gas[key] = template.hisTrend.gas[
|
||||
key as keyof typeof template.hisTrend.gas
|
||||
].map((v) => utils.getRandom(v));
|
||||
});
|
||||
Object.keys(template.hisTrend.wind).forEach((key) => {
|
||||
hisTrend.wind[key] = template.hisTrend.wind[
|
||||
key as keyof typeof template.hisTrend.wind
|
||||
].map((v) => utils.getRandom(v));
|
||||
});
|
||||
data = hisTrend;
|
||||
break;
|
||||
case 'gas':
|
||||
// data = template.gas;
|
||||
break;
|
||||
case 'kiln-top':
|
||||
// data = template.kilnTop;
|
||||
break;
|
||||
case 'kiln-bottom':
|
||||
// data = template.kilnBottom;
|
||||
break;
|
||||
default:
|
||||
// data = 'You are connected!';
|
||||
break;
|
||||
}
|
||||
// console.log("sendMsg: ", ws);
|
||||
// ws.emit("message", JSON.stringify(data));
|
||||
ws.send(JSON.stringify({ type, data }));
|
||||
}
|
||||
892
websocket/template.json
Normal file
892
websocket/template.json
Normal file
@ -0,0 +1,892 @@
|
||||
{
|
||||
"kilnInfo": {
|
||||
"kilnPressure": "***Kpa",
|
||||
"waterLoopTemperature": "...℃",
|
||||
"waterLoopFlow": "+++m³/h",
|
||||
"waterLoopPressure": "***Kpa",
|
||||
"windPressure": "***Kpa",
|
||||
"gasPressure": "***Kpa",
|
||||
"topTemperature": "...℃",
|
||||
"meltTemperature": "...℃"
|
||||
},
|
||||
"energyCost": {
|
||||
"restHeat": "***kWh",
|
||||
"water": "+++Km³",
|
||||
"electricity": "+++kWh",
|
||||
"gasi": "...m³",
|
||||
"gasii": "...m³"
|
||||
},
|
||||
"runState": {
|
||||
"lastFireChangeTime": "19分28秒",
|
||||
"fireChangeTime": "19:56",
|
||||
"fireDirection": "南火"
|
||||
},
|
||||
"fan": [
|
||||
["8#压延冷却风机", "4373Hz", "正常"],
|
||||
["7#压延冷却风机", "4772Hz", "正常"],
|
||||
["6#压延冷却风机", "1704Hz", "正常"],
|
||||
["5#压延冷却风机", "3109Hz", "正常"],
|
||||
["4#压延冷却风机", "2595Hz", "正常"],
|
||||
["3#压延冷却风机", "8903Hz", "正常"],
|
||||
["2#压延冷却风机", "3741Hz", "正常"],
|
||||
["1#压延冷却风机", "9035Hz", "正常"],
|
||||
["4#熔化部风机", "5223Hz", "正常"],
|
||||
["3#熔化部风机", "9722Hz", "正常"],
|
||||
["2#熔化部风机", "9617Hz", "正常"],
|
||||
["1#熔化部风机", "7135Hz", "正常"],
|
||||
["4#澄清部风机", "1699Hz", "正常"],
|
||||
["3#澄清部风机", "2511Hz", "正常"],
|
||||
["2#澄清部风机", "9780Hz", "正常"],
|
||||
["1#澄清部风机", "3809Hz", "正常"],
|
||||
["2#助燃风机", "435Hz", "正常"],
|
||||
["1#助燃风机", "6270Hz", "正常"],
|
||||
["2#L吊墙风机", "8181Hz", "正常"],
|
||||
["1#L吊墙风机", "5587Hz", "正常"],
|
||||
["2#钢碹碴池壁风机", "6652Hz", "正常"],
|
||||
["1#钢碹碴池壁风机", "2000Hz", "正常"],
|
||||
["2#池壁拐角风机", "1972Hz", "正常"],
|
||||
["1#池壁拐角风机", "7730Hz", "正常"]
|
||||
],
|
||||
"realtime": {
|
||||
"gasii": [
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h"
|
||||
],
|
||||
"wind": [
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h",
|
||||
"...m³/h"
|
||||
]
|
||||
},
|
||||
"hisTrend": {
|
||||
"gas": {
|
||||
"FE111R": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
],
|
||||
"FE113R": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
],
|
||||
"FE112R": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
],
|
||||
"FE115R": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
],
|
||||
"FE114R": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
],
|
||||
"FE117R": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
],
|
||||
"FE116R": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
],
|
||||
"FE118R": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
]
|
||||
},
|
||||
"wind": {
|
||||
"FE124R": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
],
|
||||
"FE123aR": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
],
|
||||
"FE123R": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
],
|
||||
"FE124aR": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
],
|
||||
"FE126R": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
],
|
||||
"FE125aR": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
],
|
||||
"FE125R": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
],
|
||||
"FE126aR": [
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$",
|
||||
"$$$"
|
||||
]
|
||||
}
|
||||
},
|
||||
"kilnBottom": {
|
||||
"kilnTempBottomT1": {
|
||||
"TE316": [
|
||||
44,
|
||||
49,
|
||||
20,
|
||||
29,
|
||||
96,
|
||||
76,
|
||||
20,
|
||||
82,
|
||||
28,
|
||||
86,
|
||||
69,
|
||||
18,
|
||||
23,
|
||||
58,
|
||||
83,
|
||||
84,
|
||||
94,
|
||||
99,
|
||||
36,
|
||||
51,
|
||||
32
|
||||
],
|
||||
"TE315": [
|
||||
84,
|
||||
61,
|
||||
87,
|
||||
82,
|
||||
33,
|
||||
9,
|
||||
20,
|
||||
23,
|
||||
81,
|
||||
0,
|
||||
16,
|
||||
81,
|
||||
9,
|
||||
78,
|
||||
30,
|
||||
16,
|
||||
49,
|
||||
16,
|
||||
95,
|
||||
53,
|
||||
19
|
||||
],
|
||||
"TE314": [
|
||||
45,
|
||||
93,
|
||||
11,
|
||||
47,
|
||||
27,
|
||||
69,
|
||||
91,
|
||||
17,
|
||||
0,
|
||||
67,
|
||||
60,
|
||||
15,
|
||||
84,
|
||||
36,
|
||||
89,
|
||||
30,
|
||||
36,
|
||||
90,
|
||||
38,
|
||||
94,
|
||||
87
|
||||
],
|
||||
"TE313": [
|
||||
60,
|
||||
9,
|
||||
59,
|
||||
15,
|
||||
43,
|
||||
41,
|
||||
83,
|
||||
93,
|
||||
99,
|
||||
91,
|
||||
29,
|
||||
47,
|
||||
2,
|
||||
40,
|
||||
65,
|
||||
39,
|
||||
12,
|
||||
20,
|
||||
57,
|
||||
64,
|
||||
95
|
||||
],
|
||||
"TE312": [
|
||||
22,
|
||||
46,
|
||||
93,
|
||||
69,
|
||||
44,
|
||||
3,
|
||||
62,
|
||||
49,
|
||||
4,
|
||||
18,
|
||||
87,
|
||||
76,
|
||||
36,
|
||||
16,
|
||||
50,
|
||||
36,
|
||||
54,
|
||||
90,
|
||||
1,
|
||||
66,
|
||||
68
|
||||
]
|
||||
},
|
||||
"kilnTempBottomT2": {
|
||||
"TE319": [
|
||||
48,
|
||||
56,
|
||||
40,
|
||||
44,
|
||||
31,
|
||||
82,
|
||||
35,
|
||||
36,
|
||||
0,
|
||||
84,
|
||||
49,
|
||||
38,
|
||||
28,
|
||||
34,
|
||||
98,
|
||||
60,
|
||||
4,
|
||||
69,
|
||||
15,
|
||||
86,
|
||||
19
|
||||
],
|
||||
"TE318": [
|
||||
7,
|
||||
30,
|
||||
57,
|
||||
78,
|
||||
47,
|
||||
99,
|
||||
1,
|
||||
98,
|
||||
47,
|
||||
86,
|
||||
55,
|
||||
10,
|
||||
98,
|
||||
27,
|
||||
97,
|
||||
85,
|
||||
54,
|
||||
41,
|
||||
27,
|
||||
85,
|
||||
44
|
||||
],
|
||||
"TE317": [
|
||||
72,
|
||||
13,
|
||||
7,
|
||||
69,
|
||||
77,
|
||||
36,
|
||||
6,
|
||||
34,
|
||||
97,
|
||||
48,
|
||||
75,
|
||||
29,
|
||||
75,
|
||||
4,
|
||||
70,
|
||||
80,
|
||||
31,
|
||||
10,
|
||||
39,
|
||||
86,
|
||||
52
|
||||
],
|
||||
"TE321": [
|
||||
6,
|
||||
60,
|
||||
32,
|
||||
19,
|
||||
79,
|
||||
99,
|
||||
98,
|
||||
81,
|
||||
82,
|
||||
68,
|
||||
3,
|
||||
94,
|
||||
7,
|
||||
29,
|
||||
48,
|
||||
52,
|
||||
36,
|
||||
59,
|
||||
28,
|
||||
77,
|
||||
17
|
||||
],
|
||||
"TE320": [
|
||||
23,
|
||||
47,
|
||||
4,
|
||||
15,
|
||||
7,
|
||||
74,
|
||||
75,
|
||||
60,
|
||||
78,
|
||||
89,
|
||||
15,
|
||||
95,
|
||||
74,
|
||||
85,
|
||||
20,
|
||||
48,
|
||||
79,
|
||||
51,
|
||||
63,
|
||||
82,
|
||||
68
|
||||
]
|
||||
}
|
||||
},
|
||||
"kilnTop": {
|
||||
"kilnTempTopT2": {
|
||||
"TE215": [
|
||||
81,
|
||||
12,
|
||||
86,
|
||||
55,
|
||||
50,
|
||||
59,
|
||||
20,
|
||||
67,
|
||||
66,
|
||||
29,
|
||||
17,
|
||||
74,
|
||||
11,
|
||||
12,
|
||||
63,
|
||||
23,
|
||||
34,
|
||||
86,
|
||||
9,
|
||||
38,
|
||||
99,
|
||||
3,
|
||||
33,
|
||||
77
|
||||
],
|
||||
"TE214": [
|
||||
51,
|
||||
12,
|
||||
49,
|
||||
60,
|
||||
3,
|
||||
67,
|
||||
95,
|
||||
62,
|
||||
22,
|
||||
89,
|
||||
69,
|
||||
14,
|
||||
41,
|
||||
79,
|
||||
77,
|
||||
27,
|
||||
26,
|
||||
34,
|
||||
69,
|
||||
44,
|
||||
89,
|
||||
86,
|
||||
92,
|
||||
1
|
||||
],
|
||||
"TE213": [
|
||||
76,
|
||||
14,
|
||||
35,
|
||||
1,
|
||||
36,
|
||||
67,
|
||||
40,
|
||||
5,
|
||||
53,
|
||||
98,
|
||||
46,
|
||||
29,
|
||||
71,
|
||||
12,
|
||||
43,
|
||||
42,
|
||||
53,
|
||||
56,
|
||||
9,
|
||||
17,
|
||||
34,
|
||||
42,
|
||||
82,
|
||||
73
|
||||
]
|
||||
},
|
||||
"kilnTempTopT1": {
|
||||
"TE209": [
|
||||
51,
|
||||
12,
|
||||
49,
|
||||
60,
|
||||
3,
|
||||
67,
|
||||
95,
|
||||
62,
|
||||
22,
|
||||
89,
|
||||
69,
|
||||
14,
|
||||
41,
|
||||
79,
|
||||
77,
|
||||
27,
|
||||
26,
|
||||
34,
|
||||
69,
|
||||
44,
|
||||
89,
|
||||
86,
|
||||
92,
|
||||
1
|
||||
],
|
||||
"TE208": [
|
||||
76,
|
||||
14,
|
||||
35,
|
||||
1,
|
||||
36,
|
||||
67,
|
||||
40,
|
||||
5,
|
||||
53,
|
||||
98,
|
||||
46,
|
||||
29,
|
||||
71,
|
||||
12,
|
||||
43,
|
||||
42,
|
||||
53,
|
||||
56,
|
||||
9,
|
||||
17,
|
||||
34,
|
||||
42,
|
||||
82,
|
||||
73
|
||||
],
|
||||
"TE210": [
|
||||
81,
|
||||
12,
|
||||
86,
|
||||
55,
|
||||
50,
|
||||
59,
|
||||
20,
|
||||
67,
|
||||
66,
|
||||
29,
|
||||
17,
|
||||
74,
|
||||
11,
|
||||
12,
|
||||
63,
|
||||
23,
|
||||
34,
|
||||
86,
|
||||
9,
|
||||
38,
|
||||
99,
|
||||
3,
|
||||
33,
|
||||
77
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
109
websocket/tsconfig.json
Normal file
109
websocket/tsconfig.json
Normal file
@ -0,0 +1,109 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
/* Visit https://aka.ms/tsconfig to read more about this file */
|
||||
|
||||
/* Projects */
|
||||
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
|
||||
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
||||
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
|
||||
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
|
||||
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
||||
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
||||
|
||||
/* Language and Environment */
|
||||
"target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
|
||||
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
|
||||
// "jsx": "preserve", /* Specify what JSX code is generated. */
|
||||
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
||||
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
|
||||
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
||||
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
|
||||
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
|
||||
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
||||
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
||||
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
|
||||
|
||||
/* Modules */
|
||||
"module": "commonjs" /* Specify what module code is generated. */,
|
||||
// "rootDir": "./", /* Specify the root folder within your source files. */
|
||||
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
|
||||
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
|
||||
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
|
||||
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
||||
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
|
||||
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
||||
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
|
||||
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
|
||||
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
|
||||
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
|
||||
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
|
||||
"resolveJsonModule": true /* Enable importing .json files. */,
|
||||
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
|
||||
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
|
||||
|
||||
/* JavaScript Support */
|
||||
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
|
||||
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
|
||||
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
|
||||
|
||||
/* Emit */
|
||||
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
|
||||
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
||||
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
||||
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
|
||||
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
||||
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
|
||||
// "outDir": "./", /* Specify an output folder for all emitted files. */
|
||||
// "removeComments": true, /* Disable emitting comments. */
|
||||
// "noEmit": true, /* Disable emitting files from a compilation. */
|
||||
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
|
||||
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
|
||||
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
|
||||
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
||||
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
||||
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
||||
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
||||
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
|
||||
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
|
||||
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
|
||||
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
|
||||
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
||||
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
|
||||
|
||||
/* Interop Constraints */
|
||||
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
|
||||
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
|
||||
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
|
||||
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
|
||||
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
||||
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
|
||||
|
||||
/* Type Checking */
|
||||
"strict": true /* Enable all strict type-checking options. */,
|
||||
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
|
||||
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
|
||||
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
||||
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
|
||||
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
||||
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
|
||||
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
|
||||
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
||||
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
|
||||
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
|
||||
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
||||
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
||||
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
||||
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
|
||||
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
||||
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
|
||||
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
||||
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
||||
|
||||
/* Completeness */
|
||||
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
||||
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
||||
}
|
||||
}
|
||||
48
websocket/utils.ts
Normal file
48
websocket/utils.ts
Normal file
@ -0,0 +1,48 @@
|
||||
export default {
|
||||
// 生成随机数
|
||||
randomNum({ min, max }: { min: number; max: number }, isFloat = false) {
|
||||
if (isFloat) return (Math.random() * (max - min) + min).toFixed(2);
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
},
|
||||
getMinmax(type: '*' | '.' | '+' | '$') {
|
||||
let min: number, max: number;
|
||||
switch (type) {
|
||||
case '*':
|
||||
min = 30;
|
||||
max = 150;
|
||||
break;
|
||||
case '.':
|
||||
min = 60;
|
||||
max = 200;
|
||||
break;
|
||||
case '+':
|
||||
min = 20;
|
||||
max = 70;
|
||||
break;
|
||||
case '$':
|
||||
min = 1;
|
||||
max = 100;
|
||||
break;
|
||||
}
|
||||
return { min, max };
|
||||
},
|
||||
getRandom(value: string) {
|
||||
value = value.replace(
|
||||
'***',
|
||||
'' + this.randomNum({ ...this.getMinmax('*') }),
|
||||
);
|
||||
value = value.replace(
|
||||
'...',
|
||||
'' + this.randomNum({ ...this.getMinmax('.') }),
|
||||
);
|
||||
value = value.replace(
|
||||
'+++',
|
||||
'' + this.randomNum({ ...this.getMinmax('+') }),
|
||||
);
|
||||
value = value.replace(
|
||||
'$$$',
|
||||
'' + this.randomNum({ ...this.getMinmax('$') }, true),
|
||||
);
|
||||
return value;
|
||||
},
|
||||
};
|
||||
Ladataan…
Viittaa uudesa ongelmassa
Block a user