机械分厂车间环境页面显示
This commit is contained in:
hzz
parent
1c5eb321bc
commit
7a793f9f86
@ -8,128 +8,132 @@
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div ref="numBox1" :style="{ height: boxSize.height, width: boxSize.width }">
|
||||
<border3 ref="refborder3">
|
||||
<template v-slot>
|
||||
<div class="box" ref="classBox1">
|
||||
<h2>{{ item.name }}</h2>
|
||||
<h5 v-if="value.unit">{{
|
||||
`${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
|
||||
<i :class="+item.val > +value.quota
|
||||
? 'iconfont ' + value.iconname + ' icon-red iconbig-size'
|
||||
: 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
|
||||
"></i>
|
||||
<p class="unit" v-if="value.unit">
|
||||
<div ref="numBox1" :style="{ height: boxSize.height, width: boxSize.width }">
|
||||
<border3 ref="refborder3">
|
||||
<template v-slot>
|
||||
<div class="box" ref="classBox1">
|
||||
<h2>{{ item.name }}</h2>
|
||||
<h5 v-if="value.unit">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<h5 v-else> </h5>
|
||||
<!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
|
||||
<i :class="+item.val > +value.quota
|
||||
? 'iconfont ' + value.iconname + ' icon-red iconbig-size'
|
||||
: 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
|
||||
"></i>
|
||||
<p class="unit" v-if="value.unit">
|
||||
<p class="num">{{ item.val }} </p>
|
||||
<span>{{ value.unit }}</span>
|
||||
</p>
|
||||
</p>
|
||||
<p class="unit" v-else>
|
||||
<p class="num"> </p>
|
||||
<span> </span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</border3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</border3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, watch, computed, onUnmounted } from "vue";
|
||||
import border3 from "@/components/borderBox/border3.vue";
|
||||
import { verticalNumPerson } from "@/type/realtimeSecurity";
|
||||
import { warningNot } from "@/utils/notification";
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
let props = defineProps<{
|
||||
title: string;
|
||||
}>();
|
||||
let i = ref(0)
|
||||
let item = computed(() => {
|
||||
|
||||
return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0 };
|
||||
});
|
||||
let keynum = ref(0);
|
||||
const value = reactive<any>({
|
||||
data: [],
|
||||
unit: "",
|
||||
quota: null,
|
||||
iconname: "",
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, watch, computed, onUnmounted } from "vue";
|
||||
import border3 from "@/components/borderBox/border3.vue";
|
||||
import { verticalNumPerson } from "@/type/realtimeSecurity";
|
||||
import { warningNot } from "@/utils/notification";
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
let props = defineProps<{
|
||||
title: string;
|
||||
}>();
|
||||
let i = ref(0)
|
||||
let item = computed(() => {
|
||||
|
||||
return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0 };
|
||||
});
|
||||
let keynum = ref(0);
|
||||
const value = reactive<any>({
|
||||
data: [],
|
||||
unit: "",
|
||||
quota: null,
|
||||
iconname: "",
|
||||
});
|
||||
|
||||
let refborder3 = ref();
|
||||
let numBox1 = ref();
|
||||
const classBox1 = ref()
|
||||
let timer: any = null;
|
||||
onMounted(() => {
|
||||
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
})
|
||||
|
||||
const boxSize = reactive({
|
||||
height: '',
|
||||
width: ''
|
||||
})
|
||||
|
||||
function setchartWH(width: any, height: any) {
|
||||
boxSize.height = height + 'px'
|
||||
boxSize.width = width + 'px'
|
||||
refborder3.value.resetWH();
|
||||
}
|
||||
|
||||
const setData = (
|
||||
data?: object[] | null,
|
||||
iconname?: string,
|
||||
quota?: number | null,
|
||||
unit?: string
|
||||
) => {
|
||||
let temp_data = data.map((item: any) => {
|
||||
return {
|
||||
name: item.name.split("车间")[1] || item.name,
|
||||
val: item.val,
|
||||
};
|
||||
});
|
||||
value.data = temp_data;
|
||||
value.iconname = iconname;
|
||||
value.quota = quota;
|
||||
value.unit = unit;
|
||||
keynum.value++;
|
||||
|
||||
clearInterval(timer);
|
||||
timer = setInterval(() => {
|
||||
i.value++;
|
||||
if (i.value >= value.data.length) {
|
||||
i.value = 0;
|
||||
}
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
setchartWH,
|
||||
setData,
|
||||
});
|
||||
</script>
|
||||
|
||||
let refborder3 = ref();
|
||||
let numBox1 = ref();
|
||||
const classBox1 = ref()
|
||||
let timer: any = null;
|
||||
onMounted(() => {
|
||||
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
})
|
||||
|
||||
const boxSize = reactive({
|
||||
height: '',
|
||||
width: ''
|
||||
})
|
||||
|
||||
function setchartWH(width: any, height: any) {
|
||||
boxSize.height = height + 'px'
|
||||
boxSize.width = width + 'px'
|
||||
refborder3.value.resetWH();
|
||||
}
|
||||
|
||||
const setData = (
|
||||
data?: object[] | null,
|
||||
iconname?: string,
|
||||
quota?: number | null,
|
||||
unit?: string
|
||||
) => {
|
||||
let temp_data = data.map((item: any) => {
|
||||
return {
|
||||
name: item.name.split("车间")[1]||item.name,
|
||||
val: item.val,
|
||||
};
|
||||
});
|
||||
value.data = temp_data;
|
||||
value.iconname = iconname;
|
||||
value.quota = quota;
|
||||
value.unit = unit;
|
||||
keynum.value++;
|
||||
|
||||
clearInterval(timer);
|
||||
timer = setInterval(() => {
|
||||
i.value++;
|
||||
if (i.value >= value.data.length) {
|
||||
i.value = 0;
|
||||
}
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
setchartWH,
|
||||
setData,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/assets/css/iconfont.css";
|
||||
|
||||
.box {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box>h5 {
|
||||
font-size: 15px;
|
||||
/* margin-bottom: 20px; */
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* .contentbox{
|
||||
<style scoped>
|
||||
@import "@/assets/css/iconfont.css";
|
||||
|
||||
.box {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box>h5 {
|
||||
font-size: 15px;
|
||||
/* margin-bottom: 20px; */
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* .contentbox{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -137,85 +141,86 @@
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
} */
|
||||
h2 {
|
||||
color: #fff;
|
||||
h2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-red {
|
||||
font-size: 100px;
|
||||
color: #E43961;
|
||||
animation: redstart 2s infinite;
|
||||
/* position: relative; */
|
||||
/* top: -15px; */
|
||||
}
|
||||
|
||||
.icon-blue {
|
||||
font-size: 100px;
|
||||
color: #20AEC5;
|
||||
/* position: relative; */
|
||||
/* top: -15px; */
|
||||
}
|
||||
|
||||
.iconsmall-size {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
vertical-align: top;
|
||||
font-size: 20px;
|
||||
height: 5;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.box>h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.icontip {
|
||||
display: flex;
|
||||
margin-top: -60px;
|
||||
width: 100px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.icontipBox li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.icontipBox li p:nth-child(1) {
|
||||
width: 40%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.icontipBox li p:nth-child(2) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@keyframes redstart {
|
||||
0% {}
|
||||
|
||||
50% {
|
||||
text-shadow: #fff 1px 0 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-red {
|
||||
font-size: 100px;
|
||||
color: #E43961;
|
||||
animation: redstart 2s infinite;
|
||||
/* position: relative; */
|
||||
/* top: -15px; */
|
||||
}
|
||||
|
||||
.icon-blue {
|
||||
font-size: 100px;
|
||||
color: #20AEC5;
|
||||
/* position: relative; */
|
||||
/* top: -15px; */
|
||||
}
|
||||
|
||||
.iconsmall-size {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
vertical-align: top;
|
||||
font-size: 20px;
|
||||
height: 5;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.box>h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.icontip {
|
||||
display: flex;
|
||||
margin-top: -60px;
|
||||
width: 100px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.icontipBox li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.icontipBox li p:nth-child(1) {
|
||||
width: 40%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.icontipBox li p:nth-child(2) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@keyframes redstart {
|
||||
0% {}
|
||||
|
||||
50% {
|
||||
text-shadow: #fff 1px 0 10px;
|
||||
}
|
||||
|
||||
100% {}
|
||||
}</style>
|
||||
|
||||
100% {}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user