311 lines
12 KiB
TypeScript
311 lines
12 KiB
TypeScript
import { ArrowLeft, Eye } from "lucide-react";
|
|
import { useNavigate } from "react-router";
|
|
import { useState } from "react";
|
|
|
|
export default function ParameterConfiguration() {
|
|
const navigate = useNavigate();
|
|
const [transmissionVoltage, setTransmissionVoltage] = useState("1500V");
|
|
const [transmissionCurrent, setTransmissionCurrent] = useState("10A");
|
|
const [pulseWidthOptions] = useState([
|
|
{ value: "0.25s", checked: true },
|
|
{ value: "0.5s", checked: true },
|
|
{ value: "1s", checked: true },
|
|
{ value: "2s", checked: true },
|
|
{ value: "4s", checked: true },
|
|
{ value: "8s", checked: true },
|
|
{ value: "16s", checked: true },
|
|
{ value: "32s", checked: true },
|
|
{ value: "64s", checked: true },
|
|
]);
|
|
const [waveformOptions] = useState([
|
|
{ value: "0+0-", checked: true },
|
|
{ value: "+0-0", checked: true },
|
|
{ value: "+-", checked: true },
|
|
]);
|
|
const [samplingRateOptions] = useState([
|
|
{ value: "50Hz", checked: true },
|
|
{ value: "60Hz", checked: true },
|
|
{ value: "100Hz", checked: true },
|
|
{ value: "1000Hz", checked: true },
|
|
]);
|
|
|
|
return (
|
|
<div className="p-6">
|
|
{/* Page Header */}
|
|
<div className="mb-6">
|
|
<div className="flex items-center gap-4 mb-2">
|
|
<button
|
|
onClick={() => navigate(-1)}
|
|
className="p-2 rounded hover:bg-gray-100 transition-colors"
|
|
style={{ color: 'rgba(0, 0, 0, 0.65)' }}
|
|
>
|
|
<ArrowLeft size={20} />
|
|
</button>
|
|
<h2 className="text-2xl font-semibold">参数配置</h2>
|
|
</div>
|
|
<p className="text-sm ml-12" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>配置设备型号的详细参数</p>
|
|
</div>
|
|
|
|
{/* Model Info Card */}
|
|
<div className="bg-white p-6 rounded-lg mb-6" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
|
|
<h3 className="text-lg font-semibold mb-6">型号信息</h3>
|
|
<div className="grid grid-cols-3 gap-x-12 gap-y-6">
|
|
<div>
|
|
<div className="text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>适配型号</div>
|
|
<div className="font-medium">GD30 地质探测仪</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>当前配置版本</div>
|
|
<div style={{ color: '#1890FF' }}>v1.2.0</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>最后更新时间</div>
|
|
<div style={{ color: 'rgba(0, 0, 0, 0.65)' }}>2024-03-01 10:30</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Transmission Parameters Card */}
|
|
<div className="bg-white p-6 rounded-lg mb-6" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
|
|
<h3 className="text-lg font-semibold mb-6">发射参数</h3>
|
|
<div className="grid grid-cols-2 gap-x-12 gap-y-6">
|
|
<div>
|
|
<label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
|
|
最大发射电压
|
|
</label>
|
|
<select
|
|
className="w-full px-3 py-2 border rounded"
|
|
style={{ borderColor: '#D9D9D9', backgroundColor: '#fff' }}
|
|
value={transmissionVoltage}
|
|
onChange={(e) => setTransmissionVoltage(e.target.value)}
|
|
>
|
|
<option>500V</option>
|
|
<option>800V</option>
|
|
<option>1000V</option>
|
|
<option>1200V</option>
|
|
<option>1500V</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
|
|
最大发射电流
|
|
</label>
|
|
<select
|
|
className="w-full px-3 py-2 border rounded"
|
|
style={{ borderColor: '#D9D9D9', backgroundColor: '#fff' }}
|
|
value={transmissionCurrent}
|
|
onChange={(e) => setTransmissionCurrent(e.target.value)}
|
|
>
|
|
<option>2A</option>
|
|
<option>5A</option>
|
|
<option>8A</option>
|
|
<option>10A</option>
|
|
<option>15A</option>
|
|
</select>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-sm mb-3" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
|
|
发射脉宽
|
|
</label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{pulseWidthOptions.map((option) => (
|
|
<label
|
|
key={option.value}
|
|
className="px-4 py-2 rounded border cursor-pointer transition-colors"
|
|
style={{
|
|
borderColor: option.checked ? '#1890FF' : '#D9D9D9',
|
|
backgroundColor: option.checked ? '#E6F7FF' : '#fff',
|
|
color: option.checked ? '#1890FF' : 'rgba(0, 0, 0, 0.65)'
|
|
}}
|
|
>
|
|
<input type="checkbox" className="hidden" checked={option.checked} readOnly />
|
|
{option.value}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-sm mb-3" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
|
|
发射波形
|
|
</label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{waveformOptions.map((option) => (
|
|
<label
|
|
key={option.value}
|
|
className="px-4 py-2 rounded border cursor-pointer transition-colors"
|
|
style={{
|
|
borderColor: option.checked ? '#1890FF' : '#D9D9D9',
|
|
backgroundColor: option.checked ? '#E6F7FF' : '#fff',
|
|
color: option.checked ? '#1890FF' : 'rgba(0, 0, 0, 0.65)'
|
|
}}
|
|
>
|
|
<input type="checkbox" className="hidden" checked={option.checked} readOnly />
|
|
{option.value}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Acquisition Parameters Card */}
|
|
<div className="bg-white p-6 rounded-lg mb-6" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
|
|
<h3 className="text-lg font-semibold mb-6">采集参数</h3>
|
|
<div className="grid grid-cols-2 gap-x-12 gap-y-6">
|
|
<div className="col-span-2">
|
|
<label className="block text-sm mb-3" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
|
|
采样率
|
|
</label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{samplingRateOptions.map((option) => (
|
|
<label
|
|
key={option.value}
|
|
className="px-4 py-2 rounded border cursor-pointer transition-colors"
|
|
style={{
|
|
borderColor: option.checked ? '#1890FF' : '#D9D9D9',
|
|
backgroundColor: option.checked ? '#E6F7FF' : '#fff',
|
|
color: option.checked ? '#1890FF' : 'rgba(0, 0, 0, 0.65)'
|
|
}}
|
|
>
|
|
<input type="checkbox" className="hidden" checked={option.checked} readOnly />
|
|
{option.value}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
|
|
支持通道数
|
|
</label>
|
|
<input
|
|
type="number"
|
|
className="w-full px-3 py-2 border rounded"
|
|
style={{ borderColor: '#D9D9D9' }}
|
|
defaultValue="32"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
|
|
迭代次数范围
|
|
</label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="number"
|
|
className="flex-1 px-3 py-2 border rounded"
|
|
style={{ borderColor: '#D9D9D9' }}
|
|
defaultValue="1"
|
|
/>
|
|
<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>-</span>
|
|
<input
|
|
type="number"
|
|
className="flex-1 px-3 py-2 border rounded"
|
|
style={{ borderColor: '#D9D9D9' }}
|
|
defaultValue="256"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Network Parameters Card */}
|
|
<div className="bg-white p-6 rounded-lg mb-6" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
|
|
<h3 className="text-lg font-semibold mb-6">网络参数</h3>
|
|
<div className="grid grid-cols-2 gap-x-12 gap-y-6">
|
|
<div>
|
|
<label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
|
|
WiFi SSID
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="w-full px-3 py-2 border rounded"
|
|
style={{ borderColor: '#D9D9D9' }}
|
|
defaultValue="GD30_Device"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
|
|
WiFi密码
|
|
</label>
|
|
<input
|
|
type="password"
|
|
className="w-full px-3 py-2 border rounded"
|
|
style={{ borderColor: '#D9D9D9' }}
|
|
defaultValue="12345678"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
|
|
默认IP地址
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="w-full px-3 py-2 border rounded"
|
|
style={{ borderColor: '#D9D9D9' }}
|
|
defaultValue="192.168.1.100"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
|
|
子网掩码
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="w-full px-3 py-2 border rounded"
|
|
style={{ borderColor: '#D9D9D9' }}
|
|
defaultValue="255.255.255.0"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
|
|
默认网关
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="w-full px-3 py-2 border rounded"
|
|
style={{ borderColor: '#D9D9D9' }}
|
|
defaultValue="192.168.1.1"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>
|
|
DNS服务器
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="w-full px-3 py-2 border rounded"
|
|
style={{ borderColor: '#D9D9D9' }}
|
|
defaultValue="8.8.8.8"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Bar */}
|
|
<div
|
|
className="flex items-center justify-end gap-3 p-4 bg-white rounded-lg sticky bottom-0"
|
|
style={{ boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.05)' }}
|
|
>
|
|
<button
|
|
className="px-6 py-2 rounded"
|
|
style={{ border: '1px solid #D9D9D9', color: 'rgba(0, 0, 0, 0.85)' }}
|
|
>
|
|
重置默认
|
|
</button>
|
|
<button
|
|
className="px-6 py-2 rounded flex items-center gap-2"
|
|
style={{ border: '1px solid #D9D9D9', color: 'rgba(0, 0, 0, 0.85)' }}
|
|
>
|
|
<Eye size={16} />
|
|
预览配置
|
|
</button>
|
|
<button
|
|
className="px-6 py-2 rounded text-white"
|
|
style={{ backgroundColor: '#1890FF' }}
|
|
>
|
|
下发配置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|