You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.6 KiB
66 lines
1.6 KiB
2 years ago
|
<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/menu_bg.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>
|