Merge remote-tracking branch 'origin/origin/20250721-add-zsb' into origin/20250721-add-zsb

# Conflicts:
#	src/views/project/ProjectDetails.vue

package-lock.json

@@ -15015,7 +15015,6 @@
       "integrity": "sha512-yl+5qhpjd8e1G4cMXfORkkBlvtPCIgmRf3IYCWYDKIQ7m+PPa5iTm4feiNmCMD6yGqQWMhhK/7M3oWGL9boKwg==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.12.16",
         "@babel/helper-compilation-targets": "^7.12.16",
         "@babel/helper-module-imports": "^7.12.13",
         "@babel/plugin-proposal-class-properties": "^7.12.13",
@@ -15028,7 +15027,6 @@
         "@vue/babel-plugin-jsx": "^1.0.3",
         "@vue/babel-preset-jsx": "^1.1.2",
         "babel-plugin-dynamic-import-node": "^2.3.3",
-        "core-js": "^3.8.3",
         "core-js-compat": "^3.8.3",
         "semver": "^7.3.4"
       },
@@ -15888,9 +15886,7 @@
       "resolved": "https://registry.npmmirror.com/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "dev": true,
-      "requires": {
-        "ajv": "^8.0.0"
-      }
+      "requires": {}
     },
     "ansi-escapes": {
       "version": "3.2.0",

src/App.vue

@@ -60,6 +60,9 @@ function getUserInfo() {
 }
 </script>
 <style lang="scss">
+body::-webkit-scrollbar {
+  display: none;
+}
 #app {
   // font-family: MicrosoftYaHei, Microsoft YaHei, Avenir, Helvetica, Arial,
   // sans-serif;

src/api/CONST.js

@@ -1,6 +1,7 @@
 export const PROJECT = 1;
 export const ROUTER = 2;
 export const COURSE = 3;
+export const GROWTH = 4;
 
 export const TASK_TYPES = {
     typeName: {

src/api/api.js

@@ -136,3 +136,15 @@ export const EditVoteInvolvedAndBrowse = `/vote/editVoteInvolvedAndBrowse post`
 export const ROUTER_DETAIL_CHAPTER_LIST = `/stu/router/chapterPcList`
 
 
+
+/**专业力必修模块 */
+let baseUrl = "/growth"
+// let baseUrl = ""
+//查询专业力必修详情
+export const PROFESSIONAL_STUDENT_DETAIL = id => `${baseUrl}/professional/student/studentGrowthDetail/${id}`
+//查询专业力必修详情
+export const PROFESSIONAL_STUDENT_TASKLIST = `${baseUrl}/professional/student/studentTaskList`
+//记录当前学习任务
+export const PROFESSIONAL_STUDENT_LEARN = `${baseUrl}/professional/student/learnCourse`
+//专业力必修任务列表
+export const PROFESSIONAL_STUDENT_LIST = `${baseUrl}/professional/student/studentGrowthList`

src/api/growthRequest.js

@@ -0,0 +1,160 @@
+import router from "@/router";
+import {reactive, ref, toRefs, watch} from "vue";
+import axios from 'axios';
+import {getCookie} from "@/api/utils";
+import JSONBigInt from 'json-bigint';
+import {ElMessage} from "element-plus";
+
+const JSONBigIntStr = JSONBigInt({storeAsString: true});
+
+export function usePage(_url, param, callback) {
+
+    const state = reactive({
+        data: {},
+        loading: false,
+        total: 0,
+        size: 10,
+        current: 1,
+        params: {pageNo: 1, pageSize: 10, ...param}
+    })
+
+    watch(param, () => {
+        state.params = {...state.params, ...param}
+        fetchData()
+    })
+
+    function fetchData() {
+        state.loading = true
+        request(_url, state.params).then(r => {
+            state.params.pageNo === 1 ? (state.data = (r.data.records || r.data.rows)) : (state.data = [...state.data, ...(r.data.records || r.data.rows)])
+            state.size = r.data.size
+            state.total = r.data.total
+            state.current = r.data.current
+            state.loading = false
+            callback && callback(r)
+        })
+    }
+
+    fetchData()
+    return {
+        ...toRefs(state),
+        fetchData,
+    };
+}
+
+export function useRequest(_url, params = {}, callback) {
+
+    const state = reactive({
+        data: {},
+        loading: false,
+
+    })
+
+    watch(params, () => {
+        fetchData()
+    })
+
+    function fetchData() {
+        state.loading = true
+        request(_url, params).then(r => {
+            state.data = r.data
+            state.loading = false
+            callback&&callback(r)
+        })
+    }
+
+    fetchData()
+    return {
+        ...toRefs(state),
+        fetchData,
+    };
+}
+
+export async function growthRequest(_url, params) {
+    const s = _url.split(' ')
+    let url = s[0]
+    const method = s[1]?.toLowerCase() || 'get'
+    if (method === 'get') {
+        let paramsArray = [];
+        //拼接参数
+        if (params) {
+            Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
+            if (url.search(/\?/) === -1) {
+                url += '?' + paramsArray.join('&')
+            } else {
+                url += '&' + paramsArray.join('&')
+            }
+        }
+    }
+    const body = method !== 'get' ? params || {} : {}
+    return axios({
+        url,
+        method,
+        headers: {
+            'token': getCookie('token'),
+            ...method !== 'get' ? {'Content-Type': 'application/json'} : {}
+        },
+        ...method !== 'get' ? {data: JSON.stringify(body)} : {}
+    }).then(resp => resp.data).then(response => {
+        if (response.code !== 200 && response.code !== 0) {
+            if (response.code === 1000) (import.meta.env.MODE === 'development' || import.meta.env.MODE === 'test') ? router.push({path: '/login'}) : window.open(window.location.protocol + import.meta.env.VITE_BASE_LOGIN_URL, '_top')
+
+            else if (response.code === 2001) router.push({path: '/FaceTeachSignUp', query: {courseId: router.currentRoute.value.query.courseId,type:3}})
+
+            else if (response.code === 2002) router.push({path: '/FaceTeachNoCommon', query: {courseId: router.currentRoute.value.query.courseId,type:3}})
+            else if (response.code === 9000) ElMessage.warning("该数据已经被删除或停用，请联系管理员");
+
+            // if (import.meta.env.DEV && response.code === 1000) {
+            //     router.push({path: '/login'})
+            // } else {
+            //     window.open()
+            // response.showMsg && notification.open({
+            //     message: response.showMsg,
+            //     duration: 2,
+            // });
+            // }
+        }
+        return response
+    })
+}
+
+export async function boeRequest(_url, params) {
+    const s = _url.split(' ')
+    let url = s[0]
+    const method = s[1]?.toLowerCase() || 'get'
+    if (method === 'get') {
+        let paramsArray = [];
+        //拼接参数
+        if (params) {
+            Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
+            if (url.search(/\?/) === -1) {
+                url += '?' + paramsArray.join('&')
+            } else {
+                url += '&' + paramsArray.join('&')
+            }
+        }
+    }
+    const body = method !== 'get' ? params || {} : {}
+    return fetch(url, {
+        method,
+        headers: {
+            token: getCookie('token'),
+            ...method !== 'get' ? {'Content-Type': 'application/json'} : {}
+        },
+        ...method !== 'get' ? {body: JSON.stringify(body)} : {}
+    }).then(res => {
+        return res.text()
+    }).then(res => {
+        return JSONBigIntStr.parse(res)
+    })
+}
+
+const httpupload = axios.create({
+    baseURL: process.env.VUE_APP_BASE_API,
+    timeout: 1000 * 15,
+    headers: { "Content-Type": "multipart/form-data" },
+});
+
+export const fileUp = (data) => httpupload.post( import.meta.env.VITE_BASE_API+"/file/upload", data, {
+    headers: { "Content-Type": "multipart/form-data" },
+});

src/api/useCommon.js

@@ -1,24 +1,25 @@
-import {useRoute, useRouter} from "vue-router/dist/vue-router";
-import {useStore} from "vuex";
-import {TASK_TYPES} from "@/api/CONST";
-import {computed, watchEffect} from "vue";
+import { useRoute, useRouter } from "vue-router/dist/vue-router";
+import { useStore } from "vuex";
+import { TASK_TYPES } from "@/api/CONST";
+import { computed, watchEffect } from "vue";
 
 export function useTaskPage() {
     const router = useRouter()
-    const {query: {id: taskId, type, infoId}} = useRoute()
-    const {state, dispatch} = useStore()
-    const info = computed(() => type == 1 ? state.projectInfo : state.routerInfo)
-
-    const taskList = computed(() => type == 1 ? info.value.stageProcessList.flatMap(t => t.taskProcessList.map(s => ({
-        ...s,
-        stageId: t.id,
-        stageName: t.name
-    }))) : info.value.taskBoList)
+    const { query: { id: taskId, type, infoId } } = useRoute()
+    const { state, dispatch } = useStore()
+    const info = computed(() => type == 1 ? state.projectInfo : type == 2 ? state.routerInfo : state.growthInfo)
+    const taskList = computed(() => {
+        return type == 1 ? info.value.stageProcessList.flatMap(t => t.taskProcessList.map(s => ({
+            ...s,
+            stageId: t.id,
+            stageName: t.name
+        }))) : type == 2 ? info.value.taskBoList : []
+    })
     const index = computed(() => taskList.value?.findIndex(t => t.id == taskId))
     const hasPrev = computed(() => index.value - 1 > 0)
-    const hasNext = computed(() => taskList.value.length > index.value)
+    const hasNext = computed(() => index.value !== -1 && taskList.value?.length > index.value)
 
-    type == 1 ? dispatch('getProjectInfo', {projectId: infoId}) : dispatch('getRouterInfo', {routerId: infoId})
+    type == 1 ? dispatch('getProjectInfo', { projectId: infoId }) : type == 2 ? dispatch('getRouterInfo', { routerId: infoId }) : dispatch('getGrowthInfo', { routerId: infoId })
 
     function nextPage() {
         toPage(taskList.value[index.value + 1])
@@ -49,5 +50,5 @@ export function useTaskPage() {
         }
     }
 
-    return {hasPrev, hasNext, nextPage, prevPage}
+    return { hasPrev, hasNext, nextPage, prevPage }
 }

src/main.js

@@ -15,9 +15,13 @@ import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import "@/assets/scss/common.scss"
 import "@/assets/scss/iconfont.css"
-
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 const app = createApp(App)
 app.use(store).use(router).mount('#app')
 app.use(ElementPlus, {
     locale: zhCn,
-})
+})
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }

src/store/index.js

@@ -1,14 +1,16 @@
-import {createStore} from "vuex";
-import {PROJECT_PROCESS, ROUTER_PROCESS} from "@/api/api";
-import {request} from "@/api/request";
-import {TASK_TYPES} from "@/api/CONST";
+import { createStore } from "vuex";
+import { PROJECT_PROCESS, ROUTER_PROCESS, PROFESSIONAL_STUDENT_DETAIL } from "@/api/api";
+import { request } from "@/api/request";
+import { growthRequest } from "@/api/growthRequest";
+import { TASK_TYPES } from "@/api/CONST";
 
 export default createStore({
   state: {
     userInfo: {},
     projectInfo: {},
     projectError: {},
-    routerInfo: {}
+    routerInfo: {},
+    growthInfo: {}
   },
   getters: {},
   mutations: {
@@ -18,7 +20,11 @@ export default createStore({
     SET_PROJECT_INFO(state, info) {
       state.projectInfo = info;
     },
-    SET_PROJECT_ERROR(state,error){
+
+    SET_GROWTH_INFO(state, info) {
+      state.growthInfo = info;
+    },
+    SET_PROJECT_ERROR(state, error) {
       state.projectError = error;
     },
     INIT_PROJECT_INFO(state) {
@@ -31,7 +37,7 @@ export default createStore({
       }
       if (state.projectInfo.unlockMode === 1) {
         state.projectInfo.stageProcessList.forEach((t) => {
-          if(t.studyModel == 1){
+          if (t.studyModel == 1) {
             state.projectInfo.stageProcessList?.forEach((t1) => {
               t1.statusName = "已完成";
               const stageState = t1.taskProcessList?.some((s) => {
@@ -44,7 +50,7 @@ export default createStore({
               return stageState;
             });
           }
-          else{
+          else {
             t.statusName = "进行中";
             t.taskProcessList?.forEach((s) => s.statusName = (s.status === 1) ? "已完成" : s.status === 2 ? (s.statusName = "进行中") : TASK_TYPES.toName[s.type]);
             t.taskProcessList?.every((s) => s.status === 1) && (t.statusName = "已完成");
@@ -52,31 +58,31 @@ export default createStore({
         });
         return;
       }
-      state.projectInfo.stageProcessList.forEach((item,i)=>{
-        if(item.studyModel == 1){
+      state.projectInfo.stageProcessList.forEach((item, i) => {
+        if (item.studyModel == 1) {
           state.projectInfo.stageProcessList?.some((t) => {
             t.statusName = "已完成";
             const stageState = t.taskProcessList?.some((s) => {
               s.unlock = true;
               s.statusName = "已完成";
-              s.status !== 1 && (s.statusName = s.status==2? '进行中' : TASK_TYPES.toName[s.type])
+              s.status !== 1 && (s.statusName = s.status == 2 ? '进行中' : TASK_TYPES.toName[s.type])
               return state.projectInfo.unlockMode === 2 ? s.status !== 1 : (s.status !== 1 && s.flag)
             });
             stageState && (t.statusName = "进行中");
             return stageState;
           });
-        }else{
-          if(i == 0){
+        } else {
+          if (i == 0) {
             item.statusName = "进行中";
             item.taskProcessList?.forEach((s) => s.statusName = (s.status === 1) ? "已完成" : s.status === 2 ? (s.statusName = "进行中") : TASK_TYPES.toName[s.type]);
             item.taskProcessList?.every((s) => s.status === 1) && (item.statusName = "已完成");
           }
-          if(i > 0){
-            if(state.projectInfo.stageProcessList[i-1].statusName == "已完成"){
+          if (i > 0) {
+            if (state.projectInfo.stageProcessList[i - 1].statusName == "已完成") {
               item.statusName = "进行中";
               item.taskProcessList?.forEach((s) => s.statusName = (s.status === 1) ? "已完成" : s.status === 2 ? (s.statusName = "进行中") : TASK_TYPES.toName[s.type]);
               item.taskProcessList?.every((s) => s.status === 1) && (item.statusName = "已完成");
-            }else{
+            } else {
               item.statusName = "未解锁";
             }
           }
@@ -117,6 +123,11 @@ export default createStore({
         content.commit("INIT_PROJECT_INFO");
       });
     },
+    getGrowthInfo(content, { routerId }) {
+      growthRequest(PROFESSIONAL_STUDENT_DETAIL(routerId)).then(res => {
+        content.commit("SET_GROWTH_INFO", res.data);
+      })
+    },
     getRouterInfo(content, { routerId, chapterId }) {
       request(ROUTER_PROCESS, chapterId ? { routerId, type: 2, chapterId } : { routerId, type: 2 }).then(res => {
         content.commit("SET_ROUTER_INFO", res.data);

src/views/growth/components/roadmap1/index.vue

@@ -0,0 +1,461 @@
+<template>
+  <div
+    style="
+      transform-origin: top left;
+      width: 1920px;
+      height: 1122px;
+      margin: 0 auto;
+    "
+    class="roadmap"
+  >
+    <div class="path-container">
+      <div
+        :class="
+          (!((item.position + 1) % 2) || item.position === 0) &&
+          item.position !== 1
+            ? 'path-item-top'
+            : 'path-item-bottom'
+        "
+        @click="toFinish(item)"
+        :style="point[item.position]"
+        v-for="(item, index) of stageProcessList"
+      >
+        <template v-if="item.position + 1 == 1">
+          <div style="display: flex">
+            <div>
+              <div>
+                <div class="item-name" style="width: 210px">
+                  <div
+                    style="
+                      display: inline-block;
+                      border-radius: 50%;
+                      line-height: 18px;
+                      text-align: center;
+                      margin-right: 6px;
+                      width: 18px;
+                      height: 18px;
+                      font-size: 12px;
+                      font-weight: 700;
+                      background-color: #fff;
+                      color: #0077ec;
+                    "
+                  >
+                    {{ stageProcessList.length - index }}
+                  </div>
+                  <div style="display: inline">{{ item.taskName }}</div>
+                </div>
+                <div class="triangle"></div>
+              </div>
+              <div class="f-a-c">
+                <div class="item-progress">
+                  <el-progress
+                    :percentage="parseInt(item.progress)"
+                    :show-text="false"
+                    :stroke-width="6"
+                    :color="stateData(item).progressColor"
+                  />
+                </div>
+
+                <div
+                  class="item-state"
+                  :style="{
+                    color: stateData(item).color,
+                    background: stateData(item).bgColor,
+                  }"
+                >
+                  {{ stateData(item).text }}
+                </div>
+              </div>
+            </div>
+            <div class="item-link1" style="display: flex; align-items: center">
+              <div class="line1"></div>
+              <div class="circle1"></div>
+            </div>
+          </div>
+        </template>
+        <template v-else-if="(item.position + 1) % 2 || item.position === 1">
+          <div class="item-link">
+            <div class="circle"></div>
+            <div
+              class="line"
+              :style="{ height: point[item.position].height }"
+            ></div>
+          </div>
+          <div>
+            <div class="triangle"></div>
+            <div class="item-name">
+              <div
+                style="
+                  display: inline-block;
+                  border-radius: 50%;
+                  line-height: 18px;
+                  text-align: center;
+                  margin-right: 6px;
+                  width: 18px;
+                  height: 18px;
+                  font-size: 12px;
+                  font-weight: 700;
+                  background-color: #fff;
+                  color: #0077ec;
+                "
+              >
+                {{ stageProcessList.length - index }}
+              </div>
+              <div style="display: inline">{{ item.taskName }}</div>
+            </div>
+          </div>
+          <div class="f-a-c" style="margin-top: 9px">
+            <div class="item-progress">
+              <el-progress
+                :percentage="parseInt(item.progress)"
+                :show-text="false"
+                :stroke-width="6"
+                :color="stateData(item).progressColor"
+              />
+            </div>
+
+            <div
+              class="item-state"
+              :style="{
+                color: stateData(item).color,
+                background: stateData(item).bgColor,
+              }"
+            >
+              {{ stateData(item).text }}
+            </div>
+          </div>
+        </template>
+
+        <template v-else>
+          <div>
+            <div class="item-name">
+              <div
+                style="
+                  display: inline-block;
+                  border-radius: 50%;
+                  line-height: 18px;
+                  text-align: center;
+                  margin-right: 6px;
+                  width: 18px;
+                  height: 18px;
+                  font-size: 12px;
+                  font-weight: 700;
+                  background-color: #fff;
+                  color: #0077ec;
+                "
+              >
+                {{ stageProcessList.length - index }}
+              </div>
+              <div style="display: inline">{{ item.taskName }}</div>
+            </div>
+            <div class="triangle"></div>
+          </div>
+          <div class="f-a-c">
+            <div class="item-progress">
+              <el-progress
+                :percentage="parseInt(item.progress)"
+                :show-text="false"
+                :stroke-width="6"
+                :color="stateData(item).progressColor"
+              />
+            </div>
+
+            <div
+              class="item-state"
+              :style="{
+                color: stateData(item).color,
+                background: stateData(item).bgColor,
+              }"
+            >
+              {{ stateData(item).text }}
+            </div>
+          </div>
+          <div class="item-link">
+            <div
+              class="line"
+              :style="{ height: point[item.position]?.height }"
+            ></div>
+            <div class="circle"></div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed } from "vue";
+const emit = defineEmits("toFinish");
+const propas = defineProps({
+  stageProcessList: Array,
+});
+
+// 缩放比例
+const transformSize = computed(() => {});
+const point = [
+  {
+    top: "-13px",
+    right: "258px",
+    height: "210px",
+  },
+  {
+    top: "226px",
+    right: "128px",
+    height: "210px",
+  },
+  {
+    top: "347px",
+    right: "341px",
+    height: "210px",
+  },
+  {
+    top: "92px",
+    right: "455px",
+    height: "210px",
+  },
+  {
+    top: "443px",
+    right: "561px",
+    height: "210px",
+  },
+  {
+    top: "218px",
+    right: "673px",
+    height: "147px",
+  },
+  {
+    top: "512px",
+    right: "780px",
+    height: "234px",
+  },
+  {
+    top: "113px",
+    right: "893px",
+    height: "295px",
+  },
+  {
+    top: "565px",
+    right: "1000px",
+    height: "281px",
+  },
+  {
+    top: "232px",
+    right: "1111px",
+    height: "210px",
+  },
+  {
+    top: "602px",
+    right: "1220px",
+    height: "135px",
+  },
+  {
+    top: "125px",
+    right: "1331px",
+    height: "334px",
+  },
+  {
+    top: "630px",
+    right: "1440px",
+    height: "226px",
+  },
+  {
+    top: "267px",
+    right: "1551px",
+    height: "210px",
+  },
+  {
+    top: "650px",
+    right: "1660px",
+    height: "90px",
+  },
+];
+const toFinish = (item) => {
+  emit("toFinish", item);
+};
+const stateData = computed(() => {
+  return (item) => {
+    if (item.completionStatus === "10") {
+      return {
+        text: "未解锁",
+        color: "#666666",
+        bgColor: "rgba(102, 102, 102, 0.2)",
+        progressColor: "#AEB3B8",
+      };
+    } else if (item.completionStatus === "0") {
+      return {
+        text: "未开始",
+        color: "#666666",
+        bgColor: "rgba(102, 102, 102, 0.2)",
+        progressColor: "#AEB3B8",
+      };
+    } else if (item.completionStatus === "1") {
+      return {
+        text: "已完成",
+        color: "#0077EC",
+        bgColor: "rgba(0, 119, 236, 0.2)",
+        progressColor: "#0077EC",
+      };
+    } else if (item.completionStatus === "2") {
+      return {
+        text: "进行中",
+        color: "#F2903D",
+        bgColor: "rgba(242, 144, 61, 0.2)",
+        progressColor: "#F2903D",
+      };
+    } else if (item.completionStatus === "3") {
+      return {
+        text: "已结束",
+        color: "#666666",
+        bgColor: "rgba(102, 102, 102, 0.2)",
+        progressColor: "#AEB3B8",
+      };
+    }
+  };
+});
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.f-a-c {
+  display: flex;
+  align-items: center;
+}
+.roadmap {
+  background-image: url(@/assets/image/growth/path-bg.png);
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+.path-container {
+  position: relative;
+  width: 100%;
+  height: 659px;
+  margin-top: 53px;
+  background-image: url(@/assets/image/growth/path.png);
+  .path-item-bottom {
+    position: absolute;
+    width: 210px;
+    cursor: pointer;
+    .item-progress {
+      flex: 1;
+    }
+    .item-state {
+      width: 64px;
+      height: 24px;
+      border-radius: 6px;
+      text-align: center;
+      line-height: 24px;
+      margin-left: 5px;
+    }
+    .item-name {
+      display: inline-block;
+      width: 210px;
+      background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
+      border-radius: 7px;
+      font-size: 16px;
+      color: #ffffff;
+      padding: 14px 10px 14px 15px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .triangle {
+      width: 0px;
+      height: 0px;
+      border: 7px solid transparent;
+      border-bottom-color: #4391f8;
+      margin-left: 32px;
+      padding-top: 10px;
+    }
+
+    .item-link {
+      position: relative;
+      .line {
+        width: 2px;
+        margin-left: 39px;
+        background: linear-gradient(180deg, #ffffff 0%, #0077ec 65%);
+        border-image: linear-gradient(180deg, #ffffff, #0077ec) 10 10;
+      }
+      .circle {
+        width: 14px;
+        height: 14px;
+        background: #ffffff;
+        border-radius: 50%;
+        border: 3px solid #0077ec;
+        position: absolute;
+        top: 0;
+        left: 30px;
+      }
+    }
+  }
+  .path-item-top {
+    position: absolute;
+    width: 210px;
+    cursor: pointer;
+    .item-progress {
+      flex: 1;
+    }
+    .item-state {
+      width: 64px;
+      height: 24px;
+      border-radius: 6px;
+      text-align: center;
+      line-height: 24px;
+      margin-left: 5px;
+    }
+    .item-name {
+      width: 210px;
+      display: inline-block;
+      background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
+      border-radius: 7px;
+      font-size: 16px;
+      color: #ffffff;
+      padding: 14px 10px 14px 15px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .triangle {
+      width: 0px;
+      height: 0px;
+      border: 7px solid transparent;
+      border-top-color: #4391f8;
+      margin-left: 32px;
+    }
+
+    .item-link1 {
+      margin-top: 14px;
+      height: 20px;
+      .line1 {
+        width: 135px;
+        height: 2px;
+        background: linear-gradient(-90deg, #ffffff 0%, #0077ec 65%);
+        border-image: linear-gradient(-90deg, #ffffff, #0077ec) 10 10;
+      }
+      .circle1 {
+        width: 14px;
+        height: 14px;
+        background: #ffffff;
+        border-radius: 50%;
+        border: 3px solid #0077ec;
+      }
+    }
+    .item-link {
+      position: relative;
+      .line {
+        margin-left: 39px;
+        width: 2px;
+        background: linear-gradient(0deg, #ffffff 0%, #0077ec 65%);
+        border-image: linear-gradient(0deg, #ffffff, #0077ec) 10 10;
+      }
+      .circle {
+        width: 14px;
+        height: 14px;
+        background: #ffffff;
+        border-radius: 50%;
+        border: 3px solid #0077ec;
+        position: absolute;
+        bottom: 0;
+        left: 30px;
+      }
+    }
+  }
+}
+</style>

src/views/growth/components/roadmap2/index.vue

@@ -0,0 +1,389 @@
+<template>
+  <div
+    style="
+      transform-origin: top left;
+      width: 1920px;
+      height: 777px;
+      margin: 0 auto;
+    "
+    class="roadmap"
+  >
+    <el-scrollbar height="777px">
+      <div
+        class="path-container"
+        :style="{
+          height: `${
+            Number(position(stageProcessList.length - 1).topNum) + 65
+          }px`,
+        }"
+      >
+        <div
+          class="path-item"
+          @click="toFinish(item)"
+          :style="position(index)"
+          v-for="(item, index) of stageProcessList"
+        >
+          <template v-if="leftOfRight(index) === 'right'">
+            <div class="circle-right">
+              <div></div>
+            </div>
+          </template>
+          <div class="item-container">
+            <div>
+              <div class="item-name">
+                <div
+                  style="
+                    display: inline-block;
+                    border-radius: 50%;
+                    line-height: 18px;
+                    text-align: center;
+                    margin-right: 6px;
+                    width: 18px;
+                    height: 18px;
+                    font-size: 12px;
+                    font-weight: 700;
+                    background-color: #fff;
+                    color: #0077ec;
+                  "
+                >
+                  {{ stageProcessList.length - index }}
+                </div>
+                <div style="display: inline">{{ item.taskName }}</div>
+              </div>
+            </div>
+            <div class="f-a-c" style="margin-top: 9px">
+              <div class="item-progress">
+                <el-progress
+                  :percentage="parseInt(item.progress)"
+                  :show-text="false"
+                  :stroke-width="6"
+                  :color="stateData(item).progressColor"
+                />
+              </div>
+
+              <div
+                class="item-state"
+                :style="{
+                  color: stateData(item).color,
+                  background: stateData(item).bgColor,
+                }"
+              >
+                {{ stateData(item).text }}
+              </div>
+            </div>
+          </div>
+          <template v-if="leftOfRight(index) === 'left'">
+            <div class="circle-left">
+              <div></div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+<script setup>
+import { computed } from "vue";
+const emit = defineEmits("toFinish");
+const propas = defineProps({
+  stageProcessList: Array,
+});
+let left = [1, 2, 3, 7, 8, 11, 16, 17, 22, 25, 27, 30, 32];
+let right = [
+  0, 4, 5, 6, 9, 10, 12, 13, 14, 15, 18, 19, 20, 21, 23, 24, 26, 28, 29, 31, 33,
+  34, 35,
+];
+const leftOfRight = (index) => {
+  if (left.includes(index % 35)) {
+    return "left";
+  }
+  if (right.includes(index % 35)) {
+    return "right";
+  }
+};
+const position = (index) => {
+  if (index < 0) {
+    return {
+      top: `0px`,
+      right: `0px`,
+      topNum: 0,
+    };
+  }
+  let num = index / 35;
+  // 获取倍数
+  let multiple = num < 1 ? 0 : Number(Math.floor(num));
+
+  let num2 = index % 35;
+
+  return {
+    top: `${multiple * (5282 + 610) + Number(point[num2].top)}px`,
+    right: `${point[num2].right}px`,
+    topNum: `${multiple * (5282 + 610) + Number(point[num2].top)}`,
+  };
+};
+
+const point = [
+  {
+    top: "-67",
+    right: "55",
+  },
+  {
+    top: "9",
+    right: "709",
+  },
+  {
+    top: "118",
+    right: "1034",
+  },
+  {
+    top: "241",
+    right: "952",
+  },
+  {
+    top: "281",
+    right: "521",
+  },
+  {
+    top: "446",
+    right: "176",
+  },
+  {
+    top: "546",
+    right: "435",
+  },
+  {
+    top: "598",
+    right: "1023",
+  },
+  {
+    top: "702",
+    right: "1452",
+  },
+  {
+    top: "877",
+    right: "1040",
+  },
+  {
+    top: "1102",
+    right: "522",
+  },
+  {
+    top: "1209",
+    right: "1140",
+  },
+  {
+    top: '1463',
+    right: '1600',
+  },
+  {
+    top: "1603",
+    right: "1200",
+  },
+  {
+    top: "1720",
+    right: "653",
+  },
+  {
+    top: "1830",
+    right: "202",
+  },
+  {
+    top: "2030",
+    right: "585",
+  },
+  {
+    top: "2091",
+    right: "1106",
+  },
+  {
+    top: "2340",
+    right: "1471",
+  },
+  {
+    top: "2487",
+    right: "1033",
+  },
+  {
+    top: "2568",
+    right: "597",
+  },
+  {
+    top: "2735",
+    right: "67",
+  },
+  {
+    top: "2888",
+    right: "767",
+  },
+  {
+    top: "3161",
+    right: "1077",
+  },
+  {
+    top: "3329",
+    right: "484",
+  },
+  {
+    top: "3602",
+    right: "-6",
+  },
+  {
+    top: "3751",
+    right: "322",
+  },
+
+  {
+    top: "3805",
+    right: "950",
+  },
+  {
+    top: "4021",
+    right: "1270",
+  },
+  {
+    top: "4156",
+    right: "492",
+  },
+  {
+    top: "4423",
+    right: "209",
+  },
+  {
+    top: "4648",
+    right: "501",
+  },
+  {
+    top: "4738",
+    right: "1101",
+  },
+  {
+    top: "5066",
+    right: "1363",
+  },
+  {
+    top: "5282",
+    right: "790",
+  },
+  
+];
+const toFinish = (item) => {
+  emit("toFinish", item);
+};
+const stateData = computed(() => {
+  return (item) => {
+    if (item.completionStatus === "10") {
+      return {
+        text: "未解锁",
+        color: "#666666",
+        bgColor: "#d0d4d8",
+        progressColor: "#AEB3B8",
+      };
+    } else if (item.completionStatus === "0") {
+      return {
+        text: "未开始",
+        color: "#666666",
+        bgColor: "#d0d4d8",
+        progressColor: "#AEB3B8",
+      };
+    } else if (item.completionStatus === "1") {
+      return {
+        text: "已完成",
+        color: "#0077EC",
+        bgColor: "#cadff7",
+        progressColor: "#0077EC",
+      };
+    } else if (item.completionStatus === "2") {
+      return {
+        text: "进行中",
+        color: "#F2903D",
+        bgColor: "#ecdacf",
+        progressColor: "#F2903D",
+      };
+    } else if (item.completionStatus === "3") {
+      return {
+        text: "已结束",
+        color: "#666666",
+        bgColor: "#d0d4d8",
+        progressColor: "#AEB3B8",
+      };
+    }
+  };
+});
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.f-a-c {
+  display: flex;
+  align-items: center;
+}
+.roadmap {
+  background-image: url(@/assets/image/growth/path-bg.png);
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+.path-container {
+  position: relative;
+  // width: 100%;
+  min-height: 200px;
+  // margin-top: 150px;
+  // margin-bottom: 100px;
+  margin: 150px 20px 100px 20px;
+  box-sizing: border-box;
+  background-image: url(@/assets/image/growth/path2.png);
+  background-size: 100%;
+  .path-item {
+    position: absolute;
+    display: flex;
+    align-items: flex-end;
+    cursor: pointer;
+    .item-container {
+      width: 220px;
+    }
+    .item-progress {
+      flex: 1;
+    }
+    .item-state {
+      width: 64px;
+      height: 24px;
+      border-radius: 6px;
+      text-align: center;
+      line-height: 24px;
+      margin-left: 5px;
+    }
+    .item-name {
+      display: inline-block;
+      width: 210px;
+      background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
+      border-radius: 7px;
+      font-size: 16px;
+      color: #ffffff;
+      padding: 14px 10px 14px 15px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .circle-left,
+    .circle-right {
+      width: 42px;
+      height: 42px;
+      background: rgba(64, 158, 255, 0.2);
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      div {
+        width: 30px;
+        height: 30px;
+        background: #0077ec;
+        border-radius: 50%;
+      }
+    }
+    .circle-left {
+      margin-left: 30px;
+    }
+    .circle-right {
+      margin-right: 30px;
+    }
+  }
+}
+</style>

src/views/growth/growthRoadmap.vue

@@ -0,0 +1,817 @@
+<template>
+  <div class="growth-list">
+    <img
+      style="width: 100%; height: 150px"
+      src="@/assets/image/growth/bg.png"
+    />
+    <div class="nav-title">
+      <el-dropdown :teleported="false" trigger="click" ref="dropdownRef">
+        <div class="growth-name">
+          <div>{{ selectGrowth?.growthName }}</div>
+          <div style="margin-left: 20px; cursor: pointer">
+            <el-icon color="#fff" size="24"><CaretBottom /></el-icon>
+          </div>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item
+              @click="select(item)"
+              :disabled="selectGrowth.id == item.id"
+              v-for="item of growthList"
+            >
+              <div>{{ item.growthName }}</div>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <template v-if="selectGrowth.template == 1">
+      <el-affix :offset="0">
+        <div class="nav">
+          <div class="tabs">
+            <!-- <template v-if="selectGrowth.electiveTaskNum !== 0"> -->
+            <div
+              class="tabs-item"
+              :class="queryParams.type == 1 ? 'active' : ''"
+              @click="tabClick(1)"
+            >
+              <div class="tabs-text">必修</div>
+              <div class="tabs-line"></div>
+            </div>
+            <div
+              class="tabs-item"
+              :class="queryParams.type == 2 ? 'active' : ''"
+              @click="tabClick(2)"
+            >
+              <div class="tabs-text">选修</div>
+              <div class="tabs-line"></div>
+            </div>
+            <!-- </template> -->
+          </div>
+          <div style="display: flex">
+            <el-select
+              style="width: 230px"
+              :teleported="false"
+              v-model="queryParams.completionStatus"
+              placeholder="搜索学习状态"
+            >
+              <el-option label="全部" value="3"> </el-option>
+              <el-option label="未开始" value="0"> </el-option>
+              <el-option label="已完成" value="1"> </el-option>
+              <el-option label="进行中" value="2"> </el-option>
+            </el-select>
+            <el-input
+              style="margin-left: 9px; width: 230px"
+              v-model="queryParams.taskName"
+              placeholder="搜索名称"
+              clearable
+            />
+            <el-button
+              icon="Search"
+              style="margin-left: 20px; background-color: #0077ec; color: #fff"
+              @click="getList"
+              >搜索</el-button
+            >
+            <el-button icon="Refresh" style="margin-left: 20px" @click="refresh"
+              >清除</el-button
+            >
+          </div>
+        </div>
+        <div
+          class="growth-path-container"
+          :style="{
+            height: `${865 * transformSize}px`,
+          }"
+        >
+          <div class="growth-name-type">
+            <div class="growth-type">
+              <div class="type-item-list" @click="templateClick">列表</div>
+              <div class="type-item-path">路径</div>
+            </div>
+          </div>
+
+          <template v-if="stageProcessList && stageProcessList.length">
+            <div
+              :style="{ transform: 'scale(' + transformSize + ')' }"
+              style="transform-origin: top left"
+            >
+              <Roadmap2
+                @toFinish="toFinish"
+                :stageProcessList="stageProcessList"
+              ></Roadmap2>
+            </div>
+          </template>
+          <template v-else>
+            <el-empty description="暂无数据" />
+          </template>
+        </div>
+      </el-affix>
+    </template>
+    <template v-if="selectGrowth.template == 2">
+      <div class="nav">
+        <div class="tabs">
+          <!-- <template v-if="selectGrowth.electiveTaskNum !== 0"> -->
+          <div
+            class="tabs-item"
+            :class="queryParams.type == 1 ? 'active' : ''"
+            @click="tabClick(1)"
+          >
+            <div class="tabs-text">必修</div>
+            <div class="tabs-line"></div>
+          </div>
+          <div
+            class="tabs-item"
+            :class="queryParams.type == 2 ? 'active' : ''"
+            @click="tabClick(2)"
+          >
+            <div class="tabs-text">选修</div>
+            <div class="tabs-line"></div>
+          </div>
+          <!-- </template> -->
+        </div>
+        <div style="display: flex">
+          <el-select
+            style="width: 230px"
+            :teleported="false"
+            v-model="queryParams.completionStatus"
+            placeholder="搜索学习状态"
+          >
+            <el-option label="全部" value="3"> </el-option>
+            <el-option label="未开始" value="0"> </el-option>
+            <el-option label="已完成" value="1"> </el-option>
+            <el-option label="进行中" value="2"> </el-option>
+          </el-select>
+          <el-input
+            style="margin-left: 9px; width: 230px"
+            v-model="queryParams.taskName"
+            placeholder="搜索名称"
+            clearable
+          />
+          <el-button
+            icon="Search"
+            style="margin-left: 20px; background-color: #0077ec; color: #fff"
+            @click="getList"
+            >搜索</el-button
+          >
+          <el-button icon="Refresh" style="margin-left: 20px" @click="refresh"
+            >清除</el-button
+          >
+        </div>
+      </div>
+      <div
+        class="growth-path-container"
+        :style="{
+          height: `${1122 * transformSize}px`,
+        }"
+      >
+        <div class="growth-name-type">
+          <div class="growth-type">
+            <div class="type-item-list" @click="templateClick">列表</div>
+            <div class="type-item-path">路径</div>
+          </div>
+        </div>
+
+        <template v-if="stageProcessList && stageProcessList.length">
+          <div
+            :style="{ transform: 'scale(' + transformSize + ')' }"
+            style="transform-origin: top left"
+          >
+            <Roadmap1
+              @toFinish="toFinish"
+              :stageProcessList="stageProcessList"
+            ></Roadmap1>
+          </div>
+        </template>
+        <template v-else>
+          <el-empty description="暂无数据" />
+        </template>
+      </div>
+    </template>
+
+    <!-- 弹框提示信息 -->
+    <el-dialog
+      title=""
+      top="347px"
+      v-model="dialogVisible"
+      :show-close="false"
+      style="
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 283px;
+        padding: 0;
+        border-radius: 4px;
+      "
+      width="502px"
+    >
+      <div
+        style="width: 288px; color: #333333; font-size: 22px; font-weight: 600"
+      >
+        {{ dialogVisibleTip }}
+      </div>
+      <span slot="footer" style="display: inline-block; margin-top: 60px">
+        <el-button
+          @click="dialogVisible = false"
+          style="width: 140px; height: 40px; margin-right: 22px"
+          >取消</el-button
+        >
+        <el-button
+          type="primary"
+          @click="dialogVisible = false"
+          style="width: 140px; height: 40px"
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
+    <!-- 开课列表弹框 -->
+    <el-dialog
+      title="开课列表"
+      v-model="openCourseVisible"
+      :show-close="true"
+      style="padding: 0; border-radius: 4px"
+      width="600px"
+    >
+      <el-scrollbar height="400px">
+        <div>
+          <div
+            v-for="(item, key) in openCourseList"
+            style="
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 12px;
+              background: rgb(247, 251, 253);
+              height: 40px;
+              padding: 5px 20px;
+              border-radius: 5px;
+            "
+          >
+            <div
+              style="
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                width: 320px;
+              "
+            >
+              {{ item.name }}
+            </div>
+            <div
+              @click="toOffcoursePlanPage(item)"
+              style="
+                width: 60px;
+                height: 30px;
+                text-align: center;
+                line-height: 30px;
+                background: #0078fc;
+                border-radius: 5px;
+                color: #fff;
+                cursor: pointer;
+              "
+            >
+              去上课
+            </div>
+          </div>
+        </div>
+      </el-scrollbar>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { computed, onMounted, onUnmounted, ref, watch, reactive } from "vue";
+import { ElMessage, ElLoading } from "element-plus";
+import { request } from "@/api/request";
+import { growthRequest } from "@/api/growthRequest";
+import Roadmap1 from "./components/roadmap1/index.vue";
+import Roadmap2 from "./components/roadmap2/index.vue";
+import {
+  EvaluationToLearn,
+  QueryEvaluationTaskStatusOne,
+  STUDY_RECORD,
+  SubmitExternalExam,
+  PROFESSIONAL_STUDENT_TASKLIST,
+  PROFESSIONAL_STUDENT_LIST,
+  PROFESSIONAL_STUDENT_LEARN,
+} from "@/api/api";
+import { useRoute, useRouter } from "vue-router";
+import { GROWTH, TASK_TYPES } from "@/api/CONST";
+import { useStore } from "vuex";
+const {
+  query: { type, routerId },
+} = useRoute();
+
+const router = useRouter();
+const { commit, dispatch, state } = useStore();
+const userInfo = computed(() => state.userInfo);
+
+const errorData = computed(() => state.projectError);
+
+// 储存屏幕宽
+const windowWidth = ref(0);
+const transformSize = ref(1);
+
+const updateWindowWidth = () => {
+  windowWidth.value = window.innerWidth;
+  transformSize.value = windowWidth.value / 1920;
+};
+// 样式类型
+const templateClick = () => {
+  router.push({
+    path: "/growthList",
+    query: {
+      routerId: selectGrowth.value.id,
+      type: queryParams.type,
+    },
+  });
+};
+// 查询条件
+const queryParams = reactive({
+  type: 1,
+});
+const tabClick = (type, status) => {
+  // 选修/必修
+  if (type) {
+    queryParams.type = type;
+  }
+  // 任务状态
+  if (status) {
+    queryParams.completionStatus = status;
+  }
+  getList();
+};
+
+// 清除
+const refresh = () => {
+  queryParams.taskName = "";
+  queryParams.completionStatus = "";
+  getList();
+};
+// 学习任务列表
+const stageProcessList = ref([]);
+
+// 是否加载数据中
+const getList = () => {
+  let params = {
+    growthId: selectGrowth.value.id ? selectGrowth.value.id : routerId,
+    ...queryParams,
+  };
+  // 3为查询全部状态，需给后端传空
+  if (params.completionStatus == 3) {
+    params.completionStatus = "";
+  }
+  // 是否加载数据中
+  const loading = ElLoading.service({ fullscreen: true });
+  growthRequest(PROFESSIONAL_STUDENT_TASKLIST, params)
+    .then((res) => {
+      if (selectGrowth.value.template === "1") {
+        stageProcessList.value = res.data.reverse();
+      } else {
+        let newData = res.data.slice(0, 15).reverse();
+        // 默认第一个在第一点位
+        // let num = Number((15 / newData.length).toFixed(0));
+        // // 默认第一个在第一点位
+        let num = 15 / newData.length;
+        stageProcessList.value = newData.map((item, index) => {
+          // 默认第一个在第一点位
+          if (index === 0) {
+            item.position = 0;
+          }
+          item.position = Number(Math.round(index * num));
+          return item;
+        });
+      }
+    })
+    .finally(() => {
+      loading.close();
+    });
+};
+// 专业力必修列表
+const growthList = ref([]);
+// 当前浏览的专业力必修任务
+const selectGrowth = ref({
+  electiveTaskNum: 0,
+});
+// 切换专业力必修
+const dropdownRef = ref(null);
+const select = (item) => {
+  selectGrowth.value = item;
+  dropdownRef.value.handleClose();
+  getList();
+};
+onMounted(() => {
+  updateWindowWidth(); // 初始化宽度
+  window.addEventListener("resize", updateWindowWidth);
+  dispatch("getGrowthInfo", { routerId });
+  if (type) {
+    queryParams.type = type;
+  }
+  getList();
+  growthRequest(PROFESSIONAL_STUDENT_LIST).then((res) => {
+    growthList.value = res.data;
+  });
+});
+// 在组件卸载时移除事件监听器
+onUnmounted(() => {
+  window.removeEventListener("resize", updateWindowWidth);
+});
+watch(
+  () => state.growthInfo,
+  (val) => {
+    selectGrowth.value = val;
+  }
+);
+watch(
+  () => errorData.value,
+  (val) => {
+    if (val.data == null) {
+      ElMessage.error(val.msg);
+      window.parent.postMessage(
+        { type: "navigate", path: "/uc/study/task" },
+        "*"
+      );
+    }
+  },
+  { deep: true }
+);
+const openCourseVisible = ref(false);
+const openCourseList = ref([]);
+
+const dialogVisible = ref(false);
+const dialogVisibleTip = ref("该任务无法学习，请联系管理员进行替换！");
+
+async function toFinish(d) {
+  if (d.completionStatus == 3) {
+    ElMessage.warning(`学习任务已结束无法学习`);
+    return;
+  }
+  if (d.completionStatus == 10) {
+    ElMessage.warning(`请先完成“${d.superTaskName}”的学习任务`);
+    return;
+  }
+  if (!d.canLearn) {
+    ElMessage.warning(`学习任务暂未开始`);
+    return;
+  }
+  //更新学员当前任务
+  await growthRequest(PROFESSIONAL_STUDENT_LEARN, {
+    growthId: routerId,
+    taskId: d.taskId,
+  });
+
+  if (d.courseType === "2") {
+    if (!d.targetId) {
+      return ElMessage.error("还未添加开课,请联系管理员！");
+    }
+    if (d.targetId.split(",").length > 1) {
+      openCourseList.value = d.offcoursePlanList;
+      openCourseVisible.value = true;
+      return;
+    }
+  }
+
+  // 作业过期判断
+  if (d.courseType == 4) {
+    let date1 = new Date(d.info.submitEndTime).getTime();
+    let date2 = new Date().getTime();
+    if (date1 < date2) {
+      dialogVisibleTip.value = "当前作业已结束";
+      dialogVisible.value = true;
+      //return
+    }
+  }
+  // 直播结束时间
+  if (d.courseType == 6) {
+    let date1 = new Date(d.info.liveEndTime).getTime();
+    let date2 = new Date().getTime();
+    if (date1 < date2) {
+      dialogVisibleTip.value = "当前直播已结束";
+      dialogVisible.value = true;
+      //return
+    }
+  }
+  // 考试 停用
+  if (d.courseType == 5) {
+    // 此处判断外部考试跳转
+    if (d.info.examType == 2) {
+      // 点击即更新状态 进行中
+      request(SubmitExternalExam, {
+        type: 1,
+        taskId: d.id,
+        chapterId: 0,
+        externalId: d.courseId,
+        externalName: d.taskName,
+        targetId: selectGrowth.value.id,
+        studentNo: userInfo.value.userNo,
+      })
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+      router.push({
+        path: "/externalexamination",
+        query: {
+          id: d.id,
+          type: GROWTH,
+          infoId: selectGrowth.value.id,
+          courseId: d.courseId ? d.courseId : d.info.id,
+          pName: selectGrowth.value.growthName,
+          sName: d.taskName,
+          chapterOrStageId: 0,
+          exname: d.info.examinationTestName, // 考试名称
+        },
+      });
+      return;
+    }
+  }
+
+  // 其他活动 结束时间
+  if (d.courseType == 9) {
+    let date1 = new Date(d.info.activityEndTime).getTime();
+    let date2 = new Date().getTime();
+    if (date1 < date2) {
+      dialogVisibleTip.value = "当前活动已结束";
+      dialogVisible.value = true;
+      //return
+    }
+  }
+
+  // 测评模块 请求接口跳转新的页面 - 新增 暂时未调试 目前无测评数据 2023-02-04
+  if (d.courseType == 10) {
+    if (d.completionStatus != 1) {
+      // 肯定没有完成测评
+      // 调用接口 跳转页面
+      request(EvaluationToLearn, {
+        businessType: "project",
+        chapterId: 0,
+        courseId: d.courseId,
+        quizKid: d.info.evaluationTypeId,
+        routerOrProjectId: routerId,
+        studentId: userInfo.value.id,
+        studentName: userInfo.value.realName,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.code == 200) {
+            let jumpUrl = res.data.quizUrl;
+            // 此处写跳转url
+            window.open(jumpUrl, "_top");
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+      return;
+    } else {
+      // 进行中 或者 已完成
+      // 调用接口 判断当前测评状态 跳转页面
+      console.log("我是查询测评跳转链接所传递得参数", {
+        quizTaskId: d.quizTaskId,
+      });
+      request(QueryEvaluationTaskStatusOne, {
+        quizTaskId: d.quizTaskId,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.code == 200) {
+            if (res.data.complete_status == 2) {
+              ElMessage.error("您已完成测评");
+              return;
+            } else {
+              // 重新查询跳转
+              // 调用接口 跳转页面
+              console.log("我是查询测评跳转链接所传递得参数", {
+                businessType: "project",
+                chapterId: 0,
+                courseId: d.courseId,
+                quizKid: d.info.evaluationTypeId,
+                routerOrProjectId: routerId,
+                studentId: userInfo.value.id,
+                studentName: userInfo.value.realName,
+              });
+              request(EvaluationToLearn, {
+                businessType: "project",
+                chapterId: 0,
+                courseId: d.courseId ? d.courseId : d.info.id,
+                quizKid: d.info.evaluationTypeId,
+                routerOrProjectId: routerId,
+                studentId: userInfo.value.id,
+                studentName: userInfo.value.realName,
+              })
+                .then((res) => {
+                  console.log(res);
+                  if (res.code == 200) {
+                    let jumpUrl = res.data.quizUrl;
+                    // 此处写跳转url
+                    window.open(jumpUrl, "_top");
+                  }
+                })
+                .catch((err) => {
+                  console.log(err);
+                });
+              return;
+            }
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+      return;
+    }
+  }
+
+  if (!TASK_TYPES.path[d.courseType]) {
+    ElMessage.error("暂时未开放");
+    return;
+  }
+
+  if (
+    d.courseType == 3 ||
+    d.courseType == 7 ||
+    (d.courseType == 5 && d.examType == 2)
+  ) {
+    await request(STUDY_RECORD, {
+      studentId: userInfo.value.id,
+      targetId: selectGrowth.value.id,
+      logo: GROWTH,
+      type: GROWTH,
+      stageOrChapterId: 0,
+      taskId: d.id,
+      taskType: d.courseType,
+    });
+  }
+
+  if (typeof TASK_TYPES.path[d.courseType] === "string") {
+    TASK_TYPES.path[d.courseType] &&
+      TASK_TYPES.path[d.courseType].startsWith("http") &&
+      window.open(TASK_TYPES.path[d.type] + d.targetId, "_top");
+    TASK_TYPES.path[d.courseType] &&
+      TASK_TYPES.path[d.courseType].startsWith("/") &&
+      router.push({
+        path: TASK_TYPES.path[d.courseType],
+        query: {
+          id: d.id,
+          type: d.courseType === "11" ? "5" : GROWTH,
+          projectId: d.courseId,
+          infoId: d.courseType === "11" ? d.taskId : selectGrowth.value.id,
+          courseId: d.courseId ? d.courseId : d.info.id,
+          pName: selectGrowth.value.growthName,
+          sName: d.taskName,
+          chapterOrStageId: 0,
+        },
+      });
+  } else if (typeof TASK_TYPES.path[d.courseType] === "function") {
+    if (d.courseType == 5) {
+      let params = {
+        examType: d.info.examType,
+      };
+      window.open(
+        TASK_TYPES.path[d.courseType](params) + d.info.examinationTestId,
+        "_top"
+      );
+    } else {
+      let params = {
+        courseId: d.courseId ? d.courseId : d.info.id,
+        targetId: d.targetId ? d.targetId : "",
+      };
+      TASK_TYPES.path[d.courseType](params);
+    }
+  }
+}
+
+function toOffcoursePlanPage(item) {
+  let date1 = new Date(item.endTime).getTime();
+  let date2 = new Date().getTime();
+  if (date1 < date2) {
+    ElMessage.warning(`当前开课已结束`);
+    return;
+  }
+  window.open(
+    `${location.protocol}//${location.host}${
+      import.meta.env.VITE_BASE_API
+    }/stu/project/redirectDetail?courseId=${item.id}`,
+    "_top"
+  );
+}
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.f-a-c {
+  display: flex;
+  align-items: center;
+}
+
+.growth-list {
+  background: #f6f6fc;
+  :deep(.el-popper) {
+    z-index: 9999 !important;
+  }
+  :deep(.el-progress-bar__outer) {
+    background-color: #aeb3b8;
+  }
+  .nav-title {
+    position: absolute;
+    top: 75px;
+    // right: 80px;
+    left: 80px;
+    .growth-name {
+      display: flex;
+      align-items: center;
+      // font-weight: 700;
+      font-size: 20px;
+      color: #fff;
+      cursor: pointer;
+    }
+  }
+  .nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 80px;
+    background: #ffffff;
+    padding: 0 80px 0 62px;
+  }
+  .growth-name-type {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 25px 80px 14px 80px;
+    background-color: #f6f6fc;
+  }
+  .growth-name {
+    display: flex;
+    align-items: center;
+    font-weight: 700;
+    font-size: 20px;
+    color: #000000;
+    cursor: pointer;
+  }
+  .growth-path-container {
+    background-color: #ffffff;
+    min-height: 400px;
+  }
+
+  .growth-type {
+    display: flex;
+    align-items: baseline;
+    .type-item-list,
+    .type-item-path {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 80px;
+      height: 32px;
+      font-size: 14px;
+      font-weight: 700;
+    }
+    .type-item-list {
+      background: #ffffff;
+      border-radius: 6px 0px 0px 6px;
+      border: 1px solid #e3e5eb;
+      color: #666666;
+      cursor: pointer;
+    }
+    .type-item-path {
+      background: #0077ec;
+      border-radius: 0px 6px 6px 0px;
+
+      color: #ffffff;
+    }
+  }
+  .tabs {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .tabs-item {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      font-size: 16px;
+      color: #666666;
+      cursor: pointer;
+      font-weight: 700;
+      padding: 0 18px;
+    }
+    .tabs-line {
+      width: 66px;
+      height: 3px;
+      margin-top: 7px;
+    }
+    .active {
+      color: #0077ec;
+      font-size: 17px;
+      .tabs-line {
+        background-color: #1379f7;
+      }
+    }
+  }
+  .el-dialog__body {
+    width: 80%;
+  }
+  .el-dialog__header {
+    display: none;
+  }
+}
+</style>

src/views/homework/HomeworkPage.vue

@@ -584,7 +584,7 @@ const handleSub = () => {
     submitStartTime:answerTime
   })
 }
-handleSub()
+// handleSub()
 function clearFiles() {
   uploadRef.value.clearFiles();
 }

vite.config.js

@@ -14,7 +14,7 @@ const path = require('path')
 export default defineConfig(({ command, mode }) =>
 ({
 	base: loadEnv(mode, process.cwd()).VITE_BASE,
-	build:{
+	build: {
 		outDir: loadEnv(mode, process.cwd()).VITE_OUTPUT_DIR,
 	},
 	plugins: [
@@ -26,6 +26,7 @@ export default defineConfig(({ command, mode }) =>
 			promiseExportName: '__tla',
 			promiseImportName: i => `__tla_${i}`
 		}),
+		
 		// viteMockServe({
 		//     mockPath: './src/mock/mocks',
 		// })
@@ -36,7 +37,18 @@ export default defineConfig(({ command, mode }) =>
 		]
 	},
 	server: {
+		// host: "0.0.0.0",
 		proxy: {
+			// "/professional": {
+			// 	// target: 'http://192.168.16.195:32002',
+			// 	// target: 'http://192.168.150.97:32002',
+			// 	target: 'http://192.168.31.211:32002',
+			// 	changeOrigin: true,
+			//   },
+			'/growth': {
+				target: 'https://u-pre.boe.com',
+				changeOrigin: true,
+			},
 			'/file/upload': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
@@ -76,7 +88,7 @@ export default defineConfig(({ command, mode }) =>
 			'/vote': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'stu/project/redirectDetail':{
+			}, 'stu/project/redirectDetail': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
 
@@ -104,77 +116,77 @@ export default defineConfig(({ command, mode }) =>
 				changeOrigin: true,
 			}, '/link': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
-				changeOrigin: true, 
+				changeOrigin: true,
 			}, '/onlineClasses/queryOnlineClassesStudyDetail': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/external/exam/queryExternalExam': {
+			}, '/external/exam/queryExternalExam': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/link/getOne': {
+			}, '/link/getOne': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/evaluation/evaluationToLearn': {
+			}, '/evaluation/evaluationToLearn': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/evaluation/queryEvaluationDetailById': {
+			}, '/evaluation/queryEvaluationDetailById': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/statement/add': {
+			}, '/statement/add': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/statement/collection': {
+			}, '/statement/collection': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/statement/delete': {
+			}, '/statement/delete': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/statement/praise': {
+			}, '/statement/praise': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/statement/update': {
+			}, '/statement/update': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/statement/list': {
+			}, '/statement/list': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/stu/externalExam/submitExternalExam': {
+			}, '/stu/externalExam/submitExternalExam': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/comment/list': {
+			}, '/comment/list': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/comment/add': {
+			}, '/comment/add': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/comment/praise': {
+			}, '/comment/praise': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/comment/collection': {
+			}, '/comment/collection': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/statement/info': {
+			}, '/statement/info': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/statement/getComments': {
+			}, '/statement/getComments': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/statement/getMoreComments': {
+			}, '/statement/getMoreComments': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/vote/queryVoteById': {
+			}, '/vote/queryVoteById': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/evaluation/queryEvaluationTaskStatusOne': {
+			}, '/evaluation/queryEvaluationTaskStatusOne': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/vote/editVoteInvolvedAndBrowse': {
+			}, '/vote/editVoteInvolvedAndBrowse': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/stu/project/process': {
+			}, '/stu/project/process': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
-			},'/stu/project/rank_list/point_list': {
+			}, '/stu/project/rank_list/point_list': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
 			},