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

src/api/ems/dzjk.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+//获取单个站点的信息
+export function getDzjkHomeView(siteId) {
+  return request({
+    url: `/ems/siteMonitor/homeView?siteId=${siteId}`,
+    method: 'get'
+  })
+}

src/api/ems/home.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+// 首页、站点地图页面页面顶部 所有站点信息
+export function getSiteTotalInfo() {
+  return request({
+    url: '/ems/homePage/getSiteTotalInfo',
+    method: 'get'
+  })
+}

src/api/ems/zddt.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+// 查询缓存名称列表
+export function getAllSites() {
+  return request({
+    url: '/ems/homePage/getAllSites',
+    method: 'get'
+  })
+}
+//获取单个站点的基本信息
+export function getSingleSiteBaseInfo(siteId) {
+  return request({
+    url: `/ems/siteMap/getSingleSiteBaseInfo?siteId=${siteId}`,
+    method: 'get'
+  })
+}

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,
+        num:'',
-        color:'#FFBD00'
+        color:'#FFBD00',
+        attr:'siteNum'
       },{
         title:'装机功率（MW）',
-        num:6,
+        num:'',
-        color:'#3C81FF'
+        color:'#3C81FF',
+        attr:'installedPower'
+
       },{
         title:'装机容量（MW）',
-        num:6,
+        num:'',
-        color:'#5AC7C0'
+        color:'#5AC7C0',
+        attr:'installedCap'
+
       },{
         title:'总充电量（MWh）',
-        num:6,
+        num:'',
-        color:'#A696FF'
+        color:'#A696FF',
+        attr:'totalChargedCap'
+
       },{
         title:'总放电量（MWh）',
-        num:6,
+        num:'',
-        color:'#A696FF'
+        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-select v-model="id" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据" @change="change">
-          <el-option label="站点1" value="1"></el-option>
+          <el-option :label="item.siteName" :value="item.id" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
-          <el-option label="站点2" value="2"></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('submitSite',this.id)
-        this.$emit('submit',this.id)
       },
       change(id){
-        console.log('发生变更',id)
+        this.$emit('changeSite',id)
-        this.$emit('change',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>

src/views/ems/dzjk/home/index.vue

@@ -29,17 +29,18 @@
               stripe
               style="width: 100%">
               <el-table-column
-                prop="name"
+                prop="deviceName"
                 label="名称">
               </el-table-column>
               <el-table-column
-                prop="status"
                 label="状态"
-                class-name="warning-status"
+                >
-                label-class-name="table-head">
+                  <template slot-scope="scope">
+                    <span class="warning-status">{{ scope.row.status == 0 ? '中断':'todo不是0是什么告警'}}</span>
+                  </template>
               </el-table-column>
               <el-table-column
-                prop="value"
+                prop="alarmContent"
                 label="告警内容">
               </el-table-column>
             </el-table>
@@ -52,28 +53,62 @@
 </template>
 
 <script>
+import {getDzjkHomeView} from '@/api/ems/dzjk'
 import NllzChart from "./NllzChart.vue";
 export default {
   components: {NllzChart},
+  watch: {
+    '$route.query':{
+      handler (newQuery,oldQuery) {
+          // 参数变化处理
+          console.log('单站监控=>首页=>页面地址发生变化',newQuery,oldQuery)
+          this.$nextTick(() => {
+            const {siteId} =newQuery
+              siteId && this.getData(newQuery.siteId)
+          })
+      },
+      immediate: true,
+    }
+  },
   data() {
     return {
-      // todo 没有数据时 显示-？
       sjglData:[{
         title:'今日充电量（MWh）',
-        value:'1234'
+        value:'',
+        attr:'dayChargedCap'
       },{
         title:'今日放电量（MWh）',
-        value:'1234'
+        value:'',
+        attr:'dayDisChargedCap'
       },{
         title:'总充电量（MWh）',
-        value:'1234'
+        value:'',
+        attr:'totalChargedCap'
       },{
         title:'总放电量（MWh）',
-        value:'1234'
+        value:'',
+        attr:'totalDischargedCap'
       }],
       // todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
-      tableData:[{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'}]
+      tableData:[]
     }
+  },
+  methods:{
+    getData(siteId){
+      getDzjkHomeView(siteId).then(response => {
+        console.log(`获取单站监控id=${siteId}的基本信息`,response)
+        const data = response.data || {}
+        this.sjglData.forEach(item=>{
+          item.value = (data[item.attr] || data[item.attr] == 0) ? data[item.attr] : '-'
+        })
+        this.tableData = data?.siteMonitorHomeAlarmVo || []
+      })
+    }
+  },
+  mounted() {
+    // console.log('当前页面路由参数',this.$route.query)
+    // const {siteId} = this.$route.query;
+    // this.getData(siteId)
   }
 }
 </script>

src/views/ems/dzjk/index.vue

@@ -2,11 +2,11 @@
 
 <template>
   <div class="ems-dashboard-editor-container">
-  <zd-select/>
+  <zd-select :default-site-id="$route.query.siteId" @submitSite="submitSite"/>
 <!--  这里是单站监控的二级菜单栏 需要循环拿到数据 显示在页面上-->
     <div class="router-container">
       <div class="route-link" :class="{'active':item.name === $route.meta.activeSecondMenuName}" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
-        <router-link  style="height: 100%;width: 100%;display: block" :to="item.path">
+        <router-link  style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
         {{item.meta.title}}
         </router-link>
       </div>
@@ -32,8 +32,18 @@ export default {
       activeMenu:''
     }
   },
+  methods:{
+    submitSite(id){
+      if(id != this.$route.query.siteId){
+        console.log('单站监控选择了其他的站点id=',id,'并更新页面地址参数')
+        this.$router.push({query:{...this.$route.query,siteId:id}})
+      }else{
+        console.log('单站监控选择了相同的其他的站点id=',id,'页面地址不发生改变')
+      }
+    }
+  },
   mounted() {
-    console.log('当前页面路由',this.$route)
+    console.log('单站监控一级页面路由',this.$route)
   }
 
 }

src/views/ems/dzjk/sbjk/index.vue

@@ -3,7 +3,7 @@
     <div class="router-container">
       <div>
         <div class="route-link" :class="{'active':item.name === $route.name}" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
-          <router-link  style="height: 100%;width: 100%;display: block" :to="item.path">
+          <router-link  style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
             {{item.meta.title}}
           </router-link>
       </div>

src/views/ems/zddt/BarChart.vue

@@ -5,10 +5,7 @@
 
 <script>
 import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
 import resize from '@/mixins/ems/resize'
-// todo
-// 数据获取、数据格式处理、日期在前端处理还是后端返回
 export default {
   mixins: [resize],
   data() {
@@ -29,9 +26,14 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
+    setOption(data){
-      this.chart = echarts.init(this.$el, 'macarons')
+      console.log('初始化单个站点充、放电量柱状图',data)
+      const source = [['日期','充电量','放电量']]
+      data.forEach(item=>{
+        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
+      })
       this.chart.setOption({
+        color:['#A796FF','#FFBE01'],
         legend: {
           left: 'right',
           bottom: '10',
@@ -39,30 +41,27 @@ export default {
         tooltip: {},
         xAxis: { type: 'category' },
         yAxis: { },
-        grid:{top:20},
+        grid:{top:30},
         dataset:{
-          source:[
+          source
-            ['product','充电量','放电量'],
+          // source:[//格式
-            ['第一天',10,20],
+          //   ['product','充电量','放电量'],
-            ['第二天',20,30],
+          //   ['第一天',10,20],
-            ['第三天',20,30],
+          //   ['第二天',20,30],
-            ['第四天',20,10],
+          // ]
-            ['第五天',200,80],
-            ['第六天',210,300],
-            ['第七天',200,30],
-          ]
         },
         series: [
           {
             type: 'bar',//柱状图
-            color:'#A796FF',//柱的颜色
           },
           {
             type: 'bar',//柱状图
-            color:'#FFBE01',//柱的颜色
           }
         ]
       })
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el)
     }
   }
 }

src/views/ems/zddt/MapChart.vue

@@ -0,0 +1,100 @@
+
+<template>
+  <div id="zddtChart" style="height: 100%;width:100%"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from '@/mixins/ems/resize'
+import china from '@/data/ems/china.json'//中国地图数据
+import 'echarts/lib/chart/map';
+echarts.registerMap('china', { geoJSON: china }); //注册可用地图
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null,
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      // ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
+      this.chart = echarts.init(document.querySelector('#zddtChart'))
+      this.setOption([])
+    },
+    setOption(data) {
+      this.chart.setOption({
+        color:['#FFBD00'],
+        backgroundColor: 'transparent', //背景色
+        // tooltip: {
+        //   trigger: 'item',
+        //   show: true,
+        // },
+        geo: { //地理坐标系组件   地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制
+          map: 'china', //地图类型  这儿展示的是中国地图
+          aspectScale: 0.85,
+          selectedMode: "single",// 开启单选
+          label: {
+            show: true, //是否显示标签  此处指是否显示地图上的地区名字
+            color: '#ffffff',
+            fontSize: 12
+          },
+          roam: true, //是否开启鼠标缩放和平移漫游
+          itemStyle: {
+            areaColor: "#03365b",
+            borderColor: "#4bf3f9",
+            shadowColor: '#03365b', //阴影颜色
+            shadowOffsetX: 0, //阴影偏移量
+            shadowOffsetY: 10, //阴影偏移量
+          },
+          emphasis: {
+            label: {
+              show: true,
+              color: '#ffffff',
+            },
+            itemStyle: {
+              areaColor: "#0f5d9d",
+            }
+          }
+        },
+        series: [
+          {
+            type: "effectScatter",
+            coordinateSystem: "geo",
+            showEffectOn: "render",
+            data,
+            rippleEffect: {
+              brushType: "stroke",
+              scale: 5,
+              period: 2, // 秒数
+            },
+            symbolSize: 12,
+            clickable: false,
+            zlevel: 1,
+            label: {
+              formatter: "{b}",
+              position: "right",
+              show: true,
+            },
+          }
+        ]
+      })
+    }
+  }
+}
+
+
+</script>

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:[{
+      singleZdSqaure:[
+        {
           title:'今日充电（kWh）',
-        value:'22.74',
+          value:'',
-        bgColor:'#FFE5E5'
+          bgColor:'#FFE5E5',
+          attr:'dayChargedCap'
         },{
           title:'累计充电（kWh）',
-        value:'22.74',
+          value:'',
-        bgColor:'#FFE5E5'
+          bgColor:'#FFE5E5',
+          attr:'totalChargedCap'
         },{
           title:'今日放电（kWh）',
-        value:'22.74',
+          value:'',
-        bgColor:'#EEEBFF'
+          bgColor:'#EEEBFF',
+          attr:'dayDisChargedCap'
         },{
           title:'累计放电（kWh）',
-        value:'22.74',
+          value:'',
-        bgColor:'#EEEBFF'
+          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{