150 lines
3.4 KiB
Vue
150 lines
3.4 KiB
Vue
<template>
|
||
<div :class="$style['container']">
|
||
<div class="header">
|
||
<div class="title">
|
||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'环境-噪音 实时监测系统'" :titleTip="[]"
|
||
:typeFun="['AbnormalData', 'time']" :alarmType="['noiseAlarm', 'temphuim', 'dustAlarm']"></header2>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="box">
|
||
<Border12>
|
||
<div style="width: 100%;height: 100%;overflow: hidden;" ref="boxRef">
|
||
<ul ref="ulRef" :style="{transform:`translateY(-${index * boxHeight}px)`}">
|
||
<li class="item-box" v-for="item in list" :key="item.id" :style="{height:`${boxHeight}px`}">
|
||
<div class="item-left">{{ item.id }}</div>
|
||
<div class="item-right">
|
||
<div class="b-top">
|
||
<text>机架号：<i>{{item.label}}</i></text> <text>设备位置及名称：<i>{{ item.position }}</i></text>
|
||
</div>
|
||
<div class="b-bottom">
|
||
<text>工作时长：<i>{{ item.workTime }}</i></text>
|
||
<text>待机时长：<i>{{ item.standbyTime }}</i></text>
|
||
<text>停机时长：<i>{{ item.downtime }}</i></text>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</Border12>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang='ts'>
|
||
import { ref, reactive, onMounted, onUnmounted } from "vue"
|
||
import Border12 from "@/components/border/Border12.vue"
|
||
import Header2 from "@/components/headerBox/header2.vue"
|
||
let list = ref([])
|
||
let rowNum =6;
|
||
const boxRef = ref(null)
|
||
const ulRef = ref(null)
|
||
let boxHeight = ref(0)
|
||
let interval = 3000;
|
||
let index = ref(0);
|
||
let timer = null
|
||
for (let i = 1; i <= 10; i++) {
|
||
let item = {
|
||
id: i,
|
||
label: `机架号${i}`,
|
||
position: `设备位置及名称${i}`,
|
||
workTime: `65664 分钟`,
|
||
standbyTime: `57244 分钟`,
|
||
downtime: `6708 分钟`
|
||
}
|
||
list.value.push(item)
|
||
}
|
||
|
||
onMounted(() => {
|
||
boxHeight.value = boxRef.value.clientHeight / rowNum
|
||
//定时器 循环 添加过度效果
|
||
timer = setInterval(() => {
|
||
index.value++;
|
||
if (index.value >= (list.value.length - rowNum + 1)) {
|
||
index.value = 0;
|
||
}
|
||
}, interval);
|
||
});
|
||
onUnmounted(() => {
|
||
clearInterval(timer)
|
||
});
|
||
</script>
|
||
|
||
|
||
<style module>
|
||
.container {
|
||
height: 1080px;
|
||
width: 1920px;
|
||
color: #20aec5;
|
||
background-color: #100c2a;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.content {
|
||
width: 100%;
|
||
height: 980px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding: 20px;
|
||
}
|
||
.box {
|
||
width: 600px;
|
||
height: 400px;
|
||
}
|
||
ul {
|
||
transition: all 1s;
|
||
}
|
||
|
||
.test {
|
||
width: 20%;
|
||
height: 30%;
|
||
margin: 20px 47px;
|
||
}
|
||
|
||
ul {
|
||
width: 100%;
|
||
}
|
||
.item-box {
|
||
width: 100%;
|
||
height: 50px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.item-left {
|
||
width: 10%;
|
||
margin-right: 10px;
|
||
}
|
||
.item-right {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: start;
|
||
}
|
||
</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>
|