效果图

在这里插入图片描述

主要是使用嵌套循环
后台给的数据是数组对象形式 如下:
在这里插入图片描述
//处理成二维数组 [[],[],[]],以应用于页面循环
在这里插入图片描述
首先处理成二维数组的格式

//页面内
<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>
Logo

前往低代码交流专区

更多推荐