156 lines
3.5 KiB
Vue
156 lines
3.5 KiB
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>
|