From da100a4fa7d67407ce70477fbaddc8d460a501c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E8=8F=9C?=
 <43331987+JiaLiBai@users.noreply.github.com>
Date: Mon, 16 Jun 2025 22:46:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=8D=95=E8=AF=8D=E6=8B=BC?=
 =?UTF-8?q?=E5=86=99=E9=94=99=E8=AF=AF=EF=BC=8C=E6=96=B0=E5=A2=9E=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/common.scss      |   8 +-
 src/router/index.js                |   2 +-
 src/views/ems/home/DlzbChart.vue   | 125 +++++++++++++++++++++++++++++
 src/views/ems/home/GjdjfbChart.vue | 122 ++++++++++++++++++++++++++++
 src/views/ems/home/GjqsChart.vue   | 106 ++++++++++++++++++++++++
 src/views/ems/home/SbgjzbChart.vue |  98 ++++++++++++++++++++++
 src/views/ems/home/XtxlChart.vue   | 105 ++++++++++++++++++++++++
 src/views/ems/home/index.vue       |  71 ++++++++++++++++
 src/views/ems/zddt/BarChart.vue    |   1 +
 src/views/ems/zddt/index.vue       |   5 +-
 10 files changed, 637 insertions(+), 6 deletions(-)
 create mode 100644 src/views/ems/home/DlzbChart.vue
 create mode 100644 src/views/ems/home/GjdjfbChart.vue
 create mode 100644 src/views/ems/home/GjqsChart.vue
 create mode 100644 src/views/ems/home/SbgjzbChart.vue
 create mode 100644 src/views/ems/home/XtxlChart.vue
 create mode 100644 src/views/ems/home/index.vue

diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss
index a34464c..2fd422e 100644
--- a/src/assets/styles/common.scss
+++ b/src/assets/styles/common.scss
@@ -3,14 +3,18 @@
 */
 
 //右侧内容区域
+//父元素
 .ems-dashboard-editor-container{
   background-color: #F1F5FC;
   padding: 24px;
   font-size: 12px;
 }
-.ems-content-conatiner{
+//除去顶部信息(如搜索栏、站点基本信息等)外的 白色背景内容区域
+.ems-content-container{
   background-color: #ffffff;
+  margin-top: 24px;
 }
-ems-content-conatiner-padding{
+//需要设置内padding的白色背景区域
+.ems-content-container-padding{
   padding: 24px;
 }
diff --git a/src/router/index.js b/src/router/index.js
index 1140df4..8ea2d50 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -69,7 +69,7 @@ export const constantRoutes = [
     children: [
       {
         path: 'index',
-        component: () => import('@/views/index'),
+        component: () => import('@/views/ems/home/index'),
         name: 'Index',
         meta: { title: '首页', icon: 'dashboard', affix: true }
       }
diff --git a/src/views/ems/home/DlzbChart.vue b/src/views/ems/home/DlzbChart.vue
new file mode 100644
index 0000000..92e34e5
--- /dev/null
+++ b/src/views/ems/home/DlzbChart.vue
@@ -0,0 +1,125 @@
+
+<template>
+  <el-card shadow="always" class="chart-card-container">
+    <div slot="header">
+      <span class="chart-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>
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/mixins/ems/resize'
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#dlzbChart'), 'macarons')
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        legend: {
+          left: 'center',
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        series: [
+        {
+          name:'充电量',
+          data: [80,92,1,34,90,130,320,80,9,91,34,90],
+          type: 'line',
+          itemStyle: {
+            color: '#F86F70',
+            opacity: 0.5
+          },
+          areaStyle: {
+            color: '#F86F70',
+            opacity: 0.5
+          }
+        },{
+            name:'放电量',
+            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
+            type: 'line',
+            itemStyle: {
+              color: '#488AFF',
+              opacity: 0.5
+            },
+            areaStyle: {
+              color: '#488AFF',
+              opacity: 0.5
+            }
+          }]
+      })
+    }
+  }
+}
+
+</script>
diff --git a/src/views/ems/home/GjdjfbChart.vue b/src/views/ems/home/GjdjfbChart.vue
new file mode 100644
index 0000000..3f41fcb
--- /dev/null
+++ b/src/views/ems/home/GjdjfbChart.vue
@@ -0,0 +1,122 @@
+
+<template>
+  <el-card shadow="always" class="chart-card-container">
+    <div slot="header">
+      <span class="chart-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>
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/mixins/ems/resize'
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#gjdjfbChart'), 'macarons')
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        color:['#3C81FF','#FFBE29'],
+        legend: {
+          left: 'center',
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          data: ['A级','B级','C级','D级','E级','F级'],
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        yAxis: [{
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        },{
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        }],
+        series: [
+        {
+          name:'数据一',
+          yAxisIndex:0,
+          data: [80,92,1,34,90,130,320],
+          type: 'line',
+        },
+        {
+          name:'数据二',
+          yAxisIndex:1,
+          data: [89,9,80,4,100,30,30],
+          type: 'bar',
+        }
+          ]
+      })
+    }
+  }
+}
+
+</script>
diff --git a/src/views/ems/home/GjqsChart.vue b/src/views/ems/home/GjqsChart.vue
new file mode 100644
index 0000000..8cc4bc7
--- /dev/null
+++ b/src/views/ems/home/GjqsChart.vue
@@ -0,0 +1,106 @@
+
+<template>
+  <el-card shadow="always" class="chart-card-container">
+    <div slot="header">
+      <span class="chart-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>
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/mixins/ems/resize'
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#gjqsChart'), 'macarons')
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        color:['#F86F70'],
+        legend: {
+          left: 'center',
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        series: [
+        {
+          name:'告警趋势',
+          data: [80,92,1,34,90,130,320,80,9,91,34,90],
+          type: 'line',
+          areaStyle: {}
+        }]
+      })
+    }
+  }
+}
+
+</script>
diff --git a/src/views/ems/home/SbgjzbChart.vue b/src/views/ems/home/SbgjzbChart.vue
new file mode 100644
index 0000000..3f76a8e
--- /dev/null
+++ b/src/views/ems/home/SbgjzbChart.vue
@@ -0,0 +1,98 @@
+
+<template>
+  <el-card shadow="always" class="chart-card-container">
+    <div slot="header">
+      <span class="chart-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>
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/mixins/ems/resize'
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#sbgjzbChart'), 'macarons')
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        color:['#FFBE29','#3C81FF','#A796FF','#FC6B69','#58F3AA'],
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          left: 'center',
+          bottom:'10'
+        },
+        series: [
+          {
+            name: '设备告警占比',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 1048, name: '数据一' },
+              { value: 735, name: '数据二' },
+              { value: 580, name: '数据三' },
+              { value: 484, name: '数据四' },
+              { value: 300, name: '数据五' }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      })
+    }
+  }
+}
+
+</script>
diff --git a/src/views/ems/home/XtxlChart.vue b/src/views/ems/home/XtxlChart.vue
new file mode 100644
index 0000000..a76cf27
--- /dev/null
+++ b/src/views/ems/home/XtxlChart.vue
@@ -0,0 +1,105 @@
+
+<template>
+  <el-card shadow="always" class="chart-card-container">
+    <div slot="header">
+      <span class="chart-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>
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/mixins/ems/resize'
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#xtxlChart'), 'macarons')
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        color:['#FFBE01'],
+        legend: {
+          left: 'center',
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        series: [
+        {
+          name:'系统效率',
+          data: [80,92,1,34,90,130,320,80,9,91,34,90],
+          type: 'line',
+        }]
+      })
+    }
+  }
+}
+
+</script>
diff --git a/src/views/ems/home/index.vue b/src/views/ems/home/index.vue
new file mode 100644
index 0000000..8035444
--- /dev/null
+++ b/src/views/ems/home/index.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="ems-dashboard-editor-container">
+     <zd-info></zd-info>
+      <div class="ems-content-container ems-content-container-padding">
+        <div class="content-title">数据概览</div>
+        <el-row :gutter="32" style="background:#fff;margin:30px 0;">
+          <el-col :xs="24" :sm="12" :lg="12">
+              <dlzb-chart/>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="12">
+              <xtxl-chart/>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="32" style="background:#fff;margin:0;">
+          <el-col :xs="24" :sm="8" :lg="8">
+              <gjqs-chart/>
+          </el-col>
+          <el-col :xs="24" :sm="8" :lg="8">
+              <sbgjzb-chart/>
+          </el-col>
+          <el-col :xs="24" :sm="8" :lg="8">
+              <gjdjfb-chart/>
+          </el-col>
+        </el-row>
+      </div>
+
+
+
+  </div>
+</template>
+
+<script>
+import ZdInfo from '@/components/Ems/ZdBaseInfo/index.vue'
+import DlzbChart from './DlzbChart.vue'
+import XtxlChart from './XtxlChart.vue'
+import GjqsChart from './GjqsChart.vue'
+import SbgjzbChart from './SbgjzbChart.vue'
+import GjdjfbChart from './GjdjfbChart.vue'
+export default {
+  name: 'Index',
+  components: {
+    ZdInfo,
+    DlzbChart,
+    XtxlChart,
+    GjqsChart,
+    SbgjzbChart,
+    GjdjfbChart
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ems-dashboard-editor-container {
+  position: relative;
+  .content-title{
+    line-height: 16px;
+    color: #333333;
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+}
+</style>
diff --git a/src/views/ems/zddt/BarChart.vue b/src/views/ems/zddt/BarChart.vue
index d24c6ec..9a8c0d1 100644
--- a/src/views/ems/zddt/BarChart.vue
+++ b/src/views/ems/zddt/BarChart.vue
@@ -39,6 +39,7 @@ export default {
         tooltip: {},
         xAxis: { type: 'category' },
         yAxis: { },
+        grid:{top:20},
         dataset:{
           source:[
             ['product','充电量','放电量'],
diff --git a/src/views/ems/zddt/index.vue b/src/views/ems/zddt/index.vue
index fd6629e..d16ec8e 100644
--- a/src/views/ems/zddt/index.vue
+++ b/src/views/ems/zddt/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ems-dashboard-editor-container">
     <zd-info></zd-info>
-    <div class="content ems-content-conatiner ">
+    <div class="ems-content-container ">
       <div class="map-container"></div>
       <div class="zd-msg-container">
         <div class="zd-msg-top">
@@ -81,11 +81,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.content{
+.ems-content-container{
   display: flex;
   padding:24px;
   padding-right: 0;
-  margin-top:24px;
   .map-container{
     background: black;
     flex:auto;