幼儿评估-图表

This commit is contained in:
paidaxing444
2020-11-07 17:39:08 +08:00
parent 34d87f3db6
commit fe79121520
14 changed files with 469 additions and 188 deletions

View File

@ -17,6 +17,14 @@ export function getAssessmentchild(id) {
})
}
// 查询幼儿评估字典
export function getAssessmentDictData(id) {
return request({
url: '/benyi/assessmentchild/getdicdata/' + id,
method: 'get'
})
}
// 新增幼儿评估
export function addAssessmentchild(data) {
return request({

View File

@ -2,78 +2,86 @@ import request from '@/utils/request'
// 查询评估内容列表
export function listAssessmentcontent(query) {
return request({
url: '/benyi/assessmentcontent/list',
method: 'get',
params: query
})
return request({
url: '/benyi/assessmentcontent/list',
method: 'get',
params: query
})
}
// 查询部门下拉树结构
export function treeselect() {
return request({
url: '/benyi/assessmentcontent/treeselect',
method: 'get'
})
return request({
url: '/benyi/assessmentcontent/treeselect',
method: 'get'
})
}
// 查询流程下拉树结构
export function treeselectstudy() {
return request({
url: '/benyi/assessmentcontent/treeselectstudy',
method: 'get'
})
return request({
url: '/benyi/assessmentcontent/treeselectstudy',
method: 'get'
})
}
// 查询评估内容详细
export function getAssessmentcontent(id) {
return request({
url: '/benyi/assessmentcontent/' + id,
method: 'get'
})
return request({
url: '/benyi/assessmentcontent/' + id,
method: 'get'
})
}
// 查询评估内容详细
export function getAssessmentcontentbyparentid(id) {
return request({
url: '/benyi/assessmentcontent/byparentid/' + id,
method: 'get'
})
return request({
url: '/benyi/assessmentcontent/byparentid/' + id,
method: 'get'
})
}
// 新增评估内容
export function addAssessmentcontent(data) {
return request({
url: '/benyi/assessmentcontent',
method: 'post',
data: data
})
return request({
url: '/benyi/assessmentcontent',
method: 'post',
data: data
})
}
// 修改评估内容
export function updateAssessmentcontent(data) {
return request({
url: '/benyi/assessmentcontent',
method: 'put',
data: data
})
return request({
url: '/benyi/assessmentcontent',
method: 'put',
data: data
})
}
// 删除评估内容
export function delAssessmentcontent(id) {
return request({
url: '/benyi/assessmentcontent/' + id,
method: 'delete'
})
return request({
url: '/benyi/assessmentcontent/' + id,
method: 'delete'
})
}
// 导出评估内容
export function exportAssessmentcontent(query) {
return request({
url: '/benyi/assessmentcontent/export',
method: 'get',
params: query
})
}
return request({
url: '/benyi/assessmentcontent/export',
method: 'get',
params: query
})
}
// 查询评估统计
export function getAssessmentStatistics(childid, scope) {
return request({
url: '/benyi/assessmentcontent/getassessmentstatistics/' + childid + '/' + scope,
method: 'get'
})
}

View File

@ -2,17 +2,22 @@
<div class="app-container">
<div class="flex align-center justify-between">
<p class="title flex align-center">
<span>{{ this.childName }}同学评估结果图表 </span>
<span>幼儿{{ this.childName }} 评估结果图表 </span>
</p>
</div>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="儿童学习与发展评估(36-48)" name="first">
<el-tab-pane
v-for="item in tabsList"
:key="item.dictValue"
:label="item.dictLabel"
:name="item.dictLabel"
>
<div>
<radar-chart />
<radar-chart :psMsg="item.dictValue" />
</div>
<div class="block">
<h2 class="block-item-title flex align-center">评估建议</h2>
<ul class="block-content">
<!-- <ul class="block-content">
<li>
<p class="block-content-title">
<span class="num">1. </span>具有健康的体态
@ -50,11 +55,9 @@
<div class="check-info"></div>
</div>
</li>
</ul>
</ul> -->
</div>
</el-tab-pane>
<el-tab-pane label="儿童学习与发展评估(48-60)" name="second">配置管理</el-tab-pane>
<el-tab-pane label="儿童学习与发展评估(60-72)" name="third">角色管理</el-tab-pane>
</el-tabs>
</div>
</template>
@ -62,17 +65,9 @@
import {
listAssessmentcontent,
getAssessmentcontent,
delAssessmentcontent,
addAssessmentcontent,
updateAssessmentcontent,
exportAssessmentcontent,
} from "@/api/benyi/assessmentcontent";
import { getChildByAssessment } from "@/api/benyi/child";
import {
addAssessmentchild,
updateAssessmentchild,
} from "@/api/benyi/assessmentchild";
import { getAssessmentDictData } from "@/api/benyi/assessmentchild";
import RadarChart from "@/views/dashboard/RadarChart";
export default {
@ -84,31 +79,13 @@ export default {
return {
childId: "",
childName: "",
childCsrq: "",
bjmc: "",
classid: "",
trem: "",
zbjsxm: "",
assessmentscope: "",
// tabs列表
tabsList: [],
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 评估内容表格数据
assessmentcontentList: [],
// 表单参数
form: {},
// 查询参数
queryParams: {
parentid: undefined,
name: undefined,
iselement: undefined,
scope: undefined,
sort: undefined,
},
activeName: "first",
checked: false,
checkList: [],
activeName: "",
};
},
created() {
@ -117,6 +94,7 @@ export default {
this.childId = childId;
// console.log("childId:" + childId);
this.getChild(childId);
this.getList(childId);
},
methods: {
getChild(childId) {
@ -124,45 +102,25 @@ export default {
// console.log(response);
if (response.code == "200") {
this.childName = response.data.name;
this.childCsrq = response.data.csrq;
this.trem = response.trem;
this.bjmc = response.data.bjmc;
this.classid = response.data.classid;
this.zbjsxm = response.data.zbjsmc;
response.ByAssessmentchild.forEach((item) =>
this.checkList.push(item.contentid)
);
if (response.isAssessment == "0") {
this.msgError(
"当前幼儿出生日期不符合评估范围幼儿评估范围为36-72个月"
);
} else {
this.assessmentscope = response.isAssessment;
this.getList();
}
}
});
},
/** 查询评估内容列表 */
getList() {
this.loading = true;
listAssessmentcontent(this.queryParams).then((response) => {
// console.log("rows:" + response.rows);
this.assessmentcontentList = response.rows;
this.loading = false;
getList(childId) {
getAssessmentDictData(childId).then((response) => {
// console.log("rows:" + response.dictdata.length);
if (response.dictdata.length > 0) {
this.activeName = response.dictdata[0].dictLabel;
this.tabsList = response.dictdata;
} else {
this.msgError("该幼儿尚未提交评估数据,无法展示数据");
}
});
},
handleClick(tab) {
// this.activeName = tab
},
handlecheckedItemsChange(value) {
// var items = "";
// this.checkList.forEach((item) => {
// //当全选被选中的时候,循环遍历源数据,把数据的每一项加入到默认选中的数组去
// items = items + item + ",";
// });
// console.log(items);
// this.activeName = tab.name;
// console.log(tab.name);
},
},
};

View File

@ -1,111 +1,274 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import { getAssessmentStatistics } from "@/api/benyi/assessmentcontent";
const animationDuration = 3000
const animationDuration = 3000;
export default {
values: [],
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
default: "chart",
},
width: {
type: String,
default: '100%'
default: "100%",
},
height: {
type: String,
default: '300px'
}
default: "300px",
},
psMsg: {
type: String,
default: "",
}, //接收psMsg值 适用范围
},
data() {
return {
chart: null
}
chart: null,
childId: "",
};
},
mounted() {
var childId = this.$route.params && this.$route.params.id;
this.childId = childId;
// console.log("child-chart:" + childId);
// console.log("psMsg:" + this.psMsg);
this.$nextTick(() => {
this.initChart()
})
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return
return;
}
this.chart.dispose()
this.chart = null
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
async getData() {
await getAssessmentStatistics(this.childId, this.psMsg).then(
(response) => {
console.log(response);
let value = [];
let len = response.statistics;
for (var j = 0; j < len.length; j++) {
console.log(len[j]);
if (len[j] == "NaN") {
value.push(0);
} else {
value.push(len[j]);
}
}
},
radar: {
radius: '66%',
center: ['50%', '42%'],
splitNumber: 8,
splitArea: {
areaStyle: {
color: 'rgba(127,95,132,.3)',
opacity: 1,
shadowBlur: 45,
shadowColor: 'rgba(0,0,0,.5)',
shadowOffsetX: 0,
shadowOffsetY: 15
}
},
indicator: [
{ name: '健康', max: 100 },
{ name: '语言', max: 100 },
{ name: '社会', max: 100 },
{ name: '科学', max: 100 },
{ name: '艺术', max: 100 }
]
},
legend: {
left: 'center',
bottom: '10',
data: ['36-48个月幼儿测评范围值', '幼儿实际测评值']
},
series: [{
type: 'radar',
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1
}
},
data: [
{
value: [48, 48, 48, 48, 48],
name: '36-48个月幼儿测评范围值'
this.values = value;
//console.log(this.names);
//console.log(this.values);
}
);
},
async initChart() {
await this.getData();
this.chart = echarts.init(this.$el, "macarons");
if (this.psMsg == "3") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["60-72个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
value: [36, 48, 36, 33, 20],
name: '幼儿实际测评值'
}
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [72, 72, 72, 72, 72],
name: "60-72个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
animationDuration: animationDuration
}]
})
}
}
}
});
} else if (this.psMsg == "2") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["48-60个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [60, 60, 60, 60, 60],
name: "48-60个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
} else if (this.psMsg == "1") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["36-48个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [48, 48, 48, 48, 48],
name: "36-48个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
}
},
},
};
</script>