-- 路径图详情修改

2025-12-11 03:46:48 +08:00 · 2022-12-22 12:45:39 +08:00
parent 24641add71
commit 393f7ddcdd
2 changed files with 366 additions and 367 deletions
--- a/src/views/roadmap/LearnPath.vue
+++ b/src/views/roadmap/LearnPath.vue
@@ -5,11 +5,11 @@
        <div class="titleL">
          <div @click="returnfun" class="text">学习路径图</div>
          <div class="info" style="margin-right: 14px" v-if="userInfo.jobName">
-						<img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png" />
+            <img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png"/>
            <div style="margin-top: 1px">{{ userInfo.jobName }}</div>
          </div>
          <div class="info" v-if="userInfo.bandDesc">
-						<img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png" />
+            <img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png"/>
            <div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
          </div>
        </div>
@@ -60,9 +60,9 @@
        <div style="min-width: 770px; width: 100%">
          <el-table :data="data" style="width: 100%" @row-click="gofun">
            <el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
-							<img :src="scope.row.picUrl" style="width: 230px; height: 155px" />
+              <img :src="scope.row.picUrl" style="width: 230px; height: 155px"/>
            </el-table-column>
-						<el-table-column align="center" prop="name" label="路径名称" />
+            <el-table-column align="center" prop="name" label="路径名称"/>
            <el-table-column align="center" prop="introduce" label="路径介绍" #default="scope">
              <el-popover placement="top-start" title="路径介绍" trigger="hover" :content="scope.row.remark">
                <template #reference>
@@ -71,7 +71,7 @@
              </el-popover>
            </el-table-column>

-						<el-table-column align="center" prop="organizationName" label="归属组织" />
+            <el-table-column align="center" prop="organizationName" label="归属组织"/>
            <el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
              <img :src="
 								scope.row.status === 0
@@ -81,7 +81,7 @@
 										: scope.row.status === -1
 											? nostarted
 											: null
-							" style="width: 99px; height: 99px" />
+							" style="width: 99px; height: 99px"/>
            </el-table-column>
          </el-table>
        </div>
@@ -92,7 +92,7 @@
      <!-- 路径详情图 -->
      <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
        <div v-for="(item, i) in detail?.rows" :key="i">
-					<img :src="useImage(`222_0${i + 2}.png`)" />
+          <img :src="useImage(`222_0${i + 2}.png`)"/>
        </div>
        <!--        <div class="modal"-->
        <!--             style="width: calc(100% - 168px); height: 525px;background-image: url('../../src/assets/image/mapdetail.png');background-size: 100%;background-repeat: no-repeat;">-->
@@ -100,27 +100,40 @@
      </div>
      <!-- 路径详情图 -->
    </div>
+<!--    <svg width="100%" height="600" xmlns="http://www.w3.org/2000/svg" style="padding:40px">-->
+<!--      <defs>-->
+<!--        <marker id="arrow" markerHeight="13" markerWidth="13">-->
+<!--          <path d="M2,2 L2,10 L10,6 L2,2" stroke="none" fill="#409eff"></path>-->
+<!--        </marker>-->
+<!--      </defs>-->
+<!--      <path d="M105 570 C1000 600 -60 505 890 270" stroke-width="3" stroke="#409eff" fill="none" stroke-linecap="round" stroke-dasharray=".1 5" marker-mid="url(#arrow)" marker-start="url(#arrow)" marker-end="url(#arrow)"></path>-->
+<!--      <text x="50" y="550">初级产品经理</text>-->
+<!--      <circle cx="90" cy="570" r="10" fill="#fff" stroke-width="5" stroke="#22a000"></circle>-->
+<!--      <text x="450" y="400">中级产品经理</text>-->
+<!--      <circle cx="490" cy="420" r="10" fill="#fff" stroke-width="5" stroke="#22a000"></circle>-->
+<!--      <text x="850" y="250">高级产品经理</text>-->
+<!--      <circle cx="890" cy="270" r="10" fill="#fff" stroke-width="5" stroke="#22a000"></circle>-->
+<!--    </svg>-->
  </div>
 </template>
 <script setup>
-import { reactive, toRefs, ref, onMounted, computed } from "vue";
+import {reactive, toRefs, ref, onMounted, computed} from "vue";
 import nostarted from "../../assets/image/nostarted.png";
 import completed from "../../assets/image/completed.png";
 import ongoing from "../../assets/image/ongoing.png";
-import { boeRequest, request, usePage, useRequest } from "@/api/request";
+import {boeRequest, request, usePage, useRequest} from "@/api/request";
 import {
  ROUTER_CHAPTER_LIST,
  ROUTER_LIST,
  ROUTER_UNCOMPLETE_LIST,
 } from "@/api/api";
-import { useImage } from "@/api/utils";
-import { useRouter } from "vue-router";
+import {useImage} from "@/api/utils";
+import {useRouter} from "vue-router";
 import store from "@/store";

 const detail = ref();
 const userInfo = computed(() => store.state.userInfo);
-const { data } = usePage(ROUTER_LIST, { pageSize: 60 });
-console.log("datadata", data);
+const {data} = usePage(ROUTER_LIST, {pageSize: 60});
 const router = useRouter();
 const returnclick = () => {
  router.back();
@@ -131,37 +144,40 @@ const returnclick = () => {
 const state = reactive({
  showmapdetail: false,
 });
-const { showmapdetail } = toRefs(state);
+const {showmapdetail} = toRefs(state);

 const returnfun = () => {
  state.showmapdetail = false;
 };

-async function gofun({ routerId, name: routerName }) {
+async function gofun({routerId, name: routerName}) {
  // console.log(routerId)
  // const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}})
  // detail.value = data.data
  // state.showmapdetail = true;
  // router.push({path: "/pathdetails", query: {routerId}});
-	import.meta.env.MODE === "development"
-		? router.push({
-			path: "/pathdetails",
-			query: { routerId, routerName },
-		})
-		: window.open(
-			`http://u-pre.boe.com/pc/forward?to=/fe-student/pathdetails&params=${encodeURIComponent(
-				`routerId=${routerId}&routerName=${routerName}`
-			)}`
-		);
-}
-function toUnTask() { }
-</script>
-<style lang="scss">
-#app div:nth-child(1) {
-	background: rgba(0, 0, 0, 0) !important;
+  // import.meta.env.MODE === "development"
+  //     ? router.push({
+  //       path: "/pathdetails",
+  //       query: {routerId, routerName},
+  //     })
+  //     : window.open(
+  //         `http://u-pre.boe.com/pc/forward?to=/fe-student/pathdetails&params=${encodeURIComponent(
+  //             `routerId=${routerId}&routerName=${routerName}`
+  //         )}`
+  //     );
 }

-.modal {}
+function toUnTask() {
+}
+</script>
+<style lang="scss">
+//#app div:nth-child(1) {
+//	background: rgba(0, 0, 0, 0) !important;
+//}
+
+.modal {
+}

 .modal:after {
  content: "";
--- a/src/views/roadmap/PathDetails.vue
+++ b/src/views/roadmap/PathDetails.vue
@@ -11,26 +11,20 @@
    <!-- 详细信息 -->
    <div class="detailinfo">
      <div class="detailL">
-        <div v-for="(i, k) in data.chapterProcessList" :key="k">
+        <div>
          <div class="title">
-            <div class="titleL">{{ i.chapterName }}</div>
+            <div class="titleL">{{ data.currentStageName }}</div>
            <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' }"
-            >
-              <img src="../../assets/image/pathdetails/circle2.png" />
-              <div class="titleRT" style="color: rgba(102, 102, 102, 1)">
-                未开始
+              <img
+                  :src="data.currentChapterCnt?circle:circle2"/>
+              <div class="titleRT" :style="{color:data.currentChapterCnt?'':'rgba(102, 102, 102, 1)'}">
+                {{ data.currentChapterCnt ? '进行中' : '未开始' }}
              </div>
            </div>
          </div>
          <div
              class="course"
-            v-for="(value, index) in i.taskProcessList.filter(
+              v-for="(value, index) in data.taskBoList?.filter(
              (e) => !whiteTypes(e.type)
            )"
              :key="index"
@@ -116,7 +110,7 @@
                :style="{
                background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
              }"
-              @click="toFinish(value, i.chapterName, i.chapterId)"
+                @click="toFinish(value)"
            >
              {{
                value.status === 1
@@ -197,7 +191,7 @@
                class="teacheritem"
                :style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
            >
-              <img class="peopleimg" :src="`/upload${userInfo.avatar}`" />
+              <img class="peopleimg" :src="`/upload${userInfo.avatar}`"/>
              <div style="margin-left: 17px">
                <div class="teacherName">
                  <div style="margin-right: 5px">
@@ -231,7 +225,7 @@
                <div class="progress">
                  <div style="width: 291px">
                    <el-progress
-                      :percentage="parseInt(data.totalProgress * 100)"
+                        :percentage="parseInt(data.currentChapterCnt/data.totalChapterCnt * 100)"
                        :show-text="false"
                        :stroke-width="8"
                        :color="
@@ -242,7 +236,7 @@
                          3: 'rgba(59, 94, 251, 1)',
                          4: 'rgba(57, 219, 183, 1)',
                          5: 'rgba(57, 219, 183, 1)',
-                        }[(parseInt(data.totalProgress) * 100) / 20]
+                        }[(parseInt(data.currentChapterCnt/data.totalChapterCnt)* 100) / 20]
                      "
                    />
                  </div>
@@ -256,10 +250,10 @@
                        3: 'rgba(59, 94, 251, 1)',
                        4: 'rgba(57, 219, 183, 1)',
                        5: 'rgba(57, 219, 183, 1)',
-                      }[parseInt((data.totalProgress * 100) / 20)],
+                      }[parseInt((data.currentChapterCnt/data.totalChapterCnt * 100) / 20)],
                    }"
                  >
-                    {{ parseInt(data.totalProgress * 100) }}%
+                    {{ parseInt(data.currentChapterCnt/data.totalChapterCnt * 100) }}%
                  </div>
                </div>
              </div>
@@ -270,7 +264,7 @@
                <div class="progress">
                  <div style="width: 291px">
                    <el-progress
-                      :percentage="parseInt(data.compulsoryProgress * 100)"
+                        :percentage="parseInt(data.currentReqCnt/data.totalReqCnt * 100)"
                        :show-text="false"
                        :stroke-width="8"
                        :color="
@@ -281,7 +275,7 @@
                          3: 'rgba(59, 94, 251, 1)',
                          4: 'rgba(57, 219, 183, 1)',
                          5: 'rgba(57, 219, 183, 1)',
-                        }[parseInt((data.compulsoryProgress * 100) / 20)]
+                        }[parseInt((data.currentReqCnt/data.totalReqCnt * 100) / 20)]
                      "
                    />
                  </div>
@@ -300,10 +294,10 @@
                        3: 'rgba(59, 94, 251, 1)',
                        4: 'rgba(57, 219, 183, 1)',
                        5: 'rgba(57, 219, 183, 1)',
-                      }[parseInt((data.compulsoryProgress * 100) / 20)],
+                      }[parseInt((data.currentReqCnt/data.totalReqCnt * 100) / 20)],
                    }"
                  >
-                    {{ parseInt(data.compulsoryProgress * 100) }}%
+                    {{ parseInt(data.currentReqCnt/data.totalReqCnt * 100) }}%
                  </div>
                </div>
              </div>
@@ -318,40 +312,31 @@
 </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, request } from "@/api/request";
-import { ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD } 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 circle from '../../assets/image/pathdetails/circle.png';
+import circle2 from '../../assets/image/pathdetails/circle2.png';
+import {boeRequest, useRequest, request} from "@/api/request";
+import {ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD} from "@/api/api";
+import {useRoute, useRouter} from "vue-router";
+import {ElMessage} from "element-plus";
 import store from "@/store";

 const {
-  query: { routerId, routerName },
+  query: {routerId, routerName},
 } = useRoute();
 const router = useRouter();
 const returnclick = () => {
  router.back();
 };
-const { data } = useRequest(ROUTER_PROCESS, { routerId });
-console.log("data", data);
+const {data} = useRequest(ROUTER_PROCESS, {routerId});
 const userInfo = computed(() => store.state.userInfo);
-console.log("userInfo", userInfo);
+
 const activeName = ref("first");

 const handleClick = (tab, event) => {
  console.log(tab, event);
 };
-const path = { 1: "path" };
+const path = {1: "path"};

 const types = ref({
  typeName: {
@@ -391,13 +376,13 @@ const types = ref({
    4: "/homeworkpage",
    5: import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
    6: "/livebroadcast",
-    7: ({ courseId }) =>
-      request(LINK_DETAILS(courseId), {}).then(({ data: { linkAddress } }) =>
+    7: ({courseId}) =>
+        request(LINK_DETAILS(courseId), {}).then(({data: {linkAddress}}) =>
            window.open(linkAddress)
        ), //外联
    8: "/discusspage",
    9: "/moreactive",
-    10: ({ evaType, targetId }) =>
+    10: ({evaType, targetId}) =>
        window.open(
            (evaType == 0
                ? import.meta.env.VITE_BOE_TEST_DETAIL_URL
@@ -409,23 +394,21 @@ const types = ref({
  },
 });

-function toFinish(d, sName, chapterId) {
+function toFinish(d) {
  if (!types.value.path[d.type]) {
    ElMessage.error("暂时未开放");
    return;
  }
-  if (d.type == 3 || d.type == 7) {
+  if (d.type === 3 || d.type === 7) {
    request(STUDY_RECORD, {
      studentId: data.value.userInfoBo.userId,
      targetId: data.value.routerId,
      logo: 1,
-      stageOrChapterId: chapterId,
+      stageOrChapterId: data.value.currentStageId,
      taskId: d.routerTaskId,
    });
  }
  if (typeof types.value.path[d.type] === "string") {
-    console.log("dddddd", d);
-
    types.value.path[d.type] &&
    types.value.path[d.type].startsWith("http") &&
    window.open(types.value.path[d.type] + d.targetId);
@@ -438,7 +421,7 @@ function toFinish(d, sName, chapterId) {
        type: 1,
        courseId: d.courseId,
        pName: data.value.name,
-          sName,
+        sName:data.currentStageName,
      },
    });
  } else if (typeof types.value.path[d.type] === "function") {