<template>
  <div class="box">
    <div class="a">
      <img
        src="../../assets/img/碳图标.png"
        alt=""
        @click="sendMessageToCSharp"
      />
    </div>
    <div class="left">
      <img src="../../assets/img/标题/碳资产管理.png" class="title" />
      <div class="qybjzl">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>企业边界总览</p>
        </div>
        <div class="top">
          <p>单位：tCO2</p>
          <div class="data">
            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
              >年</span
            >
            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
              >月</span
            >
          </div>
        </div>
        <div id="qybjzl">
          <div class="first_one">
            <div class="one">
              <p>2641.76</p>
              <p>总量</p>
            </div>
            <div class="two">
              <p>0</p>
              <p>破碎</p>
            </div>
            <div class="three">
              <p>257.1</p>
              <p>熟料</p>
            </div>
          </div>
          <div class="second_one">
            <div class="one">
              <p>2641.76</p>
              <p>粉磨</p>
            </div>
            <div class="two">
              <p>0</p>
              <p>辅助生产系统</p>
            </div>
            <div class="three">
              <p>257.1</p>
              <p>办公生活</p>
            </div>
          </div>
        </div>
      </div>
      <div class="tlt">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>碳流图</p>
        </div>
        <div class="top">
          <p>单位：tCO2</p>
        </div>
        <div id="tlt">
          <div class="zong">
            <p>总量</p>
            <p class="count">2641.76</p>
          </div>
          <div class="mei">
            <p>煤</p>
            <p class="count">28.51</p>
          </div>
          <div class="dian">
            <p>电</p>
            <p class="count">871</p>
          </div>
          <div class="chaiyou">
            <p>柴油</p>
            <p class="count">329</p>
          </div>
          <div class="qiyou">
            <p>汽油<span class="count">18.31</span></p>
          </div>
          <div class="ycl">
            <p>原材料</p>
            <p class="count">255</p>
          </div>
          <div class="m_one">1号生产线<span class="count">747.24</span></div>
          <div class="m_two">2号生产线<span class="count">128.53</span></div>
          <div class="m_three">3号生产线<span class="count">114.19</span></div>
          <div class="d_one">1号生产线<span class="count">747.24</span></div>
          <div class="d_two">2号生产线<span class="count">128.53</span></div>
          <div class="d_three">3号生产线<span class="count">114.19</span></div>
          <div class="d_po">破碎<span class="count">747.24</span></div>
          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
          <div class="chai_three">
            3号生产线<span class="count">114.19</span>
          </div>
          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
          <div class="ycl_three">
            3号生产线<span class="count">114.19</span>
          </div>
        </div>
      </div>
      <div class="tpfl">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>碳排放量</p>
        </div>
        <div class="data">
          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
            >年</span
          >
          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
            >月</span
          >
        </div>
        <div id="tpfl"></div>
      </div>
    </div>
    <div class="right">
      <div class="pfzb">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>各类排放占比</p>
        </div>
        <div class="chartBox">
          <div id="pfzb"></div>
        </div>
      </div>
      <div class="sstpf">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>实时碳排放</p>
        </div>
        <div class="chartBox">
          <div id="sstpf"></div>
        </div>
      </div>
      <div class="tzh">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>碳中和</p>
        </div>
        <div id="tzh">
          <div class="chart-container">
            <div class="chart" ref="chart"></div>
            <!-- 底座背景 -->
            <div class="bg"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getPie3D, getParametricEquation } from "../../utils/fhgl";
const color = ["#099FE3", "#00DBEB", "#50F4C1"];
export default {
  data() {
    return {
      res: "年",
      res1: "年",
      tableData: [
        {
          date1: "水泥单位产品综合能耗",
          date2: "80kgce/t",
          date3: "84kgce/t",
          date4: "5%",
        },
        {
          date1: "水泥大内产品综合电耗",
          date2: "40kWh/t",
          date3: "53kWh/t",
          date4: "32.5%",
        },
        {
          date1: "熟料单位产品综合能耗",
          date2: "100kgce/t",
          date3: "114kgce/t",
          date4: "14%",
        },
        {
          date1: "熟料单位产品综合电耗",
          date2: "48kWh/t",
          date3: "55kWh/t",
          date4: "14.58%",
        },
        {
          date1: "熟料单位产品综合煤耗",
          date2: "94kgce/",
          date3: "108kgce/",
          date4: "14.89%",
        },
      ],
      devices: [
        {
          date1: "回转窑",
          date2: true,
          date3: "102.00",
        },
        {
          date1: "熟料收尘",
          date2: true,
          date3: "29.00",
        },
        {
          date1: "篦冷机",
          date2: true,
          date3: "45.00",
        },
        {
          date1: "生料收尘",
          date2: false,
          date3: "102.00",
        },
        {
          date1: "回转窑",
          date2: true,
          date3: "29.00",
        },
        {
          date1: "熟料收尘",
          date2: false,
          date3: "45.00",
        },
      ],
      option1: {
        legend: {
          data: [{ icon: "rect", name: "碳排放量" }],
          textStyle: {
            color: "#fff",
            fontSize: "20px",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "",
            "",
            "",
            "",
            "12:20",
            "",
            "",
            "",
            "",
            "13:20",
            "",
            "",
            "",
            "",
            "14:20",
            "",
            "",
            "",
            "",
            "15:20",
          ],
          axisTick: {
            show:false,
            interval: true, // 设置刻度点连续显示
          },
          axisLine:{
            show:false,
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
            // interval: 0, //代表显示所有x轴标签显示
          },
        },
        yAxis: {
          type: "value",
          name: "单位:tCO2",
          nameTextStyle: {
            color: "#fff",
            fontSize: 20,
            padding: 10,
          },
          min: 0,
          max: 40,
          interval: 10, // 指定刻度间隔
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
          },
        },
        grid: {
          // 让图表占满容器
          //   top: "5%",
          left: "8%",
          right: "5%",
          bottom: "8%",
        },
        series: [
          {
            type: "line",
            name: "碳排放量",
            data: [
              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
              28, 21, 32, 24,
            ],
            // smooth: true,
            itemStyle: {
              normal: {
                color: "#21EF06",
                lineStyle: {
                  width: 5, //折线宽度
                  color: "#21EF06", //折线颜色
                },
                areaStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: "#0C3431" },
                    { offset: 0.5, color: "#198522" },
                    { offset: 0, color: "#18881C" },
                  ]),
                },
              },
            },
            markPoint: {
              // data: [{ type: "max", name: "Max" }],
              label: {
                textStyle: {
                  color: "#fff",
                  fontSize: 15,
                },
              },
            },
          },
        ],
      },
      option2: {
        // nodeWidth:120,
        layoutIterations: 0,
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        grid: {
          top: "25px",
          left: "10px",
          right: "10px",
          bottom: "6%",
          containLabel: true,
        },
        series: {
          type: "sankey",
          layout: "none",
          top: "2%",
          bottom: "5%",
          left: "5%",
          right: "13%",
          draggable: false,
          lineStyle: {
            opacity: 0.3,
            color: "gradient",
            curveness: 0.7,
          },
          label: {
            color: "#fff",
            fontSize: 16,
            formatter: function (params) {
              return params.name + params.value;
            },
            rich: {
              white: {
                fontSize: 20,
                padding: [10, 0, 0, 0],
              },
            },
          },
          nodeGap: 10,
          emphasis: {
            // focus: "adjacency",
          },
          data: [
            {
              name: "总量",
              value: "2641.76",
              itemStyle: { color: "#5FE3D9" },
              depth: 0,
            },
            {
              name: "煤",
              value: "28.51",
              itemStyle: { color: "#55A9CE" },
              depth: 1,
            },
            {
              name: "电",
              value: "871",
              itemStyle: { color: "#55A9CE" },
              depth: 1,
            },
            {
              name: "柴油",
              value: "329",
              itemStyle: { color: "#55A9CE" },
              depth: 1,
            },
            {
              name: "汽油",
              value: "18.31",
              itemStyle: { color: "#55A9CE" },
              depth: 1,
            },
            {
              name: "原材料",
              value: "255",
              itemStyle: { color: "#55A9CE" },
              depth: 1,
            },
            //1
            {
              name: "1号生产线",
              value: "747.24",
              id: "1",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "2号生产线",
              value: "128.53",
              id: "2",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "3号生产线",
              value: "114.19",
              id: "3",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            //2
            {
              name: "1号生产线",
              value: "747.24",
              id: "11",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "2号生产线",
              value: "28.51",
              id: "22",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "3号生产线",
              value: "28.51",
              id: "33",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "破碎",
              value: "747.24",
              id: "44",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "粉磨站",
              value: "128.53",
              id: "55",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "辅助办公",
              value: "114.19",
              id: "66",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            //3
            {
              name: "1号生产线",
              value: "747.24",
              id: "111",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "2号生产线",
              value: "28.51",
              id: "222",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "3号生产线",
              value: "28.51",
              id: "333",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "移动源",
              value: "747.24",
              id: "444",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            //4
            {
              name: "移动源",
              value: "747.24",
              id: "1111",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            //5
            {
              name: "1号生产线",
              value: "747.24",
              id: "11111",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "2号生产线",
              value: "28.51",
              id: "22222",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
            {
              name: "3号生产线",
              value: "28.51",
              id: "33333",
              itemStyle: { color: "#52DBF1" },
              depth: 2,
            },
          ],
          links: [
            // L1→L3	 4509
            { source: "总量", target: "煤", value: 1800 },
            { source: "总量", target: "电", value: 3600 },
            { source: "总量", target: "柴油", value: 2400 },
            { source: "总量", target: "汽油", value: 800 },
            { source: "总量", target: "原材料", value: 1800 },
            // L1→L2→L3	 2404
            { source: "煤", target: "1", value: 300 },
            { source: "煤", target: "2", value: 300 },
            { source: "煤", target: "3", value: 300 },

            { source: "电", target: "11", value: 300 },
            { source: "电", target: "22", value: 300 },
            { source: "电", target: "33", value: 300 },
            { source: "电", target: "44", value: 300 },
            { source: "电", target: "55", value: 300 },
            { source: "电", target: "66", value: 300 },

            { source: "柴油", target: "111", value: 300 },
            { source: "柴油", target: "222", value: 300 },
            { source: "柴油", target: "333", value: 300 },
            { source: "柴油", target: "444", value: 300 },

            { source: "汽油", target: "1111", value: 400 },

            { source: "原材料", target: "11111", value: 300 },
            { source: "原材料", target: "22222", value: 300 },
            { source: "原材料", target: "33333", value: 300 },
          ],
        },
      },
      optionData: [
        {
          name: "城市垃圾",
          value: 176,
        },
        {
          name: "余热发电",
          value: 288,
        },
        {
          name: "光伏",
          value: 88,
        },
      ],
    };
  },
  methods: {
    //U3D交互的绑定
    sendMessageToCSharp() {
      // window.vuplex.postMessage({
      //     type: "Tog",
      //     message: "碳资产管理_true",
      // });
      window.vuplex.postMessage("碳资产管理");
      this.$router.push("/tzcglsl");
    },
    defineEcharts(dom, option) {
      var chartDom = document.getElementById(dom);
      var myChart = this.$echarts.init(chartDom);
      myChart.setOption(option);
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "success-row";
      }
      return "";
    },
    getbing() {
      var trafficWay = [
        {
          name: "原煤",
          value: 73.02,
        },
        {
          name: "原材料",
          value: 12.6,
        },
        {
          name: "电",
          value: 171.49,
        },
      ];
      var data = [];
      var labels = "";
      // var index = 0;
      var color = [
        "#7EFAB7",
        "#55A9CE",
        "#53DCF1",
      ];
      trafficWay.forEach((item, index) => {
        data.push(
          {
            value: item.value,
            name: item.name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[index],
                shadowColor: color[index],
                color: color[index],
              },
            },
          },
          {
            value: 15,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
        labels = {
          show: true,
          position: "outside",
          color: "#fff",
          formatter: function (params) {
            var percent = 0;
            var total = 0;
            for (var k = 0; k < trafficWay.length; k++) {
              total += trafficWay[k].value;
            }
            percent = ((params.value / total) * 100).toFixed(0);
            if (params.name !== "") {
              if(params.name=="原煤"){
              return (
                "{colors1|" +
                percent +
                "%" +
                "}" +
                "\n" +
                "\n" +
                "{names|" +
                params.name +
                "}"
              );
              }else if(params.name=="电"){
                return (
                "{colors2|" +
                percent +
                "%" +
                "}" +
                "\n" +
                "\n" +
                "{names|" +
                params.name +
                "}"
              );
              }else{
                return (
                "{colors3|" +
                percent +
                "%" +
                "}" +
                "\n" +
                "\n" +
                "{names|" +
                params.name +
                "}"
              );
              }
            } else {
              return "";
            }
          },
          rich: {
            colors1: {
              color: color[0],
              fontSize: 40,
              align: "left",
            },
            colors2: {
              color: color[2],
              fontSize: 40,
              align: "left",
            },
            colors3: {
              color: color[1],
              fontSize: 40,
              align: "left",
            },
            names: {
              color: "#fff",
              fontSize: 30,
            },
          },
        };
      });
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [195, 199],
          center: ["36%", "50%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: labels,
              labelLine: {
                length: 20,
                length2: 60,
                show: true,
                color: "#00ffff",
              },
            },
          },
          data: data,
        },
        {
            type: "pie",
            radius: ["43%", "45%"],
            center: ["36%", "56%"],
            animation: false,
            hoverAnimation: false,
            data: [
              {
                value: 100,
              },
            ],
            label: {
              show: false,
              // 这里需要进行修改
              // formatter: function (params) {
              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
              // }
            },
            labelLine: {
              //label线的长度
              show: true, //数据标签引导线
              showAbove: true,
              length: 40,
              length2: 20,
              lineStyle: { cap: "round" },
            },
            itemStyle: {
              normal: {
                color: "#3BC5EF",
              },
            },
          },
          {
            name: "",
            type: "pie",
            startAngle: 90,
            radius: "40%",
            animation: false,
            hoverAnimation: false,
            center: ["36%", "56%"],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false,
                },
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                  {
                    offset: 1,
                    color: "rgba(50,171,241, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(50,171,241, .4)",
                  },
                  {
                    offset: 0,
                    color: "rgba(55,70,130, 0)",
                  },
                ]),
                shadowBlur: 60,
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
      ];
      let option = {
        // backgroundColor: '#0A2E5D',
        color: color,
        title: {
          text: "257.1t",
          top: "48%",
          textAlign: "center",
          left: "36%",
          textStyle: {
            color: "#fff",
            fontSize: 36,
            fontWeight: "400",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                // image: "transparent",
                width: 178,
                height: 178,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          itemWidth: 16,
          itemHeight: 16,
          icon: "rect",
          orient: "",
          x: "right",
          data: [
            {
              name: "原煤",
              value: "13.68",
            },
            {
              name: "原材料",
              value: "13.68",
            },
            {
              name: "电",
              value: "13.68",
            },
          ],
          left: 800,
          bottom: 240,
          align: "left",
          formatter: (name) => {
            const item = trafficWay.filter((item) => item.name === name)[0];
            if(name=="原煤"){
              return (
              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
              `{num1|${item.value}t}`
            );
            }else if(name=="电"){
              return (
              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
              `{num2|${item.value}t}`
            );
            }else{
              return (
              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
              `{num3|${item.value}t}`
            );
            }

            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
          },
          textStyle: {
            color: "#fff",
            rich: {
              name: {
                fontSize: 24,
                color: "#fff",
              },
              num1: {
                fontSize: 28,
                color: color[0],
              },
              num2: {
                fontSize: 28,
                color: color[2],
              },
              num3: {
                fontSize: 28,
                color: color[1],
              },
            },
          },
          itemGap: 20,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };
      let chartDom = document.getElementById("pfzb");
      let myChart = this.$echarts.init(chartDom);
      myChart.setOption(option);
    },
    tpfl() {
      const offsetX = 24; //bar宽
      const offsetY = 8; //倾斜角度
      // 绘制左侧面
      const CubeLeft = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint;
          // console.log(shape);
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - offsetX, shape.y - offsetY];
          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });
      // 绘制右侧面
      const CubeRight = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
          const c4 = [shape.x + offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 绘制顶面
      const CubeTop = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
          // const c3 = [shape.x, shape.y - offsetX];
          const c3 = [shape.x, shape.y - offsetY * 2];
          const c4 = [shape.x - offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 注册三个面图形
      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
      //拿到最大值
      // const maxValue = Math.max(...seriesData);

      let colorArr = [
        ["#0A67FF"],
        ["#10C6FF", "rgba(60,113,255,1)"],
        ["#0774D6", "rgba(17,94,213,1)"],
      ];
      let option = {
        // legend: {
        //   data: [
        //     {
        //       icon: "rect",
        //       name: "炭排放量",
        //     },
        //   ],
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: "20px",
        //   },
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params, ticket, callback) {
            const item = params[1];
            return item.name + " : " + item.value;
          },
        },
        grid: {
          // 让图表占满容器
          left: "5%",
          right: "5%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 20,
            color: "#fff",
            margin: 15,
          },
        },
        yAxis: {
          type: "value",
          name: "单位:t",
          nameTextStyle: {
            color: "#fff",
            fontSize: 20,
            padding: 10,
          },
          splitLine: {
            show: true,
            lineStyle: {},
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
          },
          // boundaryGap: ['20%', '20%'],
        },
        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 === maxValue ? e.value : "";
                // },
                fontSize: 20,
                color: "#11C3FF",
                offset: [0, -15],
              },
            },
            itemStyle: {
              color: "transparent",
            },
            tooltip: {},
            data: seriesData,
          },
        ],
      };
      this.defineEcharts("tpfl", option);
    },
    // 初始化label样式
    setLabel() {
      this.optionData.forEach((item, index) => {
        item.itemStyle = {
          color: color[index],
        };
        item.label = {
          normal: {
            show: true,
            color: color[index],
            position: "right",
            // distance:-10,
            offset: [0, 3],
            formatter: [
              "{d|{d}%}",
              "————",
              //   '{c|{c}}{b|台}',
              "{b|{b}}",
            ].join("\n"), // 用\n来换行
            rich: {
              b: {
                lineHeight: 25,
                align: "left",
                fontSize: 30,
                color: "#fff",
              },
              c: {
                fontSize: 22,
                // color: '#fff',
                textShadowColor: "#1c90a6",
                textShadowOffsetX: 0,
                textShadowOffsetY: 2,
                textShadowBlur: 5,
                color: color[index],
              },
              d: {
                color: color[index],
                fontSize: 40,
                align: "left",
              },
            },
          },
        };
        item.labelLine = {
          normal: {
            length2: 200,
            lineStyle: {
              width: 2,
              color: color[index],
            },
          },
        };
      });
    },
    // // 图表初始化
    initChart() {
      this.statusChart = echarts.init(this.$refs.chart);
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
      this.statusChart.setOption(this.option);
      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      this.option.series.push({
        name: "信用评价", //自己根据场景修改
        backgroundColor: "transparent",
        type: "pie",
        label: {
          opacity: 1,
          fontSize: 13,
          lineHeight: 20,
        },
        startAngle: -40, // 起始角度，支持范围[0, 360]。
        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["20%", "60%"],
        center: ["50%", "50%"],
        data: this.optionData,
        itemStyle: {
          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
        },
      });
      this.statusChart.setOption(this.option);
      this.bindListen(this.statusChart);
    },
    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
    bindListen(myChart, optionName = "option") {
      let selectedIndex = "";
      let hoveredIndex = "";
      // 监听点击事件，实现选中效果（单选）
      // myChart.on("click", (params) => {
      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
      //     const isSelected =
      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
      //     const isHovered =
      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
      //     const startRatio =
      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
      //     const endRatio =
      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
      //         this[optionName].series[selectedIndex].parametricEquation =
      //             getParametricEquation(
      //                 this[optionName].series[selectedIndex].pieData.startRatio,
      //                 this[optionName].series[selectedIndex].pieData.endRatio,
      //                 false,
      //                 false,
      //                 k,
      //                 this[optionName].series[selectedIndex].pieData.value
      //             );
      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
      //     }
      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
      //     this[optionName].series[params.seriesIndex].parametricEquation =
      //         getParametricEquation(
      //             startRatio,
      //             endRatio,
      //             isSelected,
      //             isHovered,
      //             k,
      //             this[optionName].series[params.seriesIndex].pieData.value
      //         );
      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
      //         isSelected;
      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
      //     selectedIndex = isSelected ? params.seriesIndex : null;
      //     // 使用更新后的 option，渲染图表
      //     myChart.setOption(this[optionName]);
      // });
      // 监听 mouseover，近似实现高亮（放大）效果
      myChart.on("mouseover", (params) => {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {
          // 否则进行高亮及必要的取消高亮操作
        } else {
          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
          if (hoveredIndex !== "") {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected =
              this[optionName].series[hoveredIndex].pieStatus.selected;
            isHovered = false;
            startRatio =
              this[optionName].series[hoveredIndex].pieData.startRatio;
            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
            k = this[optionName].series[hoveredIndex].pieStatus.k;
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            this[optionName].series[hoveredIndex].parametricEquation =
              getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                this[optionName].series[hoveredIndex].pieData.value
              );
            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = "";
          }
          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
          if (
            params.seriesName !== "mouseoutSeries" &&
            params.seriesName !== "信用评价"
          ) {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
            isSelected =
              this[optionName].series[params.seriesIndex].pieStatus.selected;
            isHovered = true;
            startRatio =
              this[optionName].series[params.seriesIndex].pieData.startRatio;
            endRatio =
              this[optionName].series[params.seriesIndex].pieData.endRatio;
            k = this[optionName].series[params.seriesIndex].pieStatus.k;
            // 对当前点击的扇形，执行高亮操作（对 option 更新）
            this[optionName].series[params.seriesIndex].parametricEquation =
              getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                this[optionName].series[params.seriesIndex].pieData.value + 60
              );
            this[optionName].series[params.seriesIndex].pieStatus.hovered =
              isHovered;
            // 记录上次高亮的扇形对应的系列号 seriesIndex
            hoveredIndex = params.seriesIndex;
          }
          // 使用更新后的 option，渲染图表
          myChart.setOption(this[optionName]);
        }
      });
      // 修正取消高亮失败的 bug
      myChart.on("globalout", () => {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        if (hoveredIndex !== "") {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
          isHovered = false;
          k = this[optionName].series[hoveredIndex].pieStatus.k;
          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          this[optionName].series[hoveredIndex].parametricEquation =
            getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              this[optionName].series[hoveredIndex].pieData.value
            );
          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = "";
        }
        // 使用更新后的 option，渲染图表
        myChart.setOption(this[optionName]);
      });
    },
  },
  created() {
    this.setLabel();
    // if (window.vuplex) {
    //     addMessageListener();
    // } else {
    //     window.addEventListener("vuplexready", addEventListener);
    // } function addEventListener() {
    //     window.vuplex.addEventListener("message", function (event) {
    //         let json = event.data;
    //         console.log("JSON received" + json);
    //     })
    // }
  },
  mounted() {
    this.defineEcharts("sstpf", this.option1);
    // this.defineEcharts("tlt", this.option2);
    this.$nextTick(() => {
      this.getbing();
      this.tpfl();
      this.initChart();
    });
  },
};
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: transparent;
  display: flex;
  background-image: url(../../assets/img/左遮罩.png),
    url(../../assets/img/右遮罩.png);
  padding-top: 400px;
  justify-content: space-between;
  position: relative;

  .a {
    position: absolute;
    width: 1300px;
    z-index: 2;
    top: 420px;
    right: 480px;
    z-index: 100;

    img {
      margin-right: 102px;
      pointer-events: all;
      cursor: pointer;
    }
  }

  .left {
    width: 1237px;
    height: 2500px;
    margin-left: 61px;
    background-image: url("../../assets/img/侧边.png");
    padding-left: 59px;
    padding-right: 45px;
    box-sizing: border-box;

    .title {
      margin-top: 15px;
      margin-left: 60px;
    }

    .qybjzl {
      position: relative;
      margin-top: 56px;

      .imgBox {
        height: 93px;
        width: 1156px;

        p {
          position: absolute;
          color: #fff;
          top: 20px;
          left: 50px;
          font-size: 30px;
          font-family: "MicrosoftYaHei";
        }
      }

      .top {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;

        p {
          font-size: 24px;
          color: #fff;
        }

        .data {
          // position: absolute;
          font-size: 20px;
          font-family: "DOUYU";
          color: #ffffff;
          line-height: 18px;
          display: flex;
          // right: 0;
          // top: 120px;
          z-index: 1;

          span {
            width: 122px;
            height: 38px;
            margin: 10px;
            display: block;
            line-height: 38px;
            text-align: center;
            cursor: pointer;
          }

          .active {
            background: linear-gradient(
              to right,
              rgba(33, 76, 124, 0.3) 20%,
              rgba(152, 207, 230, 0.3) 100%,
              rgba(33, 76, 124, 0.3) 20%
            );
          }
        }
      }

      #qybjzl {
        margin-top: 20px;
        width: 1151px;
        height: 511px;
        background: url(../../assets/TZCGL/背景框6.png);
        background-size: cover;
        // background: #37433F;
        opacity: 0.6;
        padding-top: 27px;
        box-sizing: border-box;

        .first_one {
          display: flex;
          margin-top: 20px;
          justify-content: space-around;

          .one {
            width: 190px;
            height: 190px;
            color: #3cff1c;
            text-align: center;

            p:nth-child(1) {
              margin-top: 60px;
              height: 30px;
              line-height: 30px;
            }

            font-size: 28px;
            background: url(../../assets/TZCGL/组\ 1185.png);
          }

          .two {
            width: 190px;
            height: 190px;
            color: #4ab0dd;
            text-align: center;

            p:nth-child(1) {
              margin-top: 60px;
              height: 30px;
              line-height: 30px;
            }

            font-size: 28px;
            background: url(../../assets/TZCGL/组\ 1186.png);
          }

          .three {
            width: 190px;
            height: 190px;
            color: #39d7ee;
            text-align: center;

            p:nth-child(1) {
              margin-top: 60px;
              height: 30px;
              line-height: 30px;
            }

            font-size: 28px;
            background: url(../../assets/TZCGL/组\ 1187.png);
          }
        }

        .second_one {
          display: flex;
          margin-top: 27px;
          justify-content: space-around;

          // align-content: space-around;
          .one {
            width: 190px;
            height: 190px;
            color: #3cff1c;
            text-align: center;

            p:nth-child(1) {
              margin-top: 60px;
              height: 30px;
              line-height: 30px;
            }

            font-size: 28px;
            background: url(../../assets/TZCGL/组\ 1185.png);
          }

          .two {
            width: 190px;
            height: 190px;
            color: #4ab0dd;
            text-align: center;

            p:nth-child(1) {
              margin-top: 60px;
              height: 30px;
              line-height: 30px;
            }

            p:nth-child(2) {
              width: 120px;
              margin-left: 30px;
              text-align: center;
            }

            font-size: 28px;
            background: url(../../assets/TZCGL/组\ 1186.png);
          }

          .three {
            width: 190px;
            height: 190px;
            color: #39d7ee;
            text-align: center;

            p:nth-child(1) {
              margin-top: 60px;
              height: 30px;
              line-height: 30px;
            }

            p:nth-child(2) {
              width: 80px;
              margin-left: 50px;
              text-align: center;
            }

            font-size: 28px;
            background: url(../../assets/TZCGL/组\ 1187.png);
          }
        }
      }
    }

    .tlt {
      position: relative;
      margin-top: 30px;

      .imgBox {
        height: 93px;
        width: 1156px;

        p {
          position: absolute;
          color: #fff;
          top: 20px;
          left: 50px;
          font-size: 30px;
          font-family: "MicrosoftYaHei";
        }
      }
      .top{
        position: absolute;
        top: 102px;
        left: 20px;
        color: #fff;
        font-size: 20px;
        font-family: MicrosoftYaHei;
      }
      #tlt {
        width: 1155px;
        height: 760px;
        margin-top: 50px;
        background: url(../../assets/liutu/碳1.png);
        background-size: cover;
        position: relative;
        font-size: 24px;
        color: #ffffff;
        font-family: MicrosoftYaHei;
      }
      .zong {
        position: absolute;
        left: 56px;
        top: 400px;
        .count {
          color: #5ffff3;
        }
      }
      .mei {
        position: absolute;
        left: 456px;
        top: 28px;
        .count {
          color: #48c4fb;
        }
      }
      .dian {
        position: absolute;
        left: 456px;
        top: 228px;
        .count {
          color: #48c4fb;
        }
      }
      .chaiyou {
        position: absolute;
        left: 456px;
        top: 456px;
        .count {
          color: #48c4fb;
        }
      }
      .qiyou {
        position: absolute;
        left: 456px;
        top: 585px;
        .count {
          margin-left: 20px;
          color: #48c4fb;
        }
      }
      .ycl {
        position: absolute;
        left: 456px;
        top: 668px;
        .count {
          color: #48c4fb;
        }
      }

      .m_one {
        position: absolute;
        left: 846px;
        top: 0px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .m_two {
        position: absolute;
        left: 846px;
        top: 45px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .m_three {
        position: absolute;
        left: 846px;
        top: 90px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .d_one {
        position: absolute;
        left: 846px;
        top: 140px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .d_two {
        position: absolute;
        left: 846px;
        top: 185px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .d_three {
        position: absolute;
        left: 846px;
        top: 230px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .d_po {
        position: absolute;
        left: 846px;
        top: 270px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .d_fen {
        position: absolute;
        left: 846px;
        top: 310px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .d_fzgj {
        position: absolute;
        left: 846px;
        top: 355px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .chai_one {
        position: absolute;
        left: 846px;
        top: 405px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .chai_two {
        position: absolute;
        left: 846px;
        top: 450px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .chai_three {
        position: absolute;
        left: 846px;
        top: 495px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .chai_ydy {
        position: absolute;
        left: 846px;
        top: 535px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .qi_ydy {
        position: absolute;
        left: 846px;
        top: 585px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .ycl_one {
        position: absolute;
        left: 846px;
        top: 640px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .ycl_two {
        position: absolute;
        left: 846px;
        top: 680px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
      .ycl_three {
        position: absolute;
        left: 846px;
        top: 725px;
        .count {
          margin-left: 30px;
          color: #52dbf1;
        }
      }
    }

    .tpfl {
      position: relative;
      margin-top: 40px;

      .imgBox {
        height: 93px;
        width: 1156px;

        p {
          position: absolute;
          color: #fff;
          top: 20px;
          left: 50px;
          font-size: 30px;
          font-family: "MicrosoftYaHei";
        }
      }

      .data {
        position: absolute;
        font-size: 20px;
        font-family: "DOUYU";
        color: #ffffff;
        line-height: 18px;
        display: flex;
        right: 0;
        top: 120px;
        z-index: 1;

        span {
          width: 122px;
          height: 38px;
          margin: 10px;
          display: block;
          line-height: 38px;
          text-align: center;
          cursor: pointer;
        }

        .active {
          background: linear-gradient(
            to right,
            rgba(33, 76, 124, 0.3) 20%,
            rgba(152, 207, 230, 0.3) 100%,
            rgba(33, 76, 124, 0.3) 20%
          );
        }
      }

      #tpfl {
        width: 1155px;
        height: 500px;
        margin-top: 50px;
      }
    }
  }

  .right {
    width: 1237px;
    height: 2500px;
    margin-right: 61px;
    background-image: url("../../assets/img/侧边.png");
    padding-left: 59px;
    padding-right: 45px;
    box-sizing: border-box;

    .pfzb {
      position: relative;
      margin-top: 130px;

      .imgBox {
        height: 93px;
        width: 1156px;

        p {
          position: absolute;
          color: #fff;
          top: 20px;
          left: 50px;
          font-size: 30px;
          font-family: "MicrosoftYaHei";
        }
      }

      .chartBox {
        margin-top: 50px;

        #pfzb {
          width: 1156px;
          height: 600px;
          font-size: 20px;
          color: #fff;
          position: relative;
        }
      }
    }

    .sstpf {
      position: relative;
      margin-top: 56px;

      .imgBox {
        height: 93px;
        width: 1156px;

        p {
          position: absolute;
          color: #fff;
          top: 20px;
          left: 50px;
          font-size: 30px;
          font-family: "MicrosoftYaHei";
        }
      }

      #sstpf {
        width: 1155px;
        height: 630px;
        margin-top: 50px;
      }
    }

    .tzh {
      position: relative;
      margin-top: 56px;

      // margin-bottom: 50px;
      .imgBox {
        height: 93px;
        width: 1156px;

        p {
          position: absolute;
          color: #fff;
          top: 20px;
          left: 50px;
          font-size: 30px;
          font-family: "MicrosoftYaHei";
        }
      }

      #tzh {
        width: 1155px;
        height: 400px;
        margin-top: 50px;

        .chart-container {
          position: relative;
          width: 100%;
          height: 600px;

          .chart {
            z-index: 1;
          }

          .chart,
          .bg {
            width: 100%;
            height: 100%;
          }

          .bg {
            position: absolute;
            bottom: 38px;
            left: 50%;
            z-index: 0;
            height: 400px;
            width: 720px;
            background: no-repeat center;
            // background-image: url("~@/assets/imgs/piebg.png");
            background: center top url("../../assets/img/底盘.png") no-repeat;
            background-size: 100% 100%;
            transform: translateX(-50%);
          }
        }
      }
    }
  }
}
</style>
