pms-app/pages/statistic/index.vue

<template>
<view class="page root">
  <view class="page-back" />
  <view style="height: 25px" />
  <uni-nav-bar
    :title="$t('statistic.title')"
    :border="false"
    left-icon="back"
    background-color="transparent"
    color="#FFFFFF"
    @click-left="onBack"
  />
  <uni-row class="flex-row align-center" style="margin-left: 15px; padding-top: 8px">
    <view v-for="(item, index) of tabs" :key="index" style="margin-right: 20px">
      <text
          :class="index === currentTab ? 'tab-selected' : 'tab-normal'"
          @click="onTabChanged(index)"
      >
        {{ item }}
      </text>
    </view>
  </uni-row>
  <swiper class="view-pager" :current="currentTab" duration="100" @change="onSwiperChanged($event)">
    <swiper-item style="height: 100%; overflow-y: scroll">
      <!--   首页   -->
      <front-page ref="frontPage" />
    </swiper-item>

    <swiper-item style="height: 100%; overflow-y: scroll">
      <!--   维修统计   -->
      <repair-page ref="repairPage" />
    </swiper-item>
    <swiper-item style="height: 100%; overflow-y: scroll">
      <!--   保养统计   -->
      <maintenance-page ref="maintenancePage" />
    </swiper-item>
    <swiper-item style="height: 100%; overflow-y: scroll">
      <!--   巡检统计   -->
      <inspection-page ref="inspectionPage" />
    </swiper-item>
  </swiper>
</view>
</template>

<script setup>
import { getCurrentInstance, nextTick, onMounted, ref } from "vue";
import FrontPage from '@/components/statistic/front.vue'
import RepairPage from '@/components/statistic/rapair.vue'
import MaintenancePage from '@/components/statistic/maintenance.vue'
import InspectionPage from '@/components/statistic/inspection.vue'

const { appContext } = getCurrentInstance()
const t = appContext.config.globalProperties.$t

const frontPage = ref()
const repairPage = ref()
const maintenancePage = ref()
const inspectionPage = ref()

const currentTab = ref(0)
const tabs = [t('statistic.tab0'),t('statistic.tab1'), t('statistic.tab2'), t('statistic.tab3')]
const onTabChanged = (index) => {
  setPage(index)
}
const onSwiperChanged = (event) => {
  setPage(event.detail.current)
}
const setPage = async (index) => {
  currentTab.value = index

  // 延迟加载数据，避免多次请求
  await nextTick()
  if (index === 0) {
    frontPage.value.loadData()
  } else if (index === 1) {
    repairPage.value.loadData()
  } else if (index === 2) {
    maintenancePage.value.loadData()
  } else if (index === 3) {
    inspectionPage.value.loadData()
  }
}

const onBack = () => {
  uni.navigateBack()
};

onMounted(() => frontPage.value.loadData())

</script>

<style scoped lang="scss">
.page {
  padding: 0;
}
.root {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.tab-selected {
  font-size: 18px;
  font-weight: 500;
  color: white;
}

.tab-normal {
  font-size: 14px;
  color: white;
}

.divider {
  width: 1px;
  height: 114px;
  background-color: #CACCCF;
  margin: 0 24px;
}

.divider-v {
  width: auto;
  height: 1.5px;
  border-bottom: 1.5px #CACCCF dashed;
  margin: 0 20px;
}

.divider-h {
  width: 1.5px;
  height: 50px;
  border-left: 1.5px #CACCCF dashed;
  margin: 0 4px;
}

.count-label {
  color: #666666;
  font-size: 14px;
}

.count-value {
  color: #333333;
  font-size: 18px;
  font-weight: 500;
}

.mt-5 {
  margin-top: 5px;
}

.mt-8 {
  margin-top: 8px;
}

.pl-10 {
  padding-left: 10px;
}

.view-pager {
  height: calc(100% - 44px - 60px);
}
</style>