ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

主界面，系数校准界面调整

Browse Source
This commit is contained in:
sjl
2025-01-06 09:21:24 +08:00
parent 1be15ee849
commit c4e2da8d67
15 changed files with 302 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/views/machine/testScript/components/testProjectPopup.vue
View File

@@ -35,8 +35,11 @@
<el-tab-pane label="全局设置菜单">
<!-- 全局设置菜单内容 -->
<div class="form-item-container">
<el-form-item label="频率(Hz)" prop='name'>
<el-input />
<el-form-item label="频率：" prop='name'>
<div class="input-label-container">
<el-input style="width: 100px;" />
<label>Hz</label>
</div>
</el-form-item>
</div>
<div class="button-label-container">
@@ -214,6 +217,13 @@ defineExpose({ open })
.button-label-container label {
margin-right: 10px; /* 按钮和文字之间的距离 */
}
.input-label-container {
display: flex;
align-items: center; /* 垂直居中对齐 */
}
.input-label-container label {
margin-left: 5px; /* 添加标签与输入框之间的间距 */
}
</style>

6
frontend/src/views/machine/testScript/components/testScriptDipTab.vue
View File

@@ -2,7 +2,7 @@
<div class="editor-container">
<div class="left-editor">
<!-- 左侧编辑区域内容 -->
<canvas ref="canvas" width="600" height="165"></canvas>
</div>
<div class="right-editor">
<!-- 右侧编辑区域内容 -->
@@ -30,12 +30,14 @@ canvas {
height: 100%;
}
.left-editor {
flex: 3; /* 左侧区域占据 3/4 的宽度 */
margin-right: 10px; /* 可选：添加间距 */
margin-left: 150px; /* 可选：添加间距 */
}
.right-editor {
flex: 1; /* 右侧区域占据 1/4 的宽度 */
margin-right: 250px; /* 向左侧移动一点 */
}
</style>

11
frontend/src/views/machine/testScript/components/testScriptFlickerTab.vue
View File

@@ -13,7 +13,10 @@
<el-input />
</el-form-item>
<el-form-item label="波动类型" prop='name'>
<el-input />
<el-select placeholder="请选择波动类型" style="width: 150px;">
<el-option label="Hz" :value="1"></el-option>
<el-option label="CPM" :value="0"></el-option>
</el-select>
</el-form-item>
</div>
</el-tab-pane>
@@ -23,7 +26,11 @@
<!-- 全局设置菜单内容 -->
<div >
<el-form-item label="波类型" prop='name'>
<el-input />
<el-select placeholder="请选择波类型">
<el-option label="RECT" :value="2"></el-option>
<el-option label="SIN" :value="1"></el-option>
<el-option label="SQU" :value="0"></el-option>
</el-select>
</el-form-item>
</div>
<div >

65
frontend/src/views/machine/testScript/components/testScriptHarmTab.vue
View File

@@ -6,27 +6,39 @@
<div class="table-container">
<el-table :data="tableData1" border class="half-width-table">
<el-table-column prop="date" label="次数" width="60"/>
<el-table-column prop="date" label="谐波含有率" width="125">
<el-table-column prop="date" label="谐波含有率" width="120">
<template #default="scope">
<el-input />
<div class="input-label-container">
<el-input />
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="谐波相角" width="125">
<el-table-column prop="name" label="谐波相角" width="120">
<template #default="scope">
<el-input />
<div class="input-label-container">
<el-input />
<label>°</label>
</div>
</template>
</el-table-column>
</el-table>
<el-table :data="tableData2" border class="half-width-table">
<el-table-column prop="date" label="次数" width="60"/>
<el-table-column prop="date" label="谐波含有率" width="125">
<el-table-column prop="date" label="谐波含有率" width="120">
<template #default="scope">
<el-input />
<div class="input-label-container">
<el-input />
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="谐波相角" width="125">
<el-table-column prop="name" label="谐波相角" width="120">
<template #default="scope">
<el-input />
<div class="input-label-container">
<el-input />
<label>°</label>
</div>
</template>
</el-table-column>
</el-table>
@@ -39,28 +51,39 @@
<div class="table-container">
<el-table :data="tableData1" border class="half-width-table">
<el-table-column prop="date" label="次数" width="60"/>
<el-table-column prop="date" label="谐波含有率" width="125">
<el-table-column prop="date" label="谐波含有率" width="120">
<template #default="scope">
<el-input />
<label>123%</label>
<div class="input-label-container">
<el-input />
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="谐波相角" width="125">
<el-table-column prop="name" label="谐波相角" width="120">
<template #default="scope">
<el-input />
<div class="input-label-container">
<el-input />
<label>°</label>
</div>
</template>
</el-table-column>
</el-table>
<el-table :data="tableData2" border class="half-width-table">
<el-table-column prop="date" label="次数" width="60"/>
<el-table-column prop="date" label="谐波含有率" width="125">
<el-table-column prop="date" label="谐波含有率" width="120">
<template #default="scope">
<el-input />
<div class="input-label-container">
<el-input />
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="谐波相角" width="125">
<el-table-column prop="name" label="谐波相角" width="120">
<template #default="scope">
<el-input />
<div class="input-label-container">
<el-input />
<label>°</label>
</div>
</template>
</el-table-column>
</el-table>
@@ -132,4 +155,12 @@ for (let i = 26; i <= 50; i++) {
margin-right: 0; /* 最后一个表格不需要右侧间距 */
}
.input-label-container {
display: flex;
align-items: center; /* 垂直居中对齐 */
}
.input-label-container label {
margin-left: 5px; /* 添加标签与输入框之间的间距 */
}
</style>

112
frontend/src/views/machine/testScript/components/testScriptVolCurTab.vue
View File

@@ -1,26 +1,101 @@
<template>
<div class="editor-container">
<div class="left-editor">
<!-- 左侧编辑区域内容 -->
<canvas ref="canvas" width="600" height="165"></canvas>
</div>
<div class="right-editor">
<!-- 右侧编辑区域内容 -->
<el-form-item label="电压有效值(V)">
<el-input v-model="input1" />
</el-form-item>
<el-form-item label="电流有效值(A)">
<el-input v-model="input1" />
</el-form-item>
<el-form-item label="相角(°)">
<el-input v-model="input2" />
</el-form-item>
</div>
<div class="editor-container">
<div class="left-editor">
<!-- 左侧编辑区域内容 -->
<canvas ref="canvas" width="600" height="165"></canvas>
</div>
<div class="right-editor">
<!-- 右侧编辑区域内容 -->
<el-form-item label="电压有效值(V)">
<el-input v-model="input1" />
</el-form-item>
<el-form-item label="电流有效值(A)">
<el-input v-model="input1" />
</el-form-item>
<el-form-item label="相角(°)">
<el-input v-model="input2" />
</el-form-item>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const canvas = ref<HTMLCanvasElement | null>(null);
onMounted(() => {
if (canvas.value) {
const ctx = canvas.value.getContext('2d');
if (ctx) {
drawSineWave(ctx);
}
}
});
function drawSineWave(ctx: CanvasRenderingContext2D) {
const width = canvas.value!.width;
const height = canvas.value!.height;
const amplitude = 50; // 振幅
const frequency = 0.02; // 频率
const offset = height / 2; // 偏移量
// 绘制横轴
ctx.beginPath();
ctx.moveTo(0, offset);
ctx.lineTo(width, offset);
ctx.strokeStyle = 'black';
ctx.stroke();
// 绘制纵轴
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, height);
ctx.stroke();
// 绘制横轴刻度
const xStep = width / 10;
for (let x = 0; x <= width; x += xStep) {
ctx.beginPath();
ctx.moveTo(x, offset - 5);
ctx.lineTo(x, offset + 5);
ctx.stroke();
// 添加横轴刻度标签
ctx.font = '12px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText((x / xStep).toFixed(0), x, offset + 20);
}
// 绘制纵轴刻度
const yStep = height / 10;
for (let y = 0; y <= height; y += yStep) {
ctx.beginPath();
ctx.moveTo(-5, y);
ctx.lineTo(5, y);
ctx.stroke();
// 添加纵轴刻度标签
ctx.font = '12px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'right';
ctx.fillText(((offset - y) / yStep - 5).toFixed(1), -10, y + 5);
}
// 绘制正弦波
ctx.beginPath();
ctx.moveTo(0, offset);
for (let x = 0; x < width; x++) {
const y = offset + amplitude * Math.sin(frequency * x);
ctx.lineTo(x, y);
}
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.stroke();
}
</script>
<style scoped>
@@ -35,10 +110,11 @@ canvas {
.left-editor {
flex: 3; /* 左侧区域占据 3/4 的宽度 */
margin-right: 10px; /* 可选：添加间距 */
margin-left: 150px; /* 可选：添加间距 */
}
.right-editor {
flex: 1; /* 右侧区域占据 1/4 的宽度 */
margin-right: 250px; /* 向左侧移动一点 */
}
</style>

2
frontend/src/views/machine/testScript/components/valueTypePopup.vue
View File

@@ -21,7 +21,7 @@
</div>
<TestScriptPopup ref='testScriptPopup' />
<template #footer>
<div >
<div>
<el-button @click='close()'>取 消</el-button>
<el-button type="primary" @click='save()'>新增</el-button>
</div>