From b2fdb2d6b873f050177c49c6c8c34bdefc316246 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 15:54:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=AB=99=E7=82=B9=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2=EF=BC=8C=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E6=96=B0=E5=A2=9Eems=20router=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E3=80=81components=E6=96=87=E4=BB=B6=E3=80=81mixin=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E3=80=81scss=E6=96=87=E4=BB=B6=E5=92=8Cview=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/common.scss                |  16 +++
 src/assets/styles/index.scss                 |   1 +
 src/components/Ems/SingleSquareBox/index.vue |  35 ++++++
 src/components/Ems/ZdBaseInfo/index.vue      |  66 ++++++++++
 src/components/Ems/ZdSelect/index.vue        |  41 +++++++
 src/mixins/ems/resize.js                     |  56 +++++++++
 src/router/ems.js                            |  19 +++
 src/router/index.js                          |   5 +-
 src/views/ems/zddt/BarChart.vue              |  76 ++++++++++++
 src/views/ems/zddt/index.vue                 | 122 +++++++++++++++++++
 10 files changed, 436 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/styles/common.scss
 create mode 100644 src/components/Ems/SingleSquareBox/index.vue
 create mode 100644 src/components/Ems/ZdBaseInfo/index.vue
 create mode 100644 src/components/Ems/ZdSelect/index.vue
 create mode 100644 src/mixins/ems/resize.js
 create mode 100644 src/router/ems.js
 create mode 100644 src/views/ems/zddt/BarChart.vue
 create mode 100644 src/views/ems/zddt/index.vue

diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss
new file mode 100644
index 0000000..a34464c
--- /dev/null
+++ b/src/assets/styles/common.scss
@@ -0,0 +1,16 @@
+/*
+  ems管理平台公共css样式
+*/
+
+//右侧内容区域
+.ems-dashboard-editor-container{
+  background-color: #F1F5FC;
+  padding: 24px;
+  font-size: 12px;
+}
+.ems-content-conatiner{
+  background-color: #ffffff;
+}
+ems-content-conatiner-padding{
+  padding: 24px;
+}
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index bb87292..591b17e 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -4,6 +4,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
+@import './common.scss';
 
 body {
   height: 100%;
diff --git a/src/components/Ems/SingleSquareBox/index.vue b/src/components/Ems/SingleSquareBox/index.vue
new file mode 100644
index 0000000..e1fba72
--- /dev/null
+++ b/src/components/Ems/SingleSquareBox/index.vue
@@ -0,0 +1,35 @@
+<!--单独的背景颜色渐变、宽高100%的内容展示方块组件-->
+<template>
+  <el-card shadow="always" class="single-square-box" :style="{background: 'linear-gradient(180deg, '+data.bgColor+' 0%,rgba(255,255,255,0) 100%)'}">
+    <div class="single-square-box-title">{{ data.title }}</div>
+    <div class="single-square-box-value">{{ data.value }}</div>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+  .single-square-box{
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    color:#666666;
+    text-align: left;
+    .single-square-box-title{
+      font-size: 12px;
+      line-height: 12px;
+      padding-bottom: 12px;
+    }
+    .single-square-box-value{
+      font-size: 26px;
+      line-height: 26px;
+      font-weight: 500;
+    }
+    ::v-deep .el-card__body{
+      padding: 12px 16px;
+    }
+  }
+</style>
+<script>
+  export default {
+    props: ['data'],
+  }
+</script>
diff --git a/src/components/Ems/ZdBaseInfo/index.vue b/src/components/Ems/ZdBaseInfo/index.vue
new file mode 100644
index 0000000..ddb629d
--- /dev/null
+++ b/src/components/Ems/ZdBaseInfo/index.vue
@@ -0,0 +1,66 @@
+
+<!--首页、地图站点页面顶部信息方块-->
+<template>
+  <el-row type="flex" >
+    <el-card shadow="hover" class="card" 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>
+  </el-row>
+</template>
+
+<script>
+//todo 动态获取数据
+export default {
+  data() {
+    return {
+      data:[{
+        title:'站点总数（座）',
+        num:6,
+        color:'#FFBD00'
+      },{
+        title:'装机功率（MW）',
+        num:6,
+        color:'#3C81FF'
+      },{
+        title:'装机容量（MW）',
+        num:6,
+        color:'#5AC7C0'
+      },{
+        title:'总充电量（MWh）',
+        num:6,
+        color:'#A696FF'
+      },{
+        title:'总放电量（MWh）',
+        num:6,
+        color:'#A696FF'
+      }]
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.card{
+  width: 150px;
+  height: 96px;
+  margin-right: 27px;
+  border-bottom: 4px solid transparent;
+  text-align: center;
+  ::v-deep .el-card__body{
+    padding:0;
+  }
+  .info{
+    color: #666666;
+    line-height: 14px;
+    padding-top: 18px;
+  }
+  .num{
+    color: rgba(51,51,51,1);
+    font-size: 26px;
+    line-height: 26px;
+    font-weight: 500;
+    margin-top: 14px;
+  }
+}
+
+</style>
diff --git a/src/components/Ems/ZdSelect/index.vue b/src/components/Ems/ZdSelect/index.vue
new file mode 100644
index 0000000..dbf00c7
--- /dev/null
+++ b/src/components/Ems/ZdSelect/index.vue
@@ -0,0 +1,41 @@
+<!--站点选择组件-->
+<template>
+  <div class="zd-select-container">
+    <el-form :inline="true">
+      <el-form-item label="站点选择">
+        <el-select v-model="id" placeholder="请选择换电站名称" :loading="loading" @change="change">
+          <el-option label="站点1" value="1"></el-option>
+          <el-option label="站点2" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">搜索</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+<script>
+//todo 动态获取电站列表 默认值，是否有设置默认值的功能
+  export default {
+    data() {
+      return {
+        id:'',
+        loading:false
+      }
+    },
+    methods:{
+      onSubmit(){
+        console.log(this.id)
+        this.$emit('submit',this.id)
+      },
+      change(id){
+        console.log('发生变更',id)
+        this.$emit('change',id)
+      }
+    }
+  }
+</script>
diff --git a/src/mixins/ems/resize.js b/src/mixins/ems/resize.js
new file mode 100644
index 0000000..b1e76e9
--- /dev/null
+++ b/src/mixins/ems/resize.js
@@ -0,0 +1,56 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
+    }
+  }
+}
diff --git a/src/router/ems.js b/src/router/ems.js
new file mode 100644
index 0000000..f31e794
--- /dev/null
+++ b/src/router/ems.js
@@ -0,0 +1,19 @@
+import Layout from "@/layout/index.vue";
+
+const ems = [
+  {
+    path: '/zddt',
+    component: Layout,
+    redirect: 'zddt',
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/ems/zddt/index'),
+        name: 'zddt',
+        meta: { title: '站点地图', icon: 'guide' }
+      }
+    ]
+  }
+]
+
+export default ems
diff --git a/src/router/index.js b/src/router/index.js
index bbfd237..1140df4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import ems from './ems'//EMS管理系统routers引用
 
 Vue.use(Router)
 
@@ -87,7 +88,9 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
-  }
+  },
+  // EMS管理系统routers
+  ...ems
 ]
 
 // 动态路由，基于用户权限动态去加载
diff --git a/src/views/ems/zddt/BarChart.vue b/src/views/ems/zddt/BarChart.vue
new file mode 100644
index 0000000..d24c6ec
--- /dev/null
+++ b/src/views/ems/zddt/BarChart.vue
@@ -0,0 +1,76 @@
+<!--站点地图页面柱状图组件-->
+<template>
+  <div class="bar-chart-container"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/mixins/ems/resize'
+// todo
+// 数据获取、数据格式处理、日期在前端处理还是后端返回
+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(this.$el, 'macarons')
+      this.chart.setOption({
+        legend: {
+          left: 'right',
+          bottom: '10',
+        },
+        tooltip: {},
+        xAxis: { type: 'category' },
+        yAxis: { },
+        dataset:{
+          source:[
+            ['product','充电量','放电量'],
+            ['第一天',10,20],
+            ['第二天',20,30],
+            ['第三天',20,30],
+            ['第四天',20,10],
+            ['第五天',200,80],
+            ['第六天',210,300],
+            ['第七天',200,30],
+          ]
+        },
+        series: [
+          {
+            type: 'bar',//柱状图
+            color:'#A796FF',//柱的颜色
+          },
+          {
+            type: 'bar',//柱状图
+            color:'#FFBE01',//柱的颜色
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.bar-chart-container{
+  width:100%;
+  height: 260px;
+}
+</style>
diff --git a/src/views/ems/zddt/index.vue b/src/views/ems/zddt/index.vue
new file mode 100644
index 0000000..fd6629e
--- /dev/null
+++ b/src/views/ems/zddt/index.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="ems-dashboard-editor-container">
+    <zd-info></zd-info>
+    <div class="content ems-content-conatiner ">
+      <div class="map-container"></div>
+      <div class="zd-msg-container">
+        <div class="zd-msg-top">
+          <zd-select></zd-select>
+          <el-card class="single-zd-detail-container">
+            <div slot="header">
+              <span class="header-title">基本信息</span>
+              <el-button style="float: right; padding: 3px 0" type="text" size="small">查看详情</el-button>
+            </div>
+            <div class="single-zd-name">上海电动工具所站</div>
+<!--      四个方块-->
+            <el-row :gutter="14">
+              <el-col :span="12"  class="single-square-box-container" v-for="(item,index) in singleZdSqaure" :key="index+'singleSquareBox'">
+                <single-square-box :data="item"></single-square-box>
+              </el-col>
+            </el-row>
+ <!--     基本信息     -->
+            <el-descriptions class="single-zd-info-container" :column="1" >
+              <el-descriptions-item  v-for="(item,index) in singleZdInfo" :key="index+'singleZdInfo'" :label="item.title">{{item.value}}</el-descriptions-item>
+            </el-descriptions>
+<!--      echarts柱状图-->
+          <bar-chart></bar-chart>
+
+          </el-card>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ZdInfo from '@/components/Ems/ZdBaseInfo/index.vue'
+import ZdSelect from '@/components/Ems/ZdSelect/index.vue'
+import SingleSquareBox from '@/components/Ems/SingleSquareBox/index.vue'
+import BarChart from './BarChart.vue'
+export default {
+  components:{ZdSelect,ZdInfo,SingleSquareBox,BarChart},
+  data() {
+    return {
+      // 单个电站 四个方块数据
+      singleZdSqaure:[{
+        title:'今日充电（kWh）',
+        value:'22.74',
+        bgColor:'#FFE5E5'
+      },{
+        title:'累计充电（kWh）',
+        value:'22.74',
+        bgColor:'#FFE5E5'
+      },{
+        title:'今日放电（kWh）',
+        value:'22.74',
+        bgColor:'#EEEBFF'
+      },{
+        title:'累计放电（kWh）',
+        value:'22.74',
+        bgColor:'#EEEBFF'
+      }],
+    //   单个电站 基本信息
+      singleZdInfo:[{
+        title:'电站位置',
+        value:'安徽省合肥市高新区中国声谷站',
+      },{
+        title:'投运时间',
+        value:'2024-10-11',
+      },{
+        title:'装机功率',
+        value:'215kW',
+      },{
+        title:'装机容量',
+        value:'430',
+      }]
+    }
+  },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.content{
+  display: flex;
+  padding:24px;
+  padding-right: 0;
+  margin-top:24px;
+  .map-container{
+    background: black;
+    flex:auto;
+  }
+  .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;
+      color: #FFBD00;
+      font-size: 16px;
+      margin-bottom: 24px;
+    }
+    .single-square-box-container{
+      height: 78px;
+      box-sizing: border-box;
+      margin-bottom: 10px;
+    }
+    .single-zd-info-container{
+      font-size: 12px;
+      margin-top: 10px;
+      color:#666666;
+    }
+  }
+}
+</style>