vue+elementUI 走马灯多条数据同屏滚动
效果图主要是使用嵌套循环后台给的数据是数组对象形式 如下://处理成二维数组[[],[],[]],以应用于页面循环首先处理成二维数组的格式//页面内<template><div class="black_head"><ul flex="main:justify"><li>设备编号</li><li>实时状态</li>
·
效果图
主要是使用嵌套循环
后台给的数据是数组对象形式 如下:
//处理成二维数组 [[],[],[]],以应用于页面循环
首先处理成二维数组的格式
//页面内
<template>
<div class="black_head">
<ul flex="main:justify">
<li>设备编号</li>
<li>实时状态</li>
<li>运行时长</li>
<li>运行百分</li>
</ul>
</div>
<div class="black_body">
<el-carousel
direction="vertical"
:autoplay="autoplay"
:interval="5000"
height="6.6rem"
:loop="true"
v-if="chejianList.length > 0"
>
//注意此时chejianList 的数组格式 [[],[],[]]
<el-carousel-item v-for="(items, indexs) in chejianList" :key="indexs">
<ul v-for="(item, index) in items" :key="index">
<li flex :class="[index % 2 == 0 ? 'btTrue' : 'btFalse']">
<div>
<span style="color: #fdfdfd">{{ item.room }}-{{ item.name }}#</span>
</div>
<div>
停止 手动 复位
</div>
<div class="zier">
<span v-if="parseInt(item.run_time / 86400) > 0">{{ parseInt(item.run_time / 86400) }}天</span>
{{ item.run_times | noValue }}
</div>
<div class="zier">
<span :class="[comp_id == 1 ? (item.runbi < 30 ? 'red' : 'zier') : item.runbi < 60 ? 'red' : 'zier']"
>{{ item.runbi }}%</span
>
</div>
</li>
</ul>
</el-carousel-item>
</el-carousel>
<el-carousel direction="vertical" :autoplay="autoplay" :interval="5000" height="6.6rem" :loop="true" v-else>
<span class="noData" flex="main:center cross:center">暂无数据</span>
</el-carousel>
</div>
</template>
<script>
export default {
data() {
return {
chejianList: [],
}
},
methods:{
threegetGet_device_run_status_totaltimelength() {
let params = {
device_id: 0,
};
Get_device_run_status_totaltimelength(params).then((res) => {
const { ReturnCode, Data } = res;
if (ReturnCode == 200) {
this.chejianYunXing= Data;
//处理成二维数组 [[],[],[]]
let chejian = Math.ceil(this.chejianYunXing.length / 14);
let newCheJian = [];
for (let i = 0; i < chejian; i++) {
newCheJian[i] = this.chejianYunXing.splice(0, 14);
}
this.chejianList = newCheJian;
}
});
},
}
</script>
更多推荐
已为社区贡献17条内容
所有评论(0)