<template>
  <div class="page m100">
    <div class="page-left-box">
      <!--  总览-->
      <div class="title">
        <span>总览</span>
        <div class="titleDate">
          <div
            v-for="(item, index) in overviewDate"
            :key="index"
            :class="[activeDate === index ? 'dateAc' : 'date']"
            @click="switchDate(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div
        class="margin10 box-bg"
        style="
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          align-content: space-around;
          justify-content: space-evenly;
        "
      >
        <div
          v-for="(item, index) in overviewList"
          :class="'overview-item' + index"
        >
          <span class="unit" style="margin-left: 1rem">{{ item.name }}</span>
          <p class="overviewValue">
            <span class="value">{{ item.num }}</span>
            <span class="unit">{{ item.unit }}</span>
          </p>
        </div>
      </div>
      <!--  碳流图-->
      <div class="title margin10">
        <span>碳流图</span>
      </div>
      <div class="margin10 box-bg" id="energyFlow"></div>
      <!--  碳排放趋势-->
      <div class="title margin10">
        <span>碳排放趋势</span>
        <div class="titleDate">
          <div
            v-for="(item, index) in trendDate"
            :key="index"
            :class="[trendActiveDate === index ? 'dateAc' : 'date']"
            @click="trandSwitchDate(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="margin10 box-bg">
        <div id="carbonTrends" style="width: 100%; height: 100%"></div>
        <div class="carbonTrendsReport"></div>
      </div>
    </div>
    <div class="page-right-box">
      <!--  碳排放强度 -->
      <div class="title">
        <span>碳排放强度</span>
      </div>
      <div class="margin10 box-bg" id="carbonIntensity"></div>
      <!--  各系统碳排放量统计-->
      <div class="title margin10">
        <span>各系统碳排放量统计</span>
      </div>
      <div class="margin10 box-bg" id="carbonEmissionStatistics"></div>
      <!--  碳中和-->
      <div class="title margin10">
        <span>碳中和</span>
      </div>
      <div class="margin10 box-bg">
        <div id="carbonNeutrality" style="width: 100%; height: 100%"></div>
        <div class="carbonNeutralityBg"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
import { getPie3D, getParametricEquation } from "@/utils/carbonNeutrality";
import {
  getCarbonOverview,
  getCarbonFlux,
  getCarbonTrend,
  getCarbonIntensity,
  getSystemPurge,
  getCarbonNeutral,
} from "@/api/carbonEmission";
const overviewDate = ref([
  {
    name: "年",
  },
  {
    name: "月",
  },
]);
//总览
const activeDate = ref(0);
const overviewList = ref([
  {
    name: "总排放量",
    num: 83,
    unit: "万tCO₂",
  },
  {
    name: "碳抵消量",
    num: 83,
    unit: "万tCO₂",
  },
  {
    name: "碳减排量",
    num: 83,
    unit: "万tCO₂",
  },
]);
//总览切换时间
function switchDate(index) {
  activeDate.value = index;
  getOverview();
}
//碳趋势切换时间
function trandSwitchDate(index) {
  trendActiveDate.value = index;
  carboEmissionTrends();
}
//碳趋势
const trendActiveDate = ref(0);
const trendDate = ref([
  {
    name: "月",
  },
  {
    name: "日",
  },
]);
//碳趋势图表
function getCarbonTrends(params) {
  let xData = [];
  let yData = [];
  params.forEach((item) => {
    xData.push(item.time);
    yData.push(item.EH);
  });
  let myChart = echarts.init(document.getElementById("carbonTrends"));
  const option = {
    // backgroundColor: "#05224d",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "18%",
      left: "4%",
      right: "4%",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            // type:'dashed',
            color: "#557775",
            // color: "#233e64",
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "#DDFFFD",
            margin: 40,
          },
        },

        axisTick: { show: false },
        boundaryGap: true,
        data: xData,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位:万tCO₂",
        nameTextStyle: {
          color: "#DDFFFD",
          // align: "right",
          padding: [0, 10, 0, 0],
        },
        min: 0,
        max: 2000,
        splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "rgba(1, 39, 37, 0.30)",
          },
        },
        axisLine: { show: false },
        axisLabel: {
          textStyle: {
            color: "#DDFFFD",
          },
        },
        axisTick: { show: false },
      },
    ],
    series: [
      {
        name: "碳排放量",
        type: "line",
        smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 0,

        lineStyle: {
          color: "#5BFAF1", // 线条颜色
        },
        areaStyle: {
          //区域填充样式
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "rgba(91, 250, 241, 0.40)" },
              { offset: 1, color: "rgba(91, 250, 241, 0)" },
            ],
            false
          ),

          shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
        data: yData,
      },
    ],
  };
  myChart.setOption(option);
  // 添加 resize 事件处理程序
  window.addEventListener("resize", function () {
    myChart.resize(); // 调用 resize 函数进行自适应大小调整
  });
}
//碳排放强度
const getCarbonIntensityChat = (params) => {
  let xData = [];
  let yData = [];
  params.forEach((item) => {
    xData.push(item.time);
    yData.push(item.CarbonIntensity);
  });
  const offsetX = 10; //bar宽
  const offsetY = 5; //倾斜角度
  // 绘制左侧面
  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x - 7, shape.y];
      const c1 = [shape.x + 7, shape.y];
      const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
      const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
      ctx
        .moveTo(c0[0], c0[1])
        .lineTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .closePath();
      ctx.stroke();
    },
  });
  // 绘制右侧面
  const CubeRight = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c1 = [shape.x + 7, shape.y];
      const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
      const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 5];
      const c4 = [shape.x + 7 + 7, shape.y - 5];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
      ctx.stroke();
    },
  });
  // 绘制顶面
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const c1 = [shape.x - 7, shape.y];
      const c2 = [shape.x + 8, shape.y];
      const c3 = [shape.x + 15, shape.y - 5];
      const c4 = [shape.x - 2, shape.y - 5];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
      ctx.stroke();
    },
  });
  // 注册三个面图形
  echarts.graphic.registerShape("CubeLeft", CubeLeft);
  echarts.graphic.registerShape("CubeRight", CubeRight);
  echarts.graphic.registerShape("CubeTop", CubeTop);
  let xAxisData = xData;
  let seriesData = yData;
  // 绿色渐变
  // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
  // 蓝色渐变
  let colorArr = [
    ["rgba(0, 170, 193, 1)"],
    ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
    ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
  ];
  let myChart = echarts.init(document.getElementById("carbonIntensity"));
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params, ticket, callback) {
        const item = params[1];
        return item.name + " : " + item.value;
      },
    },
    color: "#01DDF9",
    legend: {
      icon: "rect",
      right: "4%",
      top: "3%",
      itemWidth: 20, // 标签宽度为20px
      itemHeight: 10, // 标签高度为10px
      textStyle: {
        color: "rgba(221, 255, 253, 1)",
      },
      data: ["单位面积碳排放强度限值"],
    },
    grid: {
      left: "4%",
      right: "5%",
      top: "18%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: xAxisData,
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          type: "solid",
          color: "rgba(255, 255, 255, 0.20)",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "rgba(221, 255, 253, 1)",
        fontSize: 12,
        interval: 0,
        // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
        // formatter: function (value) {
        //   const length = value.length;
        //   if (length > 3) {
        //     const start = Math.floor(length / 2);
        //     const str =
        //       value.slice(0, start) + "\n" + value.slice(start, length);
        //     return str;
        //   }
        //   return value;
        // },
      },
    },
    yAxis: {
      type: "value",
      name: "单位:万tCO₂/人·年",
      nameTextStyle: {
        color: "#DDFFFD",
        padding: [0, 0, 0, 35],
      },
      max: 500,
      min: 0,
      //   minInterval: 1,
      // y轴（竖直线）
      axisLine: {
        show: false,
      },
      // y轴横向 标线
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(1, 39, 37, 0.30)",
        },
      },
      // y轴刻度线
      axisTick: {
        show: false,
      },
      // y轴文字
      axisLabel: {
        fontSize: 12,
        color: "#DDFFFD",
      },
    },
    series: [
      {
        type: "custom",
        name: "单位面积碳排放强度限值",
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              // 左侧面
              {
                type: "CubeLeft",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorArr[1][0],
                    },
                    {
                      offset: 1,
                      color: colorArr[1][1],
                    },
                  ]),
                },
              },
              // 右侧面
              {
                type: "CubeRight",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorArr[2][0],
                    },
                    {
                      offset: 1,
                      color: colorArr[2][1],
                    },
                  ]),
                },
              },
              // 顶部
              {
                type: "CubeTop",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorArr[0][0],
                    },
                    {
                      offset: 1,
                      color: colorArr[0][0],
                    },
                  ]),
                },
              },
            ],
          };
        },
        data: seriesData,
      },
      {
        type: "bar",
        label: {
          normal: {
            show: false,
            position: "top",
            formatter: (e) => {
              return e.value;
            },
            fontSize: 16,
            color: "#43C4F1",
            offset: [0, -5],
          },
        },
        itemStyle: {
          color: "transparent",
        },
        tooltip: {},
        data: seriesData,
        markLine: {
          symbol: "none",
          data: [
            {
              yAxis: 400,
              lineStyle: {
                color: "rgba(255, 221, 0, 1)",
                type: "dashed",
                width: 1,
              },
              label: {
                show: false,
                position: "end",
              },
            },
          ],
        },
      },
    ],
  };
  myChart.setOption(option);
  // 添加 resize 事件处理程序
  window.addEventListener("resize", function () {
    myChart.resize(); // 调用 resize 函数进行自适应大小调整
  });
};
//各系统碳排放量统计
const getCarbonEmissionStatistics = (params) => {
  let xData = [];
  let yData = [];
  params.forEach((item) => {
    xData.push(item.name);
    yData.push(item.CarbonEmission);
  });
  let myChart = echarts.init(
    document.getElementById("carbonEmissionStatistics")
  );
  let option = {
    grid: {
      left: "5%",
      right: "5%",
      bottom: "-10%",
      top: "8%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        return (
          params[0].name +
          "<br/>" +
          "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
          params[0].seriesName +
          "" +
          Number(
            (params[0].value.toFixed(4) / 10000).toFixed(2)
          ).toLocaleString() +
          " kWh<br/>"
        );
      },
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          padding: [0, 0, 10, -10],
          verticalAlign: "bottom",
          inside: true,
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: "14",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: xData,
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          padding: [0, 0, 10, -10],
          verticalAlign: "bottom",
          inside: true,
          textStyle: {},
          formatter: function (value) {
            return (
              "{a|" + (value / 10000).toLocaleString() + "}" + "{b|万tCO₂}"
            );
          },
          rich: {
            a: {
              fontSize: "16",
              color: "rgba(0, 255, 240, 1)",
              padding: [0, 6, 0, 0],
            },
            b: {
              color: "#fff",
              fontSize: "12",
            },
          },
        },
        data: yData,
      },
    ],
    series: [
      {
        name: "",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "rgba(29, 169, 153, 1)",
            },
            {
              offset: 1,
              color: "rgba(223, 243, 240, 1)",
            },
          ]),
        },
        barWidth: 8,
        data: yData,
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 10,
        barGap: "-115%",
        data: [50000000, 50000000, 50000000, 50000000, 50000000],
        itemStyle: {
          color: "rgba(5, 33, 31, 0.32)",
        },
      },
    ],
  };
  myChart.setOption(option);
  // 添加 resize 事件处理程序
  window.addEventListener("resize", function () {
    myChart.resize(); // 调用 resize 函数进行自适应大小调整
  });
};
const optionData = ref([
  // {
  //   name: "CCER",
  //   value: 176,
  // },
  // {
  //   name: "绿电",
  //   value: 288,
  // },
  // {
  //   name: "绿证",
  //   value: 88,
  // },
]);
const color = [
  "rgba(0, 140, 255, 1)",
  "rgba(1, 225, 242, 1)",
  "rgba(27, 255, 118, 1)",
];
const setLabel = () => {
  optionData.value.forEach((item, index) => {
    item.itemStyle = {
      color: color[index],
    };
    item.label = {
      normal: {
        show: true,
        color: color[index],
        // position: "right",
        padding: [0, -50],
        // distance:-10,
        offset: [0, 3],
        formatter: [
          "{d|{d}%}",
          //   '{c|{c}}{b|台}',
          "{b|{b}}",
        ].join("\n"), // 用\n来换行
        rich: {
          b: {
            lineHeight: 30,
            align: "left",
            fontSize: 12,
            color: "#fff",
          },
          c: {
            fontSize: 15,
            // color: '#fff',
            textShadowColor: "#1c90a6",
            textShadowOffsetX: 0,
            textShadowOffsetY: 2,
            textShadowBlur: 5,
            color: color[index],
          },
          d: {
            color: color[index],
            fontSize: 18,
            fontWeight: 600,
            align: "left",
          },
        },
      },
    };
    item.labelLine = {
      normal: {
        length2: 100,
        lineStyle: {
          width: 1,
          color: color[index],
        },
      },
    };
  });
};
//碳中和
const getCarbonNeutrality = () => {
  setLabel();
  let myChart = echarts.init(document.getElementById("carbonNeutrality"));
  let option = getPie3D(optionData.value, 0, 270, 26, 30, 1);
  // myChart.setOption(option);
  // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
  option.series.push({
    name: "", //自己根据场景修改
    backgroundColor: "transparent",
    type: "pie",
    label: {
      opacity: 1,
      fontSize: 13,
      lineHeight: 20,
    },
    startAngle: -40, // 起始角度，支持范围[0, 360]。
    clockwise: true, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    radius: ["20%", "60%"],
    center: ["50%", "50%"],
    data: optionData.value,
    itemStyle: {
      opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
    },
  });
  myChart.setOption(option);
  // 添加 resize 事件处理程序
  window.addEventListener("resize", function () {
    myChart.resize(); // 调用 resize 函数进行自适应大小调整
  });
};
// 碳流图
const drawEnergyFlow = (params) => {
  let myChart = echarts.init(document.getElementById("energyFlow"));
  let sourceData = [
    {
      name: "电",
      nameValue: params[0].Amount,
      valueUnit: "万tCO₂",
    },
    {
      name: "空调",
      nameValue: params[0].data[0].AirConditioner,
      valueUnit: "万tCO₂",
    },
    {
      name: "照明",
      nameValue: params[0].data[0].Lighting,
      valueUnit: "万tCO₂",
    },
    {
      name: "电梯",
      nameValue: params[0].data[0].Elevator,
      valueUnit: "万tCO₂",
    },
    {
      name: "其他",
      nameValue: params[0].data[0].Other,
      valueUnit: "万tCO₂",
    },
  ];
  let sangjiColor = [
    "rgba(91, 250, 241, 1)",
    "rgba(91, 250, 241, 1)",
    "rgba(91, 250, 241, 1)",
    "rgba(91, 250, 241, 1)",
    "rgba(91, 250, 241, 1)",
  ];
  let itemStyleSource = [];
  for (let d = 0; d < sourceData.length; d++) {
    if (sourceData[d].name === "电") {
      sourceData[d].label = {
        position: "right",
      };
    }
    sourceData[d].itemStyle = {
      color: sangjiColor[d],
    };
    itemStyleSource.push(sourceData[d]);
  }

  let option = {
    series: [
      {
        // select:{
        //   disabled:true
        // },
        type: "sankey",
        layout: "none",
        top: "5%",
        bottom: "4%",
        left: "6%",
        right: "5%",
        nodeAlign: "right",
        nodeWidth: "13",
        // nodeAlign:'right',
        focusNodeAdjacency: "allEdges",
        data: itemStyleSource,
        links: [
          {
            source: "电",
            target: "空调",
            value: 8,
          },
          {
            source: "电",
            target: "照明",
            value: 8,
          },
          {
            source: "电",
            target: "电梯",
            value: 8,
          },
          {
            source: "电",
            target: "其他",
            value: 8,
          },
        ],
        label: {
          position: "left",
          color: "#fff",
          fontSize: 14,
          formatter: function (params) {
            if (params.dataIndex === 0) {
              return (
                "{a|" +
                params.data.name +
                "}\n" +
                "{b|" +
                params.data.nameValue +
                "}" +
                " " +
                params.data.valueUnit
              );
            } else {
              return (
                "{name|" +
                params.data.name +
                "}" +
                "{value|" +
                params.data.nameValue +
                "}" +
                // " " +
                params.data.valueUnit
              );
            }
          },
          rich: {
            a: {
              padding: [0, 15, 10, 0],
              fontSize: "14",
            },
            b: {
              color: "rgba(91, 250, 241, 1)",
              fontWeight: "600",
              fontSize: "16",
            },
            name: {
              fontSize: 14,
              // padding: [10, 0, 0, 0],
            },
            value: {
              color: "rgba(91, 250, 241, 1)",
              fontWeight: "600",
              fontSize: "16",
              padding: [0, 10, 0, 10],
            },
          },
        },
        lineStyle: {
          color: "source",
          // curveness: 0.5,
        },
        itemStyle: {
          borderWidth: 1,
          borderColor: "transparent",
        },
      },
    ],
  };
  myChart.setOption(option);
  // 添加 resize 事件处理程序
  window.addEventListener("resize", function () {
    myChart.resize(); // 调用 resize 函数进行自适应大小调整
  });
};
//总览数据
function getOverview() {
  let date = activeDate.value == 0 ? "年" : "月";
  getCarbonOverview({ date })
    .then((res) => {
      if (res.code == 200) {
        overviewList.value[0].num = res.data[0].TotalRelease;
        overviewList.value[1].num = res.data[0].CarbonOffset;
        overviewList.value[2].num = res.data[0].CarbonReduction;
      } else {
        return false;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
//碳流图
function carbonFlowChart(params) {
  getCarbonFlux()
    .then((res) => {
      if (res.code == 200) {
        //碳流图
        drawEnergyFlow(res.data);
      } else {
        return false;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
//碳排放趋势
function carboEmissionTrends() {
  let date = trendActiveDate.value == 0 ? "月" : "日";
  getCarbonTrend({ date })
    .then((res) => {
      if (res.code == 200) {
        //碳趋势图表
        getCarbonTrends(res.data);
      } else {
        return false;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
//碳排放强度
function carbonStrength() {
  getCarbonIntensity()
    .then((res) => {
      if (res.code == 200) {
        getCarbonIntensityChat(res.data);
      } else {
        return false;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
//各系统碳排放量统计
function eachSystem() {
  getSystemPurge()
    .then((res) => {
      if (res.code == 200) {
        getCarbonEmissionStatistics(res.data);
      } else {
        return false;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
//碳中和
function neutralization(params) {
  getCarbonNeutral()
    .then((res) => {
      if (res.code == 200) {
        optionData.value = Object.keys(res.data).map((item, index) => {
          return { name: res.data[index].name, value:  res.data[index].CarbonNeutral };
        });
        getCarbonNeutrality();
      } else {
        return false;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
//加载完dom执行
onMounted(() => {
  //总览
  getOverview();
  //碳流图
  carbonFlowChart();
  //碳排放趋势
  carboEmissionTrends();
  //碳排放强度
  carbonStrength();
  //各系统碳排放量统计
  eachSystem();
  //碳中和
  neutralization();
});
</script>

<style lang="scss" scoped>
.titleDate {
  display: flex;
  justify-content: space-between;
  width: 25%;
  font-size: 14px;
  font-weight: normal;
  font-family: normal;
  .date {
    padding: 0 0.8rem;
    background-image: url("@/assets/images/small-icon.png");
    background-size: 100% 100%;
    cursor: pointer;
  }
  .dateAc {
    padding: 0 0.8rem;
    background-image: url("@/assets/images/small-icon-select.png");
    background-size: 100% 100%;
    cursor: pointer;
  }
}
.overview-item0 {
  width: 24.125rem;
  height: 27%;
  background: url("@/assets/images/carbonEmission/totalEmissions.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.overview-item1 {
  width: 24.125rem;
  height: 27%;
  background: url("@/assets/images/carbonEmission/carbonOffsettingAmount.png")
    no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.overview-item2 {
  width: 24.125rem;
  height: 27%;
  background: url("@/assets/images/carbonEmission/carbonEmissionReduction.png")
    no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.overviewValue {
  left: 10%;
  position: relative;
  .unit {
    font-size: 0.8rem;
    color: rgba(221, 255, 253, 1);
  }
  .value {
    margin-right: 0.3rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(91, 250, 241, 1);
  }
}
.carbonTrendsReport {
  width: 27.2%;
  height: 10%;
  position: relative;
  background: url("@/assets/images/carbonEmission/carbonEmission StatisticsReport.png")
    no-repeat;
  background-size: 100% 100%;
  bottom: 97%;
  left: 70%;
  cursor: pointer;
}
.carbonNeutralityBg {
  width: 68.7%;
  height: 50.5%;
  background: url("@/assets/images/carbonEmission/carbonNeutralityBg.png")
    no-repeat;
  background-size: 100% 100%;
  position: relative;
  z-index: 999;
  bottom: 60%;
  left: 16%;
}
</style>
