<script setup>
import {ref, onMounted} from "vue";
import * as echarts from "echarts";
// 各系统能耗概况
const systemTab = [{name: '空调'}, {name: '照明'}, {name: '展陈'}, {name: '消防'}, {name: '电梯'}]
const systemTabIndex = ref(0)
const systemLeftList = ref([
  {
    name: '今日用能峰值',
    value: '322',
  },
  {
    name: '本月用能峰值',
    value: '35422',
  }
])
const systemRightList = ref([
  [
    {
      name: '今日',
      value: '3122',
      unit:'kWh'
    },
    {
      name: '昨日',
      value: '9400',
      unit:'kWh'
    },
    {
      name:'同比',
      value:'-201',
      unit:'%'
    }
  ],//日
  [
    {
      name: '本月',
      value: '3122',
      unit:'kWh'
    },
    {
      name: '上月',
      value: '9400',
      unit:'kWh'
    },
    {
      name:'同比',
      value:'-201',
      unit:'%'
    }
  ],//月
  [
    {
      name: '今年',
      value: '3122',
      unit:'kWh'
    },
    {
      name: '去年',
      value: '9400',
      unit:'kWh'
    },
    {
      name:'同比',
      value:'-201',
      unit:'%'
    }
  ]//年
])
const selectSystemTab = (index) => {
  systemTabIndex.value = index
}

// 能耗总量echarts
const drawTotalChart = () => {
  let myChart = echarts.init(document.getElementById('totalEnergy'))
  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: ["11-01", "11-02", "11-03", "11-04", "11-05", "11-07", "11-08", "11-09", "11-10", "11-11", "11-12", "11-13", "11-14"],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位:kW",
        // padding:[0,10,0,0],
        nameTextStyle: {
          color: "#DDFFFD",
          align: "center",
          padding: [0, 15, 0, 0],
        },
        min: 0,
        max: 500,
        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: [100, 200, 300, 282, 283, 166, 100, 200, 300, 282, 283, 166, 283],
      },
    ],
  };
  myChart.setOption(option)
}
// 定额管理charts
const drawManagement = () => {
  let myChart = echarts.init(document.getElementById('management'))
  const option = {
    // backgroundColor: "#05224d",
    tooltip: {},
    legend: {
      show: true,
      icon: 'rect',
      right: '10',
      top: '5',
      layout: 'vertical',
      itemHeight: '10',
      // itemWidth:'10',
      textStyle: {
        color: "rgba(221, 255, 253, 1)"
      }
    },
    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: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位:kgce/m²",
        // padding:[0,10,0,0],
        nameTextStyle: {
          color: "#DDFFFD",
          align: "middle",
          padding: [0, -30, 0, 0],
        },
        min: 0,
        max: 18,
        splitNumber: 6,
        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: "单位建筑面积综合能耗",
        markLine: { //阈值
          //最大值和最小值
          data: [
            {
              yAxis: 9,
              label: {
                show: false
              },
              lineStyle: {
                width: 1,
                color: "rgba(255, 221, 0, 1)",
                // symbol:"none",
              },
            },
          ],
          symbol: ["none", "none"],
        },
        type: "line",
        smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 0,
        itemStyle: {
          color: "rgba(221, 255, 253, 1)",
        },

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

          shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
        data: [5, 7, 9, 6, 2, 5, 4],
      },
    ],
  };
  myChart.setOption(option)
}
// 能效流向
const drawEnergyFlow = () => {
  let myChart = echarts.init(document.getElementById('energyFlow'))
  let sourceData = [

    {
      name: "电",
      nameValue: 1562,
      valueUnit: "KWh",
    },
    {
      name: "空调",
      nameValue: 562,
      valueUnit: "kWh",
    },
    {
      name: "照明",
      nameValue: 490,
      valueUnit: "kWh",
    },
    {
      name: "电梯",
      nameValue: 510,
      valueUnit: "kWh",
    },
  ];
  let sangjiColor = [
    'rgba(91, 250, 241, 1)',
    'rgba(91, 250, 241, 1)',
    'rgba(91, 250, 241, 1)',
    'rgba(91, 250, 241, 1)'
  ];
  let itemStyleSource = [];
  for (let d = 0; d < sourceData.length; d++) {
    if (sourceData[d].name == "电") {
      sourceData[d].label = {
        position: 'right'
      };
    }
    sourceData[d].itemStyle = {
      color: sangjiColor[d],
    };
    itemStyleSource.push(sourceData[d]);
  }

  let option = {
    series: [
      {
        type: "sankey",
        layout: "none",
        top: "5%",
        bottom: "4%",
        left: "6%",
        right: "5%",
        nodeWidth: '13',
        // nodeAlign:'right',
        focusNodeAdjacency: "allEdges",
        data: itemStyleSource,
        links: [
          {
            source: "电",
            target: "空调",
            value: 8,
          },
          {
            source: "电",
            target: "照明",
            value: 8,
          },
          {
            source: "电",
            target: "电梯",
            value: 8,
          },

        ],
        label: {
          position: "left",
          color: "#fff",
          fontSize: 14,
          formatter: function (params) {

            if (params.dataIndex == 0) {
              return (
                  "{a|" +
                  params.data.name +
                  "}\n" + "{b|" +
                  params.data.nameValue + "}" +
                  " " +
                  params.data.valueUnit
              );
            } else {
              return (
                  "{name|" +
                  params.data.name +
                  "}" + "{value|" +
                  params.data.nameValue + "}" +
                  // " " +
                  params.data.valueUnit
              );
            }

          },
          rich: {
            a: {
              padding: [0, 15, 10, 0],
              fontSize: "14"
            },
            b: {
              color: "rgba(91, 250, 241, 1)",
              fontWeight: "600",
              fontSize: "16",
            },
            name: {
              fontSize: 14,
              // padding: [10, 0, 0, 0],
            },
            value: {
              color: "rgba(91, 250, 241, 1)",
              fontWeight: "600",
              fontSize: "16",
              padding: [0, 10, 0, 10]
            }

          },
        },
        lineStyle: {
          color: "source",
          // curveness: 0.5,
        },
        itemStyle: {
          borderWidth: 1,
          borderColor: "transparent",
        },
      },
    ],
  };
  myChart.setOption(option)
}
// dom加载
onMounted(() => {
  // 能耗总量
  drawTotalChart()
  // 定额管理
  drawManagement()
  // 能效流向
  drawEnergyFlow()
})
</script>

<template>
  <div class="page m100">
    <div class="page-left-box">
      <!--  能耗总量-->
      <div class="title">
        <span>能耗总量</span>
        <p>
          <span class="month">月</span>
          <span class="day">日</span>
        </p>
      </div>
      <div id="totalEnergy" class="margin10 box-bg"></div>
      <!--  能效对标（定额管理）-->
      <div class="title margin10">
        <span>能效对标（定额管理）</span>
        <p>
          <span class="year">年</span>
          <span class="month">月</span>
        </p>
      </div>
      <div id="management" class="margin10 box-bg">

      </div>
      <!--  能效流向 -->
      <div class="title margin10">
        <span>能效流向</span>
      </div>
      <div id="energyFlow" class="margin10 box-bg"></div>
    </div>
    <div class="page-right-box">
      <!--  各系统能耗概况 -->
      <div class="title">
        <span>各系统能耗概况</span>
      </div>
      <div id="airConditioningLoad" class="margin10 box-bg">
        <ul class="system-tab">
          <li v-for="(item,index) in systemTab" :class="index==systemTabIndex?'tab-select':''"
              @click="selectSystemTab(index)">
            <span>{{ item.name }}</span>
          </li>
        </ul>
        <div class="system-content">
          <div class="system-content-left">
            <div v-for="(item,index) in systemLeftList" class="system-content-left-item">
              <p class="system-content-left-item-p1">{{ item.name }}</p>
              <p class="system-content-left-item-p2">{{ item.value }}</p>
            </div>
          </div>
          <div class="system-content-right">
            <div class="system-content-right-item" v-for="(item,index) in systemRightList">
              <ul  class="system-content-right-item-title">
                <li v-for="(s,i) in item">{{s.name}}</li>
              </ul>
              <div class="system-content-right-item-box">
                  <span v-for="v in item" :class="v.unit==='%'?'yoy':''">{{v.value}} <span class="unit">{{v.unit}}</span></span>

              </div>
            </div>


          </div>
        </div>
      </div>
      <!--  复费率-->
      <div class="title margin10">
        <span>复费率</span>
        <p>
          <span class="year">年</span>
          <span class="month">月</span>
          <span class="day">日</span>
        </p>
      </div>
      <div id="exhibitionLoad" class="margin10 box-bg"></div>
      <!--  电费电价-->
      <div class="title margin10">
        <span>电费电价</span>
      </div>
      <div id="ranking" class="margin10 box-bg"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.system-tab {
  display: flex;
  justify-content: space-evenly;
  padding-top: .7rem;
  box-sizing: border-box;

  .tab-select {
    background-image: url("@/assets/images/air-tab-select.png");
  }

  li {
    background-image: url("@/assets/images/air-tab.png");
    cursor: pointer;
    color: rgba(221, 255, 253, 1);
    background-size: 100% 100%;
    font-size: .8rem;
    padding: .2rem 1.1rem;
  }
}

.system-content {
  height: 83%;
  width: 100%;
  display: flex;
  justify-content: space-evenly;

  &-left {
    width: 6.875rem;
    height: 100%;
    display: flex;
    align-content: space-evenly;
    flex-wrap: wrap;

    &-item {
      height: 40%;
      width: 100%;
      background-image: url("@/assets/images/system-value-bg.png");
      background-size: 100% 100%;

      &-p1 {
        height: 29%;
        text-align: center;
        font-size: .875rem;
        color: rgba(221, 255, 253, 1);
      }

      &-p2 {
        height: 70%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        font-size: 20px;
        color: rgba(91, 250, 241, 1);
      }
    }
  }

  &-right {
    width: 15.7rem;
    height: 100%;
    //background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;
    &-item {
      height: 30%;
      //background-color: #000;
      width: 100%;

      &-title{
        display: flex;
        justify-content: space-between;
        font-size: .8rem;
        padding: 0 .5rem;
        box-sizing: border-box;
      }
      &-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 .5rem;
        box-sizing: border-box;
        font-weight: bold;
        background-image: url("@/assets/images/system-box.png");
        background-size: 100% 100%;
        height: 65%;
        width: 100%;
        color: rgba(255,255,255,1);
        .yoy{
          color:rgba(1, 246, 139, 1);
        }

      }
    }
  }

  //background-color: #fff;
}
</style>