微调

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;
-    margin-top: 10px;
-  }
+    flex-direction: column;
 
-  .data-check-body {
-    display: flex;
-    flex-direction: row;
-    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;
-      }
+    .data-check-head {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
     }
 
-    .content-right {
-      margin-left: 10px;
-      flex: 1;
+    .data-check-body {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
 
-      .content-right-title {
-        /*margin-bottom: 10px;*/
-        div {
-          font-size: 16px;
-          font-weight: 600;
+      .content-left-tree {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        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 {
-        box-sizing: border-box;
-        margin-top: 20px;
-        margin-bottom: 10px;
-        max-height: 400px;
-      }
+      .content-right {
+        margin-left: 10px;
+        flex: 1;
 
+        .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;
+        }
+
+      }
     }
   }
 }