screenFront/src/views/pmTest/index.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>