fe-student/src/views/roadmap/LearnPath.vue

<template>
  <div class="learnpath">
    <div class="content">
      <div class="title">
        <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"/>
            <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"/>
            <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>-->
        </div>
        <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
          返回列表
        </div>
      </div>
      <!-- 路径列表-->
      <div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
        <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>
            <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>
          </el-table>
        </div>
      </div>
      <!--      :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>
      <!-- 路径详情图 -->
    </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 store from "@/store";
import PathDetailImage from "@/components/PathDetailImage.vue";

const detail = ref();
const showmapdetail = ref(false);
const currentStageId = ref();
const userInfo = computed(() => store.state.userInfo);
const {data} = usePage(ROUTER_LIST, {pageSize: 60});
const router = useRouter();
const returnclick = () => {
  router.back();
};

// const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});

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

async function gofun(e) {
  detail.value = e
  showmapdetail.value = true;
}

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

.modal {
}

.modal:after {
  content: "";
}

.learnpath {
  width: 100%;
  min-height: 800px;
  //border-radius: 8px;
  background-color: rgba(255, 255, 255, 1);
  display: flex;

  .content {
    width: 100%;
    // flex: 1;
    margin-top: 43px;
    position: relative;
    // background-color: pink;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 53px;
      margin-right: 54px;
    }

    .title .titleL {
      display: flex;
      align-items: center;
    }

    .title .titleL .text {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
      line-height: 24px;
      margin-right: 26px;
    }

    .title .titleL .info {
      display: flex;
      // align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: #387df7;
    }

    .title .titleR {
      width: 157px;
      height: 48px;
      border: 2px solid #0060ff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      color: #0060ff;
    }

    .head {
      // height: 50px;
      background: #f9f9f9;
      margin-top: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      color: #333333;
      margin-left: 53px;
      margin-right: 54px;
      width: calc(100% - 107px);
      // min-width: 770px;
      overflow-x: auto;

      .el-table th.el-table__cell {
        background: rgba(249, 249, 249, 1);
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        font-weight: 500;
      }

      .el-table .cell {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        word-break: break-all;
      }

      .el-table__row {
        height: 231px;
        font-size: 14px;
        color: rgba(102, 102, 102, 1);
        font-weight: 500;
      }
    }

    .mapdetail {
      width: calc(100% - 107px);
      min-height: 577px;
      background: rgba(242, 245, 247, 0.6);
      margin-top: 26px;
      border-radius: 8px;
      margin-left: 53px;
      margin-right: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.lppopover {
  .finish {
    padding-left: 27px;
    padding-right: 18px;
    margin-top: 15px;
    margin-bottom: 17px;
    position: relative;
    display: flex;
    align-items: center;
  }

  .text {
    font-size: 16px;
    font-weight: 800;
    color: #333333;
    margin-left: 8px;
  }

  .box {
    width: 59px;
    height: 10px;
    background-color: rgba(36, 120, 255, 0.15);
    position: absolute;
    left: 50px;
    top: 15px;
  }

  .tasks {
    width: 405px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 28px;
    cursor: pointer;
  }

  .box-item {
    width: 200px;
    margin-top: 10px;
  }
}
</style>