shuimu-dashboard-h5/src/views/admin/components/ComboCharts.vue

<script setup lang="ts">
import CircleChart from "@/components/Charts/CircleChart.vue";
import LiquidChart from "@/components/Charts/LiquidChart.vue";
import LineChart from "@/components/Charts/LineChart.vue";
import PercentBarChart from "@/components/Charts/PercentBarChart.vue";
import {DashboardData} from "@/api/dashboard/types";
import {AreaChartParams, AreaLineData} from "@/api/areaboard/types";
import {getAreaBoardLines, getAreaBoardPies} from "@/api/areaboard";
import {Ref} from "vue";

const props = defineProps({
  provinceId: {
    type: Number,
    default: 0,
  },
  cityId: {
    type: Number,
    default: 0,
  },
  schoolId: {
    type: Number,
    default: 0,
  },
  gradeId: {
    type: Number,
    default: 0,
  },
  startTime: {
    type: Number,
    default: Math.ceil(Date.parse("2023/1/1 00:00") / 1000),
  },
  endTime: {
    type: Number,
    default: Math.ceil(Date.now() / 1000),
  },
});
/**
 * 饼图数据
 */
const pieStatus = ref(false);
const pieMessage = ref("加载中...");
const pieChartData = ref<DashboardData>();
async function getPieChartData(params: AreaChartParams) {
  pieStatus.value = false;
  getAreaBoardPies(params)
    .then(({data}) => {
      pieChartData.value = data;
      pieStatus.value = true;
    })
    .catch((error) => {
      pieStatus.value = false;
      pieMessage.value = error.message;
      console.log(error.message);
    });
}
/**
 * 折线图数据
 */
const lineStatus = ref(false);
const lineMessage = ref("加载中...");
const lineChartData = ref<AreaLineData>();
const curveData = ref<number[][]>();
const swCurveData = ref<number[][]>();
const klCurveData = ref<number[][]>();
const zzlCurveData = ref<number[][]>();
async function getLineChartData(params: AreaChartParams) {
  lineStatus.value = false;
  getAreaBoardLines(params)
    .then(({data}) => {
      lineChartData.value = data;
      // 曲线图
      curveData.value = [];
      curveData.value?.push(lineChartData.value?.curve || []);
      curveData.value?.push(lineChartData.value?.num || []);
      lineStatus.value = true;
      lineChartData.value = undefined;
    })
    .catch((error) => {
      lineStatus.value = false;
      lineMessage.value = error.message;
      console.log(error.message);
    });
}
async function getLineChartDataSub(result: Ref<number[][] | undefined>, params: AreaChartParams) {
  let tempData: AreaLineData;
  getAreaBoardLines(params).then(({data}) => {
    tempData = data;
    result.value = [];
    result.value?.push(tempData?.curve || []);
    result.value?.push(tempData?.num || []);
  });
}
/**
 * 筛选条件
 */
const dataParams: AreaChartParams = reactive({
  province_id: 0,
  city_id: 0,
  school_id: 0,
  grade_id: 0,
  device_id: 0,
  start_time: Math.ceil(Date.parse("2023/1/1 00:00") / 1000),
  end_time: Math.ceil(Date.now() / 1000),
});
// 监听数据变化
watchEffect(() => {
  dataParams.province_id = <number>props.provinceId;
  dataParams.city_id = <number>props.cityId;
  dataParams.school_id = <number>props.schoolId;
  dataParams.grade_id = <number>props.gradeId;
  dataParams.start_time = <number>props.startTime;
  dataParams.end_time = <number>props.endTime;
  // 饼图数据
  getPieChartData(dataParams);
  // 折线图数据
  dataParams.device_id = 0;
  getLineChartData(dataParams);
  dataParams.device_id = 1;
  getLineChartDataSub(swCurveData, dataParams);
  dataParams.device_id = 6;
  getLineChartDataSub(klCurveData, dataParams);
  dataParams.device_id = 7;
  getLineChartDataSub(zzlCurveData, dataParams);
});
</script>

<template>
  <!-- Echarts 图表 -->
  <div class="charts-container">
    <el-row :gutter="20">
      <el-col :xs="24" :span="8">
        <div class="charts-item">
          <p class="title">学员专注力平均值整体对比分析</p>
          <template v-if="pieStatus">
            <el-row justify="space-between">
              <el-col :span="12">
                <div class="item">
                  <LiquidChart
                    id="liquidChart1"
                    :key="pieChartData?.frontAverage"
                    :data="pieChartData?.frontAverage || 0"
                    height="200px"
                    width="200px"
                    color="#3a7fc2"
                    bg-color="#accded"
                    class="chart" />
                  <p>全体学员初期</p>
                  <p>专注力评估均值</p>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="item">
                  <template v-if="pieChartData?.countRecord && pieChartData.countRecord > 4">
                    <LiquidChart
                      id="liquidChart2"
                      :key="pieChartData?.afterAverage"
                      :data="pieChartData?.afterAverage || 0"
                      height="200px"
                      width="200px"
                      color="#5563ac"
                      bg-color="#cacce6"
                      class="chart" />
                  </template>
                  <div v-else class="pieEmpty p1">训练数据不足</div>
                  <p>全体学员训练近期</p>
                  <p>专注力评估均值</p>
                </div>
              </el-col>
            </el-row>
            <el-row justify="space-between">
              <el-col :span="12">
                <div class="item">
                  <CircleChart
                    id="circleChart1"
                    :key="pieChartData?.front"
                    :data="pieChartData?.front || 0"
                    height="200px"
                    width="200px"
                    color="#3a7fc2"
                    bg-color="#e4e7f4"
                    font-color="#3a7fc2"
                    font-size="30px"
                    :round-cap="Boolean(true)" />
                  <p>初期训练</p>
                  <p>专注力50以上训练占比</p>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="item">
                  <template v-if="pieChartData?.countRecord && pieChartData.countRecord > 4">
                    <CircleChart
                      id="circleChart2"
                      :key="pieChartData?.after"
                      :data="pieChartData?.after || 0"
                      height="200px"
                      width="200px"
                      color="#5563ac"
                      bg-color="#e4e7f4"
                      font-color="#5563ac"
                      font-size="30px"
                      :round-cap="Boolean(true)" />
                  </template>
                  <div v-else class="pieEmpty p2">训练数据不足</div>
                  <p>近期训练</p>
                  <p>专注力50以上训练占比</p>
                </div>
              </el-col>
            </el-row>
          </template>
          <div v-else class="empty">
            <img src="../../../assets/empty.png" alt="数据为空" />
            <p>{{ pieMessage }}</p>
          </div>
        </div>
      </el-col>
      <!-- 学员专注力评分分级占比分析 -->
      <el-col :xs="24" :span="16">
        <div class="charts-item">
          <p class="title">样本每次训练专注力评分均值整体变化曲线</p>
          <template v-if="lineStatus">
            <line-chart
              id="lineChart1"
              :key="dataParams?.toString()"
              :dataSets="curveData || [[], []]"
              :dataSW="swCurveData || [[], []]"
              :dataKL="klCurveData || [[], []]"
              :dataZZL="zzlCurveData || [[], []]"
              height="558px"
              width="100%" />
          </template>
          <div v-else class="empty">
            <img src="../../../assets/empty.png" alt="数据为空" />
            <p>{{ lineMessage }}</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="charts-container">
    <el-row :gutter="20">
      <!-- 学员专注力评分分级占比分析 -->
      <el-col :xs="24" :span="16">
        <div class="charts-item">
          <p class="title">学员专注力评分分级占比分析</p>
          <el-row v-if="pieStatus" justify="space-between">
            <el-col :xs="24" :span="12">
              <div class="bar">
                <PercentBarChart
                  id="barChart1"
                  :key="pieChartData?.frontProportion.toString()"
                  width="400px"
                  height="500px"
                  title="全体学员初期训练专注力评分占比"
                  :percent="pieChartData?.frontProportion.percentage"
                  :data="pieChartData?.frontProportion.num"
                  class="chart" />
              </div>
            </el-col>
            <el-col :xs="24" :span="12">
              <div class="bar">
                <PercentBarChart
                  id="barChart2"
                  :key="pieChartData?.afterProportion.toString()"
                  width="400px"
                  height="500px"
                  title="全体学员训练近期专注力评分平均占比"
                  :percent="pieChartData?.afterProportion.percentage"
                  :data="pieChartData?.afterProportion.num"
                  class="chart" />
              </div>
            </el-col>
          </el-row>
          <div v-else class="empty">
            <img src="../../../assets/empty.png" alt="数据为空" />
            <p>{{ pieMessage }}</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.charts-container {
  position: relative;
  padding: 30px 30px 20px;
}

.charts-item {
  position: relative;
  text-align: center;
  background: #fff;
  border: 1px solid #e8eaec;
  border-radius: 24px;

  .title {
    height: 78px;
    margin: 0;
    font-size: 18px;
    line-height: 78px;
    text-align: left;
    text-indent: 2em;

    &.pos {
      margin-bottom: -50px;
    }
  }

  .item {
    padding-bottom: 30px;
  }

  .chart {
    margin: 0 auto;
  }

  p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
  }

  .bar {
    margin-top: 60px;
  }

  .bottom {
    padding: 0 20px 20px;

    .el-col p {
      position: relative;
      box-sizing: border-box;
      padding: 10px 20px;
      color: #fff;
      text-align: left;
      white-space: nowrap;
      border-radius: 10px;

      &.l {
        background: #f8b865;
      }

      &.r {
        background: #8877ef;
      }

      span {
        display: block;
      }

      b {
        position: absolute;
        top: 22px;
        right: 20px;
        font-size: 26px;
        font-style: normal;
      }
    }
  }

  .empty {
    padding: 200px 0;
  }

  .pieEmpty {
    box-sizing: border-box;
    width: 180px;
    height: 180px;
    margin: 10px auto;
    color: red;
    border-radius: 50%;

    &.p1 {
      line-height: 160px;
      border: 5px solid #2f539b;
    }

    &.p2 {
      line-height: 120px;
      border: 20px solid #2f539b;
    }
  }
}
</style>