系数校准

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>