页面修改

src/api/screen/service.js

@@ -458,6 +458,13 @@ export function useElectricity() {
   })
 }
 
+// 绿电比例
+export function greenElectricity() {
+  return request({
+    url: '/large/first/greenElectricity',
+    method: 'get'
+  })
+}
 
 // 碳排放量月度变化趋势图
 export function carbon() {

src/components/Echarts/StackedPieChart3D.vue

@@ -0,0 +1,222 @@
+<template>
+  <div id="three" style="width: 65%;height: 300px;"></div>
+  
+</template>
+
+<script>
+import Highcharts from "highcharts";
+import Highcharts3D from "highcharts/highcharts-3d";
+import request from '@/utils/request'
+// 启用 3D 功能
+Highcharts3D(Highcharts);
+// 绿电比例
+export function greenElectricity() {
+  return request({
+    url: '/large/first/greenElectricity',
+    method: 'get'
+  })
+}
+export default {
+    props:["IntionList"],
+
+  name: "StackedPieChart3D",
+  
+  data() {
+      return {
+        greenIntionList:{},
+          pie3dChart: null,
+          index: 0, 
+          colorsCopy: ['#14B852', '#6063AE', '#F9DE64', '#AF68E6', '#bee5fb', '#2B8EF3'],
+          devDistribution: [
+              {
+                  "name": "绿电电能",
+                  "value": 100,
+                  "percent": 177.8,
+                  "id": 0,
+                  "y":  100,
+                  "h": 8
+              },
+              {
+                  "name": "常规电能",
+                  "value":20,
+                  "percent": 22.2,
+                  "id": 1,
+                  "y": 20,
+                  "h": 27
+              }
+          ]
+      }
+  },
+  
+  mounted() {
+     //绿电比例
+     this.greenElectricity();
+      this.pie3d()
+  },
+  methods: {
+       //绿电比例
+     greenElectricity() {
+            greenElectricity(this.$props.appOrg).then((res) => {
+        if (Number(res.code) === 200) {
+          this.greenIntionList=res.data; 
+        }
+      });
+    },
+      pie3d() {
+        console.log('这是传过来的参数啊啊啊',this.IntionList.publicEnergy);
+          const self = this;
+          const colors = this.devDistribution.map((ele, i) => {
+              const ii = i - this.colorsCopy.length * Math.floor(i / this.colorsCopy.length)
+              return this.colorsCopy[ii]
+          })
+          // 修改3d饼图绘制过程
+          let round = Math.round,
+              cos = Math.cos,
+              sin = Math.sin,
+              deg2rad = Math.deg2rad
+          Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function (proceed) {
+              proceed.apply(this, [].slice.call(arguments, 1))
+              if (!this.chart.is3d()) {
+                  return
+              }
+              let series = this,
+                  chart = series.chart,
+                  options = chart.options,
+                  seriesOptions = series.options,
+                  depth = seriesOptions.depth || 0,
+                  options3d = options.chart.options3d,
+                  alpha = options3d.alpha,
+                  beta = options3d.beta,
+                  z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth
+              z += depth / 2
+              if (seriesOptions.grouping !== false) {
+                  z = 0
+              }
+              series.data.forEach((e) => {
+                  let shapeArgs = e.shapeArgs,
+                      angle
+                  e.shapeType = 'arc3d'
+                  let ran = e.options.h
+                  shapeArgs.z = z
+                  shapeArgs.depth = depth * 0.75 + ran
+                  shapeArgs.alpha = alpha
+                  shapeArgs.beta = beta
+                  shapeArgs.center = series.center
+                  shapeArgs.ran = ran
+                  angle = (shapeArgs.end + shapeArgs.start) / 2
+                  e.slicedTranslation = {
+                      translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
+                      translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
+                  }
+              })
+          })
+              ; (function (H) {
+                  H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function (proceed) {
+                      let ret = proceed.apply(this, [].slice.call(arguments, 1))
+                      ret.zTop = (ret.zOut + 0.5) / 100
+                      return ret
+                  })
+              })(Highcharts)
+          // 生成不同高度的3d饼图
+          this.pie3dChart = Highcharts.chart('three', {
+              accessibility: { enabled: false },
+              chart: {
+                  type: 'pie',
+                  animation: false,
+                  backgroundColor: '#ffffff00',
+                  events: {
+                      load: function () {
+                          let points = this.series[0].points
+                          points.forEach((e) => {
+                              e.graphic.attr({
+                                  translateY: -e.shapeArgs.ran,
+                              })
+                              e.graphic.side1.attr({
+                                  translateY: -e.shapeArgs.ran,
+                              })
+                              e.graphic.side2.attr({
+                                  translateY: -e.shapeArgs.ran,
+                              })
+                          })
+                      },
+                  },
+                  options3d: {
+                      enabled: true,
+                      alpha: 63,
+                  },
+              },
+              title: {
+                  text: null,
+              },
+              credits: {
+                  enabled: false, //不显示LOGO
+              },
+              tooltip: { 
+                  backgroundColor: "#0A1F4C88",
+                  borderColor: "#0A1F4C88",
+                  style: {                      // 文字内容相关样式
+                      color: "#fff",
+                  },
+                  // pointFormatter: function() {
+                  //     return '<span style="color: '+ this.series.color + '">\u25CF</span> '+
+                  //         this.series.name+': <b>'+ ((this.total-4) ? (((this.y-1) / (this.total-4)) * 100).toFixed(2) : 0) +'%</b><br/>'
+                  // }
+               },
+              plotOptions: {
+                  pie: {
+                      allowPointSelect: true,
+                      cursor: 'pointer',
+                      depth: 8,
+                      size: 180,
+                      innerSize: 0,
+                      colors: colors,
+                      dataLabels: {
+                          enabled: false,
+                          color: '#fff',
+                          format: '{point.name}<br>{y} 家'
+                      },
+                      events: {
+                          click: function (e) {
+                              // 点击的操作
+                              self.index = e.point.index
+                              self.devDistribution.forEach((ele, index) => {
+                                  if (e.point.index == index) {
+                                      ele.h = 17
+                                  } else {
+                                      ele.h = 8
+                                  }
+                              })
+                              self.update()
+                          },
+                      },
+                  },
+              },
+              series: [
+                  {
+                      type: 'pie',
+                      data: this.devDistribution,
+                  },
+              ],
+          })
+          // 解决上下颠倒问题
+          Highcharts.addEvent(self.pie3dChart, 'redraw', function () {
+              let points = self.pie3dChart.series[0].points
+              points.forEach((e) => {
+                  e.graphic.attr({
+                      translateY: -e.shapeArgs.ran, 
+                  })
+                  e.graphic.side1.attr({
+                      translateY: -e.shapeArgs.ran,
+                  })
+                  e.graphic.side2.attr({
+                      translateY: -e.shapeArgs.ran,
+                  })
+              })
+          })
+      },
+      update() {
+          this.pie3dChart.series[0].update({ data: this.devDistribution })
+      }
+  }
+}
+</script>

src/views/screen/building/cameraDataDialog.vue

@@ -234,7 +234,23 @@
               <div class="content-title">
                 <span class="title">绿电比例</span>
               </div>
-              <div class="greenElectricity"></div>
+              <div class="energyBox">
+                <StackedPieChart3D :IntionList="greenIntionList"/>
+                <div class="routine">
+                  <div class="routineNavBox">
+                    <div class="imgBOX"> <img src="@/assets/images/building_guarantee/Path.png"></div>
+                    <div class="greenName">常规电能</div>
+                    <div class="greenNum">{{ greenIntionList.publicEnergy }}%</div>
+                  </div>
+                  <div class="greenPoxBOX">
+                    <div class="imgBOX"> <img src="@/assets/images/building_guarantee/Path2.png"></div>
+                    <div class="greenName" >绿电电能</div>
+                    <div class="greenNum">{{ greenIntionList.grennEnergy }}%</div>
+                  </div>
+                </div>
+              </div>
+             
+              
               <!-- <div id="wqo" style="width: 600px;height:400px;"></div> -->
             </div>
           </div>
@@ -485,10 +501,11 @@
   import LineChart from "@/components/Echarts/LineChart";
   import PieChart from "@/components/Echarts/PieChart";
   import BarChart from "@/components/Echarts/BarChart.vue";
+  import StackedPieChart3D from '@/components/Echarts/StackedPieChart3D.vue';
   import echarts from "echarts";
   import 'echarts-gl';
   import {
-    powerAndWaterMonth,airOverview,useElectricity,carbon,energyYear,powerYear,waterYear
+    powerAndWaterMonth,airOverview,useElectricity,carbon,energyYear,powerYear,waterYear,greenElectricity
   } from "@/api/screen/service";
   
   export default {
@@ -497,6 +514,7 @@
       BarChart,
       PieChart,
       LineChart,
+      StackedPieChart3D
     },
     props: {
       appOrg: {
@@ -530,6 +548,7 @@
             color: "#FFF",
           },
         },
+        greenIntionList:{},
         // 碳排放量月度变化趋势图
         lineData: [],
         // 年度累计综合能耗
@@ -782,6 +801,8 @@
       };
     },
     created() {
+        //绿电比例
+        this.greenElectricity();
       // 近一月楼宇能耗信息
       this.powerAndWaterMonth();
       //空气概况
@@ -873,6 +894,14 @@
       });
     },
 
+     //绿电比例
+     greenElectricity() {
+            greenElectricity(this.$props.appOrg).then((res) => {
+        if (Number(res.code) === 200) {
+          this.greenIntionList=res.data; 
+        }
+      });
+    },
       //切换菜单
       chooseBox(index) {
       this.curBodex = index;
@@ -1902,6 +1931,56 @@
         background-size: 100% 100%;
         margin: 10px 10px 10px 10px; 
   }
+  .energyBox{
+    display: flex;
+    .routine{
+    display: flex;
+    width: 35%;
+    align-items: center;
+    color: #ffffff;
+    flex-wrap: wrap;
+    align-content: center;
+    .routineNavBox{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 60px;
+    .imgBOX{
+      width: 25px;
+      img{
+        height: 15px;
+      }
+    }
+    .greenName{
+      font-size: 18px;
+    }
+    .greenNum{
+      margin-left: 10px;
+      color: #00ffff;
+    }
+    }
+    .greenPoxBOX{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 60px;
+    .imgBOX{
+      width: 25px;
+      img{
+        height: 15px;
+      }
+    }
+    .greenName{
+      font-size: 18px;
+    }
+    .greenNum{
+      font-size: 14px;
+      margin-left: 10px;
+      color: #00ffff;
+    }
+    }
+    }
+  }
   //绿电比例
   .greenElectricity{
         height: 100px;