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

2025-06-16 15:54:10 +08:00
parent 598c16da9c
commit b2fdb2d6b8
10 changed files with 436 additions and 1 deletions
--- a/src/components/Ems/ZdBaseInfo/index.vue
+++ 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>