学生学业评价

src/components/RemoteMultiSelect/index.vue

@@ -155,7 +155,7 @@ watch(() => props.modelValue, (val) => {
 
 <template>
   <el-select class="w-full" v-model="value" filterable remote reserve-keyword clearable :remote-method="remoteMethod"
-    :loading="loading" multiple>
+    :loading="loading" multiple collapse-tags>
     <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
       <slot :item="item.origin">
         {{ item.name }}

src/pages/xdjx/xypjgl/xsxypjcx.vue

@@ -1,180 +1,194 @@
-<!-- <script setup lang="ts">
-// import request from '~/utils/request'
-
-// request({
-//   url: '/xdjx/xypjgl_xsxypjcx/content_json'
-// }).then(res => {
-//   const data = res.data.content_json
-// })
-
-</script> -->
-
-<!-- <template>
-  <router-view></router-view>
-</template> -->
-
 <script setup>
+import request from '~/utils/request'
 import { onMounted, ref } from 'vue';
 import * as echarts from 'echarts';
+import { ElMessage } from 'element-plus'
 const canvasRef = ref()
 const canvasRef2 = ref()
+const queryForm_Data = ref({
+  team_id: "",
+  student_no: ""
+})
 
+const data = ref({});
+const option = ref({});
 
-const data = ref({
-  "legend": [
-    "2021学年"
-  ],
-  "xAxis": [
-    "第一次月考",
-    "第二次月考",
-    "期中考试",
-    "第三次月考",
-    "第四次月考",
-    "期末考试"
-  ],
-  "series": [
-    {
-      "data": [
-        {
-          "total": 320,
-          "title": "2021学年三年（2）班第一次月考各科平均成绩",
-          "indicator": [
-            "语文",
-            "数学",
-            "英语",
-            "物理",
-            "化学"
-          ],
-          "data": [
-            40,
-            40,
-            80,
-            80,
-            80
-          ]
-        },
-        {
-          "total": 410,
-          "title": "2021学年三年（2）班第二次月考各科平均成绩",
-          "indicator": [
-            "语文",
-            "数学",
-            "英语",
-            "物理",
-            "化学"
-          ],
-          "data": [
-            80,
-            90,
-            80,
-            80,
-            80
-          ]
-        },
-        {
-          "total": 400,
-          "title": "2021学年三年（2）班期中考试各科平均成绩",
-          "indicator": [
-            "语文",
-            "数学",
-            "英语",
-            "物理",
-            "化学"
-          ],
-          "data": [
-            80,
-            80,
-            80,
-            80,
-            80
-          ]
-        },
-        {
-          "total": 430,
-          "title": "2021学年三年（2）班第三次月考各科平均成绩",
-          "indicator": [
-            "语文",
-            "数学",
-            "英语",
-            "物理",
-            "化学"
-          ],
-          "data": [
-            90,
-            90,
-            80,
-            90,
-            80
-          ]
-        },
-        {
-          "total": 390,
-          "title": "2021学年三年（2）班第四次月考各科平均成绩",
-          "indicator": [
-            "语文",
-            "数学",
-            "英语",
-            "物理",
-            "化学"
-          ],
-          "data": [
-            80,
-            80,
-            70,
-            80,
-            80
-          ]
-        },
-        {
-          "total": 460,
-          "title": "2021学年三年（2）班期末考试各科平均成绩",
-          "indicator": [
-            "语文",
-            "数学",
-            "英语",
-            "物理",
-            "化学"
-          ],
-          "data": [
-            100,
-            90,
-            80,
-            90,
-            100
-          ]
-        }
-      ]
+// data.value = {
+//   "legend": [
+//     "2021学年"
+//   ],
+//   "xAxis": [
+//     "第一次月考",
+//     "第二次月考",
+//     "期中考试",
+//     "第三次月考",
+//     "第四次月考",
+//     "期末考试"
+//   ],
+//   "series": [
+//     {
+//       "data": [
+//         {
+//           "total": 320,
+//           "title": "2021学年三年（2）班第一次月考各科平均成绩",
+//           "indicator": [
+//             "语文",
+//             "数学",
+//             "英语",
+//             "物理",
+//             "化学"
+//           ],
+//           "data": [
+//             40,
+//             40,
+//             80,
+//             80,
+//             80
+//           ]
+//         },
+//         {
+//           "total": 410,
+//           "title": "2021学年三年（2）班第二次月考各科平均成绩",
+//           "indicator": [
+//             "语文",
+//             "数学",
+//             "英语",
+//             "物理",
+//             "化学"
+//           ],
+//           "data": [
+//             80,
+//             90,
+//             80,
+//             80,
+//             80
+//           ]
+//         },
+//         {
+//           "total": 400,
+//           "title": "2021学年三年（2）班期中考试各科平均成绩",
+//           "indicator": [
+//             "语文",
+//             "数学",
+//             "英语",
+//             "物理",
+//             "化学"
+//           ],
+//           "data": [
+//             80,
+//             80,
+//             80,
+//             80,
+//             80
+//           ]
+//         },
+//         {
+//           "total": 430,
+//           "title": "2021学年三年（2）班第三次月考各科平均成绩",
+//           "indicator": [
+//             "语文",
+//             "数学",
+//             "英语",
+//             "物理",
+//             "化学"
+//           ],
+//           "data": [
+//             90,
+//             90,
+//             80,
+//             90,
+//             80
+//           ]
+//         },
+//         {
+//           "total": 390,
+//           "title": "2021学年三年（2）班第四次月考各科平均成绩",
+//           "indicator": [
+//             "语文",
+//             "数学",
+//             "英语",
+//             "物理",
+//             "化学"
+//           ],
+//           "data": [
+//             80,
+//             80,
+//             70,
+//             80,
+//             80
+//           ]
+//         },
+//         {
+//           "total": 460,
+//           "title": "2021学年三年（2）班期末考试各科平均成绩",
+//           "indicator": [
+//             "语文",
+//             "数学",
+//             "英语",
+//             "物理",
+//             "化学"
+//           ],
+//           "data": [
+//             100,
+//             90,
+//             80,
+//             90,
+//             100
+//           ]
+//         }
+//       ]
+//     }
+//   ]
+// }
+
+initData();
+function initData() {
+  request({
+    url: '/xdjx/xypjgl_xsxypjcx/content_json',
+    data: {
+      team_id: queryForm_Data.value.team_id ? queryForm_Data.value.team_id.split(",") : [],
+      student_no: queryForm_Data.value.student_no
     }
-  ]
-})
+  }).then(res => {
+    const data1 = res.data.content_json;
+    data.value = data1;
 
-const option = {
-  xAxis: {
-    type: 'category',
-    data: data.value.xAxis
-  },
-  yAxis: {
-    type: 'value'
-  },
-  series: data.value.series.map(({ data }) => ({
-    data: data.map(({ total }) => total),
-    type: 'line',
-    smooth: true,
-    label: {
-      show: true
+    if(data.value.series) {
+      initChartData();
+    } else {
+      ElMessage.warning("请先上传数据");
     }
-  })),
-};
+  })
+}
+
 const containerRef = ref()
 let myChart;
 let myChart2;
 
-onMounted(() => {
+function initChartData() {
   const { width, height } = containerRef.value.getBoundingClientRect()
   myChart = echarts.init(canvasRef.value, null, { width, height })
   myChart2 = echarts.init(canvasRef2.value, null, { width: 400, height: 400 })
-  myChart.setOption(option)
 
+  const option = {
+    xAxis: {
+      type: 'category',
+      data: data.value.xAxis
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: data.value.series.map(({ data }) => ({
+      data: data.map(({ total }) => total),
+      type: 'line',
+      smooth: true,
+      label: {
+        show: true
+      }
+    })),
+  };
+  myChart.setOption(option)
+  
   const _data = data.value.series[0].data[0]
   const option2 = {
     title: {
@@ -189,6 +203,12 @@ onMounted(() => {
         data: [
           {
             value: _data.data,
+            label: {
+              show: true,
+              formatter: function (params) {
+                return params.value;
+              }
+            }
           },
         ]
       }
@@ -211,6 +231,12 @@ onMounted(() => {
           data: [
             {
               value: _data.data,
+              label: {
+                show: true,
+                formatter: function (params) {
+                  return params.value;
+                }
+              }
             },
           ]
         }
@@ -219,9 +245,12 @@ onMounted(() => {
     myChart2.setOption(option2)
 
   })
+}
+
+onMounted(() => {
+  
 })
 
-const queryForm_Data = ref({})
 const timestamp = ref(Date.now())
 const handleQueryFormBtn_search = () => {
   data.value.series[0].data.forEach(item => {
@@ -275,14 +304,16 @@ const handleQueryFormBtn_search = () => {
   <div class="card w-full h-full relative flex flex-col">
     <div>
       <el-form inline :model="queryForm_Data">
-        <el-form-item label="班级名称">
-          <remote-cascader-class v-model="queryForm_Data.class_id" clearable />
+        <el-form-item label="学年">
+          <remote-multi-select to="team" v-model="queryForm_Data.team_id" class="multi"></remote-multi-select>
+          <!-- <remote-cascader-class v-model="queryForm_Data.class_id" clearable /> -->
         </el-form-item>
-        <el-form-item label="学生姓名">
-          <el-input v-model="queryForm_Data.xskp_xsxm" clearable />
+        <el-form-item label="学号">
+          <remote-select url="/xddy/dygl_xsxjk/index" :fields="['xdx_xsxh', 'xdx_xsxm']" v-model="queryForm_Data.student_no"></remote-select>
+          <!-- <el-input v-model="queryForm_Data.student_no" clearable /> -->
         </el-form-item>
         <el-form-item>
-          <el-button @click="handleQueryFormBtn_search" type="primary">搜索</el-button>
+          <el-button @click="initData" type="primary">搜索</el-button>
         </el-form-item>
       </el-form>
       <div class="divider"></div>
@@ -294,3 +325,9 @@ const handleQueryFormBtn_search = () => {
 
   </div>
 </template>
+
+<style lang="scss" scoped>
+:deep(.multi) {
+  width: 250px;
+}
+</style>