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