refactor: 优化参数表单布局，几何可视化并列显示
This commit is contained in:
dmy
@@ -17,198 +17,203 @@
|
||||
<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>
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<!-- 基本参数 + 杆塔几何结构 并排布局 -->
|
||||
<div class="row q-col-gutter-md q-mb-md">
|
||||
<!-- 左侧：基本参数 -->
|
||||
<div class="col-12 col-lg-6">
|
||||
<q-card class="shadow-2 full-height">
|
||||
<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="电压类型 (AC/DC)"
|
||||
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 class="col-12 col-md-6">
|
||||
<q-input
|
||||
v-model="params.parameter.z_0"
|
||||
type="number"
|
||||
label="雷电波阻抗 (Ω)"
|
||||
>
|
||||
<q-tooltip>雷电波阻抗，用于计算最小雷电流。</q-tooltip>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<q-input
|
||||
v-model="params.parameter.z_c"
|
||||
type="number"
|
||||
label="导线波阻抗 (Ω)"
|
||||
>
|
||||
<q-tooltip>导线波阻抗，用于计算最小雷电流。</q-tooltip>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<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="电压类型 (AC/DC)"
|
||||
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 class="col-12 col-md-6">
|
||||
<q-input
|
||||
v-model="params.parameter.z_0"
|
||||
type="number"
|
||||
label="雷电波阻抗 (Ω)"
|
||||
>
|
||||
<q-tooltip>雷电波阻抗，用于计算最小雷电流。</q-tooltip>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<q-input
|
||||
v-model="params.parameter.z_c"
|
||||
type="number"
|
||||
label="导线波阻抗 (Ω)"
|
||||
>
|
||||
<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="(_, 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 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="(_, 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" v-show="params.parameter.h_arm.length === 2" />
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn flat round color="negative" icon="remove" @click="removeHArm" :disable="params.parameter.h_arm.length <= 2" v-show="params.parameter.h_arm.length === 4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn flat round color="primary" icon="add" @click="addHArm" :disable="params.parameter.h_arm.length >= 4" v-show="params.parameter.h_arm.length === 2" />
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn flat round color="negative" icon="remove" @click="removeHArm" :disable="params.parameter.h_arm.length <= 2" v-show="params.parameter.h_arm.length === 4" />
|
||||
</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="(_, 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 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="(_, 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" v-show="params.parameter.gc_x.length === 2" />
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn flat round color="negative" icon="remove" @click="removeGcX" :disable="params.parameter.gc_x.length <= 2" v-show="params.parameter.gc_x.length === 4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn flat round color="primary" icon="add" @click="addGcX" :disable="params.parameter.gc_x.length >= 4" v-show="params.parameter.gc_x.length === 2" />
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn flat round color="negative" icon="remove" @click="removeGcX" :disable="params.parameter.gc_x.length <= 2" v-show="params.parameter.gc_x.length === 4" />
|
||||
</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 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>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- 杆塔几何结构可视化 -->
|
||||
<div class="q-mt-md">
|
||||
<Geometry
|
||||
:h-arm="params.parameter.h_arm"
|
||||
:gc-x="params.parameter.gc_x"
|
||||
:h-c-sag="params.parameter.h_c_sag"
|
||||
:h-g-sag="params.parameter.h_g_sag"
|
||||
:ground-angels="params.parameter.ground_angels"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<!-- 右侧：杆塔几何结构可视化 -->
|
||||
<div class="col-12 col-lg-6">
|
||||
<Geometry
|
||||
:h-arm="params.parameter.h_arm"
|
||||
:gc-x="params.parameter.gc_x"
|
||||
:h-c-sag="params.parameter.h_c_sag"
|
||||
:h-g-sag="params.parameter.h_g_sag"
|
||||
:ground-angels="params.parameter.ground_angels"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 高级参数 -->
|
||||
<q-card class="q-mb-md shadow-2">
|
||||
|
||||
Reference in New Issue
Block a user