From 48f2b15049a32fa6bc2702d807f6c1f94053e0ee Mon Sep 17 00:00:00 2001
From: lixg <lixg@dongwu-inc.com>
Date: Fri, 20 Jan 2023 11:13:14 +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/LearnPath.vue | 134 ++++++++++++++++++++++----------
 1 file changed, 93 insertions(+), 41 deletions(-)

diff --git a/src/views/roadmap/LearnPath.vue b/src/views/roadmap/LearnPath.vue
index 7b195a1..33ec87f 100644
--- a/src/views/roadmap/LearnPath.vue
+++ b/src/views/roadmap/LearnPath.vue
@@ -5,11 +5,17 @@
         <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>
@@ -51,42 +57,84 @@
           <!--            </template>-->
           <!--          </el-popover>-->
         </div>
-        <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
+        <div
+          :style="{ display: showmapdetail ? 'flex' : 'none' }"
+          class="titleR"
+          @click="returnfun"
+        >
           返回列表
         </div>
       </div>
       <!-- 路径列表-->
-      <div class="routerList" v-if="isLoading" style="display:flex;color:#909399;">
-				
-			</div>
-      <div v-else :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
+      <div
+        class="routerList"
+        v-if="isLoading"
+        style="display: flex; color: #909399"
+      ></div>
+      <div
+        v-else
+        :style="{ display: !showmapdetail ? 'flex' : 'none' }"
+        class="head"
+      >
         {{ loading.close() }}
         <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"/>
+            <el-table-column
+              prop="img"
+              label="缩略图"
+              #default="scope"
+              align="center"
+              width="255"
+            >
+              <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="introduce" label="路径介绍" #default="scope">
-              <el-popover placement="bottom-start" :width="400" title="路径介绍" trigger="hover"
-                          :content="scope.row.remark">
+            <el-table-column align="center" prop="name" label="路径名称" />
+            <el-table-column
+              align="center"
+              prop="introduce"
+              label="路径介绍"
+              #default="scope"
+            >
+              <el-popover
+                placement="bottom-start"
+                :width="400"
+                title="路径介绍"
+                trigger="hover"
+                :content="scope.row.remark"
+              >
                 <template #reference>
                   <div>{{ scope.row.remark }}</div>
                 </template>
               </el-popover>
             </el-table-column>
 
-            <el-table-column align="center" prop="organizationName" label="归属组织"/>
-            <el-table-column #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"/>
+            <el-table-column
+              align="center"
+              prop="organizationName"
+              label="归属组织"
+            />
+            <el-table-column
+              #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"
+              />
             </el-table-column>
           </el-table>
         </div>
@@ -94,24 +142,30 @@
       <!--      :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
       <!-- 路径列表-->
       <!-- 路径详情图 -->
-      <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
-        <PathDetailImage img="https://u-pre.boe.com/upload/路径图背景-1671015331292.png" :detail="detail"></PathDetailImage>
+      <div
+        :style="{ display: showmapdetail ? 'flex' : 'none' }"
+        class="mapdetail"
+      >
+        <PathDetailImage
+          img="https://u-pre.boe.com/upload/路径图背景-1671015331292.png"
+          :detail="detail"
+        ></PathDetailImage>
       </div>
       <!-- 路径详情图 -->
     </div>
   </div>
 </template>
 <script setup>
-import {computed, ref} from "vue";
+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 { 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";
 
 const detail = ref();
 const showmapdetail = ref(false);
@@ -119,14 +173,14 @@ const currentStageId = ref();
 const userInfo = computed(() => store.state.userInfo);
 const loading = ref(false);
 const isLoading = ref(true);
-loading.value = ElLoading.service({  
+loading.value = ElLoading.service({
   lock: true,
-  text: 'Loading',
-  background: 'rgba(0, 0, 0, 0.7)'
-})
+  text: "Loading",
+  background: "rgba(0, 0, 0, 0.7)",
+});
 
-const {data} = usePage(ROUTER_LIST, {pageSize: 60}, (e)=>{
-  console.log('我请求成功了吗', e)
+const { data } = usePage(ROUTER_LIST, { pageSize: 60 }, (e) => {
+  console.log("我请求成功了吗", e);
   isLoading.value = false;
 });
 const router = useRouter();
@@ -134,7 +188,6 @@ const returnclick = () => {
   router.back();
 };
 
-
 // const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
 
 const returnfun = () => {
@@ -142,12 +195,11 @@ const returnfun = () => {
 };
 
 async function gofun(e) {
-  detail.value = e
+  detail.value = e;
   showmapdetail.value = true;
 }
 
-function toUnTask() {
-}
+function toUnTask() {}
 </script>
 <style lang="scss">
 #app div:nth-child(1) {