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
                      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="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>

            <!-- 错误信息 -->
            <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" />
          </div>
        </q-page>
      </q-page-container>
    </q-layout>
</template>

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

// 默认参数
const defaultParams: AllParameters = {
  parameter: {
    rated_voltage: '500kV',
    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'
]

// 数组操作函数（最多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) {
      const response = await window.pywebview.api.calculate(params)

      // 显示后端日志
      const logs = response.logs
      if (Array.isArray(logs) && logs.length > 0) {
        for (const log of logs) {
          logRef.value?.addLog(log.level as any, log.message)
        }
      }

      result.value = JSON.stringify(response, null, 2)
    } 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)
    }
  } catch (e: any) {
    error.value = e.message || '计算失败'
    logRef.value?.addLog('error', e.message || '计算失败')
  } finally {
    calculating.value = false
  }
}

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

// 导出配置
const exportConfig = () => {
  const config = JSON.stringify(params, null, 2)
  const blob = new Blob([config], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'egm_config.json'
  a.click()
  URL.revokeObjectURL(url)
}

// 声明 pywebview API 类型
declare global {
  interface Window {
    pywebview?: {
      api: {
        calculate: (params: AllParameters) => Promise<any>
      }
    }
  }
}
</script>

<style scoped>
</style>