diff --git a/client/src/sections/wuyuanbiaoba/components/AdvancedSettings.jsx b/client/src/sections/wuyuanbiaoba/components/AdvancedSettings.jsx new file mode 100644 index 0000000..4f4eabe --- /dev/null +++ b/client/src/sections/wuyuanbiaoba/components/AdvancedSettings.jsx @@ -0,0 +1,493 @@ +import React, { useState } from "react"; +import { + Card, + Input, + Slider, + InputNumber, + Switch, + Select, + Row, + Col, + Button, + message, + Space, + Typography, +} from "antd"; +import { + SettingOutlined, + SaveOutlined, + ReloadOutlined, + DatabaseOutlined, + ClockCircleOutlined, + BellOutlined, + FilterOutlined, + CloudUploadOutlined, +} from "@ant-design/icons"; + +const { Option } = Select; +const { Title, Text } = Typography; + +const AdvancedSettings = ({ onLogout }) => { + const [deviceId, setDeviceId] = useState(""); + const [fps, setFps] = useState(5); + const [enableOfflineAlert, setEnableOfflineAlert] = useState(false); + const [offlineThreshold, setOfflineThreshold] = useState(60); + const [enableFiltering, setEnableFiltering] = useState(true); + const [filterMethod, setFilterMethod] = useState("median"); + const [windowSize, setWindowSize] = useState(5); + const [filterThreshold, setFilterThreshold] = useState(0.1); + const [flowThreshold, setFlowThreshold] = useState(10.0); + const [enableMqtt, setEnableMqtt] = useState(true); + const [brokerAddress, setBrokerAddress] = useState(""); + const [mqttPort, setMqttPort] = useState(""); + const [mqttTopic, setMqttTopic] = useState(""); + const [mqttClientId, setMqttClientId] = useState(""); + const [mqttUsername, setMqttUsername] = useState(""); + const [mqttPassword, setMqttPassword] = useState(""); + + const handleSave = () => message.success("配置已保存"); + const handleReset = () => { + setDeviceId(""); + setFps(5); + setEnableOfflineAlert(false); + setOfflineThreshold(60); + setEnableFiltering(true); + setFilterMethod("median"); + setWindowSize(5); + setFilterThreshold(0.1); + setFlowThreshold(10.0); + setEnableMqtt(true); + setBrokerAddress(""); + setMqttPort(""); + setMqttTopic(""); + setMqttClientId(""); + setMqttUsername(""); + setMqttPassword(""); + message.info("配置已重置"); + }; + + return ( +
+ + + + + + <SettingOutlined /> + 高级参数配置 + + + 针对下位机运行的参数配置，修改后请及时保存(慎用) + + + + + + + + + + + + + + + + + 基础设备信息 + + } + + style={{ + marginBottom: 12, + borderRadius: 12, + paddingLeft: 24, + paddingRight: 24, + }} + > +
+ 设备编码 +
+ setDeviceId(e.target.value)} + placeholder="请输入设备编码" + size="large" + style={{ borderRadius: 8 }} + /> + + + + + 数据帧率 (FPS) + + } + + style={{ + marginBottom: 12, + borderRadius: 12, + paddingLeft: 24, + paddingRight: 24, + }} + > +
+ 数据帧率 +
+ + + + + + + + + + 有效范围 1~30 Hz + + + + + + 异常监控与报警 + + } + + style={{ + marginBottom: 12, + borderRadius: 12, + paddingLeft: 24, + paddingRight: 24, + }} + > +
+ + + 启用离线超时告警 +
+ + 超过此时长未接收到新数据则触发报警 + + + + + + +
+
+ 超时阈值 +
+ + + + + + + + 数据滤波与异常记录 + + } + + style={{ + marginBottom: 12, + borderRadius: 12, + paddingLeft: 24, + paddingRight: 24, + }} + > +
+ + + 滤波配置 +
+ + 启用数据滤波算法 + + + + + + +
+ + +
+ 滤波方法 +
+ + + +
+ 窗口大小 +
+ + + +
+ 滤波阈值 +
+ + + +
+ 波动阈值 +
+ + + + + + + + + 数据上报 (MQTT) + + +
+ } + + style={{ + borderRadius: 12, + paddingLeft: 24, + paddingRight: 24, + }} + > + + +
+ Broker Address +
+ setBrokerAddress(e.target.value)} + placeholder="例如: 218.3.126.49" + size="large" + disabled={!enableMqtt} + style={{ borderRadius: 8 }} + /> + + +
+ Port +
+ setMqttPort(e.target.value)} + placeholder="1883" + size="large" + disabled={!enableMqtt} + style={{ borderRadius: 8 }} + /> + + +
+ Topic +
+ setMqttTopic(e.target.value)} + placeholder="例如: wybb/z/mqtt179" + size="large" + disabled={!enableMqtt} + style={{ borderRadius: 8 }} + /> + + +
+ Client ID +
+ setMqttClientId(e.target.value)} + placeholder="wybb_z1_123" + size="large" + disabled={!enableMqtt} + style={{ borderRadius: 8 }} + /> + + +
+ Username +
+ setMqttUsername(e.target.value)} + placeholder="用户名" + size="large" + disabled={!enableMqtt} + style={{ borderRadius: 8 }} + /> + + +
+ Password +
+ setMqttPassword(e.target.value)} + placeholder="密码" + size="large" + disabled={!enableMqtt} + style={{ borderRadius: 8 }} + /> + + + + + + + ); +}; + +export default AdvancedSettings; diff --git a/client/src/sections/wuyuanbiaoba/components/index.js b/client/src/sections/wuyuanbiaoba/components/index.js index a55d6d2..b1f5ff0 100644 --- a/client/src/sections/wuyuanbiaoba/components/index.js +++ b/client/src/sections/wuyuanbiaoba/components/index.js @@ -6,3 +6,4 @@ export { default as RealtimeDataTable } from './RealtimeDataTable'; export { default as TemplateModal } from './TemplateModal'; export { default as TargetDetailModal } from './TargetDetailModal'; export { default as AdvancedConfigAuth } from './AdvancedConfigAuth'; +export { default as AdvancedSettings } from './AdvancedSettings'; diff --git a/client/src/sections/wuyuanbiaoba/container/index.jsx b/client/src/sections/wuyuanbiaoba/container/index.jsx index ffacc0d..b21bb96 100644 --- a/client/src/sections/wuyuanbiaoba/container/index.jsx +++ b/client/src/sections/wuyuanbiaoba/container/index.jsx @@ -12,6 +12,7 @@ import { TemplateModal, TargetDetailModal, AdvancedConfigAuth, + AdvancedSettings, } from "../components"; import { WebSocketProvider, @@ -520,7 +521,7 @@ const WuyuanbiaobaContent = () => { style={{ border: "none", fontSize: "18px", - justifyContent: "flex-end" + justifyContent: "flex-end", }} items={[ { @@ -619,21 +620,7 @@ const WuyuanbiaobaContent = () => { {currentMenu === "advanced" && (
{isUnlocked ? ( -
-
- -
高级配置功能开发中...
-
-
+ ) : (