<template>
  <div class="app-container">
    <div class="container">
      <div class="dataView">
        <div class="electricityConsumption">
          <div class="ydtj">
            <div class="tj-item">
              <div class="title">当日用电量</div>
              <div class="tj-content">
                <div class="tj-nums"><span class="number"> {{ (2645).toLocaleString() }} </span> Kwh</div>
                <div class="textCompare"><i class="triangle-up"></i> <span>12%</span></div>
              </div>
            </div>
            <div class="tj-item">
              <div class="title">当月用电量</div>
              <div class="tj-content">
                <div class="tj-nums"><span class="number"> {{ (236645).toLocaleString() }} </span> Kwh</div>
                <div class="textCompare"><i class="triangle-down"></i> <span>12%</span></div>
              </div>
            </div>
            <div class="tj-item">
              <div class="title">当年用电量</div>
              <div class="tj-content">
                <div class="tj-nums"><span class="number"> {{ (853645).toLocaleString() }} </span> Kwh</div>
                <div class="textCompare"><i class="triangle-up"></i> <span>12%</span></div>
              </div>
            </div>
          </div>
          <div class="weekChart">
            <div class="title">过去七日分项用能</div>
            <div id="weekChart"></div>
          </div>
        </div>
        <div class="rankList">
          <div class="title">今日用电排行</div>
          <div class="list-table">
            <el-table :data="tableData" style="width: 100%" fit highlight-current-row :header-cell-style="{'background-color':'#e6efff','text-align':'center'}" :cell-style="{'line-height':'22px','text-align':'center'}" :row-class-name="tabRowClassName">
              <el-table-column type="index" label="排名">
              </el-table-column>
              <el-table-column prop="type" label="用电名称">
              </el-table-column>
              <el-table-column prop="number" label="用电量">
                <template slot-scope="scope">
                  {{ Number(scope.row.number).toLocaleString() }}
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
      </div>
      <div class="chartView">
        <div class="title">能耗情况统计</div>
        <div class="btns">
          <el-button-group>
            <el-button type="energy" size="mini" round autofocus>过去24小时</el-button>
            <el-button type="energy" size="mini">过去7天</el-button>
            <el-button type="energy" size="mini">过去30天</el-button>
            <el-button type="energy" size="mini" round>过去365天</el-button>
          </el-button-group>
        </div>
        <div class="text">
          <div><span>用电峰值MD值: </span> <Strong> {{(256.56).toLocaleString()}} </Strong> <span>Kwh</span></div>
          <div><span>总用电: </span> <Strong> {{(25653).toLocaleString()}} </Strong> <span>Kw</span></div>
        </div>
        <div class="energyChart" id="energyChart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import * as echarts from 'echarts';
export default {
  data () {
    return {
      data: [
        { value: 35.26, name: "生产", },
        { value: 328.76, name: "动力", },
        { value: 740.15, name: "照明", },
        { value: 713.65, name: "空调", },
        { value: 481.77, name: "其他", },
      ],
      tableData: [{
        type: '1号仓通风机',
        date: '2016-05-02',
        number: 825265,
      },
      {
        type: '2号仓通风机',
        date: '2016-05-02',
        number: 825265,
      }, {
        type: '3号仓通风机',
        date: '2016-05-02',
        number: '765125',
      }, {
        type: '4号仓通风机',
        date: '2016-05-02',
        number: '684524',
      }, {
        type: '5号仓通风机',
        date: '2016-05-02',
        number: '564352',
      }, {
        type: '6号仓通风机',
        date: '2016-05-02',
        number: '524125',
      }],
    }
  },
  created () {

  },
  mounted () {
    this.weekChart()
    this.energyChart()
  },
  methods: {
    tabRowClassName ({ row, rowIndex }) {
      let index = rowIndex + 1;
      if (index % 2 == 0) {
        return 'warning-row'
      }
    },
    weekChart () {
      var chartDom = document.getElementById('weekChart');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: '8%',
          top: 'center',
          bottom: '10%',
          icon: 'roundRect',
          icon: 'circle',
          itemWidth: 18,
          itemHeight: 12,
          align: 'left',
          itemGap: 15,
          rich: {
            // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
            oneone: {
              // 设置文字、数学、英语这一列的样式
              width: 60,
              color: "#000000",
              fontSize: 15,
              fontWeight: "bolder",
            },

            twotwo: {
              // 设置10分、20分、30分这一列的样式
              width: 60,
              color: "#333",
              fontSize: 15,
            },
            threethree: {
              // 设置百分比这一列的样式
              width: 60,
              color: "#E0E0E0",
              fontSize: 15,
            },
          },

          formatter: (name) => {
            // formatter格式化函数动态呈现数据
            // console.log(name);
            var total = 0; // 用于计算总数
            var target; // 遍历拿到数据
            for (var i = 0; i < this.data.length; i++) {
              total += this.data[i].value;
              if (this.data[i].name == name) {
                target = this.data[i].value;
              }
            }
            var v = ((target / total) * 100).toFixed(2);
            return `${name}  ${target} Kwh  ${v}%`;
            //     富文本第一列样式应用    富文本第二列样式应用      富文本第三列样式应用
          },
          textStyle: {
            color: [],
            padding: [0, 0, 30, 18],
            fontSize: '13px',
          },
          // data: [
          //   { value: 35.26, name: "生产", icon: 'image://"~@/assets/statisticAnalysis/生产1.png"' },
          //   { value: 328.76, name: "动力", icon: 'image://"~@/assets/statisticAnalysis/动力1.png"' },
          //   { value: 740.15, name: "照明", icon: 'image://"~@/assets/statisticAnalysis/照明1.png"' },
          //   { value: 713.65, name: "空调", icon: 'image://"~@/assets/statisticAnalysis/空调1.png"' },
          //   { value: 481.77, name: "其他", icon: 'image://"~@/assets/statisticAnalysis/其他1.png"' },
          // ],
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ["40%", "50%"],//饼状图位置
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              // position: 'center'
            },

            labelLine: {
              show: false
            },
            /* data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ], */
            data: this.data
          }
        ]
      };

      option && myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    energyChart () {
      var chartDom = document.getElementById('energyChart');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        // legend: {
        //   data: ['Evaporation', 'Precipitation', 'Temperature']
        // },
        grid: {
          show: false,
          left: "5%",
          top: "4%",
          right: "6%",
          bottom: "10%"
        },
        xAxis: [
          {
            type: 'category',
            data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Precipitation',
            min: 0,
            max: 500,
            interval: 100,
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
          {
            type: 'value',
            show: false,
            name: 'Temperature',
            min: 0,
            max: 500,
            interval: 100,
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            min: (value) => {
              return value.min
            },
            max: (value) => {
              return value.max
            },

            // tooltip: {
            //   valueFormatter: function (value) {
            //     return value + ' ml';
            //   }
            // },
            barWidth: 15,//柱形图柱条宽度
            itemStyle: {
              borderRadius: [7, 7, 0, 0],// 设置柱形图柱条圆角
            },
            data: [
              50, 60, 80, 100, 120, 140, 160, 180, 200, 240, 280, 310, 330, 440, 350, 260, 270, 280, 220, 200, 180, 170, 160, 150
            ],

          },
          /* {
            name: 'Precipitation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          }, */
          {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,

            // tooltip: {
            //   valueFormatter: function (value) {
            //     return value + ' °C';
            //   }
            // },
            data: [
              25, 30, 40, 50, 60, 70, 80, 90, 100, 120, 140, 150, 170, 160, 220, 170, 130, 140, 150, 110, 100, 90, 120, 70
            ],
          }
        ]
      };

      option && myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
  .container {
    height: 100%;
    // background-color: pink;
    .dataView {
      height: 380px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      // background-color: yellowgreen;
      .electricityConsumption {
        width: 69%;
        height: 100%;
        // background-color: yellowgreen;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .ydtj {
          height: 120px;
          // background-color: blue;
          display: flex;
          justify-content: space-between;
          .tj-item {
            width: 33%;
            min-width: 185px;
            height: 100%;
            background-color: #fff;
            padding: 10px;
            border-radius: 15px;
            .title {
              height: 20px;
              line-height: 20px;
              border-left: 4px solid #5283e7;
              font-size: 14px;
              font-weight: 600;
              padding-left: 15px;
              margin-left: 15px;
            }
            .tj-content {
              height: 80px;
              // padding: 10px;
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
              align-items: center;
              .tj-nums {
                width: 70%;
                .number {
                  font-size: 25px;
                  font-weight: 700;
                }
              }
              .textCompare {
                width: 70%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                // padding-right: 60px;
              }
              .triangle-down {
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-top: 8px solid green;
              }
              .triangle-up {
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-bottom: 8px solid red;
              }
            }
          }
        }
        .weekChart {
          height: 250px;
          width: 100%;
          padding: 10px;
          background-color: #fff;
          border-radius: 15px;
          .title {
            height: 20px;
            line-height: 20px;
            border-left: 4px solid #5283e7;
            font-size: 14px;
            font-weight: 600;
            padding-left: 15px;
            margin-left: 15px;
          }
          #weekChart {
            height: 220px;
            width: 100%;
          }
        }
      }
      .rankList {
        width: 30%;
        height: 100%;
        padding: 10px;
        background-color: #fff;
        border-radius: 15px;
        .title {
          height: 20px;
          line-height: 20px;
          border-left: 4px solid #5283e7;
          font-size: 14px;
          font-weight: 600;
          padding-left: 15px;
          margin-left: 15px;
        }
        .list-table {
          padding: 10px 5px 10px 5px;
        }
      }
    }
    .chartView {
      width: 100%;
      // height: 100%;
      min-height: 330px;
      background-color: #fff;
      padding: 10px;
      border-radius: 15px;
      margin-top: 10px;
      .title {
        height: 20px;
        line-height: 20px;
        border-left: 4px solid #5283e7;
        font-size: 14px;
        font-weight: 600;
        padding-left: 15px;
        margin-left: 15px;
      }
      .btns {
        text-align: center;
      }
      .text {
        width: 50%;
        height: 30px;
        line-height: 30px;
        margin: 0 auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        font-size: 15px;
        font-family: "微软雅黑", Courier, monospace;
        // font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        // font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        // font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        // font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        // font-family: 'Times New Roman', Times, serif;
        // font-family:   sans-serif;
        // font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        // font-weight: 600;
        padding: 15px 20px;
        strong {
          color: #5283e7;
          font-size: 18px;
          font-weight: 600;
        }
      }
      #energyChart {
        min-height: 230px;
        width: 100%;
        // background-color: pink;
      }
    }
  }
}

::v-deep .el-table .warning-row {
  background-color: #f2f6ff;
}
</style>
