xuexiaole-mobile/src/pages/academic-report/components/languageStatistics.vue

<template>
  <!-- 语感学习统计 -->
  <view>
    <view v-if="show" class="single_box language_statistics">
      <view class="title">语感学习统计</view>
      <isp-data-load :loading="loading" :empty="empty" emptyText="暂无数据">
        <view class="date_filter_box">
          <DateFilter :dateType="dateType" @filter="i => handleFilterDate(i)" />
        </view>
        <view class="study_situation2">
          <view class="item">
            <text class="item_label">句子练习数</text>
            <view
              :class="{
                item_date: true,
                up: showData.sentenceCount > showData.beforeSentenceCount,
                down: showData.sentenceCount < showData.beforeSentenceCount,
                keep: showData.sentenceCount === showData.beforeSentenceCount,
              }"
              >{{ showData.sentenceCount }}<text style="color: #333">&nbsp;句</text
              ><image
                class="trend_icon"
                :src="
                  showData.sentenceCount > showData.beforeSentenceCount
                    ? `${OSS_URL}/iconfont/learning_progress_${1}.png`
                    : showData.sentenceCount === showData.beforeSentenceCount
                    ? `${OSS_URL}/iconfont/learning_progress_${2}.png`
                    : `${OSS_URL}/iconfont/learning_progress_${3}.png`
                "
            /></view>
          </view>
          <view class="item">
            <text class="item_label">阅读词汇量</text>
            <view
              :class="{
                item_date: true,
                up: showData.sentenceWordCount > showData.beforeSentenceWordCount,
                down: showData.sentenceWordCount < showData.beforeSentenceWordCount,
                keep: showData.sentenceWordCount === showData.beforeSentenceWordCount,
              }"
            >
              {{ showData.sentenceWordCount }}<text style="color: #333">&nbsp;词</text>
              <image
                class="trend_icon"
                :src="
                  showData.sentenceWordCount > showData.beforeSentenceWordCount
                    ? `${OSS_URL}/iconfont/learning_progress_${1}.png`
                    : showData.sentenceWordCount === showData.beforeSentenceWordCount
                    ? `${OSS_URL}/iconfont/learning_progress_${2}.png`
                    : `${OSS_URL}/iconfont/learning_progress_${3}.png`
                "
              />
            </view>
          </view>
        </view>
        <view v-if="dateType === 2 || dateType === 1" class="chart_show">
          <view class="charts-box">
            <qiun-data-charts
              type="line"
              canvas2d
              :opts="opts"
              :chartData="languageStatistics"
              ontouch
              tooltip-format="tooltipLang"
            />
          </view>
        </view>
      </isp-data-load>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import DateFilter from './dateFilter.vue';
import dayjs from 'dayjs';
import '../index.scss';
import { englishLanguageStatApi } from '@/api';

const props = withDefaults(
  defineProps<{
    show: boolean;
    userId: string;
  }>(),
  {
    show: false,
    userId: '',
  },
);

const OSS_URL = import.meta.env.VITE_OSS_HOST;
const opts = ref({
  padding: [15, 20, 0, 15],
  enableScroll: false,
  dataLabel: false,
  dataPointShape: false,
  legend: { position: 'top', padding: 2 },
  xAxis: {
    disableGrid: true,
    labelCount: 3, // 标签数
    format: 'xAixsHoursMin',
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    calibration: true,
  },
  extra: {
    line: {
      type: 'curve',
      width: 2,
      activeType: 'none',
    },
    tooltip: {
      bgColor: '#21D17A',
      fontColor: '#fff',
      bgOpacity: 1,
      borderRadius: 8,
      gridColor: '#21D17A',
      labelFontColor: '#333',
      legendShow: false,
      borderOpacity: 1,
      labelBgOpacity: 1,
    },
  },
});
const loading = ref(false);
const empty = ref(false);
const dateType = ref(0);
const showData = ref({
  beforeSentenceCount: 0,
  beforeSentenceWordCount: 0,
  sentenceCount: 0,
  sentenceWordCount: 0,
  statList: [
    {
      beforeSentenceCount: 0,
      beforeSentenceWordCount: 0,
      sentenceCount: 0,
      sentenceWordCount: 0,
      statList: [{}],
      statTime: '',
    },
  ],
  statTime: '',
});
// 语感统计
const languageStatistics = ref({
  categories: [],
  series: [
    {
      name: '句子练习数',
      data: [],
      color: '#9789ff',
    },
    {
      name: '阅读词汇量',
      data: [],
      color: 'rgba(255, 168, 161, 1)',
    },
  ],
});

async function fetchChartData() {
  try {
    loading.value = true;
    const data = await englishLanguageStatApi({
      dateType: dateType.value,
      userId: props.userId,
    });
    showData.value = data;
    languageStatistics.value.categories = [];
    languageStatistics.value.series = [
      {
        name: '句子练习数',
        data: [],
        color: '#9789ff',
      },
      {
        name: '阅读词汇量',
        data: [],
        color: 'rgba(255, 168, 161, 1)',
      },
    ];
    if (dateType.value === 1 || dateType.value === 2)
      for (let i in data.statList) {
        languageStatistics.value.categories[i] = dayjs(data.statList[i].statTime).format(
          'YYYY/MM/DD',
        );
        languageStatistics.value.series = [
          {
            name: '句子练习数',
            data: showData.value.statList.map(item => item.sentenceCount),
            color: '#9789ff',
          },
          {
            name: '阅读词汇量',
            data: showData.value.statList.map(item => item.sentenceWordCount),
            color: 'rgba(255, 168, 161, 1)',
          },
        ];
      }
  } finally {
    loading.value = false;
  }
}
function handleFilterDate(i) {
  dateType.value = i.value;
  fetchChartData();
}
watch(
  () => props.show,
  nv => {
    if (nv) {
      dateType.value = 0;
      fetchChartData();
    }
  },
);
</script>
<style lang="scss" scoped>
.chart_show {
  margin-top: -30rpx;
}
</style>