Compare commits
2 Commits
a853214741
...
d068d4e71a
Author | SHA1 | Date |
---|---|---|
yangws | d068d4e71a | |
小杨 | 1ef4615587 |
|
@ -15,11 +15,11 @@ const chartRef = ref(null);
|
||||||
|
|
||||||
// 数据源
|
// 数据源
|
||||||
const dataList = ref([
|
const dataList = ref([
|
||||||
{name: '优', value: 0,rating:1},
|
{name: '完美', value: 0,rating:1,max:100,min:100,},
|
||||||
{name: '优-', value: 0,rating:2},
|
{name: '优秀', value: 0,rating:2,max:99,min:80,},
|
||||||
{name: '良', value: 0,rating:3},
|
{name: '良好', value: 0,rating:3,max:79,min:70,},
|
||||||
{name: '良-', value: 0,rating:4},
|
{name: '及格', value: 0,rating:4,max:69,min:60,},
|
||||||
{name: '差', value: 0,rating:5},
|
{name: '不及格', value: 0,rating:5,max:59,min:0,},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 根据数据生成不同的颜色
|
// 根据数据生成不同的颜色
|
||||||
|
@ -81,10 +81,13 @@ function initChart() {
|
||||||
}
|
}
|
||||||
// 获取表的数据
|
// 获取表的数据
|
||||||
const showEcharts =() => {
|
const showEcharts =() => {
|
||||||
useOverview.tableList.forEach(item => {
|
useOverview.tableList.forEach((item,index) => {
|
||||||
const index = dataList.value.findIndex(item1 => item1.rating === item.rating)
|
if(item.rating === 0) return // 没批改不计数
|
||||||
if(index !== -1)
|
dataList.value.forEach((item1,index1) => {
|
||||||
dataList.value[index].value ++
|
if(item1.min <= Number(item.scoingRate) && Number(item.scoingRate) <= item1.max ){
|
||||||
|
item1.value ++
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
watch(() => useOverview.tableList,() => {
|
watch(() => useOverview.tableList,() => {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<el-tabs :tab-position="tabPosition" style="height: 100%" class="demo-tabs" @tabChange="handelChange">
|
<el-tabs :tab-position="tabPosition" style="height: 100%" class="demo-tabs" @tabChange="handelChange">
|
||||||
<template v-for="(item,index) in leftList" :key="index">
|
<template v-for="(item,index) in leftList" :key="index">
|
||||||
<el-tab-pane :label="item.label" style="text-align:left">
|
<el-tab-pane :label="item.label" style="text-align:left" stretch="true">
|
||||||
<template v-if="item.stuList.length > 0">
|
<template v-if="item.stuList.length > 0">
|
||||||
<template v-for="(stuItem,stuIndex) in item.stuList" :key="stuIndex">
|
<template v-for="(stuItem,stuIndex) in item.stuList" :key="stuIndex">
|
||||||
<el-tag style="margin:5px 10px 0 0" type="primary">{{stuItem.studentname}}</el-tag>
|
<el-tag style="margin:5px 10px 0 0" type="primary">{{stuItem.studentname}}</el-tag>
|
||||||
|
@ -23,29 +23,40 @@ const useOverview = overviewStore()
|
||||||
const tabPosition = ref('left')
|
const tabPosition = ref('left')
|
||||||
const leftList = ref([
|
const leftList = ref([
|
||||||
{
|
{
|
||||||
label:'优',
|
label:'完美',
|
||||||
stuList:[],
|
stuList:[],
|
||||||
rating:1
|
rating:1,
|
||||||
|
max:100,
|
||||||
|
min:100,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:'优-',
|
label:'优秀',
|
||||||
stuList:[],
|
stuList:[],
|
||||||
rating:2
|
rating:2,
|
||||||
|
max:99,
|
||||||
|
min:80,
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:'良',
|
label:'良好',
|
||||||
stuList:[],
|
stuList:[],
|
||||||
rating:3
|
rating:3,
|
||||||
|
max:79,
|
||||||
|
min:70,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:'良-',
|
label:'及格',
|
||||||
stuList:[],
|
stuList:[],
|
||||||
rating:4
|
rating:4,
|
||||||
|
max:69,
|
||||||
|
min:60,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:'差',
|
label:'不及格',
|
||||||
stuList:[],
|
stuList:[],
|
||||||
rating:5
|
rating:5,
|
||||||
|
max:59,
|
||||||
|
min:0,
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
//切换展示区域学生
|
//切换展示区域学生
|
||||||
|
@ -54,9 +65,12 @@ const handelChange = (item) => {
|
||||||
}
|
}
|
||||||
//取区域的学生
|
//取区域的学生
|
||||||
const showStudents = (index) => {
|
const showStudents = (index) => {
|
||||||
console.log(useOverview.tableList,'lef')
|
|
||||||
leftList.value[index].stuList = useOverview.tableList.filter(item => {
|
leftList.value[index].stuList = useOverview.tableList.filter(item => {
|
||||||
if(item.rating == leftList.value[index].rating) return item
|
if(item.rating > 0){
|
||||||
|
if(leftList.value[index].min <= Number(item.scoingRate || 0) && Number(item.scoingRate || 0) <= leftList.value[index].max ){
|
||||||
|
return item
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
watch(() => useOverview.tableList,() => {
|
watch(() => useOverview.tableList,() => {
|
||||||
|
@ -107,9 +121,9 @@ watch(() => useOverview.tableList,() => {
|
||||||
:deep(.el-tabs__item.is-active){
|
:deep(.el-tabs__item.is-active){
|
||||||
background-color: rgb(238, 241, 246);
|
background-color: rgb(238, 241, 246);
|
||||||
}
|
}
|
||||||
:deep(.el-tabs--left .el-tabs__item.is-left){
|
:deep(.el-tabs--left .el-tabs__item.is-left, .el-tabs--right .el-tabs__item.is-left){
|
||||||
text-align: left;
|
text-align: left;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
Loading…
Reference in New Issue