egm/webui/src/components/ParameterForm.vue

<template>
  <q-layout view="lHh lpr lFf">
      <q-header elevated class="bg-indigo-600 text-white">
        <q-toolbar>
          <q-toolbar-title>
            <div class="flex items-center gap-2">
              <q-icon name="flash_on" size="md" />
              <span class="text-xl font-bold">EGM 输电线路绕击跳闸率计算</span>
            </div>
          </q-toolbar-title>
        </q-toolbar>
      </q-header>

      <q-page-container>
        <q-page class="q-pa-md">
          <div class="max-w-4xl mx-auto">
            <!-- 基本参数 -->
            <q-card class="q-mb-md shadow-2">
              <q-card-section class="bg-indigo-50">
                <div class="text-h6 text-indigo-900 flex items-center gap-2">
                  <q-icon name="settings" />
                  基本参数
                </div>
              </q-card-section>

              <q-card-section>
                <div class="row q-col-gutter-md">
                  <div class="col-12 col-md-6">
                    <q-select
                      v-model="params.parameter.rated_voltage"
                      :options="voltageOptions"
                      label="额定电压等级 (kV)"
                    />
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input
                      :model-value="currentType"
                      label="电流类型"
                      readonly
                    >
                      <q-tooltip>交流(AC)或直流(DC)，由电压等级自动判断</q-tooltip>
                    </q-input>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input
                      v-model="params.parameter.h_c_sag"
                      type="number"
                      step="0.01"
                      label="导线弧垂 (m)"
                    >
                      <q-tooltip>导线在最大弧垂状态下相对于挂点的垂直距离</q-tooltip>
                    </q-input>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input
                      v-model="params.parameter.h_g_sag"
                      type="number"
                      step="0.01"
                      label="地线弧垂 (m)"
                    >
                      <q-tooltip>地线在最大弧垂状态下相对于挂点的垂直距离</q-tooltip>
                    </q-input>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input
                      v-model="params.parameter.insulator_c_len"
                      type="number"
                      step="0.01"
                      label="导线串子绝缘长度 (m)"
                    >
                      <q-tooltip>绝缘子串的总长度</q-tooltip>
                    </q-input>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input
                      v-model="params.parameter.string_c_len"
                      type="number"
                      step="0.1"
                      label="导线串长 (m)"
                    >
                      <q-tooltip>导线绝缘子串的总长度</q-tooltip>
                    </q-input>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input
                      v-model="params.parameter.string_g_len"
                      type="number"
                      step="0.1"
                      label="地线串长 (m)"
                    >
                      <q-tooltip>地线绝缘子串的总长度</q-tooltip>
                    </q-input>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input
                      v-model="params.parameter.altitude"
                      type="number"
                      label="海拔高度 (m)"
                    >
                      <q-tooltip>用于修正绝缘子串的闪络电压</q-tooltip>
                    </q-input>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input
                      v-model="params.parameter.td"
                      type="number"
                      label="雷暴日 (d)"
                    >
                      <q-tooltip>一年中雷暴天数，用于计算地闪密度</q-tooltip>
                    </q-input>
                  </div>
                </div>

                <!-- 导、地线挂点高度 -->
                <div class="q-mt-md">
                  <div class="text-subtitle2 q-mb-sm">
                    导、地线挂点垂直坐标 (m) 
                  </div>
                  <div class="row q-col-gutter-sm">
                    <div class="col" v-for="(h, index) in params.parameter.h_arm" :key="index">
                      <q-input
                        v-model="params.parameter.h_arm[index]"
                        type="number"
                        step="0.1"
                        :label="index === 0 ? '地线' : `导线 ${index}`"
                        dense
                      />
                    </div>
                    <div class="col-auto">
                      <q-btn flat round color="primary" icon="add" @click="addHArm" :disable="params.parameter.h_arm.length >= 4" />
                    </div>
                    <div class="col-auto">
                      <q-btn flat round color="negative" icon="remove" @click="removeHArm" :disable="params.parameter.h_arm.length <= 2" />
                    </div>
                  </div>
                </div>

                <!-- 导、地线水平坐标 -->
                <div class="q-mt-md">
                  <div class="text-subtitle2 q-mb-sm">
                    导、地线挂点水平坐标 (m)
                  </div>
                  <div class="row q-col-gutter-sm">
                    <div class="col" v-for="(x, index) in params.parameter.gc_x" :key="index">
                      <q-input
                        v-model="params.parameter.gc_x[index]"
                        type="number"
                        step="0.1"
                        :label="index === 0 ? '地线' : `导线 ${index}`"
                        dense
                      />
                    </div>
                    <div class="col-auto">
                      <q-btn flat round color="primary" icon="add" @click="addGcX" :disable="params.parameter.gc_x.length >= 4" />
                    </div>
                    <div class="col-auto">
                      <q-btn flat round color="negative" icon="remove" @click="removeGcX" :disable="params.parameter.gc_x.length <= 2" />
                    </div>
                  </div>
                </div>

                <!-- 地面倾角 -->
                <div class="q-mt-md">
                  <div class="row q-col-gutter-sm">
                    <div class="col-12 col-md-6">
                      <q-input
                        v-model="params.parameter.ground_angels[0]"
                        type="number"
                        step="1"
                        label="地面倾角 (°) - 向下为正"
                      >
                        <q-tooltip>地面倾斜角度，向下为正值</q-tooltip>
                      </q-input>
                    </div>
                  </div>
                </div>
              </q-card-section>
            </q-card>

            <!-- 高级参数 -->
            <q-card class="q-mb-md shadow-2">
              <q-card-section class="bg-indigo-50">
                <div class="text-h6 text-indigo-900 flex items-center gap-2">
                  <q-icon name="tune" />
                  高级参数
                </div>
              </q-card-section>

              <q-card-section>
                <div class="row q-col-gutter-md">
                  <div class="col-12 col-md-6">
                    <q-input
                      v-model="params.advance.ng"
                      type="number"
                      step="0.01"
                      label="地闪密度 (次/(km²·a))"
                    >
                      <q-tooltip>每平方公里每年的地闪次数，默认-1表示自动计算</q-tooltip>
                    </q-input>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input
                      v-model="params.advance.Ip_a"
                      type="number"
                      step="0.01"
                      label="雷电流概率密度曲线系数 a"
                    >
                      <q-tooltip>雷电流幅值概率密度函数参数，默认-1表示使用标准参数</q-tooltip>
                    </q-input>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input
                      v-model="params.advance.Ip_b"
                      type="number"
                      step="0.01"
                      label="雷电流概率密度曲线系数 b"
                    >
                      <q-tooltip>雷电流幅值概率密度函数参数，默认-1表示使用标准参数</q-tooltip>
                    </q-input>
                  </div>
                </div>
              </q-card-section>
            </q-card>

            <!-- 可选参数 -->
            <q-card class="q-mb-md shadow-2">
              <q-card-section class="bg-indigo-50">
                <div class="text-h6 text-indigo-900 flex items-center gap-2">
                  <q-icon name="more_horiz" />
                  可选参数
                </div>
              </q-card-section>

              <q-card-section>
                <div class="row q-col-gutter-md">
                  <div class="col-12 col-md-6">
                    <q-input
                      v-model="params.optional.voltage_n"
                      type="number"
                      label="计算时电压分成多少份"
                    >
                      <q-tooltip>将电压波形离散化的份数，影响计算精度</q-tooltip>
                    </q-input>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input
                      v-model="params.optional.max_i"
                      type="number"
                      label="最大尝试雷电流 (kA)"
                    >
                      <q-tooltip>计算时尝试的最大雷电流幅值</q-tooltip>
                    </q-input>
                  </div>
                </div>
              </q-card-section>
            </q-card>

            <!-- 操作按钮 -->
            <div class="row q-gutter-md justify-center q-mt-lg">
              <q-btn
                color="primary"
                size="lg"
                label="开始计算"
                icon="calculate"
                @click="calculate"
                :loading="calculating"
                class="px-8"
              />
              <q-btn
                color="grey-7"
                size="lg"
                label="重置参数"
                icon="refresh"
                @click="resetParams"
                class="px-8"
              />
              <q-btn
                color="positive"
                size="lg"
                label="导出配置"
                icon="download"
                @click="exportConfig"
                class="px-8"
              />
            </div>

            

            <!-- 错误信息 -->
            <q-card v-if="error" class="q-mt-md shadow-2 bg-red-50">
              <q-card-section>
                <div class="text-negative q-mb-sm flex items-center gap-2">
                  <q-icon name="error" />
                  错误信息
                </div>
                <p class="text-negative">{{ error }}</p>
              </q-card-section>
            </q-card>

            <!-- 运行日志 -->
            <LogComponent ref="logRef" />

            <!-- 计算结果 -->
            <q-card v-if="result" class="q-mt-md shadow-2 bg-green-50">
              <q-card-section class="bg-green-100">
                <div class="text-h6 text-green-900 flex items-center gap-2">
                  <q-icon name="check_circle" />
                  计算结果
                </div>
              </q-card-section>
              <q-card-section>
                <pre class="text-caption bg-white q-pa-md rounded">{{ result }}</pre>
              </q-card-section>
            </q-card>
          </div>
        </q-page>
      </q-page-container>
    </q-layout>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import type { AllParameters } from '@/types'
import LogComponent from './Log.vue'

// 默认参数
const defaultParams: AllParameters = {
  parameter: {
    rated_voltage: '500kV',
    ac_or_dc: 'AC',
    h_c_sag: 14.43,
    h_g_sag: 11.67,
    insulator_c_len: 7.02,
    string_c_len: 9.2,
    string_g_len: 0.5,
    h_arm: [150, 130],
    gc_x: [17.9, 17],
    ground_angels: [0],
    altitude: 1000,
    td: 20
  },
  advance: {
    ng: -1,
    Ip_a: -1,
    Ip_b: -1
  },
  optional: {
    voltage_n: 3,
    max_i: 200
  }
}

const params = reactive<AllParameters>(JSON.parse(JSON.stringify(defaultParams)))
const calculating = ref(false)
const result = ref<string | null>(null)
const error = ref<string | null>(null)
const logRef = ref<InstanceType<typeof LogComponent> | null>(null)

const voltageOptions = [
  '110kV', '220kV', '330kV', '500kV', '750kV','1000kV',
  '±500kV', '±660kV', '±800kV', '±1100kV'
]

// 根据电压等级自动判断交流/直流
const currentType = computed(() => {
  return params.parameter.rated_voltage.includes('±') ? 'DC' : 'AC'
})

// 数组操作函数（最多3条导线，即数组最多4个元素：1地线+3导线）
// 两个数组同步增减
const addHArm = () => {
  if (params.parameter.h_arm.length < 4) {
    const last = params.parameter.h_arm[params.parameter.h_arm.length - 1] || 100
    params.parameter.h_arm.push(last - 20)
    // 同步增加 gc_x
    const lastX = params.parameter.gc_x[params.parameter.gc_x.length - 1] || 10
    params.parameter.gc_x.push(lastX)
  }
}

const removeHArm = () => {
  if (params.parameter.h_arm.length > 2) {
    params.parameter.h_arm.pop()
    // 同步删除 gc_x
    params.parameter.gc_x.pop()
  }
}

const addGcX = () => {
  if (params.parameter.gc_x.length < 4) {
    const lastX = params.parameter.gc_x[params.parameter.gc_x.length - 1] || 10
    params.parameter.gc_x.push(lastX)
    // 同步增加 h_arm
    const last = params.parameter.h_arm[params.parameter.h_arm.length - 1] || 100
    params.parameter.h_arm.push(last - 20)
  }
}

const removeGcX = () => {
  if (params.parameter.gc_x.length > 2) {
    params.parameter.gc_x.pop()
    // 同步删除 h_arm
    params.parameter.h_arm.pop()
  }
}

// 计算函数
const calculate = async () => {
  calculating.value = true
  result.value = null
  error.value = null

  try {
    // 调用 pywebview 的 Python 函数
    if (window.pywebview) {
      // 后台线程启动计算，实时日志通过 addLogFromBackend 推送
      // 结果通过 receiveResult 回调接收
      await window.pywebview.api.calculate(params)
      // 不在这里设置 calculating = false，等待 receiveResult 回调
    } else {
      // 开发模式下的模拟
      await new Promise(resolve => setTimeout(resolve, 1000))
      logRef.value?.addLog('info', '开始 EGM 计算（开发模式）...')
      logRef.value?.addLog('info', '参数: 额定电压=750kV, 雷暴日=20d, 海拔=1000m')
      logRef.value?.addLog('info', '计算完成')
      result.value = JSON.stringify({
        success: true,
        message: '计算完成（开发模式）',
        data: {
          tripping_rate: '0.0581 次/(100km·a)',
          parameters: params
        }
      }, null, 2)
      calculating.value = false
    }
  } catch (e: any) {
    error.value = e.message || '计算失败'
    logRef.value?.addLog('error', e.message || '计算失败')
    calculating.value = false
  }
}

// 重置参数
const resetParams = () => {
  Object.assign(params, JSON.parse(JSON.stringify(defaultParams)))
  result.value = null
  error.value = null
}

// 将参数转换为 TOML 格式
const tomlStringify = (obj: any, indent: string = ''): string => {
  let result = ''
  
  for (const [key, value] of Object.entries(obj)) {
    if (value === null || value === undefined) continue
    
    if (Array.isArray(value)) {
      result += `${indent}${key} = [${value.join(', ')}]\n`
    } else if (typeof value === 'object') {
      result += `\n${indent}[${key}]\n`
      result += tomlStringify(value, indent)
    } else if (typeof value === 'string') {
      result += `${indent}${key} = "${value}"\n`
    } else if (typeof value === 'boolean') {
      result += `${indent}${key} = ${value}\n`
    } else {
      result += `${indent}${key} = ${value}\n`
    }
  }
  
  return result
}

// 导出配置
const exportConfig = async () => {
  try {
    if (window.pywebview) {
      const response = await window.pywebview.api.export_config(params)
      if (response.success) {
        logRef.value?.addLog('info', response.message)
      } else {
        logRef.value?.addLog('warning', response.message)
      }
    } else {
      // 开发模式下的模拟
      logRef.value?.addLog('info', '导出配置（开发模式，直接下载）')
      const config = tomlStringify(params)
      const blob = new Blob([config], { type: 'text/plain' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      const timestamp = new Date().toISOString().slice(0, 19).replace(/[:-]/g, '')
      a.download = `egm_config_${timestamp}.toml`
      a.click()
      URL.revokeObjectURL(url)
    }
  } catch (e: any) {
    error.value = e.message || '导出失败'
    logRef.value?.addLog('error', e.message || '导出失败')
  }
}

// 声明 pywebview API 类型
declare global {
  interface Window {
    pywebview?: {
      api: {
        calculate: (params: AllParameters) => Promise<any>
        export_config: (params: AllParameters) => Promise<any>
      }
    }
    addLogFromBackend?: (log: { level: string; time: string; message: string }) => void
    receiveResult?: (result: { success: boolean; message: string; data?: any; error?: string }) => void
  }
}

// 注册全局日志接收函数，供后端实时调用
onMounted(() => {
  // 实时日志推送
  window.addLogFromBackend = (log: { level: string; time: string; message: string }) => {
    logRef.value?.addLog(log.level as any, log.message)
  }

  // 接收计算结果
  window.receiveResult = (res: { success: boolean; message: string; data?: any; error?: string }) => {
    calculating.value = false
    if (res.success) {
      result.value = JSON.stringify(res, null, 2)
    } else {
      error.value = res.error || res.message
    }
  }
})

onUnmounted(() => {
  window.addLogFromBackend = undefined
  window.receiveResult = undefined
})
</script>

<style scoped>
</style>