From 8d130384903588cea07f12977ece674b03259945 Mon Sep 17 00:00:00 2001
From: lixg <lixg@dongwu-inc.com>
Date: Wed, 14 Dec 2022 22:07:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/roadmap/PathDetails.vue | 398 ++++++++++++++++--------------
 1 file changed, 213 insertions(+), 185 deletions(-)

diff --git a/src/views/roadmap/PathDetails.vue b/src/views/roadmap/PathDetails.vue
index f7274e8..ec85ac8 100644
--- a/src/views/roadmap/PathDetails.vue
+++ b/src/views/roadmap/PathDetails.vue
@@ -14,36 +14,44 @@
         <div v-for="(i, k) in data.chapterProcessList" :key="k">
           <div class="title">
             <div class="titleL">{{ i.chapterName }}</div>
-            <div
-                class="titleR"
-                :style="{ display: 'flex' }"
-            >
-              <img src="../../assets/image/pathdetails/circle.png"/>
+            <div class="titleR" :style="{ display: 'flex' }">
+              <img src="../../assets/image/pathdetails/circle.png" />
               <div class="titleRT">进行中</div>
             </div>
             <div
-                class="titleR"
-                :style="{ display: i.status === 2 ? 'flex' : 'none' }"
+              class="titleR"
+              :style="{ display: i.status === 2 ? 'flex' : 'none' }"
             >
-              <img src="../../assets/image/pathdetails/circle2.png"/>
+              <img src="../../assets/image/pathdetails/circle2.png" />
               <div class="titleRT" style="color: rgba(102, 102, 102, 1)">
                 未开始
               </div>
             </div>
           </div>
           <div
-              class="course"
-              v-for="(value, index) in i.taskProcessList"
-              :key="index"
+            class="course"
+            v-for="(value, index) in i.taskProcessList"
+            :key="index"
           >
             <div>
               <div class="coursename">{{ value.name }}</div>
               <div class="coursetag">
-                <div class="tag1" style="margin-right: 11px; margin-top: 16px" v-if="value.flag">必修</div>
-                <div class="tag2" style="margin-right: 11px; margin-top: 16px" v-if="!value.flag">选修</div>
-                <div class="tag3" style="margin-right: 11px; margin-top: 16px">{{
-                    types.typeName[value.type] || ''
-                  }}
+                <div
+                  class="tag1"
+                  style="margin-right: 11px; margin-top: 16px"
+                  v-if="value.flag"
+                >
+                  必修
+                </div>
+                <div
+                  class="tag2"
+                  style="margin-right: 11px; margin-top: 16px"
+                  v-if="!value.flag"
+                >
+                  选修
+                </div>
+                <div class="tag3" style="margin-right: 11px; margin-top: 16px">
+                  {{ types.typeName[value.type] || "" }}
                 </div>
 
                 <!--                                <div-->
@@ -56,45 +64,44 @@
                 <!--                                </div>-->
               </div>
               <div
-                  class="progressBox"
-                  :style="{ display: value.status === 1 ? 'block' : 'none' }"
+                class="progressBox"
+                :style="{ display: value.status === 1 ? 'block' : 'none' }"
               >
                 <div>当前进度</div>
                 <div class="progress">
                   <div style="width: 291px">
                     <el-progress
-                        :percentage="value.currentRatio"
-                        :show-text="false"
-                        :stroke-width="8"
-                        :color="
+                      :percentage="value.currentRatio"
+                      :show-text="false"
+                      :stroke-width="8"
+                      :color="
                         {
-                          0:'rgba(238, 112, 108, 1)',
-                          1:'rgba(255, 151, 38, 1)',
-                          2:'rgba(39, 122, 255, 1)',
-                          3:'rgba(59, 94, 251, 1)',
-                          4:'rgba(57, 219, 183, 1)',
-                          5:'rgba(57, 219, 183, 1)'
-                        }[parseInt(value.currentRatio/20)]
+                          0: 'rgba(238, 112, 108, 1)',
+                          1: 'rgba(255, 151, 38, 1)',
+                          2: 'rgba(39, 122, 255, 1)',
+                          3: 'rgba(59, 94, 251, 1)',
+                          4: 'rgba(57, 219, 183, 1)',
+                          5: 'rgba(57, 219, 183, 1)',
+                        }[parseInt(value.currentRatio / 20)]
                       "
                     />
                   </div>
                   <div
-                      style="
+                    style="
                       font-size: 14px;
                       font-weight: 500;
                       color: #277aff;
                       margin-left: 10px;
                     "
-                      :style="{
-                      color:
-                        {
-                          0:'rgba(238, 112, 108, 1)',
-                          1:'rgba(255, 151, 38, 1)',
-                          2:'rgba(39, 122, 255, 1)',
-                          3:'rgba(59, 94, 251, 1)',
-                          4:'rgba(57, 219, 183, 1)',
-                          5:'rgba(57, 219, 183, 1)'
-                        }[parseInt(value.currentRatio/20)]
+                    :style="{
+                      color: {
+                        0: 'rgba(238, 112, 108, 1)',
+                        1: 'rgba(255, 151, 38, 1)',
+                        2: 'rgba(39, 122, 255, 1)',
+                        3: 'rgba(59, 94, 251, 1)',
+                        4: 'rgba(57, 219, 183, 1)',
+                        5: 'rgba(57, 219, 183, 1)',
+                      }[parseInt(value.currentRatio / 20)],
                     }"
                   >
                     {{ value.currentRatio }}%
@@ -102,11 +109,14 @@
                 </div>
               </div>
             </div>
-            <div class="goclass" :style="{background:`${types.path[value.type]?'#2478ff':'#999'}`}"
-                 @click="toFinish(value)">
-              {{
-                types.path[value.type] ? types.toName[value.type] : '未开放'
-              }}
+            <div
+              class="goclass"
+              :style="{
+                background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
+              }"
+              @click="toFinish(value)"
+            >
+              {{ types.path[value.type] ? types.toName[value.type] : "未开放" }}
             </div>
             <!--            <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
             <!--              <div-->
@@ -135,29 +145,29 @@
               <div class="notice">
                 请各位选课的同学提前阅读本课程的
                 “教学大纲与计划”“课程考核要求”与“学习要求”
-                ，并按给定的中学化学教学主题分好小组 <br/>
-                每位同学在网上学习的活动轨迹都会自动被系统记录将作为大家个人线上参与的评价依据；<br/>
+                ，并按给定的中学化学教学主题分好小组 <br />
+                每位同学在网上学习的活动轨迹都会自动被系统记录将作为大家个人线上参与的评价依据；<br />
                 请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”则会影响线上参与的平时成
-                绩；<br/>
+                绩；<br />
               </div>
             </el-tab-pane>
             <el-tab-pane label="共享文档" name="second">
               <div style="padding: 19px 30px 17px 28px">
                 <div
-                    v-for="(value, index) in sharedoc"
-                    :key="index"
-                    style="
+                  v-for="(value, index) in sharedoc"
+                  :key="index"
+                  style="
                     display: flex;
                     align-items: center;
                     margin-bottom: 15px;
                   "
                 >
-                  <img :src="value.img" style="width: 22px; height: 26px"/>
+                  <img :src="value.img" style="width: 22px; height: 26px" />
                   <div class="sharedocname">{{ value.name }}</div>
                   <div class="download">
                     <img
-                        src="../../assets/image/download.png"
-                        style="width: 16px; height: 15px"
+                      src="../../assets/image/download.png"
+                      style="width: 16px; height: 15px"
                     />
                     <div style="margin-left: 7px">下载</div>
                   </div>
@@ -172,23 +182,25 @@
           <div class="info">
             <div class="title">
               <img
-                  style="width: 21px; height: 20px"
-                  src="../../assets/image/pathdetails/info.png"
+                style="width: 21px; height: 20px"
+                src="../../assets/image/pathdetails/info.png"
               />
               <div class="text" style="margin-left: 7px">个人信息</div>
               <div class="box"></div>
             </div>
             <!--            todo #路径详情 个人信息缺少img和介绍-->
             <div
-                class="teacheritem"
-                :style="{'border-bottom': '1px solid rgba(56, 125, 247, 0.2)'}"
+              class="teacheritem"
+              :style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
             >
-              <img class="peopleimg" :src="userAvatar"/>
+              <img class="peopleimg" :src="userAvatar" />
               <div style="margin-left: 17px">
                 <div class="teacherName">
-                  <div style="margin-right: 5px">{{ data.userInfoBo?.userName }}</div>
+                  <div style="margin-right: 5px">
+                    {{ data.userInfoBo?.userName }}
+                  </div>
                   <div v-for="(item, key) in data.userInfoBo?.medal" :key="key">
-                    <img class="teacherMedal" :src="item"/>
+                    <img class="teacherMedal" :src="item" />
                   </div>
                 </div>
                 <div class="introduce">{{ data.userInfoBo?.introduce }}</div>
@@ -198,8 +210,8 @@
           <div class="info" style="padding-top: 20px">
             <div class="title">
               <img
-                  style="width: 18px; height: 17px"
-                  src="../../assets/image/pathdetails/study.png"
+                style="width: 18px; height: 17px"
+                src="../../assets/image/pathdetails/study.png"
               />
               <div class="text" style="margin-left: 9px">学习进度</div>
               <div class="box"></div>
@@ -214,39 +226,49 @@
                 <div class="progress">
                   <div style="width: 291px">
                     <el-progress
-                        :percentage="parseInt(data.currentChapterCnt/data.totalChapterCnt * 100)"
-                        :show-text="false"
-                        :stroke-width="8"
-                        :color="
-                         {
-                          0:'rgba(238, 112, 108, 1)',
-                          1:'rgba(255, 151, 38, 1)',
-                          2:'rgba(39, 122, 255, 1)',
-                          3:'rgba(59, 94, 251, 1)',
-                          4:'rgba(57, 219, 183, 1)',
-                          5:'rgba(57, 219, 183, 1)'
-                        }[parseInt(data.currentChapterCnt/data.totalChapterCnt)]
+                      :percentage="
+                        parseInt(
+                          (data.currentChapterCnt / data.totalChapterCnt) * 100
+                        )
+                      "
+                      :show-text="false"
+                      :stroke-width="8"
+                      :color="
+                        {
+                          0: 'rgba(238, 112, 108, 1)',
+                          1: 'rgba(255, 151, 38, 1)',
+                          2: 'rgba(39, 122, 255, 1)',
+                          3: 'rgba(59, 94, 251, 1)',
+                          4: 'rgba(57, 219, 183, 1)',
+                          5: 'rgba(57, 219, 183, 1)',
+                        }[
+                          parseInt(
+                            data.currentChapterCnt / data.totalChapterCnt
+                          )
+                        ]
                       "
                     />
                   </div>
                   <div
-                      style="
-                      font-size: 14px;
-                      font-weight: 500;
-                      margin-left: 10px;
-                    "
-                      :style="{
+                    style="font-size: 14px; font-weight: 500; margin-left: 10px"
+                    :style="{
                       color: {
-                          0:'rgba(238, 112, 108, 1)',
-                          1:'rgba(255, 151, 38, 1)',
-                          2:'rgba(39, 122, 255, 1)',
-                          3:'rgba(59, 94, 251, 1)',
-                          4:'rgba(57, 219, 183, 1)',
-                          5:'rgba(57, 219, 183, 1)'
-                        }[parseInt(data.currentChapterCnt/data.totalChapterCnt)]
+                        0: 'rgba(238, 112, 108, 1)',
+                        1: 'rgba(255, 151, 38, 1)',
+                        2: 'rgba(39, 122, 255, 1)',
+                        3: 'rgba(59, 94, 251, 1)',
+                        4: 'rgba(57, 219, 183, 1)',
+                        5: 'rgba(57, 219, 183, 1)',
+                      }[
+                        parseInt(data.currentChapterCnt / data.totalChapterCnt)
+                      ],
                     }"
                   >
-                    {{ parseInt(data.currentChapterCnt / data.totalChapterCnt * 100) }}%
+                    {{
+                      parseInt(
+                        (data.currentChapterCnt / data.totalChapterCnt) * 100
+                      )
+                    }}%
                   </div>
                 </div>
               </div>
@@ -257,41 +279,44 @@
                 <div class="progress">
                   <div style="width: 291px">
                     <el-progress
-                        :percentage="parseInt(data.currentReqCnt/data.totalReqCnt * 100)"
-                        :show-text="false"
-                        :stroke-width="8"
-                        :color="
+                      :percentage="
+                        parseInt((data.currentReqCnt / data.totalReqCnt) * 100)
+                      "
+                      :show-text="false"
+                      :stroke-width="8"
+                      :color="
                         {
-                          0:'rgba(238, 112, 108, 1)',
-                          1:'rgba(255, 151, 38, 1)',
-                          2:'rgba(39, 122, 255, 1)',
-                          3:'rgba(59, 94, 251, 1)',
-                          4:'rgba(57, 219, 183, 1)',
-                          5:'rgba(57, 219, 183, 1)'
-                        }[parseInt(data.currentReqCnt/data.totalReqCnt)]
+                          0: 'rgba(238, 112, 108, 1)',
+                          1: 'rgba(255, 151, 38, 1)',
+                          2: 'rgba(39, 122, 255, 1)',
+                          3: 'rgba(59, 94, 251, 1)',
+                          4: 'rgba(57, 219, 183, 1)',
+                          5: 'rgba(57, 219, 183, 1)',
+                        }[parseInt(data.currentReqCnt / data.totalReqCnt)]
                       "
                     />
                   </div>
                   <div
-                      style="
+                    style="
                       font-size: 14px;
                       font-weight: 500;
                       color: #277aff;
                       margin-left: 10px;
                     "
-                      :style="{
-                      color:
-                        {
-                          0:'rgba(238, 112, 108, 1)',
-                          1:'rgba(255, 151, 38, 1)',
-                          2:'rgba(39, 122, 255, 1)',
-                          3:'rgba(59, 94, 251, 1)',
-                          4:'rgba(57, 219, 183, 1)',
-                          5:'rgba(57, 219, 183, 1)'
-                        }[parseInt(data.currentReqCnt/data.totalReqCnt)]
+                    :style="{
+                      color: {
+                        0: 'rgba(238, 112, 108, 1)',
+                        1: 'rgba(255, 151, 38, 1)',
+                        2: 'rgba(39, 122, 255, 1)',
+                        3: 'rgba(59, 94, 251, 1)',
+                        4: 'rgba(57, 219, 183, 1)',
+                        5: 'rgba(57, 219, 183, 1)',
+                      }[parseInt(data.currentReqCnt / data.totalReqCnt)],
                     }"
                   >
-                    {{ parseInt(data.currentReqCnt / data.totalReqCnt * 100) }}%
+                    {{
+                      parseInt((data.currentReqCnt / data.totalReqCnt) * 100)
+                    }}%
                   </div>
                 </div>
               </div>
@@ -306,26 +331,30 @@
 </template>
 
 <script setup>
-import {computed, reactive, ref, watch} from "vue";
-import word from '@/assets/image/file/word.png'
-import ppt from '@/assets/image/file/ppt.png'
-import pdf from '@/assets/image/file/pdf.png'
-import zip from '@/assets/image/file/zip.png'
-import md from '@/assets/image/file/md.png'
-import medal1 from '@/assets/image/medal/medal1.png'
-import medal2 from '@/assets/image/medal/medal2.png'
-import medal3 from '@/assets/image/medal/medal3.png'
-import img from '@/assets/image/uploadimg.png'
-import {boeRequest, useRequest} from "@/api/request";
-import {BASE_URL, ROUTER_PROCESS} from "@/api/api";
-import {useRoute, useRouter} from "vue-router";
-import {ElMessage} from 'element-plus'
-import {useUserInfo} from "@/api/utils";
+import { computed, reactive, ref, watch } from "vue";
+import word from "@/assets/image/file/word.png";
+import ppt from "@/assets/image/file/ppt.png";
+import pdf from "@/assets/image/file/pdf.png";
+import zip from "@/assets/image/file/zip.png";
+import md from "@/assets/image/file/md.png";
+import medal1 from "@/assets/image/medal/medal1.png";
+import medal2 from "@/assets/image/medal/medal2.png";
+import medal3 from "@/assets/image/medal/medal3.png";
+import img from "@/assets/image/uploadimg.png";
+import { boeRequest, useRequest } from "@/api/request";
+import { BASE_URL, ROUTER_PROCESS } from "@/api/api";
+import { useRoute, useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { useUserInfo } from "@/api/utils";
 
-const {query: {routerId}} = useRoute()
-const router = useRouter()
-const {data} = useRequest(ROUTER_PROCESS, {routerId})
-const {avatar: userAvatar} = useUserInfo(computed(() => data.value?.userInfoBo?.userId))
+const {
+  query: { routerId },
+} = useRoute();
+const router = useRouter();
+const { data } = useRequest(ROUTER_PROCESS, { routerId });
+const { avatar: userAvatar } = useUserInfo(
+  computed(() => data.value?.userInfoBo?.userId)
+);
 
 const state = reactive({
   course: [
@@ -502,79 +531,78 @@ const state = reactive({
       name: "王星天（显示事业）",
       introduce: "教师是学生的镜子,学生是老师的影子。",
       peopleimg: img,
-      medal: [
-        medal1,
-        medal2,
-        medal3,
-      ],
+      medal: [medal1, medal2, medal3],
     },
   ],
 });
-const activeName = ref('first')
-const totalprogress = ref(30)
-const compulsoryprogress = ref(10)
+const activeName = ref("first");
+const totalprogress = ref(30);
+const compulsoryprogress = ref(10);
 
 const handleClick = (tab, event) => {
   console.log(tab, event);
 };
-const path = {1: 'path'}
+const path = { 1: "path" };
 
 const types = ref({
   typeName: {
-    1: '在线',
-    2: '面授',
-    3: '案例',
-    4: '作业',
-    5: '考试',
-    6: '直播',
-    7: '外链',
-    8: '讨论',
-    9: '活动',
-    10: '测评',
-    11: '评估',
-    12: '投票',
-    13: '项目',
+    1: "在线",
+    2: "面授",
+    3: "案例",
+    4: "作业",
+    5: "考试",
+    6: "直播",
+    7: "外链",
+    8: "讨论",
+    9: "活动",
+    10: "测评",
+    11: "评估",
+    12: "投票",
+    13: "项目",
   },
   toName: {
-    1: '去上课',
-    2: '去上课',
-    3: '案例',
-    4: '去完成',
-    5: '去完成',
-    6: '去签到',
-    7: '外链',
-    8: '去讨论',
-    9: '去签到',
-    10: '去完成',
-    11: '去完成',
-    12: '去投票',
-    13: '去完成',
+    1: "去上课",
+    2: "去上课",
+    3: "案例",
+    4: "去完成",
+    5: "去完成",
+    6: "去签到",
+    7: "外链",
+    8: "去讨论",
+    9: "去签到",
+    10: "去完成",
+    11: "去完成",
+    12: "去投票",
+    13: "去完成",
   },
   path: {
-    1: '',
-    2: '/faceteach',
-    3: '',
-    4: '/homeworkpage',
-    5: '',
-    6: '/livebroadcast',
-    7: '',
-    8: '/discusspage',
-    9: '/moreactive',
-    10: '/surveydetail',
-    11: '/surveydetail',
-    12: '/ballotpage',
-    13: '去完成'
-  }
-})
+    // 1: `https://u-pre.boe.com/pc/course/studyindex?id=${}`,
+    1: `https://u-pre.boe.com/pc/course/studyindex`,
+    2: "/faceteach",
+    3: "",
+    4: "/homeworkpage",
+    5: "",
+    6: "/livebroadcast",
+    7: "",
+    8: "/discusspage",
+    9: "/moreactive",
+    10: "/surveydetail",
+    11: "/surveydetail",
+    12: "/ballotpage",
+    13: "去完成",
+  },
+});
 
 function toFinish(d) {
   if (!types.value.path[d.type]) {
-    ElMessage.error('暂时未开放')
-    return
+    ElMessage.error("暂时未开放");
+    return;
   }
-  router.push({path: types.value.path[d.type], query: {id: d.routerTaskId, type: 1, courseId: d.courseId}})
+  router.push({
+    path: types.value.path[d.type],
+    query: { id: d.routerTaskId, type: 1, courseId: d.courseId },
+  });
 }
-
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->