站点地图展示，站点地图、单站监控首页部分接口联调

src/components/Ems/ZdBaseInfo/index.vue

@@ -10,32 +10,56 @@
 </template>
 
 <script>
-//todo 动态获取数据
+import { getSiteTotalInfo } from "@/api/ems/home"
 export default {
   data() {
     return {
       data:[{
         title:'站点总数（座）',
-        num:6,
-        color:'#FFBD00'
+        num:'',
+        color:'#FFBD00',
+        attr:'siteNum'
       },{
         title:'装机功率（MW）',
-        num:6,
-        color:'#3C81FF'
+        num:'',
+        color:'#3C81FF',
+        attr:'installedPower'
+
       },{
         title:'装机容量（MW）',
-        num:6,
-        color:'#5AC7C0'
+        num:'',
+        color:'#5AC7C0',
+        attr:'installedCap'
+
       },{
         title:'总充电量（MWh）',
-        num:6,
-        color:'#A696FF'
+        num:'',
+        color:'#A696FF',
+        attr:'totalChargedCap'
+
       },{
         title:'总放电量（MWh）',
-        num:6,
-        color:'#A696FF'
+        num:'',
+        color:'#A696FF',
+        attr:'totalDischargedCap'
+
       }]
     }
+  },
+  methods: {
+    setData(res = {}){
+      this.data.forEach((item)=>{
+        item.num =(res[item.attr] || res[item.attr] == 0) ? res[item.attr] : '—'
+      })
+    }
+  },
+  mounted() {
+    getSiteTotalInfo().then(response => {
+      console.log('单个站点基本信息返回数据',response)
+      this.setData(response.data || {})
+    }).catch(()=>{
+      this.setData({})
+    })
   }
 }
 </script>