|
|
@@ -0,0 +1,277 @@
|
|
|
+<template>
|
|
|
+ <view class="px-30 py-38 bg-white">
|
|
|
+ <view class="flex gap-x-20">
|
|
|
+ <view class="flex items-center gap-x-20 flex-wrap">
|
|
|
+ <view class="picker-wrap">
|
|
|
+ <ie-picker ref="pickerRef" v-model="form.year" :list="yearList" placeholder="请选择" title="选择年份" :fontSize="26"
|
|
|
+ icon="arrow-down" key-label="label" key-value="value" @change="handleYearChange">
|
|
|
+ <template #default="{ label }">
|
|
|
+ <text>{{ label }}年</text>
|
|
|
+ </template>
|
|
|
+ </ie-picker>
|
|
|
+ </view>
|
|
|
+ <view class="picker-wrap">
|
|
|
+ <ie-picker ref="pickerRef" v-model="form.month" :list="monthList" placeholder="请选择" title="选择月份"
|
|
|
+ :fontSize="26" icon="arrow-down" key-label="label" key-value="value" @change="handleMonthChange">
|
|
|
+ <template #default="{ label }">
|
|
|
+ <text>第{{ label }}</text>
|
|
|
+ </template>
|
|
|
+ </ie-picker>
|
|
|
+ </view>
|
|
|
+ <view class="picker-wrap">
|
|
|
+ <ie-picker ref="pickerRef" v-model="form.week" :list="weekList" placeholder="请选择" title="选择周" :fontSize="26"
|
|
|
+ icon="arrow-down" key-label="label" key-value="value" @change="handleWeekChange">
|
|
|
+ <template #default="{ label }">
|
|
|
+ <text>第{{ label }}</text>
|
|
|
+ </template>
|
|
|
+ </ie-picker>
|
|
|
+ </view>
|
|
|
+ <view class="btn-wrap" @click="handleOpenCalendar">
|
|
|
+ <text>刷题日历</text>
|
|
|
+ <uv-icon name="search" size="16" color="white" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-30 flex h-280 gap-x-20">
|
|
|
+ <view class="flex-1 h-full">
|
|
|
+ <ie-echart :option="options1" />
|
|
|
+ </view>
|
|
|
+ <view class="flex-1 h-full">
|
|
|
+ <ie-echart :option="options2" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-30 flex items-center">
|
|
|
+ <text>已累计刷题</text>
|
|
|
+ <text class="text-32 text-primary">24</text>
|
|
|
+ <text>天~</text>
|
|
|
+ </view>
|
|
|
+ <view class="mt-30">
|
|
|
+ <ie-table :tableColumns="tableColumns" :data="tableDate">
|
|
|
+ <template #date="{ item }">
|
|
|
+ <text class="font-bold">{{ item.date }}</text>
|
|
|
+ </template>
|
|
|
+ <template #questionNum="{ item }">
|
|
|
+ <text class="font-bold">{{ item.questionNum }}</text>
|
|
|
+ </template>
|
|
|
+ <template #correctNum="{ item }">
|
|
|
+ <text class="font-bold">{{ item.correctNum }}</text>
|
|
|
+ </template>
|
|
|
+ </ie-table>
|
|
|
+ </view>
|
|
|
+ <root-portal>
|
|
|
+ <uv-popup ref="calendarPopupRef" mode="bottom" :round="16">
|
|
|
+ <view class="min-h-200">
|
|
|
+ <uni-calendar :insert="true" :lunar="false" :readonly="true" :showMonth="false" :selected="selected"
|
|
|
+ :endDate="endDate" @change-month="handleCalendarChange" />
|
|
|
+ </view>
|
|
|
+ </uv-popup>
|
|
|
+ </root-portal>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { TableColumnConfig } from '@/types';
|
|
|
+import ieEchart from './ie-echart/ie-echart.vue';
|
|
|
+import { CSSProperties } from 'vue';
|
|
|
+const form = ref({
|
|
|
+ year: '',
|
|
|
+ month: '',
|
|
|
+ week: ''
|
|
|
+})
|
|
|
+const year = ref('');
|
|
|
+const yearList = ref([
|
|
|
+ {
|
|
|
+ label: '2025',
|
|
|
+ value: '2025'
|
|
|
+ }
|
|
|
+]);
|
|
|
+const monthList = ref([
|
|
|
+ {
|
|
|
+ label: '10月',
|
|
|
+ value: '1'
|
|
|
+ }
|
|
|
+]);
|
|
|
+const weekList = ref([
|
|
|
+ {
|
|
|
+ label: '1周',
|
|
|
+ value: '1'
|
|
|
+ }
|
|
|
+]);
|
|
|
+const options1 = computed(() => {
|
|
|
+ return {
|
|
|
+ title: {
|
|
|
+ text: '680',
|
|
|
+ subtext: '{a|刷题总量}',
|
|
|
+ left: 'center',
|
|
|
+ top: '34%',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ color: '#222'
|
|
|
+ },
|
|
|
+ subtextStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#666',
|
|
|
+ lineHeight: 12,
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ color: '#B3B3B3',
|
|
|
+ padding: [0, 0, 10, 0]
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['60%', '80%'],
|
|
|
+ startAngle: 90,
|
|
|
+ label: { show: false },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: 45,
|
|
|
+ itemStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ { offset: 0, color: '#FEC048' },
|
|
|
+ { offset: 1, color: '#F9942F' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 55,
|
|
|
+ itemStyle: { color: '#FFF5DE' }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+});
|
|
|
+const options2 = computed(() => {
|
|
|
+ return {
|
|
|
+ title: {
|
|
|
+ text: '75%',
|
|
|
+ subtext: '{a|正确率}',
|
|
|
+ left: 'center',
|
|
|
+ top: '34%',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ color: '#222'
|
|
|
+ },
|
|
|
+ subtextStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#666',
|
|
|
+ lineHeight: 12,
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ color: '#B3B3B3',
|
|
|
+ padding: [0, 0, 10, 0]
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['60%', '80%'],
|
|
|
+ startAngle: 90,
|
|
|
+ label: { show: false },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: 75,
|
|
|
+ itemStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ { offset: 0, color: '#70C8FD' },
|
|
|
+ { offset: 1, color: '#31A0FC' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 35,
|
|
|
+ itemStyle: { color: '#EBF9FF' }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+});
|
|
|
+const tableColumns = ref<TableColumnConfig[]>([
|
|
|
+ {
|
|
|
+ prop: 'date',
|
|
|
+ label: '日期',
|
|
|
+ flex: 1,
|
|
|
+ slot: 'date'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'questionNum',
|
|
|
+ label: '题量',
|
|
|
+ flex: 1,
|
|
|
+ slot: 'questionNum'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'correctNum',
|
|
|
+ label: '正确率',
|
|
|
+ flex: 1,
|
|
|
+ slot: 'correctNum'
|
|
|
+ }
|
|
|
+]);
|
|
|
+const cellStyle: CSSProperties = {
|
|
|
+ padding: '30rpx 20rpx'
|
|
|
+}
|
|
|
+const tableDate = ref([
|
|
|
+ {
|
|
|
+ date: '2025.09.11',
|
|
|
+ questionNum: 10,
|
|
|
+ correctNum: 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2025.09.12',
|
|
|
+ questionNum: 10,
|
|
|
+ correctNum: 10
|
|
|
+ }
|
|
|
+])
|
|
|
+const handleYearChange = () => {
|
|
|
+ form.value.month = '';
|
|
|
+ form.value.week = '';
|
|
|
+}
|
|
|
+const handleMonthChange = () => {
|
|
|
+ form.value.week = '';
|
|
|
+}
|
|
|
+const handleWeekChange = () => {
|
|
|
+ loadData();
|
|
|
+}
|
|
|
+const endDate = ref('');
|
|
|
+const selected = ref([]);
|
|
|
+const calendarPopupRef = ref();
|
|
|
+const handleOpenCalendar = () => {
|
|
|
+ calendarPopupRef.value.open();
|
|
|
+}
|
|
|
+const handleCalendarChange = (e: any) => {
|
|
|
+ console.log(e)
|
|
|
+}
|
|
|
+const loadData = () => {
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.picker-wrap {
|
|
|
+ @apply flex items-center px-12 w-fit border border-solid border-border rounded-4 h-56;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-wrap {
|
|
|
+ @apply flex items-center gap-x-10 bg-primary text-white text-26 px-10 h-56 rounded-4;
|
|
|
+}
|
|
|
+</style>
|