430 lines
17 KiB
Vue
430 lines
17 KiB
Vue
<script setup lang="ts">
|
|
import { ArrowLeft, Eye } from 'lucide-vue-next'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { ref, computed } from 'vue'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const isNew = computed(() => route.params.configId === 'new')
|
|
const selectedModel = ref('GD30')
|
|
const configVersion = ref('v1.0.0')
|
|
const transmissionVoltage = ref('1500V')
|
|
const transmissionCurrent = ref('10A')
|
|
const voltageMeasureOptions = ref([
|
|
{ value: '±2.5V', checked: true },
|
|
{ value: '±80V', checked: true },
|
|
{ value: '±600V', checked: false },
|
|
])
|
|
const supportFullWaveform = ref(true)
|
|
const supportDuty50 = ref(true)
|
|
const supportDuty100 = ref(true)
|
|
const overvoltageProtection = ref(true)
|
|
const overvoltageThreshold = ref('1600')
|
|
const overcurrentProtection = ref(true)
|
|
const overcurrentThreshold = ref('12')
|
|
const shortCircuitProtection = ref(true)
|
|
const highTempProtection = ref(true)
|
|
const highTempThreshold = ref('75')
|
|
const pulseWidthOptions = ref([
|
|
{ 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 = ref([
|
|
{ value: '0+0-', checked: true },
|
|
{ value: '+0-0', checked: true },
|
|
{ value: '+-', checked: true },
|
|
])
|
|
const samplingRateOptions = ref([
|
|
{ value: '50Hz', checked: true },
|
|
{ value: '60Hz', checked: true },
|
|
{ value: '100Hz', checked: true },
|
|
{ value: '1000Hz', checked: true },
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-6">
|
|
<!-- Page Header -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center gap-4 mb-2">
|
|
<button
|
|
@click="router.go(-1)"
|
|
class="p-2 rounded hover:bg-gray-100 transition-colors"
|
|
style="color: rgba(0, 0, 0, 0.65)"
|
|
>
|
|
<ArrowLeft :size="20" />
|
|
</button>
|
|
<h2 class="text-2xl font-semibold">{{ isNew ? '新建配置文件' : '参数配置' }}</h2>
|
|
</div>
|
|
<p class="text-sm ml-12" style="color: rgba(0, 0, 0, 0.45)">{{ isNew ? '选择设备型号和参数，生成配置文件' : '配置设备型号的详细参数' }}</p>
|
|
</div>
|
|
|
|
<!-- Model Info Card (new mode: editable, edit mode: readonly) -->
|
|
<div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
|
|
<h3 class="text-lg font-semibold mb-6">型号信息</h3>
|
|
<div class="grid grid-cols-3 gap-x-12 gap-y-6">
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">适配型号</label>
|
|
<select v-if="isNew" v-model="selectedModel" class="w-full px-3 py-2 border rounded" style="border-color: #D9D9D9; background-color: #fff">
|
|
<option value="GD30">GD30 高密度电法仪</option>
|
|
<option value="GT20">GT20 瞬变电磁仪</option>
|
|
<option value="GM10">GM10 大地电磁仪</option>
|
|
</select>
|
|
<div v-else class="font-medium">GD30 高密度电法仪</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">配置文件版本</label>
|
|
<input v-if="isNew" type="text" v-model="configVersion" class="w-full px-3 py-2 border rounded" style="border-color: #D9D9D9" placeholder="如 v1.0.0" />
|
|
<div v-else style="color: #4a7c59">v1.2.0</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">{{ isNew ? '状态' : '最后更新时间' }}</div>
|
|
<span v-if="isNew" class="px-2 py-1 rounded text-xs" style="background-color: #FFFBE6; color: #FAAD14; border: 1px solid #FFE58F">待生成</span>
|
|
<div v-else style="color: rgba(0, 0, 0, 0.65)">2024-03-01 10:30</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transmission Parameters Card -->
|
|
<div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
|
|
<h3 class="text-lg font-semibold mb-6">发射参数</h3>
|
|
<div class="grid grid-cols-2 gap-x-12 gap-y-6">
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">
|
|
最大发射电压
|
|
</label>
|
|
<select
|
|
class="w-full px-3 py-2 border rounded"
|
|
style="border-color: #D9D9D9; background-color: #fff"
|
|
v-model="transmissionVoltage"
|
|
>
|
|
<option>500V</option>
|
|
<option>800V</option>
|
|
<option>1000V</option>
|
|
<option>1200V</option>
|
|
<option>1500V</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">
|
|
最大发射电流
|
|
</label>
|
|
<select
|
|
class="w-full px-3 py-2 border rounded"
|
|
style="border-color: #D9D9D9; background-color: #fff"
|
|
v-model="transmissionCurrent"
|
|
>
|
|
<option>2A</option>
|
|
<option>5A</option>
|
|
<option>8A</option>
|
|
<option>10A</option>
|
|
<option>15A</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-span-2">
|
|
<label class="block text-sm mb-3" style="color: rgba(0, 0, 0, 0.85)">
|
|
发射脉宽
|
|
</label>
|
|
<div class="flex flex-wrap gap-2">
|
|
<label
|
|
v-for="option in pulseWidthOptions"
|
|
:key="option.value"
|
|
class="px-4 py-2 rounded border cursor-pointer transition-colors"
|
|
:style="{
|
|
borderColor: option.checked ? '#4a7c59' : '#D9D9D9',
|
|
backgroundColor: option.checked ? '#eef5f0' : '#fff',
|
|
color: option.checked ? '#4a7c59' : 'rgba(0, 0, 0, 0.65)',
|
|
}"
|
|
>
|
|
<input type="checkbox" class="hidden" :checked="option.checked" readonly />
|
|
{{ option.value }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-2">
|
|
<label class="block text-sm mb-3" style="color: rgba(0, 0, 0, 0.85)">
|
|
发射波形
|
|
</label>
|
|
<div class="flex flex-wrap gap-2">
|
|
<label
|
|
v-for="option in waveformOptions"
|
|
:key="option.value"
|
|
class="px-4 py-2 rounded border cursor-pointer transition-colors"
|
|
:style="{
|
|
borderColor: option.checked ? '#4a7c59' : '#D9D9D9',
|
|
backgroundColor: option.checked ? '#eef5f0' : '#fff',
|
|
color: option.checked ? '#4a7c59' : 'rgba(0, 0, 0, 0.65)',
|
|
}"
|
|
>
|
|
<input type="checkbox" class="hidden" :checked="option.checked" readonly />
|
|
{{ option.value }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">支持全波形测量</label>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" v-model="supportFullWaveform" class="w-4 h-4" style="accent-color: #4a7c59" />
|
|
<span style="color: rgba(0, 0, 0, 0.65)">{{ supportFullWaveform ? '是' : '否' }}</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">占空比支持</label>
|
|
<div class="flex items-center gap-6">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" v-model="supportDuty50" class="w-4 h-4" style="accent-color: #4a7c59" />
|
|
<span style="color: rgba(0, 0, 0, 0.65)">50% 占空比</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" v-model="supportDuty100" class="w-4 h-4" style="accent-color: #4a7c59" />
|
|
<span style="color: rgba(0, 0, 0, 0.65)">100% 占空比</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Acquisition Parameters Card -->
|
|
<div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
|
|
<h3 class="text-lg font-semibold mb-6">采集参数</h3>
|
|
<div class="grid grid-cols-2 gap-x-12 gap-y-6">
|
|
<div class="col-span-2">
|
|
<label class="block text-sm mb-3" style="color: rgba(0, 0, 0, 0.85)">电压测量范围</label>
|
|
<div class="flex flex-wrap gap-2">
|
|
<label
|
|
v-for="option in voltageMeasureOptions"
|
|
:key="option.value"
|
|
class="px-4 py-2 rounded border cursor-pointer transition-colors"
|
|
:style="{
|
|
borderColor: option.checked ? '#4a7c59' : '#D9D9D9',
|
|
backgroundColor: option.checked ? '#eef5f0' : '#fff',
|
|
color: option.checked ? '#4a7c59' : 'rgba(0, 0, 0, 0.65)',
|
|
}"
|
|
@click="option.checked = !option.checked"
|
|
>
|
|
{{ option.value }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-2">
|
|
<label class="block text-sm mb-3" style="color: rgba(0, 0, 0, 0.85)">
|
|
采样率
|
|
</label>
|
|
<div class="flex flex-wrap gap-2">
|
|
<label
|
|
v-for="option in samplingRateOptions"
|
|
:key="option.value"
|
|
class="px-4 py-2 rounded border cursor-pointer transition-colors"
|
|
:style="{
|
|
borderColor: option.checked ? '#4a7c59' : '#D9D9D9',
|
|
backgroundColor: option.checked ? '#eef5f0' : '#fff',
|
|
color: option.checked ? '#4a7c59' : 'rgba(0, 0, 0, 0.65)',
|
|
}"
|
|
>
|
|
<input type="checkbox" class="hidden" :checked="option.checked" readonly />
|
|
{{ option.value }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">
|
|
支持通道数
|
|
</label>
|
|
<input
|
|
type="number"
|
|
class="w-full px-3 py-2 border rounded"
|
|
style="border-color: #D9D9D9"
|
|
value="12"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">
|
|
迭代次数范围
|
|
</label>
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="number"
|
|
class="flex-1 px-3 py-2 border rounded"
|
|
style="border-color: #D9D9D9"
|
|
value="1"
|
|
/>
|
|
<span style="color: rgba(0, 0, 0, 0.45)">-</span>
|
|
<input
|
|
type="number"
|
|
class="flex-1 px-3 py-2 border rounded"
|
|
style="border-color: #D9D9D9"
|
|
value="256"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Protection Parameters Card -->
|
|
<div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
|
|
<h3 class="text-lg font-semibold mb-6">保护参数</h3>
|
|
<div class="grid grid-cols-2 gap-x-12 gap-y-6">
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">过压保护</label>
|
|
<div class="flex items-center gap-4">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" v-model="overvoltageProtection" class="w-4 h-4" style="accent-color: #4a7c59" />
|
|
<span style="color: rgba(0, 0, 0, 0.65)">启用</span>
|
|
</label>
|
|
<input v-if="overvoltageProtection" type="number" class="w-32 px-3 py-1 border rounded text-sm" style="border-color: #D9D9D9" v-model="overvoltageThreshold" />
|
|
<span v-if="overvoltageProtection" class="text-sm" style="color: rgba(0, 0, 0, 0.45)">V</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">过流保护</label>
|
|
<div class="flex items-center gap-4">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" v-model="overcurrentProtection" class="w-4 h-4" style="accent-color: #4a7c59" />
|
|
<span style="color: rgba(0, 0, 0, 0.65)">启用</span>
|
|
</label>
|
|
<input v-if="overcurrentProtection" type="number" class="w-32 px-3 py-1 border rounded text-sm" style="border-color: #D9D9D9" v-model="overcurrentThreshold" />
|
|
<span v-if="overcurrentProtection" class="text-sm" style="color: rgba(0, 0, 0, 0.45)">A</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">短路保护</label>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" v-model="shortCircuitProtection" class="w-4 h-4" style="accent-color: #4a7c59" />
|
|
<span style="color: rgba(0, 0, 0, 0.65)">{{ shortCircuitProtection ? '已启用' : '未启用' }}</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">高温保护</label>
|
|
<div class="flex items-center gap-4">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" v-model="highTempProtection" class="w-4 h-4" style="accent-color: #4a7c59" />
|
|
<span style="color: rgba(0, 0, 0, 0.65)">启用</span>
|
|
</label>
|
|
<input v-if="highTempProtection" type="number" class="w-32 px-3 py-1 border rounded text-sm" style="border-color: #D9D9D9" v-model="highTempThreshold" />
|
|
<span v-if="highTempProtection" class="text-sm" style="color: rgba(0, 0, 0, 0.45)">°C</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Network Parameters Card -->
|
|
<div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
|
|
<h3 class="text-lg font-semibold mb-6">网络参数</h3>
|
|
<div class="grid grid-cols-2 gap-x-12 gap-y-6">
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">WiFi SSID</label>
|
|
<input
|
|
type="text"
|
|
class="w-full px-3 py-2 border rounded"
|
|
style="border-color: #D9D9D9"
|
|
value="GD30_Device"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">WiFi密码</label>
|
|
<input
|
|
type="password"
|
|
class="w-full px-3 py-2 border rounded"
|
|
style="border-color: #D9D9D9"
|
|
value="12345678"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">默认IP地址</label>
|
|
<input
|
|
type="text"
|
|
class="w-full px-3 py-2 border rounded"
|
|
style="border-color: #D9D9D9"
|
|
value="192.168.1.100"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">子网掩码</label>
|
|
<input
|
|
type="text"
|
|
class="w-full px-3 py-2 border rounded"
|
|
style="border-color: #D9D9D9"
|
|
value="255.255.255.0"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">默认网关</label>
|
|
<input
|
|
type="text"
|
|
class="w-full px-3 py-2 border rounded"
|
|
style="border-color: #D9D9D9"
|
|
value="192.168.1.1"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">DNS服务器</label>
|
|
<input
|
|
type="text"
|
|
class="w-full px-3 py-2 border rounded"
|
|
style="border-color: #D9D9D9"
|
|
value="8.8.8.8"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Bar -->
|
|
<div
|
|
class="flex items-center justify-end gap-3 p-4 bg-white rounded-lg sticky bottom-0"
|
|
style="box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05)"
|
|
>
|
|
<button
|
|
class="px-6 py-2 rounded"
|
|
style="border: 1px solid #D9D9D9; color: rgba(0, 0, 0, 0.85)"
|
|
@click="router.go(-1)"
|
|
>
|
|
取消
|
|
</button>
|
|
<template v-if="isNew">
|
|
<button
|
|
class="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
|
|
class="px-6 py-2 rounded text-white"
|
|
style="background-color: #52C41A"
|
|
@click="router.push('/config-files')"
|
|
>
|
|
确认生成配置文件
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<button
|
|
class="px-6 py-2 rounded"
|
|
style="border: 1px solid #D9D9D9; color: rgba(0, 0, 0, 0.85)"
|
|
>
|
|
重置默认
|
|
</button>
|
|
<button
|
|
class="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
|
|
class="px-6 py-2 rounded text-white"
|
|
style="background-color: #4a7c59"
|
|
>
|
|
下发配置
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|