2343 lines
74 KiB
Vue
2343 lines
74 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<img src="@/icons/kind.jpg" alt="" style="width: 100%;height:926.079px" />
|
|
<div
|
|
style="
|
|
font-size: 40px;
|
|
margin: 60px auto;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
"
|
|
>
|
|
幼儿园综合体质分析报告书
|
|
</div>
|
|
<!-- //KindergartenPhysicalTest 体测达标分析-->
|
|
<el-row v-show="KindergartenPhysicalTestshow">
|
|
<el-col :span="24" class="card-box">
|
|
<el-card>
|
|
<div slot="header" style="text-align: center; font-size: 26px">
|
|
<span>体测达标分析</span>
|
|
</div>
|
|
<div style="margin-left: 50px; text-align: center; margin-top: 20px">
|
|
<span>幼儿园名称:</span
|
|
><span style="margin-left: 20px; margin-right: 10px">{{
|
|
KindergartenPhysicalTestlist.kindergartenName
|
|
}}</span>
|
|
|
|
<span style="margin-left: 50px">幼儿园性质:</span
|
|
><span style="margin-left: 20px; margin-right: 20px">{{
|
|
KindergartenPhysicalTestlist.kindergartenType == type.dictValue
|
|
? type.dictLabel
|
|
: type2.dictLabel
|
|
}}</span>
|
|
|
|
<span style="margin-left: 50px">参与体测人数:</span
|
|
><span style="margin-left: 20px">{{
|
|
KindergartenPhysicalTestlist.testItemStudentCount
|
|
}}</span
|
|
>人
|
|
|
|
<div style="display: flex; margin-top: 40px">
|
|
<div
|
|
slot="header"
|
|
style="width: 50%; text-align: center; font-size: 18px"
|
|
>
|
|
<span class="title">本园参加体测各年龄阶段人数分部</span>
|
|
<div
|
|
id="KindergartenPhysicalTest1"
|
|
style="
|
|
width: 500px;
|
|
height: 300px;
|
|
margin: 0 auto;
|
|
padding-top: 40px;
|
|
"
|
|
></div>
|
|
</div>
|
|
|
|
<div
|
|
slot="header"
|
|
style="
|
|
width: 50%;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
position: relative;
|
|
"
|
|
>
|
|
<span class="title">本园体测成绩达标率(%)</span>
|
|
<span>
|
|
<span
|
|
style="
|
|
position: absolute;
|
|
top: 58%;
|
|
left: 47.5%;
|
|
font-size: 25px;
|
|
"
|
|
>{{ KindergartenPhysicalTestlist.standardRate }}%</span
|
|
>
|
|
<span
|
|
style="
|
|
position: absolute;
|
|
top: 67%;
|
|
left: 46.5%;
|
|
font-size: 16px;
|
|
"
|
|
>达标率</span
|
|
>
|
|
</span>
|
|
<div
|
|
id="KindergartenPhysicalTest2"
|
|
style="
|
|
width: 500px;
|
|
height: 300px;
|
|
margin: 0 auto;
|
|
padding-top: 20px;
|
|
"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- survey体测概况分析 -->
|
|
<el-row v-show="surveyshow">
|
|
<el-col :span="24" class="card-box">
|
|
<el-card>
|
|
<div slot="header" style="text-align: center; font-size: 26px">
|
|
<span>体测概况分析</span>
|
|
</div>
|
|
<div>
|
|
<div style="display: flex; margin-top: 20px">
|
|
<div style="width: 50%">
|
|
<div slot="header" class="header">
|
|
<span>班级综合体测成绩排名</span>
|
|
</div>
|
|
<div v-if="yclassname1.length != 0" style="position: relative">
|
|
<div class="surveytitle">大班</div>
|
|
<div
|
|
id="survey1"
|
|
style="width: 500px; height: 350px; margin: 0 auto"
|
|
></div>
|
|
</div>
|
|
<div v-if="yclassname2.length != 0" style="position: relative">
|
|
<div class="surveytitle">中班</div>
|
|
<div
|
|
id="survey2"
|
|
style="width: 500px; height: 350px; margin: 0 auto"
|
|
></div>
|
|
</div>
|
|
<div v-if="yclassname3.length != 0" style="position: relative">
|
|
<div class="surveytitle">小班</div>
|
|
<div
|
|
id="survey3"
|
|
style="width: 500px; height: 350px; margin: 0 auto"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 50%">
|
|
<div slot="header" class="header" style="margin-bottom: 20px">
|
|
<span>全园优秀幼儿榜(TOP10)</span>
|
|
</div>
|
|
<el-table
|
|
ref="studentlist"
|
|
:data="studentlist"
|
|
highlight-current-row
|
|
style="margin: 0 auto; width: 530px"
|
|
>
|
|
<el-table-column
|
|
type="index"
|
|
width="130"
|
|
label="排名"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
property="studentName"
|
|
label="姓名"
|
|
width="130"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
property="className"
|
|
label="班级"
|
|
width="130"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
property="itemFraction"
|
|
label="分数"
|
|
width="140"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div
|
|
slot="header"
|
|
class="header"
|
|
style="margin-bottom: 20px; margin-top: 20px"
|
|
>
|
|
<span>班级优秀幼儿榜</span>
|
|
</div>
|
|
<el-table
|
|
ref="selectAllClassBylist"
|
|
:data="selectAllClassBylist"
|
|
highlight-current-row
|
|
style="margin: 0 auto; width: 530px"
|
|
>
|
|
<el-table-column
|
|
type="index"
|
|
width="130"
|
|
label="排名"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
property="studentName"
|
|
label="姓名"
|
|
width="130"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
property="className"
|
|
label="班级"
|
|
width="130"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
property="itemFraction"
|
|
label="分数"
|
|
width="140"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<!--heightAndWeight 平均身高体重 -->
|
|
<el-row v-show="heightAndWeightshow">
|
|
<el-col :span="24" class="card-box" style="">
|
|
<el-card >
|
|
<div slot="header" style="text-align: center; font-size: 26px">
|
|
<span>平均身高体重</span>
|
|
</div>
|
|
<div style="display: flex; margin-top: 40px">
|
|
<div
|
|
slot="header"
|
|
style="width: 50%; text-align: center; font-size: 18px"
|
|
>
|
|
<span>各年级男/女平均身高(cm)</span>
|
|
<div
|
|
id="heightAndWeight1"
|
|
style="
|
|
width: 500px;
|
|
height: 300px;
|
|
margin: 0 auto;
|
|
padding-top: 40px;
|
|
"
|
|
></div>
|
|
</div>
|
|
<div
|
|
slot="header"
|
|
style="width: 50%; text-align: center; font-size: 18px"
|
|
>
|
|
<span>各年级男/女平均体重(kg)</span>
|
|
<div
|
|
id="heightAndWeight2"
|
|
style="
|
|
width: 500px;
|
|
height: 300px;
|
|
margin: 0 auto;
|
|
padding-top: 40px;
|
|
"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- physique综合体制分析 -->
|
|
<el-row>
|
|
<el-col :span="24" :offset="0" class="card-box" style="font-size: 15px">
|
|
<div slot="header" style="text-align: center; font-size: 26px">
|
|
<span>综合体质分析</span>
|
|
</div>
|
|
<el-card v-show="MALE">
|
|
<div class="test" style="height: 90px">
|
|
<div style="text-align: center; line-height: 40px; font-size: 20px">
|
|
<span>本园幼儿综合体质评估综合得分(男)</span>
|
|
</div>
|
|
<div
|
|
class="el-table--enable-row-hover el-table--medium"
|
|
style="
|
|
margin: 0 auto;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #8fd6d9;
|
|
"
|
|
>
|
|
<div style="display: inline-block">
|
|
<span
|
|
style="
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 200px;
|
|
text-align: center;
|
|
"
|
|
v-for="(item, index) in firstCategoryScoreListMALE"
|
|
:key="index"
|
|
>
|
|
<span :style="index == 0 ? '' : 'margin-right:40px'">{{
|
|
index == 0 ? null : "+"
|
|
}}</span>
|
|
<span>
|
|
{{ item.categoryName }} ({{ item.avgCategoryFraction }})
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div style="display: inline-block; position: relative">
|
|
<span style="margin: 0 20px">= </span>
|
|
<span style="display: inline-block; width: 120px"
|
|
>综合得分({{ totalAvgFraction }})</span
|
|
>
|
|
|
|
<span
|
|
style="
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 20px;
|
|
width: 100px;
|
|
left: 40px;
|
|
margin: 0 20px;
|
|
"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: center; margin-top: 20px">
|
|
<span>幼儿园综合体质分析图</span>
|
|
</div>
|
|
<div class="">
|
|
<div
|
|
ref="MALEchart"
|
|
id="MALEchart"
|
|
style="width: 1000px; height: 600px; margin: 0 auto"
|
|
></div>
|
|
</div>
|
|
<div
|
|
style="margin: 0 auto; width: 100%; line-height: 60px"
|
|
v-show="MALE"
|
|
>
|
|
<div style="font-size: 12px; width: 100%; height: 400px">
|
|
<div
|
|
style="
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: center;
|
|
color: black;
|
|
"
|
|
>
|
|
<div style="border: 1px solid #f0f0f0; background: #f5f7fa">
|
|
<div style="width: 80px; line-height: 60px">年龄</div>
|
|
</div>
|
|
<div style="border: 1px solid #f0f0f0; background: #f5f7fa">
|
|
<div style="width: 80px; line-height: 60px">平均总分</div>
|
|
</div>
|
|
|
|
<div
|
|
v-for="item in categoryTableNameListMALE"
|
|
:key="item.prentId"
|
|
>
|
|
<div
|
|
style="
|
|
text-align: center;
|
|
line-height: 30px;
|
|
border: 1px solid #f0f0f0;
|
|
background: #f5f7fa;
|
|
"
|
|
>
|
|
{{ item.parentName }}
|
|
</div>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
line-height: 30px;
|
|
border: 1px solid #f0f0f0;
|
|
background: #f5f7fa;
|
|
"
|
|
>
|
|
<div
|
|
v-for="uitem in item.childrenTableNameList"
|
|
:key="uitem.categoryId"
|
|
style="
|
|
width: 90px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
"
|
|
>
|
|
{{ uitem.categoryName }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div
|
|
style="
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
"
|
|
v-for="item in categoryAgeFractionListMALE"
|
|
:key="item.prentId"
|
|
>
|
|
<div style="border: 0.5px solid #f0f0f0">
|
|
<div style="width: 80px; line-height: 50px">
|
|
{{ item.studentAge }}
|
|
</div>
|
|
</div>
|
|
<div style="border: 0.5px solid #f0f0f0">
|
|
<div style="width: 80px; line-height: 50px">
|
|
{{ item.totalAvgFraction }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div style="display: flex; line-height: 50px">
|
|
<div
|
|
v-for="uitem in item.list"
|
|
:key="uitem.categoryId"
|
|
style="width: 90px; border: 0.5px solid #f0f0f0"
|
|
>
|
|
{{ uitem }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<el-card v-show="FEMALE">
|
|
<!-- //FAMALE -->
|
|
<div class="test" style="height: 90px">
|
|
<div
|
|
style="
|
|
text-align: center;
|
|
line-height: 40px;
|
|
margin-top: 50px;
|
|
font-size: 20px;
|
|
"
|
|
>
|
|
<span>本园幼儿综合体质评估综合得分(女)</span>
|
|
</div>
|
|
<div
|
|
class="el-table--enable-row-hover el-table--medium"
|
|
style="
|
|
margin: 0 auto;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #8fd6d9;
|
|
"
|
|
>
|
|
<div style="display: inline-block">
|
|
<span
|
|
style="
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 200px;
|
|
text-align: center;
|
|
"
|
|
v-for="(item, index) in firstCategoryScoreListFEMALE"
|
|
:key="index"
|
|
>
|
|
<span :style="index == 0 ? '' : 'margin-right:40px'">{{
|
|
index == 0 ? null : "+"
|
|
}}</span>
|
|
<span>
|
|
{{ item.categoryName }} ({{ item.avgCategoryFraction }})
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div style="display: inline-block; position: relative">
|
|
<span style="margin: 0 20px">= </span>
|
|
<span style="display: inline-block; width: 120px"
|
|
>综合得分({{ totalAvgFraction }})</span
|
|
>
|
|
|
|
<span
|
|
style="
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 20px;
|
|
width: 100px;
|
|
left: 40px;
|
|
margin: 0 20px;
|
|
"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: center; margin-top: 20px">
|
|
<span>幼儿园综合体质分析图</span>
|
|
</div>
|
|
<div class="">
|
|
<div
|
|
ref="FEMALEchart"
|
|
id="FEMALEchart"
|
|
style="width: 1000px; height: 600px; margin: 0 auto"
|
|
></div>
|
|
</div>
|
|
<div style="width: 100%; margin: 0 auto; line-height: 60px">
|
|
<div
|
|
style="
|
|
font-size: 12px;
|
|
width: 100%;
|
|
overflow: auto;
|
|
height: 400px;
|
|
"
|
|
>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: center;
|
|
color: black;
|
|
"
|
|
>
|
|
<div style="border: 1px solid #f0f0f0; background: #f5f7fa">
|
|
<div style="width: 80px; line-height: 60px">年龄</div>
|
|
</div>
|
|
|
|
<div style="border: 1px solid #f0f0f0; background: #f5f7fa">
|
|
<div style="width: 80px; line-height: 60px">平均总分</div>
|
|
</div>
|
|
<div
|
|
v-for="item in categoryTableNameListFEMALE"
|
|
:key="item.prentId"
|
|
>
|
|
<div
|
|
style="
|
|
text-align: center;
|
|
line-height: 30px;
|
|
border: 1px solid #f0f0f0;
|
|
background: #f5f7fa;
|
|
color: black;
|
|
"
|
|
>
|
|
{{ item.parentName }}
|
|
</div>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
line-height: 30px;
|
|
border: 1px solid #f0f0f0;
|
|
background: #f5f7fa;
|
|
color: black;
|
|
"
|
|
>
|
|
<div
|
|
v-for="uitem in item.childrenTableNameList"
|
|
:key="uitem.categoryId"
|
|
style="
|
|
width: 90px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
"
|
|
>
|
|
{{ uitem.categoryName }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div
|
|
style="
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
"
|
|
v-for="item in categoryAgeFractionListFEMALE"
|
|
:key="item.prentId"
|
|
>
|
|
<div style="line-height: 50px; border: 0.5px solid #f0f0f0">
|
|
<div style="width: 80px">
|
|
{{ item.studentAge }}
|
|
</div>
|
|
</div>
|
|
<div style="line-height: 50px; border: 0.5px solid #f0f0f0">
|
|
<div style="width: 80px">
|
|
{{ item.totalAvgFraction }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div style="display: flex; line-height: 50px">
|
|
<div
|
|
v-for="uitem in item.list"
|
|
:key="uitem.categoryId"
|
|
style="
|
|
width: 90px;
|
|
border: 0.5px solid #f0f0f0;
|
|
height: 54px;
|
|
"
|
|
>
|
|
{{ uitem }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- development 动作发展分析 -->
|
|
<el-row>
|
|
<el-col :span="24" :offset="0" class="card-box" style="font-size: 15px">
|
|
<el-card>
|
|
<div slot="header" style="text-align: center; font-size: 26px">
|
|
<span>动作发展分析</span>
|
|
</div>
|
|
<div
|
|
v-for="(item, index) in developmentList"
|
|
:key="index"
|
|
v-show="developmentshow"
|
|
>
|
|
<el-table :data="item.physicalActionList" style="margin: 20px auto">
|
|
<el-table-column :label="item.classTypeName" align="center">
|
|
<el-table-column prop="itemName" label="项目" align="center">
|
|
</el-table-column>
|
|
<el-table-column label="男孩" align="center">
|
|
<el-table-column
|
|
prop="maleAvgScore"
|
|
label="平均值"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="maleCityAvgScore"
|
|
label="全市平均值"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="malePassCount"
|
|
label="合格人数"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="malePassRate"
|
|
label="合格率"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope"
|
|
>{{ scope.row.malePassRate }}%</template
|
|
>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column label="女孩" align="center">
|
|
<el-table-column
|
|
prop="feMaleAvgScore"
|
|
label="平均值"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="feMaleCityAvgScore"
|
|
label="全市平均值"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="feMalePassCount"
|
|
label="合格人数"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="feMalePassRate"
|
|
label="合格率"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope"
|
|
>{{ scope.row.feMalePassRate }}%</template
|
|
>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- -->
|
|
<el-row>
|
|
<el-col class="card-box" :span="24" :offset="0">
|
|
<el-card>
|
|
<div
|
|
slot="header"
|
|
style="text-align: center; font-size: 26px; margin-bottom: 20px"
|
|
>
|
|
<span>班级体质分析</span>
|
|
</div>
|
|
<div
|
|
v-for="(ilist, index) in classconstitutionlist"
|
|
:key="index"
|
|
>
|
|
<div
|
|
slot="header"
|
|
style="text-align: center; font-size: 22px; margin-bottom: 20px"
|
|
>
|
|
<span
|
|
>班级体质分析({{ ilist.categoryScoreList[0].className }})</span
|
|
>
|
|
</div>
|
|
<div style="margin: 0 auto; width: 1400px; line-height: 60px">
|
|
<div style="font-size: 12px; width: 100%; overflow: auto">
|
|
<div
|
|
style="
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: center;
|
|
color: black;
|
|
font-weight: 550;
|
|
height: 92px;
|
|
"
|
|
>
|
|
<div
|
|
style="background: #f5f7fa; height: 92px; line-height: 92px"
|
|
>
|
|
<div
|
|
style="
|
|
width: 70px;
|
|
border: 1px solid #f0f0f0;
|
|
background: #f5f7fa;
|
|
"
|
|
>
|
|
班级
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="background: #f5f7fa; height: 92px; line-height: 92px"
|
|
>
|
|
<div
|
|
style="
|
|
width: 70px;
|
|
border: 1px solid #f0f0f0;
|
|
background: #f5f7fa;
|
|
"
|
|
>
|
|
平均总分
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-for="item in ilist.categoryTableNameList"
|
|
:key="item.prentId"
|
|
>
|
|
<div
|
|
style="
|
|
text-align: center;
|
|
border: 1px solid #f0f0f0;
|
|
background: #f5f7fa;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
"
|
|
>
|
|
{{ item.parentName }}
|
|
</div>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
border: 1px solid #f0f0f0;
|
|
background: #f5f7fa;
|
|
font-size: 10px;
|
|
width: 100%;
|
|
"
|
|
>
|
|
<div
|
|
v-for="uitem in item.childrenTableNameList"
|
|
:key="uitem.categoryId"
|
|
style="
|
|
width: 90px;
|
|
height: 60px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
"
|
|
>
|
|
{{ uitem.categoryName }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="font-size: 12px; width: 100%">
|
|
<div
|
|
style="
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
line-height: 30px;
|
|
width: 100%;
|
|
"
|
|
v-for="item in ilist.categoryScoreList"
|
|
:key="item.prentId"
|
|
>
|
|
<div style="border: 1px solid #f0f0f0">
|
|
<div style="width: 70px">
|
|
{{ item.className }}
|
|
</div>
|
|
</div>
|
|
<div style="border: 1px solid #f0f0f0">
|
|
<div style="width: 70px">
|
|
{{ item.totalAvScore }}
|
|
</div>
|
|
</div>
|
|
|
|
<div style="">
|
|
<div style="display: flex; height: 62px">
|
|
<div
|
|
v-for="uitem in item.list"
|
|
:key="uitem.categoryId"
|
|
style="width: 90px; border: 0.5px solid #f0f0f0"
|
|
>
|
|
{{ uitem }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div
|
|
class="chart"
|
|
ref="chart"
|
|
id="chart"
|
|
style="width: 800px; height: 350px; margin: 50px auto"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
import { listClassinfo } from "@/api/system/classinfo";
|
|
import { tKindergartenInfo } from "@/api/system/kindergartenInfo";
|
|
import { KindergartenPhysicalTestanalysis } from "@/api/system/KindergartenPhysicalTest";
|
|
import { StudentList } from "@/api/system/survey";
|
|
import { heightAndWeightanalysis } from "@/api/system/heightAndWeight";
|
|
import { physiqueanalysis } from "@/api/system/physique";
|
|
import { developmentanalysis } from "@/api/system/development";
|
|
import { ClassList } from "@/api/system/classconstitution";
|
|
export default {
|
|
name: "KindergartenEcharts",
|
|
props: ["itemlists"],
|
|
data() {
|
|
return {
|
|
echartslist: {
|
|
pageNum: 1,
|
|
pageSize: 999,
|
|
kindergartenId: "",
|
|
batchCode: "",
|
|
},
|
|
//KindergartenPhysicalTest体测达标分析
|
|
KindergartenPhysicalTestshow: true,
|
|
kindergartenType: "kindergarten_type",
|
|
type: {},
|
|
type2: {},
|
|
KindergartenPhysicalTestlist: {},
|
|
//survey体测概况分析
|
|
surveyshow: true,
|
|
studentlist: [],
|
|
selectAllClassBylist: [],
|
|
LARGECLASS: "LARGE_CLASS",
|
|
MIDDLECLASS: "MIDDLE_CLASS",
|
|
SMALLCLASS: "SMALL_CLASS",
|
|
yclassname1: [],
|
|
yclassname2: [],
|
|
yclassname3: [],
|
|
classscore1: [],
|
|
classscore2: [],
|
|
classscore3: [],
|
|
//heightAndWeight平均身高体重
|
|
heightAndWeightlist: [],
|
|
heightAndWeightshow: true,
|
|
//physique 综合体质分析
|
|
FEMALE: false,
|
|
MALE: false,
|
|
categoryTableNameListMALE: [],
|
|
categoryAgeFractionListMALE: [],
|
|
categoryScoreListMALE: [],
|
|
firstCategoryScoreListMALE: [],
|
|
totalAvgFraction: "",
|
|
totalAvgFractionFEMALE: "",
|
|
categoryTableNameListFEMALE: [],
|
|
categoryAgeFractionListFEMALE: [],
|
|
categoryScoreListFEMALE: [],
|
|
firstCategoryScoreListFEMALE: [],
|
|
// <!-- development 动作发展分析 -->
|
|
//班级类型
|
|
ClassType: "class_type",
|
|
classtypelist: [],
|
|
developmentList: [],
|
|
developmentshow: false,
|
|
//<!-- classconstitution 班级体质分析 -->
|
|
classList: [],
|
|
classconstitutionlist: [],
|
|
categoryTableNameList: [],
|
|
categoryAgeFractionList: [],
|
|
categoryScoreList: [],
|
|
totalAvgFraction: "",
|
|
listname: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.classinfo();
|
|
this.getList();
|
|
this.classtype();
|
|
this.KindergartenPhysicalTestinfo();
|
|
this.StudentListinfo();
|
|
this.heightAndWeightinfo();
|
|
this.physiqueinfoFEMALE();
|
|
this.physiqueinfoMALE();
|
|
console.log(this.KindergartenPhysicalTestlist);
|
|
},
|
|
// watch: {
|
|
// itemlists: {
|
|
// handler(newName, oldName) {
|
|
// console.log(newName,oldName)
|
|
// this.echartslist = {
|
|
// kindergartenId: newName.kindergartenId,
|
|
// batchCode: newName.batchCode,
|
|
// pageNum: 1,
|
|
// pageSize: 999,
|
|
// studentSex: null,
|
|
// };
|
|
// console.log(this.echartslist);
|
|
// this.developmentList = [];
|
|
// this.getList();
|
|
// this.classtype();
|
|
// this.classinfo();
|
|
// this.KindergartenPhysicalTestinfo();
|
|
// this.StudentListinfo();
|
|
// this.heightAndWeightinfo();
|
|
// this.physiqueinfoMALE();
|
|
// this.physiqueinfoFEMALE();
|
|
// },
|
|
// deep: true,
|
|
// },
|
|
// },
|
|
|
|
created() {
|
|
this.echartslist = {
|
|
kindergartenId: this.itemlists.kindergartenId,
|
|
batchCode: this.itemlists.batchCode,
|
|
pageNum: 1,
|
|
pageSize: 999,
|
|
classId: null,
|
|
};
|
|
console.log(this.echartslist);
|
|
this.developmentList = [];
|
|
},
|
|
methods: {
|
|
// <!-- classconstitution 班级体质分析 -->
|
|
ClassListinfo() {
|
|
this.classconstitutionlist = [];
|
|
for (let i = 0; i < this.classList.length; i++) {
|
|
this.echartslist.classId = this.classList[i].id;
|
|
ClassList(this.echartslist).then((res) => {
|
|
if (res.code == 500) {
|
|
} else if (!res.data) {
|
|
} else {
|
|
this.classconstitutionlist.push(res.data);
|
|
}
|
|
});
|
|
}
|
|
this.info();
|
|
},
|
|
info() {
|
|
setTimeout(() => {
|
|
console.log(this.classconstitutionlist);
|
|
var myEhart = document.getElementsByClassName("chart");
|
|
for (let k = 0; k < this.classconstitutionlist.length; k++) {
|
|
var yseries = [];
|
|
var name = "";
|
|
var names = [];
|
|
var ydata = [];
|
|
this.categoryTableNameList = [];
|
|
this.categoryAgeFractionList = [];
|
|
this.categoryScoreList = [];
|
|
this.totalAvgFraction = [];
|
|
this.listname = [];
|
|
var myChart = echarts.init(myEhart[k]);
|
|
this.totalAvgFraction =
|
|
this.classconstitutionlist[k].totalAvgFraction;
|
|
this.categoryAgeFractionList =
|
|
this.classconstitutionlist[k].categoryAgeFractionList;
|
|
var list = [];
|
|
this.categoryTableNameList =
|
|
this.classconstitutionlist[k].categoryTableNameList;
|
|
this.categoryTableNameList.forEach((e) => {
|
|
e.childrenTableNameList.forEach((el) => {
|
|
list.push(el.categoryId);
|
|
});
|
|
});
|
|
this.categoryScoreList =
|
|
this.classconstitutionlist[k].categoryScoreList;
|
|
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;
|
|
}
|
|
if (num == null) {
|
|
num = 0;
|
|
return num;
|
|
}
|
|
return num;
|
|
});
|
|
el.list = list1;
|
|
});
|
|
for (let i = 0; i < this.listname.length; i++) {
|
|
name = this.categoryScoreList[0].categoryScoreList[i].categoryName;
|
|
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);
|
|
}
|
|
this.listname = [];
|
|
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: {},
|
|
},
|
|
};
|
|
option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "",
|
|
},
|
|
},
|
|
legend: {
|
|
data: names,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisTick: { show: false },
|
|
data: yname,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
},
|
|
],
|
|
series: yseries,
|
|
};
|
|
myChart.setOption(option, true);
|
|
}
|
|
}, 600);
|
|
},
|
|
// <!-- development 动作发展分析 -->
|
|
developmentinfo() {
|
|
setTimeout(() => {
|
|
this.developmentList = [];
|
|
for (let i = 0; i < this.classtypelist.length; i++) {
|
|
this.echartslist.classType = this.classtypelist[i].type;
|
|
developmentanalysis(this.echartslist).then((res) => {
|
|
if (res.data) {
|
|
this.developmentList.push(res.data);
|
|
} else {
|
|
}
|
|
});
|
|
}
|
|
this.developmentshow = true;
|
|
}, 500);
|
|
},
|
|
//physique 综合体质分析
|
|
physiqueinfoFEMALE() {
|
|
setTimeout(() => {
|
|
this.echartslist.studentSex = "FEMALE";
|
|
physiqueanalysis(this.echartslist).then((res) => {
|
|
if (res.data == [] || !res.data) {
|
|
this.FEMALE = false;
|
|
} else {
|
|
this.totalAvgFractionFEMALE = res.data.totalAvgFraction;
|
|
this.categoryTableNameListFEMALE = res.data.categoryTableNameList;
|
|
this.categoryAgeFractionListFEMALE =
|
|
res.data.categoryAgeFractionList;
|
|
this.categoryScoreListFEMALE = res.data.categoryScoreList;
|
|
this.firstCategoryScoreListFEMALE = res.data.firstCategoryScoreList;
|
|
if (res.data == [] || !res.data) {
|
|
} else {
|
|
var list = [];
|
|
this.categoryTableNameListFEMALE.forEach((e) => {
|
|
e.childrenTableNameList.forEach((el) => {
|
|
list.push(el.categoryId);
|
|
});
|
|
});
|
|
this.categoryAgeFractionListFEMALE.forEach((el) => {
|
|
var list1 = list.map((e) => {
|
|
var num = 0;
|
|
var number = el.categoryAvgFractionList.findIndex(
|
|
(o) => o.categoryId == e
|
|
);
|
|
if (number != -1) {
|
|
num =
|
|
el.categoryAvgFractionList[number].avgCategoryFraction;
|
|
}
|
|
return num;
|
|
});
|
|
el.list = list1;
|
|
});
|
|
let seriesData = [];
|
|
let yindicator = [];
|
|
this.categoryScoreListFEMALE.forEach((el) => {
|
|
seriesData.push(el.itemFraction);
|
|
if (el.avgCategoryName == null) {
|
|
el.avgCategoryName = "暂无";
|
|
}
|
|
if (this.categoryScoreListFEMALE.length == 1) {
|
|
yindicator.push({
|
|
name:
|
|
el.categoryName +
|
|
" " +
|
|
"(" +
|
|
el.avgCategoryName +
|
|
"" +
|
|
")",
|
|
max: el.maxFraction,
|
|
});
|
|
yindicator.push({
|
|
name: "暂无数据",
|
|
max: 100,
|
|
});
|
|
yindicator.push({
|
|
name: "暂无数据",
|
|
max: 100,
|
|
});
|
|
} else if (this.categoryScoreListFEMALE.length == 2) {
|
|
yindicator.push({
|
|
name:
|
|
el.categoryName +
|
|
" " +
|
|
"(" +
|
|
el.avgCategoryName +
|
|
"" +
|
|
")",
|
|
max: el.maxFraction,
|
|
});
|
|
yindicator.push({
|
|
name: "暂无数据",
|
|
max: 100,
|
|
});
|
|
} else {
|
|
yindicator.push({
|
|
name:
|
|
el.categoryName +
|
|
" " +
|
|
"(" +
|
|
el.avgCategoryName +
|
|
"" +
|
|
")",
|
|
max: el.maxFraction,
|
|
});
|
|
}
|
|
});
|
|
var myChart = echarts.init(
|
|
document.getElementById("FEMALEchart")
|
|
);
|
|
let option = {
|
|
//配置维度的最大值
|
|
color: "#D9A508",
|
|
radar: {
|
|
name: {
|
|
show: true,
|
|
color: "black",
|
|
},
|
|
center: ["50%", "50%"],
|
|
// 雷达图的指示器，用来指定雷达图中的多个变量（维度）
|
|
indicator: yindicator,
|
|
shape: "polygon", //对雷达图形设置成一个圆形,可选 circle:圆形,polygon:多角形(默认)
|
|
},
|
|
series: [
|
|
{
|
|
type: "radar",
|
|
label: {
|
|
show: true,
|
|
color: "#D9A508", //显示数值
|
|
},
|
|
areaStyle: {}, //每个雷达图形成一个阴影的面积
|
|
data: [
|
|
{
|
|
name: "成绩区域",
|
|
value: seriesData,
|
|
},
|
|
],
|
|
areaStyle: {
|
|
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
|
|
{
|
|
color: "rgba(255,192,0, 0.8)",
|
|
offset: 0,
|
|
},
|
|
{
|
|
color: "rgba(255,192,0, 0.9)",
|
|
offset: 1,
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
],
|
|
};
|
|
// 绘制图表
|
|
myChart.setOption(option);
|
|
this.FEMALE = true;
|
|
}
|
|
}
|
|
});
|
|
}, 400);
|
|
},
|
|
physiqueinfoMALE() {
|
|
setTimeout(() => {
|
|
this.echartslist.studentSex = "MALE";
|
|
physiqueanalysis(this.echartslist).then((res) => {
|
|
if (res.data == [] || !res.data) {
|
|
this.MALE = false;
|
|
} else {
|
|
this.totalAvgFraction = res.data.totalAvgFraction;
|
|
this.categoryTableNameListMALE = res.data.categoryTableNameList;
|
|
this.categoryAgeFractionListMALE = res.data.categoryAgeFractionList;
|
|
this.categoryScoreListMALE = res.data.categoryScoreList;
|
|
this.firstCategoryScoreListMALE = res.data.firstCategoryScoreList;
|
|
if (res.data == [] || !res.data) {
|
|
} else {
|
|
var list = [];
|
|
this.categoryTableNameListMALE.forEach((e) => {
|
|
e.childrenTableNameList.forEach((el) => {
|
|
list.push(el.categoryId);
|
|
});
|
|
});
|
|
this.categoryAgeFractionListMALE.forEach((el) => {
|
|
var list1 = list.map((e) => {
|
|
var num = 0;
|
|
var number = el.categoryAvgFractionList.findIndex(
|
|
(o) => o.categoryId == e
|
|
);
|
|
if (number != -1) {
|
|
num =
|
|
el.categoryAvgFractionList[number].avgCategoryFraction;
|
|
}
|
|
return num;
|
|
});
|
|
el.list = list1;
|
|
});
|
|
let seriesData = [];
|
|
let yindicator = [];
|
|
this.categoryScoreListMALE.forEach((el) => {
|
|
seriesData.push(el.itemFraction);
|
|
if (el.avgCategoryName == null) {
|
|
el.avgCategoryName = "暂无";
|
|
}
|
|
if (this.categoryScoreListMALE.length == 1) {
|
|
yindicator.push({
|
|
name:
|
|
el.categoryName +
|
|
" " +
|
|
"(" +
|
|
el.avgCategoryName +
|
|
"" +
|
|
")",
|
|
max: el.maxFraction,
|
|
});
|
|
yindicator.push({
|
|
name: "暂无数据",
|
|
max: 100,
|
|
});
|
|
yindicator.push({
|
|
name: "暂无数据",
|
|
max: 100,
|
|
});
|
|
} else if (this.categoryScoreListMALE.length == 2) {
|
|
yindicator.push({
|
|
name:
|
|
el.categoryName +
|
|
" " +
|
|
"(" +
|
|
el.avgCategoryName +
|
|
"" +
|
|
")",
|
|
max: el.maxFraction,
|
|
});
|
|
yindicator.push({
|
|
name: "暂无数据",
|
|
max: 100,
|
|
});
|
|
} else {
|
|
yindicator.push({
|
|
name:
|
|
el.categoryName +
|
|
" " +
|
|
"(" +
|
|
el.avgCategoryName +
|
|
"" +
|
|
")",
|
|
max: el.maxFraction,
|
|
});
|
|
}
|
|
});
|
|
var myChart = echarts.init(document.getElementById("MALEchart"));
|
|
let option = {
|
|
//配置维度的最大值
|
|
color: "#D9A508",
|
|
radar: {
|
|
name: {
|
|
show: true,
|
|
color: "black",
|
|
},
|
|
center: ["50%", "50%"],
|
|
// 雷达图的指示器，用来指定雷达图中的多个变量（维度）
|
|
indicator: yindicator,
|
|
shape: "polygon", //对雷达图形设置成一个圆形,可选 circle:圆形,polygon:多角形(默认)
|
|
},
|
|
series: [
|
|
{
|
|
type: "radar",
|
|
label: {
|
|
show: true,
|
|
color: "#D9A508", //显示数值
|
|
},
|
|
areaStyle: {}, //每个雷达图形成一个阴影的面积
|
|
data: [
|
|
{
|
|
name: "成绩区域",
|
|
value: seriesData,
|
|
},
|
|
],
|
|
areaStyle: {
|
|
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
|
|
{
|
|
color: "rgba(255,192,0, 0.8)",
|
|
offset: 0,
|
|
},
|
|
{
|
|
color: "rgba(255,192,0, 0.9)",
|
|
offset: 1,
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
],
|
|
};
|
|
// 绘制图表
|
|
myChart.setOption(option);
|
|
this.MALE = true;
|
|
}
|
|
}
|
|
});
|
|
}, 350);
|
|
},
|
|
//平均身高体重
|
|
heightAndWeightinfo() {
|
|
setTimeout(() => {
|
|
heightAndWeightanalysis(this.echartslist).then((res) => {
|
|
if (!res.data) {
|
|
this.heightAndWeightshow = false;
|
|
} else {
|
|
this.heightAndWeightlist = res.data;
|
|
var yclassname = [];
|
|
var grilsheight = [];
|
|
var boyheight = [];
|
|
var boyweight = [];
|
|
var grilsweight = [];
|
|
|
|
for (let i = 0; i < this.heightAndWeightlist.length; i++) {
|
|
this.heightAndWeightlist[i].weightAndHeightAvgScoreList.forEach(
|
|
(el) => {
|
|
if (el.itemCode == "H001" && el.studentSex == "MALE") {
|
|
boyheight.push(el.averageScore);
|
|
} else if (
|
|
el.itemCode == "H001" &&
|
|
el.studentSex == "FEMALE"
|
|
) {
|
|
grilsheight.push(el.averageScore);
|
|
} else if (
|
|
el.itemCode == "W001" &&
|
|
el.studentSex == "FEMALE"
|
|
) {
|
|
grilsweight.push(el.averageScore);
|
|
} else if (el.itemCode == "W001" && el.studentSex == "MALE") {
|
|
boyweight.push(el.averageScore);
|
|
}
|
|
}
|
|
);
|
|
if (grilsheight.length == i) {
|
|
grilsheight.push(0);
|
|
}
|
|
if (boyheight.length == i) {
|
|
boyheight.push(0);
|
|
}
|
|
if (boyweight.length == i) {
|
|
boyweight.push(0);
|
|
}
|
|
if (grilsweight.length == i) {
|
|
grilsweight.push(0);
|
|
}
|
|
}
|
|
|
|
this.heightAndWeightlist.forEach((e) => {
|
|
yclassname.push(e.className);
|
|
});
|
|
var app = {};
|
|
|
|
var myChart = echarts.init(
|
|
document.getElementById("heightAndWeight1")
|
|
);
|
|
var myChart2 = echarts.init(
|
|
document.getElementById("heightAndWeight2")
|
|
);
|
|
var option;
|
|
var option2;
|
|
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: {},
|
|
},
|
|
};
|
|
option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
legend: {
|
|
data: ["男", "女"],
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisTick: { show: false },
|
|
data: yclassname,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "男",
|
|
type: "bar",
|
|
barWidth: 35,
|
|
barGap: 0,
|
|
color: "#00B050",
|
|
label: labelOption,
|
|
emphasis: {
|
|
focus: "series",
|
|
},
|
|
data: boyheight,
|
|
},
|
|
{
|
|
name: "女",
|
|
type: "bar",
|
|
barWidth: 35,
|
|
color: "red",
|
|
label: labelOption,
|
|
emphasis: {
|
|
focus: "series",
|
|
},
|
|
data: grilsheight,
|
|
},
|
|
],
|
|
};
|
|
option2 = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
legend: {
|
|
data: ["男", "女"],
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisTick: { show: false },
|
|
data: yclassname,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "男",
|
|
barWidth: 35,
|
|
type: "bar",
|
|
barGap: 0,
|
|
color: "#00B050",
|
|
label: labelOption,
|
|
emphasis: {
|
|
focus: "series",
|
|
},
|
|
data: boyweight,
|
|
},
|
|
{
|
|
barWidth: 35,
|
|
name: "女",
|
|
type: "bar",
|
|
color: "red",
|
|
label: labelOption,
|
|
emphasis: {
|
|
focus: "series",
|
|
},
|
|
data: grilsweight,
|
|
},
|
|
],
|
|
};
|
|
option && myChart.setOption(option);
|
|
option2 && myChart2.setOption(option2);
|
|
this.heightAndWeightshow = true;
|
|
}
|
|
});
|
|
}, 300);
|
|
},
|
|
//survey体测概况分析
|
|
StudentListinfo() {
|
|
setTimeout(() => {
|
|
StudentList(this.echartslist).then((res) => {
|
|
if (res.data.testAllStudentScoreVOList != null) {
|
|
this.studentlist = res.data.testAllStudentScoreVOList;
|
|
}
|
|
if (res.data.allStudentScoreVOList != null) {
|
|
this.yclassname1 = [];
|
|
this.yclassname2 = [];
|
|
this.yclassname3 = [];
|
|
this.classscore1 = [];
|
|
this.classscore2 = [];
|
|
this.classscore3 = [];
|
|
res.data.allStudentScoreVOList.forEach((e) => {
|
|
if (e.classType == this.LARGECLASS) {
|
|
this.yclassname1.push(e.className);
|
|
if (
|
|
e.itemScoreAll == "" ||
|
|
!e.itemScoreAll ||
|
|
e.itemScoreAll == null
|
|
) {
|
|
this.classscore1.push(0);
|
|
} else {
|
|
this.classscore1.push(e.itemScoreAll);
|
|
}
|
|
} else if (e.classType == this.MIDDLECLASS) {
|
|
this.yclassname2.push(e.className);
|
|
if (
|
|
e.itemScoreAll == "" ||
|
|
!e.itemScoreAll ||
|
|
e.itemScoreAll == null
|
|
) {
|
|
this.classscore2.push(0);
|
|
} else {
|
|
this.classscore2.push(e.itemScoreAll);
|
|
}
|
|
} else if (e.classType == this.SMALLCLASS) {
|
|
this.yclassname3.push(e.className);
|
|
if (
|
|
e.itemScoreAll == "" ||
|
|
!e.itemScoreAll ||
|
|
e.itemScoreAll == null
|
|
) {
|
|
this.classscore3.push(0);
|
|
} else {
|
|
this.classscore3.push(e.itemScoreAll);
|
|
}
|
|
}
|
|
});
|
|
this.$nextTick((e) => {
|
|
if (this.yclassname1.length != 0) {
|
|
var myChart = echarts.init(document.getElementById("survey1"));
|
|
}
|
|
if (this.yclassname2.length != 0) {
|
|
var myChart2 = echarts.init(document.getElementById("survey2"));
|
|
}
|
|
if (this.yclassname3.length != 0) {
|
|
var myChart3 = echarts.init(document.getElementById("survey3"));
|
|
}
|
|
// var myChart = echarts.init(document.getElementById("main"));
|
|
// var myChart2 = echarts.init(document.getElementById("main2"));
|
|
// var myChart3 = echarts.init(document.getElementById("main3"));
|
|
var app = {};
|
|
var option;
|
|
var option2;
|
|
var option3;
|
|
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: {},
|
|
},
|
|
};
|
|
option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
legend: {},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisTick: { show: false },
|
|
data: this.yclassname1,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
// max: (value) => {
|
|
// return Math.ceil(value.max / 100) * 100;
|
|
// },
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
barWidth: 35,
|
|
barGap: 0,
|
|
color: "#00B050",
|
|
label: labelOption,
|
|
emphasis: {
|
|
focus: "series",
|
|
},
|
|
data: this.classscore1,
|
|
},
|
|
],
|
|
};
|
|
option2 = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
legend: {},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisTick: { show: false },
|
|
data: this.yclassname2,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
barGap: 0,
|
|
barWidth: 35,
|
|
|
|
color: "#00B050",
|
|
label: labelOption,
|
|
emphasis: {
|
|
focus: "series",
|
|
},
|
|
data: this.classscore2,
|
|
},
|
|
],
|
|
};
|
|
option3 = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
legend: {},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisTick: { show: false },
|
|
data: this.yclassname3,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
barGap: 0,
|
|
barWidth: 35,
|
|
color: "#00B050",
|
|
label: labelOption,
|
|
emphasis: {
|
|
focus: "series",
|
|
},
|
|
data: this.classscore3,
|
|
},
|
|
],
|
|
};
|
|
|
|
if (this.yclassname1.length != 0) {
|
|
option && myChart.setOption(option);
|
|
}
|
|
if (this.yclassname2.length != 0) {
|
|
option2 && myChart2.setOption(option2);
|
|
}
|
|
if (this.yclassname3.length != 0) {
|
|
option3 && myChart3.setOption(option3);
|
|
}
|
|
// option && myChart.setOption(option);
|
|
// option2 && myChart2.setOption(option2);
|
|
// option3 && myChart3.setOption(option3);
|
|
});
|
|
}
|
|
if (res.data.allClassByVOList != null) {
|
|
this.selectAllClassBylist = res.data.allClassByVOList;
|
|
}
|
|
if (
|
|
res.data.allStudentScoreVOList == null &&
|
|
res.data.testAllStudentScoreVOList == null &&
|
|
res.data.allClassByVOList == null
|
|
) {
|
|
}
|
|
});
|
|
}, 200);
|
|
},
|
|
//KindergartenPhysicalTest 体测达标分析
|
|
KindergartenPhysicalTestinfo() {
|
|
this.KindergartenPhysicalTestlist = {};
|
|
KindergartenPhysicalTestanalysis(this.echartslist).then((res) => {
|
|
if (res.data == [] || !res.data) {
|
|
this.KindergartenPhysicalTestshow = false;
|
|
} else {
|
|
this.KindergartenPhysicalTestlist = res.data;
|
|
var app = {};
|
|
var myChart = echarts.init(
|
|
document.getElementById("KindergartenPhysicalTest1")
|
|
);
|
|
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: {},
|
|
},
|
|
};
|
|
option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
legend: {
|
|
data: ["男", "女"],
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisTick: { show: false },
|
|
data: ["3-4岁", "4-5岁", "5-6岁", "6岁以上"],
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "男",
|
|
type: "bar",
|
|
barGap: 0,
|
|
color: "#60C5F1",
|
|
label: labelOption,
|
|
emphasis: {
|
|
focus: "series",
|
|
},
|
|
data: [
|
|
this.KindergartenPhysicalTestlist.threeAndFourMaleCount,
|
|
this.KindergartenPhysicalTestlist.fourAndFiveMaleCount,
|
|
this.KindergartenPhysicalTestlist.fiveAndSixMaleCount,
|
|
this.KindergartenPhysicalTestlist.sixAndMoreMaleCount,
|
|
],
|
|
},
|
|
{
|
|
name: "女",
|
|
type: "bar",
|
|
color: "#98E0AD",
|
|
label: labelOption,
|
|
emphasis: {
|
|
focus: "series",
|
|
},
|
|
data: [
|
|
this.KindergartenPhysicalTestlist.threeAndFourFeMaleCount,
|
|
this.KindergartenPhysicalTestlist.fourAndFiveFeMaleCount,
|
|
this.KindergartenPhysicalTestlist.fiveAndSixFeMaleCount,
|
|
this.KindergartenPhysicalTestlist.sixAndMoreFeMaleCount,
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
this.KindergartenPhysicalTestoptions();
|
|
this.KindergartenPhysicalTestshow = true;
|
|
}
|
|
});
|
|
},
|
|
KindergartenPhysicalTestoptions() {
|
|
var chartDom = document.getElementById("KindergartenPhysicalTest2");
|
|
var myChart = echarts.init(chartDom);
|
|
var option2;
|
|
|
|
option2 = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
top: "5%",
|
|
left: "center",
|
|
},
|
|
series: [
|
|
{
|
|
center: ["50%", "60%"],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true,
|
|
formatter: "{d}%", //只要百分比
|
|
position: "inside",
|
|
},
|
|
labelLine: { show: true },
|
|
color: function (colors) {
|
|
var colorList = [
|
|
"#5470c6",
|
|
"#fc8251",
|
|
"#91cd77",
|
|
"#ef6567",
|
|
"#f9c956",
|
|
"#75bedc",
|
|
];
|
|
return colorList[colors.dataIndex];
|
|
},
|
|
},
|
|
},
|
|
name: "",
|
|
type: "pie",
|
|
radius: ["40%", "70%"],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: "center",
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
fontSize: "20",
|
|
fontWeight: "bold",
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: this.KindergartenPhysicalTestlist.excellentRate,
|
|
name: ">80优秀",
|
|
},
|
|
{
|
|
value: this.KindergartenPhysicalTestlist.qualifyRate,
|
|
name: "60-80合格",
|
|
},
|
|
{
|
|
value: this.KindergartenPhysicalTestlist.unQualifyRate,
|
|
name: "<60不合格",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
option2 && myChart.setOption(option2);
|
|
},
|
|
//班级type
|
|
getList() {
|
|
tKindergartenInfo(this.kindergartenType).then((res) => {
|
|
this.type = res.data[0];
|
|
this.type2 = res.data[1];
|
|
});
|
|
},
|
|
//班级类型
|
|
classtype() {
|
|
this.classtypelist = [];
|
|
tKindergartenInfo(this.ClassType).then((res) => {
|
|
res.data.forEach((e) => {
|
|
var obj = {
|
|
name: e.dictLabel,
|
|
type: e.dictValue,
|
|
};
|
|
this.classtypelist.push(obj);
|
|
});
|
|
this.developmentinfo();
|
|
});
|
|
},
|
|
//班级list
|
|
classinfo() {
|
|
listClassinfo(this.echartslist).then((response) => {
|
|
this.classList = response.rows;
|
|
this.ClassListinfo();
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped='scss'>
|
|
::v-deep .el-card__header {
|
|
border: none;
|
|
}
|
|
::v-deep .el-form {
|
|
display: inline;
|
|
}
|
|
.title {
|
|
display: block;
|
|
width: 350px;
|
|
margin: 0 auto;
|
|
line-height: 35px;
|
|
background-color: #60c5f1;
|
|
color: #fff;
|
|
font-size: 15px;
|
|
border-radius: 20px;
|
|
}
|
|
.text {
|
|
font-size: 12px;
|
|
position: absolute;
|
|
left: 19%;
|
|
top: 10%;
|
|
}
|
|
.header {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
width: 380px;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
margin: 0 auto;
|
|
background-color: #f0f0f0;
|
|
border-radius: 25px;
|
|
}
|
|
.surveytitle {
|
|
width: 70px;
|
|
background-color: #00d1da;
|
|
color: #fff;
|
|
line-height: 25px;
|
|
height: 25px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
border-radius: 15px;
|
|
position: absolute;
|
|
left: 7%;
|
|
top: 8%;
|
|
}
|
|
::v-deep .el-card__header {
|
|
border: none;
|
|
}
|
|
::v-deep .el-form {
|
|
display: inline;
|
|
}
|
|
</style>
|