refactor: 优化参数表单布局，几何可视化并列显示
This commit is contained in:
dmy
@@ -17,198 +17,203 @@
|
|||||||
<q-page-container>
|
<q-page-container>
|
||||||
|
|
||||||
<q-page class="q-pa-md">
|
<q-page class="q-pa-md">
|
||||||
<div class="max-w-4xl mx-auto">
|
<div class="max-w-7xl mx-auto">
|
||||||
<!-- 基本参数 -->
|
<!-- 基本参数 + 杆塔几何结构 并排布局 -->
|
||||||
<q-card class="q-mb-md shadow-2">
|
<div class="row q-col-gutter-md q-mb-md">
|
||||||
<q-card-section class="bg-indigo-50">
|
<!-- 左侧：基本参数 -->
|
||||||
<div class="text-h6 text-indigo-900 flex items-center gap-2">
|
<div class="col-12 col-lg-6">
|
||||||
<q-icon name="settings" />
|
<q-card class="shadow-2 full-height">
|
||||||
基本参数
|
<q-card-section class="bg-indigo-50">
|
||||||
</div>
|
<div class="text-h6 text-indigo-900 flex items-center gap-2">
|
||||||
</q-card-section>
|
<q-icon name="settings" />
|
||||||
|
基本参数
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="row q-col-gutter-md">
|
<div class="row q-col-gutter-md">
|
||||||
<div class="col-12 col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
<q-select
|
<q-select
|
||||||
v-model="params.parameter.rated_voltage"
|
v-model="params.parameter.rated_voltage"
|
||||||
:options="voltageOptions"
|
:options="voltageOptions"
|
||||||
label="额定电压等级 (kV)"
|
label="额定电压等级 (kV)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
<q-input
|
<q-input
|
||||||
:model-value="currentType"
|
:model-value="currentType"
|
||||||
label="电压类型 (AC/DC)"
|
label="电压类型 (AC/DC)"
|
||||||
readonly
|
readonly
|
||||||
>
|
>
|
||||||
<q-tooltip>交流(AC)或直流(DC)，由电压等级自动判断</q-tooltip>
|
<q-tooltip>交流(AC)或直流(DC)，由电压等级自动判断</q-tooltip>
|
||||||
</q-input>
|
</q-input>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="params.parameter.h_c_sag"
|
v-model="params.parameter.h_c_sag"
|
||||||
type="number"
|
type="number"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
label="导线弧垂 (m)"
|
label="导线弧垂 (m)"
|
||||||
>
|
>
|
||||||
<q-tooltip>导线在最大弧垂状态下相对于挂点的垂直距离</q-tooltip>
|
<q-tooltip>导线在最大弧垂状态下相对于挂点的垂直距离</q-tooltip>
|
||||||
</q-input>
|
</q-input>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="params.parameter.h_g_sag"
|
v-model="params.parameter.h_g_sag"
|
||||||
type="number"
|
type="number"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
label="地线弧垂 (m)"
|
label="地线弧垂 (m)"
|
||||||
>
|
>
|
||||||
<q-tooltip>地线在最大弧垂状态下相对于挂点的垂直距离</q-tooltip>
|
<q-tooltip>地线在最大弧垂状态下相对于挂点的垂直距离</q-tooltip>
|
||||||
</q-input>
|
</q-input>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="params.parameter.insulator_c_len"
|
v-model="params.parameter.insulator_c_len"
|
||||||
type="number"
|
type="number"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
label="导线串子绝缘长度 (m)"
|
label="导线串子绝缘长度 (m)"
|
||||||
>
|
>
|
||||||
<q-tooltip>绝缘子串的总长度</q-tooltip>
|
<q-tooltip>绝缘子串的总长度</q-tooltip>
|
||||||
</q-input>
|
</q-input>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="params.parameter.string_c_len"
|
v-model="params.parameter.string_c_len"
|
||||||
type="number"
|
type="number"
|
||||||
step="0.1"
|
step="0.1"
|
||||||
label="导线串长 (m)"
|
label="导线串长 (m)"
|
||||||
>
|
>
|
||||||
<q-tooltip>导线绝缘子串的总长度</q-tooltip>
|
<q-tooltip>导线绝缘子串的总长度</q-tooltip>
|
||||||
</q-input>
|
</q-input>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="params.parameter.string_g_len"
|
v-model="params.parameter.string_g_len"
|
||||||
type="number"
|
type="number"
|
||||||
step="0.1"
|
step="0.1"
|
||||||
label="地线串长 (m)"
|
label="地线串长 (m)"
|
||||||
>
|
>
|
||||||
<q-tooltip>地线绝缘子串的总长度</q-tooltip>
|
<q-tooltip>地线绝缘子串的总长度</q-tooltip>
|
||||||
</q-input>
|
</q-input>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="params.parameter.altitude"
|
v-model="params.parameter.altitude"
|
||||||
type="number"
|
type="number"
|
||||||
label="海拔高度 (m)"
|
label="海拔高度 (m)"
|
||||||
>
|
>
|
||||||
<q-tooltip>用于修正绝缘子串的闪络电压</q-tooltip>
|
<q-tooltip>用于修正绝缘子串的闪络电压</q-tooltip>
|
||||||
</q-input>
|
</q-input>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="params.parameter.td"
|
v-model="params.parameter.td"
|
||||||
type="number"
|
type="number"
|
||||||
label="雷暴日 (d)"
|
label="雷暴日 (d)"
|
||||||
>
|
>
|
||||||
<q-tooltip>一年中雷暴天数，用于计算地闪密度</q-tooltip>
|
<q-tooltip>一年中雷暴天数，用于计算地闪密度</q-tooltip>
|
||||||
</q-input>
|
</q-input>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="params.parameter.z_0"
|
v-model="params.parameter.z_0"
|
||||||
type="number"
|
type="number"
|
||||||
label="雷电波阻抗 (Ω)"
|
label="雷电波阻抗 (Ω)"
|
||||||
>
|
>
|
||||||
<q-tooltip>雷电波阻抗，用于计算最小雷电流。</q-tooltip>
|
<q-tooltip>雷电波阻抗，用于计算最小雷电流。</q-tooltip>
|
||||||
</q-input>
|
</q-input>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="params.parameter.z_c"
|
v-model="params.parameter.z_c"
|
||||||
type="number"
|
type="number"
|
||||||
label="导线波阻抗 (Ω)"
|
label="导线波阻抗 (Ω)"
|
||||||
>
|
>
|
||||||
<q-tooltip>导线波阻抗，用于计算最小雷电流。</q-tooltip>
|
<q-tooltip>导线波阻抗，用于计算最小雷电流。</q-tooltip>
|
||||||
</q-input>
|
</q-input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 导、地线挂点高度 -->
|
<!-- 导、地线挂点高度 -->
|
||||||
<div class="q-mt-md">
|
<div class="q-mt-md">
|
||||||
<div class="text-subtitle2 q-mb-sm">
|
<div class="text-subtitle2 q-mb-sm">
|
||||||
导、地线挂点垂直坐标 (m)
|
导、地线挂点垂直坐标 (m)
|
||||||
</div>
|
</div>
|
||||||
<div class="row q-col-gutter-sm">
|
<div class="row q-col-gutter-sm">
|
||||||
<div class="col" v-for="(_, index) in params.parameter.h_arm" :key="index">
|
<div class="col" v-for="(_, index) in params.parameter.h_arm" :key="index">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="params.parameter.h_arm[index]"
|
v-model="params.parameter.h_arm[index]"
|
||||||
type="number"
|
type="number"
|
||||||
step="0.1"
|
step="0.1"
|
||||||
:label="index === 0 ? '地线' : `导线 ${index}`"
|
:label="index === 0 ? '地线' : `导线 ${index}`"
|
||||||
dense
|
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>
|
||||||
<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="q-mt-md">
|
||||||
<div class="text-subtitle2 q-mb-sm">
|
<div class="text-subtitle2 q-mb-sm">
|
||||||
导、地线挂点水平坐标 (m)
|
导、地线挂点水平坐标 (m)
|
||||||
</div>
|
</div>
|
||||||
<div class="row q-col-gutter-sm">
|
<div class="row q-col-gutter-sm">
|
||||||
<div class="col" v-for="(_, index) in params.parameter.gc_x" :key="index">
|
<div class="col" v-for="(_, index) in params.parameter.gc_x" :key="index">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="params.parameter.gc_x[index]"
|
v-model="params.parameter.gc_x[index]"
|
||||||
type="number"
|
type="number"
|
||||||
step="0.1"
|
step="0.1"
|
||||||
:label="index === 0 ? '地线' : `导线 ${index}`"
|
:label="index === 0 ? '地线' : `导线 ${index}`"
|
||||||
dense
|
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>
|
||||||
<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="q-mt-md">
|
||||||
<div class="row q-col-gutter-sm">
|
<div class="row q-col-gutter-sm">
|
||||||
<div class="col-12 col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="params.parameter.ground_angels[0]"
|
v-model="params.parameter.ground_angels[0]"
|
||||||
type="number"
|
type="number"
|
||||||
step="1"
|
step="1"
|
||||||
label="地面倾角 (°) - 向下为正"
|
label="地面倾角 (°) - 向下为正"
|
||||||
>
|
>
|
||||||
<q-tooltip>地面倾斜角度，向下为正值</q-tooltip>
|
<q-tooltip>地面倾斜角度，向下为正值</q-tooltip>
|
||||||
</q-input>
|
</q-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</q-card-section>
|
||||||
</div>
|
</q-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 杆塔几何结构可视化 -->
|
<!-- 右侧：杆塔几何结构可视化 -->
|
||||||
<div class="q-mt-md">
|
<div class="col-12 col-lg-6">
|
||||||
<Geometry
|
<Geometry
|
||||||
:h-arm="params.parameter.h_arm"
|
:h-arm="params.parameter.h_arm"
|
||||||
:gc-x="params.parameter.gc_x"
|
:gc-x="params.parameter.gc_x"
|
||||||
:h-c-sag="params.parameter.h_c_sag"
|
:h-c-sag="params.parameter.h_c_sag"
|
||||||
:h-g-sag="params.parameter.h_g_sag"
|
:h-g-sag="params.parameter.h_g_sag"
|
||||||
:ground-angels="params.parameter.ground_angels"
|
:ground-angels="params.parameter.ground_angels"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</div>
|
||||||
</q-card>
|
|
||||||
|
|
||||||
<!-- 高级参数 -->
|
<!-- 高级参数 -->
|
||||||
<q-card class="q-mb-md shadow-2">
|
<q-card class="q-mb-md shadow-2">
|
||||||
|
|||||||
Reference in New Issue
Block a user