系数校准

frontend/src/views/machine/errorSystem/components/errorSystemDetailTable.vue

@@ -113,6 +113,7 @@
   import { useDictStore, } from '@/stores/modules/dict'
   import {CirclePlus, Delete, EditPen,CopyDocument} from '@element-plus/icons-vue'
   import { type CascaderOption, type FormItemRule } from 'element-plus';
+import { el } from 'element-plus/es/locale';
   import { type PropType, type Ref, ref, watch } from 'vue';
   import { defineEmits } from 'vue';
   const emit = defineEmits(['updateTableData']);
@@ -138,15 +139,47 @@
 });
 
 
-// const aaa = 'Freq_Deviation_Freq''FREQ' -
-
+// 定义一个 Map 来存储误差和脚本系统信息
+const errSysAndScriptMap = new Map<string, string>([
+  ['Freq_Deviation_Freq','FREQ'],//频率偏差/频率---频率
+  ['Vol_Deviation_Vol','VRMS'],//电压偏差/电压---电压/相电压有效值
+  ['MSQI_V','V_UNBAN'],//三相不平衡/电压---电压/三相电压负序不平衡度
+  ['MSQI_CUR','I_UNBAN'],//三相不平衡/电流---电流/三相电流负序不平衡度
+  ['Voltage Fluctuation_Voltage Amplitude',''],//电压波动/电压幅值---
+  ['Voltage Fluctuation_Duration',''],//电压波动/持续时间---
+  ['Short Time Flicker Item','PST'],//闪变/短时间闪变---闪变/短时间闪变
+  ['Harmonic_Voltage','V2-50'],//谐波/电压---谐波/谐波电压含有率
+  ['Harmonic_Current','I2-50'],//谐波/电流---谐波/谐波电流幅值
+  ['Harmonic_Angle','VA2-50'],//谐波/相角---谐波/谐波电压相角
+  ['Harmonic_Angle','IA2-50'],//谐波/相角---谐波/谐波电流相角
+  ['Harmonic_Power','P2-50'],//谐波/功率---谐波/谐波有功功率
+  ['Interharmonic_Voltage','SV_1-49'],//间谐波/电压---谐波/间谐波电压含有率
+  ['Interharmonic_Current','SI_1-49'],//间谐波/电流---谐波/间谐波电流幅值
+  ['High Frequency Harmonic_Voltage',''],//高频次谐波/电压
+  ['High Frequency Harmonic_Current',''],//高频次谐波/电流
+  ['Power Item','P'],//功率/功率---功率
+  ['Current Item','IRMS'],//电流/电流---电流/电流有效值
+  ['Dip & Swell & Short duration interruption_Voltage','MAG'],//暂态/电压幅值/电压---暂态/电压幅值
+  ['Dip & Swell & Short duration interruption_Duration','DUR'],//暂态/持续时间/时间---暂态/持续时间
+]);
 
 const handleErrorTypeChange = (value: any, row: any) =>{
-  // 使用示例
-  const matchedRow = findRowById(row, props.errorOptions);
 
-  row.scriptType = value;
-    
+  // const matchedRow = findRowById(row.errorType, props.errorOptions);//选中误差id找对应结构中的含chilren的code
+  // console.log('matchedRow.code',matchedRow.code)
+  // const code = errSysAndScriptMap.get(matchedRow?.code || '') || ''; // 确保 code 不为 undefined
+  // console.log('code',code)
+  // if (code) {
+  //   const matchedRow2 = findRowByCode(code, props.scriptOptions);//误差code映射脚本code，找对应脚本结构中含children的id
+  //   console.log('matchedRow2',matchedRow2)
+  //   if (matchedRow2) {
+  //     row.scriptType = matchedRow2.value;
+  //   }else{
+  //     row.scriptType = '';//如果没有找到匹配的脚本，置空
+  //   }
+  // }else{
+  //   row.scriptType = '';//如果没有找到匹配的脚本，置空
+  // }  
 }
 
 
@@ -165,6 +198,23 @@ const findRowById = (id: string, options: any[]): any | null => {
   }
   return null;
 };
+
+
+// 假设 props.errorOptions 是一个数组，每个元素可能包含 children 属性
+const findRowByCode = (code: string, options: any[]): any | null => {
+  for (const option of options) {
+    if (option.code === code) {
+      return option;
+    }
+    if (option.children && option.children.length > 0) {
+      const result = findRowByCode(code, option.children);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+};
  
 
 // 监听 props.tableData 的变化，确保每次数据变化时都重新设置 sort

frontend/src/views/machine/testScript/components/setValueTable.vue

@@ -1,11 +1,93 @@
-<template>
-    <div>
+import { ref } from "vue"
 
-    </div>
-</template>
+<template>
+     <el-dialog  :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" >
+        <div class='table-box'>
+            <ProTable
+                ref='proTable'
+                :columns='columns'
+                :request-api="getTableList"
+                :pagination="false"
+                :toolButton ='false' 
+                 :style="{ height: '250px',maxHeight: '400px',overflow:'hidden'}"
+            >
+                <!-- :data='testScriptData' 如果要显示静态数据，就切换该配置 -->
+                <!-- 表格 header 按钮 -->
+                <template #tableHeader='scope'>
+                <el-button v-auth.testScript="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
+                <el-button v-auth.testScript="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
+                            @click='batchDelete(scope.selectedListIds)'>
+                    删除
+                </el-button>
+                </template>
+                <!-- 表格操作 -->
+                <template #operation='scope'>
+                    <el-button v-auth.testScript="'upgrade'" type='primary' v-if="scope.row.type !== 1" link :icon='Share' @click='updateType(scope.row)'>复制</el-button>
+                <el-button v-auth.testScript="'edit'" type='primary' link :icon='EditPen' :model-value="false" @click="openDialog('edit', scope.row)">编辑</el-button>
+                <el-button v-auth.testScript="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
+                </template>
+        
+            </ProTable>
+        </div>
+
+            <template #footer>
+                <div >
+                    <el-button @click='close()'>取 消</el-button>
+                    <el-button type="primary" @click='save()'>保存</el-button>
+                </div>
+            </template>
+    </el-dialog>
+
+    <SetValuePopup  ref='setValuePopup' />
+
+  </template>
 
 <script setup lang="ts">
+import type { TestScript } from '@/api/device/interface/testScript'
+import type { ColumnProps } from '@/components/ProTable/interface'
+import {reactive, ref } from 'vue'
+import { dialogBig } from '@/utils/elementBind'
 
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+
+
+// 表格配置项
+const columns = reactive<ColumnProps<TestScript.ResTestScript>[]>([
+  { type: 'selection', fixed: 'left', width: 70 },
+  { type: 'index', fixed: 'left', width: 70, label: '序号' },
+  {
+    prop: 'name',
+    label: '参考设定值类型',
+    minWidth: 350,
+  },
+  {
+    prop: 'standardName',
+    label: '参考设定值子类型',
+    minWidth: 150,
+  },
+  {
+    prop: 'standardTime',
+    label: '参考设定值',
+    minWidth: 150,
+  },
+  { prop: 'operation', label: '操作', fixed: 'right', width: 250 },
+])
+
+// 打开弹窗，可能是新增，也可能是编辑
+const open =  (sign: string,row: any) => {
+    dialogVisible.value = true
+    dialogTitle.value = sign === 'add'? '新增检测项目信息' : '编辑检测项目信息'
+}
+
+
+// 关闭弹窗
+const close = () => {
+    dialogVisible.value = false
+}
+
+// 对外映射
+defineExpose({ open })
 </script>
 
 <style scoped>

frontend/src/views/machine/testScript/components/testProjectPopup.vue

@@ -1,15 +1,72 @@
 <template>
-    <el-dialog  :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig">
+    <el-dialog  :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" width="1400px">
       <div class="dialog-content" >
-        <el-tabs type="border-card" style="height: 100%;">
-            <el-tab-pane >
-
-            </el-tab-pane>
+            <el-tabs type="border-card" class="left-tabs" style="height: 100%;">
+                <el-tab-pane label="输出菜单">
+                    <!-- 输出菜单内容 -->
+                    <el-table :data="tableData"  
+                    :header-cell-style="{ textAlign: 'center',backgroundColor: '#003078',color: '#fff' } " 
+                    :cell-style="{ textAlign: 'center' }" 
+                    style="width: 100%"  
+                    :style="{ height: '295px',overflow:'hidden'}"
+                    :show-header="false"
+                    :span-method="arraySpanMethod">
+                      <el-table-column prop="sort" label="相别" width="60" />
+                      <el-table-column prop="frequency" label="电压/电流" width="90" />
+                      <el-table-column prop="L1" label="值" width="180"/>
+                      <el-table-column label="操作"  width="80">
+                        <template #default="{  }">
+                          <el-button type="info" :icon="Bottom"></el-button>
+                        </template>
+                      </el-table-column>  
+                      <el-table-column label="操作">
+                        <template #default="{ row, $index }">
+                          <el-button :type="buttonTypes[$index].channel || 'info'" @click="toggleType(row, $index,'channel')">通道使能</el-button>
+                          <el-button :type="buttonTypes[$index]?.harmonic || 'info'" @click="toggleType(row, $index, 'harmonic')">谐波使能</el-button>
+                          <el-button :type="buttonTypes[$index]?.interHarmonic || 'info'" @click="toggleType(row, $index, 'interHarmonic')">间谐波使能</el-button>
+                          <el-button :type="buttonTypes[$index]?.flicker || 'info'" @click="toggleType(row, $index, 'flicker')">闪变使能</el-button>
+                          <el-button :type="buttonTypes[$index]?.transient || 'info'" @click="toggleType(row, $index, 'transient')">暂态使能</el-button>
+                        </template>
+                      </el-table-column>                       
+                    </el-table>                        
+                </el-tab-pane>
+            </el-tabs>
+            <el-tabs type="border-card" class="right-tabs" style="height: 100%;">
+                <el-tab-pane label="全局设置菜单">
+                  <!-- 全局设置菜单内容 -->
+                  <div class="form-item-container">
+                    <el-form-item label="频率(Hz)" prop='name'>
+                      <el-input />
+                    </el-form-item>
+                  </div>
+                  <div class="button-label-container">
+                    <label>参考设定值列表:</label>
+                    <el-button type="primary" :icon='EditPen' @click="openDialog">编辑</el-button>
+                  </div>
+                </el-tab-pane>
+            </el-tabs>
+      </div>
+      <div style="margin-top: 20px;">
+        <el-tabs type="border-card"  class="custom-tabs">
+              <el-tab-pane label="电压/电流编辑">
+                  <TestScriptVolCurTab/>
+              </el-tab-pane>
+              <el-tab-pane label="谐波编辑">
+                  <TestScriptHarmTab/>
+              </el-tab-pane>
+              <el-tab-pane label="间谐波编辑">
+                  <TestScriptInHarmTab/>
+              </el-tab-pane>
+              <el-tab-pane label="闪变编辑">
+                  <TestScriptFlickerTab/>
+              </el-tab-pane>
+              <el-tab-pane label="暂态编辑">
+                  <TestScriptDipTab/>
+              </el-tab-pane>
         </el-tabs>
       </div>
-
       
-      <!-- <SetValueTable  ref="setValueTable"/> -->
+      <SetValueTable  ref="setValueTable"/>
 
       <template #footer>
           <div >
@@ -19,18 +76,64 @@
       </template>
     </el-dialog>
   
-  
-  </template>
+</template>
 
 <script setup lang="ts">
 import { dialogBig } from '@/utils/elementBind'
-import { ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import SetValueTable from '@/views/machine/testScript/components/setValueTable.vue';
+import {EditPen,ArrowDown, Bottom} from '@element-plus/icons-vue'
+import { type TabsInstance } from 'element-plus';
+import TestScriptVolCurTab from '@/views/machine/testScript/components/testScriptVolCurTab.vue';
+import TestScriptHarmTab from '@/views/machine/testScript/components/testScriptHarmTab.vue';
+import TestScriptInHarmTab from '@/views/machine/testScript/components/testScriptInHarmTab.vue';
+import TestScriptFlickerTab from '@/views/machine/testScript/components/testScriptFlickerTab.vue';
+import TestScriptDipTab from '@/views/machine/testScript/components/testScriptDipTab.vue';
+
 
 const dialogVisible = ref(false)
 const dialogTitle = ref()
 const setValueTable = ref()
+const buttonTypeOptions = ['default', 'text', 'success', 'warning', 'info', 'primary', 'danger'] as const;
+type ButtonType = typeof buttonTypeOptions[number];
+// 初始化按钮类型
+const buttonTypes = reactive<{ [key: number]: { channel: ButtonType, harmonic: ButtonType, interHarmonic: ButtonType, flicker: ButtonType, transient: ButtonType } }>({});
+ 
 
+const tableData= [
+        { sort: 'L1', frequency: 'V', L1: '电压:57.75V 相角:0°'},
+        { sort: 'L1', frequency: 'I', L1: '电压:57.75V 相角:0°'},
+        { sort: 'L2', frequency: 'V', L1: '电压:57.75V 相角:0°'},
+        { sort: 'L2', frequency: 'I', L1: '电压:57.75V 相角:0°'},
+        { sort: 'L3', frequency: 'V', L1: '电压:57.75V 相角:0°'},
+        { sort: 'L3', frequency: 'I', L1: '电压:57.75V 相角:0°'},
+      ]
+
+// 定义 span-method 逻辑
+const arraySpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => {
+  if (columnIndex === 0 || columnIndex === 3) { // 第一列
+    if (rowIndex % 2 === 0) {
+      return {
+        rowspan: 2,
+        colspan: 1
+      };
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0
+      };
+    }
+  }
+};
+
+
+// 切换按钮类型
+const toggleType = (row: any, $index: number, buttonType: 'channel' | 'harmonic' | 'interHarmonic' | 'flicker' | 'transient') => {
+  if ($index !== undefined) {
+    const currentType = buttonTypes[$index][buttonType];
+    buttonTypes[$index][buttonType] = currentType === 'info' ? 'primary' : 'info';
+  }
+};
 
 // 关闭弹窗
 const close = () => {
@@ -42,11 +145,29 @@ const save = () => {
     
 }
 
+
+
 // 打开弹窗，可能是新增，也可能是编辑
 const open =  (sign: string,row: any) => {
     dialogVisible.value = true
-    dialogTitle.value = sign === 'create'? '新增测试脚本' : '编辑测试脚本'
-   
+    dialogTitle.value = sign === 'add'? '新增检测项目信息' : '编辑检测项目信息'
+
+    // 初始化按钮类型
+  tableData.forEach((_, index) => {
+    buttonTypes[index] = {
+      channel: 'info',
+      harmonic: 'info',
+      interHarmonic: 'info',
+      flicker: 'info',
+      transient: 'info'
+    };
+  });
+}
+
+
+// 打开 drawer(新增、编辑)
+const openDialog = () => {
+  setValueTable.value?.open()
 }
 
 
@@ -55,5 +176,44 @@ defineExpose({ open })
 </script>
 
 <style scoped>
+.dialog-content {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  height: 100%;
+}
+
+.tabs-container {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+}
+
+.left-tabs {
+  flex: 3; /* 左侧 tab 占据 3/4 的宽度 */
+  margin-right: 10px; /* 可选：添加间距 */
+}
+
+.right-tabs {
+  flex: 1; /* 右侧 tab 占据 1/4 的宽度 */
+}
+
+.form-item-container {
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  margin-bottom: 10px; /* 可选：添加间距 */
+}
+
+.button-label-container {
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+}
+
+.button-label-container label {
+  margin-right: 10px; /* 按钮和文字之间的距离 */
+}
+
 
 </style>

frontend/src/views/machine/testScript/components/testScriptDetail.vue

@@ -18,7 +18,7 @@
                   <el-tab-pane 
                       v-for="tab in props.options" 
                       :key="tab.name" 
-                      :label="tab.label"
+                      :label="tab.label.replace(/准确度|检测/g, '')"
                       :name="tab.name">
                               <!-- 频率tab -->
                               <el-tabs type="border-card" style="height: 400px;">

frontend/src/views/machine/testScript/components/testScriptDipTab.vue

@@ -0,0 +1,41 @@
+<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="设定幅度(%)">
+                            <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">
+
+</script>
+
+<style scoped>
+canvas {
+  border: 1px solid #ccc;
+}
+
+.editor-container {
+  display: flex;
+  height: 100%;
+}
+
+.left-editor {
+  flex: 3; /* 左侧区域占据 3/4 的宽度 */
+  margin-right: 10px; /* 可选：添加间距 */
+}
+
+.right-editor {
+  flex: 1; /* 右侧区域占据 1/4 的宽度 */
+}
+</style>

frontend/src/views/machine/testScript/components/testScriptFlickerTab.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="tabs-container">
+      <el-tabs type="border-card" class="fixed-width-tabs" style="height: 100%;">
+        <el-tab-pane label="Modulation">
+          <!-- 全局设置菜单内容 -->
+          <div>
+            <el-form-item label="电压变动幅度(%)" prop='name'>
+                <el-input  style="width: 200px;" />
+            </el-form-item>
+          </div>
+          <div class="form-container">
+                <el-form-item label="波动频度(/min/Hz)" prop='name'>
+                <el-input />
+                </el-form-item>
+                <el-form-item label="波动类型" prop='name'>
+                <el-input />
+                </el-form-item>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    <el-tabs type="border-card" class="fixed-width-tabs" style="height: 100%;">
+        <el-tab-pane label="WaveForm">
+          <!-- 全局设置菜单内容 -->
+          <div >
+                <el-form-item label="波类型" prop='name'>
+                    <el-input />
+                </el-form-item>
+          </div>
+          <div >
+                <el-form-item label="占空比(%)" prop='name'>
+                    <el-input />
+                </el-form-item>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+.form-container {
+  display: flex;
+  justify-content: space-between; /* 使两个 el-form-item 之间有间距 */
+  align-items: center; /* 使两个 el-form-item 垂直居中对齐 */
+}
+
+.tabs-container {
+  display: flex;
+  justify-content: center; /* 使两个 el-tabs 居中对齐 */
+  align-items: stretch; /* 使两个 el-tabs 高度拉伸 */
+  height: 100%;
+  padding: 0 20px; /* 可选：添加左右间距 */
+}
+
+.fixed-width-tabs {
+ 
+  margin-right: 100px; /* 可选：添加右侧间距 */
+}
+
+.fixed-width-tabs:last-child {
+  margin-right: 0; /* 最后一个 el-tabs 不需要右侧间距 */
+}
+
+.el-tab-pane {
+  display: flex;
+  flex-direction: column; /* 确保内容上下排列 */
+}
+
+.el-form-item {
+  margin-bottom: 20px; /* 可选：添加表单项之间的间距 */
+}
+</style>

frontend/src/views/machine/testScript/components/testScriptHarmTab.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="tabs-container">
+      <el-tabs type="border-card" class="right-tabs" style="height: 100%;">
+        <el-tab-pane label="电压通道">
+           <!-- 电压通道内容 -->
+        <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">
+              <template #default="scope">
+                <el-input />
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="谐波相角" width="125">
+              <template #default="scope">
+                <el-input />
+              </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">
+              <template #default="scope">
+                <el-input />
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="谐波相角" width="125">
+              <template #default="scope">
+                <el-input />
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+      <el-tabs type="border-card" style="height: 100%;">
+        <el-tab-pane label="电流通道">
+          <!-- 电流通道内容 -->
+          <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">
+              <template #default="scope">
+                <el-input />
+                <label>123%</label>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="谐波相角" width="125">
+              <template #default="scope">
+                <el-input />
+              </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">
+              <template #default="scope">
+                <el-input />
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="谐波相角" width="125">
+              <template #default="scope">
+                <el-input />
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+// 定义表格数据项的类型
+interface TableItem {
+  date: string;
+  harmonicRate?: string;
+  harmonicPhase?: string;
+  name?: string;
+}
+
+// 定义并初始化 tableData
+const tableData1 = ref<TableItem[]>([]);
+const tableData2 = ref<TableItem[]>([]);
+
+for (let i = 1; i <= 25; i++) {
+  tableData1.value.push({
+    date: i.toString(),
+    harmonicRate: `谐波含有率${i}`,
+    harmonicPhase: `谐波相角${i}`
+  });
+}
+for (let i = 26; i <= 50; i++) {
+  tableData2.value.push({
+    date: i.toString(),
+    harmonicRate: `谐波含有率${i}`,
+    harmonicPhase: `谐波相角${i}`
+  });
+}
+</script>
+
+<style scoped>
+.tabs-container {
+  display: flex;
+  justify-content: space-between; /* 使两个 el-tabs 之间有间距 */
+  height: 100%;
+}
+
+.right-tabs {
+  flex: 1; /* 使两个 el-tabs 占据相同的空间 */
+  margin-right: 10px; /* 可选：添加右侧间距 */
+}
+
+.el-tabs {
+  flex: 1; /* 使两个 el-tabs 占据相同的空间 */
+}
+
+.table-container {
+  display: flex;
+  justify-content: space-between; /* 使两个表格之间有间距 */
+  width: 100%;
+}
+
+.half-width-table {
+  flex: 1; /* 使两个表格占据相同的空间 */
+  margin-right: 10px; /* 可选：添加表格之间的间距 */
+}
+
+.half-width-table:last-child {
+  margin-right: 0; /* 最后一个表格不需要右侧间距 */
+}
+
+</style>

frontend/src/views/machine/testScript/components/testScriptInHarmTab.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="tabs-container">
+      <el-tabs type="border-card" class="fixed-width-tabs" style="height: 100%;">
+        <el-tab-pane label="间谐波A">
+          <!-- 全局设置菜单内容 -->
+          <div>
+            <el-form-item label="含有率(%)" prop='name'>
+              <el-input />
+            </el-form-item>
+          </div>
+          <div>
+            <el-form-item label="间谐波次数" prop='name'>
+              <el-input />
+            </el-form-item>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+      <el-tabs type="border-card" class="fixed-width-tabs" style="height: 100%;">
+        <el-tab-pane label="间谐波B">
+          <!-- 全局设置菜单内容 -->
+          <div>
+            <el-form-item label="含有率(%)" prop='name'>
+              <el-input />
+            </el-form-item>
+          </div>
+          <div>
+            <el-form-item label="间谐波次数" prop='name'>
+              <el-input />
+            </el-form-item>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+.tabs-container {
+  display: flex;
+  justify-content: center; /* 使两个 el-tabs 居中对齐 */
+  align-items: stretch; /* 使两个 el-tabs 高度拉伸 */
+  height: 100%;
+  padding: 0 20px; /* 可选：添加左右间距 */
+}
+
+.fixed-width-tabs {
+  width: 400px; /* 设置固定的宽度 */
+  margin-right: 100px; /* 可选：添加右侧间距 */
+}
+
+.fixed-width-tabs:last-child {
+  margin-right: 0; /* 最后一个 el-tabs 不需要右侧间距 */
+}
+
+.el-tab-pane {
+  display: flex;
+  flex-direction: column; /* 确保内容上下排列 */
+}
+
+.el-form-item {
+  margin-bottom: 20px; /* 可选：添加表单项之间的间距 */
+}
+</style>

frontend/src/views/machine/testScript/components/testScriptVolCurTab.vue

@@ -0,0 +1,44 @@
+<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>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+canvas {
+  border: 1px solid #ccc;
+}
+
+.editor-container {
+  display: flex;
+  height: 100%;
+}
+
+.left-editor {
+  flex: 3; /* 左侧区域占据 3/4 的宽度 */
+  margin-right: 10px; /* 可选：添加间距 */
+}
+
+.right-editor {
+  flex: 1; /* 右侧区域占据 1/4 的宽度 */
+}
+</style>