feat:新增社招新员工项目欢迎页与学习页面

package-lock.json

@@ -39,7 +39,8 @@
         "vue-pdf": "^4.2.0",
         "vue-quill-editor": "^3.0.6",
         "vue-router": "^3.5.2",
-        "vuex": "^3.6.2"
+        "vuex": "^3.6.2",
+        "wangeditor": "^4.7.15"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -1445,7 +1446,6 @@
       "version": "7.18.3",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.18.3.tgz",
       "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -1453,6 +1453,17 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime-corejs3": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.28.4.tgz",
+      "integrity": "sha512-h7iEYiW4HebClDEhtvFObtPmIvrd1SSfpI9EhOeKk4CtIK/ngBWFpuhCzhdmRKtg71ylcue+9I6dv54XYO1epQ==",
+      "dependencies": {
+        "core-js-pure": "^3.43.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.16.7",
       "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.16.7.tgz",
@@ -4621,6 +4632,16 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/core-js-pure": {
+      "version": "3.46.0",
+      "resolved": "https://registry.npmmirror.com/core-js-pure/-/core-js-pure-3.46.0.tgz",
+      "integrity": "sha512-NMCW30bHNofuhwLhYPt66OLOKTMbOhgTTatKVbaQC3KRHpTCiRIBYvtshr+NBYSnBxwAFhjW/RfJ0XbIjS16rw==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -11871,8 +11892,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
-      "dev": true
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.0",
@@ -15197,6 +15217,16 @@
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
       "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
     },
+    "node_modules/wangeditor": {
+      "version": "4.7.15",
+      "resolved": "https://registry.npmmirror.com/wangeditor/-/wangeditor-4.7.15.tgz",
+      "integrity": "sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@babel/runtime-corejs3": "^7.11.2",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@@ -17471,11 +17501,18 @@
       "version": "7.18.3",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.18.3.tgz",
       "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
     },
+    "@babel/runtime-corejs3": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.28.4.tgz",
+      "integrity": "sha512-h7iEYiW4HebClDEhtvFObtPmIvrd1SSfpI9EhOeKk4CtIK/ngBWFpuhCzhdmRKtg71ylcue+9I6dv54XYO1epQ==",
+      "requires": {
+        "core-js-pure": "^3.43.0"
+      }
+    },
     "@babel/template": {
       "version": "7.16.7",
       "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.16.7.tgz",
@@ -20272,6 +20309,11 @@
         }
       }
     },
+    "core-js-pure": {
+      "version": "3.46.0",
+      "resolved": "https://registry.npmmirror.com/core-js-pure/-/core-js-pure-3.46.0.tgz",
+      "integrity": "sha512-NMCW30bHNofuhwLhYPt66OLOKTMbOhgTTatKVbaQC3KRHpTCiRIBYvtshr+NBYSnBxwAFhjW/RfJ0XbIjS16rw=="
+    },
     "core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -26353,8 +26395,7 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
-      "dev": true
     },
     "regenerator-transform": {
       "version": "0.15.0",
@@ -29150,6 +29191,16 @@
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
       "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
     },
+    "wangeditor": {
+      "version": "4.7.15",
+      "resolved": "https://registry.npmmirror.com/wangeditor/-/wangeditor-4.7.15.tgz",
+      "integrity": "sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "@babel/runtime-corejs3": "^7.11.2",
+        "tslib": "^2.1.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

package.json

@@ -46,7 +46,8 @@
     "vue-pdf": "^4.2.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.5.2",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "wangeditor": "^4.7.15"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/api/new-employee/newEmployee.js

@@ -1,31 +1,90 @@
-import ajax from '@/api/boe/boeApiAjax.js'
+import ajax from '../ajax';
-
-/**
- * 获取嵌入课程信息
- * @param {Object} params - 参数对象
- * @param {string} params.course_id - 课程ID
- */
-export function enrollWork(params) {
-  return ajax.postJson('/boe/embed-work/complete-embed', params)
-}
-
-/**
- * 确认报名注册
- * @param {Object} data - 提交数据
- * @param {string} data.id - 项目ID
- * @param {string} data.method - 方法
- * @param {string} data.userId - 用户ID
- * @param {string} data.objectType - 对象类型
- * @param {FormData} data.formData - 表单数据
- */
-export function enrollRegSure(data) {
-  return ajax.postJson('/boe/enroll-data/reg-sure', data)
-}
 
 /**
  * 获取欢迎页数据
  */
 export function getWelcomeData() {
-  return ajax.get('/boe/new-employee/welcome')
+  return ajax.get('/manageApi/stu/project/socialRecruit/enroll/getStudentEnrollInfo')
+}
+
+/**
+ * 报名审批
+ */
+export function enrollRequest() {
+  return ajax.get('/manageApi/stu/project/socialRecruit/enroll/socialRecruitRegistrationRequest')
+}
+
+/**
+ * 获取学习列表
+ * @param {Object} params - 参数对象
+ * @param {string} params.type - 类型：''全部, 'course'在线课, 'exam'考试
+ * @param {string} params.status - 状态：''全部, 'completed'已完成, 'incomplete'未完成
+ * @param {number} params.pageIndex - 页码
+ * @param {number} params.pageSize - 每页条数
+ */
+export function getStudyList(params) {
+  return ajax.postJson('/boe/new-employee/study/list', params)
+}
+
+/**
+ * 获取学习进度
+ */
+export function getStudyProgress() {
+  return ajax.get('/boe/new-employee/study/progress')
+}
+
+/**
+ * 下载成绩单
+ */
+export function downloadScorecard() {
+  // 使用request方法支持responseType: 'blob'
+  return ajax.request({
+    url: '/boe/new-employee/study/scorecard/download',
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+/**
+ * 获取社招新员工项目信息
+ * GET
+ */
+export function getSzxygProjectInfo() {
+  return ajax.get('/manageApi/admin/project/getSzxygProjectInfo')
+}
+
+/**
+ * 社招新员工培训及考试列表查询
+ * POST
+ * @param {Object} params
+ * @param {number} params.pageNo - 页码
+ * @param {number} params.pageSize - 每页条数
+ * @param {string|number} params.studentId - 学员ID
+ * @param {string|number} params.projectId - 项目ID
+ */
+export function getStuProjectTaskList(data) {
+  return ajax.postJson('', '/manageApi/stu/project/getStuProjectTaskList', data)
+}
+
+/**
+ * 学员项目进度明细查询
+ * GET
+ * @param {string|number} projectId - 项目ID
+ */
+export function getStuProjectProcess(projectId) {
+  return ajax.get(`/manageApi/stu/project/process?projectId=${projectId}`)
+}
+
+/**
+ * 社招新员工培训在线课程成绩单下载
+ * GET
+ * @param {string|number} projectId - 项目ID
+ * @param {string|number} studentId - 学员ID
+ */
+export function downloadSocialRecruitReport(projectId, studentId) {
+  return ajax.request({
+    url: `/manageApi/stu/project/socialRecruit/report/download?projectId=${projectId}&studentId=${studentId}`,
+    method: 'get',
+    responseType: 'arraybuffer',
+  })
 }
 

src/components/NewEmployeeGuideDialog.vue

@@ -0,0 +1,183 @@
+<template>
+  <el-dialog
+    :visible.sync="innerVisible"
+    :close-on-click-modal="false"
+    class="custom-strategy-dialog"
+    width="880px"
+    @close="handleClose"
+  >
+    <div class="strategy-container">
+      <div class="strategy-content">
+        <div class="strategy-title">转正攻略</div>
+        <div class="strategy-body">
+          <RichTextEditor v-model="modalContent" />
+        </div>
+      </div>
+      <div class="strategy-footer-btns">
+        <el-button
+          class="footer-btn"
+          type="primary"
+          :loading="processing"
+          @click="handleConfirmClick"
+        >
+          立即学习
+        </el-button>
+        <el-button class="footer-btn" type="text" @click="handleCancelClick">
+          取消
+        </el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import RichTextEditor from "@/components/RichTextEditor.vue";
+import { getSzxygProjectInfo } from "@/api/new-employee/newEmployee";
+
+export default {
+  name: "NewEmployeeGuideDialog",
+  components: { RichTextEditor },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    processing: {
+      type: Boolean,
+      default: false,
+    },
+    onConfirm: {
+      type: Function,
+      default: null,
+    },
+    onCancel: {
+      type: Function,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      modalContent: "",
+      innerVisible: this.visible,
+      hasLoadedOnce: false,
+    };
+  },
+  watch: {
+    visible(val) {
+      this.innerVisible = val;
+      if (val) {
+        this.fetchContent();
+      }
+    },
+    innerVisible(val) {
+      if (val !== this.visible) {
+        this.$emit("update:visible", val);
+      }
+    },
+  },
+  mounted() {
+    if (this.visible) {
+      this.fetchContent();
+    }
+  },
+  methods: {
+    async fetchContent() {
+      if (this.hasLoadedOnce) return;
+      try {
+        const res = await getSzxygProjectInfo();
+        this.modalContent =
+          (res && res.data && res.data.learningGuideConfig) || "";
+        this.hasLoadedOnce = true;
+      } catch (e) {
+        // 保底：避免影响弹窗展示
+        this.modalContent = "";
+      }
+    },
+    handleConfirmClick() {
+      if (typeof this.onConfirm === "function") {
+        this.onConfirm();
+      } else {
+        // 默认行为：关闭并派发事件
+        this.innerVisible = false;
+        this.$emit("confirm");
+      }
+    },
+    handleCancelClick() {
+      if (typeof this.onCancel === "function") {
+        this.onCancel();
+      } else {
+        this.innerVisible = false;
+        this.$emit("cancel");
+      }
+    },
+    handleClose() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.custom-strategy-dialog >>> .el-dialog {
+  background: url("../assets/images/bg_yd.png");
+  background-size: cover;
+  border-radius: 18px;
+  overflow: hidden;
+  padding: 0;
+  box-shadow: 0 8px 32px rgba(0, 43, 121, 0.14);
+}
+.strategy-container {
+  position: relative;
+  min-height: 360px;
+  padding: 0px 40px 28px 40px;
+  border-radius: 18px;
+}
+.strategy-content {
+  position: relative;
+  z-index: 1;
+}
+.strategy-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #1e7cfa;
+  line-height: 32px;
+  margin-bottom: 18px;
+  text-align: left;
+  letter-spacing: 1px;
+}
+.strategy-body {
+  color: #444;
+  font-size: 15px;
+  min-height: 200px;
+  line-height: 2;
+  margin-bottom: 16px;
+  text-align: left;
+}
+.strategy-footer-btns {
+  display: flex;
+  margin-top: 18px;
+  z-index: 1;
+  position: relative;
+  gap: 14px;
+}
+.footer-btn {
+  min-width: 115px;
+  font-size: 16px;
+  border-radius: 6px;
+  height: 40px;
+}
+.footer-btn.el-button--primary {
+  background: linear-gradient(
+    90deg,
+    rgba(48, 116, 239, 1) 0%,
+    rgba(81, 146, 238, 1) 100%
+  );
+  border-color: #278cff;
+  color: #fff;
+  font-weight: bold;
+  width: 210px;
+  border-radius: 58px;
+}
+</style>
+
+

src/components/RichTextEditor.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="editor-wrap">
+    <div ref="editor" style="min-height: 200px"></div>
+  </div>
+</template>
+
+<script>
+import E from "wangeditor";
+
+export default {
+  name: "RichTextEditor",
+  props: {
+    value: { type: String, default: "" },
+  },
+  data() {
+    return {
+      editor: null,
+    };
+  },
+  mounted() {
+    const editor = new E(this.$refs.editor);
+    editor.config.zIndex = 1000;
+    editor.create();
+    editor.txt.html(this.value || "");
+    editor.disable(); // 只读
+    this.editor = editor;
+  },
+  watch: {
+    value(val) {
+      if (this.editor && val !== this.editor.txt.html()) {
+        this.editor.txt.html(val || "");
+      }
+    },
+  },
+  beforeDestroy() {
+    if (this.editor) {
+      this.editor.destroy();
+      this.editor = null;
+    }
+  },
+};
+</script>
+
+<style scoped>
+.editor-wrap {
+  width: 100%;
+}
+.editor-wrap >>> .w-e-toolbar {
+  display: none;
+}
+.editor-wrap >>> .w-e-text-container {
+  border: 0px !important;
+  background-color: rgba(0, 0, 0, 0);
+}
+</style>

src/router/index.js

@@ -375,6 +375,13 @@ export const constantRoutes = [{
   component: (resolve) => require(['@/views/new-employee/WelcomePage'], resolve),
   name: 'NewEmployeeWelcome',
   meta: { title: '社招新员工欢迎页', icon: 'dashboard', noCache: true, affix: false },
+},
+{
+  path: '/new-employee/study',
+  hidden: true,
+  component: (resolve) => require(['@/views/new-employee/StudyPage'], resolve),
+  name: 'NewEmployeeStudy',
+  meta: { title: '社招新员工学习页面', icon: 'dashboard', noCache: true, affix: false },
 }
 
 ]

src/views/new-employee/StudyPage.vue

@@ -0,0 +1,798 @@
+<template>
+  <div class="ne-study-page">
+    <div class="banner-header">
+      <portalHeader textColor="#fff" />
+    </div>
+    <!-- 顶部横幅与标题 -->
+    <div class="banner">
+      <div class="banner-inner">
+        <div class="title">社招新员工培训及考试</div>
+        <!-- 筛选条 -->
+        <div class="filters">
+          <div class="filter-group">
+            <span class="label">类型：</span>
+            <el-radio-group
+              v-model="flag"
+              @change="onTypeChange"
+              class="pill-radios"
+            >
+              <el-radio-button label="all">全部</el-radio-button>
+              <el-radio-button label="1">必修</el-radio-button>
+              <el-radio-button label="0">选修</el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="filter-group">
+            <span class="label">状态：</span>
+            <el-radio-group
+              v-model="status"
+              @change="onStatusChange"
+              class="pill-radios"
+            >
+              <el-radio-button label="all">全部</el-radio-button>
+              <el-radio-button label="0">未开始</el-radio-button>
+              <el-radio-button label="2">进行中</el-radio-button>
+              <el-radio-button label="1">已完成</el-radio-button>
+            </el-radio-group>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="content">
+      <!-- 左侧主区域 -->
+      <div class="main">
+        <!-- 列表：课程 -->
+        <div class="list" v-loading="loading">
+          <div
+            class="list-item card"
+            v-for="it in items"
+            :key="it.id"
+            @click="toLearn(it.courseId)"
+          >
+            <div style="margin-right: 16px">
+              <img
+                width="52px"
+                src="../../assets/images/course_icon.png"
+                alt=""
+              />
+            </div>
+            <div class="item-left">
+              <div>
+                <div class="title-box">
+                  <div class="item-title">{{ it.name }}</div>
+                  <!-- 右侧动作/成绩 -->
+                  <div
+                    class="item-right"
+                    :class="it.completed ? 'done' : 'link'"
+                  >
+                    <el-button
+                      v-if="!it.completed"
+                      type="text"
+                      style="color: #ffb01e"
+                      >进行中</el-button
+                    >
+                    <el-button
+                      v-else
+                      type="text"
+                      style="color: #27ce9a"
+                      disabled
+                      >已完成</el-button
+                    >
+                  </div>
+                </div>
+                <div class="tags">
+                  <span class="tag" :class="'tag-blue'"> 在线课 </span>
+                  <span v-if="it.flag" class="tag tag-green">必修</span>
+                  <span v-else class="tag tag-yellow">选修</span>
+                </div>
+                <div class="progress-wrap">
+                  <div class="progress">
+                    <div
+                      class="bar"
+                      :style="{ width: (it.currentRatio || 0) + '%' }"
+                    ></div>
+                  </div>
+                  <div class="percent">{{ it.currentRatio || 0 }}%</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 分页 -->
+          <div class="pagination">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :total="total"
+              :page-size="pageSize"
+              :current-page.sync="page"
+              @current-change="onPageChange"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧侧栏 -->
+      <div class="sidebar">
+        <div class="profile card">
+          <div
+            class="avatar"
+            :style="`background: url(${userInfo.avatar}) no-repeat;`"
+          ></div>
+          <div class="name">{{ userInfo.name }}</div>
+          <div class="desc">{{ userInfo.departName }}</div>
+          <div class="btns">
+            <el-button class="btn btn-outline" @click="onGuide"
+              >转正攻略</el-button
+            >
+          </div>
+          <div>
+            <el-alert
+              v-if="approvalResults == 2"
+              title="报名申请正在审核中"
+              type="primary"
+              center
+              show-icon
+              :closable="false"
+            />
+
+            <el-alert
+              v-if="approvalResults == 3"
+              title="报名申请审核已通过"
+              type="success"
+              center
+              show-icon
+              :closable="false"
+            />
+            <div style="cursor: pointer" @click="returnEnroll">
+              <el-alert
+                v-if="approvalResults == 4"
+                title="报名申请审核不通过，请重新报名"
+                type="error"
+                center
+                show-icon
+                :closable="false"
+              />
+            </div>
+          </div>
+          <div style="text-align: center">
+            <el-button type="text" @click="chartVisible = true"
+              >转正流程示意图 ></el-button
+            >
+          </div>
+          <div class="label">成绩单</div>
+          <div class="transcript">
+            <el-button class="btn btn-long" type="success" @click="onDownload"
+              >成 绩 下 载</el-button
+            >
+          </div>
+          <div class="label">学习进度</div>
+          <div class="progress-circles">
+            <div class="circle">
+              <div
+                class="ring"
+                :style="`background: conic-gradient(#0078FC 0 ${progressRing.total}%, #eef2f6 ${progressRing.total}%);`"
+              >
+                <span>{{ progressRing.total }}</span>
+              </div>
+              <div class="text">总进度</div>
+            </div>
+            <div class="circle">
+              <div
+                class="ring"
+                :style="`background: conic-gradient(#FFB01E 0 ${progressRing.required}%, #eef2f6 ${progressRing.required}%);`"
+              >
+                <span>{{ progressRing.required }}</span>
+              </div>
+              <div class="text">必修课进度</div>
+            </div>
+            <div class="circle">
+              <div
+                class="ring"
+                :style="`background: conic-gradient(#FFB01E 0 ${progressRing.elective}%, #eef2f6 ${progressRing.elective}%);`"
+              >
+                <span>{{ progressRing.elective }}</span>
+              </div>
+              <div class="text">选修课进度</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <portalFooter />
+    <portalFloatTools />
+    <!-- 学习引导弹窗 -->
+    <NewEmployeeGuideDialog
+      :visible.sync="guideDialogVisible"
+      @close="guideDialogVisible = false"
+    />
+    <!-- 转正流程图弹窗 -->
+    <el-dialog
+      :visible.sync="chartVisible"
+      :close-on-click-modal="false"
+      @close="chartVisible = false"
+    >
+      <div>
+        <!-- <el-image src="../../assets/images/flowchart.png" fit="fill" /> -->
+        <img width="100%" src="../../assets/images/flowchart.png" alt="" />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import portalHeader from "@/components/PortalHeader.vue";
+import portalFooter from "@/components/PortalFooter.vue";
+import portalFloatTools from "@/components/PortalFloatTools.vue";
+import NewEmployeeGuideDialog from "@/components/NewEmployeeGuideDialog.vue";
+import { mapGetters } from "vuex";
+import {
+  getWelcomeData,
+  getStuProjectTaskList,
+  getStuProjectProcess,
+  downloadSocialRecruitReport,
+  getSzxygProjectInfo,
+} from "@/api/new-employee/newEmployee";
+import { start } from "nprogress";
+
+export default {
+  name: "StudyPage",
+  components: {
+    portalHeader,
+    portalFooter,
+    portalFloatTools,
+    NewEmployeeGuideDialog,
+  },
+  data() {
+    return {
+      flag: "all",
+      status: "all",
+      page: 1,
+      pageSize: 10,
+      total: 0,
+      loading: false,
+      projectId: "",
+      studentId: "",
+      // 列表数据（课程/考试混合）
+      items: [],
+      // 进度环数据
+      progressRing: {
+        total: 0,
+        required: 0,
+        elective: 0,
+      },
+      // 学习引导弹窗
+      guideDialogVisible: false,
+      // 转正流程图弹窗
+      chartVisible: false,
+      approvalList: {
+        1: "报名失败",
+        2: "审核中",
+        3: "审核通过",
+        4: "审核失败",
+      },
+      approvalResults: 1,
+    };
+  },
+  computed: {
+    ...mapGetters(["userInfo"]),
+  },
+  methods: {
+    async initIds() {
+      // studentId 来自用户信息
+      this.studentId = this.userInfo?.aid || this.userInfo?.id || "";
+      const res = await getSzxygProjectInfo();
+      this.projectId = res.data.id || "";
+    },
+    async loadList() {
+      if (!this.studentId || !this.projectId) return;
+      this.loading = true;
+      try {
+        const res = await getStuProjectTaskList({
+          pageNo: this.page,
+          pageSize: this.pageSize,
+          studentId: this.studentId,
+          projectId: this.projectId,
+          status: this.status === "all" ? undefined : this.status,
+          flag: this.flag === "all" ? undefined : this.flag,
+        });
+        const payload = res?.data || {};
+        const records = payload.rows || [];
+        this.total = Number(payload.total || 0);
+        this.items = records;
+      } catch (e) {
+        this.$message.error("加载学习列表失败");
+      } finally {
+        this.loading = false;
+      }
+    },
+    async loadProcess() {
+      if (!this.projectId) return;
+      try {
+        const res = await getStuProjectProcess(this.projectId);
+        const data = res?.data || {};
+        const total = Number(data.totalProgress ?? 0) | 0;
+        const required = Number(data.compulsoryProgress ?? 0) | 0;
+        const elective = Number(data.electiveProgress ?? 0) | 0;
+        this.progressRing = {
+          total: total,
+          required: required,
+          elective: elective,
+        };
+      } catch (_) {
+        // 默认0
+        this.progressRing = { total: 0, required: 0, elective: 0 };
+      }
+    },
+    async onTypeChange() {
+      await this.loadList();
+    },
+    async onStatusChange() {
+      await this.loadList();
+    },
+    async onPageChange(p) {
+      this.page = p;
+      await this.loadList();
+    },
+    onGuide() {
+      this.guideDialogVisible = true;
+    },
+    toLearn(courseId) {
+      this.$router.push(
+        `/course/studyindex?id=${courseId}&newEmployee=${true}`
+      );
+    },
+    async onDownload() {
+      if (!this.projectId || !this.studentId) {
+        this.$message.warning("缺少项目信息或学员信息");
+        return;
+      }
+      if (this.approvalResults != 2) {
+        this.$message.warning(
+          "您的报名正在审核中，无法下载成绩单，请审核通过后下载"
+        );
+        return;
+      }
+      if (this.approvalResults != 4) {
+        this.$message.warning(
+          "请您重新报名，重新报名不影响当前学习进度，请在审核通过后下载成绩单"
+        );
+        return;
+      }
+      if (this.progressRing.total != 100) {
+        this.$message.warning("请您完成学习课程后下载成绩单");
+        return;
+      }
+      try {
+        const res = await downloadSocialRecruitReport(
+          this.projectId,
+          this.studentId
+        );
+        const blob = new Blob([res], { type: "application/pdf" });
+        const pdfUrl = URL.createObjectURL(blob);
+        window.open(pdfUrl);
+      } catch (e) {
+        this.$message.error("下载失败");
+      }
+    },
+    returnEnroll() {
+      this.$router.push("/new-employee/welcome");
+    },
+  },
+  async mounted() {
+    const res = await getWelcomeData();
+    // 社招新员工项目标识：0否，1是
+    if (res.data.approvalResults == 1) {
+      this.$message.error("未报名或报名失败，请前往报名页面进行报名");
+      this.$router.push("/new-employee/welcome");
+    }
+    // 1报名失败、2审核中、3审核通过、4审核失败
+    this.approvalResults = res.data.approvalResults;
+    await this.initIds();
+    if (!this.projectId || !this.studentId) {
+      this.$message.warning("未获得项目或学员信息，列表可能无法加载");
+    }
+    await Promise.all([this.loadList(), this.loadProcess()]);
+  },
+};
+</script>
+
+<style scoped>
+/* 颜色变量近似还原截图 */
+.ne-study-page {
+  font-family: "PingFang SC", "Helvetica Neue", Arial, "Microsoft YaHei",
+    sans-serif;
+  color: #2b2f36;
+  background: #f4f6f9;
+}
+
+.banner-header {
+  background: #0f80ff;
+}
+.banner {
+  background: #0f80ff;
+  padding-top: 36px;
+}
+.banner-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px 16px 0px;
+}
+.title {
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.content {
+  max-width: 1200px;
+  margin: 16px auto 40px;
+  padding: 0 16px;
+  display: flex;
+  gap: 16px;
+}
+.main {
+  flex: 1;
+}
+.sidebar {
+  width: 360px;
+  margin-top: -70px;
+}
+
+.card {
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+}
+
+/* 筛选条 */
+.filters {
+  padding: 8px 12px;
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  background: #ffffff;
+  border-radius: 8px 8px 0 0;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+  width: 68%;
+}
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.label {
+  color: #333333;
+  font-size: 14px;
+  font-weight: bold;
+  margin: 24px 0px 12px;
+}
+.pills {
+  display: flex;
+  gap: 8px;
+}
+.pill {
+  padding: 6px 12px;
+  border-radius: 16px;
+  background: #f3f5f8;
+  color: #4b5563;
+  font-size: 12px;
+  cursor: default;
+}
+.pill.active {
+  background: #e6f1ff;
+  color: #0f80ff;
+  border: 1px solid #b3d4ff;
+}
+
+/* 列表 */
+.list {
+  margin-top: 12px;
+}
+.list-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+  margin-bottom: 12px;
+  transition: transform 0.08s ease, box-shadow 0.12s ease,
+    background-color 0.12s ease;
+  cursor: pointer;
+}
+.list-item:hover,
+.list-item:active {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
+  background-color: #ffffff;
+}
+/* 触摸设备：点按反馈 */
+@media (hover: none) {
+  .list-item:active {
+    transform: scale(0.995);
+    background-color: #f8fbff;
+  }
+}
+.item-left {
+  flex: 1;
+}
+
+.title-box {
+  display: flex;
+  justify-content: space-between;
+}
+
+.item-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: #2b2f36;
+}
+.tags {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.tag {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  color: #0f80ff;
+  background: #eaf3ff;
+}
+.tag-green {
+  color: #27ce9a;
+  background: #e9fbf3;
+}
+.tag-yellow {
+  color: #ffb01e;
+  background: #ffecec;
+}
+.tag-blue {
+  color: #0f80ff;
+  background: #eaf3ff;
+}
+
+.progress-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.progress {
+  position: relative;
+  flex: 1;
+  height: 8px;
+  background: #eff2f6;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background: #19c37d;
+  border-radius: 4px;
+}
+.w-8 {
+  width: 8%;
+  background: #ffb74d;
+}
+.w-40 {
+  width: 40%;
+  background: #2fa3ff;
+}
+.w-100 {
+  width: 100%;
+  background: #19c37d;
+}
+.percent {
+  font-size: 12px;
+  color: #8a8f99;
+  width: 42px;
+  text-align: right;
+}
+
+.item-right {
+  min-width: 72px;
+  text-align: right;
+  font-size: 14px;
+}
+.item-right.link {
+  color: #0f80ff;
+}
+.item-right.done {
+  color: #8a8f99;
+}
+.item-right.score {
+  font-weight: 700;
+}
+.item-right.score.good {
+  color: #19c37d;
+}
+.item-right.score.bad {
+  color: #ff5a5f;
+}
+
+/* 分页 */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 0 4px;
+}
+.pg {
+  min-width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #4b5563;
+  font-size: 12px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+}
+.pg.btn {
+  padding: 0 8px;
+}
+.pg.active {
+  background: #0f80ff;
+  color: #ffffff;
+}
+
+/* 细化 text 按钮与原页面链接的一致性 */
+.item-right >>> .el-button--text {
+  padding: 0;
+  color: inherit;
+  font-weight: inherit;
+}
+.item-right.link >>> .el-button--text {
+  color: #0f80ff;
+}
+.item-right.done >>> .el-button--text {
+  color: #8a8f99;
+}
+.item-right.score.good >>> .el-button--text {
+  color: #19c37d;
+}
+.item-right.score.bad >>> .el-button--text {
+  color: #ff5a5f;
+}
+
+/* 单选按钮组胶囊皮肤（替代 Tabs），保持外观一致 */
+.pill-radios {
+  padding-top: 8px;
+}
+.pill-radios >>> .el-radio-button__inner {
+  background: #f3f5f8;
+  color: #4b5563;
+  font-size: 12px;
+  padding: 6px 12px;
+  border-radius: 16px !important;
+  border: 1px solid transparent;
+  box-shadow: none;
+  margin-right: 8px;
+}
+.pill-radios
+  >>> .el-radio-button__orig-radio:checked
+  + .el-radio-button__inner {
+  background: #e6f1ff;
+  color: #0f80ff;
+  border-color: #b3d4ff;
+  box-shadow: none;
+}
+.pill-radios >>> .el-radio-button__inner:hover {
+  filter: brightness(0.98);
+}
+.pill-radios >>> .el-radio-button__inner::before,
+.pill-radios >>> .el-radio-button__inner::after {
+  display: none;
+}
+
+/* 侧栏 */
+.profile {
+  padding: 20px 16px;
+}
+.avatar {
+  width: 80px;
+  height: 80px;
+  background: #d9e8ff;
+  border-radius: 50%;
+  margin: -48px auto 12px;
+  border: 6px solid #ffffff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+.name {
+  text-align: center;
+  font-weight: 700;
+  color: #2b2f36;
+}
+.desc {
+  text-align: center;
+  color: #8a8f99;
+  font-size: 12px;
+  margin-top: 4px;
+}
+.btns {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  margin-top: 14px;
+  margin-bottom: 16px;
+}
+.btn {
+  width: 100% !important;
+  height: 36px;
+  padding: 0 14px;
+  border-radius: 8px;
+  border: none;
+  font-weight: 600;
+}
+.btn-outline {
+  background: #ffffff;
+  color: rgba(0, 120, 252, 1);
+  border: 1px solid rgba(0, 120, 252, 1);
+  width: 120px;
+}
+.transcript {
+  text-align: center;
+}
+.transcript .label {
+  color: #8a8f99;
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+.btn-long {
+  width: 100%;
+  height: 40px;
+  border-radius: 8px;
+  background: #1ac07f;
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(26, 192, 127, 0.35);
+}
+
+.progress-circles {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+}
+.circle {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  width: 32%;
+}
+.ring {
+  width: 84px;
+  height: 84px;
+  border-radius: 50%;
+  background: conic-gradient(#d9dfe7 0 65%, #eef2f6 65%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #4b5563;
+  font-weight: 700;
+}
+.ring span {
+  background: #ffffff;
+  width: 66px;
+  height: 66px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: inset 0 0 0 6px #ffffff;
+}
+.circle .text {
+  font-size: 12px;
+  color: #8a8f99;
+  text-align: center;
+}
+</style>
+
+

src/views/new-employee/WelcomePage.vue

@@ -31,7 +31,7 @@
           </div>
           <div class="col-md-12 send_btn">
             <button
-              v-if="enrollBtn === 'enroll' || enrollBtn === 'end'"
+              v-if="approvalResults == '1' || approvalResults == '4'"
               class="btn btn-default btn-lg send center-block start-btn"
               @click="handleEnrollClick"
             >
@@ -40,11 +40,18 @@
             <button
               v-else
               class="btn btn-default btn-lg send center-block start-btn"
-              @click="handleStartLearning"
+              @click="handleEnrollClick"
             >
               开启学习之旅
             </button>
-            <p style="color: #ffe551; font-size: 14px; font-family: '黑体'">
+            <p
+              style="
+                color: #ffe551;
+                font-size: 14px;
+                font-family: '黑体';
+                margin-top: 20px;
+              "
+            >
               温馨提示：仅社招新员工可以报名，校招新员工和其他员工请不要点击
             </p>
           </div>
@@ -52,63 +59,33 @@
       </div>
     </div>
 
-    <!-- 模态框（Modal）--信息确认 -->
+    <!-- 学习引导页面 -->
-    <el-dialog
+    <NewEmployeeGuideDialog
-      title="信息确认"
       :visible.sync="infoConfirmDialogVisible"
-      :close-on-click-modal="false"
+      :processing="processing"
-      width="700px"
+      :onConfirm="handleConfirm"
+      :onCancel="() => (infoConfirmDialogVisible = false)"
       @close="handleDialogClose"
-    >
+    />
-      <div v-html="modalContent"></div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="infoConfirmDialogVisible = false">取 消</el-button>
-        <el-button type="primary" :loading="processing" @click="handleConfirm">
-          {{ confirmBtnText }}
-        </el-button>
-      </span>
-    </el-dialog>
-
-    <!-- 模态框（Modal)--数据提交成功 -->
-    <el-dialog
-      :title="modalTitle"
-      :visible.sync="successDialogVisible"
-      :close-on-click-modal="false"
-      width="500px"
-    >
-      <div style="text-align: center; padding: 20px 0">
-        {{ successMessage }}
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="successDialogVisible = false">确 定</el-button>
-      </span>
-    </el-dialog>
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
-import {
+import { getWelcomeData, enrollRequest } from "@/api/new-employee/newEmployee";
-  enrollWork,
+import NewEmployeeGuideDialog from "@/components/NewEmployeeGuideDialog.vue";
-  enrollRegSure,
-  getWelcomeData,
-} from "@/api/new-employee/newEmployee";
 
 export default {
   name: "WelcomePage",
+  components: { NewEmployeeGuideDialog },
   data() {
     return {
       userName: "",
-      enrollBtn: "",
-      enrollCode: "",
       projectId: "",
-      modalContent: "",
+      approvalResults: 1,
-      modalTitle: "",
       processing: false,
       confirmBtnText: "确认",
       infoConfirmDialogVisible: false,
-      successDialogVisible: false,
-      successMessage: "",
     };
   },
   computed: {
@@ -123,95 +100,35 @@ export default {
     async initPageData() {
       try {
         // 从后端获取用户信息和报名状态
-        const response = await getWelcomeData();
+        const res = await getWelcomeData();
-        if (response.status === 200) {
+        if (res.status === 200 && res.data) {
-          this.userName = response.result.user_name || this.userInfo.name;
+          this.userName = res.data.studentName;
-          this.enrollBtn = response.result.enroll.btn;
+          // 1报名失败、2审核中、3审核通过、4审核失败
-          this.enrollCode = response.result.enroll.code;
+          if (res.data.approvalResults) {
-          this.projectId = response.result.project_id;
+            this.approvalResults = res.data.approvalResults;
-          this.modalTitle = response.result.enroll.title;
+          }
         }
       } catch (error) {
         console.error("初始化数据失败:", error);
-        // 临时测试数据，实际使用时从后端获取
-        this.userName = this.userInfo.name || "新员工";
-        this.enrollBtn = "enroll";
-        this.enrollCode = "10";
-        this.projectId = "123";
-        this.modalTitle = "报名成功";
       }
     },
 
-    // 开启学习之旅按钮点击
-    handleStartLearning() {
-      this.$router.push("/study/index");
-    },
-
     // 报名按钮点击
     async handleEnrollClick() {
-      if (this.enrollBtn === "enroll" || this.enrollBtn === "sureBtn") {
+      this.infoConfirmDialogVisible = true;
-        await this.embedCourse();
-      } else if (this.enrollBtn === "end") {
-        this.showEndModal();
-      }
-    },
-
-    // 嵌入课程信息
-    async embedCourse() {
-      try {
-        const response = await enrollWork({ course_id: this.projectId });
-
-        if (this.enrollCode === "10" || this.enrollCode === "") {
-          this.modalContent = response.result;
-          this.infoConfirmDialogVisible = true;
-        } else {
-          this.$message.warning("报名信息异常");
-        }
-      } catch (error) {
-        console.error("获取嵌入信息失败:", error);
-        this.$message.error("获取报名信息失败");
-      }
     },
 
     // 确认按钮
     async handleConfirm() {
-      this.processing = true;
-      this.confirmBtnText = "正在确认，请稍后......";
-
-      // 获取费用计算地选择
-      const jsdVal = document.querySelector(
-        "#childselect > option:selected"
-      )?.value;
-      if (!jsdVal) {
-        this.processing = false;
-        this.confirmBtnText = "确认";
-        this.$message.error("费用计算地不可为空!");
-        return false;
-      }
-
       try {
-        // 构建表单数据
+        if (this.approvalResults == "1" || this.approvalResults == "4") {
-        const formData = {
+          const res = await enrollRequest();
-          id: this.projectId,
+          if (res.data.sendToOaSuccess != 0) {
-          method: "self",
+            this.$message.error("报名失败，请联系XXXX，联系方式：XXXXXX");
-          userId: this.userInfo.aid,
+            return;
-          objectType: "project",
+          }
-        };
-
-        const response = await enrollRegSure(formData);
-
-        if (response.status === 200) {
-          this.infoConfirmDialogVisible = false;
-          this.$message.success("报名成功！");
-          // 跳转到学习页面
-          setTimeout(() => {
-            this.$router.push("/study/index");
-          }, 1500);
-        } else {
-          this.processing = false;
-          this.confirmBtnText = "确认";
-          this.$message.error(response.message || "报名失败");
         }
+        this.$router.push("/new-employee/study");
       } catch (error) {
         console.error("提交失败:", error);
         this.processing = false;
@@ -220,12 +137,6 @@ export default {
       }
     },
 
-    // 显示结束模态框
-    showEndModal() {
-      this.successMessage = "报名已结束";
-      this.successDialogVisible = true;
-    },
-
     // 关闭对话框
     handleDialogClose() {
       this.processing = false;
@@ -247,6 +158,7 @@ export default {
 
 /* 顶部标题 */
 .top-title {
+  /* 左移整个屏幕的1/4 */
   font-size: 48px;
   font-weight: bold;
   color: white;
@@ -254,6 +166,7 @@ export default {
   margin: 40px 20px 60px;
   font-family: "Microsoft YaHei", sans-serif;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  margin-left: -25%;
 }
 
 /* 主内容卡片 */
@@ -330,21 +243,22 @@ export default {
 }
 
 .start-btn {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
+  background: #2e5aa6;
+  border: 5px solid #6e88b5;
   color: white;
-  border: none;
   padding: 15px 50px;
   font-size: 20px;
-  border-radius: 50px;
+  border-radius: 4px;
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+  /* box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); */
 }
 
 .start-btn:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+  /* box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
-  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); */
 }
 
 .start-btn:active {

src/views/study/TaskList.vue

@@ -1,186 +1,254 @@
 <template>
   <div>
-     <!-- <div style="display:flex; padding-left:20px; width:100%">
+    <!-- <div style="display:flex; padding-left:20px; width:100%">
       <div style="width:100px">完成情况</div>
       <div class="progress"><div class="msg">课程完成情况</div> <el-progress :text-inside="true" :stroke-width="16" :percentage="porcessData.course"  status="warning" class="progressItem"> </el-progress> </div>
       <div class="progress" ><div class="msg">项目完成情况</div> <el-progress :text-inside="true" :stroke-width="16" :percentage="porcessData.project" status="success" class="progressItem"> </el-progress>  </div>
       <div class="progress"><div class="msg">路径图完成情况</div> <el-progress :text-inside="true" :stroke-width="16" :percentage="porcessData.router" class="progressItem"> </el-progress>  </div>
      
       </div> -->
-    <div style="display: flex; justify-content: space-between; padding: 12px 32px 10px 22px;">
+    <div
+      style="
+        display: flex;
+        justify-content: space-between;
+        padding: 12px 32px 10px 22px;
+      "
+    >
       <div style="display: flex; justify-content: flex-start">
         <div>
-          <el-select class="search-input" v-model="status" clearable placeholder="学习进度">
+          <el-select
+            class="search-input"
+            v-model="status"
+            clearable
+            placeholder="学习进度"
+          >
             <el-option label="全部" value=""></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>
         </div>
-        <div style="padding-left: 10px"><el-input v-model="params.cmtask_name" clearable placeholder="搜索名称"></el-input></div>
+        <div style="padding-left: 10px">
-        <div class="button-class" style="padding-left: 10px"><el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button></div>
+          <el-input
-        <div class="button-class" style="padding-left: 10px"><el-button type="primary" icon="el-icon-refresh-right"  @click="reset()">重置</el-button></div>
+            v-model="params.cmtask_name"
+            clearable
+            placeholder="搜索名称"
+          ></el-input>
+        </div>
+        <div class="button-class" style="padding-left: 10px">
+          <el-button type="primary" icon="el-icon-search" @click="search()"
+            >搜索</el-button
+          >
+        </div>
+        <div class="button-class" style="padding-left: 10px">
+          <el-button
+            type="primary"
+            icon="el-icon-refresh-right"
+            @click="reset()"
+            >重置</el-button
+          >
+        </div>
       </div>
     </div>
     <!--课程列表内容-->
     <div class="uc-list" v-if="couresList.length > 0">
-      <div class="uc-course" v-for="(item, idx) in couresList" @click="jumpRouter(item)" :key="idx">
+      <div
+        class="uc-course"
+        v-for="(item, idx) in couresList"
+        @click="jumpRouter(item)"
+        :key="idx"
+      >
         <div class="uc-course-img">
           <img :src="item.cmtask_imgurl" />
-          <span class="spanname" v-if="item.cmtask_type==1">学习路径图</span>
+          <span class="spanname" v-if="item.cmtask_type == 1">学习路径图</span>
-          <span class="spanname" v-if="item.cmtask_type==2">学习项目</span>
+          <span class="spanname" v-if="item.cmtask_type == 2">学习项目</span>
           <!-- 类型3不显示，20230307 东吴说已确认的修改 -->
-         <!-- <span class="spanname" v-if="item.cmtask_type==3">老系统必修任务</span> -->
+          <!-- <span class="spanname" v-if="item.cmtask_type==3">老系统必修任务</span> -->
         </div>
         <div class="uc-course-info">
           <!-- 任务名称 -->
           <div class="uc-course-name one-line-ellipsis" style="cursor: pointer">
-            <span v-if="item.type==10" class="uc-course-type2">录播</span>
+            <span v-if="item.type == 10" class="uc-course-type2">录播</span>
-            <span v-if="item.type==20" class="uc-course-type2">录播</span>
+            <span v-if="item.type == 20" class="uc-course-type2">录播</span>
             <!-- <a href="/course/detail?id=" target="_blank"> {{item.name}}</a> -->
             <span v-html="item.cmtask_name"></span>
           </div>
           <!-- <div class="uc-course-source" @click="jumpRouter(item)">来源：{{ item.cmtask_name }}</div> -->
-          <div style="padding-top: 18px; " class="uc-course-text">学习进度：
+          <div style="padding-top: 18px" class="uc-course-text">
-            <span v-if="item.cmtask_user_status==0">未开始</span>
+            学习进度：
-            <span v-if="item.cmtask_user_status==1">进行中</span>
+            <span v-if="item.cmtask_user_status == 0">未开始</span>
-            <span v-if="item.cmtask_user_status==2">已完成</span>
+            <span v-if="item.cmtask_user_status == 1">进行中</span>
+            <span v-if="item.cmtask_user_status == 2">已完成</span>
           </div>
           <!-- <div class="uc-course-time">推送时间：{{ formatsec(Number(item.updated_at)  * 1000 )}}</div> -->
-          <div class="uc-course-time">推送时间：{{ item.created_at}}</div>
+          <div class="uc-course-time">推送时间：{{ item.created_at }}</div>
         </div>
         <div class="uc-course-btns">
-          <el-button @click="jumpRouter(item)" type="primary" size="small">开始学习</el-button>
+          <el-button @click="jumpRouter(item)" type="primary" size="small"
+            >开始学习</el-button
+          >
         </div>
       </div>
-      <div style="height:150px;  text-align: center;  margin-top:57px;" >
+      <div style="height: 150px; text-align: center; margin-top: 57px">
-        <el-pagination background
+        <el-pagination
-            @size-change="handleSizeChange"
+          background
-            @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
-            :page-sizes="[10, 20, 30, 40]"
+          @current-change="handleCurrentChange"
-            :current-page="page"
+          :page-sizes="[10, 20, 30, 40]"
-            :page-size="size"
+          :current-page="page"
-            layout="total, sizes, prev, pager, next, jumper"
+          :page-size="size"
-            :total="total">
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
         </el-pagination>
       </div>
-
+    </div>
-     </div>
     <!-- </div> -->
     <div v-else class="zan-wu">
-        <div v-if="loading">
+      <div v-if="loading">
-            <span v-if="couresList.length==0">正在加载数据...</span>
+        <span v-if="couresList.length == 0">正在加载数据...</span>
-            <span v-else>查询中...</span>
+        <span v-else>查询中...</span>
-        </div>
+      </div>
-        <div v-else>
+      <div v-else>
-          <span v-if="couresList.length==0">没有查询到相关内容</span>
+        <span v-if="couresList.length == 0">没有查询到相关内容</span>
-        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import studyItem from '@/components/Course/studyItem.vue';
+import studyItem from "@/components/Course/studyItem.vue";
-import apiManage from '@/api/manage/manage.js'
+import apiManage from "@/api/manage/manage.js";
-import { getToken } from '@/utils/token'
+import { getToken } from "@/utils/token";
-import {formatsec} from '@/utils/datetime.js'
+import { formatsec } from "@/utils/datetime.js";
-import axios from 'axios'
+import axios from "axios";
 export default {
-  name: 'ucStudyTask',
+  name: "ucStudyTask",
   components: { studyItem },
   data() {
     return {
-      status: '',
+      status: "",
-      params:{
+      params: {
-         cmtask_name:'',
+        cmtask_name: "",
-         cmtask_status:'',
+        cmtask_status: "",
-         type:'',
+        type: "",
       },
-      porcessData:{
+      porcessData: {
-        course:0,
+        course: 0,
-        project:0,
+        project: 0,
-        router:0,
+        router: 0,
       },
-      loading:true,
+      loading: true,
-      size:10,
+      size: 10,
-      page:1,
+      page: 1,
-      keyword:'',
+      keyword: "",
       formatsec,
-      couresList:[],
+      couresList: [],
-      total: 0
+      total: 0,
     };
   },
   mounted() {
-   this.loadBoeData();
+    this.loadBoeData();
-   this.getPossData()
+    this.getPossData();
   },
   methods: {
     jumpRouter(item) {
+      if (item.szxygProjectFlag == 1) {
+        this.$router.push("/new-employee/study");
+        return;
+      }
       //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;
+      let studentPath = process.env.VUE_APP_STUDENT_PATH;
-      if(item.cmtask_type==1){ //学习路径图
+      if (item.cmtask_type == 1) {
-         let params=encodeURIComponent('routerId='+item.cmtask_id);
+        //学习路径图
-         //this.$router.push('/forward?to='+studentPath+'/pathdetails&params='+params);
+        let params = encodeURIComponent("routerId=" + item.cmtask_id);
-         this.$router.push('/forward?to='+studentPath+'/pathchapterdetails&params='+params);
+        //this.$router.push('/forward?to='+studentPath+'/pathdetails&params='+params);
-      }else if(item.cmtask_type==2){ //学习项目
+        this.$router.push(
-         let params=encodeURIComponent('projectId='+item.cmtask_id);
+          "/forward?to=" + studentPath + "/pathchapterdetails&params=" + params
-         this.$router.push('/forward?to='+studentPath+'/projectdetails&params='+params);
+        );
-      }else if(item.cmtask_type==3){
+      } else if (item.cmtask_type == 2) {
-         let pushUrl=`/course/boeframe?id=${item.cmtask_id}&type=3`;
+        //学习项目
-         this.$router.push(pushUrl);
+        let params = encodeURIComponent("projectId=" + item.cmtask_id);
+        this.$router.push(
+          "/forward?to=" + studentPath + "/projectdetails&params=" + params
+        );
+      } else if (item.cmtask_type == 3) {
+        let pushUrl = `/course/boeframe?id=${item.cmtask_id}&type=3`;
+        this.$router.push(pushUrl);
       }
     },
-  getPossData(){
+    getPossData() {
-       axios({
+      axios({
         method: "POST",
-        url: '/report/boeu/studyInfo',
+        url: "/report/boeu/studyInfo",
         params: {},
-        headers:{token:getToken(),}
+        headers: { token: getToken() },
       }).then((res) => {
-        console.log('111',res.data.result)
+        console.log("111", res.data.result);
         // this.porcessData=response.data.data
-        this.porcessData.course=Math.floor(res.data.result.course.total === 0 ? 0: (res.data.result.course.completion/res.data.result.course.total)*100)
+        this.porcessData.course = Math.floor(
-        this.porcessData.project=Math.floor(res.data.result.project.total === 0 ? 0: (res.data.result.project.completion/res.data.result.project.total)*100)
+          res.data.result.course.total === 0
-        this.porcessData.router=Math.floor(res.data.result.router.total === 0 ? 0: (res.data.result.router.completion/res.data.result.router.total)*100)
+            ? 0
-      })
+            : (res.data.result.course.completion /
+                res.data.result.course.total) *
+                100
+        );
+        this.porcessData.project = Math.floor(
+          res.data.result.project.total === 0
+            ? 0
+            : (res.data.result.project.completion /
+                res.data.result.project.total) *
+                100
+        );
+        this.porcessData.router = Math.floor(
+          res.data.result.router.total === 0
+            ? 0
+            : (res.data.result.router.completion /
+                res.data.result.router.total) *
+                100
+        );
+      });
     },
     loadBoeData() {
-      if(this.status !== '5') {
+      if (this.status !== "5") {
         this.params.cmtask_status = this.status;
       }
-      let params={
+      let params = {
-          pageNo:this.page,
+        pageNo: this.page,
-          pageSize:this.size,
+        pageSize: this.size,
-          cmtask_user_status:this.params.cmtask_status,
+        cmtask_user_status: this.params.cmtask_status,
-          cmtask_name:this.params.cmtask_name,
+        cmtask_name: this.params.cmtask_name,
-        }
+      };
-      this.loading=true;
+      this.loading = true;
-      apiManage.userTaskList(params).then(res=>{
+      apiManage
-        if(res.code==200){
+        .userTaskList(params)
-             this.total =parseInt(res.data.total);
+        .then((res) => {
-             this.couresList = res.data.records;
+          if (res.code == 200) {
-           }else{
+            this.total = parseInt(res.data.total);
-             this.$message.error('查询数据失败：'+res.msg);
+            this.couresList = res.data.records;
-           }
+          } else {
-           this.loading=false;
+            this.$message.error("查询数据失败：" + res.msg);
-        }).catch(()=>{
+          }
-           this.loading=false;
+          this.loading = false;
         })
+        .catch(() => {
+          this.loading = false;
+        });
     },
-    search(){
+    search() {
-      this.page=1;
+      this.page = 1;
-      this.loadBoeData()
+      this.loadBoeData();
     },
     reset() {
-       this.loading=false;
+      this.loading = false;
-       this.params.cmtask_name = '',
+      (this.params.cmtask_name = ""),
-       this.params.type = '',
+        (this.params.type = ""),
-       this.params.cmtask_status = ''
+        (this.params.cmtask_status = "");
-       this.status = '';
+      this.status = "";
-       this.page=1;
+      this.page = 1;
-       this.loadBoeData();
+      this.loadBoeData();
     },
     handleSizeChange(value) {
       this.size = value;
@@ -190,25 +258,25 @@ export default {
     handleCurrentChange(value) {
       this.page = value;
       this.loadBoeData();
-    }
+    },
-  }
+  },
 };
 </script>
 
 <style scoped lang="scss">
-.progress{
+.progress {
-  width:calc((100% - 100px) / 3);
+  width: calc((100% - 100px) / 3);
   display: flex;
-  .msg{
+  .msg {
-  width:120px;
+    width: 120px;
   }
-  .progressItem{
+  .progressItem {
     margin-left: 20px;
-   width:calc(100% - 160px);
+    width: calc(100% - 160px);
-  height: 10px;
+    height: 10px;
   }
 }
-.zan-wu{
+.zan-wu {
   text-align: center;
   font-size: 20px;
   margin-top: 70px;
@@ -218,19 +286,19 @@ export default {
   display: -webkit-box;
   white-space: pre-wrap;
   overflow: hidden;
-  text-overflow:ellipsis;
+  text-overflow: ellipsis;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   box-sizing: border-box;
 }
-.button-class{
+.button-class {
   // height: 42px;
 }
 
-.uc-list{
+.uc-list {
   padding-left: 22px;
 }
-.uc-course-time{
+.uc-course-time {
   color: #666;
   font-size: 14px;
 }
@@ -238,23 +306,23 @@ export default {
   margin-top: 10px;
   margin-right: 40px;
 }
- .spanname {
+.spanname {
-      position: absolute;
+  position: absolute;
-      background-color: #6a99a4;
+  background-color: #6a99a4;
-      color:#ffffff;
+  color: #ffffff;
-      padding: 4px 10px;
+  padding: 4px 10px;
-      font-size: 12px;
+  font-size: 12px;
-      bottom: 0px;
+  bottom: 0px;
-      z-index: 100;
+  z-index: 100;
-      left: 0px;
+  left: 0px;
-  }
+}
 .uc-course {
   cursor: pointer;
   display: flex;
   justify-content: space-around;
-  border-bottom: 1px solid #E8E8E8;
+  border-bottom: 1px solid #e8e8e8;
   margin-right: 32px;
-  padding: 20px 0px 15px  0px ;
+  padding: 20px 0px 15px 0px;
   .uc-course-img {
     width: 212px;
     height: 119px;
@@ -263,7 +331,6 @@ export default {
       width: 100%;
       height: 100%;
     }
-
   }
   .uc-course-info {
     // width: 50%;
@@ -278,10 +345,9 @@ export default {
     }
     .uc-course-text {
       color: #444;
-      margin-bottom:3px;
+      margin-bottom: 3px;
       font-size: 16px;
       margin-top: 20px;
-
     }
   }
   .uc-course-btns {

vue.config.js

@@ -131,13 +131,15 @@ module.exports = {
       //   changeOrigin: true,
       // },
       "/growth": {
-        target: 'https://u-pre.boe.com',
+        // target: 'https://u-pre.boe.com',
+        target: 'http://10.10.176.17:81',
         // target: 'http://192.168.86.195:32002',
         changeOrigin: true,
       },
       '/manageApi': {
         // 目标代理服务器地址
-        target: 'https://u-pre.boe.com',
+        // target: 'https://u-pre.boe.com',
+        target: 'http://10.10.176.17:81',
         changeOrigin: true,
         secure: false,
         pathRewrite: {
@@ -147,7 +149,8 @@ module.exports = {
       '/systemapi': {
         // 目标代理服务器地址
         // target: 'http://127.0.0.1:9090',
-        target: 'https://u-pre.boe.com',
+        // target: 'https://u-pre.boe.com',
+        target: 'http://10.10.176.17:81',
         changeOrigin: true,
         logLevel: 'debug',
         secure: false,
@@ -157,7 +160,8 @@ module.exports = {
       },
       '/uboeApi': {
         // 目标代理服务器地址
-        target: 'https://u-pre.boe.com',
+        // target: 'https://u-pre.boe.com',
+        target: 'http://10.10.176.17:81',
         changeOrigin: true,
         secure: false,
         pathRewrite: {
@@ -166,7 +170,8 @@ module.exports = {
       },
       '/userbasic': {
         // 目标代理服务器地址
-        target: 'https://u-pre.boe.com',
+        // target: 'https://u-pre.boe.com',
+        target: 'http://10.10.176.17:81',
         changeOrigin: true,
         secure: false,
         pathRewrite: {
@@ -176,7 +181,8 @@ module.exports = {
       '/statApi': {
         // 目标代理服务器地址
         // target: 'http://127.0.0.1:9080',
-        target: 'https://u-pre.boe.com',
+        // target: 'https://u-pre.boe.com',
+        target: 'http://10.10.176.17:81',
         changeOrigin: true,
         logLevel: 'debug',
         secure: false,
@@ -187,7 +193,8 @@ module.exports = {
       '/socialApi': {
         // 目标代理服务器地址
         // target: 'http://127.0.0.1:9081',
-        target: 'https://u-pre.boe.com',
+        // target: 'https://u-pre.boe.com',
+        target: 'http://10.10.176.17:81',
         changeOrigin: true,
         logLevel: 'debug',
         secure: false,
@@ -197,7 +204,8 @@ module.exports = {
       },
       '/report': {
         // 目标代理服务器地址
-        target: 'https://u-pre.boe.com',
+        // target: 'https://u-pre.boe.com',
+        target: 'http://10.10.176.17:81',
         changeOrigin: true,
         secure: false,
         pathRewrite: {
@@ -206,13 +214,15 @@ module.exports = {
       },
       '/infrasApi': {
         // 目标代理服务器地址
-        target: 'https://u-pre.boe.com',
+        // target: 'https://u-pre.boe.com',
+        target: 'http://10.10.176.17:81',
         changeOrigin: true,
         secure: false,
       },
       '/activityApi': {
         // 目标代理服务器地址
-        target: 'https://u-pre.boe.com',
+        // target: 'https://u-pre.boe.com',
+        target: 'http://10.10.176.17:81',
         changeOrigin: true,
         secure: false,
       },