From 66150c708d3798e139979839282a389a6c3e0c0a Mon Sep 17 00:00:00 2001
From: yyy <2605810609@qq.com>
Date: Tue, 11 Feb 2025 17:51:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.local                       |   2 +-
 src/views/board/device/index.vue | 207 +++++++++++++++++++------------
 2 files changed, 126 insertions(+), 83 deletions(-)

diff --git a/.env.local b/.env.local
index a3752946..f0650411 100644
--- a/.env.local
+++ b/.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 服务
diff --git a/src/views/board/device/index.vue b/src/views/board/device/index.vue
index f83a44fc..21a12ba6 100644
--- a/src/views/board/device/index.vue
+++ b/src/views/board/device/index.vue
@@ -1,72 +1,42 @@
 <template>
   <ContentWrap>
     <div>
-      <div class="new-top-box">
-        <div class="new-top-box-left">
+      <el-row :gutter="24">
+        <el-col :span="2">
           <div class="new-top-box-left-title"> 设备看板 </div>
-
-          <!-- <el-divider direction="vertical" /> -->
-          <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>
-            <div class="new-top-box-left-item">
-              <div class="new-top-box-left-item-name">充电桩</div>
-              <div class="new-top-box-left-item-value">{{ carStatistics.inTask || 0 }}</div>
-              <div class="grey-line" style="margin-left: 8px"> </div>
-            </div>
-            <div class="new-top-box-left-item">
-              <div class="new-top-box-left-item-name">输送线</div>
-              <div class="new-top-box-left-item-value">{{ carStatistics.charge || 0 }}</div>
-              <div class="grey-line" style="margin-left: 8px"> </div>
-            </div>
-            <div class="new-top-box-left-item">
-              <div class="new-top-box-left-item-name">码垛机</div>
-              <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
-              <div class="grey-line" style="margin-left: 8px"> </div>
-            </div>
-            <div class="new-top-box-left-item">
-              <div class="new-top-box-left-item-name">自动门</div>
-              <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
-              <div class="grey-line" style="margin-left: 8px"> </div>
-            </div>
-            <div class="new-top-box-left-item">
-              <div class="new-top-box-left-item-name">提升机</div>
-              <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
-              <div class="grey-line" style="margin-left: 8px"> </div>
-            </div>
-            <div class="new-top-box-left-item">
-              <div class="new-top-box-left-item-name">信号灯</div>
-              <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
-              <div class="grey-line" style="margin-left: 8px"> </div>
-            </div>
-            <div class="new-top-box-left-item">
-              <div class="new-top-box-left-item-name">按钮盒</div>
-              <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
-              <div class="grey-line" style="margin-left: 8px"> </div>
-            </div>
-            <div class="new-top-box-left-item">
-              <div class="new-top-box-left-item-name">拆垛机</div>
-              <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
-              <div class="grey-line" style="margin-left: 8px"> </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> -->
+        </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"
@@ -84,10 +54,69 @@
               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>
+        </div> -->
+          <div style="display: flex">
+            <el-input
+              style="height: 40px"
+              v-model="queryParams.robotNo"
+              placeholder="Please Input"
+              :suffix-icon="Search"
+            />
+
+            <el-button style="height: 40px">Default</el-button>
+          </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>
+              <div class="new-top-box-left-item">
+                <div class="new-top-box-left-item-name">充电桩</div>
+                <div class="new-top-box-left-item-value">{{ carStatistics.inTask || 0 }}</div>
+                <div class="grey-line" style="margin-left: 8px"> </div>
+              </div>
+              <div class="new-top-box-left-item">
+                <div class="new-top-box-left-item-name">输送线</div>
+                <div class="new-top-box-left-item-value">{{ carStatistics.charge || 0 }}</div>
+                <div class="grey-line" style="margin-left: 8px"> </div>
+              </div>
+              <div class="new-top-box-left-item">
+                <div class="new-top-box-left-item-name">码垛机</div>
+                <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
+                <div class="grey-line" style="margin-left: 8px"> </div>
+              </div>
+              <div class="new-top-box-left-item">
+                <div class="new-top-box-left-item-name">自动门</div>
+                <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
+                <div class="grey-line" style="margin-left: 8px"> </div>
+              </div>
+              <div class="new-top-box-left-item">
+                <div class="new-top-box-left-item-name">提升机</div>
+                <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
+                <div class="grey-line" style="margin-left: 8px"> </div>
+              </div>
+              <div class="new-top-box-left-item">
+                <div class="new-top-box-left-item-name">信号灯</div>
+                <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
+                <div class="grey-line" style="margin-left: 8px"> </div>
+              </div>
+              <div class="new-top-box-left-item">
+                <div class="new-top-box-left-item-name">按钮盒</div>
+                <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
+                <div class="grey-line" style="margin-left: 8px"> </div>
+              </div>
+              <div class="new-top-box-left-item">
+                <div class="new-top-box-left-item-name">拆垛机</div>
+                <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
+                <div class="grey-line" style="margin-left: 8px"> </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>
@@ -230,32 +258,32 @@ const topList = ref([
   {
     name: '总数',
     count: 0,
-    id:-1
+    id: -1
   },
   {
     name: '充电桩',
     count: 0,
-    id:1
+    id: 1
   },
   {
     name: '输送线',
     count: 0,
-    id:2
-  },  
+    id: 2
+  },
   {
     name: '码垛机',
     count: 0,
-    id:3
+    id: 3
   },
   {
     name: '自动门',
     count: 0,
-    id:4
+    id: 4
   },
   {
     name: '提升机',
-    count: 0    
-    },
+    count: 0
+  },
   {
     name: '信号灯',
     count: 0
@@ -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;
@@ -610,13 +654,12 @@ input::-webkit-input-placeholder {
   color: #536387;
   cursor: pointer;
 }
-.new-top-box-left-statistics-box{
-
+.new-top-box-left-statistics-box {
   flex: 1;
   margin-left: 10px;
   /* background: red; */
 }
-.new-top-box-left-statistics-box-inner{
+.new-top-box-left-statistics-box-inner {
   display: flex;
   align-items: center;
   flex-shrink: 0;