修改样式问题

2024-12-05 11:07:54 +08:00
parent 7d5d128b54
commit 92df927453
5 changed files with 185 additions and 151 deletions
--- a/frontend/src/styles/element.scss
+++ b/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;}
+  }
--- a/frontend/src/views/home/components/channelsTest.vue
+++ b/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>
--- a/frontend/src/views/home/components/preTest.vue
+++ b/frontend/src/views/home/components/preTest.vue
@@ -1,131 +1,130 @@
 <template>
-    <div>
-        <el-tabs type="border-card">
-            <el-tab-pane label="预检测项目">
-                <div class="form-grid">
-                    <el-checkbox
-                            v-for="(item, index) in detectionOptions"
-                            v-model="item.selected"
-                            :key="index"
-                            :label="item.name"
+  <div>
+    <el-tabs type="border-card">
+      <el-tab-pane label="预检测项目">
+        <div class="form-grid">
+          <el-checkbox v-for="(item, index) in detectionOptions" v-model="item.selected" :key="index"
+            :label="item.name"></el-checkbox>
+          <!-- disabled="true" -->
+        </div>
+      </el-tab-pane>
+    </el-tabs>

-                            ></el-checkbox
-                        >
-                        <!-- disabled="true" -->
-                </div>
-            </el-tab-pane>
-        </el-tabs>
-
-<div class = "test-dialog">
-    <div class="dialog-left">
-    <el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus" finish-status="success">
-    <el-step title="源通讯校验" />
-    <el-step title="设备通讯校验" />
-    <el-step title="协议校验" />
-    <el-step title="相序校验" />
-    <el-step title="检测完成" />
-    </el-steps>
-    </div>
-    <div class="dialog-right">
+    <div class="test-dialog">
+      <div class="dialog-left">
+        <el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus"
+          finish-status="success">
+          <el-step title="源通讯校验" />
+          <el-step title="设备通讯校验" />
+          <el-step title="协议校验" />
+          <el-step title="相序校验" />
+          <el-step title="检测完成" />
+        </el-steps>
+      </div>
+      <div class="dialog-right">
        <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)'}">
-                    {{ 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)'}">
-                    {{ 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)'}">
-                    {{ 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)'}">
-                    {{ item.log }} <br />
-                  </p>
-                </div>
-            </el-collapse-item>
+          <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)' }">
+                {{ 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)' }">
+                {{ 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)' }">
+                {{ 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)' }">
+                {{ item.log }} <br />
+              </p>
+            </div>
+          </el-collapse-item>
        </el-collapse>
+      </div>
    </div>
-</div>
-    </div>
+  </div>

 </template>
 <script lang="tsx" setup name="preTest">
 const step1InitLog = ref([
  {
    type: 'info',
-    log:'暂无数据，等待检测开始',
+    log: '暂无数据，等待检测开始',
  },
 ])

 const step1Log = ref([
  {
    type: 'info',
-    log:'源通讯校验成功',
+    log: '源通讯校验成功',
  },
 ])

 const step2InitLog = ref([
  {
    type: 'info',
-    log:'暂无数据，等待检测开始',
+    log: '暂无数据，等待检测开始',
  },
 ])

 const step2Log = ref([
  {
    type: 'info',
-    log:'被检设备：240001通讯校验成功',
+    log: '被检设备：240001通讯校验成功',
  },
  {
    type: 'info',
-    log:'被检设备：240002通讯校验成功',
+    log: '被检设备：240002通讯校验成功',
  },
  {
    type: 'info',
-    log:'被检设备：240003通讯校验成功',
+    log: '被检设备：240003通讯校验成功',
  },
  {
    type: 'info',
-    log:'被检设备：240004通讯校验成功',
+    log: '被检设备：240004通讯校验成功',
  },
 ])

 const step3InitLog = ref([
  {
    type: 'info',
-    log:'暂无数据，等待检测开始',
+    log: '暂无数据，等待检测开始',
  },
 ])

 const step3Log = ref([
  {
    type: 'info',
-    log:'被检设备：240001协议校验成功',
+    log: '被检设备：240001协议校验成功',
  },
  {
    type: 'info',
-    log:'被检设备：240002协议校验成功',
+    log: '被检设备：240002协议校验成功',
  },
  {
    type: 'info',
-    log:'被检设备：240003协议校验成功',
+    log: '被检设备：240003协议校验成功',
  },
  {
    type: 'info',
-    log:'被检设备：240004协议校验成功',
+    log: '被检设备：240004协议校验成功',
  },
 ])

@@ -133,26 +132,26 @@ const step3Log = ref([
 const step4InitLog = ref([
  {
    type: 'info',
-    log:'暂无数据，等待检测开始',
+    log: '暂无数据，等待检测开始',
  },
 ])

 const step4Log = ref([
  {
    type: 'info',
-    log:'被检设备：240001相序校验成功',
+    log: '被检设备：240001相序校验成功',
  },
  {
    type: 'info',
-    log:'被检设备：240002相序校验成功',
+    log: '被检设备：240002相序校验成功',
  },
  {
    type: 'info',
-    log:'被检设备：240003相序校验成功',
+    log: '被检设备：240003相序校验成功',
  },
  {
    type: 'info',
-    log:'被检设备：240004相序校验成功',
+    log: '被检设备：240004相序校验成功',
  },
 ])

@@ -181,16 +180,16 @@ const detectionOptions = ref([
    name: "相序校验",//判断装置的接线是否正确
    selected: true,
  },
-//   {
-//     id: 4,
-//     name: "守时校验",//判断装置24小时内的守时误差是否小于1s
-//     selected: true,
-//   },
-//   {
-//     id: 5,
-//     name: "通道系数校准",//通过私有协议与装置进行通讯，校准三相电压电流的通道系数
-//     selected: true,
-//   },
+  //   {
+  //     id: 4,
+  //     name: "守时校验",//判断装置24小时内的守时误差是否小于1s
+  //     selected: true,
+  //   },
+  //   {
+  //     id: 5,
+  //     name: "通道系数校准",//通过私有协议与装置进行通讯，校准三相电压电流的通道系数
+  //     selected: true,
+  //   },
  // {
  //   id: 6,
  //   name: "实时数据比对",
@@ -203,8 +202,8 @@ const detectionOptions = ref([

 const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');

-  const props = defineProps({
-    testStatus: {
+const props = defineProps({
+  testStatus: {
    type: String,
    default: 'wait'
  }
@@ -214,54 +213,47 @@ 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;
  }
-    if(activeIndex.value < activeTotalNum.value - 2)
-        collapseActiveName.value = (newValue+1).toString()
-    else
-        collapseActiveName.value = (activeTotalNum.value - 1).toString()
+  if (activeIndex.value < activeTotalNum.value - 2)
+    collapseActiveName.value = (newValue + 1).toString()
+  else
+    collapseActiveName.value = (activeTotalNum.value - 1).toString()
 })

 //监听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)
-        {
-            activeIndex.value++
-            activeIndex.value++
-        }
-        else 
-        {
-            clearInterval(timer)
-            ts.value = 'success'
-        }
+      if (activeIndex.value < activeTotalNum.value - 2)
+        activeIndex.value++
+      else if (activeIndex.value === activeTotalNum.value - 2) {
+        activeIndex.value++
+        activeIndex.value++
+      }
+      else {
+        clearInterval(timer)
+        ts.value = 'success'
+      }

-  }, 1500);
+    }, 1500);
  }
 })

@@ -269,52 +261,61 @@ const emit = defineEmits(['update:testStatus']);
 //监听sn
 watch(ts, function (newValue, oldValue) {
  //修改父组件
-  emit('update:testStatus',ts.value)
+  emit('update:testStatus', ts.value)
 })

 </script>
-<style scoped  lang="scss">
+<style scoped lang="scss">
+.test-dialog {
+  height: 350px;
+  display: flex;

-.test-dialog{
-    height: 350px;
-    display: flex;
-
-    flex-direction: row; /* 横向排列 */
-    margin-top: 20px;
-    /* .dialog-left{
+  flex-direction: row;
+  /* 横向排列 */
+  margin-top: 20px;
+  /* .dialog-left{
        margin-right: 20px;
    } */
 }
-    .dialog-left{
-        width: 15%;
-        margin-left: 20px;
-    }

-     /* .dialog-left :deep(.test-head-steps){
+.dialog-left {
+  width: 15%;
+  margin-left: 20px;
+}
+
+/* .dialog-left :deep(.test-head-steps){
       height: 80px;
       /* margin-bottom: 10px;
   } 
   */

-   /* .dialog-left  :deep(.el-step__title)  {
+/* .dialog-left  :deep(.el-step__title)  {
   font-size: 18px !important; /* 设置标题字体大小
 } */

- /* .dialog-left  :deep(.el-step__icon-inner) {
+/* .dialog-left  :deep(.el-step__icon-inner) {
     font-size: 24px !important;
   } */

-    .dialog-right{
-        margin-left: 20px;
-        width: 80%;
-        height: 100%;
-    }
-    .dialog-right :deep(.el-collapse-item__header) {
-      font-size: 16px;
-    }
+.dialog-right {
+  margin-left: 20px;
+  width: 80%;
+  height: 100%;
+}

-    .div-log{
-            height: 100px;
-            padding-left: 10px;
-        }
+.dialog-right :deep(.el-collapse-item__header) {
+  font-size: 16px;
+}
+
+.div-log {
+  height: 145px;
+  overflow-y: auto;
+  padding-left: 10px;
+
+  p {
+    margin: 5px 0;
+    font-size: 14px;
+  }
+
+}
 </style>
--- a/frontend/src/views/home/components/timeTest.vue
+++ b/frontend/src/views/home/components/timeTest.vue
@@ -224,8 +224,9 @@ watch(ts, function (newValue, oldValue) {
    display: flex;

    flex-direction: row; /* 横向排列 */
-    margin-top: 20px;
-    min-height: 300px;
+    /* margin-top: 20px; */
+    /* min-height: 300px; */
+    height: 472px;
    /* .dialog-left{
        margin-right: 20px;
    } */
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/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);
-    pieRef2.value.reSize(chartsWidth.value * 0.95,145,true);
-    pieRef3.value.reSize(chartsWidth.value * 0.95,145,true);
+    pieRef1.value.reSize(chartsWidth.value * 0.95,180,true);
+    pieRef2.value.reSize(chartsWidth.value * 0.95,180,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>