398 lines
13 KiB
Vue
398 lines
13 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-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;
|
|
padding-left: 20px;
|
|
"
|
|
>
|
|
<div style="display: flex; justify-content: space-around">
|
|
<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%">所属幼儿园:{{ sythesizestudent.kindergartenName }}</div>
|
|
<div class="cell">班级:{{ sythesizestudent.className }}</div>
|
|
</div>
|
|
<div style="width: 60%; margin-top: 20px">
|
|
<div class="cell">地址:{{ sythesizestudent.kindergartenAddress }}</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="24" class="card-box">
|
|
<el-card style="margin-top: 10px">
|
|
<div
|
|
class="el-table--enable-row-hover el-table--medium"
|
|
style="
|
|
margin: 20px auto;
|
|
height: 110px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
line-height: 40px;
|
|
"
|
|
>
|
|
<div style="text-align: center; font-size: 18px; margin-bottom: 10px">幼儿综合得分</div>
|
|
<div style="display: inline-block">
|
|
<span
|
|
style="
|
|
position: relative;
|
|
display: inline-block;
|
|
text-align: center;
|
|
"
|
|
v-for="(item, index) in sythesizestudent.firstItemCategoryList"
|
|
:key="index"
|
|
>
|
|
<span :style="index == 0 ? '' : 'margin:0 20px'">
|
|
{{
|
|
index == 0 ? null : "+"
|
|
}}
|
|
</span>
|
|
<span>{{ item.categoryName }}( {{ item.categoryScore }})</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: 18px; margin-top: 20px">获取徽章</div>
|
|
<div
|
|
style="
|
|
width: 70%;
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: space-around;
|
|
margin: 20px auto 10px;
|
|
"
|
|
>
|
|
<span v-for="(item, index) in sythesizestudent.categoryNameList" :key="index">
|
|
<img style="width: 60px; height: 60px" src="@/icons/金牌2.png" alt />
|
|
<div style="margin-top: 10px; font-size: 14px">{{ item }}</div>
|
|
</span>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="24" class="card-box" style="margin-top: 10px">
|
|
<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 type="text/javascript" src="../jquery.min.js"></script>
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
import student from "@/views/assembly/student.vue";
|
|
import { getRoleInfo } from "@/api/system/quality";
|
|
import { synthesize } from "@/api/system/comprehensive";
|
|
|
|
export default {
|
|
name: "comprehensive",
|
|
components: { student },
|
|
data() {
|
|
return {
|
|
itemshow: false,
|
|
itemshow2: false,
|
|
// 显示搜索条件
|
|
showSearch: true,
|
|
//学生基本信息
|
|
sythesizestudent: [],
|
|
// 综合体质分析查询参数
|
|
synthesizelist: {
|
|
studentId: "",
|
|
batchCode: ""
|
|
// studentId: "27",
|
|
// batchCode: "PC202208230011",
|
|
}
|
|
};
|
|
},
|
|
|
|
created() {
|
|
// this.synthesizeinfo();
|
|
},
|
|
methods: {
|
|
itemlists(studentId, batchCode) {
|
|
this.synthesizelist.studentId = studentId;
|
|
this.synthesizelist.batchCode = batchCode;
|
|
},
|
|
/** 查看按钮操作 */
|
|
handleQuery() {
|
|
this.synthesizeinfo();
|
|
},
|
|
//综合体质分析素质
|
|
synthesizeinfo() {
|
|
synthesize(this.synthesizelist).then(res => {
|
|
if (res.data == [] || !res.data) {
|
|
this.itemshow2 = true;
|
|
this.itemshow = false;
|
|
} else {
|
|
this.sythesizestudent = res.data;
|
|
let seriesData = [];
|
|
let yindicator = [];
|
|
if (res.data.physiqueCategoryList.length == 1) {
|
|
var obj = {
|
|
categoryName: "暂无",
|
|
categoryNameAbbreviate: "暂无",
|
|
categoryScore: null,
|
|
levelName: "暂无",
|
|
maxScore: null
|
|
};
|
|
res.data.physiqueCategoryList.push(obj);
|
|
res.data.physiqueCategoryList.push(obj);
|
|
res.data.physiqueCategoryList.push(obj);
|
|
}
|
|
if (res.data.physiqueCategoryList.length == 2) {
|
|
var obj = {
|
|
categoryName: "暂无",
|
|
categoryNameAbbreviate: "暂无",
|
|
categoryScore: null,
|
|
levelName: "暂无",
|
|
maxScore: null
|
|
};
|
|
res.data.physiqueCategoryList.push(obj);
|
|
res.data.physiqueCategoryList.push(obj);
|
|
}
|
|
res.data.physiqueCategoryList.forEach(el => {
|
|
seriesData.push(el.categoryScore);
|
|
if (el.levelName == null) {
|
|
el.levelName = "暂无";
|
|
}
|
|
yindicator.push({
|
|
name: el.categoryName,
|
|
max: el.maxScore
|
|
});
|
|
});
|
|
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;
|
|
// postImage();
|
|
// function postImage() {
|
|
// // 向后台发起请求保存图片到指定目录.
|
|
// $.ajax({
|
|
// type: "POST",
|
|
// dataType: "json",
|
|
// url: "http://192.168.16.62:8080",
|
|
// data: { picInfo: },
|
|
// success: function () {
|
|
// alert("通过post请求传输数据成功!");
|
|
// },
|
|
// });
|
|
// }
|
|
}
|
|
// 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);
|
|
});
|
|
},
|
|
getList() {
|
|
//用户权限
|
|
getRoleInfo().then(res => {
|
|
this.classqueryParams.kindergartenId = res.data.kindergartenId;
|
|
var user = res.data.roleKeys;
|
|
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;
|
|
}
|
|
});
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.form = {};
|
|
this.resetForm("form");
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped='scss'>
|
|
::v-deep .el-form {
|
|
display: inline;
|
|
}
|
|
</style> |