微调

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,53 +551,67 @@ defineExpose({
 
 <style lang="scss" scoped>
 
-.data-check-dialog {
+.dialog {
   display: flex;
   flex-direction: column;
+  overflow-y: hidden;
+  overflow-x: hidden;
   width: 100%;
 
-  .data-check-head {
+  .data-check-dialog {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    margin-top: 10px;
-  }
 
-  .data-check-body {
+    .data-check-head {
-    display: flex;
+      display: flex;
-    flex-direction: row;
+      flex-direction: row;
-    width: 100%;
+      width: 100%;
-
-    .content-left-tree {
-      width: 240px;
-      max-height: 445px;
-      padding: 10px 0;
-      border: 1px solid #ccc;
-
-      .content-left-tree-switch {
-        text-align: right;
-        margin-right: 10px;
-      }
     }
 
-    .content-right {
+    .data-check-body {
-      margin-left: 10px;
+      display: flex;
-      flex: 1;
+      flex-direction: row;
+      width: 100%;
 
-      .content-right-title {
+      .content-left-tree {
-        /*margin-bottom: 10px;*/
+        display: flex;
-        div {
+        flex-direction: column;
-          font-size: 16px;
+        align-items: center;
-          font-weight: 600;
+
+        padding: 10px 0;
+        border: 1px solid #ccc;
+
+        .content-tree {
+          width: 250px;
+          max-width: 250px;
+          height: 450px;
+          max-height: 450px;
+          overflow-x: auto;
+          overflow-y: auto;
+          margin-top: 10px;
         }
       }
 
-      .content-right-Tabs {
+      .content-right {
-        box-sizing: border-box;
+        margin-left: 10px;
-        margin-top: 20px;
+        flex: 1;
-        margin-bottom: 10px;
-        max-height: 400px;
-      }
 
+        .content-right-title {
+          /*margin-bottom: 10px;*/
+          div {
+            font-size: 16px;
+            font-weight: 600;
+          }
+        }
+
+        .content-right-Tabs {
+          box-sizing: border-box;
+          margin-top: 20px;
+          margin-bottom: 10px;
+          max-height: 400px;
+        }
+
+      }
     }
   }
 }

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%"
@@ -39,7 +39,7 @@
     <!-- v-on:cell-click="handleClick" -->
     <!-- <el-table :key="tableKey" :data="tableData" :row-class-name="tableRowClassName" row-key="id" height="545px" :header-cell-style="{ background: '#003078', color: '#eee', textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border> -->
     <!-- <el-table :data="tableData" :row-class-name="tableRowClassName" row-key="id" height="545px" :header-cell-style="{ background: '#003078', color: '#eee', textAlign: 'center' } "  style="width: 100%" border> -->
-    <div class="dialog-content ">
+    <div class="dialog-content">
       <el-table :data="tableData" :cell-class-name="tableCell" row-key="id" height="450px"
                 :header-cell-style="{ background: '#003078', color: '#eee', textAlign: 'center' } " style="width: 100%"
                 border>
@@ -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;