index.vue

<template>
  <view class="flow-page">
    <CustomNavBar class="custom-nav-bar" title="YAP" :is-tab="true" />
    <view class="mall" :style="`top: ${ navHeight + 44 || 44 }px`">
      <MallSelect font-size="28" :is-home="true" has-store="1" class="mall-select" choose-group="1" @change="handlStoreChange" >
      </MallSelect>
    </view>
    <view class="mall-block" style="height: 44px;"></view>

    <view class="calendar-container">
      <MonthDate
        :notifications="notificationData.monthData"
        @dateSelected="onDateSelected"
        @prevMonth="onMonthChange"
        @nextMonth="onMonthChange"
        @goToCurrentMonth="onMonthChange"
      />

      <!-- 底部统计信息 -->
      <view class="stats-footer">
        <view class="stats-item">
          <view class="stats-left">
            <image
              class="stats-icon"
              src="/static/message/calader/numberTotal.png"
            ></image>
          </view>
          <view class="stats-right">
            <text class="stats-label">{{ t("TaskNotice.alarmCount") }}</text>
            <text class="stats-value">{{ totalAlerts }}</text>
          </view>
        </view>

        <view class="stats-item">
          <view class="stats-left">
            <image
              class="stats-icon"
              src="/static/message/calader/maxTip.png"
            ></image>
          </view>
          <view class="stats-right">
            <text class="stats-label">{{ t("TaskNotice.mostAlarm") }}</text>
            <text class="stats-value">{{ maxAlertDate }}</text>
          </view>
        </view>

        <view class="stats-item">
          <view class="stats-left">
            <image
              class="stats-icon"
              src="/static/message/calader/minTip.png"
            ></image>
          </view>
          <view class="stats-right">
            <text class="stats-label">{{
              t("TaskNotice.leastAlarmDate")
            }}</text>
            <text class="stats-value">{{ minAlertDate }}</text>
          </view>
        </view>

        <view class="stats-item">
          <view class="stats-left">
            <image
              class="stats-icon"
              src="/static/message/calader/maxNumber.png"
            ></image>
          </view>
          <view class="stats-right">
            <text class="stats-label">{{ t("TaskNotice.MostStore") }}</text>
            <text class="stats-value">{{
              notificationData.maxAlertMallName || '--'
            }}</text>
          </view>
        </view>

        <view class="stats-item">
          <view class="stats-left">
            <image
              class="stats-icon"
              src="/static/message/calader/minNumber.png"
            ></image>
          </view>
          <view class="stats-right">
            <text class="stats-label">{{ t("TaskNotice.leastStore") }}</text>
            <text class="stats-value">{{
              notificationData.minAlerMallName || '--'
            }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- <view class="selected-date" v-if="selectedDate">
      <text class="selected-date-text">选择的日期: {{ selectedDate }}</text>
    </view> -->
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import MonthDate from "@/components/MonthDate.vue";
import CustomNavBar from "@/components/CustomNav.nvue";
import { t, updateTabBarText, initI18n } from "@/plugins/index.js";
import { onShow, onLoad, onPullDownRefresh } from "@dcloudio/uni-app";

import { navigateToPage, getStageObj } from "@/utils";
import { getMonthStatsApi } from "@/api/message.js";
import StatusBar from '@/components/StatusBar.vue'
import MallSelect from '@/components/MallSelect.nvue';
  import {
    useNav
  } from '@/hooks'
onShow(() => {
  initI18n();
  updateTabBarText();
});
 const { navHeight } = useNav()
// 计算tabcard高度
const height = ref(uni.getSystemInfoSync().statusBarHeight || 0)
const monthStrValue = ref('');
const notificationData = ref({
  monthData: {},
  maxAlertMallName: "",
  minAlerMallName: "",
});
// 计算属性：总警报数
const totalAlerts = computed(() => {
  const data = notificationData.value.monthData;
  return Object.values(data).reduce((sum, count) => sum + count, 0);
});

// 计算属性：最大警报数-要计算日期 // 年月日 要处理为 月日
const maxAlertDate = computed(() => {
  const data = notificationData.value.monthData;
  if (!data || Object.keys(data).length === 0) return "--";

  // 找到最大值对应的日期（年月日）
  const maxKey = Object.keys(data).find(
    (key) => data[key] === Math.max(...Object.values(data))
  );

  // 处理为 “月-日”
  if (maxKey) {
    const [, month, day] = maxKey.split("-");
    return `${month}-${day}`;
  }

  return "--";
});

// 计算属性：最小警报数-要计算日期
const minAlertDate = computed(() => {
  const data = notificationData.value.monthData;
  if (!data || Object.keys(data).length === 0) return "--";

  // 找到最大值对应的日期（年月日）
  const maxKey = Object.keys(data).find(
    (key) => data[key] === Math.min(...Object.values(data))
  );

  // 处理为 “月-日”
  if (maxKey) {
    const [, month, day] = maxKey.split("-");
    return `${month}-${day}`;
  }

  return "--";
});

// 选中的日期
const selectedDate = ref("");

// 选中的门店-或者组织-门店
const selectedStoreOrGroup = ref({});
// 日期选择事件处理
const onDateSelected = (date) => {
  selectedDate.value = formatDate(date);
  console.log("选择的日期:", selectedDate.value);
  console.log('跳转--',selectedStoreOrGroup.value);
  
  // 要区分store和group 挑战逻辑
  if (selectedStoreOrGroup.value.storeId) {
    navigateToPage(
      `/subPackages/accountGroup/pages/yap-report/store-stats/index`,
      {
        date: selectedDate.value,
        storeId: selectedStoreOrGroup.value.storeId,
      }
    );
  } else { 
    navigateToPage(
      `/subPackages/accountGroup/pages/yap-report/group-stats/index`,
      {
        date: selectedDate.value,
        groupId: selectedStoreOrGroup.value.groupId,
      }
    );
  }
};
 // storeChange
  const handlStoreChange = (e) => {
  console.log(e, "e-----selectedStoreOrGroup");
    selectedStoreOrGroup.value = {
      ...e,
      storeId: e.storeId || '',
      groupId: e.groupId || '',
    }
    // 重新获取数据
    getMonthStats(monthStrValue.value);
  }
// 月份切换事件处理
const onMonthChange = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const monthStr = `${year}-${month}`;
  console.log("月份切换:", monthStr);
  monthStrValue.value = monthStr;

  // 获取新月份的数据
  getMonthStats(monthStr);
};

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

const getMonthStats = async (month) => {
  console.log(month, "month");
  notificationData.value = {
    monthData: {},
    maxAlertMallName: "",
    minAlerMallName: "",
  };
  try {
    const res = await getMonthStatsApi({
      month,
      accountId: getStageObj("account")?.id,
      mallId: selectedStoreOrGroup.value.storeId,
      groupId: selectedStoreOrGroup.value.groupId,
    });
    console.log(res, "res");
    notificationData.value = {
      monthData: res.data.monthData[0] || {},
      // monthData: {
      //   "2025-10-16": 13,
      // },
      maxAlertMallName: res.data.maxAlertMallName,
      minAlerMallName: res.data.minAlerMallName,
    };
  } catch (error) {}
};
// 监听下拉刷新
onPullDownRefresh(() => {
  uni.stopPullDownRefresh();
});
onMounted(() => {
  // 当月年月-
  const year = new Date().getFullYear();
  const month = new Date().getMonth() + 1;
  const monthStr = String(month).padStart(2, "0");
  const yearMonthStr = `${year}-${monthStr}`;
  console.log("onMounted", yearMonthStr);
  monthStrValue.value = yearMonthStr;
  getMonthStats(yearMonthStr);
});
</script>

<style lang="scss" scoped>
.flow-page {
  background-color: #f2f3f6;
  min-height: 100vh;
  /* #ifdef H5 */
  height: calc(100vh - 60px);
  /* #endif */
}
.custom-nav-bar{
}
::v-deep(.mall-select){
  .mall-select-group{
  }
}
  .mall {
    position: fixed;
    left: 0;
    width: 750rpx;
    height: 44px;
    z-index: 999;
    background-color: #3277FB;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* #ifdef H5 */
    top: 44px;
    /* #endif */
    /* #ifndef H5 */
    top: 0;
    /* #endif */
  }
  .nav-left-icon{
    position: fixed;
    left: 20rpx;
    top: 60px
  }

.page-header {
  margin-bottom: 30rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #202328;
}

.calendar-container {
  padding: 20rpx;
}

.selected-date {
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
}

.selected-date-text {
  font-size: 28rpx;
  color: #202328;
}

.stats-footer {
  margin-top: 20rpx;
  padding-top: 20rpx;
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.stats-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rpx 26rpx;
  gap: 16rpx;
}

.stats-left {
  display: flex;
  align-items: center;
}
.stats-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2rpx solid #eef0f3;
  padding: 24rpx 0rpx;
}

.stats-icon {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
}

.stats-label {
  font-weight: 400;
  font-size: 28rpx;
  color: #262626;
}

.stats-value {
  font-weight: 400;
  font-size: 28rpx;
  color: #90949d;
}
</style>