微调

frontend/src/views/home/components/dataCheckSingleChannelSingleTestPopup.vue

@@ -1,5 +1,6 @@
 <template>
-  <el-dialog title="数据查询" :model-value='visible' @close="close" v-bind="dialogBig" draggable style="height: 100%;">
+  <el-dialog :append-to-body="appendToBody" class="dialog" title="数据查询" :model-value='visible' @close="close"
+             v-bind="dialogBig" :draggable="false" style="margin-left: 20%;">
     <div class="data-check-dialog">
       <div class="data-check-head">
         <el-form :model='formContent' label-width="auto" class="form-three ">
@@ -26,7 +27,7 @@
 
       <div class="data-check-body">
         <div class="content-left-tree">
-          <div class="content-left-tree-switch">
+          <div>
             <el-radio-group v-model="scriptSwitch">
               <el-radio-button label="不合格测试项" value="0"/>
               <el-radio-button label="全部测试项" value="1"/>
@@ -67,6 +68,11 @@ import DataCheckRawDataTable from './dataCheckRawDataTable.vue'
 import type {CheckResult, DataCheck, RawData} from "@/api/check/interface";
 import {data as treeData} from "@/api/plan/autoTest.json";
 
+const {appendToBody} = defineProps<{
+  appendToBody:boolean
+}>()
+
+
 const formContent = reactive<DataCheck>({
   testScriptName: 'Q/GDW 10650.4-2021 模拟式',
   errorSysName: 'Q/GDW 10650.2-2021',
@@ -104,7 +110,7 @@ const monitorIdxList = [
 
 
 // 点击左侧树节点触发事件
-const handleNodeClick = (data) => {
+const handleNodeClick = (data: any) => {
   console.log(data);
 };
 
@@ -545,15 +551,21 @@ defineExpose({
 
 <style lang="scss" scoped>
 
+.dialog {
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  width: 100%;
+
   .data-check-dialog {
     display: flex;
     flex-direction: column;
-  width: 100%;
 
     .data-check-head {
       display: flex;
       flex-direction: row;
-    margin-top: 10px;
+      width: 100%;
     }
 
     .data-check-body {
@@ -562,14 +574,21 @@ defineExpose({
       width: 100%;
 
       .content-left-tree {
-      width: 240px;
-      max-height: 445px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
         padding: 10px 0;
         border: 1px solid #ccc;
 
-      .content-left-tree-switch {
-        text-align: right;
-        margin-right: 10px;
+        .content-tree {
+          width: 250px;
+          max-width: 250px;
+          height: 450px;
+          max-height: 450px;
+          overflow-x: auto;
+          overflow-y: auto;
+          margin-top: 10px;
         }
       }
 
@@ -595,4 +614,5 @@ defineExpose({
       }
     }
   }
+}
 </style>

frontend/src/views/home/components/test.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dialog">
+  <div class="dialog" v-bind="dialogBig">
     <div class="dialog-title">
       <el-progress
           style="width: 90%"
@@ -123,7 +123,7 @@
       :visible="resultDialogVisible"
       @update:visible="resultDialogVisible = $event"
   ></resultPopup>
-  <dataCheckSingleChannelSingleTestPopup ref="dialogRef1"/>
+  <dataCheckSingleChannelSingleTestPopup :append-to-body="true" ref="dialogRef1"/>
 
 </template>
 <script lang="tsx" setup name="test">
@@ -131,6 +131,7 @@ import {Check, Refresh, VideoPause} from '@element-plus/icons-vue'
 import resultPopup from './resultPopup.vue'
 import dataCheckSingleChannelSingleTestPopup from './dataCheckSingleChannelSingleTestPopup.vue'
 import {reactive} from "vue";
+import {dialogBig} from "@/utils/elementBind";
 
 const minwidth = ref(110)
 const activeIndex = ref(0)
@@ -2047,6 +2048,8 @@ watch(ts, function (newValue, oldValue) {
 .dialog {
   display: flex;
   flex-direction: column;
+  overflow-y: hidden;
+  overflow-x: hidden;
 }
 
 .dialog-title {
@@ -2059,7 +2062,7 @@ watch(ts, function (newValue, oldValue) {
 
 .dialog-content {
   max-height: 450px;
-  overflow-y: auto;
+  overflow-y: hidden;
 }
 
 :deep(.el-collapse-item__header) {
@@ -2068,7 +2071,7 @@ watch(ts, function (newValue, oldValue) {
 
 .dialog-log {
   height: 50px;
-  overflow-y: auto;
+  overflow-y: hidden;
   // flex-grow: 1;
   // display: flex;
   // flex-direction: column-reverse;
@@ -2080,6 +2083,7 @@ watch(ts, function (newValue, oldValue) {
 }
 
 </style>
+
 <style lang="scss" scoped>
 :deep(.el-button--small) {
   height: 20px !important;