539 lines
16 KiB
Vue
539 lines
16 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
|
|
<kindergarten @kinbatlist="kinbatlist" style="width: 500px; display: inline"></kindergarten>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查看</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
</el-row>
|
|
<el-row v-show="itemshow">
|
|
<div>
|
|
<div style="display: flex; margin-top: 20px">
|
|
<div style="width: 50%">
|
|
<div slot="header" class="header">
|
|
<span>班级综合体测成绩排名</span>
|
|
</div>
|
|
<div v-if="yclassname1.length != 0" style="position: relative">
|
|
<div class="title">大班</div>
|
|
<div id="main" style="width: 550px; height: 400px; margin: 0 auto"></div>
|
|
</div>
|
|
<div v-if="yclassname2.length != 0" style="position: relative">
|
|
<div class="title">中班</div>
|
|
<div id="main2" style="width: 550px; height: 400px; margin: 0 auto"></div>
|
|
</div>
|
|
<div v-if="yclassname3.length != 0" style="position: relative">
|
|
<div class="title">小班</div>
|
|
<div id="main3" style="width: 550px; height: 400px; margin: 0 auto"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 50%">
|
|
<div slot="header" class="header" style="margin-bottom: 20px">
|
|
<span>全园优秀幼儿榜(TOP10)</span>
|
|
</div>
|
|
<el-table
|
|
ref="studentlist"
|
|
:data="studentlist"
|
|
highlight-current-row
|
|
style="margin: 0 auto; width: 530px"
|
|
>
|
|
<el-table-column type="index" width="130" label="排名" align="center"></el-table-column>
|
|
<el-table-column property="studentName" label="姓名" width="130" align="center"></el-table-column>
|
|
<el-table-column property="className" label="班级" width="130" align="center"></el-table-column>
|
|
<el-table-column property="itemFraction" label="分数" width="140" align="center"></el-table-column>
|
|
</el-table>
|
|
|
|
<div slot="header" class="header" style="margin-bottom: 20px; margin-top: 20px">
|
|
<span>班级优秀幼儿榜</span>
|
|
</div>
|
|
<el-table
|
|
ref="selectAllClassBylist"
|
|
:data="selectAllClassBylist"
|
|
highlight-current-row
|
|
style="margin: 0 auto; width: 530px"
|
|
>
|
|
<el-table-column type="index" width="130" label="排名" align="center"></el-table-column>
|
|
<el-table-column property="studentName" label="姓名" width="130" align="center"></el-table-column>
|
|
<el-table-column property="className" label="班级" width="130" align="center"></el-table-column>
|
|
<el-table-column property="itemFraction" label="分数" width="140" align="center"></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-row>
|
|
<el-row :gutter="20" v-if="itemshow2">
|
|
<el-col :span="24" :offset="0">
|
|
<el-card>
|
|
<div slot="header" style="text-align: center">
|
|
<img style="width: 40px" src="@/icons/笑脸.png" alt />
|
|
|
|
<div>
|
|
<!-- card title -->
|
|
该幼儿园此批次暂无数据
|
|
</div>
|
|
</div>
|
|
<!-- card body -->
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
import { getRoleInfo } from "@/api/system/quality";
|
|
import {
|
|
StudentList,
|
|
ClassList,
|
|
selectAllClassById
|
|
} from "@/api/system/survey";
|
|
import Kindergarten from "../../assembly/kindergarten.vue";
|
|
export default {
|
|
name: "KindergartenPhysicalTest",
|
|
components: { Kindergarten },
|
|
data() {
|
|
return {
|
|
itemshow: false,
|
|
itemshow2: false,
|
|
// 显示搜索条件
|
|
showSearch: true,
|
|
studentlist: [],
|
|
selectAllClassBylist: [],
|
|
//查询传值
|
|
selectAllClassByquery: {
|
|
kindergartenId: "",
|
|
batchCode: ""
|
|
},
|
|
classqueryParams: {
|
|
kindergartenId: "",
|
|
batchCode: "",
|
|
pageNum: 1,
|
|
pageSize: 10
|
|
// kindergartenId: "2",
|
|
// batchCode: "PC202208260011",
|
|
},
|
|
studentlistqueryParams: {
|
|
kindergartenId: "",
|
|
batchCode: ""
|
|
// kindergartenId: "2",
|
|
// batchCode: "PC202208260011",
|
|
},
|
|
LARGECLASS: "LARGE_CLASS",
|
|
MIDDLECLASS: "MIDDLE_CLASS",
|
|
SMALLCLASS: "SMALL_CLASS",
|
|
yclassname1: [],
|
|
yclassname2: [],
|
|
yclassname3: [],
|
|
classscore1: [],
|
|
classscore2: [],
|
|
classscore3: []
|
|
};
|
|
},
|
|
mounted() {},
|
|
created() {
|
|
// this.StudentListinfo();
|
|
// this.ClassListinfo();
|
|
},
|
|
methods: {
|
|
handleQuery() {
|
|
this.StudentListinfo();
|
|
// this.ClassListinfo();
|
|
// this.selectAllClassByIdinfo();
|
|
},
|
|
kinbatlist(kindergartenId, batchCode) {
|
|
this.studentlistqueryParams.kindergartenId = kindergartenId;
|
|
this.studentlistqueryParams.batchCode = batchCode;
|
|
this.classqueryParams.kindergartenId = kindergartenId;
|
|
this.classqueryParams.batchCode = batchCode;
|
|
this.selectAllClassByquery.kindergartenId = kindergartenId;
|
|
this.selectAllClassByquery.batchCode = batchCode;
|
|
},
|
|
ClassListinfo() {
|
|
ClassList(this.classqueryParams).then(res => {});
|
|
},
|
|
StudentListinfo() {
|
|
StudentList(this.studentlistqueryParams).then(res => {
|
|
if (res.data.testAllStudentScoreVOList != null) {
|
|
this.studentlist = res.data.testAllStudentScoreVOList;
|
|
this.itemshow2 = false;
|
|
this.itemshow = true;
|
|
}
|
|
if (res.data.allStudentScoreVOList != null) {
|
|
this.yclassname1 = [];
|
|
this.yclassname2 = [];
|
|
this.yclassname3 = [];
|
|
this.classscore1 = [];
|
|
this.classscore2 = [];
|
|
this.classscore3 = [];
|
|
res.data.allStudentScoreVOList.forEach(e => {
|
|
if (e.classType == this.LARGECLASS) {
|
|
this.yclassname1.push(e.className);
|
|
if (
|
|
e.itemScoreAll == "" ||
|
|
!e.itemScoreAll ||
|
|
e.itemScoreAll == null
|
|
) {
|
|
this.classscore1.push(0);
|
|
} else {
|
|
this.classscore1.push(e.itemScoreAll);
|
|
}
|
|
} else if (e.classType == this.MIDDLECLASS) {
|
|
this.yclassname2.push(e.className);
|
|
if (
|
|
e.itemScoreAll == "" ||
|
|
!e.itemScoreAll ||
|
|
e.itemScoreAll == null
|
|
) {
|
|
this.classscore2.push(0);
|
|
} else {
|
|
this.classscore2.push(e.itemScoreAll);
|
|
}
|
|
} else if (e.classType == this.SMALLCLASS) {
|
|
this.yclassname3.push(e.className);
|
|
if (
|
|
e.itemScoreAll == "" ||
|
|
!e.itemScoreAll ||
|
|
e.itemScoreAll == null
|
|
) {
|
|
this.classscore3.push(0);
|
|
} else {
|
|
this.classscore3.push(e.itemScoreAll);
|
|
}
|
|
}
|
|
});
|
|
this.$nextTick(e => {
|
|
if (this.yclassname1.length != 0) {
|
|
var myChart = echarts.init(document.getElementById("main"));
|
|
}
|
|
if (this.yclassname2.length != 0) {
|
|
var myChart2 = echarts.init(document.getElementById("main2"));
|
|
}
|
|
if (this.yclassname3.length != 0) {
|
|
var myChart3 = echarts.init(document.getElementById("main3"));
|
|
}
|
|
// var myChart = echarts.init(document.getElementById("main"));
|
|
// var myChart2 = echarts.init(document.getElementById("main2"));
|
|
// var myChart3 = echarts.init(document.getElementById("main3"));
|
|
var app = {};
|
|
var option;
|
|
var option2;
|
|
var option3;
|
|
const posList = [
|
|
"left",
|
|
"right",
|
|
"top",
|
|
"bottom",
|
|
"inside",
|
|
"insideTop",
|
|
"insideLeft",
|
|
"insideRight",
|
|
"insideBottom",
|
|
"insideTopLeft",
|
|
"insideTopRight",
|
|
"insideBottomLeft",
|
|
"insideBottomRight"
|
|
];
|
|
app.configParameters = {
|
|
rotate: {
|
|
min: 0,
|
|
max: 90
|
|
},
|
|
align: {
|
|
options: {
|
|
left: "left",
|
|
center: "center",
|
|
right: "right"
|
|
}
|
|
},
|
|
verticalAlign: {
|
|
options: {
|
|
top: "top",
|
|
middle: "middle",
|
|
bottom: "bottom"
|
|
}
|
|
},
|
|
position: {
|
|
options: posList.reduce(function(map, pos) {
|
|
map[pos] = pos;
|
|
return map;
|
|
}, {})
|
|
},
|
|
distance: {
|
|
min: 0,
|
|
max: 100
|
|
}
|
|
};
|
|
app.config = {
|
|
rotate: 0,
|
|
align: "center",
|
|
verticalAlign: "middle",
|
|
position: "top",
|
|
distance: 15,
|
|
onChange: function() {
|
|
const labelOption = {
|
|
rotate: app.config.rotate,
|
|
align: app.config.align,
|
|
verticalAlign: app.config.verticalAlign,
|
|
position: app.config.position,
|
|
distance: app.config.distance
|
|
};
|
|
myChart.setOption({
|
|
series: [
|
|
{
|
|
label: labelOption
|
|
},
|
|
{
|
|
label: labelOption
|
|
},
|
|
{
|
|
label: labelOption
|
|
},
|
|
{
|
|
label: labelOption
|
|
}
|
|
]
|
|
});
|
|
}
|
|
};
|
|
const labelOption = {
|
|
show: true,
|
|
position: app.config.position,
|
|
distance: app.config.distance,
|
|
align: app.config.align,
|
|
verticalAlign: app.config.verticalAlign,
|
|
rotate: app.config.rotate,
|
|
formatter: "{c}",
|
|
fontSize: 12,
|
|
rich: {
|
|
name: {}
|
|
}
|
|
};
|
|
option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow"
|
|
}
|
|
},
|
|
legend: {},
|
|
xAxis: [
|
|
{
|
|
axisLabel: {
|
|
inside: false,
|
|
textStyle: {
|
|
color: "#000",
|
|
fontSize: "10",
|
|
itemSize: ""
|
|
},
|
|
interval: 0,
|
|
rotate: -30 //倾斜的程度
|
|
},
|
|
type: "category",
|
|
axisTick: { show: false },
|
|
data: this.yclassname1
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value"
|
|
// max: (value) => {
|
|
// return Math.ceil(value.max / 100) * 100;
|
|
// },
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
barWidth: 35,
|
|
barGap: 0,
|
|
color: "#00B050",
|
|
label: labelOption,
|
|
emphasis: {
|
|
focus: "series"
|
|
},
|
|
data: this.classscore1
|
|
}
|
|
]
|
|
};
|
|
option2 = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow"
|
|
}
|
|
},
|
|
legend: {},
|
|
xAxis: [
|
|
{
|
|
axisLabel: {
|
|
inside: false,
|
|
textStyle: {
|
|
color: "#000",
|
|
fontSize: "10",
|
|
itemSize: ""
|
|
},
|
|
interval: 0,
|
|
rotate: -30 //倾斜的程度
|
|
},
|
|
type: "category",
|
|
axisTick: { show: false },
|
|
data: this.yclassname2
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value"
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
barGap: 0,
|
|
barWidth: 35,
|
|
|
|
color: "#00B050",
|
|
label: labelOption,
|
|
emphasis: {
|
|
focus: "series"
|
|
},
|
|
data: this.classscore2
|
|
}
|
|
]
|
|
};
|
|
option3 = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow"
|
|
}
|
|
},
|
|
legend: {},
|
|
xAxis: [
|
|
{
|
|
axisLabel: {
|
|
inside: false,
|
|
textStyle: {
|
|
color: "#000",
|
|
fontSize: "10",
|
|
itemSize: ""
|
|
},
|
|
interval: 0,
|
|
rotate: -30 //倾斜的程度
|
|
},
|
|
type: "category",
|
|
axisTick: { show: false },
|
|
data: this.yclassname3
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value"
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
barGap: 0,
|
|
barWidth: 35,
|
|
color: "#00B050",
|
|
label: labelOption,
|
|
emphasis: {
|
|
focus: "series"
|
|
},
|
|
data: this.classscore3
|
|
}
|
|
]
|
|
};
|
|
|
|
if (this.yclassname1.length != 0) {
|
|
option && myChart.setOption(option);
|
|
}
|
|
if (this.yclassname2.length != 0) {
|
|
option2 && myChart2.setOption(option2);
|
|
}
|
|
if (this.yclassname3.length != 0) {
|
|
option3 && myChart3.setOption(option3);
|
|
}
|
|
// option && myChart.setOption(option);
|
|
// option2 && myChart2.setOption(option2);
|
|
// option3 && myChart3.setOption(option3);
|
|
this.itemshow = true;
|
|
this.itemshow2 = false;
|
|
});
|
|
}
|
|
if (res.data.allClassByVOList != null) {
|
|
this.selectAllClassBylist = res.data.allClassByVOList;
|
|
}
|
|
if (
|
|
res.data.allStudentScoreVOList == null &&
|
|
res.data.testAllStudentScoreVOList == null &&
|
|
res.data.allClassByVOList == null
|
|
) {
|
|
this.itemshow2 = true;
|
|
this.itemshow = false;
|
|
}
|
|
});
|
|
},
|
|
selectAllClassByIdinfo() {
|
|
selectAllClassById(this.selectAllClassByquery).then(res => {});
|
|
},
|
|
getList() {
|
|
//用户权限
|
|
getRoleInfo().then(res => {
|
|
var user = res.data.roleKeys;
|
|
if (user.includes("enchou")) {
|
|
return;
|
|
} else if (user.includes("teacher")) {
|
|
return;
|
|
} else if (user.includes("parent")) {
|
|
return;
|
|
}
|
|
});
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.form = {};
|
|
this.resetForm("form");
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped='scss'>
|
|
.text {
|
|
font-size: 12px;
|
|
position: absolute;
|
|
left: 19%;
|
|
top: 10%;
|
|
}
|
|
.header {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
width: 380px;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
margin: 0 auto;
|
|
background-color: #f0f0f0;
|
|
border-radius: 25px;
|
|
}
|
|
.title {
|
|
width: 70px;
|
|
background-color: #00d1da;
|
|
color: #fff;
|
|
line-height: 25px;
|
|
height: 25px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
border-radius: 15px;
|
|
position: absolute;
|
|
left: 7%;
|
|
top: 6%;
|
|
}
|
|
::v-deep .el-card__header {
|
|
border: none;
|
|
}
|
|
::v-deep .el-form {
|
|
display: inline;
|
|
}
|
|
</style>
|