dianshang-qianduan/src/views/student/index.vue

<!--
 * @Author: qinzhenpen qzp1807@126.com
 * @Date: 2025-03-03 14:13:35
 * @LastEditors: qinzhenpen qzp1807@126.com
 * @LastEditTime: 2025-05-16 17:43:18
 * @FilePath: \financial-big-data\src\components\Ai\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="index app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>我的成绩</span>
        </div>
      </template>
      <div class="Achievement Achievement1">
        <div class="left">
          <div>
            <div class="AchievementChart" ref="AchievementChartRefs" style="width: 40rem; min-width: none; min-height: 300px"></div>
          </div>
          <div class="gradeDetails">
            <div class="detalis-item">
              <!-- <img src="../assets/images/旗帜.webp" alt="" /> -->
              <label>成绩：</label>
              <span>{{ scoreInfo.totalScore || 0 }}分</span>
            </div>
            <div class="detalis-item">
              <!-- <img src="../assets/images/旗帜.webp" alt="" /> -->
              <label>排名：</label>
              <span>{{ scoreInfo.stuRank || "--" }}</span>
            </div>
          </div>
        </div>
        <div class="right">
          <el-table :data="tableData" stripe border style="width: 45rem">
            <el-table-column type="index" label="序号" align="center" />
            <el-table-column prop="model" label="项目" align="center" />
            <el-table-column prop="scoce" label="成绩占比" align="center">
              <template #default="scope">{{ scope.row.scoce }}%</template>
            </el-table-column>
            <el-table-column prop="address" label="成绩" align="center">
              <template #default="scope">
                {{ scope.row.address || 0 }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 10px">
      <template #header>
        <div class="card-header">
          <span>我的成绩</span>
        </div>
      </template>
      <div class="Achievement">
        <div class="left">
          <div class="chartMain">
            <div id="echart3" style="width: 45vw; height: 36.14vh"></div>
          </div>
        </div>
        <div class="right">
          <div class="timeContent">
            <div class="activeTime">
              <div class="ring">
                <div class="ringIn">
                  <div class="ringText">
                    <div style="text-align: center; padding-top: 15px">
                      <div>
                        {{ totalTime || "0" }}
                      </div>
                      <div class="line"></div>
                      <div>HRS</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="profile">
                <div class="num"></div>
                <div class="text">有效时间</div>
                <div class="text">有效学习时间的投入概况</div>
              </div>
            </div>
            <div class="detail">
              <div id="echart2" style="width: 11.979vw; height: 21.296vh"></div>
              <div class="timeList">
                <div class="listItem">
                  <img src="@/assets/images/x1.png" alt="" />
                  <span>市场需求挖掘</span>
                  <span>{{ statistic.marketResearchTime || "0" }}分钟</span>
                </div>
                <div class="listItem">
                  <img src="@/assets/images/x2.png" alt="" />
                  <span>产品规划</span>
                  <span>{{ statistic.productPlanningTime || "0" }}分钟</span>
                </div>
                <div class="listItem">
                  <img src="@/assets/images/x3.png" alt="" />
                  <span>产品投放测试</span>
                  <span>{{ statistic.productLaunchTestTime || "0" }}分钟</span>
                </div>

                <div class="listItem">
                  <img src="@/assets/images/x4.png" alt="" />
                  <span>供应渠道管理</span>
                  <span>{{ statistic.supplyChannelTime || "0" }}分钟</span>
                </div>
                <div class="listItem">
                  <img src="@/assets/images/x5.png" alt="" />
                  <span>产品评估与考核</span>
                  <span>{{ statistic.productEvaluationTime || "0" }} 分钟</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
import * as echarts from "echarts";
import * as indexApi from "@/api/index";
const AchievementChartRefs = ref(null);
const statistic = ref({});
const scoreTrend = ref([
  {
    title: "我",
    scores: [0, 0, 0, 0, 0],
    times: ["2025-05-09", "2025-05-10", "2025-05-11", "2025-05-12", "2025-05-13"],
  },
  {
    title: "第一名",
    scores: [0, 0, 0, 0, 0],
    times: ["2025-05-09", "2025-05-10", "2025-05-11", "2025-05-12", "2025-05-13"],
  },
  {
    title: "最后一名",
    scores: [0, 0, 0, 0, 0],
    times: ["2025-05-09", "2025-05-10", "2025-05-11", "2025-05-12", "2025-05-13"],
  },
]);
const list = ref([]);
const tableData = ref([
  {
    date: "2016-05-03",
    model: "市场需求挖掘",
    address: "20",
    scoce: "20",
    key: "oneScore",
    key1: "oneWeight",
  },
  {
    date: "2016-05-02",
    model: "产品规划",
    address: "20",
    scoce: "20",
    key: "twoScore",
    key1: "twoWeight",
  },
  {
    date: "2016-05-04",
    model: "产品投放测试",
    scoce: "20",
    address: "20",
    key: "threeScore",
    key1: "threeWeight",
  },
  {
    date: "2016-05-01",
    model: "供应渠道管理",
    address: "20",
    scoce: "20",
    key: "fourScore",
    key1: "fourWeight",
  },
  {
    date: "2016-05-01",
    model: "产品评估与考核",
    address: "20",
    scoce: "15",
    key: "fiveScore",
    key1: "fiveWeight",
  },
]);
const corList = ["#795ef3", "#419af2", "#f7b844", "red", "pink"];
const scoreInfo = ref({});
const timeKey = ref({
  marketResearchTime: 0,
  productPlanningTime: 0,
  productLaunchTestTime: 0,
  supplyChannelTime: 0,
  productEvaluationTime: 0,
});
// 时间总和
const totalTime = computed(() => {
  let time = 0;
  for (let key in timeKey.value) {
    time += timeKey.value[key];
  }
  return time;
});
const getgrade = () => {
  let myChart = echarts.init(AchievementChartRefs.value);
  let option;
  option = {
    legend: {
      orient: "vertical",
      right: 30,
      top: "40%",
      bottom: 20,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "80%",
        center: ["35%", "50%"],
        data: list.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  option && myChart.setOption(option);
  // 添加窗口大小变化监听
  const handleResize = () => {
    myChart.resize();
  };
  window.addEventListener("resize", handleResize);
  // 在组件卸载时移除监听（Vue 3 示例）
  onUnmounted(() => {
    window.removeEventListener("resize", handleResize);
    myChart.dispose(); // 清理图表实例
  });
};
const echart3Init = () => {
  var chartDom = document.getElementById("echart3");
  var myChart = echarts.init(chartDom);
  console.log(userStore.userInfo, "userStore.userInfo");
  var option;
  option = {
    // title: {
    //     text: "Stacked Area Chart"
    // },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["第一名", "我的成绩", "最后一名"],
      top: 10,
    },

    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: scoreTrend.value[0].times,
        // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "最后一名",
        type: "line",
        // stack: "Total",
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(66,209,216,0.6)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(255,255,255,0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        lineStyle: {
          color: "#42D1D8",
        },
        itemStyle: {
          color: "#42D1D8",
        },
        emphasis: {
          focus: "series",
        },
        data: scoreTrend.value[2].scores,
        // data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: "我的成绩",
        type: "line",
        // stack: "Total",
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(133,64,251,0.6)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(255,255,255,0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        lineStyle: {
          color: "#8540FB",
        },
        itemStyle: {
          color: "#8540FB",
        },
        emphasis: {
          focus: "series",
        },
        data: scoreTrend.value[0].scores,
        // data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: "第一名",
        type: "line",
        // stack: "Total",
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(255,185,0,0.6)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(255,255,255,0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        lineStyle: {
          color: "#FFB900",
        },
        itemStyle: {
          color: "#FFB900",
        },
        emphasis: {
          focus: "series",
        },
        data: scoreTrend.value[1].scores,
        // data: [220, 182, 191, 234, 290, 330, 310]
      },
    ],
  };
  option && myChart.setOption(option);
  // 添加窗口大小变化监听
  const handleResize = () => {
    myChart.resize();
  };
  window.addEventListener("resize", handleResize);
  // 在组件卸载时移除监听（Vue 3 示例）
  onUnmounted(() => {
    window.removeEventListener("resize", handleResize);
    myChart.dispose(); // 清理图表实例
  });
};
const echart2Init = () => {
  var chartDom = document.getElementById("echart2");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    title: {
      text: "时间占比",
      left: "center",
      top: "center",
      textStyle: {
        fontSize: 14,
        fontWeight: "normal",
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
      show: false,
    },
    series: [
      {
        name: "时间占比",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          // label: {
          //     show: true,
          //     formatter: '时间占比'
          //     // fontSize: 40,
          //     // fontWeight: "bold"
          // }
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 0, name: "收益与风险" },
          { value: 0, name: "现值和价值评估" },
          { value: 0, name: "投资决策" },
          { value: 0, name: "融资决策" },
          { value: 0, name: "营运资本管理" },
          { value: 0, name: "财务分析及估值" },
          { value: 0, name: "财务预警及风险管理" },
        ],
      },
    ],
  };
  option && myChart.setOption(option);
};
const getScoreTrend = () => {
  indexApi
    .getRouters({
      userId: userStore.userInfo.userId,
      classId: userStore.userInfo.classId,
      schoolId: userStore.userInfo.schoolId,
    })
    .then((res) => {
      if(!res.data) return;
      scoreTrend.value = res.data;
      echart3Init();
    });
};
// 查询学生权重
const getwight = () => {
  indexApi
    .getStuWeightScore({
      userId: userStore.userInfo.userId,
      classId: userStore.userInfo.classId,
      schoolId: userStore.userInfo.schoolId,
    })
    .then((res) => {
      if (!res.data) return;
      scoreInfo.value = res.data ;
      tableData.value.forEach((item) => {
        item.scoce = res.data[item.key1] * 100;
        item.address = res.data[item.key];
      });
      list.value = tableData.value.map((item, index) => ({
        name: item.model,
        value: [item.address],
        itemStyle: { color: corList[index] },
      }));
      console.log(list.value, "list");
      getgrade();
    });
};
// 查看学习时间
const getStudyTime = () => {
  indexApi
    .getStudyTime({
      userId: userStore.userInfo.userId,
    })
    .then((res) => {
      if (!res.data) return;
      statistic.value = res.data;
      Object.keys(res.data).forEach((key) => {
        if (key in timeKey.value) {
          timeKey.value[key] = res.data[key];
        }
      });
    });
};

onMounted(() => {
  getwight();
  getScoreTrend();
  getStudyTime();
  echart2Init();
  console.log(userStore.userInfo, "54455445");
});
</script>
<style lang="scss" scoped>
.app-container {
  background: #fff;
}
.index {
  height: calc(100vh - 70px);
  // padding: 20px 40px;
  .Achievement {
    display: flex;
    .left {
      display: flex;
      flex: 1;
      .AchievementChart {
        border-right: 2px dashed #e4e7ed;
      }
      .gradeDetails {
        padding-left: 20px;
        .detalis-item {
          label {
            display: inline-block;
            width: 3rem !important;
            margin-left: 0.8rem;
          }
          span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #3c38b8;
          }
          margin-bottom: 1rem;
        }
      }
    }
    .right {
      padding-top: 20px;
      // float: right;
      .timeContent {
        display: flex;
        align-items: center;
        .detail {
          display: flex;
          align-items: center;
          margin-top: 15px;
          height: 31vh;
          border-radius: 10px;
          border: 1px solid #3c38b8;
          margin-left: 10px;
          padding: 10px;
          .listItem {
            width: 13vw;
            display: flex;
            align-items: center;
            margin-right: 30px;
            position: relative;
            span {
              margin-top: -10px;
            }
            span:nth-of-type(2) {
              position: absolute;
              right: 0;
              color: #3c38b8;
              font-weight: bold;
              font-size: 16px;
            }
          }
        }
      }
      .activeTime {
        width: 160px;
        min-width: 160px;
        // width: 8.333vw;
        height: 240px;
        background: url("@/assets/images/有效时间.png");
        background-size: 160px 240px;
        margin-top: 15px;
        padding-top: 20px;
        .ring {
          margin: 0 auto;
          width: 100px;
          height: 100px;
          background: #b2d6fb;
          border-radius: 50%;
          padding-top: 4px;
          .ringIn {
            width: 92px;
            height: 92px;
            background: #64acf8;
            border-radius: 50%;
            margin-left: 4px;
            padding-top: 7px;
            .ringText {
              width: 78px;
              height: 78px;
              background: #fff;
              border-radius: 50%;
              margin-left: 7px;
              font-weight: bold;
              font-size: 17px;
              color: #3c38b8;
              .line {
                width: 50px;
                height: 1px;
                border-bottom: 1px solid #4568ee;
                margin: 0 auto;
                margin-bottom: 3px;
                margin-top: 3px;
              }
            }
          }
        }
        .profile {
          text-align: center;
          margin-top: 10px;
          margin: 0px 5px;
          .num {
            font-weight: bold;
            font-size: 35px;
            color: #ffeec0;
            height: 35px;
          }
          .text {
            color: #fff;
            line-height: 23px;
          }
        }
      }
    }
  }
  .Achievement1 {
    display: flex;
    .left {
      display: flex;
      .AchievementChart {
        border-right: 2px dashed #e4e7ed;
      }
      .gradeDetails {
        padding-left: 20px;
        .detalis-item {
          label {
            display: inline-block;
            width: 3rem !important;
            margin-left: 0.8rem;
          }
          span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #3c38b8;
          }
          margin-bottom: 1rem;
        }
      }
    }
  }
}
</style>