index.vue

<template>
  <view class="h-page" ref="uv-back-top">
    <CustomNavBar :title="t('Group Stats')" />
    <view :style="`position: fixed;z-index: 99;top: ${navHeight + 44}px;`">
      <PageOptions
        ref="pageOptionsRef"
        default-type="account"
        :options="xAxisFields"
        :options-props="{ label: 'name', value: 'key' }"
        @change="handleOptionsChange"
        choose-group="1"
        has-store="0"
        :has-today="true"
        :compStyle="{ backgroundColor: '#fff', borderBottom: '1px solid #eee' }"
      />
    </view>
    <view style="height: 164rpx"></view>
    <view class="h-c-container">
      <view class="summary-stats-wrap">
        <!-- 总体统计 -->
        <view class="summary-stats">
          <view class="stat-item">
            <view class="stat-label">{{ t("TaskNotice.alarmCount") }}</view>
            <view class="stat-value">{{ totalParam.alertCount || 0 }}</view>
          </view>
          <view class="stat-item">
            <view class="stat-label">{{ t("app.inspection.handled") }}</view>
            <view class="stat-value">{{ totalParam.processed || 0 }}</view>
          </view>
          <view class="stat-item">
            <view class="stat-label">{{ t("TaskNotice.unprocessed") }}</view>
            <view class="stat-value">{{ totalParam.unprocessed || 0 }}</view>
          </view>
        </view>

        <!-- 详细表格 -->
        <view class="detail-table">
          <!-- 表头 -->
          <view class="table-header">
            <view class="header-cell store-name">{{
              t("maintenance.monitor.project.shopName")
            }}</view>
            <view class="header-cell alert-count">{{
              t("TaskNotice.alarmCount")
            }}</view>
            <view class="header-cell processed">{{
              t("app.inspection.handled")
            }}</view>
          </view>

          <!-- 表格数据 -->
          <view v-if="tableData.length > 0">
            <view
              class="table-row"
              v-for="(item, index) in tableData"
              :key="index"
            >
              <view class="table-cell store-name">{{ item.storeName }}</view>
              <view class="table-cell alert-count">{{ item.alertCount }}</view>
              <view class="table-cell processed">{{ item.processed }}</view>
            </view>
          </view>
          <view
            class="p-empty"
            v-else
            style="margin-top: 40rpx; padding-bottom: 40rpx"
          >
            <image
              class="p-empty-img"
              src="/static/common/empty.png"
              mode=""
            ></image>
            <text class="p-empty-text chart-text">{{
              t("maintenance.monitor.project.empty.text")
            }}</text>
          </view>
        </view>
      </view>
    </view>
    <uv-back-top
      :scroll-top="scrollTop"
      zIndex="999"
      icon="arrow-upward"
    ></uv-back-top>
  </view>
</template>

<script setup>
import { onReachBottom, onPageScroll, onLoad } from "@dcloudio/uni-app";
import { ref, computed, onMounted, nextTick } from "vue";
import { getStageObj } from "@/utils";
import { useNav } from "@/hooks";
import PageOptions from "@/components/PageOptions.vue";
import CustomNavBar from "@/components/CustomNav.nvue";

import { t } from "@/plugins/index.js";
import { getMallStatisticsApi } from "@/api";
import { getPageParams } from "@/utils";

// 日期选择相关
// const selectedDate = ref("");
// const selectedDateType = ref("date");
const pageOptionsRef = ref(null);

const { navHeight } = useNav();
const status = ref("loading");
const tableData = ref([]);
// 是否路由携带参数
const isRouteHaveParam = ref(false);

// groupId
const groupIdValue = ref();
onReachBottom(() => {});

onLoad((options) => {
  // 获取路由参数
  console.log(options, "options");
  const params = getPageParams(options);
  const { date, groupId } = params;
  console.log(date, "date----跳转");
  console.log(groupId, "groupId----跳转");
  groupIdValue.value = groupId;
  // 如果有日期参数，设置为date类型并传入日期
  if (date) {
    console.log("onMounted1");
    isRouteHaveParam.value = true;
    // 使用PageOptions组件的方法直接设置日期类型和日期
    console.log("暴露出方法0");
    nextTick(() => {
      pageOptionsRef.value.setDateTypeAndDate("date", date);
    });
  }
});
const scrollTop = ref(0);
onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
  // #ifdef APP-NVUE
  scrollTop.value = e.detail.scrollTop;
  // #endif
});

const params = ref({});
const totalParam = ref({});
const handleOptionsChange = (e, key) => {
  page.value = 1;
  params.value = e;
  status.value = "loading";
  console.log(params.value, "params.value-----传参");
  // 阻碍默认传7天
  const { type } = params.value;
  if (type === "last7days" && isRouteHaveParam.value) return;
  getMessageReport();
  isRouteHaveParam.value = false;
};
const getMessageReport = async () => {
  try {
    const param = {
      accountId: getStageObj("account")?.id, // 集团id
      startTime: params.value.startDate,
      endTime: params.value.endDate,
      groupId: groupIdValue.value || params.value.groupId || -1,
    };
    console.log(param, "param-----传参");
    const res = await getMallStatisticsApi(param);
    totalParam.value = {
      alertCount: res?.data?.total,
      processed: res?.data?.closeEdSum,
      unprocessed: res?.data?.unCloseSum,
    };
    const list = res?.data?.resultMap;
    tableData.value = list.map((item) => ({
      storeName: item?.mallName,
      alertCount:
        (item.statusCountMap?.CLOSED || 0) + (item.statusCountMap?.NEW || 0), // 存在属性没有的情况
      processed: item.statusCountMap?.CLOSED,
    }));
  } catch (error) {}
};
onMounted(() => {
  console.log("onMounted22", isRouteHaveParam.value);

  if (isRouteHaveParam.value) return;
  getMessageReport();
});

const page = ref(1);
const xAxisFields = ref([]);
</script>

<style lang="scss">
.h-page {
  /* #ifdef H5 */
  min-height: calc(100vh - 44px);
  /* #endif */
  /* #ifndef H5 */
  min-height: 100vh;
  /* #endif */
  background-color: #ffffff;

  .h-c-container {
    padding: 0 0rpx 20rpx;
    flex: 1;
  }
}

.summary-stats-wrap {
  padding: 32rpx;
  background-color: #fff;
  flex: 1;
}

.summary-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding: 38rpx 0;
  background: #ffffff;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 2rpx solid #eef0f3;
}

.stat-item {
  text-align: center;
  flex: 1;
  position: relative;

  &:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2rpx;
    height: 84rpx;
    background-color: #e1e4ea;
  }
}

.stat-label {
  font-weight: 400;
  font-size: 24rpx;
  color: #1d2541;
  margin-bottom: 16rpx;
}

.stat-value {
  font-weight: bold;
  font-size: 36rpx;
  color: #202328;
}

.detail-table {
  width: 100%;
}
.table-header {
  display: flex;
  padding: 18rpx 24rpx;
  background: #f9f9fc;
  .header-cell {
    font-weight: 500;
    font-size: 26rpx;
    color: #1d2541;
  }
}

.table-row {
  display: flex;
  padding: 18rpx 24rpx;
  border-bottom: 1rpx solid #f2f2f6;
}

.table-cell {
  font-weight: 400;
  font-size: 26rpx;
  color: #202328;
}

.store-name {
  flex: 1;
  text-align: left;
}

.alert-count {
  flex: 1;
  text-align: center;
}

.processed {
  flex: 1;
  text-align: center;
}
</style>