baozhida-building-system/src/views/system/broadcast/modules/deviceList.vue

<template>
    <div class="_deviceList">
        <HeadlineTag value="设备列表" style="flex-shrink: 0;"></HeadlineTag>
        <div class="point_box" style="margin-top: 10px;">
          <el-input v-model="value" placeholder="按巡查点名称搜索" />
        </div>
        <div class="_deviceList_mains" ref="mainsRef" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel">
            <div :style="{ transform: `translateY(${scrollY}px)` }">
                <div class="_deviceList_mains_item" v-for="(item, index) in eventList" :key="index">
                    <el-text class="w-150px mb-2 " truncated style="color: white;flex: .4;display: flex;align-items: center;">
                        <el-icon color="#168cdb" size="16">
                            <el-icon><Headset /></el-icon>
                        </el-icon>
                        <span class="_table_row1">{{ item.name }}</span>
                    </el-text>
                    <el-text class="w-150px mb-2" :class="item.state=='播放'?'_success':''" truncated style="color: #fff;flex: .2;">
                        {{ item.state }}
                    </el-text>
                    <el-text class="w-150px mb-2" :class="item.flag=='在线'?'':'_warning'" truncated style="flex: .2;color: #fff;">
                        {{ item.flag }}
                    </el-text>
                    <el-icon color="#168cdb" style="flex: .2;">
                        <el-icon><Aim /></el-icon>
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import HeadlineTag from '@/components/HeadlineTag'
import { Headset, Aim } from '@element-plus/icons-vue'
const value = ref('')
const eventList = ref([
    { name: '终端1', state: '播放', flag: '在线' },
    { name: '终端2', state: '空闲', flag: '离线' },
    { name: '终端3', state: '播放', flag: '在线' },
    { name: '终端4', state: '空闲', flag: '离线' },
    { name: '终端5', state: '播放', flag: '在线' },
    { name: '终端6', state: '空闲', flag: '离线' },
    { name: '终端7', state: '播放', flag: '在线' },
    { name: '终端8', state: '空闲', flag: '离线' },
    { name: '终端9', state: '播放', flag: '在线' },
    { name: '终端10', state: '空闲', flag: '离线' },
    { name: '终端11', state: '播放', flag: '在线' },
    { name: '终端12', state: '空闲', flag: '离线' },
    { name: '终端13', state: '播放', flag: '在线' },
    { name: '终端14', state: '空闲', flag: '离线' },
    { name: '终端15', state: '播放', flag: '在线' },
    { name: '终端16', state: '空闲', flag: '离线' },
    { name: '终端17', state: '播放', flag: '在线' },
    { name: '终端18', state: '空闲', flag: '离线' },
    { name: '终端19', state: '播放', flag: '在线' },
    { name: '终端20', state: '空闲', flag: '离线' },
    { name: '终端21', state: '播放', flag: '在线' },
    { name: '终端22', state: '空闲', flag: '离线' },
    { name: '终端23', state: '播放', flag: '在线' },
    { name: '终端24', state: '空闲', flag: '离线' }
])

const mainsRef = ref(null)
const scrollY = ref(0)
let intervalId = null
const scrollSpeed = 1 // 滚动速度

const startCarousel = () => {
    intervalId = setInterval(() => {
        const itemHeight = mainsRef.value?.querySelector('._deviceList_mains_item')?.offsetHeight;
        if (!itemHeight) return;

        scrollY.value -= scrollSpeed;

        // 检查第一个元素是否完全离开视口
        if (Math.abs(scrollY.value) >= itemHeight) {
            // 将第一个元素移到列表末尾
            const firstItem = eventList.value.shift();
            if (firstItem) {
                eventList.value.push(firstItem);
            }
            // 调整滚动位置
            scrollY.value += itemHeight;
        }
    }, 20);
};

const pauseCarousel = () => {
    clearInterval(intervalId);
};

const resumeCarousel = () => {
    startCarousel();
};

onMounted(() => {
    startCarousel();
});

onUnmounted(() => {
    clearInterval(intervalId);
});
</script>

<style lang="scss" scoped>
._success {
    color: #168cdb !important;	
}
._warning {
    color: rgb(244, 67, 54) !important;	
}
._table_row1{
    margin-left: 10px;
    text-emphasis: none;
    /* 新增样式让文本超出显示省略号 */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
._deviceList{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    &_mains{
        margin:10px 30px;
        overflow: hidden; // 隐藏溢出内容
        cursor: pointer;
        font-size: 12px;
        &_item{
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }
        &_item:nth-child(even){
            background: rgba($color: #168cdb, $alpha: .05);
        }
        &_item:hover{
            cursor: pointer;
            background-image: linear-gradient(to right, #168cdb, transparent); 
        }
    }
}
</style>

<style lang="scss" scoped>
.point_box{
    margin:10px 30px;
}
.point_box :deep(.el-input__wrapper) {
  background-color: transparent !important;
  box-shadow: 0 0 0 1px rgb(58, 86, 117) inset !important;
}

.point_box :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409EFF inset !important;
}

.point_box :deep(.el-input__inner) {
  color: #ffffff !important;
}
</style>