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

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>

src/components/Ems/ZdSelect/index.vue

@@ -3,9 +3,8 @@
   <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 v-model="id" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据" @change="change">
+          <el-option :label="item.siteName" :value="item.id" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -19,23 +18,46 @@
 
 </style>
 <script>
-//todo 动态获取电站列表 默认值，是否有设置默认值的功能
+import {getAllSites} from '@/api/ems/zddt'
   export default {
+    props:{
+      defaultSiteId:{//默认展示的站点ID
+        type:String|Number,
+        default:'',
+        required:false
+      }
+    },
     data() {
       return {
         id:'',
-        loading:false
+        loading:false,
+        siteList:[]
       }
     },
     methods:{
       onSubmit(){
-        console.log(this.id)
-        this.$emit('submit',this.id)
+        this.$emit('submitSite',this.id)
       },
       change(id){
-        console.log('发生变更',id)
-        this.$emit('change',id)
+        this.$emit('changeSite',id)
       }
+    },
+    mounted(){
+      this.loading=true
+      this.$nextTick(()=>{
+        getAllSites().then(response => {
+          this.siteList = response.data || []
+          console.log("获取站点列表返回数据",response,this.siteList)
+          // 页面初始化 设置默认选中的站点
+          const defaultSite = this.defaultSiteId
+          if(defaultSite&& this.siteList.find(item=>item.id == defaultSite)){
+            this.id = parseInt(defaultSite)//defaultSite会传来字符串类型 电站列表返回的书number类型 两个数据的类型不匹配时下拉框的默认值会显示有问题
+          }else if(!defaultSite && this.siteList.length>0){
+            this.id = this.siteList[0].id
+          }
+          this.$emit('submitSite',this.id)
+        }).finally(() => {this.loading=false})
+      })
     }
   }
 </script>