<template>
  <div class="app-container home">
    <div class="top">
      <div class="card">
        <div><img src="../../../assets/images/功率.png"></div>
        <div>
          <p>当前功率</p>
          <h2>{{data.totp}}kW</h2>
        </div>
      </div>
      <div class="card">
        <div><img src="../../../assets/images/用电量.png"></div>
        <div>
          <p>日用电量</p>
          <h2>{{data.eday}}kWh</h2>
        </div>
      </div>
      <div class="card">
        <div><img src="../../../assets/images/用电量.png"></div>
        <div>
          <p>月用电量</p>
          <h2>{{data.emonth}}kWh</h2>
        </div>
      </div>
      <div class="card">
        <div><img src="../../../assets/images/用电量.png"></div>
        <div>
          <p>累计用电量</p>
          <h2>{{data.totwh}}kWh</h2>
        </div>
      </div>
    </div>
    <div class="mid">
      <div class="mid1">
        <div class="mid1-1">
          当前功率
        </div>
        <div id="myEcharts1" style="width: 100%; height: 88.6%"></div>
      </div>
      <div class="mid2">
        <div class="mid2-1">
          当前功率总览
        </div>
        <div id="myEcharts2" style="width: 100%; height: 88.6%"></div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom1">
        <div class="bottom1-1">
          今日用电量总览
        </div>
        <div id="myEcharts3" style="width: 100%; height: 88.6%"></div>
      </div>
    </div>
  </div>
</template>

<script  name="Index">
import {getData , getZdb} from '../../../api/emonitor/api'
import { onMounted ,onUnmounted ,reactive } from "vue";
import * as echarts from 'echarts';
export default {
  name: "db",
  setup() {
     let data = reactive({
        totp:'',
       totwh:'',
       eday:'',
       emonth:'',
       glData:[],
       glXz:[
         "00:00",
         "00:15",
         "00:30",
         "00:45",
         "01:00",
         "01:15",
         "01:30",
         "01:45",
         "02:00",
         "02:15",
         "02:30",
         "02:45",
         "03:00",
         "03:15",
         "03:30",
         "03:45",
         "04:00",
         "04:15",
         "04:30",
         "04:45",
         "05:00",
         "05:15",
         "05:30",
         "05:45",
         "06:00",
         "06:15",
         "06:30",
         "06:45",
         "07:00",
         "07:15",
         "07:30",
         "07:45",
         "08:00",
         "08:15",
         "08:30",
         "08:45",
         "09:00",
         "09:15",
         "09:30",
         "09:45",
         "10:00",
         "10:15",
         "10:30",
         "10:45",
         "11:00",
         "11:15",
         "11:30",
         "11:45",
         "12:00",
         "12:15",
         "12:30",
         "12:45",
         "13:00",
         "13:15",
         "13:30",
         "13:45",
         "14:00",
         "14:15",
         "14:30",
         "14:45",
         "15:00",
         "15:15",
         "15:30",
         "15:45",
         "16:00",
         "16:15",
         "16:30",
         "16:45",
         "17:00",
         "17:15",
         "17:30",
         "17:45",
         "18:00",
         "18:15",
         "18:30",
         "18:45",
         "19:00",
         "19:15",
         "19:30",
         "19:45",
         "20:00",
         "20:15",
         "20:30",
         "20:45",
         "21:00",
         "21:15",
         "21:30",
         "21:45",
         "22:00",
         "22:15",
         "22:30",
         "22:45",
         "23:00",
         "23:15",
         "23:30",
         "23:45"
       ],
         fdlData:'',
         fdlXz:'',
     })
    // function getData() {
    //   glData(13).then((res)=>{
    //     console.log(res.data)
    //   })
    // }
    // return{
    //   getData
    // },

    onMounted(() => {//需要获取到element,所以是onMounted的Hook
      getData(13).then((res)=>{
        console.log(res)
        if(res.data!=null){
          data.totp=res.data.totp
          data.totwh=res.data.totwh
          data.eday=res.data.eday
          data.emonth=res.data.emonth
          delete res.data.todayUsePowers.deviceId
          delete res.data.todayUsePowers.samDate
          delete res.data.todayUsePowers.userId
          let arr = Object.values(res.data.todayUsePowers)
          data.glData=arr
        }




        let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
        if (myChart1){
          myChart1.dispose()
        }
        myChart1 = echarts.init(document.getElementById("myEcharts1"));
        myChart1.setOption({
          series: [
            {
              type: 'gauge',
              axisLine: {
                lineStyle: {
                  width: 10,
                  color: [
                    [0.3, '#67e0e3'],
                    [0.7, '#37a2da'],
                    [1, '#fd666d']
                  ]
                }
              },
              pointer: {
                itemStyle: {
                  color: 'inherit'
                }
              },
              // axisTick: {
              //   distance: -30,
              //   length: 8,
              //   lineStyle: {
              //     color: '#fff',
              //     width: 2
              //   }
              // },
              // splitLine: {
              //   distance: -30,
              //   length: 30,
              //   lineStyle: {
              //     color: '#fff',
              //     width: 4
              //   }
              // },
              axisLabel: {
                color: 'inherit',
                distance: 10,
                fontSize: 10
              },
              detail: {
                valueAnimation: true,
                formatter: '{value} kW',
                color: 'inherit'
              },
              data: [
                {
                  value: data.totp
                }
              ]
            }
          ]
        });
        window.onresize = function () {//自适应大小
          myChart1.resize();
        };




        let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
        if (myChart2){
          myChart2.dispose()
        }
        myChart2 = echarts.init(document.getElementById("myEcharts2"));
        myChart2.setOption({
          title: {},
          tooltip: {
            trigger: "axis",
            show: true
          },
          textStyle:{
            color:'#BEC3DA'
          },
          grid:{
            show: true,
            top: '20%',
            bottom:'15%',
            left:'5%',
            right:'3%',
            borderWidth: 1,
            borderColor: '#767da1',
          },
          xAxis: {
            data:data.glXz,
            axisLine:{
              lineStyle:{
                color:'#767da1'
              }
            },
            axisTick: {
              show: false // 去掉x轴刻度
            },
            splitArea: {
              show: true,
              interval:0,
              areaStyle: {
                color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
                //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
              }
            }
          },
          yAxis: {
            type: 'value',
            name: "kW",
            splitLine:{
              show:true,
              lineStyle:{
                type:'dashed',
                color:'#BEC3DA'
              }
            },
            axisLine: {
              show: false,
              lineStyle:{
                type:'dashed',
                color:'#BEC3DA'
              }
            },
          },
          series: [
            {
              name: "当前功率",
              type: "line",
              data: data.glData,
              itemStyle:{
                color:'#2F8EE0'
              },
              symbol: "none", //去掉拐角点
            },
          ],
        });
        window.onresize = function () {//自适应大小
          myChart2.resize();
        };

      })
      getZdb(13).then((res)=>{
        console.log(res)
         let arr = []
         let brr = []
        for (let i in res.data){
           arr.push(res.data[i].hour)
          brr.push(res.data[i].useElectric)
        }
         data.fdlData=brr
        data.fdlXz=arr
        let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
        if (myChart3){
          myChart3.dispose()
        }
        myChart3 = echarts.init(document.getElementById("myEcharts3"));
        myChart3.setOption({
          title: {},
          tooltip: {},
          grid:{
            show: true,
            top: '20%',
            bottom:'15%',
            left:'5%',
            right:'3%',
            borderWidth: 1,
            borderColor: '#767da1',
          },
          textStyle:{
            color:'#BEC3DA'
          },
          xAxis: {
            type:'category',
            data:data.fdlXz,
            axisLine:{
              lineStyle:{
                color:'#767da1',
                // type:'dashed'
              }
            },
            axisTick: {
              show: false // 去掉x轴刻度
            },
            splitArea: {
              show: true,
              interval:0,
              areaStyle: {
                color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
                //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
              }
            }
          },
          yAxis: {
            type: 'value',
            name: "kWh",
            splitLine:{
              show:true,
              lineStyle:{
                type:'solid',
                color:'#f3ffff'
              }
            },
            axisLine: {
              show: false,
              lineStyle:{
                type:'dashed',
                color:'#BEC3DA'
              }
            },
          },
          series: [
            {
              name: "今日用电量",
              type: "bar",
              data: data.fdlData,
              itemStyle:{
                color:'#2F8EE0'
              },
            },
          ],
        });
        window.onresize = function () {//自适应大小
          myChart3.resize();
        };
      })

    })
    return {
      data
    }
  },

  components: {},
  mounted() {},
};


</script>

<style scoped lang="scss">
p{
  margin-bottom: 10px;
}
.top{
  width: 100%;
  height: 110px;
  display: flex;
  justify-content: space-between;
}
.card{
  width: 24%;
  height: 100%;
  background-color: #2F3D8A;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.mid{
  width: 100%;
  height: 350px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.mid1{
  width: 24%;
  height: 100%;
  background-color: #2F3D8A;
}
.mid1-1{
  width: 100%;
  height: 40px;
  background-color: #374590;
  padding-top: 10px;
  padding-left: 10px;
}
.mid2{
  width: 74.67%;
  height: 100%;
  background-color: #2F3D8A;
}
.mid2-1{
  width: 100%;
  height: 40px;
  background-color: #374590;
  padding-top: 10px;
  padding-left: 10px;
}
.bottom{
  width: 100%;
  height: 350px;
}
.bottom1{
  width: 100%;
  height: 100%;
  background-color: #2F3D8A;
}
.bottom1-1{
  width: 100%;
  height: 40px;
  background-color: #374590;
  padding-top: 10px;
  padding-left: 10px;
}
</style>

