From 99aea96baf11516d5601c66b2861bc323591def9 Mon Sep 17 00:00:00 2001
From: yuping <82253452@qq.com>
Date: Fri, 17 Feb 2023 03:44:54 +0800
Subject: [PATCH] -- fix bug

---
 src/api/request.js                 |   2 +-
 src/components/PathDetailImage.vue |  10 +-
 src/views/roadmap/LearnPath.vue    | 216 +++++++++++++----------------
 3 files changed, 105 insertions(+), 123 deletions(-)

diff --git a/src/api/request.js b/src/api/request.js
index 2a5c9fe..f874434 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -30,7 +30,7 @@ export function usePage(_url, param, callback) {
             state.total = r.data.total
             state.current = r.data.current
             state.loading = false
-            callback(r)
+            callback && callback(r)
         })
     }
 
diff --git a/src/components/PathDetailImage.vue b/src/components/PathDetailImage.vue
index b71835f..4e76790 100644
--- a/src/components/PathDetailImage.vue
+++ b/src/components/PathDetailImage.vue
@@ -12,7 +12,7 @@
   </div>
 </template>
 <script setup>
-import {computed, defineProps, ref, watch} from "vue";
+import {computed, defineProps, ref} from "vue";
 import back from '@/assets/image/pathdetails/pathDetailBack.png'
 import nameBack from '@/assets/image/pathdetails/pathDetailImg.png'
 import currentBack from '@/assets/image/pathdetails/pathDetailImgSelect.png'
@@ -29,7 +29,7 @@ const props = defineProps({
 const router = useRouter();
 const visiable = ref(true)
 const imageAttrs = {
-  '路径图背景-1671015331292.png': {
+  '路径图背景': {
     width: 1437,
     height: 594,
     positions: [
@@ -45,7 +45,7 @@ const imageAttrs = {
 
 const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img.includes(e))] || {})
 
-const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.chapterId === props.detail.currentStageId))
+const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.id === props.detail.currentStageId))
 
 function show() {
   visiable.value = true
@@ -58,11 +58,11 @@ function toDetail(i) {
   (import.meta.env.MODE === "development" || import.meta.env.MODE === "test")
       ? router.push({
         path: "/pathdetails",
-        query: {routerId: props.detail.routerId, routerName: props.detail.routerName},
+        query: {routerId: props.detail.id, routerName: props.detail.name},
       })
       : window.open(
           `${window.location.protocol + import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent(
-              `routerId=${props.detail.routerId}&routerName=${props.detail.routerName}`
+              `routerId=${props.detail.id}&routerName=${props.detail.name}`
           )}`
       ,'_top');
 }
diff --git a/src/views/roadmap/LearnPath.vue b/src/views/roadmap/LearnPath.vue
index fff136a..9381269 100644
--- a/src/views/roadmap/LearnPath.vue
+++ b/src/views/roadmap/LearnPath.vue
@@ -6,104 +6,102 @@
           <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"
+                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"
+                style="width: 18px; height: 17px; margin-right: 11px"
+                src="../../assets/image/band.png"
             />
             <div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
           </div>
         </div>
         <div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
-          <!--          <el-popover width="475px" trigger="hover" popper-class="lppopover">-->
-          <!--            <div>-->
-          <!--              <div class="finish">-->
-          <!--                <img-->
-          <!--                    src="../../assets/image/circle.png"-->
-          <!--                    style="width: 20px; height: 20px"-->
-          <!--                />-->
-          <!--                <div class="text">未完成</div>-->
-          <!--                <div class="box"></div>-->
-          <!--              </div>-->
-          <!--              <div-->
-          <!--                  v-for="(value, index) in unCompleteTaskList"-->
-          <!--                  :key="index"-->
-          <!--                  class="tasks"-->
-          <!--                  :style="{-->
-          <!--                  'border-bottom':-->
-          <!--                    index === unCompleteTaskList.length - 1-->
-          <!--                      ? null-->
-          <!--                      : '1px solid rgba(229, 228, 228, 1)',-->
-          <!--                }"-->
-          <!--              >-->
-          <!--                <div style="font-size: 14px; font-weight: 500; color: #677d86">-->
-          <!--                  {{ value.name }}-->
-          <!--                </div>-->
-          <!--                <img-->
-          <!--                    style="width: 20px; height: 20px"-->
-          <!--                    src="../../assets/image/go.png"-->
-          <!--                    @click="toUnTask(chapterId)"-->
-          <!--                />-->
-          <!--              </div>-->
-          <!--            </div>-->
-          <!--            <template #reference>-->
-          <!--              todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情-->
-          <!--              <div class="titleR">进入未完成任务</div>-->
-          <!--            </template>-->
-          <!--          </el-popover>-->
+          <el-popover width="475px" trigger="hover" popper-class="lppopover">
+            <div>
+              <div class="finish">
+                <img
+                    src="../../assets/image/circle.png"
+                    style="width: 20px; height: 20px"
+                />
+                <div class="text">未完成</div>
+                <div class="box"></div>
+              </div>
+              <div
+                  v-for="(value, index) in unCompleteTaskList"
+                  :key="index"
+                  class="tasks"
+                  :style="{
+                            'border-bottom':
+                              index === unCompleteTaskList.length - 1
+                                ? null
+                                : '1px solid rgba(229, 228, 228, 1)',
+                          }"
+              >
+                <div style="font-size: 14px; font-weight: 500; color: #677d86">
+                  {{ value.name }}
+                </div>
+                <img
+                    style="width: 20px; height: 20px"
+                    src="../../assets/image/go.png"
+                    @click="toUnTask(chapterId)"
+                />
+              </div>
+            </div>
+            <template #reference>
+              <div class="titleR">进入未完成任务</div>
+            </template>
+          </el-popover>
         </div>
         <div
-          :style="{ display: showmapdetail ? 'flex' : 'none' }"
-          class="titleR"
-          @click="returnfun"
+            :style="{ display: showmapdetail ? 'flex' : 'none' }"
+            class="titleR"
+            @click="returnfun"
         >
           返回列表
         </div>
       </div>
       <!-- 路径列表-->
       <div
-        class="routerList"
-        v-if="isLoading"
-        style="display: flex; color: #909399"
+          class="routerList"
+          v-if="isLoading"
+          style="display: flex; color: #909399"
       ></div>
       <div
-        v-else
-        :style="{ display: !showmapdetail ? 'flex' : 'none' }"
-        class="head"
+          v-else
+          :style="{ display: !showmapdetail ? 'flex' : 'none' }"
+          class="head"
       >
-        {{ loading.close() }}
         <div style="min-width: 770px; width: 100%">
-          <el-table :data="dates" style="width: 100%" @row-click="gofun">
+          <el-table :data="data" style="width: 100%" @row-click="gofun">
             <el-table-column
-              prop="img"
-              label="缩略图"
-              #default="scope"
-              align="center"
-              width="255"
+                prop="img"
+                label="缩略图"
+                #default="scope"
+                align="center"
+                width="255"
             >
               <img
-                :src="scope.row.picUrl"
-                style="width: 230px; height: 155px"
+                  :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"
+                align="center"
+                prop="introduce"
+                label="路径介绍"
+                #default="scope"
             >
               <el-popover
-                placement="bottom-start"
-                :width="400"
-                title="路径介绍"
-                trigger="hover"
-                :content="scope.row.remark"
+                  placement="bottom-start"
+                  :width="400"
+                  title="路径介绍"
+                  trigger="hover"
+                  :content="scope.row.remark"
               >
                 <template #reference>
                   <div>{{ scope.row.remark }}</div>
@@ -112,104 +110,88 @@
             </el-table-column>
 
             <el-table-column
-              align="center"
-              prop="organizationName"
-              label="归属组织"
+                align="center"
+                prop="organizationName"
+                label="归属组织"
             />
             <el-table-column
-              #default="scope"
-              align="center"
-              :width="150"
-              prop="state"
-              label="状态"
+                #default="scope"
+                align="center"
+                :width="150"
+                prop="state"
+                label="状态"
             >
               <img
-                :src="
-                  scope.row.taskStatus === 1
-                    ? ongoing
-                    : scope.row.taskStatus === 2
-                    ? completed
-                    : scope.row.taskStatus === 0
-                    ? ongoing
-                    : null
-                "
-                style="width: 99px; height: 99px"
+                  :src="{1:ongoing,2:completed,0:ongoing}[scope.row.taskStatus] || nostarted"
+                  style="width: 99px; height: 99px"
               />
             </el-table-column>
           </el-table>
         </div>
       </div>
-      <!--      :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
-      <!-- 路径列表-->
       <!-- 路径详情图 -->
       <div
-        :style="{ display: showmapdetail ? 'flex' : 'none' }"
-        class="mapdetail"
+          :style="{ display: showmapdetail ? 'flex' : 'none' }"
+          class="mapdetail"
       >
         <PathDetailImage
-          img="https://u-pre.boe.com/upload/路径图背景-1671015331292.png"
-          :detail="detail"
+            :img="detail?.picUrl"
+            :detail="detail"
         ></PathDetailImage>
       </div>
-      <!-- 路径详情图 -->
     </div>
   </div>
 </template>
 <script setup>
-import { computed, ref } from "vue";
-// import nostarted from "../../assets/image/nostarted.png";
-// import completed from "../../assets/image/completed.png";
-// import ongoing from "../../assets/image/ongoing.png";
-import { usePage } from "@/api/request";
-import { ROUTER_LIST } from "@/api/api";
-import { useRouter } from "vue-router";
+import {computed, ref, watch} from "vue";
+import nostarted from "../../assets/image/nostarted.png";
+import completed from "@/assets/image/completed.png";
+import ongoing from "@/assets/image/ongoing.png";
+import {usePage} from "@/api/request";
+import {ROUTER_LIST} from "@/api/api";
+import {useRouter} from "vue-router";
 import store from "@/store";
 import PathDetailImage from "@/components/PathDetailImage.vue";
-import { ElLoading } from "element-plus";
+import {ElLoading} from "element-plus";
+import {useRequest} from "@/api/request";
+import {ROUTER_UNCOMPLETE_LIST} from "@/api/api";
 
 const detail = ref();
 const showmapdetail = ref(false);
 const currentStageId = ref();
 const userInfo = computed(() => store.state.userInfo);
 const loading = ref(false);
-const isLoading = ref(true);
 loading.value = ElLoading.service({
   lock: true,
   text: "Loading",
   background: "rgba(0, 0, 0, 0.7)",
 });
 
-const dates = ref([])
 
-const { data } = usePage(ROUTER_LIST, { pageSize: 60 }, (e) => {
-  console.log("我请求成功了吗", e);
-  let cdata = []
-  for(let i=0;i<e.data.length;i++){
-    cdata.push(e.data[i].routerInfo)
-  }
-  dates.value = cdata;
-  isLoading.value = false;
-});
+const {data, loading: isLoading} = usePage(ROUTER_LIST, {pageSize: 60});
+
+watch(data, () => {
+  loading.value.close()
+})
+
 const router = useRouter();
 const returnclick = () => {
   router.back();
 };
 
-// const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
+const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
 
 const returnfun = () => {
   showmapdetail.value = false;
 };
 
-const completed = ref("../../assets/image/completed.png");
-const ongoing = ref("../../assets/image/ongoing.png");
-
 async function gofun(e) {
   detail.value = e;
   showmapdetail.value = true;
 }
 
-function toUnTask() {}
+function toUnTask() {
+}
 </script>
 <style lang="scss">
 #app div:nth-child(1) {