98 lines
2.0 KiB
Vue
98 lines
2.0 KiB
Vue
|
<!--
|
||
|
|
* @FilePath: \wwwd:\code\screenFront\src\views\Offsite\child\childContent\chart\topTitle.vue
|
||
|
|
* @Author: 王路平
|
||
|
|
* @文件版本: V1.0.0
|
||
|
|
* @Date: 2023-04-12 13:03:15
|
||
|
|
* @Description:
|
||
|
|
*
|
||
|
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div ref="marginbox">
|
||
|
|
<border6 ref="refborder6">
|
||
|
|
<template v-slot>
|
||
|
|
<div class="box" :key="keynum" :style="{ width: boxWH.width, height: boxWH.height }">
|
||
|
|
|
||
|
|
<p>{{ data.num }}<span>{{t('messages.units')}}</span></p>
|
||
|
|
<h2>{{ data.title }}</h2>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</border6>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
|
||
|
|
import { gatewayType } from "@/type/InPlantProducts";
|
||
|
|
import border6 from "@/components/borderBox/border6.vue";
|
||
|
|
import { useI18n } from 'vue-i18n'
|
||
|
|
let {t} = useI18n();
|
||
|
|
// let props=defineProps<{
|
||
|
|
// value:string,
|
||
|
|
// }>()
|
||
|
|
// const value=reactive<gatewayType>({
|
||
|
|
// data:null,
|
||
|
|
// quota:null,
|
||
|
|
// iconname:''
|
||
|
|
// })
|
||
|
|
let keynum = ref(0);
|
||
|
|
let data = reactive({
|
||
|
|
title: "",
|
||
|
|
num: 0,
|
||
|
|
});
|
||
|
|
let refborder6 = ref();
|
||
|
|
let marginbox = ref();
|
||
|
|
let boxWH = reactive({
|
||
|
|
width: "0px",
|
||
|
|
height: "0px",
|
||
|
|
});
|
||
|
|
// let gateway=ref()
|
||
|
|
// let fontSize=ref()
|
||
|
|
onMounted(() => {});
|
||
|
|
|
||
|
|
function setchartWH(width: any, height: any) {
|
||
|
|
marginbox.value.style.height = height + "px";
|
||
|
|
marginbox.value.style.width = width + "px";
|
||
|
|
boxWH.height = height-10+ "px";
|
||
|
|
boxWH.width = width-10 + "px";
|
||
|
|
refborder6.value.resetWH();
|
||
|
|
}
|
||
|
|
const setData = (value?: any) => {
|
||
|
|
data = value;
|
||
|
|
keynum.value++;
|
||
|
|
// data.value='设备名称'
|
||
|
|
};
|
||
|
|
// const itemData= ()=>{
|
||
|
|
// return data
|
||
|
|
// }
|
||
|
|
defineExpose({
|
||
|
|
setchartWH,
|
||
|
|
setData,
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
h2 {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 1rem;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
margin: 0 10px 0 10px;
|
||
|
|
/* color: #fff; */
|
||
|
|
font-weight: 800;
|
||
|
|
font-size: 3rem;
|
||
|
|
}
|
||
|
|
p>span{
|
||
|
|
font-size: 1.5rem;
|
||
|
|
}
|
||
|
|
.box {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
</style>
|