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>0kW</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="myEcharts" 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 { onMounted } from "vue";
import * as echarts from 'echarts';
export default {
  name: "db",
  setup() {
    onMounted(() => {//需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("myEcharts"));
      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
      // 绘制图表
      myChart.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 () {//自适应大小
        myChart.resize();
      };
      myChart3.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: "kWh",
          splitLine:{
            show:true,
            lineStyle:{
              type:'dashed',
              color:'#BEC3DA'
            }
          },
          axisLine: {
            show: true,
            lineStyle:{
              type:'dashed',
              color:'#BEC3DA'
            }
          },
        },
        series: [
          {
            name: "今日用电量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
            itemStyle:{
              color:'#2F8EE0'
            },
          },
        ],
      });
      window.onresize = function () {//自适应大小
        myChart3.resize();
      };
      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();
      };
    });
  },
  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>