lanju-front/src/views/kanban/exception/carousel.vue

<template>
  <div class="fullscreen-carousel">
  <el-carousel :interval="3000"  indicator-position="outside" @change="handleScroll">
    <el-carousel-item   v-for="(item,k) in 1" :key="item" >
      <h3 v-if="k===0"><cards :dataProp="cards" /></h3>
<!--      <h3 v-if="k===1"><cards2 :dataProp="cardss"/></h3>-->
    </el-carousel-item>
  </el-carousel>
  </div>
</template>

<script>

import cards2 from './cards2'
import cards from './cards'

import {
  dryRoomDataCarousel,
  getMesBoardEquProductionToday,
} from "@/api/kanban/dryingroom";
import log from "../../monitor/job/log";

export default {

  // 轮播图组件
  name: 'carousel',
  components: {
    // cards2,
    cards
  },
  props: {
    dataHeight: {
      type: String,
      default: '800px'
    }
  },
  data () {
    return {
      cards: {
        data1:[],
        data2:[],
      },
      cardss: [],
    }
  },

  methods: {
    createData () {

      this.cards.data1 = new Array(8).fill(0).map((foo, i) => ({
        i:(i+1),

      }));
      this.cards.data2 = new Array(8).fill(0).map((foo, i) => ({
        i:(i+9),
      }));
      this.cards.data3 = new Array(5).fill(0).map((foo, i) => ({
        i: (i === 0 ? 17 : i === 1 ? 18 : i === 2 ? 61 : i === 3 ? 62 : 63),
      }));
     // console.log(this.cards.data1)
      dryRoomDataCarousel({ factory: 999 }).then((response) => {
        if (response.data) {
        //  console.log(response);
          this.cards.data1 = this.cards.data1.map((card) => {
            const matchingIndex = response.data.dryingroomList.find((index) => index.i === card.i);
            if (matchingIndex) {
              return {
                ...card,
                title: '烘房' + matchingIndex.i,
                model: matchingIndex.status,
                dollyNumber:matchingIndex.dollyNumber,
                waitmin:matchingIndex.waitmin,
                temperature:matchingIndex.temperature
              };
            } else {
              return card;
            }

          });
          this.cards.data2 = this.cards.data2.map((card) => {
            const matchingIndex = response.data.dryingroomList.find((index) => index.i === card.i);
            if (matchingIndex) {
              return {
                ...card,
                title: '烘房' + matchingIndex.i,
                model: matchingIndex.status,
                dollyNumber:matchingIndex.dollyNumber,
                waitmin:matchingIndex.waitmin,
                temperature:matchingIndex.temperature
              };
            } else {
              return card;
            }

          });
          this.cards.data3 = this.cards.data3.map((card) => {
            const matchingIndex = response.data.dryingroomList.find((index) => index.i === card.i);
            if (matchingIndex) {
              return {
                ...card,
                title: '烘房' + matchingIndex.i,
                model: matchingIndex.status,
                dollyNumber:matchingIndex.dollyNumber,
                waitmin:matchingIndex.waitmin,
                temperature:matchingIndex.temperature
              };
            } else {
              return card;
            }

          });

          this.cardss = this.cardss.map((card) => {
            const matchingIndex = response.data.dryingroomList.find((index) => index.i === card.i);
            if (matchingIndex) {
              return {
                ...card,
                title: '烘房' + matchingIndex.i,
                model: matchingIndex.status,
                dollyNumber:matchingIndex.dollyNumber,
                waitmin:matchingIndex.waitmin,
                temperature:matchingIndex.temperature
              };
            } else {
              return card;
            }

          });
          console.log(this.cardss )
        }

      });
    },

    handleScroll(event) {

      //请求烘房数据接口
      this.createData();
      // if (event==0){
      //   const that = this;
      //
      // }
      // 获取滚动事件的相关信息

     // console.log(scrollTop);
      // 根据需要处理滚动事件的逻辑
      // ...
    },


  },
  mounted() {
     const { createData } = this
     createData()
    // setInterval(this.createData, 6000)
  }
}
</script>

<style>
.fullscreen-carousel {
  height: 100vh; /* 设置高度为视口高度 */
  width: 100%; /* 设置宽度为100% */
}
.el-carousel__container{
  height: 100vh; /* 设置高度为视口高度 */
  width: 100%; /* 设置宽度为100% */
}
</style>