设备看板

.env.local

@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://192.168.0.74:48080'
+VITE_BASE_URL='http://192.168.0.66:48080'
 # VITE_BASE_URL='http://192.168.0.189:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务

src/views/board/device/index.vue

@@ -1,13 +1,77 @@
 <template>
   <ContentWrap>
     <div>
-      <div class="new-top-box">
+      <el-row :gutter="24">
-        <div class="new-top-box-left">
+        <el-col :span="2">
           <div class="new-top-box-left-title"> 设备看板 </div>
+        </el-col>
+        <el-col :span="16">
+          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first1" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first2" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first3" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first4" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first5" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+            <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
+          </el-tabs>
+        </el-col>
+        <el-col :span="6">
+          <!-- <div class="new-top-box-right">
+          <div class="new-top-box-right-input-box">
+            <input
+              type="text"
+              v-model="queryParams.robotNo"
+              placeholder="请输入关键字"
+              class="new-top-box-right-input"
+              placeholder-class="new-top-box-right-input-placeholder"
+            />
+            <Icon
+              icon="ep:search"
+              size="20px"
+              color="#A4AFCA"
+              style="cursor: pointer"
+              @click="getCarList"
+              class="new-top-box-right-input-icon"
+            />
+          </div>
+          <el-button>Default</el-button>
+          <div class="new-top-box-right-button" @click="openForm('create')"> 新增设备 </div>
+        </div> -->
+          <div style="display: flex">
+            <el-input
+              style="height: 40px"
+              v-model="queryParams.robotNo"
+              placeholder="Please Input"
+              :suffix-icon="Search"
+            />
 
-          <!-- <el-divider direction="vertical" /> -->
+            <el-button style="height: 40px">Default</el-button>
-          <div class="new-top-box-left-statistics-box">
+          </div>
+        </el-col>
+      </el-row>
+    </div>
 
+    <!-- <div class="new-top-box-left-statistics-box">
             <div class="new-top-box-left-statistics-box-inner" v-if="carStatistics">
               <div class="new-top-box-left-statistics"> 总数 {{ carStatistics.total || 0 }} </div>
               <div class="grey-line"> </div>
@@ -52,42 +116,7 @@
                 <div class="grey-line" style="margin-left: 8px"> </div>
               </div>
             </div>
-          
+          </div> -->
-          </div>
-        </div>
-        <div class="new-top-box-right">
-          <!-- <el-input
-          v-model="queryParams.robotNo"
-          style="width: 240px"
-          placeholder="请输入关键字"
-          clearable
-        >
-          <template #append>
-            <el-button><Icon icon="ep:search" @click="getCarList" /></el-button
-          ></template>
-        </el-input>
-        <el-button type="primary" @click="openForm('create')">新增车辆</el-button> -->
-          <div class="new-top-box-right-input-box">
-            <input
-              type="text"
-              v-model="queryParams.robotNo"
-              placeholder="请输入关键字"
-              class="new-top-box-right-input"
-              placeholder-class="new-top-box-right-input-placeholder"
-            />
-            <Icon
-              icon="ep:search"
-              size="20px"
-              color="#A4AFCA"
-              style="cursor: pointer"
-              @click="getCarList"
-              class="new-top-box-right-input-icon"
-            />
-          </div>
-          <div class="new-top-box-right-button" @click="openForm('create')"> 新增设备 </div>
-        </div>
-      </div>
-    </div>
   </ContentWrap>
   <div class="new-list-box-all">
     <div class="new-list-box">
@@ -157,7 +186,6 @@
     </div>
   </div>
   <createEditDialog ref="createEditDialogRef" @success="getCarList" />
- 
 </template>
 
 <script setup>
@@ -403,7 +431,17 @@ onBeforeRouteLeave((to, from, next) => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+:deep(.el-tabs__nav-wrap::after) {
+  position: static !important;
+}
+:deep(.el-tabs__header) {
+  margin: 0px;
+}
+:deep(.is-active) {
+  background-color: #1677ff;
+}
+
 .swiper-container {
   width: calc(100% - 60px);
   padding: 0 30px;
@@ -526,12 +564,18 @@ onBeforeRouteLeave((to, from, next) => {
   margin-right: 10px;
 }
 .new-top-box-left-title {
+  flex-shrink: 0;
+  width: 72px;
+  height: 40px;
+  line-height: 40px;
   font-family:
     PingFangSC,
     PingFang SC;
-  font-weight: 600;
+  font-weight: 500;
   font-size: 18px;
   color: #0d162a;
+  text-align: center;
+  font-style: normal;
 }
 .new-top-box-left-statistics {
   padding: 5px 7px;
@@ -584,7 +628,7 @@ onBeforeRouteLeave((to, from, next) => {
   height: 36px;
 }
 .new-top-box-right-input {
-  width: 225px;
+  /* width: 225px; */
   height: 15px;
   border: none;
   font-size: 13px;
@@ -611,7 +655,6 @@ input::-webkit-input-placeholder {
   cursor: pointer;
 }
 .new-top-box-left-statistics-box {
-
   flex: 1;
   margin-left: 10px;
   /* background: red; */