KindergartenUI/src/views/system/classconstitution/index.vue

768 lines
21 KiB
Vue
Raw Normal View History

2022-08-22 09:05:11 +08:00
<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">
<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">
<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="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="500px"
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="70" 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="190"
align="center"
/>
<el-table-column
property="batchName"
label="批次名称"
width="190"
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="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-row v-show="itemshow">
<el-col :span="24" :offset="0">
<div style="margin: 0 auto">
<div
style="display: flex; text-align: center; justify-content: center"
>
<div
style="
width: 120px;
line-height: 60px;
border: 1px solid #f0f0f0;
background: #f0f0f0;
"
>
年龄
</div>
<div
style="
width: 120px;
line-height: 60px;
border: 1px solid #f0f0f0;
background: #f0f0f0;
"
>
平均总分
</div>
<div v-for="item in categoryTableNameList" :key="item.prentId">
<div
style="
text-align: center;
line-height: 30px;
border: 1px solid #f0f0f0;
background: #f0f0f0;
"
>
{{ item.parentName }}
</div>
<div
style="
display: flex;
line-height: 30px;
border: 1px solid #f0f0f0;
background: #f0f0f0;
"
>
<div
v-for="uitem in item.childrenTableNameList"
:key="uitem.categoryId"
style="width: 120px"
>
{{ uitem.categoryName }}
</div>
</div>
</div>
</div>
<div>
<div
style="text-align: center; display: flex; justify-content: center"
v-for="item in categoryScoreList"
:key="item.prentId"
>
<div style="width: 120px; line-height: 60px">
{{ item.className }}
</div>
<div style="width: 120px; line-height: 60px">
{{ item.totalAvScore }}
</div>
<div>
<div style="display: flex; line-height: 60px">
<div
v-for="uitem in item.list"
:key="uitem.categoryId"
style="width: 120px"
>
{{ uitem }}
</div>
</div>
</div>
</div>
</div>
<div></div>
</div>
</el-col>
<el-col :span="24" :offset="0">
<div style="text-align: center">
<span></span>
</div>
<div class="">
<div
ref="chart"
id="chart"
style="width: 1300px; height: 600px; margin: 50px auto"
></div>
</div>
</el-col>
</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 {
listKindergartenInfo,
tKindergartenInfo,
} from "@/api/system/kindergartenInfo";
import { listClassinfo } from "@/api/system/classinfo";
import { getRoleInfo, testScoreBatch } from "@/api/system/quality";
import { ClassList } from "@/api/system/classconstitution";
export default {
name: "comprehensive",
data() {
return {
itemshow: true,
itemshow2: false,
total1: 0,
total2: 0,
total4: 0,
//遮罩层
kindergartenshow: false,
classshow: false,
studentshow: false,
batchCodeshow: false,
//班级类型
dictValue1: "",
dictValue2: "",
dictValue3: "",
dictValue4: "",
ClassType: "class_type",
// 显示搜索条件
showSearch: true,
// 表单参数
form: {},
//班级查询
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: "",
//批次名称
batchCodeName: "请选择批次",
//批次ID
batchCodeId: "",
//批次list
testScorelist: [],
// 查询参数
ClassListlist: {
// batchCode: "",
batchCode: "PC202208030005",
kindergartenId: "18",
classId: "2",
pageNum: 1,
pageSize: 10,
},
//批次编号
testqueryParams: {
pageNum: 1,
pageSize: 10,
},
categoryTableNameList: [],
categoryAgeFractionList: [],
categoryScoreList: [],
totalAvgFraction: "",
listname: [],
};
},
created() {
this.getList();
this.class();
this.ClassListinfo();
},
methods: {
ClassListinfo() {
ClassList(this.ClassListlist).then((res) => {
console.log(res);
this.totalAvgFraction = res.data.totalAvgFraction;
this.categoryTableNameList = res.data.categoryTableNameList;
this.categoryAgeFractionList = res.data.categoryAgeFractionList;
this.categoryScoreList = res.data.categoryScoreList;
if (res.data == [] || !res.data) {
this.itemshow2 = true;
this.itemshow = false;
} else {
var list = [];
this.categoryTableNameList.forEach((e) => {
e.childrenTableNameList.forEach((el) => {
list.push(el.categoryId);
});
});
let yname = [];
this.categoryScoreList.forEach((el) => {
yname.push(el.className);
var listname = list.map((e) => {
var num = 0;
var number = el.categoryScoreList.findIndex(
(o) => o.categoryId == e
);
if (number != -1) {
num = el.categoryScoreList[number].categoryName;
}
return num;
});
this.listname = listname;
var list1 = list.map((e) => {
var num = 0;
var number = el.categoryScoreList.findIndex(
(o) => o.categoryId == e
);
if (number != -1) {
num = el.categoryScoreList[number].avgScore;
}
return num;
});
el.list = list1;
});
console.log(this.categoryScoreList);
var myChart = echarts.init(document.getElementById("chart"));
var option;
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: 16,
rich: {
name: {},
},
};
var yseries = [];
var name = "";
var names = [];
for (var i = 0; i < this.listname.length; i++) {
name = this.categoryScoreList[0].categoryScoreList[i].categoryName;
var ydata = [
this.categoryScoreList[0].list[i],
this.categoryScoreList[1].list[i],
this.categoryScoreList[2].list[i],
];
var obj = {
name: name,
type: "bar",
label: labelOption,
emphasis: {
focus: "series",
},
data: ydata,
};
yseries.push(obj);
names.push(name);
}
console.log(yseries)
option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "",
},
},
legend: {
data: names,
},
xAxis: [
{
type: "category",
axisTick: { show: false },
data: yname,
},
],
yAxis: [
{
type: "value",
},
],
series: yseries,
};
option && myChart.setOption(option);
}
});
},
//点击批次
batchCodeshowclick() {
if (this.ClassListlist.classId == "") {
this.$message.error("请先选择班级");
} else {
this.testScore();
this.batchCodeshow = true;
}
},
//点击批次左边
batchCodeclick(row) {
this.batchCodeName = row.batchName;
this.batchCodeId = row.id;
this.ClassListlist.batchCode = row.batchCode;
this.batchCodeshow = false;
},
//批次
testScore() {
testScoreBatch(this.testqueryParams).then((res) => {
this.testScorelist = res.rows;
this.total4 = res.total;
});
},
//点击所属班级
classshowclick() {
if (this.classqueryParams.kindergartenId == "") {
this.$message.error("请先选择幼儿园");
} else {
this.classshow = true;
this.classinfo();
}
// console.log(this.classqueryParams);
},
//批次关闭
batchCodecancel() {
this.batchCodeshow = false;
},
//幼儿园关闭
kindergartencancel() {
this.kindergartenshow = false;
},
//班级关闭
classcancel() {
this.classshow = false;
},
//班级左侧点击
classclick(row) {
// console.log(row);
this.className = row.className;
this.classId = row.id;
this.ClassListlist.classId = row.id;
this.classshow = false;
},
//幼儿园左侧点击
kindergartenNameclick(row) {
this.ClassListlist.kindergartenId = row.id;
this.kindergartenName = row.kindergartenName;
this.kindergartenId = row.id;
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);
});
//获取幼儿园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>