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

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>