From 17404fcb367b1b98594307d572195854f1a8a60c Mon Sep 17 00:00:00 2001
From: JINGYJ <1458671527@qq.com>
Date: Wed, 12 Mar 2025 15:23:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/AppearanceMonitor.scss |  9 +++++---
 src/views/dashboard/DataOverview.scss      | 16 +++++++++++++
 src/views/dashboard/DataOverview.vue       | 27 +++++++++++++++++++---
 src/views/dashboard/PoleMonitor.scss       |  2 +-
 4 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/views/dashboard/AppearanceMonitor.scss b/src/views/dashboard/AppearanceMonitor.scss
index 0b7fa5a..dce587c 100644
--- a/src/views/dashboard/AppearanceMonitor.scss
+++ b/src/views/dashboard/AppearanceMonitor.scss
@@ -1,4 +1,6 @@
 .appearance-monitor-warp {
+    box-sizing: border-box;
+    padding-top: 32px;
     height: 100%;
     display: flex;
     justify-content: center;
@@ -25,14 +27,15 @@
       .monitor-left-top {
         box-sizing: border-box;
         padding: 32px 16px;
+        margin-bottom: 16px;
         min-height: 600px;
         background-image: url("@/assets/common/boderBg.png");
-        background-size: calc(100%);
+        background-size: 100% 100%;
         background-position: center;
         background-repeat: no-repeat;
         img {
           width: 100%;
-          height: 600px;
+          height: 590px;
         }
       }
       .monitor-left-bottom {
@@ -46,7 +49,7 @@
             border-radius:4px;
             img {
                 width: 100%;
-                height: 100%;
+                height: 144px;
                 border-radius:4px;
             }
           }
diff --git a/src/views/dashboard/DataOverview.scss b/src/views/dashboard/DataOverview.scss
index 4197c2c..2d00c68 100644
--- a/src/views/dashboard/DataOverview.scss
+++ b/src/views/dashboard/DataOverview.scss
@@ -19,6 +19,22 @@
       .module-header {
         color: #4a7ebf;
         margin-bottom: 15px;
+        .month-btn,
+        .week-btn {
+          width: 70px;
+          height: 28px;
+          font-size: 14px;
+          color: #FFF;
+          background: #0F2839;
+          border: none;
+        }
+        .week-btn {
+          margin-right: 20px;
+        }
+        .active-btn { 
+          background: #0B345E;
+          border: 1px solid #3FDDEB;
+        }
       }
       .chart-container {
         margin-top: 40px;
diff --git a/src/views/dashboard/DataOverview.vue b/src/views/dashboard/DataOverview.vue
index 0dbd312..378f0cd 100644
--- a/src/views/dashboard/DataOverview.vue
+++ b/src/views/dashboard/DataOverview.vue
@@ -9,7 +9,14 @@
               <div class="w-[200px] bg_title bg_title_0"></div>
             </template>
             <template #extra>
-              <div></div>
+              <div>
+                <el-button type="primary" class="month-btn" @click="activeBtn = '月'" :class="{ 'active-btn': activeBtn === '月' }">
+                   月
+                </el-button>
+                <el-button class="week-btn" @click="activeBtn = '周'" :class="{ 'active-btn': activeBtn === '周' }">
+                   周
+                </el-button>
+              </div>
             </template>
           </ContentHeader>
         </div>
@@ -70,7 +77,10 @@
                 <div class="w-[200px] bg_title bg_title_2"></div>
               </template>
               <template #extra>
-                <div></div>
+                  <el-select v-model="searchForm.name" placeholder="时间" class="custom-select">
+                    <el-option label="A" value="deviceA"></el-option>
+                    <el-option label="B" value="deviceB"></el-option>
+                </el-select>
               </template>
             </ContentHeader>
           </div>
@@ -101,7 +111,12 @@
               <template #title>
                 <div class="w-[200px] bg_title bg_title_3"></div>
               </template>
-              <template #extra> </template>
+              <template #extra>
+                <el-select v-model="searchForm.name" placeholder="时间" class="custom-select">
+                    <el-option label="A" value="deviceA"></el-option>
+                    <el-option label="B" value="deviceB"></el-option>
+                </el-select>
+              </template>
             </ContentHeader>
           </div>
           <div class="chart-container">
@@ -158,6 +173,12 @@ const deviceStatus = ref({
     errorCount: 10,
     outlineCount: 10
 });
+const searchForm = reactive({
+    name: "",
+    status: "",
+    faultType: "",
+});
+const activeBtn = ref("月");
 onMounted(() => {
 });
 </script>
diff --git a/src/views/dashboard/PoleMonitor.scss b/src/views/dashboard/PoleMonitor.scss
index e211228..3f86ef9 100644
--- a/src/views/dashboard/PoleMonitor.scss
+++ b/src/views/dashboard/PoleMonitor.scss
@@ -54,7 +54,7 @@
             border-radius: 4px;
             img {
               width: 100%;
-              height: 100%;
+              height: 144px;
               border-radius: 4px;
             }
           }