<template>
  <div class="page m100">
    <div class="page-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" id="loadClassification"></div>
    </div>
    <div class="page-right-box">
      <!--  空调负荷 -->
      <div class="title" >
        <span>空调负荷</span>
      </div>
      <div class="margin10 box-bg" id="airConditioningLoad"></div>
      <!--  展陈负荷-->
      <div class="title margin10">
        <span>展陈负荷</span>
      </div>
      <div class="margin10 box-bg" id="exhibitionLoad"></div>
      <!--  配电回路排名-->
      <div class="title margin10">
        <span>配电回路排名</span>
      </div>
      <div class="margin10 box-bg" id="ranking"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const getImageUrl=(name)=>{
  return new URL(name, import.meta.url).href
}
//实时负荷
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",
        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 - 7, shape.y];
      const c1 = [shape.x + 7, shape.y];
      const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
      const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
      ctx
        .moveTo(c0[0], c0[1])
        .lineTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .closePath();
      ctx.stroke();
    },
  });
  // 绘制右侧面
  const CubeRight = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c1 = [shape.x + 7, shape.y];
      const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
      const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
      const c4 = [shape.x + 7 + 7, shape.y - 5];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
      ctx.stroke();
    },
  });
  // 绘制顶面
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const c1 = [shape.x - 7, shape.y];
      const c2 = [shape.x + 8, shape.y];
      const c3 = [shape.x + 15, shape.y - 5];
      const c4 = [shape.x - 2, shape.y - 5];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
      ctx.stroke();
    },
  });
  // 注册三个面图形
  echarts.graphic.registerShape("CubeLeft", CubeLeft);
  echarts.graphic.registerShape("CubeRight", CubeRight);
  echarts.graphic.registerShape("CubeTop", CubeTop);
  let xAxisData = [
    "08:00",
    "09:00",
    "10:00",
    "11:00",
    "12:00",
    "13:00",
    "14:00",
    "15:00",
    "16:00",
    "17:00",
  ];
  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 = [
    ["rgba(0, 170, 193, 1)"],
    ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
    ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
  ];
  let myChart = echarts.init(
    document.getElementById("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: "4%",
      right: "5%",
      top: "18%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: xAxisData,
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          type: "solid",
          color: "rgba(255, 255, 255, 0.20)",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "rgba(221, 255, 253, 1)",
        fontSize: 14,
        interval: 1,
        // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
        // formatter: function (value) {
        //   const length = value.length;
        //   if (length > 3) {
        //     const start = Math.floor(length / 2);
        //     const str =
        //       value.slice(0, start) + "\n" + value.slice(start, length);
        //     return str;
        //   }
        //   return value;
        // },
      },
    },
    yAxis: {
      type: "value",
      name: "单位:kW/h",
      nameTextStyle: {
        color: "#DDFFFD",
      },
      //   minInterval: 1,
      // y轴（竖直线）
      axisLine: {
        show: false,
      },
      // y轴横向 标线
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(1, 39, 37, 0.30)",
        },
      },
      // y轴刻度线
      axisTick: {
        show: false,
      },
      // y轴文字
      axisLabel: {
        fontSize: 14,
        color: "#DDFFFD",
      },
    },
    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: false,
            position: "top",
            formatter: (e) => {
              return e.value;
            },
            fontSize: 16,
            color: "#43C4F1",
            offset: [0, -5],
          },
        },
        itemStyle: {
          color: "transparent",
        },
        tooltip: {},
        data: seriesData,
      },
    ],
  };
  myChart.setOption(option);
}

//空调负荷
function drawAirConditioningLoad(){
  let myChart = echarts.init(document.getElementById('airConditioningLoad'))
  const option = {
    // backgroundColor: "#05224d",
    tooltip: {},
    grid: {
      top: "18%",
      left: "4%",
      right: "4%",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: [

      {
        type: "category",
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            // type:'dashed',
            color: "#557775"
            // color: "#233e64",
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "#DDFFFD",
            margin: 40,
          },

        },

        axisTick: { show: false },
        boundaryGap: true,
        data: ["09:00", "11:00", "13:00", "15:00", "17:00", "19:00"],
      },
    ],
    yAxis: [
      {
        type: "value",
        name:"单位:kW",
        nameTextStyle:{
          color: "#DDFFFD",
          align:"right",
        },
        min: 0,
        max: 2000,
        splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            type:'dashed',
            color: "rgba(1, 39, 37, 0.30)",
          },
        },
        axisLine: { show: false },
        axisLabel: {
          textStyle: {
            color: "#DDFFFD",
          },
        },
        axisTick: { show: false },
      },
    ],
    series: [
      {
        name: "异常流量",
        type: "line",
        smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 0,

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

            shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
            shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
        data: [500, 800, 900,1200, 1800, 1600],
      },
    ],
  };
  myChart.setOption(option)
}
// 展陈负荷
function drawExhibitionLoad(){
  let myChart = echarts.init(document.getElementById('exhibitionLoad'))
  const option = {
    // backgroundColor: "#05224d",
    tooltip: {},
    grid: {
      top: "18%",
      left: "4%",
      right: "4%",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: [

      {
        type: "category",
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            // type:'dashed',
            color: "#557775",
            // color: "#233e64",
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "#DDFFFD",
            margin: 40,
          },

        },

        axisTick: { show: false },
        boundaryGap: true,
        data: ["09:00", "11:00", "13:00", "15:00", "17:00", "19:00"],
      },
    ],
    yAxis: [
      {
        type: "value",
        name:"单位:kW",
        nameTextStyle:{
          color: "#DDFFFD",
          align:"right",
        },
        min: 0,
        max: 2000,
        splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            type:'dashed',
            color: "rgba(1, 39, 37, 0.30)",
          },
        },
        axisLine: { show: false },
        axisLabel: {
          textStyle: {
            color: "#DDFFFD",
          },
        },
        axisTick: { show: false },
      },
    ],
    series: [
      {
        name: "异常流量",
        type: "line",
        smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 0,

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

            shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
            shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
        data: [500, 800, 900,1200, 1800, 1600],
      },
    ],
  };
  myChart.setOption(option)

  }
//   配电回路排名
function drawRanking(){
  let myChart = echarts.init(document.getElementById('ranking'))
  let option = {
    grid: {
      left: "5%",
      right: "5%",
      bottom: "-10%",
      top: "8%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        return (
            params[0].name +
            "<br/>" +
            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
            params[0].seriesName +
            " : " +
            Number(
                (params[0].value.toFixed(4) / 10000).toFixed(2)
            ).toLocaleString() +
            " 万元<br/>"
        );
      },
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          padding: [0, 0, 10, -10],
          verticalAlign: "bottom",
          inside: true,
          show: true,
          textStyle: {
            color: "#fff",
            fontSize:"14"
          },
          formatter: function (value,index) {
            return "{a|TOP " +  (index+1) +
                "}" + "{b|" +  value +
                "}";
          },
          rich:{
              a:{
                width:45,
                // padding: [0, 8, 0,0],
                fontSize:"14",
                backgroundColor:{

                  image:getImageUrl('../../assets/images/rank-bg.png')
                }
              }
          }
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },

        data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"],
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          padding: [0, 0, 10, -10],
          verticalAlign: "bottom",
          inside: true,
          textStyle: {

          },
          formatter: function (value) {
            return "{a|" +  (value / 10000).toLocaleString() +
                "}" + "{b|kWh}";
          },
          rich:{
            a:{
              fontSize: "16",
              color:"rgba(0, 255, 240, 1)",
              padding:[0,6,0,0]
            },
            b:{
              color: "#fff",
              fontSize: "12",

            }

          }
        },
        data: [50000000, 22000000, 10000000, 5000000, 1],
      },
    ],
    series: [
      {
        name: "金额",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "rgba(29, 169, 153, 1)",
            },
            {
              offset: 1,
              color: "rgba(223, 243, 240, 1)",
            },
          ]),
        },
        barWidth: 8,
        data: [50000000, 22000000, 10000000, 5000000, 200],
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 10,
        barGap: "-115%",
        data: [50000000, 50000000, 50000000, 50000000, 50000000],
        itemStyle: {
          color: 'rgba(5, 33, 31, 0.32)',
        },
      },
    ],
  };
  myChart.setOption(option)
}
//负荷分类
function getLoadClassification() {
  var trafficWay = [
    {
      name: "三类项目",
      value: 20,
    },
    {
      name: "天分重点",
      value: 30,
    },
    {
      name: "集团重点",
      value: 50,
    },
  ];
  var total = 0;
  for (var i = 0; i < trafficWay.length; i++) {
    total += trafficWay[i].value;
  }

  var data = [];
  var color = ["rgba(1, 246, 139, 1)", "rgba(91, 250, 241,1)", "rgba(255, 221, 0, 1)"];
  for (var i = 0; i < trafficWay.length; i++) {
    data.push(
      {
        value: trafficWay[i].value,
        name: trafficWay[i].name,
        itemStyle: {
          normal: {
            borderWidth: 5,
            shadowBlur: 20,
            borderRadius: 10,
            borderColor: color[i],
            shadowColor: color[i],
          },
        },
      },
      {
        value: total * 0.04,
        name: "",
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            color: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
          },
        },
      }
    );
  }
  let myChart = echarts.init(document.getElementById("loadClassification"));
  let option = {
    color: color,
    title: [
      {
        text: "1694",
        x: "47%",
        y: "42%",
        textAlign: "center",
        textStyle: {
          fontFamily: "Verdana-Bold",
          fontSize: "24",
          fontWeight: "bold",
          color: "#FFF",
        },
      },
      {
        text: "kw",
        x: "56%",
        y: "45%",
        textAlign: "center",
        textStyle: {
          fontSize: "14",
          fontWeight: "100",
          color: "#FFF",
        },
      },
      {
        text: "总负荷",
        left: "49%",
        top: "55%",
        textAlign: "center",
        textStyle: {
          fontFamily: "MicrosoftYaHei",
          fontSize: "14",
          fontWeight: "100",
          color: "#fff",
        },
      },
    ],
    tooltip: {
      show: true,
    },
    series: [
      {
        name: "",
        type: "pie",
        clockWise: false,
        radius: [55, 59],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "outside",
              color: "#FFFFFF",
              fontSize: 16,
              formatter: function (params) {
                var percent = 0;
                // var total = 0
                // for (var i = 0; i < trafficWay.length; i++) {
                //   total += trafficWay[i].value
                // }
                percent = params.percent;
                // percent = ((params.value / total) * 100).toFixed(0)
                if (params.name !== "") {
                  return (
                    params.name +
                    "\n" +
                    `{a${params.dataIndex / 2}|` +
                    percent +
                    "%}"
                  );
                } else {
                  return "";
                }
              },
              textStyle: {
                rich: {
                  a0: {
                    color: "#36E461",
                    padding: [10, 0],
                    fontSize: 15,
                  },
                  a1: {
                    color: "#0BEFF9",
                    padding: [10, 0],
                    fontSize: 15,
                  },
                  a2: {
                    color: "#9429E1",
                    padding: [10, 0],
                    fontSize: 15,
                  },
                },
              },
            },
            labelLine: {
              length: 30,
              length2: 50,
              show: true,
              color: "#00ffff",
            },
          },
        },
        data: data,
      },
    ],
  };
  myChart.setOption(option);
}
//加载完dom执行
onMounted(() => {
  //实时负荷
  getRealTimeLoad();
  //当日累计用电量
  getDailyElectricityConsumption();
  // 空调负荷
  drawAirConditioningLoad();
  // 展陈负荷
  drawExhibitionLoad();
  // 配电回路排名
  drawRanking();
  //负荷分类
  getLoadClassification();
});
</script>

<style lang="scss" scoped>

</style>
