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