代码提交

src/layouts/components/Header/ToolBarLeft.vue

@@ -26,5 +26,6 @@ const globalStore = useGlobalStore();
   color: var(--el-header-text-color);
   font-size: 16px;
   margin-bottom: 5px;
+  font-weight: bold;
 }
 </style>

src/styles/common.scss

@@ -178,12 +178,14 @@
   }
 
   .container-item{
+    display: flex;
     cursor: pointer;
     width: 100%;
     color: #000000;
     font-size: 16px;
     padding: 15px;
     flex: 0 1 auto;
+    align-items: center;
   }
 
   .container__label {
@@ -193,4 +195,52 @@
     line-height: 32px;
     padding: 0 12px 0 0;
   }
+
+
+  .container-device-main{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    align-content:flex-start;
+    overflow-y: auto;
+  }
+
+
+  .container-device-item{
+    cursor: pointer;
+    width: 21%;
+    border: 1px solid #BFBFBF;
+    color: #000000;
+    font-size: 16px;
+    flex: 0 1 auto;
+    border-radius: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+  }
+
+  .device-img{
+    width: 110px;
+    height: 110px;
+    background-color: #1a1a37;
+    border-radius: 110px;
+  }
+
+  .container-text-box{
+    display: flex;
+    flex-direction: column;
+    align-content: space-between;
+  }
+
+  .container-title{
+    font-size: 18px;
+    font-weight: 700;
+    color: #000000;
+  }
+
+  .container-name{
+    font-size: 17px;
+    color: #999999;
+  }
 }

src/views/alarm/allData/index.vue

@@ -6,7 +6,7 @@
         <div class="header-button-lf">
           <el-form :model="queryParams" label-width="auto" :inline="true">
             <el-form-item label="自动站:">
-              <el-select v-model="queryParams.name" placeholder="请选择自动站" clearable style="width: 200px">
+              <el-select v-model="queryParams.name"  filterable placeholder="请选择自动站" clearable style="width: 200px">
                 <el-option label="站1" value="1" />
                 <el-option label="站2" value="2" />
               </el-select>

src/views/alarm/singleDevice/index.vue

@@ -3,26 +3,164 @@
     <div class="card container-box">
       <div>站台概况</div>
       <div class="container-main mt15">
-        <div class="container-item container__label">站号:
+        <div class="container-item container__label">站号：
           <el-select v-model="queryParams.name" placeholder="请选择自动站" clearable style="width: 150px">
           <el-option label="固定站1" value="1" />
           <el-option label="站2" value="2" />
         </el-select></div>
         <div class="container-item container__label">名称：固定站1</div>
-        <div class="container-item container__label">地图层级：</div>
         <div class="container-item container__label">通信模块状态：</div>
         <div class="container-item container__label">观测时间：2024-09-19 23:00</div>
-      </div>
-      <div class="container-main mt15">
-        <div class="container-item container__label">观测方式：自动</div>
-        <div class="container-item container__label">自动站状态：</div>
+        <div class="container-item container__label">自动站状态：<el-tag type="danger" size="default" hit>故障</el-tag></div>
         <div class="container-item container__label">站址：未命名29号</div>
-        <div class="container-item container__label"></div>
-        <div class="container-item container__label"></div>
       </div>
+<!--      <div class="container-main mt15">-->
+<!--        <div class="container-item container__label">自动站状态：<el-tag type="danger" size="default" hit>故障</el-tag></div>-->
+<!--        <div class="container-item container__label">站址：未命名29号</div>-->
+<!--        <div class="container-item container__label"></div>-->
+<!--        <div class="container-item container__label"></div>-->
+<!--      </div>-->
     </div>
     <div class="card table-main">
-
+      <div>站台状况</div>
+      <div class="container-device-main mt15">
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+        <div class="container-device-item">
+          <div class="container-text-box">
+            <div class="container-title">超声风传感器</div>
+            <div class="container-name mt15 mb15">传感器状态:</div>
+            <div class="container-name">证书剩余时间:536天</div>
+          </div>
+          <div class="device-img"></div>
+        </div>
+      </div>
     </div>
   </div>
 </template>

src/views/query/qualityAudits/index.vue

@@ -28,7 +28,7 @@
             </div>
           </template>
           <template #default="scope">
-            {{ (scope.$index + 1).toString().padStart(2, '0') }}
+            {{ (scope.$index).toString().padStart(2, '0') }}
           </template>
         </el-table-column>