diff --git a/package-lock.json b/package-lock.json index e310069..eff884f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -65,6 +65,7 @@ "style-loader": "^3.3.1", "tailwindcss": "^3.0.2", "terser-webpack-plugin": "^5.2.5", + "uuid": "^9.0.1", "webpack": "^5.64.4", "webpack-dev-server": "^4.6.0", "webpack-manifest-plugin": "^4.0.2", @@ -72,6 +73,7 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@types/uuid": "^9.0.7", "less": "^4.2.0", "less-loader": "^11.1.3", "typescript": "^5.3.3" @@ -4786,6 +4788,12 @@ "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" }, + "node_modules/@types/uuid": { + "version": "9.0.7", + "resolved": "https://registry.npmmirror.com/@types/uuid/-/uuid-9.0.7.tgz", + "integrity": "sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==", + "dev": true + }, "node_modules/@types/ws": { "version": "8.5.10", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz", @@ -17485,6 +17493,14 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", @@ -18785,9 +18801,9 @@ } }, "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "version": "9.0.1", + "resolved": "https://registry.npmmirror.com/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", "bin": { "uuid": "dist/bin/uuid" } @@ -23064,6 +23080,12 @@ "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" }, + "@types/uuid": { + "version": "9.0.7", + "resolved": "https://registry.npmmirror.com/@types/uuid/-/uuid-9.0.7.tgz", + "integrity": "sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==", + "dev": true + }, "@types/ws": { "version": "8.5.10", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz", @@ -32061,6 +32083,13 @@ "faye-websocket": "^0.11.3", "uuid": "^8.3.2", "websocket-driver": "^0.7.4" + }, + "dependencies": { + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + } } }, "source-list-map": { @@ -33024,9 +33053,9 @@ "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==" }, "uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + "version": "9.0.1", + "resolved": "https://registry.npmmirror.com/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==" }, "v8-to-istanbul": { "version": "8.1.1", diff --git a/package.json b/package.json index 7130c00..d3610f2 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "style-loader": "^3.3.1", "tailwindcss": "^3.0.2", "terser-webpack-plugin": "^5.2.5", + "uuid": "^9.0.1", "webpack": "^5.64.4", "webpack-dev-server": "^4.6.0", "webpack-manifest-plugin": "^4.0.2", @@ -90,6 +91,7 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@types/uuid": "^9.0.7", "less": "^4.2.0", "less-loader": "^11.1.3", "typescript": "^5.3.3" diff --git a/src/App.js b/src/App.js index 3a6e5e1..2a1487d 100644 --- a/src/App.js +++ b/src/App.js @@ -15,7 +15,7 @@ function App() { return ( <> -
+
setNavActive(v)} /> diff --git a/src/assets/Icon/temp.svg b/src/assets/Icon/temp.svg new file mode 100644 index 0000000..12ff393 --- /dev/null +++ b/src/assets/Icon/temp.svg @@ -0,0 +1,14 @@ + + + 温度 + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/offline.png b/src/assets/offline.png new file mode 100644 index 0000000..96e68b8 Binary files /dev/null and b/src/assets/offline.png differ diff --git a/src/assets/online.png b/src/assets/online.png new file mode 100644 index 0000000..3ebe8c0 Binary files /dev/null and b/src/assets/online.png differ diff --git a/src/components/Common/AmenSelector/index.jsx b/src/components/Common/AmenSelector/index.jsx new file mode 100644 index 0000000..d8d95a6 --- /dev/null +++ b/src/components/Common/AmenSelector/index.jsx @@ -0,0 +1,5 @@ +function AmenSelector() { + return
; +} + +export default AmenSelector; diff --git a/src/components/Common/Company/index.module.scss b/src/components/Common/Company/index.module.scss index 13c60f7..e86e956 100644 --- a/src/components/Common/Company/index.module.scss +++ b/src/components/Common/Company/index.module.scss @@ -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; diff --git a/src/components/Common/CurrentTemp/index.jsx b/src/components/Common/CurrentTemp/index.jsx index a66b237..6f14df0 100644 --- a/src/components/Common/CurrentTemp/index.jsx +++ b/src/components/Common/CurrentTemp/index.jsx @@ -59,7 +59,7 @@ function WindFrequence(props) { return ( +
- 余 热 发 电 + 余 热 发 电 {energyInfo?.elecQty1 || 0}kWh
diff --git a/src/components/Common/FanRunFrequence/index.jsx b/src/components/Common/FanRunFrequence/index.jsx index c668b5f..1b1f7ad 100644 --- a/src/components/Common/FanRunFrequence/index.jsx +++ b/src/components/Common/FanRunFrequence/index.jsx @@ -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 ( + +
+ {/* {showChart && ( + + )} */} + {!showChart && ( +
+ {dataList.map((item) => ( +
+ {item.name} + + {item.value} + +
+ ))} +
+ )} +
+ + ); +} + +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 ( - -
- {/* {showChart && ( - - )} */} - {!showChart && ( -
- {dataList.map((item) => ( -
- {item.name} - - {item.value} - -
- ))} -
- )} -
- - ); + return [options, dataList]; } - -export default WindFrequence; diff --git a/src/components/Common/GasFlow/index.jsx b/src/components/Common/GasFlow/index.jsx index fe955ac..1ce07a8 100644 --- a/src/components/Common/GasFlow/index.jsx +++ b/src/components/Common/GasFlow/index.jsx @@ -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 ( + +
+
+ + {showChart && 历史详情} + {!showChart && 实时流量} +
+
+ +
+ {showChart && ( + + )} + {!showChart && ( +
+ {dataList.map((item) => ( +
+ {item.name} + {item.value} + {/* {item.name}: {item.value} */} +
+ ))} +
+ )} +
+ + ); +} + +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 ( - -
-
- - {showChart && 历史详情} - {!showChart && 实时流量} -
-
- -
- {showChart && ( - - )} - {!showChart && ( -
- {dataList.map((item) => ( -
- {item.name}: {item.value} -
- ))} -
- )} -
- - ); + return [options, dataList]; } - -export default GasI; diff --git a/src/components/Common/GasFlow/index.module.css b/src/components/Common/GasFlow/index.module.css index 0936646..f9b9218 100644 --- a/src/components/Common/GasFlow/index.module.css +++ b/src/components/Common/GasFlow/index.module.css @@ -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 { diff --git a/src/components/Common/GraphBase/index.module.css b/src/components/Common/GraphBase/index.module.css index b8827bd..0d1b914 100644 --- a/src/components/Common/GraphBase/index.module.css +++ b/src/components/Common/GraphBase/index.module.css @@ -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; diff --git a/src/components/Common/KilnInfo/Kiln.jsx b/src/components/Common/KilnInfo/Kiln.jsx index 22d8557..6829640 100644 --- a/src/components/Common/KilnInfo/Kiln.jsx +++ b/src/components/Common/KilnInfo/Kiln.jsx @@ -16,7 +16,9 @@ export default function Kiln() {
{infos.map((item) => (
- {item.label}: {item.value} + {item.label} + {item.value} + {/* {item.label}: {item.value} */}
))}
diff --git a/src/components/Common/KilnInfo/kiln.module.scss b/src/components/Common/KilnInfo/kiln.module.scss index dec379a..b2a1f18 100644 --- a/src/components/Common/KilnInfo/kiln.module.scss +++ b/src/components/Common/KilnInfo/kiln.module.scss @@ -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; + } } } } diff --git a/src/components/Common/NatGasFlow/gridList/index.jsx b/src/components/Common/NatGasFlow/gridList/index.jsx index 7786083..b0152e5 100644 --- a/src/components/Common/NatGasFlow/gridList/index.jsx +++ b/src/components/Common/NatGasFlow/gridList/index.jsx @@ -46,7 +46,9 @@ function GridList(props) {
{dataList.map((item) => (
- {item.name}: {item.value} + {item.name} + {item.value} + {/* {item.name}: {item.value} */}
))}
diff --git a/src/components/Common/NatGasFlow/gridList/index.module.css b/src/components/Common/NatGasFlow/gridList/index.module.css index 536b3da..60ffd9c 100644 --- a/src/components/Common/NatGasFlow/gridList/index.module.css +++ b/src/components/Common/NatGasFlow/gridList/index.module.css @@ -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; } diff --git a/src/components/Common/NatGasFlow/index.module.css b/src/components/Common/NatGasFlow/index.module.css index 63e0a05..1fa1f50 100644 --- a/src/components/Common/NatGasFlow/index.module.css +++ b/src/components/Common/NatGasFlow/index.module.css @@ -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; diff --git a/src/components/Common/TodayFaultTotal/index.jsx b/src/components/Common/TodayFaultTotal/index.jsx index e5f10c4..7de2381 100644 --- a/src/components/Common/TodayFaultTotal/index.jsx +++ b/src/components/Common/TodayFaultTotal/index.jsx @@ -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 ( + +
+ {currentStatistic.length != 0 && ( + + )} + {currentStatistic.length == 0 && ( +

+ 暂无数据 +

+ )} +
+ + ); +} + +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 ( - -
- {currentStatistic.length != 0 && ( - - )} - {currentStatistic.length == 0 && ( -

- 暂无数据 -

- )} -
- - ); -} - -export default FaultTotal; diff --git a/src/components/Common/TodayFaultType/index.jsx b/src/components/Common/TodayFaultType/index.jsx index d048303..a68f610 100644 --- a/src/components/Common/TodayFaultType/index.jsx +++ b/src/components/Common/TodayFaultType/index.jsx @@ -45,7 +45,7 @@ function FaultType(props) { return ( item.value), }, ], diff --git a/src/components/container.module.scss b/src/components/container.module.scss index 5609e4e..e175358 100644 --- a/src/components/container.module.scss +++ b/src/components/container.module.scss @@ -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; diff --git a/src/hooks/useIcon.js b/src/hooks/useIcon.js index e15ba9b..bf06639 100644 --- a/src/hooks/useIcon.js +++ b/src/hooks/useIcon.js @@ -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; } diff --git a/src/index.css b/src/index.css index 844937d..a1e8af2 100644 --- a/src/index.css +++ b/src/index.css @@ -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; +} diff --git a/src/utils/index.ts b/src/utils/index.ts index 66bf2ef..515ac17 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -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,