Merge pull request 'baigl' (#191) from baigl into main

Reviewed-on: #191

src/renderer/src/api/classTask/index.js

@@ -1,7 +1,22 @@
 // 查询evaluation列表
 import request from '@/utils/request'
 
-// 查询反馈列表
+// 查询作业列表
+export function listByDeadDate(query) {
+  return request({
+    url: '/education/classwork/listByDeadDate',
+    method: 'get',
+    params: query
+  })
+}
+//多个班级学生作业数据
+export function listClassworkdataByDeadDate(query) {
+  return request({
+    url: '/education/classworkdata/listByDeadDate',
+    method: 'get',
+    params: query
+  })
+}
 
 // 查询classworkdata列表 班级作业列表
 export function listClassworkdata(query) {

src/renderer/src/store/modules/classTask.js

@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia'
+import {  } from '@/api/classTask/index.js'
+import { listClassmain } from '@/api/classManage/index'
+
+const useClassTaskStore = defineStore('classTask',{
+  state: () => ({
+    classListIds: [],
+  }),
+  actions: {
+    listClassmain(params) {
+      // 获取班级列表
+      return new Promise((resolve, reject) => {
+        listClassmain(params)
+          .then((res) => {
+            this.classListIds = res.rows&&res.rows.map((item) => item.id)
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+  },
+  persist: true
+})
+export default useClassTaskStore
+
+

src/renderer/src/utils/date.js

@@ -134,3 +134,19 @@ export function getTimeDate() {
   var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
   return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
 }
+
+/**
+ * 获取明天日期
+ * @returns 
+ */
+export function getTomorrow() {
+  let date = new Date();
+  var year = date.getFullYear()
+  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+  var day = date.getDate()+1 < 10 ? '0' + date.getDate()+1 : date.getDate()+1
+
+  // 获取明天的日期 .getDate() + 1
+  let tomorrow = `${year}-${month}-${day}`;
+
+  return tomorrow;
+}

src/renderer/src/views/classTask/classTask.vue

@@ -5,8 +5,26 @@
 -->
 <template>
   <el-container class="class-reserv-wrap">
-    <div class="class-reserv-tabs">
-      <el-segmented v-model="tabActive" block :options="tabOptions" size="large" />
+    <div style="display: flex; justify-content: space-between;">
+      <div class="class-reserv-tabs">
+        <el-segmented v-model="tabActive" block :options="tabOptions" size="large" />
+      </div>
+      <div v-if="tabActive === '已结束'"> 
+        <div class="demo-date-picker">
+          <div class="block">
+            <el-date-picker
+              v-model="EndDate"
+              type="date"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              placeholder="请选择截止日期"
+              size="large"
+              :disabled-date="disabledDate"
+              @change="changeEndDate"
+            />
+          </div>
+        </div>
+      </div>
     </div>
     <div class="class-reserv-body">
       <task-item
@@ -34,34 +52,30 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted, computed, watch, reactive } from 'vue'
-import { getSelfReserv } from '@/api/classManage'
-import { listClassmain } from '@/api/classManage/index'
-import { listClassworkdata } from '@/api/classTask'
-import { homeworklist } from '@/api/teaching/classwork'
+import { listByDeadDate, listClassworkdataByDeadDate } from '@/api/classTask'
 
 import TaskItem from '@/views/classTask/container/task-item.vue'
 import ItemDialog from '@/views/classTask/container/item-dialog.vue'
 import { useToolState } from '@/store/modules/tool'
-import { sessionStore } from '@/utils/tool'
+import { getCurrentTime, getTomorrow } from '@/utils/date'
 import useUserStore from '@/store/modules/user'
+import useClassTaskStore from "@/store/modules/classTask";
+
+const classTaskStore = useClassTaskStore()
 const userStore = useUserStore().user
 const itemDialogRef = ref(null)
 const tabOptions = ref(['进行中', '已结束'])
 const tabActive = ref('进行中')
 const dataList = ref([])
+const EndDate = ref(getCurrentTime('YYYY-MM-DD'))
 
-// 班级列表
-const classList = ref([])
-const classListIds = ref([])
 // 所有班级作业列表
 const classWorkList = ref([])
 const total = ref(0)
 const loading = ref(false)
 
 const activeDataList = computed(() => {
-  // return classWorkList.value
-  // 当前时间超过[作业任务]截止时间的跳过
-  return classWorkList.value && classWorkList.value.filter((item) => getDateTime > item.deaddate)
+  return classWorkList.value 
 })
 const deleteReserv = (item) => {
   console.log('删除待开发', item)
@@ -70,31 +84,49 @@ const deleteReserv = (item) => {
   // })
 }
 const doneDataList = computed(() => {
-  // return classWorkList.value
-  return classWorkList.value && classWorkList.value.filter((item) => getDateTime < item.deaddate)
+  return classWorkList.value
 })
 
+// 当日之后的日期禁用
+const disabledDate = (time) => {
+  return time.getTime() > Date.now()
+}
+// 截止日期改变
+const changeEndDate = (val) => {
+  console.log('截止日期改变', val)
+  getData() // 加载数据
+}
+
 // 获取数据
 const getData = () => {
-  // 获取班级列表
-  listClassmain({ classuserid: userStore.userId, pageSize: 100, status: 'open' }).then((res) => {
-    var clslist = []
-    for (var i = 0; i < res.rows.length; i++) {
-      if (res.rows[i].classstudentlist != '') {
-        var array = JSON.parse('[' + res.rows[i].classstudentlist + ']')
-        res.rows[i].classstudents = array
-      }
-      classListIds.value.push(res.rows[i].id)
-      clslist.push(res.rows[i])
-    }
-    classList.value = clslist
-
-    // 班级作业数据，包含多个班级
-    homeworklist({
-      classidarray: classListIds.value.join(','),
-      //entpcourseid: '', // 章节id？ 这里要全课程的作业 不分章节？ 根据学段学科查询所有的作业
+  // 1、班级列表
+  getClassList()
+  // 2、班级作业
+  getClassWorkList()
+  // 3、班级学生作业 包含多个班级 
+  getStudentClassWorkData()
+}
+/**
+ * 1、获取班级列表数据
+ * TODO 这里暂时取班级id的list，后续需要在修改
+ */
+const getClassList = () => {
+  if(classTaskStore.classListIds.length==0){
+    // 获取 班级列表ids 这里暂时取班级id的list，后续需要在修改
+    classTaskStore.listClassmain({ classuserid: userStore.userId, pageSize: 100, status: 'open' })
+  }
+}
+/**
+ * 2、获取班级作业
+ */
+const getClassWorkList = () => {
+  if(classTaskStore.classListIds.length>0){
+    // 班级作业数据，包含多个班级 homeworklist
+    listByDeadDate({
+      classidarray: classTaskStore.classListIds.join(','),
       edustage: userStore.edustage,// 学段
       edusubject: userStore.edusubject,//学科
+      deaddate: tabActive.value === '进行中'? getTomorrow() : EndDate.value,// 进行中：明天，已结束：选择的日期
       orderby: 'uniquekey DESC',
       pageSize: 100
     }).then((response) => {
@@ -147,27 +179,126 @@ const getData = () => {
       // 显示分配人数(workdatacount)>0 的
       if (response.rows && response.rows.length > 0) {
         classWorkList.value = response.rows && response.rows.filter((item) => item.workdatacount > 0)
-        // classWorkList.value = response.rows && response.rows.filter((item) => item.workdatacount > 0 && item.uniquekey == '语文-0808-1')
         //TODO： 这里没分页，貌似这个 total 不重要，后续看
         total.value = response.total
       }
       loading.value = false
-
-      // 再查找多个班级里，每个学生的作业数据
-      getStudentClassWorkData()
     })
-  })
-
-  //--------------
-  // getSelfReserv().then((res) => {
-  //   const list = res.data || []
-  //   list.sort((a, b) => {
-  //     if (a.status == '上课中') return -1
-  //     else return 0
-  //   })
-  //   dataList.value = list
-  // })
+  }
 }
+
+/**
+ * 3、获取多个班级学生作业数据
+ */
+const getStudentClassWorkData = () => {
+  if(classTaskStore.classListIds.length>0){
+    listClassworkdataByDeadDate({
+      classids: classTaskStore.classListIds.join(','),
+      edustage: userStore.edustage,// 学段
+      edusubject: userStore.edusubject,//学科
+      deaddate: tabActive.value === '进行中'? getTomorrow() : EndDate.value,// 进行中：明天，已结束：选择的日期
+      orderby: "uniquekey DESC",
+      pageSize: 1000
+    }).then((res) => {
+      for (var t = 0; t < classWorkList.value.length; t++) {
+        for (var i = 0; i < res.rows.length; i++) {
+          if (res.rows[i].classworkid == classWorkList.value[t].id && res.rows[i].resultcount > 0) {
+            console.log('==================')
+            // 有几个学生完成/正在完成学习任务
+            // 至少resultcount不是0
+            classWorkList.value[t].workdatafeedbackcount++
+
+            // 在参与学习任务的人中，汇总计算用时
+            classWorkList.value[t].feedtimelength += parseInt(res.rows[i].finishtimelength)
+
+            // 计算得分率
+            if (
+              res.rows[i].classworkevallist != '' &&
+              res.rows[i].classworkevallist != null &&
+              res.rows[i].classworkevallist != 'null'
+            ) {
+              let replacedString = res.rows[i].classworkevallist.replace(/""/g, '"')
+              // 将标签中双引号改为转义, 测试数据: "{\"id\":172907, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":358520, \"feedcontent\":\"④①⑤③②\", \"score\":4, \"rightanswer\":\"④①⑤③②\"},{\"id\":172908, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":358521, \"feedcontent\":\"气壮山威，鲲鹏展翅楚云飞\", \"score\":4, \"rightanswer\":\"志远天高，春风杨柳麓山青\"},{\"id\":172909, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":363096, \"feedcontent\":\"《红烛》化用“蜡矩”这一古典意象，赋予它新的含义，赞美了红烛以“蜡炬成灰”来点亮世界的奉献精神。\", \"score\":4, \"rightanswer\":\"《立在地球边上放号》中，全诗采用间接抒情的方式，描绘了太平洋的浪潮，吟唱了一曲惊心动魄的力的颂歌，意在赞美摧毁旧世界、创造新生活的“五四”精神。\"},{\"id\":172910, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":363098, \"feedcontent\":\"毛泽东重游橘子洲，面对如画的秋色和大好的革命形势，回忆过去战斗的岁月，不禁心潮起伏，<bdo class=\"mathjye-underpoint2\">浮想联翩</bdo>。\", \"score\":4, \"rightanswer\":\"毛泽东重游橘子洲，面对如画的秋色和大好的革命形势，回忆过去战斗的岁月，不禁心潮起伏，<bdo class=\"mathjye-underpoint2\">浮想联翩</bdo>。\"},{\"id\":172911, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":363100, \"feedcontent\":\"毛泽东重游橘子洲，面对如画的秋色和大好的革命形势，回忆过去战斗的岁月，不禁心潮起伏，<bdo class=\"mathjye-underpoint2\">浮想联翩</bdo>。\", \"score\":4, \"rightanswer\":\"毛泽东重游橘子洲，面对如画的秋色和大好的革命形势，回忆过去战斗的岁月，不禁心潮起伏，<bdo class=\"mathjye-underpoint2\">浮想联翩</bdo>。\"}"
+              replacedString = escapeHtmlQuotes(res.rows[i].classworkevallist).replace(
+                /"(\[.*\])"/g,
+                '$1'
+              )
+              replacedString = escapeHtmlQuotes(res.rows[i].classworkevallist)
+              var evalarray
+              try {
+                evalarray = JSON.parse('[' + res.rows[i].classworkevallist + ']')
+              } catch {
+                evalarray = JSON.parse('[' + replacedString + ']')
+              }
+
+              for (var e = 0; e < evalarray.length; e++) {
+                if (res.rows[i].worktype == '常规作业') {
+                  evalarray[e].feedcontent = escapeHtmlQuotes(evalarray[e].feedcontent).replace(
+                    /"(\[.*\])"/g,
+                    '$1'
+                  )
+                  evalarray[e].feedcontent = escapeHtmlQuotes(evalarray[e].feedcontent)
+                }
+                if (evalarray[e].feedcontent == evalarray[e].rightanswer) {
+                  // 正确，得分
+                  classWorkList.value[t].rightAnswerCount++
+                }
+              }
+            }
+          }
+          // 当前这个学习任务，共推送给了几个学生，workdatacount
+          if (res.rows[i].classworkid == classWorkList.value[t].id) {
+            classWorkList.value[t].workdatalist.push(res.rows[i])
+          }
+        }
+        // 计算完成进度     workdatacount人数要大于0
+        if (
+          classWorkList.value[t].workdataresultcount > 0 &&
+          classWorkList.value[t].workdatacount > 0
+        ) {
+          classWorkList.value[t].finishpercent = parseInt(
+            (classWorkList.value[t].workdataresultcount / classWorkList.value[t].workdatacount) * 100
+          )
+        } else {
+          classWorkList.value[t].finishpercent = 0
+        }
+
+        // 以下四个参数，都要计算
+        // 2024-04-12，酉阳，by jackyshen
+
+        // 计算参与学习任务的平均用时
+        if (classWorkList.value[t].workdatafeedbackcount > 0) {
+          classWorkList.value[t].averagetime = (classWorkList.value[t].feedtimelength / classWorkList.value[t].workdatafeedbackcount).toFixed(0)
+        } else {
+          classWorkList.value[t].averagetime = 0
+        }
+
+        // 计算批阅异常，需要获取每个题目的类型，找出主观题
+        // 暂缓
+
+        // 计算平均得分率： 正确题数/（题目总数*学生人数）*100
+        if (
+          classWorkList.value[t].entpcourseworklistarray &&
+          classWorkList.value[t].entpcourseworklistarray.length > 0
+        ) {
+          var dd =
+            (classWorkList.value[t].rightAnswerCount /
+              (classWorkList.value[t].entpcourseworklistarray.length *
+                classWorkList.value[t].workdatacount)) *
+            100
+          classWorkList.value[t].scoingRate = dd.toFixed(0) + '%'
+        } else {
+          classWorkList.value[t].scoingRate = '0%'
+        }
+        // 设定典型作答，需要获取每个题目的类型，找出主观题
+        // 暂缓
+      }
+    })
+  }
+}
+
+
+
 const toolStore = useToolState()
 
 // 将标签中的双引号增加转义
@@ -211,28 +342,17 @@ onUnmounted(() => {
   clearInterval(pollingST.value)
 })
 
-const getDateTime = () => {
-  //获取当前时间
-  const now = new Date()
-  const year = now.getFullYear()
-  const month = String(now.getMonth() + 1).padStart(2, '0')
-  const day = String(now.getDate()).padStart(2, '0')
-  const hh = String(now.getHours()).padStart(2, '0')
-  const mm = String(now.getMinutes()).padStart(2, '0')
-  return `${year}-${month}-${day} ${hh}:${mm}`
-}
-
 // [作业反馈] - 实际查询逻辑
 const getStudentVisible = async () => {
-  if (classListIds.value.length <= 0) {
+  if (classTaskStore.classListIds.length <= 0) {
     return
   }
   // 班级作业数据，多个班级 
-  const response = await homeworklist({
-    classidarray: classListIds.value.join(','),
-    //entpcourseid: '', // 章节id？ 这里要全课程的作业 不分章节？ 根据学段学科查询所有的作业
+  const response = await listByDeadDate({
+    classidarray: classTaskStore.classListIds.join(','),
     edustage: userStore.edustage,// 学段
     edusubject: userStore.edusubject,//学科
+    deaddate: tabActive.value === '进行中'? getTomorrow() : EndDate.value,// 进行中：明天，已结束：选择的日期
     orderby: 'uniquekey DESC',
     pageSize: 100
   })
@@ -272,123 +392,20 @@ const getStudentVisible = async () => {
   return 1
 }
 
-// 获取多个班级学生作业数据
-const getStudentClassWorkData = () => {
-  // 再查找多个班级里，每个学生的作业数据
-  listClassworkdata({
-    classids: classListIds.value.join(','),
-    //entpcourseid: '', // 章节id？ 这里要全课程的作业 不分章节？ 根据学段学科查询所有的作业
-    edustage: userStore.edustage,// 学段
-    edusubject: userStore.edusubject,//学科
-    orderby: "deaddate DESC",
-    pageSize: 1000
-  }).then((res) => {
-    for (var t = 0; t < classWorkList.value.length; t++) {
-      for (var i = 0; i < res.rows.length; i++) {
-        //if (res.rows[i].uniquekey == classWorkList.value[t].uniquekey) {
-        if (res.rows[i].classworkid == classWorkList.value[t].id && res.rows[i].resultcount > 0) {
-          console.log('==================')
-          // 有几个学生完成/正在完成学习任务
-          // 至少resultcount不是0
-          classWorkList.value[t].workdatafeedbackcount++
 
-          // 在参与学习任务的人中，汇总计算用时
-          classWorkList.value[t].feedtimelength += parseInt(res.rows[i].finishtimelength)
-
-          // 计算得分率
-          if (
-            res.rows[i].classworkevallist != '' &&
-            res.rows[i].classworkevallist != null &&
-            res.rows[i].classworkevallist != 'null'
-          ) {
-            let replacedString = res.rows[i].classworkevallist.replace(/""/g, '"')
-            // 将标签中双引号改为转义, 测试数据: "{\"id\":172907, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":358520, \"feedcontent\":\"④①⑤③②\", \"score\":4, \"rightanswer\":\"④①⑤③②\"},{\"id\":172908, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":358521, \"feedcontent\":\"气壮山威，鲲鹏展翅楚云飞\", \"score\":4, \"rightanswer\":\"志远天高，春风杨柳麓山青\"},{\"id\":172909, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":363096, \"feedcontent\":\"《红烛》化用“蜡矩”这一古典意象，赋予它新的含义，赞美了红烛以“蜡炬成灰”来点亮世界的奉献精神。\", \"score\":4, \"rightanswer\":\"《立在地球边上放号》中，全诗采用间接抒情的方式，描绘了太平洋的浪潮，吟唱了一曲惊心动魄的力的颂歌，意在赞美摧毁旧世界、创造新生活的“五四”精神。\"},{\"id\":172910, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":363098, \"feedcontent\":\"毛泽东重游橘子洲，面对如画的秋色和大好的革命形势，回忆过去战斗的岁月，不禁心潮起伏，<bdo class=\"mathjye-underpoint2\">浮想联翩</bdo>。\", \"score\":4, \"rightanswer\":\"毛泽东重游橘子洲，面对如画的秋色和大好的革命形势，回忆过去战斗的岁月，不禁心潮起伏，<bdo class=\"mathjye-underpoint2\">浮想联翩</bdo>。\"},{\"id\":172911, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":363100, \"feedcontent\":\"毛泽东重游橘子洲，面对如画的秋色和大好的革命形势，回忆过去战斗的岁月，不禁心潮起伏，<bdo class=\"mathjye-underpoint2\">浮想联翩</bdo>。\", \"score\":4, \"rightanswer\":\"毛泽东重游橘子洲，面对如画的秋色和大好的革命形势，回忆过去战斗的岁月，不禁心潮起伏，<bdo class=\"mathjye-underpoint2\">浮想联翩</bdo>。\"}"
-            replacedString = escapeHtmlQuotes(res.rows[i].classworkevallist).replace(
-              /"(\[.*\])"/g,
-              '$1'
-            )
-            replacedString = escapeHtmlQuotes(res.rows[i].classworkevallist)
-            var evalarray
-            try {
-              evalarray = JSON.parse('[' + res.rows[i].classworkevallist + ']')
-            } catch {
-              evalarray = JSON.parse('[' + replacedString + ']')
-            }
-
-            for (var e = 0; e < evalarray.length; e++) {
-              if (res.rows[i].worktype == '常规作业') {
-                evalarray[e].feedcontent = escapeHtmlQuotes(evalarray[e].feedcontent).replace(
-                  /"(\[.*\])"/g,
-                  '$1'
-                )
-                evalarray[e].feedcontent = escapeHtmlQuotes(evalarray[e].feedcontent)
-              }
-              if (evalarray[e].feedcontent == evalarray[e].rightanswer) {
-                // 正确，得分
-                classWorkList.value[t].rightAnswerCount++
-              }
-            }
-          }
-        }
-        // 当前这个学习任务，共推送给了几个学生，workdatacount
-        if (res.rows[i].classworkid == classWorkList.value[t].id) {
-          classWorkList.value[t].workdatalist.push(res.rows[i])
-        }
-      }
-      // 计算完成进度     workdatacount人数要大于0
-      if (
-        classWorkList.value[t].workdataresultcount > 0 &&
-        classWorkList.value[t].workdatacount > 0
-      ) {
-        classWorkList.value[t].finishpercent = parseInt(
-          (classWorkList.value[t].workdataresultcount / classWorkList.value[t].workdatacount) * 100
-        )
-      } else {
-        classWorkList.value[t].finishpercent = 0
-      }
-
-      // 以下四个参数，都要计算
-      // 2024-04-12，酉阳，by jackyshen
-
-      // 计算参与学习任务的平均用时
-      if (classWorkList.value[t].workdatafeedbackcount > 0) {
-        classWorkList.value[t].averagetime = (classWorkList.value[t].feedtimelength / classWorkList.value[t].workdatafeedbackcount).toFixed(0)
-      } else {
-        classWorkList.value[t].averagetime = 0
-      }
-
-      // 计算批阅异常，需要获取每个题目的类型，找出主观题
-      // 暂缓
-
-      // 计算平均得分率： 正确题数/（题目总数*学生人数）*100
-      if (
-        classWorkList.value[t].entpcourseworklistarray &&
-        classWorkList.value[t].entpcourseworklistarray.length > 0
-      ) {
-        var dd =
-          (classWorkList.value[t].rightAnswerCount /
-            (classWorkList.value[t].entpcourseworklistarray.length *
-              classWorkList.value[t].workdatacount)) *
-          100
-        classWorkList.value[t].scoingRate = dd.toFixed(0) + '%'
-      } else {
-        classWorkList.value[t].scoingRate = '0%'
-      }
-      // 设定典型作答，需要获取每个题目的类型，找出主观题
-      // 暂缓
-    }
-  })
-}
 
 watch(
   () => [dataList, toolStore.isToolWin],
   () => {
     console.log('====', toolStore)
-    setTimeout(() => {
-      getData() // 加载数据
-    }, 300)
   }
 )
+watch(tabActive, (newVal,oldVal)=>{
+  console.log('newVal',newVal);
+  setTimeout(() => {
+    getData() // 加载数据
+  }, 300)
+})
 </script>
 
 <style scoped lang="scss">

src/renderer/src/views/classTask/container/item-dialog-score.vue

@@ -325,13 +325,14 @@
                 <div style="display: flex; margin: 10px auto">
                   <span style="display: flex; align-items: center">
                     <span v-if="dialogProps.studentObj.worktype == '习题训练'">
-                      得分：<span style="margin: 0; color: red">{{
+                      <span>得分： </span>
+                      <span style="margin: 0; color: red">{{
                         classWorkFormScore.teacherRating.reduce((a, b) => a + b.score, 0).toFixed(2)
-                      }}</span
-                      >分
+                      }}</span>
+                      <span>分</span>
                     </span>
                     <span v-else>
-                      得分：
+                      <span>得分： </span>
                       <span v-if="classWorkFormScore.teacherRating.length > 0">
                         <el-input-number
                           v-model="classWorkFormScore.teacherRating[0].score"
@@ -344,7 +345,7 @@
                           @change="handleChange"
                         ></el-input-number>
                       </span>
-                      分
+                      <span>分</span>
                     </span>
                   </span>
                   <div class="score-container">