iot-ui-plus/src/views/monitoring/screen/components/infoPanel.vue

<template>
  <div class="infoPanel">
    <swiper class="swiper" :loop="true"
      :autoplay="{ delay: 500000, pauseOnMouseEnter: true, disableOnInteraction: false }" :modules="modules"
      :slides-per-view="4" :space-between="15" navigation :pagination="{ clickable: true }">
      <swiper-slide class="item" v-for="(item, index) in panelData" :key="index">
        <div class="content">
          <div class="icon">
            <img src="@/assets/images/panel_icon.png" />
          </div>
          <div class="numValue">
            <span>
              <countTo :start="1" :end="item.value" :duration="3000"></countTo>
            </span>
            <i>{{ item.ext }}</i>
            <p>{{ item.title }}</p>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import { getTableFooter } from '@/api/table/list';
import { PanelVo } from '@/api/table/types';
import countTo from '@/utils/countTo';
import 'swiper/css';

const modules = [Navigation, Pagination, Autoplay];
const panelData = ref<PanelVo[]>();

// interface CardData {
//   id: string;
//   title: string;
//   value: number;
//   ext: string,
//   time: number;
//   icon: string;
// }

// const cardData: CardData[] = [
//   {
//     id: '1',
//     title: '设备在线率',
//     value: 95,
//     ext: '%',
//     time: 5000,
//     icon: ''
//   },
// ];

onMounted(() => {
  getPanel()
});

function getPanel() {
  //获取表格数据
  getTableFooter().then((res: any) => {
    if (res.code === 200) {
      panelData.value = res.data;
    }
  });
}
</script>