babyhealth/pages/businessDatas/index.vue

<template>
  <view class="business-data-page">
    <!-- 使用子头部组件 -->
    <sub-header
      title="业务数据总览"
      @goBack="goBack"
      @showMoreOptions="showMoreOptions"
    />

    <!-- 数据分类列表 -->
    <view class="data-categories">
      <view
        class="category-item"
        v-for="category in dataCategories"
        :key="category.id"
        @click="navigateToDetail(category)"
      >
        <view
          class="category-icon"
          :style="{ backgroundColor: category.bgColor }"
        >
          <i :class="category.icon"></i>
        </view>
        <view class="category-content">
          <view class="category-title">{{ category.title }}</view>
          <view class="category-desc">{{ category.description }}</view>
          <view class="category-stats">
            <text class="stat-item">{{ category.dataCount }}个数据源</text>
            <text class="stat-item">{{ category.updateTime }}</text>
          </view>
        </view>
        <view class="category-arrow">
          <i class="fas fa-chevron-right"></i>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import SubHeader from "../components/subHeader.vue";

// 数据分类列表
const dataCategories = ref([
  {
    id: 1,
    title: "港口数据",
    description: "港口吞吐量等相关数据",
    icon: "fas fa-chart-line",
    bgColor: "#4ECDC4",
    dataCount: 8,
    updateTime: "2小时前更新",
  },
  {
    id: 2,
    title: "财务数据",
    description: "收入、支出、报销、预算等财务相关数据",
    icon: "fas fa-money-bill-wave",
    bgColor: "#FECA57",
    dataCount: 12,
    updateTime: "1小时前更新",
  },
  {
    id: 3,
    title: "客户数据",
    description: "客户信息、满意度、活跃度等客户相关数据",
    icon: "fas fa-user-friends",
    bgColor: "#45B7D1",
    dataCount: 6,
    updateTime: "30分钟前更新",
  },
  {
    id: 4,
    title: "运营数据",
    description: "访问量、转化率、用户行为等运营相关数据",
    icon: "fas fa-chart-bar",
    bgColor: "#FF6B6B",
    dataCount: 10,
    updateTime: "15分钟前更新",
  },
  {
    id: 5,
    title: "人力资源数据",
    description: "员工信息、考勤、绩效等人力资源相关数据",
    icon: "fas fa-users",
    bgColor: "#96CEB4",
    dataCount: 15,
    updateTime: "1天前更新",
  },
  {
    id: 6,
    title: "项目数据",
    description: "项目进度、任务完成情况、资源分配等项目相关数据",
    icon: "fas fa-project-diagram",
    bgColor: "#A8E6CF",
    dataCount: 9,
    updateTime: "3小时前更新",
  },
]);

// 导航到详情页面
const navigateToDetail = (category) => {
  // 特殊处理港口数据，直接跳转到portData页面
  if (category.id === 1) {
    uni.navigateTo({
      url: "/pages/businessDatas/portData",
    });
  } else {
    // 其他数据跳转到通用详情页面
    uni.navigateTo({
      url: `/pages/businessDatas/detail?categoryId=${category.id}&title=${category.title}`,
    });
  }
};

// 头部相关方法
const goBack = () => {
  uni.navigateBack();
};

const showMoreOptions = () => {
  uni.showActionSheet({
    itemList: ["刷新", "返回首页"],
    success: (res) => {
      switch (res.tapIndex) {
        case 0:
          // 刷新数据
          uni.reLaunch({
            url: "/pages/businessDatas/index",
          });
          uni.showToast({ title: "数据已刷新", icon: "success" });
          break;
        case 1:
          uni.reLaunch({
            url: "/pages/index/index",
          });
          uni.showToast({ title: "已返回工作台", icon: "success" });
          break;
      }
    },
  });
};
</script>

<style lang="scss" scoped>
.business-data-page {
  background: #f9f9fb;
  min-height: 100vh;
  padding-top: calc(var(--status-bar-height) + 88rpx);
  padding-bottom: 40rpx;
}

/* 支持安全区域的设备 */
@supports (padding: max(0px)) {
  .business-data-page {
    padding-top: calc(
      var(--status-bar-height) + 88rpx + env(safe-area-inset-top)
    );
  }
}

/* 数据分类列表 */
.data-categories {
  padding: 24rpx;
}

.category-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  border: 1rpx solid #f0f0f0;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.category-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  flex-shrink: 0;

  i {
    font-size: 36rpx;
    color: #fff;
  }
}

.category-content {
  flex: 1;
  min-width: 0;
}

.category-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
  line-height: 1.4;
}

.category-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 12rpx;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.category-stats {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
}

.stat-item {
  font-size: 22rpx;
  color: #999;
  background: #f5f5f5;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  line-height: 1.2;
}

.category-arrow {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  flex-shrink: 0;

  i {
    font-size: 24rpx;
  }
}
</style>