微调

2024-12-26 09:28:19 +08:00
parent 2e17531c52
commit 6ce58e86ad
12 changed files with 414 additions and 48 deletions
--- a/frontend/src/views/machine/testScript/components/comparisonPopup.vue
+++ b/frontend/src/views/machine/testScript/components/comparisonPopup.vue
@@ -123,8 +123,6 @@ const open = (currentMode: string) => {
  
 // 对外映射
 defineExpose({ open })
-const props = defineProps<{
-  refreshTable: (() => Promise<void>) | undefined;
-}>()
+

 </script>
--- a/frontend/src/views/machine/testScript/components/setValuePopup.vue
+++ b/frontend/src/views/machine/testScript/components/setValuePopup.vue
@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/views/machine/testScript/components/setValueTable.vue
+++ b/frontend/src/views/machine/testScript/components/setValueTable.vue
@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/views/machine/testScript/components/testProjectPopup.vue
+++ b/frontend/src/views/machine/testScript/components/testProjectPopup.vue
@@ -0,0 +1,59 @@
+<template>
+    <el-dialog  :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig">
+      <div class="dialog-content" >
+        <el-tabs type="border-card" style="height: 100%;">
+            <el-tab-pane >
+
+            </el-tab-pane>
+        </el-tabs>
+      </div>
+
+      
+      <!-- <SetValueTable  ref="setValueTable"/> -->
+
+      <template #footer>
+          <div >
+            <el-button @click='close()'>取 消</el-button>
+            <el-button type="primary" @click='save()'>保存</el-button>
+          </div>
+      </template>
+    </el-dialog>
+  
+  
+  </template>
+
+<script setup lang="ts">
+import { dialogBig } from '@/utils/elementBind'
+import { ref } from 'vue'
+import SetValueTable from '@/views/machine/testScript/components/setValueTable.vue';
+
+const dialogVisible = ref(false)
+const dialogTitle = ref()
+const setValueTable = ref()
+
+
+// 关闭弹窗
+const close = () => {
+    dialogVisible.value = false
+}
+    
+// 保存数据
+const save = () => {
+    
+}
+
+// 打开弹窗，可能是新增，也可能是编辑
+const open =  (sign: string,row: any) => {
+    dialogVisible.value = true
+    dialogTitle.value = sign === 'create'? '新增测试脚本' : '编辑测试脚本'
+   
+}
+
+
+// 对外映射
+defineExpose({ open })
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/views/machine/testScript/components/testScriptDetail.vue
+++ b/frontend/src/views/machine/testScript/components/testScriptDetail.vue
@@ -1,4 +1,8 @@
 <template>
+  <div class="divider-container">
+    <el-divider style="width: 400px">检测脚本信息</el-divider>
+    <el-divider style="width: 1300px">检测项目概要信息</el-divider>
+  </div>
    <div class="data-check-content">
        <div class="content-tree" >
            <el-tree 
@@ -8,32 +12,91 @@
            :props="defaultProps" 
            @node-click="handleNodeClick" />
        </div>
-        <div class="content-right-Tabs" style="height: 500px;">
+        
+        <div class="content-right-Tabs" style="height: 470px;width: 100px;">
              <el-tabs type="border-card" style="height: 100%;">
                  <el-tab-pane 
-                      v-for="tab in tabs" 
+                      v-for="tab in props.options" 
                      :key="tab.name" 
-                      :label="tab.label" 
+                      :label="tab.label"
                      :name="tab.name">
                              <!-- 频率tab -->
-                              <el-tabs type="border-card" style="height: 430px;">
+                              <el-tabs type="border-card" style="height: 400px;">
                                    <el-tab-pane 
-                                      v-for="subTab in tab.subTabs" 
+                                      v-for="subTab in tab.children || []"  
                                      :key="subTab.name" 
                                      :label="subTab.label" 
                                      :name="subTab.name">
                                  <!-- 子标签页内容 -->
+                                  <div class="dialog-footer">
+                                        <el-button :icon='CirclePlus' type="primary" @click="openDialog('add')">新增</el-button>
+                                  </div>
+                                  <div class="table-container">
+                                      <el-table :data="tableData"  
+                                            :header-cell-style="{ textAlign: 'center',backgroundColor: '#003078',color: '#fff' } " 
+                                            :cell-style="{ textAlign: 'center' }" 
+                                            style="width: 100%"  
+                                            :style="{ height: '240px',overflow:'hidden'}">
+                                              <el-table-column prop="sort" label="组次" width="60" />
+                                              <el-table-column prop="frequency" label="频率(Hz)" width="100" />
+                                              <el-table-column prop="L1" label="L1"/>
+                                              <el-table-column prop="L2" label="L2"/>
+                                              <el-table-column prop="L3" label="L3"/>
+                                              <el-table-column label="操作" min-width="100">
+                                              <template  #default="{ row }">
+                                                  <el-button type="primary" link :icon='CopyDocument' @click="copyRow(row)">复制</el-button>
+                                                  <el-button type="primary" link :icon='CopyDocument' @click="openAddDialog('edit',row)">编辑</el-button>
+                                                  <el-button  type='primary' link :icon='Delete'  @click="deleteRow(row)">删除</el-button>
+                                              </template>
+                                              </el-table-column>
+                                      </el-table>
+                                  </div>
+                                  <div class="dialog-footer" style="margin-top: 20px;">
+                                        <el-button :icon='CirclePlus' type="primary" @click="openAddDialog()">保存测试项</el-button>
+                                  </div>
                                </el-tab-pane>
                              </el-tabs>
                  </el-tab-pane>
              </el-tabs>
        </div>                  
    </div>
+
+    <TestProjectPopup ref="testProjectPopup" />
+
 </template>

 <script setup lang="ts">
-import { ref } from 'vue';
+import { type PropType, ref } from 'vue';
 import { data } from "@/api/plan/autoTest.json";
+import type { CascaderOption } from 'element-plus';
+import {CirclePlus, Delete, EditPen,CopyDocument} from '@element-plus/icons-vue'
+import type { TestScript } from '@/api/device/interface/testScript';
+import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue';
+
+const testProjectPopup = ref()
+
+interface TabOption {
+  label: string;
+  name: string;
+  children?: TabOption[];
+}
+
+const props = defineProps({
+    options: {
+      type: Array as PropType<TabOption[]>,
+      required: true
+    },
+});
+
+const tableData= [
+        { sort: 1, frequency: 42.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
+        { sort: 2, frequency: 50, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
+        { sort: 3, frequency: 50.05, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
+        { sort: 4, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
+        { sort: 5, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
+        { sort: 6, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
+      ]
+

 const tabs = ref([
  {
@@ -147,17 +210,24 @@ const handleNodeClick = (data: any) => {
  console.log(data);
 };

+// 打开 drawer(新增、编辑)
+const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
+    testProjectPopup.value?.open(titleType, row)
+}
+
+
+

 </script>
 <style scoped>
 .data-check-content {
  display: flex;
-  gap: 20px;
+  gap: 10px;
 }

 .content-tree {
  width: 300px;
-  height: 500px;
+  height: 470px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-right: 10px;
@@ -173,6 +243,21 @@ const handleNodeClick = (data: any) => {
 .content-right-Tabs {
  flex: 1; /* 根据需要调整宽度比例 */
 }
+
+.dialog-footer{
+  display: flex; 
+  justify-content: flex-end; 
+  margin-bottom: 10px;
+}
+
+.divider-container {
+  display: flex;
+  
+}
+
+.divider-container .el-divider {
+  margin-right: 30px; /* 根据需要调整间距 */
+}
 </style>


--- a/frontend/src/views/machine/testScript/components/testScriptPopup.vue
+++ b/frontend/src/views/machine/testScript/components/testScriptPopup.vue
@@ -7,6 +7,7 @@
              width="1400px">
    <div class="dialog-content" >
              <el-form :model='formContent' label-width="auto" class="form-three ">
+                      <el-divider >基础信息</el-divider>      
                      <el-form-item label="脚本名称"  prop='name'>
                          <el-input v-model='formContent.name' />
                      </el-form-item>
@@ -20,23 +21,14 @@
                                    placeholder="请选择标准推行年份"
                                    />
                      </el-form-item>
-                      <el-form-item label='值类型'  prop='valueType' >
-                        <el-select v-model="formContent.valueType" filterable  clearable placeholder="请选择值类型">
-                                        <el-option
-                                        v-for="item in dictStore.getDictData('Script_Value_Type')"
-                                        :key="item.id"
-                                        :label="item.name"
-                                        :value="item.id"
-                                        />
-                        </el-select>
-                      </el-form-item> 
              </el-form>
    </div>
-    <TestScriptDetail />
+    <TestScriptDetail :options="secondLevelOptions" />
    <template #footer>
        <div >
          <el-button @click='close()'>取 消</el-button>
-          <el-button type="primary" @click='save()'>保存</el-button>
+          <el-button type="primary" @click='save()'>保存脚本</el-button>
+          <el-button type="primary" @click='save()'>脚本另存为</el-button>
        </div>
    </template>
  </el-dialog>
@@ -49,9 +41,11 @@ import {  computed, ref } from 'vue'
 import { useDictStore } from '@/stores/modules/dict'
 import TestScriptDetail from '@/views/machine/testScript/components/testScriptDetail.vue';
 import { type TestScript } from '@/api/device/interface/testScript';
-
+import type { Dict } from '@/api/system/dictionary/interface';
+import {getDictTreeList} from '@/api/system/dictionary/dictTree'
+import type { CascaderOption } from 'element-plus';
 const modeId = ref()
-
+const secondLevelOptions: any[] = [];

 // 定义弹出组件元信息
 const dialogFormRef = ref()
@@ -108,19 +102,52 @@ const dictStore = useDictStore()


 // 打开弹窗，可能是新增，也可能是编辑
-const open = (sign: string,row: any,currentMode: string) => {
+const open = async (sign: string,row: any,currentMode: string,id:string) => {
+      const dictCode = '测试脚本字典表'; // 替换为实际需要的字典代码
+      const resDictTree: Dict.ResDictTree = {
+        name: dictCode,
+        id: '',
+        pid: '',
+        pids: '',
+        code: '',
+        sort: 0
+      };
+      const result = await getDictTreeList(resDictTree);
+      //allOptions.value = convertToOptions(result.data as Dict.ResDictTree[]);
+      const allOptions = convertToOptions(result.data as Dict.ResDictTree[]);
+      // 提取第二层节点
+      allOptions.forEach(option => {
+            if (option.children && option.children.length > 0) {
+              secondLevelOptions.push(...option.children);
+            }
+          });    
+
+          console.log('secondLevelOptions',secondLevelOptions);
+
+    if(id != ''){//新增的时候才会重新赋值值类型
+      formContent.value.valueType = id
+    }
    titleType.value = sign
    modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id;
+
+
    // 重置表单
    dialogFormRef.value?.resetFields()
    dialogVisible.value = true
 }
+
+  // 转换函数
+  const convertToOptions = (dictTree: Dict.ResDictTree[]): CascaderOption[] => {
+    return dictTree.map(item => ({
+        value: item.id,
+        label: item.name,
+        children: item.children ? convertToOptions(item.children) : undefined
+    }));
+    };
  
 // 对外映射
 defineExpose({ open })
-const props = defineProps<{
-  refreshTable: (() => Promise<void>) | undefined;
-}>()
+


 </script>
--- a/frontend/src/views/machine/testScript/components/valueTypePopup.vue
+++ b/frontend/src/views/machine/testScript/components/valueTypePopup.vue
@@ -0,0 +1,78 @@
+
+<template>
+    <el-dialog  title="请确认检测脚本值类型"
+                v-model='dialogVisible' 
+                @close="close" 
+                v-bind="dialogSmall" 
+               >
+      <div class="dialog-content" >
+                <el-form>
+                        <el-form-item label='值类型'>
+                          <el-select v-model="selectedValue" filterable  clearable placeholder="请选择值类型">
+                                          <el-option
+                                          v-for="item in dictStore.getDictData('Script_Value_Type')"
+                                          :key="item.id"
+                                          :label="item.name"
+                                          :value="item.id"
+                                          />
+                          </el-select>
+                        </el-form-item> 
+                </el-form>
+      </div>
+      <TestScriptPopup  ref='testScriptPopup' />
+      <template #footer>
+          <div >
+            <el-button @click='close()'>取 消</el-button>
+            <el-button type="primary" @click='save()'>新增</el-button>
+          </div>
+      </template>
+    </el-dialog>
+  
+  
+  </template>
+  <script setup lang='ts'>
+  import { dialogSmall } from '@/utils/elementBind'
+  import {  ref } from 'vue'
+  import { useDictStore } from '@/stores/modules/dict'
+  import { type TestScript } from '@/api/device/interface/testScript';
+  
+  const mode = ref()
+  const testScriptPopup = ref()
+  // 定义弹出组件元信息
+  const dialogFormRef = ref()
+  const dictStore = useDictStore()
+  const dialogVisible = ref(false)
+  const selectedValue = ref()
+  
+    // 关闭弹窗
+    const close = () => {
+      dialogVisible.value = false
+      // 重置表单
+      dialogFormRef.value?.resetFields()
+    }
+    
+    // 保存数据
+    const save = () => {
+        testScriptPopup.value?.open('新增检测脚本', {}, mode.value,selectedValue.value)
+    }
+  
+  
+  // 打开弹窗，可能是新增，也可能是编辑
+  const open = (sign: string,row: any,currentMode: string) => {
+      mode.value = currentMode
+      // 重置表单
+      dialogFormRef.value?.resetFields()
+      dialogVisible.value = true
+  }
+    
+  // 对外映射
+  defineExpose({ open })
+
+  
+  
+  </script>
+  <style scoped>
+  /* .dialog-content {
+    padding: 10px;
+  } */
+  </style>
--- a/frontend/src/views/machine/testScript/index.vue
+++ b/frontend/src/views/machine/testScript/index.vue
@@ -23,8 +23,9 @@

    </ProTable>
  </div>
-  <ComparisonPopup :refresh-table='proTable?.getTableList' ref='comparisonPopup' />
-  <TestScriptPopup :refresh-table='proTable?.getTableList' ref='testScriptPopup' />
+  <ComparisonPopup  ref='comparisonPopup' />
+  <ValueTypePopup  ref='valueTypePopup' />
+  <TestScriptPopup  ref='testScriptPopup' />

 </template>

@@ -37,6 +38,7 @@ import { CirclePlus, Delete, EditPen, Share } from '@element-plus/icons-vue'
 import { useDictStore } from '@/stores/modules/dict'
 import ComparisonPopup from './components/comparisonPopup.vue'
 import TestScriptPopup from './components/testScriptPopup.vue'
+import ValueTypePopup from './components/valueTypePopup.vue'
 import {
  getPqScriptList,updatePqScript,deletePqScript,
 } from '@/api/device/testScript/index'
@@ -44,6 +46,7 @@ import { computed, reactive, ref } from 'vue'
 import { useModeStore } from '@/stores/modules/mode'; // 引入模式 store
 const comparisonPopup = ref()
 const testScriptPopup = ref()
+const valueTypePopup = ref()
 const modeStore = useModeStore();
 const dictStore = useDictStore()

@@ -114,7 +117,12 @@ const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> =
  if(modeStore.currentMode == '比对式'){
    comparisonPopup.value?.open(titleType, row,modeStore.currentMode,)
  }else{
-    testScriptPopup.value?.open(titleType, row,modeStore.currentMode)
+    if(titleType == 'add'){
+          valueTypePopup.value?.open(titleType, row,modeStore.currentMode)
+    }else{
+          testScriptPopup.value?.open(titleType, row,modeStore.currentMode,'')
+    }
+    
  }