[feat] 生涯成熟度报告页面

src/api/xjc-integratedmachine/wakeup/index.js

@@ -15,6 +15,7 @@ export function exampleList(query) {
         data: query
     })
 }
+//成熟度测评题目
 export function maturityAppraisalList(query) {
     return request({
         url: '/platform/appraisal/common',
@@ -31,7 +32,7 @@ export function insertAppraisalAnswer(query) {
 }
 export function maturityReport(query) {
     return request({
-        url: '/appraisal/report/3001',
+        url: '/platform/appraisal/report/3001',
         method: 'post',
         data: query
     })

src/views/xjc-integratedmachine/wakeup/career_maturity/evaluation.vue

@@ -1,70 +1,29 @@
 <template>
-  <div class="plan_significance">
+  <div class="evaluation" v-loading="pageLoading">
     <head-component :headinfo=headinfo></head-component>
     <div class="page-content">
       <div class="page-box">
-        <el-tabs type="border-card" class="demo-tabs">
-          <el-tab-pane>
-            <template #label>
-        <span class="custom-tabs-label">
-          <el-icon size="36"><DataAnalysis /></el-icon>
-          <span>数据汇总</span>
-        </span>
-            </template>
-            Route
-          </el-tab-pane>
-          <el-tab-pane label="Config">
-            <template #label>
-        <span class="custom-tabs-label">
-          <el-icon size="36"><Memo /></el-icon>
-          <span>生涯决策知识</span>
-        </span>
-            </template>
-            Route</el-tab-pane>
-          <el-tab-pane label="Role">
-            <template #label>
-        <span class="custom-tabs-label">
-          <el-icon size="36"><Memo /></el-icon>
-          <span>生涯决策态度</span>
-        </span>
-            </template>
-            Route
-          </el-tab-pane>
-        </el-tabs>
-        <!--        <p class="title-text">-->
-        <!--          生涯成熟度代表个体掌握与其生涯发展阶段相适应的生涯发展目标的程度，包括知识和态度成分。个体的生涯成熟度越高，就越能以良好的准备状态，做出明智、适配的职业选择。-->
-        <!--        </p>-->
-        <!--        <p class="text-info">-->
-        <!--          <span class="center-text">中学生的生涯成熟度</span>是指中学生在一定的生涯决策知识和态度的基础上做出适宜的生涯决策的准备程度。-->
-        <!--          生涯成熟度并不是一成不变的，而是会随着个体的学习、探索而逐渐变化。每个阶段都有自身的发展任务，生涯成熟度的提高不仅能协助中学生选择适配的专业与职业，或为未来从事目标职业提前储备知识技能，还能培养中学生决策与解决问题的能力，引导其积极探索和规划自己的人生。-->
-        <!--        </p>-->
-        <!--        <p class="text-info">-->
-        <!--          本测评从<span class="center-text">生涯决策知识</span>和<span class="center-text">生涯决策态度</span>两方面评估中学生生涯成熟度的发展水平和特点，旨在帮助学生了解自己的生涯发展水平，认识到自己在生涯发展中的不足和长处，指导学生合理利用自身及外界发展资源，实现个人人生目标。-->
-        <!--        </p>-->
-        <!--        <div class="img-box">-->
-        <!--          <img src="@/assets/images/wakeup/maturity/structure-img.png" @click="selectBtn(questionAnswerA)">{{ questionAnswerA }}-->
-        <!--          <div class="structure-box">-->
-        <!--            &lt;!&ndash;           <div class="top">&ndash;&gt;-->
-        <!--            &lt;!&ndash;              <p>1</p>&ndash;&gt;-->
-        <!--            &lt;!&ndash;           </div>&ndash;&gt;-->
-        <!--            &lt;!&ndash;           <div>&ndash;&gt;-->
-        <!--            &lt;!&ndash;             <p>1</p><p>1</p>&ndash;&gt;-->
-        <!--            &lt;!&ndash;           </div>&ndash;&gt;-->
-
-        <!--            <div class="left">-->
-        <!--              <p @click="describe('职业世界认知： 个体对职业的意义、职业的发展前景、从业要求、实现途径、工作职责、社会地位等的了解程度。')">1</p>-->
-        <!--              <p @click="describe('职业自我认知：个体对自己的职业能力、气质、性格、兴趣、价值观等的了解程度。')">1</p>-->
-        <!--            </div>-->
-        <!--            <div class="right">-->
-        <!--              <p @click="describe('主动性反映的是个体积极参与生涯决策过程的程度。')">1</p>-->
-        <!--              <p @click="describe('独立性反映的是个体不盲目依赖他人而独立作出生涯决策的程度。')">1</p>-->
-        <!--              <p @click="describe('自信心反映的是个体对自己生涯决策知识与能力的信心程度。')">1</p>-->
-        <!--              <p @click="describe('功利性反映的是个体根据自身特点还是根据待遇收入等功利性因素来选择职业的程度。')">1</p>-->
-        <!--              <p @click="describe('稳定性反映的是不同时期个体对将来想从事的职业领域的一致性程度。')">1</p>-->
-        <!--            </div>-->
-
-        <!--          </div>-->
-        <!--        </div>-->
+        <div>
+          <div class="tab-box">
+            <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">数据汇总</div>
+            {{ onePage }}
+            <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">生涯决策知识</div>
+            {{ twoPage }}
+            <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">生涯决策态度</div>
+            {{ threePage }}
+          </div>
+        </div>
+        <div class="one-page" v-show="onePage">
+          <p class="maturity-text">生涯成熟度：<span>中等</span></p>
+          <p class="text-info">
+            综合来看，你对生涯发展有一定认知，但心理准备不足，缺乏系统规划，面对生涯选择时容易迷茫，易受周围同学或家长影响，尚未形成稳定的生涯发展思路。
+          </p>
+          <div class="table-box">
+
+          </div>
+        </div>
+        <div class="two-page" v-show="twoPage">112</div>
+        <div class="three-page" v-show="threePage">11112</div>
       </div>
     </div>
     <el-dialog v-model="centerDialogVisible" :show-close="false" width="500" center>
@@ -87,9 +46,11 @@
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 import {Calendar} from '@element-plus/icons-vue'
 import {onMounted, reactive} from "vue";
+import {maturityReport} from "@/api/xjc-integratedmachine/wakeup/index.js";
 
 const headinfo = ref({})
 const describeInfo = ref('')
+let pageLoading = ref(false)
 
 function setHeadinfo() {
   headinfo.value = {
@@ -103,6 +64,10 @@ function setHeadinfo() {
 }
 
 const centerDialogVisible = ref(false)
+const onePage = ref(true)
+const twoPage = ref(false)
+const threePage = ref(false)
+
 const position = reactive({x: 10, y: 10});
 let isDragging = false;
 let originX, originY;
@@ -134,8 +99,40 @@ const describe = (val) => {
   describeInfo.value = val;
   centerDialogVisible.value = true;
 };
+const showPage = (val) => {
+  if (val === 1) {
+    onePage.value = true;
+    twoPage.value = false;
+    threePage.value = false;
+  } else if (val === 2) {
+    onePage.value = false;
+    twoPage.value = true;
+    threePage.value = false;
+  } else if (val === 3) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = true;
+  }
+}
+//请求页面数据
+function getMaturityReport() {
+  pageLoading = true;
+  let id = "60f384a7-4970-44cb-a9da-0ce00519eee9"
+  maturityReport({id :id }).then(res => {
+    // console
+    if(res.exampleList.length > 0){
+      exampleInfo.value = res.exampleList[0];
+    }
+    exampleData.value = res.exampleList;
+    pageLoading = false;
+  }).catch((err)=>{
+    console.log("error")
+    pageLoading = false;
+  })
+}
 onMounted(() => {
   setHeadinfo()
+  getMaturityReport()
 })
 
 </script>
@@ -146,32 +143,7 @@ p {
   padding: 0;
 }
 
-.demo-tabs > .el-tabs__content {
-  padding: 32px;
-  color: #6b778c;
-  font-size: 32px;
-  font-weight: 600;
-}
-
-.demo-tabs .custom-tabs-label .el-icon {
-  vertical-align: middle;
-}
-
-.demo-tabs .custom-tabs-label span {
-  vertical-align: middle;
-  margin-left: 4px;
-  font-weight: bold;
-  font-size: 32px;
-  color: #266EFF;
-  line-height: 22px;
-}
-
-.el-tabs--border-card > .el-tabs__header .el-tabs__item {
-  width: 422px;
-  height: 132px;
-}
-
-.plan_significance {
+.evaluation {
   background: url('@/assets/images/login/login-home-background.png') no-repeat;
   background-size: 1920px 1080px;
   z-index: 10;
@@ -193,87 +165,69 @@ p {
     border-radius: 35px 35px 35px 35px;
     margin: 13px auto 0;
     padding-top: 25px;
-    padding-left: 279px;
-    padding-right: 279px;
     position: relative;
     overflow: auto;
 
-    .text-info {
+    .tab-box {
+      display: flex;
+      justify-content: center;
+      padding-left: 279px;
+      padding-right: 279px;
+    }
+
+    .item-box {
+      width: 422px;
+      height: 136px;
+      border: 1px dashed gray;
+      text-align: center;
+      line-height: 136px;
       font-weight: 400;
-      font-size: 30px;
-      color: #333333;
-      line-height: 52px;
-      padding: 0 150px;
-      text-indent: 2em;
-      margin-top: 20px;
-
-      .center-text {
-        font-weight: bold;
-      }
+      font-size: 32px;
+      margin-left: 3px;
+      color: #A8A8A8;
     }
 
-    .img-box {
-      width: 1810px;
-      height: 773px;
-      display: flex;
-      justify-content: center;
-      margin-bottom: 20px;
-      position: relative;
+    .item-box-active {
+      width: 422px;
+      height: 136px;
 
-      img {
-        width: 1525px;
-        height: 770px;
-        //border: 1px solid;
-      }
+      text-align: center;
+      line-height: 136px;
+      font-weight: 400;
+      font-size: 32px;
+      margin-left: 3px;
+      color: #0088FF;
+      background: #CFF7FF;
+      border: 1px dashed gray;
+      border-top: 3px solid #0088FF;
     }
 
-    .structure-box {
-      position: absolute;
-      top: 387px;
-      border: #1ab394 solid 1px;
-      width: 1525px;
-      height: 314px;
-      display: flex;
-      //justify-content: space-around;
-      .left {
-        margin-left: 280px;
-        border: 1px solid pink;
-        width: 334px;
-        height: 314px;
-        display: flex;
-        justify-content: space-between;
-
-        p {
-          width: 89px;
-          height: 314px;
-          border: 1px solid green;
-        }
+    .one-page {
+      .maturity-text{
+        font-weight: bold;
+        font-size: 32px;
+        color: #333333;
+        line-height: 52px;
+        margin: 95px;
       }
-
-      .right {
-        margin-left: 89px;
-        border: 1px solid pink;
-        width: 541px;
-        height: 314px;
-        display: flex;
-        justify-content: space-between;
-
-        p {
-          width: 89px;
-          height: 314px;
-          border: 1px solid green;
-        }
+      .text-info{
+        font-weight: 400;
+        font-size: 30px;
+        color: #333333;
+        line-height: 52px;
+      }
+      .table-box{
+        width: 1525px;
+        height: 720px;
+        background: #C0E7FF;
+        opacity: 0.2;
+        margin-top: 26px;
       }
-    }
 
-    .title-text {
-      margin-left: 150px;
-      margin-right: 150px;
-      margin-top: 28px;
-      font-weight: bold;
-      font-size: 32px;
-      color: #333333;
-      line-height: 52px;
+    }
+    .one-page ,.two-page,.three-page{
+      padding-left: 157px;
+      padding-right: 157px;
     }
   }
 
@@ -354,12 +308,14 @@ p {
     color: #FFFFFF;
     background: #35badd;
   }
-  ::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item{
+
+  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
     width: 422px;
     height: 136px;
     color: #A8A8A8;
   }
-  ::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item .is-active{
+
+  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item .is-active {
     background-color: #CFF7FF;
     color: #266EFF;
   }

src/views/xjc-integratedmachine/wakeup/career_maturity/maturity_game.vue

@@ -40,7 +40,7 @@
 
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
-import {exampleList, insertAppraisalAnswer, maturityAppraisalList} from "@/api/xjc-integratedmachine/wakeup/index.js";
+import { insertAppraisalAnswer, maturityAppraisalList} from "@/api/xjc-integratedmachine/wakeup/index.js";
 import {ElMessageBox} from "element-plus";
 
 

src/views/xjc-integratedmachine/wakeup/rainbow/FollowRingChart.vue

@@ -14,7 +14,7 @@
     import {ref, onMounted, onBeforeUnmount} from 'vue'
     import * as echarts from 'echarts'
 
-    document.body.style.overflow = 'hidden';
+    // document.body.style.overflow = 'hidden';
     const props = defineProps({
         chartProps: {}
     })