<template><!-- 省略其他代码 --><el-col :span="7"><div class="mb-20"><div class="station_box"><div class="show_title"><span class="title_name">焊接设备实时信息</span></div><div class="height300" style="padding: 0px 15px;"><div class="infotb"><div class="disinline_block th tbcontent"><div class="name p11">机器人</div><div class="p11">链接状态</div><div class="p11">操作模式</div><div class="p11">运行状态</div><div class="p6">速度倍率</div><div class="p11">加工节拍</div></div><!-- 修改这里：只显示currentRightTbData中的数据 --><div class="disinline_block tbcontent" v-for="item in currentRightTbData" :key="item.name"><div class="name p11">{{ item.name }}</div><div class="p11">{{ item.ljzhuangtai }}</div><div class="p11">{{ item.moshi }}</div><div class="p11">{{ item.yxzhuangtai }}</div><div class="p11">{{ item.beilv }}</div><div class="p11">{{ item.jiepai }}</div></div></div></div></div></div></el-col><!-- 省略其他代码 -->
</template><script>
export default {name: 'bulletinboard',data() {return {// 省略其他数据...rightTbIndex: 0, // 当前显示的起始索引rightTbInterval: null, // 轮播定时器}},computed: {// 计算当前要显示的表格数据（每次两条）currentRightTbData() {const start = this.rightTbIndex;const end = Math.min(start + 2, this.righttbdata.length);return this.righttbdata.slice(start, end);}},beforeDestroy() {// 清除定时器if (this.rightTbInterval) {clearInterval(this.rightTbInterval);}// 省略其他清理代码...},mounted() {// 初始化轮播this.startRightTbCarousel();// 省略其他初始化代码...},methods: {// 启动右侧表格数据轮播startRightTbCarousel() {this.rightTbInterval = setInterval(() => {// 计算下一次的起始索引const nextIndex = this.rightTbIndex + 4;// 如果下一次会超出数据范围，则回到开头if (nextIndex >= this.righttbdata.length) {this.rightTbIndex = 0;} else {this.rightTbIndex = nextIndex;}}, 3000); // 每3秒切换一次},// 省略其他方法...}
}
</script>
rightTbIndex: 0, // 当前显示的起始索引rightTbInterval: null, // 轮播定时器righttbdata:[{"name":"A","ljzhuangtai":"联机","moshi":"自动","yxzhuangtai":'待机',"beilv":"100%","jiepai":"2651.35s",},{"name":"B","ljzhuangtai":"联机","moshi":"自动","yxzhuangtai":'待机',"beilv":"100%","jiepai":"2651.35s",},]
