新增站点地图静态页面，项目新增ems router文件、components文件、mixin文件、scss文件和view文件

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>

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>