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

<template>
  <div class="app-container home">
    <div class="top">
      <div class="card">
        <div>pic</div>
        <div>
          <p>总用电量</p>
          <h2>1641kWh</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>当前功率</p>
          <h2>11kW</h2>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
        <div style="display: flex; margin-bottom: 5px">
          <p>进水温度:</p>
          <h2>25℃</h2>
        </div>
        <div style="display: flex">
          <p>出水温度:</p>
          <h2>85℃</h2>
        </div>
        </div>
      </div>
      <div class="card">
        <div>pic</div>
        <div>
          <p>运行状态</p>
          <h2 style="color: #1ab394">开启</h2>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="bottom1">
        <div class="bottom1-1">
          日用电量
        </div>
        <div id="myEcharts" style="width: 100%; height: 86.7%">
          pic
        </div>
      </div>
      <div class="bottom1">
        <div class="bottom1-1">
          月用电量
        </div>
        <div>
          pic
        </div>
      </div>
      <div class="bottom1">
        <div class="bottom1-1">
          当前功率
        </div>
        <div>
          pic
        </div>
      </div>
      <div class="bottom1">
        <div class="bottom1-1">
          当前温度
        </div>
        <div>
          pic
        </div>
      </div>
    </div>
  </div>
</template>

<script  name="Index">
import { onMounted } from "vue";
import * as echarts from 'echarts';
export default {
  name: "drgl",
  setup() {
    onMounted(() => {//需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("myEcharts"));
      // 绘制图表
      myChart.setOption({
        title: {},
        tooltip: {},
        xAxis: {
          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
        },
        yAxis: {
          nameTextStyle: {
            color: 'white'
          },
            show: true,
          type: 'value',
          axisLine: {
            show: true,
          }
          },
        series: [
          {
            name: "用户量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      window.onresize = function () {//自适应大小
        myChart.resize();
      };
    });
  },
  components: {},
  mounted() {},
};


</script>

<style scoped lang="scss">
.top{
  width: 100%;
  height: 110px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}
.card{
  width: 24%;
  height: 110px;
  background-color: #2F3D8A;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bottom{
  width: 100%;
  height: 640px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.bottom1{
  width: 49.35%;
  height: 300px;
  background-color: #2F3D8A;
  margin-bottom: 20px;
}
p{
  margin-bottom: 10px;
}
.bottom1-1{
  width: 100%;
  height: 13.3%;
  background-color: #374590;
  padding-top: 10px;
  padding-left: 10px;
}
</style>