scmy/psdc-ui/src/views/emonitor/db/index.vue

<template>
  <div class="app-container home">
    <div class="top">
      <div class="card">
        <div>pic</div>
        <div>
          <p>当前功率</p>
          <h2>{{data.num}}kW</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>日用电量</p>
          <h2>11kWh</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>月用电量</p>
          <h2>141kWh</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>累计用电量</p>
          <h2>1641kWh</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({
        num:666,
         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)
      })
      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: {},
          textStyle:{
            color:'#BEC3DA'
          },
          xAxis: {
            type:'category',
            data:data.fdlXz,
            axisLine:{
              lineStyle:{
                color:'#BEC3DA',
                type:'dashed'
              }
            }
          },
          yAxis: {
            type: 'value',
            name: "kWh",
            splitLine:{
              show:true,
              lineStyle:{
                type:'dashed',
                color:'#BEC3DA'
              }
            },
            axisLine: {
              show: true,
              lineStyle:{
                type:'dashed',
                color:'#BEC3DA'
              }
            },
          },
          series: [
            {
              name: "今日用电量",
              type: "bar",
              data: [data.fdlData],
              itemStyle:{
                color:'#2F8EE0'
              },
            },
          ],
        });
        window.onresize = function () {//自适应大小
          myChart3.resize();
        };
      })



      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: 70
              }
            ]
          }
        ]
      });
      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: {},
        textStyle:{
          color:'#BEC3DA'
        },
        xAxis: {
          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
          axisLine:{
            lineStyle:{
              color:'#BEC3DA',
              type:'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: "kW",
          splitLine:{
            show:true,
            lineStyle:{
              type:'dashed',
              color:'#BEC3DA'
            }
          },
          axisLine: {
            show: true,
            lineStyle:{
              type:'dashed',
              color:'#BEC3DA'
            }
          },
        },
        series: [
          {
            name: "当前功率",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
            itemStyle:{
              color:'#2F8EE0'
            },
          },
        ],
      });
      window.onresize = function () {//自适应大小
        myChart2.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>