KindergartenUI/src/views/system/quality/index.vue
2022-08-26 13:52:20 +08:00

967 lines
26 KiB
Vue

<template>
<div class="app-container">
<el-form
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="90px"
>
<el-form-item label="所属幼儿园" prop="categoryName" v-if="showyey">
<el-button
@click="kindergartenshow = true"
v-if="kindergartenName == '请选择幼儿园'"
style="width: 250px; text-align: left; height: 32px; color: #c0c4cc"
>{{ kindergartenName }}</el-button
>
<el-button
@click="kindergartenshow = true"
style="width: 250px; text-align: left; height: 32px"
v-else
>{{ kindergartenName }}</el-button
>
</el-form-item>
<el-form-item
label="所属班级"
prop="categoryName"
label-width="70px"
v-if="showbj"
>
<el-button
@click="classshowclick"
style="width: 250px; text-align: left; height: 32px; color: #c0c4cc"
v-if="className == '请选择班级'"
>{{ className }}</el-button
>
<el-button
@click="classshowclick"
style="width: 250px; text-align: left; height: 32px"
v-else
>{{ className }}</el-button
>
</el-form-item>
<el-form-item label="学生" prop="categoryName" label-width="45px">
<el-button
@click="studentshowclick"
v-if="studentname == '请选择学生'"
style="width: 250px; text-align: left; height: 32px; color: #c0c4cc"
>{{ studentname }}</el-button
>
<el-button
@click="studentshowclick"
style="width: 250px; text-align: left; height: 32px"
v-else
>{{ studentname }}</el-button
>
</el-form-item>
<el-form-item label="批次成绩" prop="categoryName" label-width="70px">
<el-button
@click="batchCodeshowclick"
style="width: 250px; text-align: left; height: 32px; color: #c0c4cc"
v-if="batchCodeName == '请选择批次'"
>{{ batchCodeName }}</el-button
>
<el-button
@click="batchCodeshowclick"
style="width: 250px; text-align: left; height: 32px"
v-else
>{{ batchCodeName }}</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-dialog
width="590px"
title="选择批次"
:visible.sync="batchCodeshow"
append-to-body
style="margin-top: 20px"
:before-close="batchCodecancel"
>
<el-table :data="testScorelist" align="center" style="margin-top: 0px">
<el-table-column label="请选择" width="100" align="center">
<template slot-scope="scope">
<el-button
type="primary"
style="width: 20px; height: 20px"
v-if="batchCodeId == scope.row.id"
circle
@click="batchCodeclick(scope.row)"
></el-button>
<el-button
v-else
style="width: 15px; height: 15px"
circle
@click="batchCodeclick(scope.row)"
></el-button>
</template>
</el-table-column>
<el-table-column
property="batchCode"
label="批次编号"
width="200"
align="center"
/>
<el-table-column
property="batchName"
label="批次名称"
width="200"
align="center"
/>
</el-table>
<pagination
v-show="total4 > 0"
:total="total4"
:page.sync="testqueryParams.pageNum"
:limit.sync="testqueryParams.pageSize"
@pagination="testScore"
/>
</el-dialog>
<!-- //学生 -->
<el-dialog
width="850px"
title="选择学生"
:visible.sync="studentshow"
append-to-body
style="margin-top: 70px"
:before-close="studentcancel"
>
<el-table :data="studentInfoList" align="center" style="margin-top: 10px">
<el-table-column label="请选择" width="70" align="center">
<template slot-scope="scope">
<el-button
type="primary"
style="width: 20px; height: 20px"
circle
v-if="studentId == scope.row.id"
@click="studentclick(scope.row)"
></el-button>
<el-button
v-else
style="width: 15px; height: 15px"
circle
@click="studentclick(scope.row)"
></el-button>
</template>
</el-table-column>
<el-table-column
property="className"
label="班级名称"
width="190"
align="center"
/>
<el-table-column
property="studentName"
label="学生姓名"
width="190"
align="center"
/>
<el-table-column
property="studentName"
label="性别"
width="190"
align="center"
>
<template slot-scope="scope">
{{ scope.row.studentSex == "MALE" ? "男" : "女" }}
</template>
</el-table-column>
<el-table-column
property="homeAddress"
label="住址"
width="190"
align="center"
/>
</el-table>
<pagination
v-show="total3 > 0"
:total="total3"
:page.sync="studentqueryParams.pageNum"
:limit.sync="studentqueryParams.pageSize"
@pagination="studentlist"
/>
</el-dialog>
<!-- //幼儿园 -->
<el-dialog
width="850px"
title="选择所属幼儿园"
:visible.sync="kindergartenshow"
append-to-body
:before-close="kindergartencancel"
>
<el-table :data="kindergartenList">
<el-table-column label="请选择" width="70" align="center">
<template slot-scope="scope">
<el-button
type="primary"
style="width: 15px; height: 15px"
circle
@click="kindergartenNameclick(scope.row)"
v-if="kindergartenId == scope.row.id"
></el-button>
<el-button
v-else
style="width: 15px; height: 15px"
circle
@click="kindergartenNameclick(scope.row)"
></el-button>
</template>
</el-table-column>
<el-table-column
property="kindergartenName"
label="幼儿园名字"
width="150"
align="center"
>
</el-table-column>
<el-table-column
property="kindergartenAddress"
label="幼儿园地址"
width="150"
align="center"
>
</el-table-column>
<el-table-column
label="幼儿园所在组织"
align="center"
prop="organizeName"
width="150"
>
</el-table-column>
<el-table-column
property="contacts"
label="联系人"
width="150"
align="center"
>
</el-table-column>
<el-table-column
property="phone"
label="联系电话"
width="150"
align="center"
>
</el-table-column>
</el-table>
<pagination
v-show="total1 > 0"
:total="total1"
:page.sync="kqueryParams.pageNum"
:limit.sync="kqueryParams.pageSize"
@pagination="getList"
/>
</el-dialog>
<!-- //班级 -->
<el-dialog
width="1000px"
title="选择所属班级"
:visible.sync="classshow"
append-to-body
:before-close="classcancel"
>
<el-table :data="classinfoList" align="center" style="margin-top: 10px">
<el-table-column label="请选择" width="70" align="center">
<template slot-scope="scope">
<el-button
type="primary"
style="width: 20px; height: 20px"
circle
@click="classclick(scope.row)"
v-if="classId == scope.row.id"
></el-button>
<el-button
v-else
style="width: 15px; height: 15px"
circle
@click="classclick(scope.row)"
></el-button>
</template>
</el-table-column>
<el-table-column
property="kindergartenName"
label="幼儿园名称"
width="190"
align="center"
/>
<el-table-column
property="className"
label="班级名称"
width="180"
align="center"
>
</el-table-column>
<el-table-column
property="classType"
label="班级类型"
width="160"
align="center"
>
<template slot-scope="scope">
{{ scope.row.classType == dictValue1 ? "大班" : "" }}
{{ scope.row.classType == dictValue2 ? "中班" : "" }}
{{ scope.row.classType == dictValue3 ? "小班" : "" }}
{{ scope.row.classType == dictValue4 ? "毕业" : "" }}
</template>
</el-table-column>
<el-table-column
property="classTeacher"
label="班主任姓名"
width="180"
align="center"
>
</el-table-column>
<el-table-column
property="phone"
label="联系电话"
width="190"
align="center"
>
</el-table-column>
</el-table>
<pagination
v-show="total2 > 0"
:total="total2"
:page.sync="classqueryParams.pageNum"
:limit.sync="classqueryParams.pageSize"
@pagination="classinfo"
/>
</el-dialog>
<el-card
v-show="itemshow"
class="box-card"
style="width: 95%; margin: 0 auto"
>
<div slot="header" style="text-align: center; margin-bottom: 30px">
身体素质测试
</div>
<el-row style="text-align: center">
<el-col
:span="5"
style="
height: 60px;
line-height: 60px;
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
"
>身体素质测试</el-col
>
<el-col
:span="5"
style="
height: 60px;
line-height: 60px;
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
"
>测量值</el-col
>
<el-col
:span="9"
style="
height: 60px;
line-height: 60px;
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
"
>成绩</el-col
>
<el-col
:span="5"
style="
height: 60px;
line-height: 60px;
border-bottom: 1px solid #ededed;
"
>综合评价</el-col
>
</el-row>
<el-row
style="text-align: center"
v-for="(item, index) in studentscorelist"
:key="index"
>
<el-col
:span="5"
style="
height: 100px;
line-height: 100px;
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
"
>
{{ item.itemName }}
</el-col>
<el-col
:span="5"
style="
height: 100px;
line-height: 100px;
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
"
>
{{ item.itemScore ? item.itemScore : "" }}
{{ item.scoreDictValue ? item.scoreDictValue : "" }}
{{ item.measureUnit }}
</el-col>
<el-col
v-if="item.itemScore"
:span="9"
style="
height: 100px;
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
position: relative;
overflow: hidden;
"
>
<span style="position: absolute; left: 5%; top: 10px"
>{{
item.measureUnit == "s" || item.measureUnit == "h" ? "时间" : ""
}}{{
item.measureUnit == "cm" || item.measureUnit == "m" ? "距离" : ""
}}
{{ item.measureUnit == "kg" ? "千克" : "" }}
{{ item.measureUnit == "g" ? "克" : "" }}({{ item.measureUnit }})
</span>
<span style="position: absolute; left: 6%; top: 70%">评价</span>
<div
style="
width: 65%;
margin: 0 auto;
margin-top: 10px;
margin-left: 25%;
position: relative;
"
>
<div
style="
position: absolute;
top: 1px;
left: 79%;
line-height: 20px;
overflow: hidden;
width: 32px;
"
>
{{ ((item.maxScore - item.minScore) / 5) * 4 + item.minScore }}
</div>
<div
style="
position: absolute;
top: 20px;
left: 80%;
width: 1px;
height: 15px;
background: #a2a4a1;
"
></div>
<div
style="
position: absolute;
top: 1px;
left: 59%;
overflow: hidden;
line-height: 20px;
width: 32px;
"
>
{{ ((item.maxScore - item.minScore) / 5) * 3 + item.minScore }}
</div>
<div
style="
position: absolute;
top: 20px;
left: 60%;
width: 1px;
height: 15px;
background: #a2a4a1;
"
></div>
<div
style="
position: absolute;
top: 1px;
left: 39%;
line-height: 20px;
overflow: hidden;
width: 32px;
"
>
{{ ((item.maxScore - item.minScore) / 5) * 2 + item.minScore }}
</div>
<div
style="
position: absolute;
top: 20px;
left: 40%;
width: 1px;
height: 15px;
background: #a2a4a1;
"
></div>
<div
style="
position: absolute;
top: 1px;
left: 19%;
line-height: 20px;
overflow: hidden;
width: 32px;
"
>
{{ ((item.maxScore - item.minScore) / 5) * 1 + item.minScore }}
</div>
<div
style="
position: absolute;
top: 20px;
left: 20%;
width: 1px;
height: 15px;
background: #a2a4a1;
"
></div>
<div
style="
position: absolute;
top: 1px;
left: -1%;
line-height: 20px;
overflow: hidden;
width: 32px;
"
>
{{ item.minScore == null ? 0 : item.minScore }}
</div>
<div
style="
position: absolute;
top: 20px;
left: 0%;
width: 1px;
height: 15px;
background: #a2a4a1;
"
></div>
<div
style="
position: absolute;
top: 1px;
right: -1%;
line-height: 20px;
overflow: hidden;
width: 32px;
"
>
{{ item.maxScore == null ? 100 : item.maxScore }}
</div>
<div
style="
position: absolute;
top: 20px;
right: 0%;
width: 2px;
height: 15px;
background: #a2a4a1;
"
></div>
<div
class="cz2"
:style="{
width:
((item.itemScore - item.minScore) /
(item.maxScore - item.minScore)) *
100 +
'%',
}"
></div>
</div>
<div style="position: absolute; left: 30%; top: 72%">
{{ item.leveName }}
</div>
</el-col>
<el-col
v-else
:span="9"
style="
height: 100px;
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
position: relative;
"
>
<span
style="
margin-top: 20px;
float: left;
margin-left: 10%;
margin-top: 7%;
"
>成绩评价</span
>
<div style="position: absolute; left: 48%; top: 40%">
{{ item.leveName }}
</div>
</el-col>
<el-col
:span="5"
style="
height: 100px;
line-height: 100px;
border-bottom: 1px solid #ededed;
"
>{{ item.syntheticalAssess }}</el-col
>
</el-row>
</el-card>
<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 {
listKindergartenInfo,
tKindergartenInfo,
} from "@/api/system/kindergartenInfo";
import { listStudentInfo } from "@/api/system/studentInfo";
import { listClassinfo } from "@/api/system/classinfo";
import {
getRoleInfo,
testBodyScoreInfo,
testScoreBatch,
} from "@/api/system/quality";
export default {
name: "quality",
components: {},
data() {
return {
itemshow: false,
itemshow2: false,
showyey: true,
showbj: true,
total1: 0,
total2: 0,
total3: 0,
total4: 0,
//遮罩层
kindergartenshow: false,
classshow: false,
studentshow: false,
batchCodeshow: false,
//班级类型
dictValue1: "",
dictValue2: "",
dictValue3: "",
dictValue4: "",
ClassType: "class_type",
// 显示搜索条件
showSearch: true,
// 表单参数
form: {},
//学生查询
studentqueryParams: {
pageNum: 1,
pageSize: 10,
classId: "",
nationDictId: null,
studentName: null,
studentSex: null,
studentNumber: null,
birthDate: null,
cardNumber: null,
onceName: null,
homeAddress: null,
},
//班级查询
classqueryParams: {
pageNum: 1,
pageSize: 10,
kindergartenId: "",
className: null,
classType: null,
},
//幼儿园查询参数
kqueryParams: {
pageNum: 1,
pageSize: 10,
organizeId: null,
kindergartenName: null,
kindergartenAddress: null,
kindergartenType: null,
phone: null,
contacts: null,
},
//幼儿园list
kindergartenList: [],
//幼儿园名字
kindergartenName: "请选择幼儿园",
//幼儿园ID
kindergartenId: "",
//班级list
classinfoList: [],
//班级名字
className: "请选择班级",
//班级ID
classId: "",
//学生list
studentInfoList: [],
//学生名字
studentname: "请选择学生",
//学生ID
studentId: "",
//批次名称
batchCodeName: "请选择批次",
//批次ID
batchCodeId: "",
//批次list
testScorelist: [],
//学生成绩
studentscorelist: [],
// 成绩查询参数
studentscore: {
pageNum: 1,
pageSize: 10,
studentId: "",
batchCode: "",
// studentId: "27",
// batchCode: "PC202208230011",
// studentId: "14",
// batchCode: "PC202208030005",
// studentId: "9",
// batchCode: "PC202208030004",
},
//批次编号
testqueryParams: {
pageNum: 1,
pageSize: 10,
},
};
},
created() {
this.getList();
this.class();
// this.studenttext();
},
methods: {
//学生身体素质
studenttext() {
testBodyScoreInfo(this.studentscore).then((res) => {
// res.rows[3].levelMaxScore = 19.5;
// res.rows[3].levelMinScore = 4.5;
// res.rows[3].itemScore = 7.5;
if (!res.rows || res.rows == "" || res.rows == []) {
this.itemshow2 = true;
this.itemshow = false;
} else {
this.itemshow = true;
this.itemshow2 = false;
this.studentscorelist = res.rows;
console.log(this.studentscorelist);
}
});
},
// 点击学生按钮
studentshowclick() {
if (this.studentqueryParams.classId == "") {
this.$message.error("请先选择班级");
} else {
this.studentshow = true;
this.studentlist();
}
},
//点击批次
batchCodeshowclick() {
if (this.studentscore.studentId == "") {
this.$message.error("请先选择学生");
} else {
this.testScore();
this.batchCodeshow = true;
}
},
//点击批次左边
batchCodeclick(row) {
this.batchCodeName = row.batchName;
this.batchCodeId = row.id;
this.studentscore.batchCode = row.batchCode;
this.batchCodeshow = false;
this.studenttext();
},
//批次
testScore() {
testScoreBatch(this.testqueryParams).then((res) => {
this.testScorelist = res.rows;
this.total4 = res.total;
});
},
//学生左侧按钮
studentclick(row) {
this.studentname = row.studentName;
this.studentId = row.id;
this.studentshow = false;
this.studentscore.studentId = row.id;
if (this.studentscore.batchCode != "") {
this.studenttext();
}
},
//获取学生
studentlist() {
listStudentInfo(this.studentqueryParams).then((res) => {
this.studentInfoList = res.rows;
this.total3 = res.total;
// console.log(this.studentInfoList);
});
},
//点击所属班级
classshowclick() {
if (this.classqueryParams.kindergartenId == "") {
this.$message.error("请先选择幼儿园");
} else {
this.classshow = true;
this.classinfo();
}
// console.log(this.classqueryParams);
},
//批次关闭
batchCodecancel() {
this.batchCodeshow = false;
},
//学生关闭
studentcancel() {
this.studentshow = false;
},
//幼儿园关闭
kindergartencancel() {
this.kindergartenshow = false;
},
//班级关闭
classcancel() {
this.classshow = false;
},
//班级左侧点击
classclick(row) {
// console.log(row);
this.className = row.className;
this.classId = row.id;
this.studentqueryParams.classId = row.id;
this.studentname = "请选择学生";
this.studentId = "";
this.studentscore.studentId = "";
this.classshow = false;
},
//幼儿园左侧点击
kindergartenNameclick(row) {
this.classqueryParams.kindergartenId = row.id;
this.kindergartenName = row.kindergartenName;
this.kindergartenId = row.id;
this.className = "请选择班级";
this.classId = "";
this.studentname = "请选择学生";
this.studentId = "";
this.studentscore.studentId = "";
this.kindergartenshow = false;
},
//班级类型
class() {
tKindergartenInfo(this.ClassType).then((res) => {
this.dictValue1 = res.data[0].dictValue;
this.dictValue2 = res.data[1].dictValue;
this.dictValue3 = res.data[2].dictValue;
this.dictValue4 = res.data[3].dictValue;
});
},
//班级list
classinfo() {
listClassinfo(this.classqueryParams).then((response) => {
this.classinfoList = response.rows;
this.total2 = response.total;
// console.log(this.classinfoList);
});
},
getList() {
//用户权限
getRoleInfo().then((res) => {
console.log(res);
this.classqueryParams.kindergartenId = res.data.kindergartenId;
var user = res.data.roleKeys;
console.log(user);
if (user.includes("enchou")) {
this.showyey = false;
return;
} else if (user.includes("teacher")) {
this.showyey = false;
return;
} else if (user.includes("parent")) {
this.showyey = false;
this.showbj = false;
return;
}
});
//获取幼儿园list
listKindergartenInfo(this.kqueryParams).then((response) => {
this.kindergartenList = response.rows;
this.total1 = response.total;
// console.log(this.kindergartenList);
});
},
// 表单重置
reset() {
this.form = {};
this.resetForm("form");
},
},
};
</script>
<style scoped='scss'>
::v-deep .el-card__header {
border: none;
}
.cz2 {
background: #db6b6f;
height: 5px;
align-items: center;
line-height: 30px;
position: absolute;
top: 40px;
}
</style>