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

src/views/ems/zddt/index.vue

@@ -2,16 +2,18 @@
   <div class="ems-dashboard-editor-container">
     <zd-info></zd-info>
     <div class="ems-content-container ">
-      <div class="map-container"></div>
+      <div class="map-container">
+        <map-chart ref="mapChart"/>
+      </div>
       <div class="zd-msg-container">
         <div class="zd-msg-top">
-          <zd-select></zd-select>
+          <zd-select @submitSite="submitSite"></zd-select>
           <el-card class="common-card-container">
             <div slot="header">
               <span class="card-title">基本信息</span>
-              <el-button style="float: right; padding: 3px 0" type="text" size="small">查看详情</el-button>
+              <el-button style="float: right; padding: 3px 0" type="text" size="small" @click="toDzjk">查看详情</el-button>
             </div>
-            <div class="single-zd-name">上海电动工具所站</div>
+            <div class="single-zd-name">{{singleSiteName}}</div>
 <!--      四个方块-->
             <el-row :gutter="14">
               <el-col :span="12"  class="single-square-box-container" v-for="(item,index) in singleZdSqaure" :key="index+'singleSquareBox'">
@@ -23,8 +25,7 @@
               <el-descriptions-item  v-for="(item,index) in singleZdInfo" :key="index+'singleZdInfo'" :label="item.title">{{item.value}}</el-descriptions-item>
             </el-descriptions>
 <!--      echarts柱状图-->
-          <bar-chart></bar-chart>
-
+          <bar-chart ref="barChart"></bar-chart>
           </el-card>
 
         </div>
@@ -38,45 +39,95 @@ import ZdInfo from '@/components/Ems/ZdBaseInfo/index.vue'
 import ZdSelect from '@/components/Ems/ZdSelect/index.vue'
 import SingleSquareBox from '@/components/Ems/SingleSquareBox/index.vue'
 import BarChart from './BarChart.vue'
+import MapChart from './MapChart.vue'
+import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
 export default {
-  components:{ZdSelect,ZdInfo,SingleSquareBox,BarChart},
+  components:{ZdSelect,ZdInfo,SingleSquareBox,BarChart,MapChart},
   data() {
     return {
+      singleSiteId:'',
+      singleSiteName:'',
       // 单个电站 四个方块数据
-      singleZdSqaure:[{
-        title:'今日充电（kWh）',
-        value:'22.74',
-        bgColor:'#FFE5E5'
-      },{
-        title:'累计充电（kWh）',
-        value:'22.74',
-        bgColor:'#FFE5E5'
-      },{
-        title:'今日放电（kWh）',
-        value:'22.74',
-        bgColor:'#EEEBFF'
-      },{
-        title:'累计放电（kWh）',
-        value:'22.74',
-        bgColor:'#EEEBFF'
-      }],
+      singleZdSqaure:[
+        {
+          title:'今日充电（kWh）',
+          value:'',
+          bgColor:'#FFE5E5',
+          attr:'dayChargedCap'
+        },{
+          title:'累计充电（kWh）',
+          value:'',
+          bgColor:'#FFE5E5',
+          attr:'totalChargedCap'
+        },{
+          title:'今日放电（kWh）',
+          value:'',
+          bgColor:'#EEEBFF',
+          attr:'dayDisChargedCap'
+        },{
+          title:'累计放电（kWh）',
+          value:'',
+          bgColor:'#EEEBFF',
+          attr:'totalDisChargedCap'
+        }
+      ],
+
     //   单个电站 基本信息
       singleZdInfo:[{
         title:'电站位置',
-        value:'安徽省合肥市高新区中国声谷站',
+        value:'',
+        attr:'siteLocation'
       },{
         title:'投运时间',
-        value:'2024-10-11',
+        value:'',
+        attr:'runningTime'
       },{
         title:'装机功率',
-        value:'215kW',
+        value:'',
+        attr:'installedPower'
       },{
         title:'装机容量',
-        value:'430',
+        value:'',
+        attr:'installedCap',
       }]
     }
   },
-
+  methods:{
+    // 站点选中
+    submitSite(id){
+      console.log('选中的站点id',id)
+      this.singleSiteId = id
+      getSingleSiteBaseInfo(id).then(response => {
+        console.log('单个站点详情数据',response)
+        const res = response.data || {}
+        this.singleSiteName = res?.siteName || ''//站点名称
+        this.singleZdSqaure.forEach(item=>{
+          item.value =( res[item.attr] || res[item.attr] == 0 ) ? res[item.attr] : '-'
+        })
+        this.singleZdInfo.forEach(item=>{
+          item.value = ( res[item.attr] || res[item.attr] == 0 ) ? res[item.attr] : '-'
+        })
+        this.$refs.barChart.setOption(res?.sevenDayDischargeStats || [])
+      })
+    },
+    //跳转单站监控页面
+    toDzjk(){
+      this.$router.push({
+        path:'/dzjk',
+        query:{
+          siteId:this.singleSiteId,
+        }
+      })
+    }
+  },
+  mounted() {
+    //todo 在获取到数据后更新chart
+    // 电站名称，坐标，样式
+    this.$nextTick(()=>{
+      console.log('this.$refs.mapChart',this.$refs)
+      this.$refs.mapChart.setOption([{name:'电站一',value:[121.627049,31.444993]}])
+    })
+  }
 }
 </script>
 
@@ -86,7 +137,6 @@ export default {
   padding:24px;
   padding-right: 0;
   .map-container{
-    background: black;
     flex:auto;
   }
   .zd-msg-container{