提交

src/api/growth/growthpath.js

@@ -0,0 +1,6 @@
+// import ajax from '@/utils/xajax.js'
+import ajax from '../ajax';
+const baseURL = '';
+
+// 查询专业力必修列表
+export const listData = (obj) => ajax.get(baseURL, '/professional/student/studentGrowthList', { params: obj })

src/components/UserCenter/menu.vue

@@ -14,7 +14,7 @@
         :default-active="activeMenu"
         router
         active-text-color="#3379FB"
-        :default-openeds="['manageTodo','manageFinish','teacherTodo','teacherFinish','lecturer','myqa','notice','mystudy', 'course', 'exam', 'u001', 'u002', 'u003', 'u004','mylecnotes','mycaseRecord']"
+        :default-openeds="['manageTodo','manageFinish','teacherTodo','teacherFinish','lecturer','myqa','notice','mystudy','myGrowth', 'course', 'exam', 'u001', 'u002', 'u003', 'u004','mylecnotes','mycaseRecord']"
         class="el-menu-vertical"
         @open="handleOpen"
         @close="handleClose"
@@ -242,6 +242,17 @@
           <svg-icon :icon-class="activeMenu == '/user/medal'?'myxunzhang-active':'myxunzhang'"></svg-icon>
           <span slot="title">我的勋章</span>
       </el-menu-item>
+      <el-submenu index="myGrowth" v-show="curIdentity == 1">
+          <template slot="title">
+            <!-- <i class="el-icon-s-grid"></i> -->
+            <img src="../../assets/images/myGrowth.jpg" style="width: 1em;height: 1em;margin-right: 8px;"></img>
+            <span>我的必修</span>
+          </template>
+          <el-menu-item index="/growth/growthPage">
+            <!-- <i class="el-icon-menu"></i> -->
+            <span slot="title" class="study textl">专业力必修</span>
+          </el-menu-item>
+        </el-submenu>
         <el-submenu index="mystudy" v-show="curIdentity == 1">
           <template slot="title">
             <!-- <i class="el-icon-s-grid"></i> -->

src/data/pages.js

@@ -82,6 +82,9 @@ export const pages=[
     {title:'学习路径图',path:'path',component:'study/StudyPath',hidden:false},
     {title:'学习项目',path:'project',component:'study/StudyProject',hidden:false}
   ]},
+  {title:'我的必修',path:'/growth',hidden:false,children:[
+    {title:'专业力必修',path:'growthPage',component:'growth/index',hidden:false},
+  ]},
   {title:'个人中心',path:'/uc',hidden:false,children:[
     {title:'首页',path:'index',component:'StudyIndex',hidden:false}
   ]},

src/views/growth/index.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="growth">
+    <header class="header">
+      <div class="f-a-c header-title">
+        <div style="margin-right: 8px">我的专业力必修</div>
+
+        <el-popover
+          placement="top-start"
+          width="400"
+          trigger="hover"
+          content="根据您所在的组织、标准岗位、任职资格等级，已为您匹配专业力必修任务，抓紧时间学习吧～"
+        >
+          <i
+            slot="reference"
+            style="color: #a1a1a1"
+            class="el-icon-question"
+          ></i>
+        </el-popover>
+      </div>
+      <template v-if="list.length">
+        <el-dropdown trigger="click">
+          <el-button type="primary">
+            <div class="f-a-c">
+              <div class="select-active">{{ selectData.growthName }}</div>
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </div>
+          </el-button>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item
+              v-for="item of list"
+              :disabled="item.id === selectData.id"
+            >
+              <div @click="select(item)">
+                {{ item.growthName }}
+              </div></el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </el-dropdown>
+      </template>
+    </header>
+
+    <section class="container">
+      <template v-if="list.length">
+        <div class="title">{{ selectData.growthName }}</div>
+        <div class="content">
+          <div class="tip">
+            <div class="tip-title f-a-c">
+              <img class="icon" src="../../assets/images/shuoming.jpg" />
+              <div>说明</div>
+            </div>
+            <div class="tip-text">
+              {{ selectData.description || "暂无说明" }}
+            </div>
+          </div>
+          <div class="progress">
+            <div class="progress-title f-a-c">
+              <img class="icon" src="../../assets/images/jindu.jpg" />
+              <div>学习进度</div>
+            </div>
+            <div class="progress-text">
+              <div class="progress-item">
+                <div class="item-title">总任务</div>
+                <div class="item-progress">{{ selectData.totalTaskNum }}个</div>
+              </div>
+              <div class="progress-item">
+                <div class="item-title">必修进度</div>
+                <div class="item-progress">
+                  <el-progress
+                    :stroke-width="12"
+                    :text-inside="true"
+                    :percentage="requiredTaskCompletionRate"
+                  ></el-progress>
+                  <div class="mask">
+                    {{ selectData.requiredTaskCompletedNum }}/{{
+                      selectData.requiredTaskNum
+                    }}
+                  </div>
+                </div>
+                <div class="item-text">{{ requiredTaskCompletionRate }}%</div>
+              </div>
+              <div class="progress-item">
+                <div class="item-title">选修进度</div>
+                <div class="item-progress">
+                  <el-progress
+                    :stroke-width="12"
+                    :text-inside="true"
+                    :percentage="electiveTaskCompletionRate"
+                  ></el-progress>
+                  <div class="mask">
+                    {{ selectData.electiveTaskCompletedNum }}/{{
+                      selectData.electiveTaskNum
+                    }}
+                  </div>
+                </div>
+                <div class="item-text">{{ electiveTaskCompletionRate }}%</div>
+              </div>
+              <div class="progress-item">
+                <div class="item-title">总进度</div>
+                <div class="item-progress">
+                  <el-progress
+                    :stroke-width="12"
+                    :text-inside="true"
+                    :percentage="totalTaskCompletionRate"
+                  ></el-progress>
+                  <div class="mask">
+                    {{ selectData.totalTaskCompletedNum }}/{{
+                      selectData.totalTaskNum
+                    }}
+                  </div>
+                </div>
+                <div class="item-text">{{ totalTaskCompletionRate }}%</div>
+              </div>
+            </div>
+          </div>
+          <div class="learning f-j-c">
+            <el-button style="width: 100px" type="primary" @click="jumpRouter">
+              学习
+            </el-button>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <el-empty :image-size="200"></el-empty>
+      </template>
+    </section>
+  </div>
+</template>
+<script>
+import { listData } from "@/api/growth/growthpath";
+export default {
+  data() {
+    return {
+      selectData: {},
+      list: [],
+    };
+  },
+  computed: {
+    // 完成进度
+    totalTaskCompletionRate() {
+      if (
+        this.selectData.totalTaskCompletedNum &&
+        this.selectData.totalTaskNum
+      ) {
+        let num =
+          this.selectData.totalTaskCompletedNum / this.selectData.totalTaskNum;
+        num = num * 100;
+        num = num.toFixed(0);
+        return Number(num);
+      } else {
+        return 0;
+      }
+    },
+    // 选修进度
+    electiveTaskCompletionRate() {
+      if (
+        this.selectData.electiveTaskCompletedNum &&
+        this.selectData.electiveTaskNum
+      ) {
+        let num =
+          this.selectData.electiveTaskCompletedNum /
+          this.selectData.electiveTaskNum;
+        num = num * 100;
+        num = num.toFixed(0);
+        return Number(num);
+      } else {
+        return 0;
+      }
+    },
+    // 必修进度
+    requiredTaskCompletionRate() {
+      if (
+        this.selectData.requiredTaskCompletedNum &&
+        this.selectData.requiredTaskNum
+      ) {
+        let num =
+          this.selectData.requiredTaskCompletedNum /
+          this.selectData.requiredTaskNum;
+        num = num * 100;
+        num = num.toFixed(0);
+        return Number(num);
+      } else {
+        return 0;
+      }
+    },
+  },
+  methods: {
+    select(item) {
+      this.selectData = item;
+    },
+    jumpRouter() {
+      //location.href=`${this.webBaseUrl}/course/boeframe?id=${item.cmtask_id}`;
+
+      //let urlPre=window.location.protocol+'//'+window.location.host;
+      let studentPath = process.env.VUE_APP_STUDENT_PATH;
+      if (this.selectData.template == 1) {
+        //路径图
+        let params = encodeURIComponent("routerId=" + this.selectData.id);
+        this.$router.push(
+          "/forward?to=" + studentPath + "/growthRoadmap&params=" + params
+        );
+      } else if (this.selectData.template == 2) {
+        //任务列表
+        let params = encodeURIComponent("routerId=" + this.selectData.id);
+        this.$router.push(
+          "/forward?to=" + studentPath + "/growthList&params=" + params
+        );
+      }
+    },
+  },
+  created() {
+    listData().then((res) => {
+      this.list = res.data;
+      this.selectData = this.list[0];
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.f-a-c {
+  display: flex;
+  align-items: center;
+}
+.f-j-c {
+  display: flex;
+  justify-content: center;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .header-title {
+    font-size: 24px;
+  }
+  .select-active {
+    font-size: 18px;
+    max-width: 300px;
+    white-space: nowrap; /* 防止文本换行 */
+    overflow: hidden; /* 隐藏溢出的内容 */
+    text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
+  }
+}
+.container {
+  .title {
+    margin-top: 30px;
+    padding: 25px 40px;
+    font-size: 18px;
+    color: rgb(51, 121, 251);
+    border: 1px solid #e2eefd;
+    border-bottom: none;
+    background-image: linear-gradient(to bottom, #e2eefd, #ffffff);
+  }
+  .content {
+    border: 1px solid #e2eefd;
+    padding: 25px 50px;
+    .icon {
+      width: 40px;
+      height: 40px;
+      margin-right: 10px;
+    }
+    .tip-title,
+    .progress-title {
+      font-size: 24px;
+      font-weight: 700;
+    }
+    .tip-text {
+      font-size: 18px;
+      line-height: 35px;
+      margin-top: 20px;
+    }
+    .tip-text,
+    .progress-text {
+      padding-left: 50px;
+    }
+    .progress-text {
+      .el-form-item {
+        margin-bottom: 0;
+      }
+    }
+    .progress {
+      margin-top: 40px;
+    }
+    .progress-item {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      margin-top: 20px;
+      .item-title {
+        width: 80px;
+        display: flex;
+        justify-content: flex-end;
+        margin-right: 20px;
+      }
+      .item-progress {
+        width: 400px;
+        position: relative;
+        .mask {
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          top: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 12px;
+        }
+      }
+      .item-text {
+        color: #409eff;
+      }
+      ::v-deep.el-progress-bar__innerText {
+        display: none;
+      }
+    }
+    .learning {
+      padding: 45px 0;
+    }
+  }
+}
+</style>

vue.config.js

@@ -85,28 +85,28 @@ module.exports = {
             .end()
           config
             .optimization.splitChunks({
-            chunks: 'all',
-            cacheGroups: {
-              libs: {
-                name: 'chunk-libs',
-                test: /[\\/]node_modules[\\/]/,
-                priority: 10,
-                chunks: 'initial' // only package third parties that are initially dependent
-              },
-              elementUI: {
-                name: 'chunk-elementUI', // split elementUI into a single package
-                priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-              },
-              commons: {
-                name: 'chunk-commons',
-                test: resolve('src/components'), // can customize your rules
-                minChunks: 3, //  minimum common number
-                priority: 5,
-                reuseExistingChunk: true
+              chunks: 'all',
+              cacheGroups: {
+                libs: {
+                  name: 'chunk-libs',
+                  test: /[\\/]node_modules[\\/]/,
+                  priority: 10,
+                  chunks: 'initial' // only package third parties that are initially dependent
+                },
+                elementUI: {
+                  name: 'chunk-elementUI', // split elementUI into a single package
+                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+                },
+                commons: {
+                  name: 'chunk-commons',
+                  test: resolve('src/components'), // can customize your rules
+                  minChunks: 3, //  minimum common number
+                  priority: 5,
+                  reuseExistingChunk: true
+                }
               }
-            }
-          })
+            })
           config.optimization.runtimeChunk('single'), {
             from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
             to: './', //到根目录下
@@ -124,6 +124,11 @@ module.exports = {
     // 114.115.162.187 测试环境
     // 192.168.0.107 晋宇
     proxy: {
+      "/professional": {
+        // target: 'http://192.168.16.195:32002',
+        target: 'http://192.168.150.97:32002',
+        changeOrigin: true,
+      },
       '/manageApi': {
         // 目标代理服务器地址
         target: 'https://u-pre.boe.com',