index.vue

<template>
  <view class="h-page">
    <CustomNavBar :title="t('Store Stats')" />
    <PageOptions
      ref="pageOptionsRef"
      :has-today="true"
      @change="handleOptionsChange"
      :compStyle="{ backgroundColor: '#fff', borderBottom: '1px solid #eee' }"
    ></PageOptions>
    <view class="h-c-container">
      <view class="statistic">
        <view class="s-item">
          <view>{{ t("TaskNotice.alarmCount") }}</view>
          <view class="count">{{ alertCount }}</view>
        </view>
        <view class="s-item">
          <view>{{ t("app.inspection.handled") }}</view>
          <view class="count">{{ processed }}</view>
        </view>
      </view>

      <view style="margin-top: 28rpx; font-weight: 500">{{
        t("TaskNotice.histProcTrend")
      }}</view>
      <view style="height: 480rpx">
        <ChartsNvue v-if="renderFlag === '1'" ref="chartsRef" />
        <view
          class="p-empty"
          v-if="renderFlag === '0'"
          style="margin-top: 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>
</template>

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

import { getDayStatisticsApi } from "@/api/message.js";
import { getStageObj, rpx2Px, getPageParams } from "@/utils";
import { t } from "@/plugins/index.js";

// #ifdef APP-PLUS || H5
import * as echarts from "echarts";
// #endif
// #ifdef MP-WEIXIN
const echarts = require("../../../../../uni_modules/lime-echart/static/echarts.min");
// #endif

const params = ref({});
const initFlag = ref(false);
const pageOptionsRef = ref(null);
// 是否路由携带参数
const isRouteHaveParam = ref(false);

onLoad((options) => {
  // 获取路由参数
  console.log(options, "options");
  const params = getPageParams(options);
  const { date, storeId } = params;
  // 如果有日期参数，设置为date类型并传入日期
  if (date) {
    console.log("onMounted1");
    isRouteHaveParam.value = true;
    // 使用PageOptions组件的方法直接设置日期类型和日期
    console.log("暴露出方法0");
    nextTick(() => {
      pageOptionsRef.value.setDateTypeAndDate("date", date);
    });
  }
});
const handleOptionsChange = (e) => {
  params.value = e;
  // 阻碍默认传7天
  const { type } = params.value;
  if (type === "last7days" && isRouteHaveParam.value) return;
  initPage();
  isRouteHaveParam.value = false;
};

const residenceTimeRef = ref(null);
const processed = ref(0);
const alertCount = ref(0);
const initPage = async () => {
  try {
    const requestParams = {
      accountId: getStageObj("account")?.id,
      startTime: params.value.startDate,
      endTime: params.value.endDate,
      mallId: params.value.storeId || "",
    };

    const res = await getDayStatisticsApi(requestParams);
    if (res.code === 200) {
      processed.value = res.data?.closeEdSum || 0;
      alertCount.value = res.data?.total || 0;
      initChart(res.data?.result || []);
    }
    console.log(res, "res");
  } catch (error) {
    console.log(error);
  }
};

const renderFlag = ref("");
const chartsRef = ref(null);
const initChart = (data) => {
  // const data = [{
  //     date: '09-23',
  //     closenum: 19,
  //     unclosenum: 19,
  //     totalnum: 38
  //   },{
  //     date: '09-24',
  //     closenum: 0,
  //     unclosenum: 0,
  //     totalnum: 0
  //   },{
  //     date: '09-25',
  //     closenum: 4,
  //     unclosenum: 5,
  //     totalnum: 9
  //   },{
  //     date: '09-26',
  //     closenum: 11,
  //     unclosenum: 99,
  //     totalnum: 110
  //   }]
  if (data.length > 0) {
    renderFlag.value = "1";
  } else {
    renderFlag.value = "0";
    return false;
  }
  const val = {
    date: [],
    total: [],
    processed: [],
  };
  data.forEach((item) => {
    val.date.push(item.date);
    val.total.push(item.totalnum);
    val.processed.push(item.closenum);
  });

  const option = {
    grid: {
      containLabel: true,
      top: rpx2Px(40),
      left: 0,
      right: 0,
      bottom: rpx2Px(60),
    },
    legend: {
      show: true,
      icon: "circle",
      itemWidth: rpx2Px(16),
      itemHeight: rpx2Px(16),
      bottom: 0,
      left: "center",
      textStyle: {
        color: "#4E515E",
      },
    },
    xAxis: {
      type: "category",
      data: val.date,
      boundaryGap: false,
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#656A72",
      },
      axisLine: {
        lineStyle: {
          color: "#E1E4EA",
        },
      },
    },
    tooltip: {
      trigger: "axis",
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: t("TaskNotice.alarmCount"),
        data: val.total,
        type: "line",
        showSymbol: false,
        smooth: true,
        lineStyle: {
          color: "#387CF5",
        },
        itemStyle: {
          color: "#387CF5",
        },
      },
      {
        name: t("app.inspection.handled"),
        data: val.processed,
        type: "line",
        showSymbol: false,
        smooth: true,
        lineStyle: {
          color: "#FFAB37",
        },
        itemStyle: {
          color: "#FFAB37",
        },
      },
    ],
  };
  nextTick(() => {
    chartsRef.value?.initCharts(option);
  });
};
</script>

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

  .h-c-container {
    padding: 28rpx 32rpx 0;

    .statistic {
      display: flex;
      gap: 20rpx;

      .s-item {
        flex: 1;
        height: 160rpx;
        min-width: 0;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        border: 2rpx solid #eef0f3;
        padding: 28rpx 0 0 32rpx;

        view {
          font-family: Inter, Inter;
          font-weight: 500;
          font-size: 28rpx;
          color: #262626;
        }

        .count {
          font-size: 40rpx;
          font-weight: 500;
        }
      }
    }
  }
}
</style>