IndexPage.vue

<!--
 * 机台列表轮播图
  -->
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { machineList1, machineList2 } from '../../config';
import EquipmentPage from './EquipmentPage.vue';

const state = reactive({
  list: [] as any,
  autoplay: 10000,
});

onMounted(() => {
  state.list = handleMachineList(machineList1);
  state.autoplay = 3000;
});

function handleMachineList(data: any) {
  const step = 10; // 10个一组
  const length = data.length;
  const divisionRes = division(length, step);

  let DATA = JSON.parse(JSON.stringify(data));
  let arr = [] as any;
  for (let i = 0; i < divisionRes.int; i++) {
    const newArr = DATA.slice(i * step, (i + 1) * step);
    arr.push(newArr);
  }
  const last = divisionRes.int * step;
  if (DATA.slice(last).length > 0) {
    arr.push(DATA.slice(last));
  }

  return arr;
}

// 取整 取余
function division(n: number, m: number) {
  const yu = n % m;
  const int = parseInt(String(n / m));
  return {
    yu,
    int,
  };
}

function changeData1() {
  state.list = handleMachineList(machineList2);
}
function resetData() {
  state.list = handleMachineList(machineList1);
}
function changeTime1() {
  state.autoplay = 1000;
}
function changeTime2() {
  state.autoplay = 5000;
}
</script>
<template>
  <div>机台列表</div>
  <div>
    <q-btn label="改变数据1" color="primary" @click="changeData1" />
    <q-btn label="重置" color="primary" @click="resetData" />
    <q-btn label="改变轮播时间1000" color="orange" @click="changeTime1" />
    <q-btn label="改变轮播时间5000" color="orange" @click="changeTime2" />
  </div>
  <div class="my-warp-box">
    <equipment-page :list="state.list" :autoplay="state.autoplay" />
  </div>
</template>

<style lang="scss" scoped>
.my-warp-box {
  width: 500px;
  height: 300px;
  border: 1px solid red;
  background-color: black;
}
</style>