KindergartenUI/src/views/system/comprehensive/index.vue
2022-08-25 14:24:37 +08:00

932 lines
27 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="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="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-row v-show="itemshow">
<el-col :span="24" class="card-box">
<el-card>
<div slot="header" style="text-align: center; margin-bottom: 10px">
<span>学生基本信息</span>
</div>
<div
class="el-table--enable-row-hover el-table--medium"
style="
margin-top: 10px;
padding-bottom: 20px;
border-bottom: 1px solid #f0f0f0;
"
>
<div
style="
display: flex;
justify-content: space-around;
text-align: center;
"
>
<div class="cell" style="width: 20%">
姓名:{{ sythesizestudent.studentName }}
</div>
<div class="cell" style="width: 20%">
性别:{{ sythesizestudent.studentSex == "MALE" ? "男" : "女" }}
</div>
<div class="cell" style="width: 20%">
年龄:{{ sythesizestudent.studentAge }}
</div>
<div class="cell" style="width: 20%">
民族:{{ sythesizestudent.nationName }}
</div>
<div class="cell" style="width: 20%">
ID:{{ sythesizestudent.studentNumber }}
</div>
</div>
<div style="display: flex; margin-top: 20px">
<div class="cell" style="width: 60%; margin-left: 7.7%">
所属幼儿园:{{ sythesizestudent.kindergartenName }}
</div>
<div class="cell">班级:{{ sythesizestudent.className }}</div>
</div>
<div style="margin-top: 20px; margin-left: 7.7%">
<div class="cell">
地址:{{ sythesizestudent.kindergartenAddress }}
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="24" class="card-box">
<el-card style="margin-top: 40px">
<div
class="el-table--enable-row-hover el-table--medium"
style="margin: 20px auto; height: 40px; text-align: center"
>
<div style="display: inline-block">
<span
style="
position: relative;
display: inline-block;
width: 80px;
text-align: center;
"
v-for="(item, index) in sythesizestudent.firstItemCategoryList"
:key="index"
>
<span :style="index == 0 ? '' : 'margin-right:20px'">{{
index == 0 ? null : "+"
}}</span>
<span>
{{ item.categoryScore }}
</span>
<span
:style="index != 0 ? 'left:18px' : ''"
style="position: absolute; left: 0px; top: 20px; width: 80px"
>{{ item.categoryName }}</span
>
</span>
</div>
<div style="display: inline-block; position: relative">
<span style="margin: 0 20px">= </span>
<span>{{ sythesizestudent.totalCategoryScore }}</span>
<span
style="
display: inline-block;
position: absolute;
top: 20px;
width: 80px;
left: 29px;
"
>(综合得分)</span
>
</div>
</div>
<div style="text-align: center; font-size: 25px; margin-top: 30px">
获取徽章
</div>
<div
style="
display: flex;
text-align: center;
justify-content: space-around;
margin-top: 20px;
"
>
<span
v-for="(item, index) in sythesizestudent.categoryNameList"
:key="index"
>
<img
style="width: 80px; height: 80px"
src="@/icons/金牌2.png"
alt=""
/>
<div style="margin-top: 10px">{{ item }}</div>
</span>
</div>
</el-card>
</el-col>
<el-col :span="24" class="card-box" style="margin-top: 40px">
<el-card>
<div slot="header" style="text-align: center">
<span>综合体质分析图</span>
</div>
<div class="el-table el-table--enable-row-hover el-table--medium">
<div
ref="chart"
id="chart"
style="width: 1000px; height: 600px; margin: 0 auto"
></div>
</div>
</el-card>
</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 { listStudentInfo } from "@/api/system/studentInfo";
import { listClassinfo } from "@/api/system/classinfo";
import { getRoleInfo, testScoreBatch } from "@/api/system/quality";
import { synthesize } from "@/api/system/comprehensive";
export default {
name: "comprehensive",
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: [],
//学生基本信息
sythesizestudent: [],
// 综合体质分析查询参数
synthesizelist: {
studentId: "",
batchCode: "",
// studentId: "10",
// batchCode: "PC202208030005",
},
//批次编号
testqueryParams: {
pageNum: 1,
pageSize: 10,
},
};
},
created() {
this.getList();
this.class();
// this.synthesizeinfo();
},
methods: {
//综合体质分析素质
synthesizeinfo() {
synthesize(this.synthesizelist).then((res) => {
if (res.data == [] || !res.data) {
this.itemshow2 = true;
this.itemshow = false;
} else {
this.sythesizestudent = res.data;
console.log(this.sythesizestudent);
let seriesData = [];
let yindicator = [];
res.data.physiqueCategoryList.forEach((el) => {
// console.log(el.categoryScore);
seriesData.push(el.categoryScore);
if (el.levelName == null) {
el.levelName = "暂无";
}
yindicator.push({
name: el.categoryName + " " + "(" + el.levelName + "" + ")",
max: el.maxScore,
});
});
// console.log(seriesData, yindicator);
var myChart = echarts.init(document.getElementById("chart"));
let option = {
//配置维度的最大值
color: "blue",
radar: {
name: {
show: true,
color: "black",
},
center: ["50%", "50%"],
// 雷达图的指示器,用来指定雷达图中的多个变量(维度)
indicator: yindicator,
shape: "polygon", //对雷达图形设置成一个圆形,可选 circle:圆形,polygon:多角形(默认)
},
series: [
{
type: "radar",
label: {
show: true,
color: "blue", //显示数值
},
areaStyle: {}, //每个雷达图形成一个阴影的面积
data: [
{
name: "成绩区域",
value: seriesData,
},
],
areaStyle: {
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
{
color: "rgba(50, 50, 255, 0.1)",
offset: 0,
},
{
color: "rgba(50, 50, 200, 0.9)",
offset: 1,
},
]),
},
},
],
};
// 绘制图表
myChart.setOption(option);
this.itemshow2 = false;
this.itemshow = true;
}
// var myChart = echarts.init(document.getElementById("chart"));
// var option;
// option = {
// color: ["#f6da22", "#bbe2e8", "#6cacde"],
// legend: {
// data: ["Allocated Budget", "Actual Spending"],
// },
// radar: {
// indicator: yindicator,
// color: "#fff",
// },
// series: [
// {
// name: "Budget vs spending",
// type: "radar",
// data: [
// {
// value: seriesData,
// name: "综合体质分析图",
// areaStyle: {
// color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
// {
// color: "rgba(255, 145, 124, 0.1)",
// offset: 0,
// },
// {
// color: "rgba(255, 145, 124, 0.9)",
// offset: 1,
// },
// ]),
// },
// },
// ],
// },
// ],
// };
// option && myChart.setOption(option);
// option = {
// legend: {
// top: "bottom",
// },
// toolbox: {
// show: true,
// feature: {
// mark: { show: true },
// dataView: { show: true, readOnly: false },
// restore: { show: true },
// saveAsImage: { show: true },
// },
// },
// series: [
// {
// name: "Nightingale Chart",
// type: "pie",
// radius: '50%',
// center: ["50%", "50%"],
// roseType: "area",
// itemStyle: {
// normal: {
// color: function (colors) {
// var colorList = [
// "#91cd77",
// "#5470c6",
// "#fc8251",
// "#ef6567",
// "#f9c956",
// "#75bedc",
// "#FCEF03",
// "#E12BE4",
// "#0070C0",
// ];
// return colorList[colors.dataIndex];
// },
// },
// },
// data: seriesData,
// },
// ],
// };
// option && myChart.setOption(option);
});
},
// 点击学生按钮
studentshowclick() {
if (this.studentqueryParams.classId == "") {
this.$message.error("请先选择班级");
} else {
this.studentshow = true;
this.studentlist();
}
},
//点击批次
batchCodeshowclick() {
if (this.synthesizelist.studentId == "") {
this.$message.error("请先选择学生");
} else {
this.testScore();
this.batchCodeshow = true;
}
},
//点击批次左边
batchCodeclick(row) {
this.batchCodeName = row.batchName;
this.batchCodeId = row.id;
this.synthesizelist.batchCode = row.batchCode;
this.batchCodeshow = false;
this.synthesizeinfo();
},
//批次
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.synthesizelist.studentId = row.id;
if (this.synthesizelist.batchCode != "") {
this.synthesizeinfo();
}
},
//获取学生
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.classshow = false;
this.studentname = "请选择学生";
this.studentId = "";
this.synthesizelist.studentId = "";
},
//幼儿园左侧点击
kindergartenNameclick(row) {
this.classqueryParams.kindergartenId = row.id;
this.className = "请选择班级";
this.classId = "";
this.studentname = "请选择学生";
this.studentId = "";
this.synthesizelist.studentId = "";
this.kindergartenName = row.kindergartenName;
this.kindergartenId = row.id;
this.kindergartenshow = false;
// this.synthesizeinfo();
},
//班级类型
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) => {
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>