更新配置文件新建页面内容
This commit is contained in:
徐星
parent
8d23513bc7
commit
cce893db83
|
|
@ -1,8 +1,12 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Info, Plus, Search } from 'lucide-vue-next'
|
import { ref } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { Info, Plus, Search, X } from 'lucide-vue-next'
|
||||||
|
|
||||||
const router = useRouter()
|
const showDrawer = ref(false)
|
||||||
|
const newModel = ref('')
|
||||||
|
const newVersion = ref('')
|
||||||
|
const newTransVoltage = ref('1500V')
|
||||||
|
const newTransCurrent = ref('10A')
|
||||||
|
|
||||||
interface ConfigFile {
|
interface ConfigFile {
|
||||||
configId: string
|
configId: string
|
||||||
|
|
@ -57,7 +61,7 @@ const getStatusStyle = (status: ConfigFile['status']) => {
|
||||||
<button
|
<button
|
||||||
class="px-4 py-2 rounded text-white flex items-center gap-2"
|
class="px-4 py-2 rounded text-white flex items-center gap-2"
|
||||||
style="background-color: #4a7c59"
|
style="background-color: #4a7c59"
|
||||||
@click="router.push('/config-files/new')"
|
@click="showDrawer = true"
|
||||||
>
|
>
|
||||||
<Plus :size="16" />
|
<Plus :size="16" />
|
||||||
新建配置
|
新建配置
|
||||||
|
|
@ -197,5 +201,123 @@ const getStatusStyle = (status: ConfigFile['status']) => {
|
||||||
<button class="px-3 py-1 rounded border" style="border-color: #D9D9D9; color: rgba(0, 0, 0, 0.85)">下一页</button>
|
<button class="px-3 py-1 rounded border" style="border-color: #D9D9D9; color: rgba(0, 0, 0, 0.85)">下一页</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- New Config Drawer -->
|
||||||
|
<div v-if="showDrawer" class="fixed inset-0 z-50 flex justify-end" style="background-color: rgba(0,0,0,0.45)" @click.self="showDrawer = false">
|
||||||
|
<div class="bg-white w-[520px] h-full flex flex-col" style="box-shadow: -4px 0 12px rgba(0,0,0,0.1)">
|
||||||
|
<div class="flex items-center justify-between p-5 border-b" style="border-color: #F0F0F0">
|
||||||
|
<h3 class="text-lg font-semibold">新建配置文件</h3>
|
||||||
|
<button @click="showDrawer = false" class="p-1 rounded hover:bg-gray-100" style="color: rgba(0,0,0,0.45)"><X :size="18" /></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-1 overflow-y-auto p-6 space-y-6">
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
|
||||||
|
<h4 class="text-base font-semibold mb-4">基本信息</h4>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm mb-2" style="color: rgba(0,0,0,0.85)">适配型号 <span style="color: #FF4D4F">*</span></label>
|
||||||
|
<select v-model="newModel" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
|
||||||
|
<option value="">请选择型号</option>
|
||||||
|
<option>GD30 高密度电法仪</option>
|
||||||
|
<option>GT20 瞬变电磁仪</option>
|
||||||
|
<option>GM10 大地电磁仪</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm mb-2" style="color: rgba(0,0,0,0.85)">配置版本 <span style="color: #FF4D4F">*</span></label>
|
||||||
|
<input v-model="newVersion" type="text" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" placeholder="如 v1.0.0" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 发射参数 -->
|
||||||
|
<div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
|
||||||
|
<h4 class="text-base font-semibold mb-4">发射参数</h4>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">最大发射电压</label>
|
||||||
|
<select v-model="newTransVoltage" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
|
||||||
|
<option>500V</option><option>800V</option><option>1000V</option><option>1200V</option><option>1500V</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">最大发射电流</label>
|
||||||
|
<select v-model="newTransCurrent" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
|
||||||
|
<option>2A</option><option>5A</option><option>8A</option><option>10A</option><option>15A</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">占空比</label>
|
||||||
|
<select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
|
||||||
|
<option>50%、100%</option><option>50%</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">脉宽宽度</label>
|
||||||
|
<select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
|
||||||
|
<option>0.25s、0.5s、1s、2s、4s、8s、16s、32s、64s</option><option>0.25s、0.5s、1s、2s、4s、8s</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">迭代次数</label>
|
||||||
|
<select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
|
||||||
|
<option>1~256</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 采集参数 -->
|
||||||
|
<div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
|
||||||
|
<h4 class="text-base font-semibold mb-4">采集参数</h4>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">支持通道数</label>
|
||||||
|
<input type="number" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" value="12" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">采样率</label>
|
||||||
|
<select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
|
||||||
|
<option>50Hz、60Hz、100Hz、1000Hz</option><option>50Hz、60Hz、100Hz、1000Hz</option><option>50Hz、60Hz</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">电压测量量程</label>
|
||||||
|
<select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
|
||||||
|
<option>±2.5V、±80V</option><option>±80V、±600V</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">全波形采集</label>
|
||||||
|
<select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
|
||||||
|
<option>支持</option><option>不支持</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 网络参数 -->
|
||||||
|
<div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
|
||||||
|
<h4 class="text-base font-semibold mb-4">网络参数</h4>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">WiFi SSID</label>
|
||||||
|
<input type="text" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" placeholder="如 GD30_Device" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">默认IP地址</label>
|
||||||
|
<input type="text" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" placeholder="192.168.1.100" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-end gap-3 p-5 border-t" style="border-color: #F0F0F0">
|
||||||
|
<button class="px-4 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; color: rgba(0,0,0,0.85)" @click="showDrawer = false">取消</button>
|
||||||
|
<button class="px-4 py-2 rounded text-white text-sm" :style="{ backgroundColor: newModel && newVersion ? '#4a7c59' : '#D9D9D9' }" :disabled="!newModel || !newVersion" @click="showDrawer = false">确认生成配置文件</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue