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

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>

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>

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>