<template>
  <div class="overview m100">
    <div class="overview-left-box">
      <!--  实时负荷-->
      <div class="title">
        <span>实时负荷</span>
      </div>
      <div class="margin10 box-bg" id="realTimeLoad"></div>
      <!--  当日累计用电量-->
      <div class="title margin10">
        <span>当日累计用电量</span>
      </div>
      <div class="margin10 box-bg" id="dailyElectricityConsumption"></div>
      <!--  负荷分类-->
      <div class="title margin10">
        <span>负荷分类</span>
      </div>
      <div class="margin10 box-bg"></div>
    </div>
    <div class="overview-right-box">
      <!--  空调负荷 -->
      <div class="title">
        <span>空调负荷</span>
      </div>
      <div class="margin10 box-bg"></div>
      <!--  展陈负荷-->
      <div class="title margin10">
        <span>展陈负荷</span>
      </div>
      <div class="margin10 box-bg"></div>
      <!--  配电回路排名-->
      <div class="title margin10">
        <span>配电回路排名</span>
      </div>
      <div class="margin10 box-bg"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
//实时负荷
function getRealTimeLoad() {
  let myChart = echarts.init(document.getElementById("realTimeLoad"));
  const option = {
    // backgroundColor: "#05224d",
    tooltip: {},
    grid: {
      top: "18%",
      left: "4%",
      right: "4%",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            // type:'dashed',
            color: "rgba(1, 39, 37, .3)",
            // color: "#233e64",
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "#DDFFFD",
            margin: 40,
          },
        },

        axisTick: { show: false },
        boundaryGap: true,
        data: ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00"],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位:kW/h",
        nameTextStyle: {
          color: "#DDFFFD",
        },
        splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "rgba(1, 39, 37, 0.30)",
          },
        },
        axisLine: { show: false },
        axisLabel: {
          textStyle: {
            color: "#DDFFFD",
          },
        },
        axisTick: { show: false },
      },
    ],
    series: [
      {
        name: "实时负荷",
        type: "line",
        symbol: "circle",
        symbolSize: 6,
        // yAxisIndex: 1, // 与第二个 y 轴关联
        itemStyle: {
          color: "#44C558",
        },
        lineStyle: {
          width: 2,
        },
        data: [90, 70, 40, 70, 80, 65, 73], // 折线图的数据
      },
    ],
  };
  myChart.setOption(option);
}
//当日累计用电量
function getDailyElectricityConsumption() {
  const offsetX = 10; //bar宽
  const offsetY = 5; //倾斜角度
  // 绘制左侧面
  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x, shape.y]; // 左侧面 右上点
      const c1 = [shape.x - offsetX, shape.y - offsetY + 5]; // 左侧面  左上点
      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY + 5]; // 左侧面 左下点
      const c3 = [xAxisPoint[0], xAxisPoint[1] + 5]; // 左侧面 右下点
      ctx
        .moveTo(c0[0], c0[1])
        .lineTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .closePath();
    },
  });
  // 绘制右侧面
  const CubeRight = 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] + 5]; //右侧面 左下点
      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY + 5]; //右侧面  右下点
      const c4 = [shape.x + offsetX, shape.y - offsetY + 5]; //右侧面 右上点
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
    },
  });
  // 绘制顶面
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const c1 = [shape.x, shape.y + 5]; //顶部菱形下点
      const c2 = [shape.x + offsetX, shape.y - offsetY + 5]; //顶部菱形右点
      const c3 = [shape.x, shape.y - offsetX + 5]; //顶部菱形上点
      const c4 = [shape.x - offsetX, shape.y - offsetY + 5]; //顶部菱形左点
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
    },
  });
  // 注册三个面图形
  echarts.graphic.registerShape("CubeLeft", CubeLeft);
  echarts.graphic.registerShape("CubeRight", CubeRight);
  echarts.graphic.registerShape("CubeTop", CubeTop);
  let xAxisData = [
    "北京",
    "上海",
    "天津",
    "南京",
    "深圳",
    "重庆",
    "青岛",
    "大连",
    "沈阳",
    "哈尔滨",
  ];
  let seriesData = [100, 200, 300, 400, 200, 250, 360, 250, 340, 280];
  // 绿色渐变
  // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
  // 蓝色渐变
  let colorArr = [
    ["#71ddff"],
    ["rgba(12, 149, 198, 1)", "rgba(13,8,16,0)"],
    ["rgba(34, 188, 255, 1)", "rgba(14,156,185,0)"],
  ];
  let myChart = echarts.init(
    document.getElementById("dailyElectricityConsumption")
  );
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params, ticket, callback) {
        const item = params[1];
        return item.name + " : " + item.value;
      },
    },
    grid: {
      left: "5%",
      right: "10%",
      top: "15%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: xAxisData,
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: "rgba(255, 255, 255, 0.60)",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 14,
        interval: 0,
        // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
        formatter: function (value) {
          const length = value.length;
          if (length > 3) {
            const start = Math.floor(length / 2);
            const str =
              value.slice(0, start) + "\n" + value.slice(start, length);
            return str;
          }
          return value;
        },
      },
    },
    yAxis: {
      type: "value",
      minInterval: 1,
      // y轴（竖直线）
      axisLine: {
        show: false,
      },
      // y轴横向 标线
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.16)",
        },
      },
      // y轴刻度线
      axisTick: {
        show: false,
      },
      // y轴文字
      axisLabel: {
        fontSize: 14,
        color: "rgba(255, 255, 255, 0.60)",
      },
    },
    series: [
      {
        type: "custom",
        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: true,
            position: "top",
            formatter: (e) => {
              return e.value;
            },
            fontSize: 16,
            color: "#43C4F1",
            offset: [0, -5],
          },
        },
        itemStyle: {
          color: "transparent",
        },
        tooltip: {},
        data: seriesData,
      },
    ],
  };
  myChart.setOption(option);
}
//加载完dom执行
onMounted(() => {
  //实时负荷
  getRealTimeLoad();
  //当日累计用电量
  getDailyElectricityConsumption()
});
</script>

<style lang="scss" scoped>
.overview {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  &-right-box,
  &-left-box {
    height: 100%;
    width: vw(450);
  }
  &-right-box {
    padding-right: 2.375rem;
  }
  &-left-box {
    padding-left: 2.375rem;
  }
}
</style>
