You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
324 lines
8.9 KiB
Vue
324 lines
8.9 KiB
Vue
<template>
|
|
<div class="teachers">
|
|
<div class="flex">
|
|
<el-card shadow="never">
|
|
<template #header>
|
|
<div class="card-header">班级平均成绩走势图</div>
|
|
</template>
|
|
<div class="el-card-body">
|
|
<div id="trend"></div>
|
|
<div class="trend-title">班级成绩统计分析</div>
|
|
</div>
|
|
</el-card>
|
|
<el-card shadow="never">
|
|
<template #header>
|
|
<div class="card-header">班级成绩统计分析</div>
|
|
</template>
|
|
<div class="el-card-body">
|
|
<div class="serch">
|
|
<el-form :inline="true">
|
|
<el-form-item label="日期：">
|
|
<el-date-picker v-model="classParams.time" style="width: 185.6px" type="datetime" placeholder="请选择" format="YYYY/MM/DD HH:mm:ss" />
|
|
</el-form-item>
|
|
<el-form-item label="班级：">
|
|
<el-select placeholder="全部" v-model="classParams.classId" style="width: 185.6px">
|
|
<el-option v-for="item in userStore.classList" :key="item" :label="item.class_name" :value="item.class_id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="warning" @click="getClassGradeStatistics">查看成绩</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div id="statistics"></div>
|
|
<div class="maxpoints">
|
|
<div class="maxpoints-item" v-for="item in circularData2" :key="item.name">
|
|
<!-- <img style="width: 55px; height: 55px" :src="getAssetsFile(`images/${item.name}.png`)" alt="" /> -->
|
|
<div class="ri">
|
|
<span style="color: #333333; font-weight: bold; font-size: 16px; letter-spacing: 4px">{{ item.name }}:</span>
|
|
<span style="font-family: Source Han Sans CN; font-weight: bold; font-size: 20px; color: #ff6400">{{ item.value ?? 0 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import * as echarts from "echarts";
|
|
import * as teacherApi from "@/api/teacher.js";
|
|
const { proxy } = getCurrentInstance();
|
|
import { getAssetsFile } from "@/utils/index.js";
|
|
import useUserStore from "@/store/modules/user";
|
|
const userStore = useUserStore();
|
|
const classTime = ref([]);
|
|
const className = ref([]);
|
|
const classList = ref([]);
|
|
const classParams = ref({
|
|
classId: "",
|
|
time: "",
|
|
});
|
|
const initstatus = ref(false);
|
|
const circularData = ref([
|
|
{ value: 0, name: "一般", key: "generalCount" },
|
|
{ value: 0, name: "优秀", key: "excellentCount" },
|
|
{ value: 0, name: "良好", key: "goodCount" },
|
|
{ value: 0, name: "不及格", key: "failCount" },
|
|
]);
|
|
const circularData2 = ref([
|
|
{ score: 0, name: "最高分", key: "maxScore" },
|
|
{ score: 0, name: "最低分", key: "minScore" },
|
|
{ score: 0, name: "平均分", key: "averageScore" },
|
|
]);
|
|
// 获取成绩走势图数据
|
|
const getTrendData = async () => {
|
|
var myinde = echarts.init(document.getElementById("trend"));
|
|
myinde.setOption({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
data: className.value,
|
|
},
|
|
grid: {
|
|
left: "4%",
|
|
right: "4%",
|
|
bottom: "1%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: classTime.value,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
//显示0~100
|
|
min: 0,
|
|
max: 100,
|
|
},
|
|
series: classList.value,
|
|
});
|
|
// 自适应
|
|
window.addEventListener("resize", () => {
|
|
myinde.resize();
|
|
});
|
|
};
|
|
// 成绩统计分析
|
|
const getStatisticsData = async () => {
|
|
var myChart = echarts.init(document.getElementById("statistics"));
|
|
myChart.setOption({
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
},
|
|
legend: {
|
|
orient: "vertical",
|
|
left: "right",
|
|
top: "center",
|
|
data: ["一般", "优秀", "良好", "不及格"],
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: "70%",
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
},
|
|
},
|
|
data: circularData.value,
|
|
// 修改颜色
|
|
color: ["#f7b844", "#51bcb5", "#5d92f7", "#ca5038"],
|
|
},
|
|
],
|
|
});
|
|
// 自适应
|
|
window.addEventListener("resize", () => {
|
|
myChart.resize();
|
|
});
|
|
};
|
|
// 获取班级成绩走势函数功能函数
|
|
const getClassGradeTrend = () => {
|
|
teacherApi.getAverageScoreTrend().then((res) => {
|
|
const trends = Array.isArray(res) ? res : [];
|
|
classTime.value = trends[0]?.startTime || [];
|
|
className.value = trends.map((item) => item.className);
|
|
classList.value = trends.map((item) => {
|
|
return {
|
|
name: item.className,
|
|
type: "line",
|
|
stack: "Total",
|
|
data: item.classAverageScore,
|
|
};
|
|
});
|
|
getTrendData();
|
|
});
|
|
};
|
|
// 获取班级成绩统计分析函数功能函数
|
|
const getClassGradeStatistics = () => {
|
|
if (!classParams.value.time) {
|
|
classParams.value.time = new Date().toString();
|
|
} else {
|
|
classParams.value.time = classParams.value.time.toString();
|
|
}
|
|
if (initstatus.value && !classParams.value.classId) {
|
|
proxy.$modal.msgWarning("请选择班级");
|
|
}
|
|
teacherApi.getScoreStatisticsTrend(classParams.value).then((res) => {
|
|
circularData.value.forEach((item, index) => {
|
|
item.value = res[item.key];
|
|
if (res.hasOwnProperty(item.key)) {
|
|
item.value = res[item.key];
|
|
}
|
|
});
|
|
circularData2.value.forEach((item, index) => {
|
|
item.value = res[item.key];
|
|
if (res.hasOwnProperty(item.key)) {
|
|
item.value = res[item.key];
|
|
}
|
|
});
|
|
getStatisticsData();
|
|
});
|
|
};
|
|
// 获取班级
|
|
const getClassList = () => {
|
|
teacherApi.getOwnedTeachingClasses().then((res) => {
|
|
userStore.classList = (res.data || []).map((item) => ({
|
|
class_name: item.className,
|
|
class_id: item.schoolClassId,
|
|
}));
|
|
});
|
|
};
|
|
onMounted(() => {
|
|
getClassGradeTrend();
|
|
getClassGradeStatistics()
|
|
getClassList()
|
|
initstatus.value = true;
|
|
});
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.teachers {
|
|
.flex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
// gap: 15px;
|
|
:deep(.el-card) {
|
|
padding: 0px 15px;
|
|
height: calc(100vh - 80px);
|
|
border: none;
|
|
#trend {
|
|
height: 500px;
|
|
}
|
|
#statistics {
|
|
height: 360px;
|
|
}
|
|
.maxpoints {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 60px;
|
|
margin-top: 70px;
|
|
.maxpoints-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0;
|
|
width: 181px;
|
|
height: 50px;
|
|
background: #fff8e5;
|
|
border-radius: 10px;
|
|
border: 1px solid #ffb900;
|
|
.ri {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
}
|
|
}
|
|
.trend-title {
|
|
margin-top: 28px;
|
|
text-align: center;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
color: #999999;
|
|
}
|
|
.serch {
|
|
}
|
|
.el-card__header {
|
|
padding: 13px 15px 13px 21px !important;
|
|
border-bottom: 2px dashed #e5e5e5;
|
|
}
|
|
.card-header {
|
|
font-family: Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
color: #333333;
|
|
position: relative;
|
|
margin-left: 17px;
|
|
letter-spacing: 4px; /* 设置文字间隔为2像素 */
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -40px;
|
|
top: 25%;
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url(@/assets/images/分析.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
// border-radius: 4px;
|
|
// margin-right: 20px;
|
|
}
|
|
}
|
|
}
|
|
.el-card:nth-child(1) {
|
|
width: calc(100% - 47% - 15px);
|
|
border-right: 2px dashed #e5e5e5;
|
|
}
|
|
.el-card:nth-child(2) {
|
|
width: calc(100% - 53%);
|
|
.card-header {
|
|
font-family: Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
color: #333333;
|
|
margin-left: 17px;
|
|
position: relative;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -40px;
|
|
top: 25%;
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
// background: url(@/assets/images/统计.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btnOne {
|
|
// background: url("@/assets/images/tea查看.png") no-repeat;
|
|
// background-size: 100% 100%;
|
|
border: none;
|
|
min-width: 118px;
|
|
padding-left: 30px;
|
|
height: 40px;
|
|
}
|
|
:deep(.el-form) {
|
|
.el-form-item:nth-child(2) {
|
|
margin-right: 15px !important;
|
|
}
|
|
.el-form-item:nth-child(3) {
|
|
margin-right: 0px !important;
|
|
}
|
|
}
|
|
</style>
|