shuimu-dashboard-h5/src/views/areaboard/index.vue

<script setup lang="ts">
import {DashboardData} from "@/api/dashboard/types";
import {Area, AreaCard, AreaLineData, AreaParams} from "@/api/areaboard/types";
import AreaDataCard from "@/views/areaboard/components/AreaDataCard.vue";
import LiquidChart from "@/components/Charts/LiquidChart.vue";
import PercentBarChart from "@/components/Charts/PercentBarChart.vue";
import CircleChart from "@/components/Charts/CircleChart.vue";
import LineChart from "@/components/Charts/LineChart.vue";
import AverageBarChart from "@/components/Charts/AverageBarChart.vue";
import {GradeList} from "@/api/grade/types";
import {getGradeSelect} from "@/api/grade";
import {getAreaAddress, getAreaBoardLines, getAreaBoardPies, getAreaCard, getAreaSchool} from "@/api/areaboard";
import {SchoolList} from "@/api/school/types";

defineOptions({
  name: "DashboardArea",
  inheritAttrs: false,
});
/**
 * 筛选条件
 */
const dataParams: AreaParams = reactive({
  province_id: 0,
  city_id: 0,
  school_id: 0,
  grade_id: 0,
  start_time: Math.ceil(Date.parse("2023/1/1 00:00") / 1000),
  end_time: Math.ceil(Date.now() / 1000),
});
const datePicker = ref<number[]>([Date.parse("2023/1/1 00:00"), Date.now()]);
const provinceData = ref<Area[]>();
const cityData = ref<Area[]>();
async function getAddressData(id: number) {
  getAreaAddress(id)
    .then(({data}) => {
      if (id == 0) {
        provinceData.value = data;
        provinceData.value?.unshift({area_id: 0, area_name: "全部省"});
      } else {
        cityData.value = data;
        cityData.value?.unshift({area_id: 0, area_name: "全部市"});
      }
      // 重新获取学校
      getSchoolData(dataParams);
    })
    .catch((error) => {
      console.log(error.message);
      if (id == 0) {
        provinceData.value = [{area_id: 0, area_name: "全部省"}];
      } else {
        cityData.value = [{area_id: 0, area_name: "全部市"}];
      }
    });
}
//getAreaSchool
/**
 * 获取学校
 */
const schoolData = ref<SchoolList[]>();
async function getSchoolData(params: AreaParams) {
  getAreaSchool(params.province_id, params.city_id)
    .then(({data}) => {
      schoolData.value = data;
      schoolData.value?.unshift({num: "", school_id: 0, name: "全部学校"});
    })
    .catch((error) => {
      schoolData.value = [];
      schoolData.value?.unshift({num: "", school_id: 0, name: "全部学校"});
      console.log(error.message);
    });
}
/**
 * 班级数据
 */
const gradeData = ref<GradeList[]>();
async function getGradeData(schoolId: number) {
  getGradeSelect(schoolId)
    .then(({data}) => {
      gradeData.value = data;
      gradeData.value?.unshift({id: 0, name: "全部班级"});
    })
    .catch((error) => {
      gradeData.value = [];
      gradeData.value?.unshift({id: 0, name: "全部班级"});
      console.log(error.message);
    });
}
// 改变时间
function changeDate() {
  dataParams.start_time = Math.ceil(datePicker.value[0] / 1000);
  dataParams.end_time = Math.ceil(datePicker.value[1] / 1000);
}
/**
 * 数据卡片
 */
const cardStatus = ref(false);
const cards = ref<AreaCard>();
async function getDataCard(params: AreaParams) {
  getAreaCard(params)
    .then(({data}) => {
      cards.value = data;
      cardStatus.value = true;
    })
    .catch((error) => {
      console.log(error.message);
    });
}
/**
 * 饼图数据
 */
const pieStatus = ref(false);
const pieMessage = ref("加载中...");
const pieChartData = ref<DashboardData>();
async function getPieChartData(params: AreaParams) {
  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 averageData = ref<number[][]>();
const curveData = ref<number[][]>();
async function getLineChartData(params: AreaParams) {
  lineStatus.value = false;
  getAreaBoardLines(params)
    .then(({data}) => {
      lineChartData.value = data;
      // 柱状图
      averageData.value = [];
      averageData.value?.push(lineChartData.value?.frontNum || []);
      averageData.value?.push(lineChartData.value?.afterNum || []);
      // 曲线图
      curveData.value = [];
      curveData.value?.push(lineChartData.value?.curve || []);
      curveData.value?.push(lineChartData.value?.num || []);
      lineStatus.value = true;
    })
    .catch((error) => {
      lineStatus.value = false;
      lineMessage.value = error.message;
      console.log(error.message);
    });
}
/**
 * 获取页面数据
 */
function getPageData() {
  // 数据卡片
  getDataCard(dataParams);
  // 饼图数据
  getPieChartData(dataParams);
  // 折线图数据
  getLineChartData(dataParams);
}
onMounted(() => {
  // 获取省份
  getAddressData(0);
  cityData.value = [{area_id: 0, area_name: "全部市"}];
  // 获取学校
  getSchoolData(dataParams);
  gradeData.value = [{id: 0, name: "全部班级"}];
  // 获取页面数据
  getPageData();
});
</script>

<template>
  <div class="area-container">
    <div class="area-top">
      <div class="search-box">
        <el-select
          v-model="dataParams.province_id"
          placeholder="全部省"
          size="large"
          @change="getAddressData(dataParams.province_id)">
          <el-option v-for="item in provinceData" :key="item.area_id" :label="item.area_name" :value="item.area_id" />
        </el-select>
        <el-select v-model="dataParams.city_id" placeholder="全部市" size="large" @change="getSchoolData(dataParams)">
          <el-option v-for="item in cityData" :key="item.area_id" :label="item.area_name" :value="item.area_id" />
        </el-select>
        <div>
          <el-date-picker
            v-model="datePicker"
            type="daterange"
            size="large"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="x"
            @change="changeDate()" />
        </div>
        <el-button color="#4284f2" size="large" @click="getPageData()">查找</el-button>
      </div>
      <div class="card-box">
        <!-- 数据卡片 -->
        <template v-if="cardStatus">
          <AreaDataCard
            :key="cards?.toString()"
            :schools="cards?.school || 0"
            :games="cards?.game || 0"
            :students="cards?.student || 0" />
        </template>
      </div>
    </div>
    <div class="search-box s2">
      <el-select
        v-model="dataParams.school_id"
        placeholder="全部学校"
        size="large"
        @change="getGradeData(dataParams.school_id)">
        <el-option v-for="item in schoolData" :key="item.school_id" :label="item.name" :value="item.school_id" />
      </el-select>
      <el-select v-model="dataParams.grade_id" placeholder="全部班级" size="large">
        <el-option v-for="item in gradeData" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button color="#4284f2" size="large" @click="getPageData()">查找</el-button>
    </div>
    <!-- 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">
                    <LiquidChart
                      id="liquidChart2"
                      :key="pieChartData?.afterAverage"
                      :data="pieChartData?.afterAverage || 0"
                      height="200px"
                      width="200px"
                      color="#5563ac"
                      bg-color="#cacce6"
                      class="chart" />
                    <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">
                    <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)" />
                    <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="curveData?.toString()"
                :data-sets="curveData || [[], []]"
                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="8">
          <div class="charts-item">
            <p class="title pos">学员专注力训练高专注占比分析</p>
            <template v-if="lineStatus">
              <AverageBarChart
                id="averageBarChart1"
                :key="averageData?.toString()"
                :data-sets="averageData || [[], []]"
                :data-max="lineChartData?.max_num || 10"
                width="520px"
                height="520px"
                class="chart" />
            </template>
            <div v-else class="empty">
              <img src="../../assets/empty.png" alt="数据为空" />
              <p>{{ lineMessage }}</p>
            </div>
            <el-row :gutter="15" class="bottom">
              <el-col :span="12">
                <p class="l">
                  <span>训练前期全体学员</span>
                  <span>高专注占比平均值</span>
                  <b>{{ lineChartData?.frontHeight }}</b>
                </p>
              </el-col>
              <el-col :span="12">
                <p class="r">
                  <span>训练后期全体学员</span>
                  <span>高专注占比平均值</span>
                  <b>{{ lineChartData?.afterHeight }}</b>
                </p>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <!-- 学员专注力评分分级占比分析 -->
        <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>
  </div>
</template>

<style lang="scss" scoped>
.area-top {
  background: #fff;
}

.card-box {
  padding: 0 30px 20px;
}

.search-box {
  display: flex;
  padding: 20px 55px;
  line-height: 40px;

  .el-select {
    width: 140px;
    margin-right: 10px;
  }

  .el-button {
    padding: 0 26px;
    margin: 0 20px;
    font-size: 16px;
    border-radius: 10px;
  }
}

:deep(.el-select),
:deep(.el-date-editor) {
  --el-select-input-focus-border-color: none !important;

  width: 300px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
}

:deep(.search-box.s2 .el-select) {
  border: none;
}

:deep(.el-date-editor) {
  --el-select-input-focus-border-color: none !important;
}

:deep(.el-input__wrapper) {
  box-shadow: none !important;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: none !important;
}

:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
  box-shadow: none !important;
}

.charts-container {
  position: relative;
  padding: 0 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;
  }
}

.mobile .el-col {
  margin-bottom: 10px;
}
</style>