src/renderer/src/views/classTask/container/classOverview/distribution/echarts.vue

@@ -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,() => {

src/renderer/src/views/classTask/container/classOverview/distribution/stuList.vue

@@ -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>