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

2025-06-20 02:00:10 +08:00
parent 4218776b77
commit c19d829a87
12 changed files with 356 additions and 83 deletions
--- a/src/views/ems/zddt/BarChart.vue
+++ b/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() {
-      this.chart = echarts.init(this.$el, 'macarons')
+    setOption(data){
+      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:[
-            ['product','充电量','放电量'],
-            ['第一天',10,20],
-            ['第二天',20,30],
-            ['第三天',20,30],
-            ['第四天',20,10],
-            ['第五天',200,80],
-            ['第六天',210,300],
-            ['第七天',200,30],
-          ]
+          source
+          // source:[//格式
+          //   ['product','充电量','放电量'],
+          //   ['第一天',10,20],
+          //   ['第二天',20,30],
+          // ]
        },
        series: [
          {
            type: 'bar',//柱状图
-            color:'#A796FF',//柱的颜色
          },
          {
            type: 'bar',//柱状图
-            color:'#FFBE01',//柱的颜色
          }
        ]
      })
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el)
    }
  }
 }
--- a/src/views/ems/zddt/MapChart.vue
+++ b/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>
--- a/src/views/ems/zddt/index.vue
+++ b/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{