代码提交

src/styles/common.scss

@@ -125,7 +125,7 @@
     display: flex;
     flex-flow:row wrap;
     align-items: flex-start;
-    padding: 20px;
+    padding: 0 20px 20px 20px;
     text-align: left;
     gap: 20px;
   }
@@ -137,7 +137,7 @@
     color: #000000;
     font-size: 16px;
     text-align: center;
-    padding: 15px;
+    padding: 10px 15px;
     flex: 0 1 auto;
   }
 
@@ -149,7 +149,7 @@
     color: var(--el-color-primary);
     font-size: 16px;
     text-align: center;
-    padding: 15px;
+    padding: 10px 15px;
     flex: 0 1 auto;
     position: relative;
   }
@@ -264,4 +264,74 @@
     display: flex;
     flex-direction: column
   }
+
+  .selected-list-box{
+    display: flex;
+    flex-direction: column;
+    width: 200px;
+    height: 100%;
+    padding-left: 20px;
+    border-left: var(--el-border-color-light) solid 2px
+  }
+
+  .button-container {
+    margin-top: 15px;
+    position: relative;
+    width: 100%;
+    height: 80px;
+  }
+
+  .top-left {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .top-right {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .bottom-left {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    margin-left: 0px!important;
+  }
+
+  .bottom-right {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+
+  .selected-list-c{
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px
+  }
+
+  .selected-item-tag {
+    cursor: pointer;
+    border-radius: 8px;
+    color: #000000;
+    font-size: 16px;
+    text-align: center;
+    padding: 10px 15px;
+    flex: 0 1 auto;
+  }
+
+  .selected-item-tag-active {
+    cursor: pointer;
+    background-color: var(--el-color-primary-light-9);
+    border-radius: 8px;
+    color: var(--el-color-primary);
+    font-size: 16px;
+    text-align: center;
+    padding: 10px 15px;
+    flex: 0 1 auto;
+    position: relative;
+  }
 }

src/styles/element.scss

@@ -27,7 +27,7 @@
   overflow-x: hidden;
   background-color: var(--el-bg-color);
   border: 1px solid var(--el-border-color-light);
-  border-radius: 6px;
+  border-radius: 10px;
   box-shadow: 0 0 12px rgb(0 0 0 / 5%);
 }
 

src/views/query/deviceHealth/index.vue

@@ -91,16 +91,33 @@
       <Pagination :pageable="pageable" :page-sizes="[24,60]" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
     </div>
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="940px" append-to-body>
-      <div style="height: 500px">
-        <div class="container-tag">
-          <div class="item-tag">观测时间</div>
-          <div class="item-tag-active">早报</div>
-          <div class="item-tag">缺报</div>
-          <div class="item-tag">迟报</div>
-          <div class="item-tag">非实时修改数据</div>
-          <div class="item-tag-active">设备故障</div>
-          <div class="item-tag">其他</div>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="1200px" append-to-body>
+      <div style="height: 500px;display: flex">
+        <el-tabs tab-position="left" class="demo-tabs" style="height: 100%;flex-grow: 1">
+          <el-tab-pane label="组件">
+            <div class="container-tag">
+              <div class="item-tag">预处理</div>
+              <div class="item-tag-active">通信模块</div>
+              <div class="item-tag-active">通信模块</div>
+              <div class="item-tag-active">通信模块</div>
+              <div class="item-tag-active">通信模块</div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="自动">自动</el-tab-pane>
+          <el-tab-pane label="人工">人工</el-tab-pane>
+        </el-tabs>
+        <div class="selected-list-box">
+          <div class="disposition-title" style="margin-top: 0px">已选设备</div>
+          <div class="selected-list-c">
+            <div class="selected-item-tag-active">通信模块</div>
+            <div class="selected-item-tag">通信模块</div>
+          </div>
+          <div class="button-container">
+            <el-button type="primary" plain class="top-left">上移</el-button>
+            <el-button type="primary" plain class="top-right">下移</el-button>
+            <el-button type="primary" plain class="bottom-left">移除</el-button>
+            <el-button type="primary" plain class="bottom-right">清空</el-button>
+          </div>
         </div>
       </div>
       <template #footer>

src/views/query/qualityAudits/index.vue

@@ -136,7 +136,7 @@ function generateColumns(month: number): ColumnProps[] {
     text-align: right;
     padding-right: 0px;
     box-sizing: border-box;
-    line-height: 9px;
+    line-height: 11px;
     font-size: 11px;
   }