【feat】【v3】

1.增加数据页面逻辑

src/apis/apis.js

@@ -7,6 +7,7 @@ import * as settleApi from './settleApi.js';
 import * as dictApi from './dictApi.js';
 import * as tokenApi from './tokenApi.js';
 import * as accountApi from './accountApi.js';
+import * as statApi from './statApi.js';
 
 export {
 	loginApi,
@@ -17,5 +18,6 @@ export {
 	settleApi,
 	dictApi,
 	tokenApi,
-	accountApi
+	accountApi,
+	statApi
 }

src/apis/punchInApi.js

@@ -124,4 +124,18 @@ export function remakePunchIn(data) {
     method: "post",
     data
   });
+}
+
+/**
+ * 查询打卡记录历史
+ * @param {Object} data
+ */
+export function queryPunchInHistory(data) {
+  return request({
+    url: "/punchIn/queryPunchInHistory",
+    method: "get",
+    data,
+	loading: true,
+	loadingText: "正在查询打卡记录，请稍后..."
+  });
 }

src/apis/statApi.js

@@ -0,0 +1,40 @@
+import request from "@/utils/request";
+
+/**
+ * 查询结算积分记录
+ * @param {Object} data
+ */
+export function queryStatPointsLine() {
+    return request({
+        url: "/stat/queryStatPointsLine",
+        method: "get",
+        loading: true,
+        loadingText: "查询中..."
+    });
+}
+
+/**
+ * 查询新用户折线图
+ * @param {Object} data
+ */
+export function queryStatNewUserLine() {
+    return request({
+        url: "/stat/queryStatNewUserLine",
+        method: "get",
+        loading: true,
+        loadingText: "查询中..."
+    });
+}
+
+/**
+ * 查询任务折线图
+ * @param {Object} data
+ */
+export function queryStatTaskLine() {
+    return request({
+        url: "/stat/queryStatTaskLine",
+        method: "get",
+        loading: true,
+        loadingText: "查询中..."
+    });
+}

src/pages/statData.vue

@@ -1,8 +1,218 @@
 <template>
-  <div class="data">data</div>
+
+  <view class="tab-header">
+    <uni-segmented-control :current="currentTabIndex" :values="tabs" style-type="button" active-color="#BDE0FF"
+      @clickItem="switchTab" />
+  </view>
+
+  <!-- 图表 -->
+  <view v-if="currentTabIndex === 0">
+    <!-- 积分变动 -->
+    <view class="charts-box">
+      <qiun-data-charts type="line" :opts="chartOpts" :chartData="chartsData.pointsLineVO" :canvas2d="true"
+        :loadingType="chatLoadingType" canvasId="mbnxeAGxItOvNjxrYfKUKyifYeNyjLGj1" />
+    </view>
+
+    <!-- 任务完成数 -->
+    <view class="charts-box">
+      <qiun-data-charts type="line" :opts="chartOpts" :chartData="chartsData.taskLineVO" :canvas2d="true"
+        :loadingType="chatLoadingType" canvasId="mbnxeAGxItOvNjxrYfKUKyifYeNyjLGj2" />
+    </view>
+
+    <!-- 新用户数，特权用户专属 -->
+    <view class="charts-box">
+      <qiun-data-charts type="line" :opts="chartOpts" :chartData="chartsData.userLineVO" :canvas2d="true"
+        :loadingType="chatLoadingType" canvasId="mbnxeAGxItOvNjxrYfKUKyifYeNyjLGj3" />
+    </view>
+  </view>
+
+  <!-- 打卡日志 -->
+  <view v-if="currentTabIndex === 1">
+    <uni-calendar @change="calendarSwitchChange" />
+    <view class="log-box">
+      <uni-section title="打卡记录" type="line">
+        <uni-list>
+          <uni-list-item v-for="piTaskHistory in piTaskHistoryData" :key="piTaskHistory.punchInDate">
+            <template v-slot:body>
+              {{ piTaskHistory.punchInDate }}
+              <span v-if="piTaskHistory.punchInResult == PUNCH_IN_RESULT.DONE"> 完成打卡</span>
+              <span v-else> 未完成打卡</span>
+              <span v-if="piTaskHistory.punchInMethod == PUNCH_IN_METHOD.COUNT">，打卡{{ piTaskHistory.countTrack
+                }}次</span>
+              <span v-if="piTaskHistory.punchInMethod == PUNCH_IN_METHOD.TIMING">，打卡时长{{ piTaskHistory.timeTrack
+                }}</span>
+            </template>
+          </uni-list-item>
+        </uni-list>
+        <uni-load-more status="no-more" v-if="!piTaskHistoryData || piTaskHistoryData.length == 0" />
+      </uni-section>
+    </view>
+  </view>
+
 </template>
 
 <script setup>
+import { ref } from 'vue';
+import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app';
+import { statApi, punchInApi } from '@/apis/apis';
+import { PUNCH_IN_RESULT, PUNCH_IN_METHOD, STAT_PERIOD } from '@/common/enums';
+
+// 属性
+/**
+ * 当前选项卡下标
+ */
+const currentTabIndex = ref(0);
+
+/**
+ * 选项卡
+ */
+const tabs = ['图表', '打卡日志'];
+
+/**
+ * 打卡日志查询条件
+ */
+const queryData = ref({
+  "year": '2025',
+  "month": "05",
+  "date": "03"
+});
+
+/**
+ * 打卡日历数据
+ */
+const piTaskHistoryData = ref([]);
+
+/**
+ * 图表加载动画
+ */
+const chatLoadingType = ref(2);
+
+/**
+ * 图表配置
+ */
+const chartOpts = ref({
+  color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
+  padding: [15, 10, 0, 15],
+  enableScroll: true,
+  legend: {},
+  xAxis: {
+    disableGrid: true,
+    scrollShow: true,
+    itemCount: 1
+  },
+  yAxis: {
+    gridType: "dash",
+    dashLength: 2
+  },
+  extra: {
+    line: {
+      type: "straight",
+      width: 2,
+      activeType: "hollow"
+    }
+  }
+});
+
+/**
+ * 图表数据
+ */
+const chartsData = ref({
+  pointsLineVO: {},
+  taskLineVO: {},
+  userLineVO: {}
+});
+
+// 方法
+/**
+ * 切换选项卡
+ */
+const switchTab = (e) => {
+  if (currentTabIndex.value !== e.currentIndex) {
+    currentTabIndex.value = e.currentIndex
+    if (e.currentIndex == 1) {
+      loadPunchInHistoryData();
+    }
+  }
+}
+
+/**
+ * 日历月份切换
+ */
+const calendarSwitchChange = (e) => {
+  console.log("出发啦啦啦");
+  queryData.value = e;
+  loadPunchInHistoryData();
+}
+
+/**
+ * 查询积分数据
+ */
+const loadStatPointsData = async () => {
+  let res = await statApi.queryStatPointsLine();
+  chartsData.value.pointsLineVO = res ? res : {};
+}
+
+/**
+ * 查询新用户折线图
+ */
+const loadStatNewUserData = async () => {
+  let res = await statApi.queryStatNewUserLine();
+  chartsData.value.userLineVO = res ? res : {};
+}
+
+/**
+ * 查询任务折线图
+ */
+const loadStatTaskData = async () => {
+  let res = await statApi.queryStatTaskLine();
+  chartsData.value.taskLineVO = res ? res : {};
+}
+
+/**
+ * 查询打卡记录
+ */
+const loadPunchInHistoryData = async () => {
+  let punchInDate = `${queryData.value.year}-${queryData.value.month.toString().padStart(2, "0")}-${queryData.value.date.toString().padStart(2, "0")}`;
+  let res = await punchInApi.queryPunchInHistory({ punchInDate });
+  piTaskHistoryData.value = res ? res : [];
+}
+
+
+// 生命周期
+onLoad(() => {
+  let today = new Date();
+  queryData.value.year = today.getFullYear();
+  queryData.value.month = today.getMonth() + 1;
+  queryData.value.date = today.getDate();
+});
+
+onShow(() => {
+  loadStatPointsData();
+  loadStatNewUserData();
+  loadStatTaskData();
+});
+
+onPullDownRefresh(() => {
+  loadStatPointsData();
+  loadStatNewUserData();
+  loadStatTaskData();
+  uni.stopPullDownRefresh();
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.tab-header {
+  margin: 16rpx 0;
+  padding: 0 48rpx;
+}
+
+.charts-box {
+  padding: 16rpx 16rpx;
+  width: 100%;
+  height: 400rpx;
+}
+
+.log-box {
+  margin-top: 24rpx;
+}
+</style>

src/pages/task/taskDetail.vue

@@ -80,7 +80,7 @@
       :loadingType="chatLoadingType" canvasId="mbnxeAGxItOvNjxrYfKUKyifYeNyjLGj" />
   </view>
 
-  <!-- <uni-section title="打卡日志" padding="16px" type="line">
+  <uni-section title="打卡日志" padding="16px" type="line">
     <uni-list>
       <uni-list-item v-for="taskHistory in statData.piTaskHistoryStatVOS" :key="taskHistory.punchInDate">
         <template v-slot:body>
@@ -90,10 +90,10 @@
           <span v-if="taskHistory.punchInMethod == PUNCH_IN_METHOD.COUNT">，打卡{{ taskHistory.countTrack }}次</span>
           <span v-if="taskHistory.punchInMethod == PUNCH_IN_METHOD.TIMING">，打卡时长{{ taskHistory.timeTrack }}</span>
         </template>
-</uni-list-item>
-</uni-list>
-<uni-load-more status="no-more" v-if="statData.piTaskHistoryStatVOS.length == 0" />
-</uni-section> -->
+      </uni-list-item>
+    </uni-list>
+    <uni-load-more status="no-more" v-if="statData.piTaskHistoryStatVOS.length == 0" />
+  </uni-section>
 
 </template>