emcp/frontend/src/views/DeviceConfigView.vue

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { fetchDeviceConfig, saveDeviceConfig } from '../api/platform'
import type { DeviceConfigPayload } from '../types/platform'
import { ensureSaveAuthorized } from '../utils/saveGuard'

defineProps<{ store: any; actions: any }>()

const form = reactive<DeviceConfigPayload>({
  password: '123456',
  hardware_version: {
    board_version: 'B001.001.001',
    display_version: 'S001.001.001',
    other_version: 'Y001.001.001',
  },
  software_version: {
    display_program: '001.001.001',
    communication_program: '001.001.001',
    measurement_program: '001.001.001',
  },
  net: [
    { nic: '网卡一', ip: '192.168.1.10', mask: '255.255.255.0', gateway: '192.168.1.1', protocol: 'Modbus TCP' },
    { nic: '网卡二', ip: '192.168.1.56', mask: '255.255.255.255', gateway: '192.168.1.56', protocol: 'Modbus TCP' },
  ],
  uart: [
    { port: 'COM1', baud: 9600, parity: 'NONE', data_bits: 8, stop_bits: 1, protocol: '' },
    { port: 'COM2', baud: 115200, parity: 'NONE', data_bits: 8, stop_bits: 1, protocol: 'Modbus RTU' },
  ],
})

const result = ref('未保存')
const saving = ref(false)

onMounted(async () => {
  try {
    const data = await fetchDeviceConfig()
    form.password = data.password
    Object.assign(form.hardware_version, data.hardware_version)
    Object.assign(form.software_version, data.software_version)
    data.net.forEach((item, index) => {
      if (form.net[index]) {
        Object.assign(form.net[index], item)
      } else {
        form.net.push(item)
      }
    })
    data.uart.forEach((item, index) => {
      if (form.uart[index]) {
        Object.assign(form.uart[index], item)
      } else {
        form.uart.push(item)
      }
    })
    result.value = '已加载当前设备配置'
  } catch (error) {
    result.value = error instanceof Error ? error.message : '加载设备配置失败'
  }
})

async function save() {
  saving.value = true
  try {
    const guard = await ensureSaveAuthorized()
    if (!guard.ok) {
      result.value = guard.message
      return
    }

    const response = await saveDeviceConfig(form)
    result.value = `${response.msg}，${response.data.send_status}`
  } catch (error) {
    result.value = error instanceof Error ? error.message : '保存设备配置失败'
  } finally {
    saving.value = false
  }
}
</script>

<template>
  <section class="panel">
    <h2>设备基础配置</h2>
    <div class="form-grid">
      <label>操作密码<input v-model="form.password" type="password" /></label>
      <label>板卡版本<input v-model="form.hardware_version.board_version" /></label>
      <label>显示版本<input v-model="form.hardware_version.display_version" /></label>
      <label>其他版本<input v-model="form.hardware_version.other_version" /></label>
      <label>显示程序版本<input v-model="form.software_version.display_program" /></label>
      <label>通信程序版本<input v-model="form.software_version.communication_program" /></label>
      <label>测量程序版本<input v-model="form.software_version.measurement_program" /></label>
      <label>网卡一 IP<input v-model="form.net[0].ip" /></label>
      <label>网卡一 掩码<input v-model="form.net[0].mask" /></label>
      <label>网卡一 网关<input v-model="form.net[0].gateway" /></label>
      <label>网卡二 IP<input v-model="form.net[1].ip" /></label>
      <label>网卡二 协议<input v-model="form.net[1].protocol" /></label>
      <label>串口一波特率<input v-model.number="form.uart[0].baud" type="number" /></label>
      <label>串口二波特率<input v-model.number="form.uart[1].baud" type="number" /></label>
      <label>串口二协议<input v-model="form.uart[1].protocol" /></label>
    </div>
    <div class="actions">
      <button class="primary" :disabled="saving" @click="save">{{ saving ? '保存中...' : '保存设备配置' }}</button>
    </div>
    <p>保存结果：{{ result }}</p>
  </section>
</template>