screenFront/src/views/energyConsumeJixiefenchang/index.vue

<template>
  <div  :class="$style['container']">
    <div class="header">
        <div class="title">
          <header2
          ref="headerref"
          :width="'100%'"
          :height="'100px'"
          :title="t('messages.energyConsume')"
          :titleTip="[]"
          :typeFun="['time']"
          :alarmType="['']"
        ></header2>
        </div>
      </div>
      <div class="content" ref="Acontent">
        <el-row>
        <el-col :span="24">
        <contentLeft :width="size.oWidth" :height="size.oHeight"></contentLeft>
        </el-col>
        <el-col :span="24">
        <contentRight :width="size.oWidth" :height="size.oHeight"></contentRight>
        </el-col>
        </el-row>
      </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, onUnmounted, reactive, ref } from "vue";
//   import content from './content/content.vue'
  import contentRight from './content/bottom.vue'
  import contentLeft from './content/top.vue'  
  import header2 from "@/components/headerBox/header2.vue";
//   import useNowTime from '@/hook/nowTime'
  import {calcWH} from '@/components/ts/selfAdaption'
  import { ElRow, ElCol } from "element-plus";
  import {getPowerData ,getconsumeDetail,getcurrentRateMF,getcurrentProductMF} from '@/http/energyConsume'
  import { useEnergyConsumeStore } from "@/store/module/energyConsume";
  import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useEnergyConsumeStore();
  
  let Acontent=ref()
  let headerref=ref()
  let time=ref(null)
  
  let size=reactive({
    oWidth:0,
    oHeight:0
  });
  function WH(div:HTMLElement){
    let a=calcWH(div.offsetHeight,div.offsetWidth,2,1,0)
  size.oWidth=a.oWidth
  size.oHeight=a.oHeight
    
  }
  // 
  async function getconsumeDetailfun(){
  let result:any = await getconsumeDetail()
 
  if(result.code==200){
    store.setwaterGas(result.data)
  }
}
async function getcurrentRatefun(){
  let result:any = await getcurrentRateMF()
 
  if(result.code==200){
    store.setRatio(result.data)
  }
}
async function getcurrentProductfun(){
  let result:any = await getcurrentProductMF()
 
  if(result.code==200){
    store.setProduct(result.data)
  }
}
  onMounted(() => {
    getconsumeDetailfun()
    getcurrentRatefun()
    getcurrentProductfun()
    let contentBox=Acontent.value
    // let Timedombox=Timedom.value
    window.document.title=t('messages.energyConsume')
    WH(contentBox)
    window.addEventListener('resize',()=>{
      if(time.value){
        clearTimeout(time.value)
        time.value=null
      }
      time.value = setTimeout(() => {WH(contentBox)
      }, 1000);
    })
      
  })
  
  onUnmounted(() => {
    clearTimeout(time)
  })
  
  </script>

<style module>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
}
</style>

<style scoped>
.title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .title > h1 {
    font-size: 30px;
    position: absolute;
    top: 10px;
  }
  .header{
      position: relative;
  }
  .header p{
      position: absolute;
      right: 50px;
      bottom: 20px;
      font-size:20px;
  }
  .content{
      width:100%;
      --header:100px;
      height:calc(1080px - var(--header))
  }
  </style>
  
  
  <style>
  body {
  
    /* --content:calc(100vh - var(--header)) */
    overflow: hidden !important;
    -ms-overflow-style: none; /* IE + Edge */
    scrollbar-width: none; /* Firefox */
  }
  ::-webkit-scrollbar {
    display: none;
  }
</style>