KindergartenUI/src/views/system/quality/index.vue
2022-09-16 09:51:35 +08:00

466 lines
12 KiB
Vue

<template>
<div class="app-container">
<el-form
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="90px"
>
<student
style="width: 500px; display: inline"
@itemlist="itemlists"
></student>
<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-card
v-show="itemshow"
class="box-card"
style="width: 95%; margin: 0 auto"
>
<div slot="header" style="text-align: center">身体素质测试</div>
<el-row style="text-align: center">
<el-col
:span="5"
class="toptitle"
style="
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
"
>身体素质测试</el-col
>
<el-col
:span="5"
class="toptitle"
style="
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
"
>测量值</el-col
>
<el-col
:span="9"
class="toptitle"
style="
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
"
>成绩</el-col
>
<el-col
:span="5"
class="toptitle"
style="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"
class="text"
style="
height: 100px;
line-height: 100px;
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
"
>
{{ item.itemName }}
</el-col>
<el-col
class="text"
: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
class="text"
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: 75%;
line-height: 20px;
overflow: hidden;
width: 40px;
"
>
{{
(
((item.maxScore - item.minScore) / 5) * 4 +
item.minScore
).toFixed(1)
}}
</div>
<div
style="
position: absolute;
top: 20px;
left: 80%;
width: 1px;
height: 15px;
background: #a2a4a1;
"
></div>
<div
style="
position: absolute;
top: 1px;
left: 55%;
overflow: hidden;
line-height: 20px;
width: 40px;
"
>
{{
(
((item.maxScore - item.minScore) / 5) * 3 +
item.minScore
).toFixed(1)
}}
</div>
<div
style="
position: absolute;
top: 20px;
left: 60%;
width: 1px;
height: 15px;
background: #a2a4a1;
"
></div>
<div
style="
position: absolute;
top: 1px;
left: 35%;
line-height: 20px;
overflow: hidden;
width: 40px;
"
>
{{
(
((item.maxScore - item.minScore) / 5) * 2 +
item.minScore
).toFixed(1)
}}
</div>
<div
style="
position: absolute;
top: 20px;
left: 40%;
width: 1px;
height: 15px;
background: #a2a4a1;
"
></div>
<div
style="
position: absolute;
top: 1px;
left: 15%;
line-height: 20px;
overflow: hidden;
width: 40px;
"
>
{{
(
((item.maxScore - item.minScore) / 5) * 1 +
item.minScore
).toFixed(1)
}}
</div>
<div
style="
position: absolute;
top: 20px;
left: 20%;
width: 1px;
height: 15px;
background: #a2a4a1;
"
></div>
<div
style="
position: absolute;
top: 1px;
left: -5%;
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: -3%;
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
class="text"
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: 5%;
margin-top: 7%;
"
>成绩评价</span
>
<div style="position: absolute; left: 25%; top: 40%">
{{ item.scoreDictValue }}
</div>
</el-col>
<el-col
class="text"
: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 student from "@/views/assembly/student.vue";
import { getRoleInfo, testBodyScoreInfo } from "@/api/system/quality";
export default {
name: "quality",
components: {
student,
},
data() {
return {
itemshow: false,
itemshow2: false,
// 显示搜索条件
showSearch: true,
//学生成绩
studentscorelist: [],
// 成绩查询参数
studentscore: {
pageNum: 1,
pageSize: 999,
studentId: "",
batchCode: "",
// studentId: "27",
// batchCode: "PC202208230011",
// studentId: "14",
// batchCode: "PC202208030005",
// studentId: "9",
// batchCode: "PC202208030004",
},
};
},
created() {},
methods: {
itemlists(studentId, batchCode) {
console.log(studentId, batchCode);
this.studentscore.studentId = studentId;
this.studentscore.batchCode = batchCode;
},
/** 查看按钮操作 */
handleQuery() {
this.studenttext();
},
//学生身体素质
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);
}
});
},
getList() {
//用户权限
getRoleInfo().then((res) => {
console.log(res);
this.classqueryParams.kindergartenId = res.data.kindergartenId;
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: 14px;
}
.toptitle {
height: 50px;
line-height: 50px;
background-color: #f8f8f9;
font-size: 15px;
font-weight: 600;
}
::v-deep .el-card__header {
border: none;
}
.cz2 {
background: #db6b6f;
height: 5px;
align-items: center;
line-height: 30px;
position: absolute;
top: 40px;
}
::v-deep .el-form {
display: inline;
}
</style>