[feat]成熟度测评部分页面，合并彩虹图

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

@@ -12,6 +12,13 @@ export function exampleList(query) {
     return request({
         url: '/integratedmachine/wakeup/example/exampleList',
         method: 'post',
-        params: query
+        data: query
+    })
+}
+export function maturityAppraisalList(query) {
+    return request({
+        url: '/platform/appraisal/common',
+        method: 'post',
+        data: query
     })
 }

src/views/xjc-integratedmachine/wakeup/career_example/index.vue

@@ -107,7 +107,6 @@ function jumpTo(path) {
 onMounted(() => {
   getExampleList();
   setHeadinfo();
-
 })
 //请求页面数据
 function getExampleList() {

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

@@ -1,35 +1,38 @@
 <template>
-  <div class="maturity-game-page">
+  <div class="maturity-game-page" v-loading="pageLoading">
     <head-component :headinfo=headinfo></head-component>
     <div class="page-content">
-      <div></div>
-      <div>
+      <div class="content-left"></div>
+      <div class="content-center">
         <div class="content-img">
-          <img src="@/assets/images/wakeup/maturity/shadow-bg.png" >
+          <img  src="@/assets/images/wakeup/maturity/shadow-bg.png" >
+          <div v-for="(item,index) in maturityAppraisalData">
+            <p v-show="index===0?true:false">{{item.questionTitle}}</p>
+          </div>
         </div>
         <div class="group-btn">
-          <img src="@/assets/images/wakeup/maturity/btn1.png" >
-          <img src="@/assets/images/wakeup/maturity/btn2.png" >
-          <img src="@/assets/images/wakeup/maturity/btn3.png" >
-          <img src="@/assets/images/wakeup/maturity/btn4.png" >
-          <img src="@/assets/images/wakeup/maturity/btn5.png" >
+          <img src="@/assets/images/wakeup/maturity/btn1.png" @click="selectBtn('1')">
+          <img src="@/assets/images/wakeup/maturity/btn2.png" @click="selectBtn('2')">
+          <img src="@/assets/images/wakeup/maturity/btn3.png" @click="selectBtn('3')">
+          <img src="@/assets/images/wakeup/maturity/btn4.png" @click="selectBtn('4')">
+          <img src="@/assets/images/wakeup/maturity/btn5.png" @click="selectBtn('5')">
+        </div>
+        <div class="progress-container">
+          <div class="progress-bar" :style="{ width: progress + '%' }">
+          </div>
+          <div class="progress-info">
+             {{ newData.length }} / {{ questionSize }}
+          </div>
         </div>
       </div>
       <div class="content-right">
-        <img class="btn-img" src="@/assets/images/wakeup/maturity/pre-qustion.png" >
+          <img class="btn-img" v-show="newData.length>0" @click="previousQuestion" src="@/assets/images/wakeup/maturity/pre-qustion.png" >
         <div class="time">
           <img src="@/assets/images/wakeup/maturity/time.png" >
           <p> {{ formattedTime(elapsedTime) }}</p>
         </div>
-        <img class="btn-img"  src="@/assets/images/wakeup/maturity/submit.png" >
+        <img class="btn-img" v-show="newData.length >= questionSize" src="@/assets/images/wakeup/maturity/submit.png" >
       </div>
-<!--      <div class="top">-->
-<!--        <img src="@/assets/images/wakeup/maturity/maturity-game-title.png" >-->
-<!--      </div>-->
-<!--      <div class="bottom">-->
-<!--        <img src="@/assets/images/wakeup/maturity/maturity-game-left.png" >-->
-<!--        <img src="@/assets/images/wakeup/maturity/maturity-game-right.png" >-->
-<!--      </div>-->
     </div>
   </div>
 
@@ -37,15 +40,19 @@
 
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import {exampleList, maturityAppraisalList} from "@/api/xjc-integratedmachine/wakeup/index.js";
 
 
 const router = useRouter()
-
+let pageLoading = ref(false)
 const headinfo = ref({})
-
-
+// const progress = ref(0)
 const draggedItem = ref(null);
-
+const maturityAppraisalData = ref([])
+const itemScore = ref('')
+const newData = ref([])
+const appraisalId = ref(null)
+const questionSize = ref(null);
 function dragStart(event) {
   draggedItem.value = event.target;
 }
@@ -79,7 +86,22 @@ function jumpTo(path) {
   })
 }
 
+function getMaturityAppraisalList() {
+  pageLoading = true;
+  let appraisalCode = "3001"
+  maturityAppraisalList({appraisalCode:appraisalCode}).then(res => {
+    if(res.data.questionList.length > 0){
+      maturityAppraisalData.value = res.data.questionList;
 
+    }
+    appraisalId.value = res.data.appraisalId;
+    questionSize.value = res.data.questionSize;
+    pageLoading = false;
+  }).catch((err)=>{
+    console.log("error")
+    pageLoading = false;
+  })
+}
 //计时器
 const elapsedTime = ref(0);
 const timerId = ref(null);
@@ -119,12 +141,49 @@ onMounted(() => {
   // 可以在这里自动开始计时器，如果需要的话
   startTimer();
   setHeadinfo()
+  getMaturityAppraisalList()
 });
 
 // onUnmounted(() => {
   stopTimer();
 // });
+// 定义当前完成题目数量和总题目数量
+const current = ref(34);
+const total = ref(100); // 假设总共有10道题
+
+// 计算进度
+const progress = computed(() => {
+  return Math.floor((current.value / total.value) * 100);
+});
 
+// 更新当前完成题目数量的函数（例如，当用户完成一道题时调用）
+const updateCurrent = (newCurrent) => {
+  if (newCurrent >= 0 && newCurrent <= total.value) {
+    current.value = newCurrent;
+  }
+};
+const selectBtn = (val) => {
+  //将当前题目加入新数组，
+  // 拼接选项数据
+  if(newData.value.length != questionSize.value ){
+    itemScore.value += val + '|'
+    newData.value.push(maturityAppraisalData.value[0]);
+  }
+  //更换题卡；
+  if(maturityAppraisalData.value.length >1 ){
+    maturityAppraisalData.value.splice(0, 1);
+  }
+};
+const previousQuestion = (val) => {
+  //新数组中的最后一位从头插入旧数组
+  //新数组删除最后一位
+  maturityAppraisalData.value.unshift(newData.value.pop());
+  // newData.value.push(maturityAppraisalData.value[0]);
+  // maturityAppraisalData.value.splice(0, 1);
+  //字符串删除后两位
+  itemScore.value = itemScore.value.slice(0, -2);
+  console.log("itemScore",itemScore.value,newData.value)
+};
 </script>
 
 
@@ -145,18 +204,66 @@ p{
     top: 123px;
     bottom: 0;
     display: flex;
-    justify-content: center;
-   .content-img{
-     width: 1187px;
-     height: 424px;
-     border: 1px solid;
-     margin-top: 80px;
-     img{
-       width: 1187px;
-       height: 424px;
-     }
-   }
-    .content-right{
+    justify-content: space-around;
+    .content-left{
+      width: 244px;
+    }
+    .content-center{
+      height:910px;
+      display: flex;
+      flex-direction: column;
+      .content-img{
+        width: 1187px;
+        height: 424px;
+        //border: 1px solid;
+        margin-top: 40px;
+        position: relative;
+        img{
+          width: 1187px;
+          height: 424px;
+        }
+        p{
+          width: 930px;
+          position: absolute;
+          top: 150px;
+          left: 130px;
+          font-weight: 400;
+          font-size: 30px;
+          color: #000000;
+          letter-spacing: 4px;
+          text-align: center;
+        }
+      }
+      .progress-container {
+        width: 100%;
+        //background-color: #f3f3f3;
+        border-radius: 4px;
+        margin-bottom: 10px;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 200px;
+      }
+
+      .progress-bar {
+        height: 10px;
+        background-color: #63FFA4;
+        text-align: center;
+        line-height: 20px;
+        border-radius: 100px 100px 100px 100px;
+        color: white;
+        transition: width 0.3s ease;
+      }
+
+      .progress-info {
+        font-weight: 400;
+        font-size: 24px;
+        color: #00DF5D;
+        margin-left: 20px;
+      }
+    }
+   .content-right{
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -181,7 +288,7 @@ p{
           width: 150px;
           font-weight: 300;
           font-size: 32px;
-          color: #FFFFFF;
+          color: #363a3d;
           margin-left: 10px;
         }
       }
@@ -198,6 +305,7 @@ p{
   }
 }
 
+
 </style>
 
 

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

@@ -13,7 +13,6 @@
         <!--&gt;</div>-->
     </div>
 </template>
-
 <script setup>
     import {ref, onMounted, onBeforeUnmount} from 'vue'
     import * as echarts from 'echarts'