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%"></div>
      </div>
      <div class="bottom1">
        <div class="bottom1-1">
          月用电量
        </div>
        <div id="myEcharts2" style="width: 100%; height: 86.7%"></div>
      </div>
      <div class="bottom1">
        <div class="bottom1-1">
          当前功率
        </div>
        <div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
      </div>
      <div class="bottom1">
        <div class="bottom1-1">
          当前温度
        </div>
        <div id="myEcharts4" style="width: 100%; height: 86.7%"></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
      echarts.init(document.getElementById("myEcharts")).dispose()
      echarts.init(document.getElementById("myEcharts2")).dispose()
      echarts.init(document.getElementById("myEcharts3")).dispose()
      echarts.init(document.getElementById("myEcharts4")).dispose()
      let myChart = echarts.init(document.getElementById("myEcharts"));
      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
      let myChart4 = echarts.init(document.getElementById("myEcharts4"));
      // 绘制图表
      myChart.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 () {//自适应大小
        myChart.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: "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 () {//自适应大小
        myChart2.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: "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 () {//自适应大小
        myChart3.resize();
      };
      myChart4.setOption({
        title: {},
        tooltip: {},
        legend: {
          data: ['进水', '出水'],
          textStyle:{
            color:'#BEC3DA'
          }
        },
        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: "℃",
          splitLine:{
            show:true,
            lineStyle:{
              type:'dashed',
              color:'#BEC3DA'
            }
          },
          axisLine: {
            show: true,
            lineStyle:{
              type:'dashed',
              color:'#BEC3DA'
            }
          },
        },
        series: [
          {
            name: '进水',
            type: 'line',
            stack: 'Total',
            itemStyle:{
              color:'#2F8EE0'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '出水',
            type: 'line',
            stack: 'Total',
            itemStyle:{
              color:'#2F8EE0'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
        ],
      });
      window.onresize = function () {//自适应大小
        myChart4.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>