修改样式问题

frontend/src/styles/element.scss

@@ -490,3 +490,21 @@
     // color: var(--ba-bg-color-overlay) !important;
   }
 }
+.el-message-box{
+  padding: 0px !important;
+  .el-message-box__header{
+    background-color:  var(--el-color-primary);
+    .el-message-box__title{
+      color: #fff;
+      padding: 10px 10px 0;
+    }
+   
+  }
+  .el-message-box__content{
+    padding: 10px ;
+    border-bottom: 1px solid #cccccc;
+  }
+  .el-message-box__btns {
+  
+    padding: 10px;}
+  }

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

@@ -346,7 +346,7 @@ emit('update:testStatus',ts.value)
       margin-bottom: 10px;
   }
   .right-content{
-    max-height: 400px;
+    /* max-height: 400px; */
   }
 
   .custom-tabs-label .el-icon {
@@ -356,4 +356,10 @@ emit('update:testStatus',ts.value)
   vertical-align: middle;
   margin-left: 4px;
 }
+.dialog-content{
+  height: 472px;
+}
+.el-tabs--border-card {
+  height: 435px;
+}
 </style>

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

@@ -3,14 +3,8 @@
     <el-tabs type="border-card">
       <el-tab-pane label="预检测项目">
         <div class="form-grid">
-                    <el-checkbox
+          <el-checkbox v-for="(item, index) in detectionOptions" v-model="item.selected" :key="index"
-                            v-for="(item, index) in detectionOptions"
+            :label="item.name"></el-checkbox>
-                            v-model="item.selected"
-                            :key="index"
-                            :label="item.name"
-                            
-                            ></el-checkbox
-                        >
           <!-- disabled="true" -->
         </div>
       </el-tab-pane>
@@ -18,7 +12,8 @@
 
     <div class="test-dialog">
       <div class="dialog-left">
-    <el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus" finish-status="success">
+        <el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus"
+          finish-status="success">
           <el-step title="源通讯校验" />
           <el-step title="设备通讯校验" />
           <el-step title="协议校验" />
@@ -30,28 +25,32 @@
         <el-collapse v-model="collapseActiveName" accordion>
           <el-collapse-item title="源通讯校验" name="1">
             <div class="div-log">
-                    <p v-for="(item, index) in step1InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}">
+              <p v-for="(item, index) in step1InitLog" :key="index"
+                :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
                 {{ item.log }} <br />
               </p>
             </div>
           </el-collapse-item>
           <el-collapse-item title="设备通讯校验" name="2">
             <div class="div-log">
-                  <p v-for="(item, index) in step2InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}">
+              <p v-for="(item, index) in step2InitLog" :key="index"
+                :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
                 {{ item.log }} <br />
               </p>
             </div>
           </el-collapse-item>
           <el-collapse-item title="协议校验" name="3">
             <div class="div-log">
-                  <p v-for="(item, index) in step3InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}">
+              <p v-for="(item, index) in step3InitLog" :key="index"
+                :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
                 {{ item.log }} <br />
               </p>
             </div>
           </el-collapse-item>
           <el-collapse-item title="相序校验" name="4">
             <div class="div-log">
-                  <p v-for="(item, index) in step4InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}">
+              <p v-for="(item, index) in step4InitLog" :key="index"
+                :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
                 {{ item.log }} <br />
               </p>
             </div>
@@ -214,23 +213,19 @@ const ts = ref('');
 
 watch(activeIndex, function (newValue, oldValue) {
 
-  if(activeIndex.value === 1)
+  if (activeIndex.value === 1) {
-  {
     step1InitLog.value.length = 0;
     step1InitLog.value = step1Log.value;
   }
-  if(activeIndex.value === 2)
+  if (activeIndex.value === 2) {
-  {
     step2InitLog.value.length = 0;
     step2InitLog.value = step2Log.value;
   }
-  if(activeIndex.value === 3)
+  if (activeIndex.value === 3) {
-  {
     step3InitLog.value.length = 0;
     step3InitLog.value = step3Log.value;
   }
-  if(activeIndex.value > 3)
+  if (activeIndex.value > 3) {
-  {
     step4InitLog.value.length = 0;
     step4InitLog.value = step4Log.value;
   }
@@ -243,20 +238,17 @@ watch(activeIndex, function (newValue, oldValue) {
 //监听goods_sn的变化
 watch(testStatus, function (newValue, oldValue) {
   ts.value = props.testStatus;
-  if(ts.value==='start')
+  if (ts.value === 'start') {
-  {
     ts.value = 'process'
 
     let timer = setInterval(() => {
       if (activeIndex.value < activeTotalNum.value - 2)
         activeIndex.value++
-        else if(activeIndex.value === activeTotalNum.value -2)
+      else if (activeIndex.value === activeTotalNum.value - 2) {
-        {
         activeIndex.value++
         activeIndex.value++
       }
-        else 
+      else {
-        {
         clearInterval(timer)
         ts.value = 'success'
       }
@@ -274,17 +266,18 @@ watch(ts, function (newValue, oldValue) {
 
 </script>
 <style scoped lang="scss">
-
 .test-dialog {
   height: 350px;
   display: flex;
 
-    flex-direction: row; /* 横向排列 */
+  flex-direction: row;
+  /* 横向排列 */
   margin-top: 20px;
   /* .dialog-left{
         margin-right: 20px;
     } */
 }
+
 .dialog-left {
   width: 15%;
   margin-left: 20px;
@@ -309,12 +302,20 @@ watch(ts, function (newValue, oldValue) {
   width: 80%;
   height: 100%;
 }
+
 .dialog-right :deep(.el-collapse-item__header) {
   font-size: 16px;
 }
 
 .div-log {
-            height: 100px;
+  height: 145px;
+  overflow-y: auto;
   padding-left: 10px;
+
+  p {
+    margin: 5px 0;
+    font-size: 14px;
+  }
+
 }
 </style>

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

@@ -224,8 +224,9 @@ watch(ts, function (newValue, oldValue) {
     display: flex;
 
     flex-direction: row; /* 横向排列 */
-    margin-top: 20px;
+    /* margin-top: 20px; */
-    min-height: 300px;
+    /* min-height: 300px; */
+    height: 472px;
     /* .dialog-left{
         margin-right: 20px;
     } */

frontend/src/views/home/tabs/dashboard.vue

@@ -353,9 +353,9 @@ const resizeObserver = new ResizeObserver(entries => {
     chartsWidth.value = entry.contentRect.width;
     console.log('Charts Info Width:', chartsWidth.value);
 
-    pieRef1.value.reSize(chartsWidth.value * 0.95,145,true);
+    pieRef1.value.reSize(chartsWidth.value * 0.95,180,true);
-    pieRef2.value.reSize(chartsWidth.value * 0.95,145,true);
+    pieRef2.value.reSize(chartsWidth.value * 0.95,180,true);
-    pieRef3.value.reSize(chartsWidth.value * 0.95,145,true);
+    pieRef3.value.reSize(chartsWidth.value * 0.95,180,true);
   }
 });
 
@@ -631,4 +631,12 @@ onUnmounted(() => {
     }
   }
 }
+:deep(.el-collapse-item__conten){
+  // background-color:#f6f6f6;
+  padding-bottom: 0px !important;
+}
+:deep(.el-collapse-item__content ){
+  // background-color:#f6f6f6;
+  padding-bottom: 0px !important;
+}
 </style>