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

<template>
  <div class="infoPanel">
    <swiper
      class="swiper"
      :loop="false"
      :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" v-if="item.type === 'A'">
            <span>
              <countTo :start="1" :end="item.value" :duration="3000"></countTo>
            </span>
            <i>{{ item.ext }}</i>
            <p>{{ item.title }}</p>
          </div>
          <div class="numValueMore" v-if="item.type === 'B'">
            <div class="numItem" v-for="(res, index) in item.ext" :key="index">
              <span>{{ res.name }}：</span>
              <span><countTo :start="1" :end="res.value" :duration="3000"></countTo></span>
              <span>{{ res.unit }}</span>
            </div>
          </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 mitt from '@/plugins/bus';
import 'swiper/css';

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

// const panelData: PanelVo[] = [
//   {
//     title: '总产热量',
//     value: 26449,
//     ext: 'KJ',
//     backImg: '/poll/hot',
//     type: 'A',
//     id: 2
//   },
//   {
//     title: '一次网补水',
//     value: 9889,
//     ext: 'm³',
//     backImg: '/poll/onewater',
//     type: 'A',
//     id: 3
//   },
//   {
//     title: '设备在线率',
//     value: 40.425532,
//     ext: '%',
//     backImg: '/poll/dev',
//     type: 'A',
//     id: 1
//   },
//   {
//     title: '告警累计',
//     value: 27893,
//     ext: '次',
//     backImg: '/poll/alert',
//     type: 'A',
//     id: 4
//   },
//   {
//     title: '',
//     value: 0,
//     ext: [
//       {
//         name:'一次网供水温度',
//         value:'58996',
//         ext:'℃'
//       },
//       {
//         name:'一次网回水温度',
//         value:'58996',
//         ext:'℃'
//       },
//       {
//         name:'一次网供水流量',
//         value:'58996',
//         ext:'℃'
//       },
//       {
//         name:'一次网回水流量',
//         value:'32369',
//         ext:'t/h'
//       },
//       {
//         name:'一次网瞬时补水',
//         value:'58996',
//         ext:'℃'
//       },
//       {
//         name:'一次网耗热累计',
//         value:'58996',
//         ext:'℃'
//       },
//       {
//         name:'一次网补水累计',
//         value:'8956',
//         ext:'T'
//       }
//     ],
//     backImg: '/poll/alert',
//     type: 'B',
//     id: 5
//   }
// ];

onMounted(() => {
  deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
  getPanel();
});

mitt.on('menuKey', (res: any) => {
  //监听左侧菜单点击
  deptId.value = res;
  getPanel();
});

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