<template>
  <div class="box">
    <div class="title">
      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
      <p>客户侧总体用能情况分析</p>
      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
    </div>
    <div class="containter">
      <div class="left">
        <div class="ztynqk">
          <p class="title">总体用能情况</p>
          <ul class="typeBox">
            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
          </ul>
          <div class="bottom">
            <div class="bottomBox">
              <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
              <div>
                <p>用电量(MWH)</p>
                <p><span>84.00</span><span>-13.20%</span></p>
              </div>
            </div>
            <div class="bottomBox">
              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
              <div>
                <p>用蒸汽量(m2)</p>
                <p><span>45.32</span><span>-23.20%</span></p>
              </div>
            </div>
            <div class="bottomBox">
              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
              <div>
                <p>用水量(m2)</p>
                <p><span>56.00</span><span>-33.20%</span></p>
              </div>
            </div>
            <div class="bottomBox">
              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
              <div>
                <p>用汽量(m2)</p>
                <p><span>37.00</span><span>43.20%</span></p>
              </div>
            </div>
          </div>
        </div>
        <div class="ssfhzs">
          <p class="title">实时负荷走势</p>
          <ul class="typeBox">
            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
              电
            </li>
            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
              水
            </li>
            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
              蒸汽
            </li>
          </ul>
          <div id="ssfhzs"></div>
        </div>
        <div class="ynl">
          <p class="title">用能量</p>
          <ul class="typeBox">
            <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
              电
            </li>
            <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
              水
            </li>
            <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
              蒸汽
            </li>
          </ul>
          <div id="ynl"></div>
        </div>
      </div>
      <div class="right">
        <div class="yhhyzb">
          <p class="title">用户行业占比</p>
          <div id="yhhyzb"></div>
        </div>
        <div class="ynflzb">
          <p class="title">用能分类占比</p>
          <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
          <div id="ynflzb"></div>
        </div>
        <div class="qyydlpm">
          <p class="title">企业用电量排名</p>
          <ul class="list">
            <li v-for="(item, index) in list" :style="listClass(index)">
              <p>{{ index + 1 }}</p>
              <p>{{ item.name }}</p>
              <p>{{ item.value }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div id="map"></div>
      <div class="footer">
        <div class="yhzyfbqk">
          <!-- <p class="title">用户资源分布情况</p> -->
          <div id="yhzyfbqk"></div>
        </div>
      </div>
      <div class="tooltip">
        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
        <div class="title1">客户侧用能数据总览</div>
        <div class="txt">
          <div class="one">
            <span>接入用户数:</span>
            <p style="color: #d9e363">
              352<span style="color: #d9e363">户</span>
            </p>
          </div>
          <div class="two">
            <span>用户总电量:</span>
            <p style="color: #44bfd6">
              5525<span style="color: #44bfd6">万千瓦时</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { fontSizeRem } from "../assets/function";
export default {
  data() {
    return {
      res: "日",
      type: "电",
      list: [
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
      ],
      option: {
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     type: "cross",
        //     label: {
        //       backgroundColor: "#6a7985",
        //     },
        //   },
        // },
        legend: {
          left: "right",
          data: [
            { icon: "roundRect", name: "昨日" },
            { icon: "roundRect", name: "今日" },
          ],
          textStyle: {
            fontSize: fontSizeRem(14),
            fontFamily: "AlibabaPuHuiTi",
            fontWeight: 400,
            color: "rgba(255,255,255,0.8)",
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: fontSizeRem(14),
                fontFamily: "AlibabaPuHuiTi",
                fontWeight: 400,
                color: "rgba(255,255,255,0.8)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位:KW",
            nameTextStyle: {
              color: "#fff",
              fontSize: fontSizeRem(14),
              padding: 10,
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: fontSizeRem(14),
                fontFamily: "AlibabaPuHuiTi",
                fontWeight: 400,
                color: "rgba(255,255,255,0.8)",
              },
            },
          },
        ],
        series: [
          {
            name: "昨日",
            type: "line",
            // stack: "Total",
            smooth: true,
            lineStyle: {
              width: 2,
              color: "#29F1FA",
            },
            showSymbol: false,
            itemStyle: {
              color: "#29F1FA",
            },
            areaStyle: {
              opacity: 0.4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(7, 51, 99)",
                },
                {
                  offset: 1,
                  color: "rgb(7, 67, 103)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 402, 231, 134, 190, 230, 120],
          },
          {
            name: "今日",
            type: "line",
            // stack: "Total",
            smooth: true,
            lineStyle: {
              width: 2,
              color: "#1B7EF2",
            },
            showSymbol: false,
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              color: "#1B7EF2",
            },
            areaStyle: {
              opacity: 0.4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(7, 51, 96)",
                },
                {
                  offset: 1,
                  color: "rgb(9, 58, 117)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 302, 181, 234, 210, 290, 150],
          },
        ],
      },
      option1: {
        legend: {
          left: "right",
          data: [{ icon: "roundRect", name: "用电量" }],
          textStyle: {
            fontSize: fontSizeRem(14),
            fontFamily: "AlibabaPuHuiTi",
            fontWeight: 400,
            color: "rgba(255,255,255,0.8)",
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: fontSizeRem(14),
                fontFamily: "AlibabaPuHuiTi",
                fontWeight: 400,
                color: "rgba(255,255,255,0.8)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位:MWH",
            nameTextStyle: {
              color: "#fff",
              fontSize: fontSizeRem(14),
              padding: 10,
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: fontSizeRem(14),
                fontFamily: "AlibabaPuHuiTi",
                fontWeight: 400,
                color: "rgba(255,255,255,0.8)",
              },
            },
          },
        ],
        series: [
          {
            name: "用电量",
            type: "bar",
            stack: "myBar",

            showSymbol: false,
            itemStyle: {
              color: "#29F1FA",
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#033BFF",
                    },
                    {
                      offset: 1,
                      color: "#01B1FF",
                    },
                    // {
                    //   offset: 1,
                    //   color: "#01B1FF",
                    // },
                  ],
                  false
                ),
              },
            },
            data: [220, 402, 231, 134, 190, 230, 120],
          },
        ],
      },
    };
  },
  methods: {
    listClass(index) {
      if (index == 0) {
        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
      } else if (index == 1) {
        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
      } else if (index == 2) {
        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
      }
    },
    defineEcharts(dom, option) {
      var chartDom = document.getElementById(dom);
      var myChart = this.$echarts.init(chartDom, null, {
        devicePixelRatio: 10, // 设置为2或更高的值
      });
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    //用户行业占比
    initYhhyzb() {
      let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
      let echartData = [
        {
          name: "钢筋",
          value: "10",
        },
        {
          name: "水泥",
          value: "20",
        },
        {
          name: "化工",
          value: "30",
        },
        {
          name: "制造",
          value: "20",
        },
        {
          name: "其他",
          value: "20",
        },
      ];
      let formatNumber = function (num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ",");
      };
      let total = echartData.reduce((a, b) => {
        return a + b.value * 1;
      }, 0);
      let option = {
        color: color,
        // tooltip: {
        //   trigger: "item",
        // },
        title: [
          {
            text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
            top: "center",
            left: 110,
            textStyle: {
              rich: {
                name: {
                  fontSize: fontSizeRem(14),
                  fontWeight: "normal",
                  color: "#fff",
                  padding: [10, 0],
                },
                val: {
                  fontSize: fontSizeRem(32),
                  fontWeight: "bold",
                  color: "#fff",
                },
              },
            },
          },
        ],
        legend: {
          orient: "vertical",
          icon: "circle",
          x: "70%",
          y: "center",
          itemWidth: 12,
          itemHeight: 12,
          align: "left",
          textStyle: {
            color: "#fff",
            rich: {
              name: {
                fontSize: fontSizeRem(12),
              },
              value: {
                fontSize: fontSizeRem(16),
                padding: [0, 5, 0, 15],
              },
              unit: {
                fontSize: fontSizeRem(12),
              },
            },
          },
          formatter: function (name) {
            let res = echartData.filter((v) => v.name === name);
            res = res[0] || {};
            let unit = res.unit || "";
            return (
              "{name|" +
              name +
              "}  {value|" +
              res.value +
              "%" +
              "}{unit|" +
              unit +
              "}"
            );
          },
        },
        series: [
          {
            type: "pie",
            roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
            animation: false, // 禁止动画效果
            radius: ["45%", "60%"],
            center: ["40%", "50%"],
            data: echartData,

            itemStyle: {
              normal: {
                borderWidth: 0,
              },
            },
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
          },
        ],
      };
      this.defineEcharts("yhhyzb", option);
    },
    //用能分类占比
    initYnflzb() {
      let getParametricEquation = function (
        startRatio,
        endRatio,
        isSelected,
        isHovered,
        k,
        height
      ) {
        // 计算
        let midRatio = (startRatio + endRatio) / 2;

        let startRadian = startRatio * Math.PI * 2;
        let endRadian = endRatio * Math.PI * 2;
        let midRadian = midRatio * Math.PI * 2;

        // 如果只有一个扇形，则不实现选中效果。
        if (startRatio === 0 && endRatio === 1) {
          isSelected = false;
        }

        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
        k = typeof k !== "undefined" ? k : 1 / 3;

        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

        // 计算高亮效果的放大比例（未高亮，则比例为 1）
        let hoverRate = isHovered ? 1.05 : 1;

        // 返回曲面参数方程
        return {
          u: {
            min: -Math.PI,
            max: Math.PI * 3,
            step: Math.PI / 32,
          },

          v: {
            min: 0,
            max: Math.PI * 2,
            step: Math.PI / 20,
          },

          x: function (u, v) {
            if (u < startRadian) {
              return (
                offsetX +
                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetX +
                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
          },

          y: function (u, v) {
            if (u < startRadian) {
              return (
                offsetY +
                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetY +
                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
          },

          z: function (u, v) {
            if (u < -Math.PI * 0.5) {
              return Math.sin(u);
            }
            if (u > Math.PI * 2.5) {
              return Math.sin(u);
            }
            return Math.sin(v) > 0 ? 1 * height : -1;
          },
        };
      };
      // 生成模拟 3D 饼图的配置项
      let getPie3D = function (pieData, internalDiameterRatio) {
        let series = [];
        let sumValue = 0;
        let startValue = 0;
        let endValue = 0;
        let legendData = [];
        let k =
          typeof internalDiameterRatio !== "undefined"
            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
            : 1 / 3;

        // 为每一个饼图数据，生成一个 series-surface 配置
        for (let i = 0; i < pieData.length; i++) {
          sumValue += pieData[i].value;

          let seriesItem = {
            name:
              typeof pieData[i].name === "undefined"
                ? `series${i}`
                : pieData[i].name,
            type: "surface",
            parametric: true,
            wireframe: {
              show: false,
            },
            pieData: pieData[i],
            pieStatus: {
              selected: false,
              hovered: false,
              k: k,
            },
          };

          if (typeof pieData[i].itemStyle != "undefined") {
            let itemStyle = {};

            typeof pieData[i].itemStyle.color != "undefined"
              ? (itemStyle.color = pieData[i].itemStyle.color)
              : null;
            typeof pieData[i].itemStyle.opacity != "undefined"
              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
              : null;

            seriesItem.itemStyle = itemStyle;
          }
          series.push(seriesItem);
        }

        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
        for (let i = 0; i < series.length; i++) {
          endValue = startValue + series[i].pieData.value;
          console.log(series[i]);
          series[i].pieData.startRatio = startValue / sumValue;
          series[i].pieData.endRatio = endValue / sumValue;
          series[i].parametricEquation = getParametricEquation(
            series[i].pieData.startRatio,
            series[i].pieData.endRatio,
            false,
            false,
            k,
            series[i].pieData.value
          );

          startValue = endValue;

          legendData.push(series[i].name);
        }
        return series;
      };
      // 传入数据生成 option
      const optionsData = [
        {
          name: "楼宇",
          value: 4256,
          itemStyle: {
            //   opacity: 0.5,
            color: "#2A71FF",
          },
        },

        {
          name: "工业",
          value: 2356,
          itemStyle: {
            //   opacity: 0.5,
            color: "#00EDFE",
          },
        },
        {
          name: "其他",
          value: 2018,
          itemStyle: {
            //   opacity: 0.5,
            color: "#FEDB4B",
          },
        },
      ];
      const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
      series.push({
        name: "pie2d",
        type: "pie",

        label: {
          show: false,
          opacity: 1,
          fontSize: fontSizeRem(14),
          lineHeight: 20,
          textStyle: {
            fontSize: fontSizeRem(14),
            color: "#fff",
          },
        },
        labelLine: {
          length: 30,
          length2: 30,
        },
        startAngle: -30, //起始角度，支持范围[0, 360]。
        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["40%", "60%"],
        //   center: ["30%", "50%"],
        center: ["40%", "50%"],
        data: optionsData,
        itemStyle: {
          opacity: 0,
        },
      });
      let data = [
        {
          name: "楼宇",
          value: "30%",
        },
        {
          name: "工业",
          value: "30%",
        },
        {
          name: "其他",
          value: "40%",
        },
      ];
      // 准备待返回的配置项，把准备好的 legendData、series 传入。
      let option = {
        legend: {
          show: true,
          tooltip: {
            show: false,
          },
          orient: "vertical",
          data: data,
          top: "center",
          itemGap: 14,
          itemHeight: 8,
          itemWidth: 17,
          right: "2%",
          textStyle: {
            color: "#fff",
            fontSize: fontSizeRem(12),
          },
          formatter: function (name) {
            let res = data.filter((v) => v.name === name);
            res = res[0] || {};
            let unit = res.unit || "";
            return name + "    " + res.value + unit;
          },
        },
        animation: false,
        tooltip: {
          show: false,
          formatter: (params) => {
            if (
              params.seriesName !== "mouseoutSeries" &&
              params.seriesName !== "pie2d"
            ) {
              return `${params.seriesName
                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
                }`;
            }
          },
          textStyle: {
            fontSize: fontSizeRem(14),
          },
        },
        title: {
          x: "center",
          top: "20",
          textStyle: {
            color: "#fff",
            fontSize: fontSizeRem(22),
          },
        },
        // backgroundColor: "#0E3567",
        labelLine: {
          show: false,
          lineStyle: {
            color: "#7BC0CB",
          },
          normal: {
            show: true,
            length: 10,
            length2: 10,
          },
        },
        label: {
          show: false,
          // position: "outside",
          // formatter: "{b} \n{d}%",
          // textStyle: {
          //   color: "#fff",
          //   fontSize: "14px",
          // },
        },
        xAxis3D: {
          min: -1,
          max: 1,
        },
        yAxis3D: {
          min: -1,
          max: 1,
        },
        zAxis3D: {
          min: -1,
          max: 1,
        },
        grid3D: {
          show: false,
          boxHeight: 0.01,
          //top: '30%',
          bottom: "50%",
          left: "-7%",
          // environment: "rgba(255,255,255,0)",
          viewControl: {
            distance: 180,
            alpha: 25,
            beta: 60,
          },
        },
        series: series,
      };
      this.defineEcharts("ynflzb", option);
    },
    initMap() {
      //后端返回的数据
      var data = [
        {
          name: "济南市",
          value: 1,
          coord: [117.000923, 36.675807],
        },
        {
          name: "青岛市",
          value: 2,
          coord: [120.382639, 36.067082],
        },
        {
          name: "淄博市",
          value: 3,
          coord: [118.059134, 36.804685],
        },
        {
          name: "枣庄市",
          value: 4,
          coord: [117.557964, 34.856424],
        },
        {
          name: "东营市",
          value: 5,
          coord: [118.674767, 37.434751],
        },
        {
          name: "烟台市",
          value: 6,
          coord: [121.447935, 37.463822],
        },
        {
          name: "潍坊市",
          value: 7,
          coord: [119.161756, 36.706774],
        },
        {
          name: "济宁市",
          value: 8,
          coord: [116.587245, 35.415393],
        },
        {
          name: "泰安市",
          value: 9,
          coord: [117.089415, 36.188078],
        },
        {
          name: "威海市",
          value: 10,
          coord: [122.120419, 37.513068],
        },
        {
          name: "日照市",
          value: 11,
          coord: [119.526888, 35.416377],
        },
        {
          name: "临沂市",
          value: 12,
          coord: [118.356448, 35.104672],
        },
        {
          name: "德州市",
          value: 13,
          coord: [116.357465, 37.434093],
        },
        {
          name: "聊城市",
          value: 14,
          coord: [115.986869, 36.455829],
        },
        {
          name: "滨州市",
          value: 15,
          coord: [118.016974, 37.383542],
        },
        {
          name: "菏泽市",
          value: 16,
          coord: [115.469381, 35.246531],
        },
      ];
      var chartDom = document.getElementById("map");
      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      //获取山东地图数据。
      $.get(
        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
        function (geojson) {
          echarts.registerMap("山东", geojson);
          let option = {
            series: [
              {
                tooltip: {
                  trigger: "item",
                  // show: false,
                },
                name: "山东",
                type: "map",
                map: "山东",
                boxDepth: 60, //地图倾斜度
                regionHeight: 6, //地图厚度
                aspectScale: 0.9, //地图长宽比
                emphasis: {
                  itemStyle: {
                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
                    borderWidth: 2, // 高亮时的边框宽度
                  },
                  label: {
                    fontSize: 12, // 选中地图文字字号和字体颜色
                    color: "#fff",
                  },
                },
                label: {
                  show: true, //是否显示市
                  formatter: function (params) {
                    var name = params.name;
                    var value = params.value;
                    var text = ` {fline|${value}}\n{tline|${name}} `;
                    return text;
                  },
                  textStyle: {
                    color: "#000", //文字颜色
                    fontSize: 16, //文字大小
                    fontFamily: "微软雅黑",
                    // backgroundColor: {
                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
                    // },
                    // padding: [15, 20],
                  },
                  rich: {
                    fline: {
                      padding: [0, 35],
                      color: "#FDCC00",
                      fontSize: 14,
                      fontWeight: 600,
                    },
                    tline: {
                      padding: [0, 27],
                      color: "#fff",
                      fontSize: 12,
                    },
                  },
                },
                itemStyle: {
                  opacity: 0.8, // 透明度
                  borderWidth: 2, //分界线宽度
                  borderColor: "#0699E4", //分界线颜色
                  areaColor: {
                    x: 0.5,
                    y: 0.7,
                    r: 0.5,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(20,110,230,0.4)",
                      },
                      {
                        offset: 1,
                        color: "rgba(6,33,121,0.4)",
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
                groundplane: {
                  show: true,
                },
                data: data,
                z: 999,
                shading: "realistic",
                // 真实感材质相关配置 shading: 'realistic'时有效
                realisticMaterial: {
                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                  roughness: 0.8, // 调整光照模型的粗糙度
                  metalness: 0.0, // 调整金属感，0.0 为非金属
                  roughnessAdjust: 0,
                },
                viewControl: {
                  distance: 90, // 地图视角 控制初始大小
                  rotateSensitivity: 0, // 旋转
                  zoomSensitivity: 1.5, // 缩放
                },
                zoom: 1.25,
              },
            ],
            animation: true,
          };

          myChart.setOption(option);
          myChart.on("click", chartClick);
          //点击地图区域事件
          function chartClick(param) {
            console.log(param);
            myChart.setOption(option, false);
            window.addEventListener("resize", function () {
              myChart.resize();
            });
            // var selectedPro = param.name;
            // if (!cityProper[selectedPro]) {
            //   option.series.splice(1);
            //   option.legend = null;
            //   option.visualMap = null;
            //   myChart.setOption(option, true);
            //   return;
            // }
            //获取点击区域数据
            // $.get(cityProper[selectedPro], function (geojson) {
            //   echarts.registerMap(selectedPro, geojson);
            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
            //   option.series[0] = {
            //     name: "",
            //     type: "map",
            //     map: selectedPro,
            //     boxDepth: 80, //地图倾斜度
            //     regionHeight: 5, //地图厚度
            //     itemStyle: {
            //       normal: {
            //         label: {
            //           show: true,
            //         },
            //       },
            //       emphasis: {
            //         label: {
            //           show: true,
            //         },
            //       },
            //     },
            //     groundplane: {
            //       show: false,
            //     },
            //     data: data,
            //     shading: "realistic",
            //     // 真实感材质相关配置 shading: 'realistic'时有效
            //     realisticMaterial: {
            //       detailTexture: "#fff", // 纹理贴图
            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
            //       metalness: 0, // 0材质是非金属 ，1金属
            //       roughnessAdjust: 0,
            //     },
            //     viewControl: {
            //       distance: 30, // 地图视角 控制初始大小
            //       rotateSensitivity: 1, // 旋转
            //       zoomSensitivity: 1, // 缩放
            //     },
            //   };
            //   myChart.setOption(option);
            // });
          }
        }
      );
    },
    //用户资源分布情况
    initfbqk() {
      // mock 数据
      const dataArr = {
        xdata: ['济南', '烟台', '威海', '青岛', '潍坊', '临沂', '济宁', '德州', '聊城', '泰安', '菏泽', '枣庄', '淄博', '莱芜', '东营', '日照', '滨州'],
        disinfeced: [32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19, 30],
      }

      const grid = { top: '20%', left: '5%', right: '3%', bottom: '10%' }
      // xAxis
      const xAxis = {
        axisTick: { show: true },
        axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
        axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
        data: dataArr.xdata
      }

      // yAxis
      const yAxis = {
        type: "value",
        name: "单位:kWh",
        splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
        axisLine: { show: false, lineStyle: { color: "#fff" } },
        axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
      }
      // series
      const series = [
        {
          z: 2,
          name: '底部',
          type: 'pictorialBar',
          data: [1, 1, 1, 1, 1, 1, 1, 1],
          symbol: 'diamond',
          symbolOffset: [0, '50%'],
          symbolSize: [6, 4],
          itemStyle: {
            color: {
              type: 'linear',
              x: 0, x2: 1, y: 0, y2: 0,
              colorStops: [{ offset: 0, color: 'rgba(27, 126, 242, 1)' }, { offset: 0.5, color: 'rgba(27, 126, 242, 1)' }, { offset: 0.5, color: 'rgba(27, 126, 242, .7)' }, { offset: 1, color: 'rgba(27, 126, 242, 1)' }]
            }
          },
        }, {
          z: 3,
          name: '上部1',
          type: 'pictorialBar',
          symbolPosition: 'end',
          data: dataArr.disinfeced,
          symbol: 'diamond',
          symbolOffset: [0, '-50%'],
          symbolSize: [6, 4],
          itemStyle: {
            borderColor: '#28F1FA',
            borderWidth: 2,
            color: '#28F1FA'
          },
        }, {
          z: 1,
          stack: '总量',
          type: 'bar',
          name: '电费',
          barWidth: 30,
          // barGap: '-100%',
          data: dataArr.disinfeced,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0, x2: 1, y: 0, y2: 0,

              colorStops: [{ offset: 0, color: 'rgba(27, 126, 242, .7)' }, { offset: 0.5, color: 'rgba(27, 126, 242, .5)' }, { offset: 0.5, color: 'rgba(27, 126, 242, .5)' }, { offset: 1, color: 'rgba(27, 126, 242, .7)' }]
            }
          },
        }]
      let option = { xAxis, yAxis, series, grid }
      this.defineEcharts("yhzyfbqk", option);
    },
  },
  mounted() {
    this.defineEcharts("ssfhzs", this.option);
    this.defineEcharts("ynl", this.option1);
    this.initYhhyzb();
    this.initYnflzb();
    this.initMap();
    this.initfbqk();
  },
};
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #fff;

  .title {
    width: 100%;
    height: 76px;
    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    p {
      width: 527px;
      height: 47px;
      font-size: 44px;
      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
      font-weight: 600;
      line-height: 47px;
      letter-spacing: 3px;
      color: #fff;
      margin-left: -60px;
    }

    img:nth-of-type(1) {
      width: 231px;
      height: 59px;
    }

    img:nth-of-type(2) {
      width: 158px;
      height: 28px;
    }
  }

  .containter {
    width: 100%;
    height: 967px;
    // height: 89.53vh;
    display: flex;
    position: relative;
    justify-content: space-between;

    .left {
      width: 436px;
      height: 100%;

      .ztynqk {
        height: 294px;
        // height: 27.2vh;
        width: 100%;
        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
        background-size: cover;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
          position: absolute;
          left: 160px;
          width: 144px;
          height: 36px;
          font-size: 18px;
          font-family: "Source Han Sans";
          font-weight: 700;
          color: rgba(255, 255, 255, 0.87);
          line-height: 36px;
        }

        .typeBox {
          list-style: none;
          display: flex;
          position: absolute;
          top: 54px;

          li {
            width: 39px;
            height: 21px;
            background: rgba(29, 29, 29, 0.5);
            border-radius: 2px 2px 2px 2px;
            font-size: 14px;
            border: 1px solid #666666;
            text-align: center;
            margin: 2.5px;
            cursor: pointer;
          }

          .active {
            background: rgba(10, 167, 255, 0.3);
            border: 1px solid #0aa7ff;
          }
        }

        .bottom {
          margin-top: 100px;
          display: flex;
          flex-wrap: wrap;

          .bottomBox {
            display: flex;
            align-items: center;
            width: 180px;
            margin: 10px;

            img {
              width: 72px;
              height: 72px;
            }

            div {
              p:nth-of-type(1) {
                width: 120px;
                margin-bottom: 10px;
                margin-top: 5px;
                font-size: 14px;
                font-family: " AlibabaPuHuiTi";
                font-weight: 400;
              }

              span:nth-of-type(1) {
                font-size: 20px;
                font-family: "AlibabaPuHuiTi";
                font-weight: 700;
              }

              span:nth-of-type(2) {
                font-size: 14px;
                font-family: "AlibabaPuHuiTi";
                font-weight: 400;
                margin-left: 6px;
              }
            }
          }
        }
      }

      .ssfhzs {
        height: 315px;
        // height: 29.1vh;
        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
        background-size: cover;
        margin-top: 6px;
        position: relative;

        .title {
          position: absolute;
          left: 160px;
          width: 144px;
          height: 36px;
          font-size: 18px;
          font-family: "Source Han Sans";
          font-weight: 700;
          color: rgba(255, 255, 255, 0.87);
          line-height: 36px;
        }

        .typeBox {
          list-style: none;
          display: flex;
          position: absolute;
          top: 54px;
          left: 50%;
          transform: translateX(-50%);

          li {
            width: 39px;
            height: 21px;
            background: rgba(29, 29, 29, 0.5);
            border-radius: 2px 2px 2px 2px;
            font-size: 14px;
            border: 1px solid #666666;
            text-align: center;
            margin: 2.5px;
            cursor: pointer;
          }

          .active {
            background: rgba(10, 167, 255, 0.3);
            border: 1px solid #0aa7ff;
          }
        }

        #ssfhzs {
          position: absolute;
          width: 100%;
          height: 200px;
          bottom: 10px;
        }
      }

      .ynl {
        height: 325px;
        // height: 30vh;
        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
        background-size: cover;
        margin-top: 6px;

        position: relative;

        .title {
          position: absolute;
          left: 190px;
          width: 144px;
          height: 36px;
          font-size: 18px;
          font-family: "Source Han Sans";
          font-weight: 700;
          color: rgba(255, 255, 255, 0.87);
          line-height: 36px;
        }

        .typeBox {
          list-style: none;
          display: flex;
          position: absolute;
          top: 54px;
          left: 50%;
          transform: translateX(-50%);

          li {
            width: 39px;
            height: 21px;
            background: rgba(29, 29, 29, 0.5);
            border-radius: 2px 2px 2px 2px;
            font-size: 14px;
            border: 1px solid #666666;
            text-align: center;
            margin: 2.5px;
            cursor: pointer;
          }

          .active {
            background: rgba(10, 167, 255, 0.3);
            border: 1px solid #0aa7ff;
          }
        }

        #ynl {
          position: absolute;
          width: 100%;
          height: 200px;
          bottom: 10px;
        }
      }
    }

    .right {
      width: 436px;
      height: 100%;

      .yhhyzb {
        height: 294px;
        width: 100%;
        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
        background-size: cover;
        position: relative;

        .title {
          position: absolute;
          left: 160px;
          width: 144px;
          height: 36px;
          font-size: 18px;
          font-family: "Source Han Sans";
          font-weight: 700;
          color: rgba(255, 255, 255, 0.87);
          line-height: 36px;
        }

        #yhhyzb {
          width: 100%;
          height: 100%;
        }
      }

      .ynflzb {
        height: 294px;
        width: 100%;
        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
        background-size: cover;
        position: relative;
        margin-top: 6px;

        .title {
          position: absolute;
          left: 160px;
          width: 144px;
          height: 36px;
          font-size: 18px;
          font-family: "Source Han Sans";
          font-weight: 700;
          color: rgba(255, 255, 255, 0.87);
          line-height: 36px;
        }

        #ynflzb {
          width: 100%;
          height: 100%;
        }

        .pic {
          width: 300px;
          position: absolute;
          height: 150px;
          top: 100px;
          left: 40px;
        }
      }

      .qyydlpm {
        height: 353px;
        width: 100%;
        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
        background-size: cover;
        position: relative;
        margin-top: 6px;

        .title {
          position: absolute;
          left: 160px;
          width: 144px;
          height: 36px;
          font-size: 18px;
          font-family: "Source Han Sans";
          font-weight: 700;
          color: rgba(255, 255, 255, 0.87);
          line-height: 36px;
        }

        .list {
          list-style: none;
          height: 300px;
          width: 100%;
          float: left;
          margin-top: 50px;

          li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px 0 30px;
            box-sizing: border-box;
            margin: 9px;

            p:nth-of-type(1) {
              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
              width: 24px;
              height: 16px;
              line-height: 16px;
              background: rgba(34, 23, 23, 0.1);
              border-radius: 0px 0px 0px 0px;
              opacity: 1;
              text-align: center;
              border: 1px solid #b1b1b1;
              background-size: cover;
            }

            p:nth-of-type(2) {
              width: 190px;
              height: 12px;
              font-size: 14px;
              font-family: "AlibabaPuHuiTi";
              font-weight: 400;
              color: rgba(255, 255, 255, 0.8);
              line-height: 12px;
            }

            p:nth-of-type(3) {
              width: 27px;
              height: 12px;
              font-size: 14px;
              font-family: "AlibabaPuHuiTi";
              font-weight: 500;
              color: rgba(255, 255, 255, 0.8);
              line-height: 12px;
            }
          }
        }
      }
    }

    .footer {
      position: absolute;
      width: 994px;
      height: 325px;
      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
      background-size: cover;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);

      .yhzyfbqk {
        width: 100%;
        height: 100%;
        position: relative;

        .title {
          position: absolute;
        }

        #yhzyfbqk {
          width: 100%;
          height: 100%;
        }
      }
    }

    #map {
      width: 994px;
      position: absolute;
      height: 627px;
      background: url(../assets/客户侧总体用能情况分析/背景.png);
      background-size: cover;
      left: 50%;
      transform: translateX(-50%);
      overflow: hidden;
    }

    .tooltip {
      position: absolute;
      width: 281px;
      height: 170px;
      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
      background-size: cover;
      z-index: 1;
      top: 418px;
      right: 542px;
      padding: 14px;
      box-sizing: border-box;
      padding-top: 36px;

      img {
        position: absolute;
        width: 11px;
        height: 11px;
        top: 42px;
        right: 14px;
        cursor: pointer;
        margin-right: 14px;
      }

      .title1 {
        height: 27px;
        font-size: 22px;
        font-family: "YouSheBiaoTiHei";
        font-weight: 400;
        color: #60edff;
        line-height: 25px;
        margin-bottom: 10px;
      }

      .txt {
        display: flex;
        flex-direction: column;
        width: 100%;
        font-family: "AlibabaPuHuiTi";

        div {
          display: flex;
          align-items: center;
          margin: 10px;
          margin-left: 0;

          span:nth-of-type(1) {
            width: 89px;
            height: 21px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.87);
            line-height: 20px;
          }

          p {
            width: 143px;
            height: 21px;
            font-size: 30px;
            font-weight: 700;
            line-height: 20px;

            span {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
