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>
              <div class="titleR">进入未完成任务</div>
            </template>
          </el-popover>
        </div>
        <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 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="{1:ongoing,2:completed,0:nostarted}[formatStatus(scope.row.process)]"
                  style="width: 99px; height: 99px"
              />
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 路径详情图 -->
      <div
          :style="{ display: showmapdetail ? 'flex' : 'none' }"
          class="mapdetail"
      >
        <PathDetailImage
            :img="detail?.picUrl"
            :detail="detail"
        ></PathDetailImage>
      </div>
    </div>
  </div>
</template>
<script setup>
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 {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);
loading.value = ElLoading.service({
  lock: true,
  text: "Loading",
  background: "rgba(0, 0, 0, 0.7)",
});


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 returnfun = () => {
  showmapdetail.value = false;
};

function formatStatus(process) {
  if (!process) {
    return 0;
  }
  if (parseInt(process) === 1) {
    return 2;
  }
  return 1;
}

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>