jiahe_device/src/views/energySources/index.vue

<template>
  <div style="height: 100%">
    <div class="modelBox">
      <Header />
      <all />
      <div class="box-two">
        <load />
        <dosage /> 
      </div>
      <div class="box-two">
      <equipmentLoad />
        <equipmentStatus />
          <equipmentAnalyze />
      </div>
      

    </div>
  </div>
</template>

<script>
// import MonitorTitle from "./components/MonitorTitle.vue";
import {
  defaultLocation11,
  defaultLocation1,
  floorList11,
  floorList12,
  floorList1,
} from "@/const/monitoring/monitoring.js";
import { detail } from "@/api/system/param.js";
import Header from "./component/header.vue";
import all from "./component/all.vue";
import load from "./component/load.vue";
import dosage from "./component/dosage.vue";
import equipmentLoad from "./component/equipmentLoad.vue";
import equipmentStatus from "./component/equipmentStatus.vue";
import equipmentAnalyze from "./component/equipmentAnalyze.vue";
import { getEntrustDay, getDataAcquisition } from "@/api/monitoring/monitoring";

export default {
  data() {
    return {
    };
  },
  components: {
    Header,
    all,
    load,
    dosage,
    equipmentLoad,
    equipmentStatus,
    equipmentAnalyze,
  },
  created() {
    this.$nextTick(() => {
      this.setRemPc();
      window.addEventListener('resize', this.setRemPc);//浏览器窗口大小改变时调用rem换算方法
    })

  },
  destroyed() {
    document.getElementsByTagName('html')[0].style.fontSize = 'unset';
  },
  filters: {
    timeFl: (data) => {
      if (data) {
        data = data.substr(5, 11);
      }
      return data;
    },
  },
  methods: {
    setRemPc() {
      /**
       * @file: index.vue
       * @method: setRemPc
       * @param:
       * @return:
       * @description:计算rem大小
       * @date: 
       */
      var whdef = 100 / 1920;// 表示1920的设计图,使用100PX的默认值
      var bodyWidth = document.body.clientWidth;// 当前窗口的宽度
      var rem = bodyWidth * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
      document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
    },




  },
};
</script>
<style lang="scss" scoped>
.modelBox {
  width: 100%;
  height: 10.8rem;
  position: relative;
  padding: 0.96rem 0.24rem 0 0.24rem;
  background: url("../../../public/img/energySources/background2.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  .box-two {
    display: flex;
    margin-top: 0.22rem;
  }

}
</style>