From 9174e8b6aaf2e9dd0344528c0036f5f65e79d458 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E8=8F=9C?=
 <43331987+JiaLiBai@users.noreply.github.com>
Date: Tue, 17 Jun 2025 00:46:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E5=8F=96=E5=85=AC=E5=85=B1=E7=9A=84ca?=
 =?UTF-8?q?rd=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/common.scss           | 22 ++++++++++++++++++++
 src/components/Ems/ZdBaseInfo/index.vue |  5 +----
 src/views/ems/home/DlzbChart.vue        | 27 +++----------------------
 src/views/ems/home/GjdjfbChart.vue      | 27 +++----------------------
 src/views/ems/home/GjqsChart.vue        | 27 +++----------------------
 src/views/ems/home/SbgjzbChart.vue      | 27 +++----------------------
 src/views/ems/home/XtxlChart.vue        | 27 +++----------------------
 src/views/ems/zddt/index.vue            | 11 ++--------
 8 files changed, 40 insertions(+), 133 deletions(-)

diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss
index 2fd422e..83115c0 100644
--- a/src/assets/styles/common.scss
+++ b/src/assets/styles/common.scss
@@ -18,3 +18,25 @@
 .ems-content-container-padding{
   padding: 24px;
 }
+
+//card通用样式 标题、body
+.common-card-container{
+    .el-card__header{
+      padding:14px;
+      border-bottom: none;
+      font-size: 12px;
+      background: #F1F5FB ;
+      .card-title{
+        font-weight: 500;
+        color:#333333;
+      }
+      .el-button--text{
+        color: #666666;
+      }
+    }
+}
+.common-card-container-body-no-padding{
+   .el-card__body{
+      padding:0;
+    }
+}
diff --git a/src/components/Ems/ZdBaseInfo/index.vue b/src/components/Ems/ZdBaseInfo/index.vue
index ddb629d..0ae6399 100644
--- a/src/components/Ems/ZdBaseInfo/index.vue
+++ b/src/components/Ems/ZdBaseInfo/index.vue
@@ -2,7 +2,7 @@
 <!--首页、地图站点页面顶部信息方块-->
 <template>
   <el-row type="flex" >
-    <el-card shadow="hover" class="card" v-for="(item,index) in data" :key="index+'zdInfo'" :style="{borderBottomColor:item.color}">
+    <el-card shadow="hover" class="card common-card-container-body-no-padding" v-for="(item,index) in data" :key="index+'zdInfo'" :style="{borderBottomColor:item.color}">
       <div class="info">{{ item.title }}</div>
       <div class="num">{{item.num}}</div>
     </el-card>
@@ -46,9 +46,6 @@ export default {
   margin-right: 27px;
   border-bottom: 4px solid transparent;
   text-align: center;
-  ::v-deep .el-card__body{
-    padding:0;
-  }
   .info{
     color: #666666;
     line-height: 14px;
diff --git a/src/views/ems/home/DlzbChart.vue b/src/views/ems/home/DlzbChart.vue
index 92e34e5..853c90a 100644
--- a/src/views/ems/home/DlzbChart.vue
+++ b/src/views/ems/home/DlzbChart.vue
@@ -1,36 +1,15 @@
 
 <template>
-  <el-card shadow="always" class="chart-card-container">
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
     <div slot="header">
-      <span class="chart-title">电量指标</span>
+      <span class="card-title">电量指标</span>
       <el-button style="float: right; padding: 3px 0" type="text" size="small">按年</el-button>
     </div>
     <div style="height: 360px" id="dlzbChart"/>
   </el-card>
 </template>
 
-<style scoped lang="scss">
-.chart-card-container{
-  ::v-deep {
-    .el-card__header{
-      padding:14px;
-      border-bottom: none;
-      font-size: 12px;
-      background: #F1F5FB ;
-      .chart-title{
-        font-weight: 500;
-        color:#333333;
-      }
-      .el-button--text{
-        color: #666666;
-      }
-    }
-    .el-card__body{
-      padding:0;
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
diff --git a/src/views/ems/home/GjdjfbChart.vue b/src/views/ems/home/GjdjfbChart.vue
index 3f41fcb..45a6988 100644
--- a/src/views/ems/home/GjdjfbChart.vue
+++ b/src/views/ems/home/GjdjfbChart.vue
@@ -1,35 +1,14 @@
 
 <template>
-  <el-card shadow="always" class="chart-card-container">
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
     <div slot="header">
-      <span class="chart-title">告警等级分布</span>
+      <span class="card-title">告警等级分布</span>
     </div>
     <div style="height: 360px" id="gjdjfbChart"/>
   </el-card>
 </template>
 
-<style scoped lang="scss">
-.chart-card-container{
-  ::v-deep {
-    .el-card__header{
-      padding:14px;
-      border-bottom: none;
-      font-size: 12px;
-      background: #F1F5FB ;
-      .chart-title{
-        font-weight: 500;
-        color:#333333;
-      }
-      .el-button--text{
-        color: #666666;
-      }
-    }
-    .el-card__body{
-      padding:0;
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
diff --git a/src/views/ems/home/GjqsChart.vue b/src/views/ems/home/GjqsChart.vue
index 8cc4bc7..d3bd030 100644
--- a/src/views/ems/home/GjqsChart.vue
+++ b/src/views/ems/home/GjqsChart.vue
@@ -1,35 +1,14 @@
 
 <template>
-  <el-card shadow="always" class="chart-card-container">
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
     <div slot="header">
-      <span class="chart-title">告警趋势</span>
+      <span class="card-title">告警趋势</span>
     </div>
     <div style="height: 360px" id="gjqsChart"/>
   </el-card>
 </template>
 
-<style scoped lang="scss">
-.chart-card-container{
-  ::v-deep {
-    .el-card__header{
-      padding:14px;
-      border-bottom: none;
-      font-size: 12px;
-      background: #F1F5FB ;
-      .chart-title{
-        font-weight: 500;
-        color:#333333;
-      }
-      .el-button--text{
-        color: #666666;
-      }
-    }
-    .el-card__body{
-      padding:0;
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
diff --git a/src/views/ems/home/SbgjzbChart.vue b/src/views/ems/home/SbgjzbChart.vue
index 3f76a8e..d2d4605 100644
--- a/src/views/ems/home/SbgjzbChart.vue
+++ b/src/views/ems/home/SbgjzbChart.vue
@@ -1,35 +1,14 @@
 
 <template>
-  <el-card shadow="always" class="chart-card-container">
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
     <div slot="header">
-      <span class="chart-title">设备告警占比</span>
+      <span class="card-title">设备告警占比</span>
     </div>
     <div style="height: 360px" id="sbgjzbChart"/>
   </el-card>
 </template>
 
-<style scoped lang="scss">
-.chart-card-container{
-  ::v-deep {
-    .el-card__header{
-      padding:14px;
-      border-bottom: none;
-      font-size: 12px;
-      background: #F1F5FB ;
-      .chart-title{
-        font-weight: 500;
-        color:#333333;
-      }
-      .el-button--text{
-        color: #666666;
-      }
-    }
-    .el-card__body{
-      padding:0;
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
diff --git a/src/views/ems/home/XtxlChart.vue b/src/views/ems/home/XtxlChart.vue
index a76cf27..c6f8461 100644
--- a/src/views/ems/home/XtxlChart.vue
+++ b/src/views/ems/home/XtxlChart.vue
@@ -1,35 +1,14 @@
 
 <template>
-  <el-card shadow="always" class="chart-card-container">
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
     <div slot="header">
-      <span class="chart-title">系统效率</span>
+      <span class="card-title">系统效率</span>
     </div>
     <div style="height: 360px" id="xtxlChart"/>
   </el-card>
 </template>
 
-<style scoped lang="scss">
-.chart-card-container{
-  ::v-deep {
-    .el-card__header{
-      padding:14px;
-      border-bottom: none;
-      font-size: 12px;
-      background: #F1F5FB ;
-      .chart-title{
-        font-weight: 500;
-        color:#333333;
-      }
-      .el-button--text{
-        color: #666666;
-      }
-    }
-    .el-card__body{
-      padding:0;
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
diff --git a/src/views/ems/zddt/index.vue b/src/views/ems/zddt/index.vue
index d16ec8e..140b134 100644
--- a/src/views/ems/zddt/index.vue
+++ b/src/views/ems/zddt/index.vue
@@ -6,9 +6,9 @@
       <div class="zd-msg-container">
         <div class="zd-msg-top">
           <zd-select></zd-select>
-          <el-card class="single-zd-detail-container">
+          <el-card class="common-card-container">
             <div slot="header">
-              <span class="header-title">基本信息</span>
+              <span class="card-title">基本信息</span>
               <el-button style="float: right; padding: 3px 0" type="text" size="small">查看详情</el-button>
             </div>
             <div class="single-zd-name">上海电动工具所站</div>
@@ -92,13 +92,6 @@ export default {
   .zd-msg-container{
     width: 500px;
     padding: 24px;
-    ::v-deep .el-card__header{
-      background: #F1F5FB;
-      border-bottom: none;
-      .header-title{
-        font-weight: 500;
-      }
-    }
     .single-zd-name{
       font-weight: 500;
       line-height: 23px;