[feat]彩虹图样式提交

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

@@ -22,3 +22,17 @@ export function maturityAppraisalList(query) {
         data: query
     })
 }
+export function insertAppraisalAnswer(query) {
+    return request({
+        url: '/platform/appraisal/insertAppraisalAnswer',
+        method: 'post',
+        data: query
+    })
+}
+export function maturityReport(query) {
+    return request({
+        url: '/appraisal/report/3001',
+        method: 'post',
+        data: query
+    })
+}

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

@@ -1,311 +1,368 @@
 <template>
-  <div class="maturity-game-page" v-loading="pageLoading">
+  <div class="plan_significance">
     <head-component :headinfo=headinfo></head-component>
     <div class="page-content">
-      <div class="content-left"></div>
-      <div class="content-center">
-        <div class="content-img">
-          <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" @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" 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" v-show="newData.length >= questionSize" src="@/assets/images/wakeup/maturity/submit.png" >
+      <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>
+    <el-dialog v-model="centerDialogVisible" :show-close="false" width="500" center>
+    <span>
+      {{ describeInfo }}
+    </span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="centerDialogVisible = false">
+            关闭
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 
 </template>
 
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
-import {exampleList, maturityAppraisalList} from "@/api/xjc-integratedmachine/wakeup/index.js";
-
+import {Calendar} from '@element-plus/icons-vue'
+import {onMounted, reactive} from "vue";
 
-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;
-}
+const describeInfo = ref('')
 
-function drop(event) {
-  event.preventDefault(); // 防止默认处理（例如打开链接）
-  if (event.target !== draggedItem.value) {
-    const target = event.target; // 获取放置的目标元素
-    const item = draggedItem.value; // 获取被拖拽的元素
-    // 交换位置或进行其他操作
-    item.parentNode.insertBefore(item, target); // 将被拖拽的元素插入到目标元素之前
-  }
-}
-
-function setHeadinfo(){
+function setHeadinfo() {
   headinfo.value = {
-    title: '生涯成熟度测评',
+    title: '生涯唤醒学习系统',
     user: {
       avatar: '头像路径',
       nickName: '张三'
     },
-    backUrl : '/index'
+    backUrl: '/xjc-integratedmachine/wakeup/career_recognize/index'
   }
 }
 
+const centerDialogVisible = ref(false)
+const position = reactive({x: 10, y: 10});
+let isDragging = false;
+let originX, originY;
 
-function jumpTo(path) {
-  router.push({
-    path: path,
-    query: {name: 123}
-  })
-}
-
-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);
-const isRunning = ref(false);
-
-const startTimer = () => {
-  if (!isRunning.value) {
-    isRunning.value = true;
-    timerId.value = setInterval(() => {
-      elapsedTime.value += 1000;
-    }, 1000);
-  }
+const startDrag = (e) => {
+  console.log("e", e)
+  isDragging = true;
+  originX = e.clientX - position.x;
+  originY = e.clientY - position.y;
+  console.log("originX", originX, originY, "originY")
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', stopDrag);
 };
 
-const stopTimer = () => {
-  if (isRunning.value) {
-    isRunning.value = false;
-    clearInterval(timerId.value);
-    timerId.value = null;
+const onMouseMove = (e) => {
+  if (isDragging) {
+    position.x = e.clientX - originX;
+    position.y = e.clientY - originY;
+    console.log("position.x", position.x, "position.y", position.y)
   }
 };
 
-const resetTimer = () => {
-  stopTimer();
-  elapsedTime.value = 0;
+const stopDrag = () => {
+  isDragging = false;
+  document.removeEventListener('mousemove', onMouseMove);
+  document.removeEventListener('mouseup', stopDrag);
 };
-
-const formattedTime = (ms) => {
-  const totalSeconds = Math.floor(ms / 1000);
-  const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
-  const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
-  const seconds = String(totalSeconds % 60).padStart(2, '0');
-  return `${hours}:${minutes}:${seconds}`;
+const describe = (val) => {
+  describeInfo.value = val;
+  centerDialogVisible.value = true;
 };
-
 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>
+})
 
+</script>
 
 <style scoped lang="scss">
-p{
+p {
   margin: 0;
-  padding:0;
+  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;
 }
-.maturity-game-page{
-  background: url('@/assets/images/wakeup/maturity/maturity-game-bg.png') no-repeat;
+
+.plan_significance {
+  background: url('@/assets/images/login/login-home-background.png') no-repeat;
   background-size: 1920px 1080px;
-  z-index:10;
+  z-index: 10;
   width: 100%;
   height: 1080px;
-  .page-content{
+
+  .page-content {
     width: 100%;
+    height: 980px;
     position: absolute;
-    top: 123px;
+    top: 100px;
     bottom: 0;
-    display: flex;
-    justify-content: space-around;
-    .content-left{
-      width: 244px;
+  }
+
+  .page-box {
+    width: 1832px;
+    height: 910px;
+    background: #FFFFFF;
+    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 {
+      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;
+      }
     }
-    .content-center{
-      height:910px;
+
+    .img-box {
+      width: 1810px;
+      height: 773px;
       display: flex;
-      flex-direction: column;
-      .content-img{
-        width: 1187px;
-        height: 424px;
+      justify-content: center;
+      margin-bottom: 20px;
+      position: relative;
+
+      img {
+        width: 1525px;
+        height: 770px;
         //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;
+    }
+
+    .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: center;
-        align-items: center;
-        margin-top: 200px;
+        justify-content: space-between;
+
+        p {
+          width: 89px;
+          height: 314px;
+          border: 1px solid green;
+        }
       }
 
-      .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;
+      .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;
+        }
       }
+    }
+
+    .title-text {
+      margin-left: 150px;
+      margin-right: 150px;
+      margin-top: 28px;
+      font-weight: bold;
+      font-size: 32px;
+      color: #333333;
+      line-height: 52px;
+    }
+  }
+
+  .fixed-box {
+    width: 100%;
+    height: 100px;
+    position: absolute;
+    bottom: 125px;
+  }
+
+  .content-bottom {
+    width: 100%;
+    height: 270px;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    align-items: center;
 
-      .progress-info {
-        font-weight: 400;
-        font-size: 24px;
-        color: #00DF5D;
-        margin-left: 20px;
+    .draw {
+      width: 109px;
+      height: 170px;
+
+      img {
+        width: 109px;
+        height: 170px;
       }
     }
-   .content-right{
+
+    .ai-rabit {
+      position: absolute;
+      right: -27px;
       display: flex;
-      flex-direction: column;
       align-items: center;
-      .btn-img{
-         width: 244px;
-         height: 77px;
-         margin-top: 20px;
-       }
-      .time{
-        width:220px;
-        height: 50px;
-        //border: 1px solid;
-        display: flex;
-        justify-content: center;
-        margin-top: 20px;
-        img{
-          width: 42px;
-          height: 42px;
-          //border: 1px solid;
-        }
-        p{
-          width: 150px;
-          font-weight: 300;
-          font-size: 32px;
-          color: #363a3d;
-          margin-left: 10px;
-        }
+
+      .ai-rabit-text {
+        width: 345px;
+        height: 89px;
+        background: #E8EEF7;
+        font-weight: 300;
+        margin-bottom: 20px;
+        font-size: 22px;
+        color: #000000;
+        padding: 16px;
+        border-radius: 24px 24px 24px 24px;
+      }
+
+      img {
+        width: 178px;
+        height: 270px;
       }
     }
   }
-  .group-btn{
-    display: flex;
-    justify-content: space-around;
-    margin-top: 80px;
-    img{
-      width: 200px;
-      height: 135px;
-    }
+
+  .draggable-ball {
+    position: absolute;
+    cursor: pointer;
+    user-select: none; /* 防止拖拽时选中文字 */
   }
-}
 
+  ::v-deep .el-dialog {
+    width: 632px;
+    height: 343px;
+  }
 
-</style>
+  ::v-deep .el-dialog--center .el-dialog__body {
+    font-weight: 400;
+    font-size: 30px;
+    color: #000000;
+    padding: 30px;
+    height: 192px;
+  }
 
+  .el-button--primary {
+    width: 136px;
+    height: 60px;
+    font-weight: 400;
+    font-size: 24px;
+    color: #FFFFFF;
+    background: #35badd;
+  }
+  ::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{
+    background-color: #CFF7FF;
+    color: #266EFF;
+  }
+}
 
+</style>

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

@@ -6,7 +6,7 @@
         <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-left.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/knowledge_explanation')">
         <img src="@/assets/images/wakeup/maturity/maturity-game-right.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/evaluation')">
       </div>
     </div>

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

@@ -1,47 +1,75 @@
 <template>
-  <div class="wake-up-page">
+  <div class="plan_significance">
     <head-component :headinfo=headinfo></head-component>
     <div class="page-content">
-      <div class="page-img-box">
+      <div class="page-box">
+        <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/recognize-card1.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_recognize/development_stage')">
-        </div>
-        <div class="img-box">
-          <img src="@/assets/images/wakeup/recognize-card2.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_recognize/plan_steps')">
-        </div>
-        <div class="img-box">
-          <img src="@/assets/images/wakeup/recognize-card3.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_recognize/plan_significance')">
-        </div>
-      </div>
-      <div class="content-bottom">
-        <div class="draw draggable-ball" @mousedown="startDrag" :style="{ left: position.x + 'px', top: position.y + 'px' }">
-          <img src="@/assets/images/wakeup/float-box.png" />
-        </div>
-        <div class="ai-rabit">
-          <div class="ai-rabit-text">
-            你好，同学欢迎进入生涯学习系统
-          </div>
-          <img  src="@/assets/images/wakeup/ai-rabit.png" />
+          <img src="@/assets/images/wakeup/maturity/structure-img.png" @click="selectBtn(questionAnswerA)">{{ questionAnswerA }}
+         <div class="structure-box">
+<!--           <div class="top">-->
+<!--              <p>1</p>-->
+<!--           </div>-->
+<!--           <div>-->
+<!--             <p>1</p><p>1</p>-->
+<!--           </div>-->
+
+             <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 class="fixed-box">-->
+<!--          <div class="content-bottom">-->
+<!--            <div class="draw draggable-ball" @mousedown="startDrag" :style="{ left: position.x + 'px', top: position.y + 'px' }">-->
+<!--              <img src="@/assets/images/wakeup/float-box.png" />-->
+<!--            </div>-->
+<!--            <div class="ai-rabit">-->
+<!--              <img  src="@/assets/images/wakeup/ai-rabit.png" />-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </div>-->
       </div>
     </div>
+    <el-dialog v-model="centerDialogVisible" :show-close="false" width="500" center>
+    <span>
+      {{describeInfo}}
+    </span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="centerDialogVisible = false">
+              关闭
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 
 </template>
 
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
-
-
-const router = useRouter()
-
+import {onMounted, reactive} from "vue";
 const headinfo = ref({})
-
-// const isDragging = ref(false)
-const offset = ref({ x: 0, y: 0 })
-const startX = ref(0)
-const startY = ref(0)
-
+const describeInfo = ref('')
 function setHeadinfo(){
   headinfo.value = {
     title: '生涯唤醒学习系统',
@@ -49,31 +77,20 @@ function setHeadinfo(){
       avatar: '头像路径',
       nickName: '张三'
     },
-    backUrl : '/xjc-integratedmachine/wakeup/index'
+    backUrl : '/xjc-integratedmachine/wakeup/career_recognize/index'
   }
 }
-
-
-function jumpTo(path) {
-  router.push({
-    path: path,
-    query: {name: 123}
-  })
-}
-onMounted(() => {
-  setHeadinfo()
-})
-
-import { reactive, onMounted } from 'vue';
-
-const position = reactive({ x: 100, y: 10 });
+const centerDialogVisible = ref(false)
+const position = reactive({ x: 10, y: 10 });
 let isDragging = false;
 let originX, originY;
 
 const startDrag = (e) => {
+  console.log("e",e)
   isDragging = true;
   originX = e.clientX - position.x;
   originY = e.clientY - position.y;
+  console.log("originX",originX,originY,"originY")
   document.addEventListener('mousemove', onMouseMove);
   document.addEventListener('mouseup', stopDrag);
 };
@@ -82,6 +99,7 @@ const onMouseMove = (e) => {
   if (isDragging) {
     position.x = e.clientX - originX;
     position.y = e.clientY - originY;
+    console.log("position.x",position.x,"position.y",position.y)
   }
 };
 
@@ -90,67 +108,129 @@ const stopDrag = () => {
   document.removeEventListener('mousemove', onMouseMove);
   document.removeEventListener('mouseup', stopDrag);
 };
+const describe = (val) => {
+  describeInfo.value = val;
+  centerDialogVisible.value = true;
+};
+onMounted(() => {
+  setHeadinfo()
+})
 
 </script>
 
-
 <style scoped lang="scss">
-.wake-up-page{
+p{
+  margin: 0;
+  padding: 0;
+}
+.plan_significance{
   background: url('@/assets/images/login/login-home-background.png') no-repeat;
   background-size: 1920px 1080px;
   z-index:10;
   width: 100%;
   height: 1080px;
-  .page-content{
+  .page-content {
     width: 100%;
+    height: 980px;
     position: absolute;
-    top: 123px;
+    top: 100px;
     bottom: 0;
-    p{
-      padding-left: 44px;
-      padding-right: 44px;
+  }
+  .page-box{
+    width: 1832px;
+    height: 910px;
+    background: #FFFFFF;
+    border-radius: 35px 35px 35px 35px;
+    margin: 13px auto 0;
+    padding-top: 25px;
+    position: relative;
+    overflow: auto;
+    .text-info{
       font-weight: 400;
       font-size: 30px;
       color: #333333;
       line-height: 52px;
-      letter-spacing: 3px;
+      padding: 0 150px;
       text-indent: 2em;
+      margin-top: 20px;
+      .center-text{
+        font-weight: bold;
+      }
     }
-  }
-  .content-text-box{
-    width: 100%;
-    height: 126px;
-    background: url('@/assets/images/wakeup/background-content-style.png') no-repeat;
-    background-size: 1920px 126px;
-    margin-top:23px;
-    display: flex;
-    align-items: center;
-  }
-  .page-img-box{
-    width: 100%;
-    display: flex;
-    justify-content:space-around;
-    align-items: center;
-    margin-top: 40px;
     .img-box{
-      width: 476px;
-      height: 692px;
+      width: 1810px;
+      height: 773px;
+      display: flex;
+      justify-content: center;
+      margin-bottom: 20px;
+      position: relative;
       img{
-        width: 476px;
-        height: 692px;
+        width: 1525px;
+        height: 770px;
+        //border: 1px solid;
       }
     }
+    .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;
+       }
+     }
+      .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;
+        }
+      }
+    }
+    .title-text{
+      margin-left: 150px;
+      margin-right: 150px;
+      margin-top: 28px;
+      font-weight: bold;
+      font-size: 32px;
+      color: #333333;
+      line-height: 52px;
+    }
+  }
+  .fixed-box{
+    width: 100%;
+    height: 100px;
+    position: absolute;
+    bottom: 125px;
   }
-
   .content-bottom{
     width: 100%;
+    height: 270px;
     display: flex;
     justify-content: space-between;
     position: relative;
+    align-items: center;
     .draw{
       width: 109px;
       height: 170px;
-      margin-left: 100px;
       img{
         width: 109px;
         height: 170px;
@@ -159,8 +239,7 @@ const stopDrag = () => {
 
     .ai-rabit{
       position: absolute;
-      right: 100px;
-      top: -50px;
+      right: -27px;
       display: flex;
       align-items: center;
       .ai-rabit-text{
@@ -180,22 +259,31 @@ const stopDrag = () => {
       }
     }
   }
+  .draggable-ball {
+    position: absolute;
+    cursor: pointer;
+    user-select: none; /* 防止拖拽时选中文字 */
+  }
+  ::v-deep .el-dialog{
+    width: 632px;
+    height: 343px;
+  }
+  ::v-deep .el-dialog--center .el-dialog__body{
+    font-weight: 400;
+    font-size: 30px;
+    color: #000000;
+    padding: 30px;
+    height: 192px;
+  }
 
+   .el-button--primary{
+     width: 136px;
+     height: 60px;
+     font-weight: 400;
+     font-size: 24px;
+     color: #FFFFFF;
+     background:  #35badd;
+   }
 }
-.temp{
-  width:20vw;
-  height: 10vh;
-  background: #85eff5;
-  border: solid 1px #a2fffc;
-  border-radius: 10px;
-  cursor: pointer;
-}
-.draggable-ball {
-  position: absolute;
-  cursor: pointer;
-  user-select: none; /* 防止拖拽时选中文字 */
-}
-
 
 </style>
-

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

@@ -1,14 +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 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" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/evaluation')">
-            </div>
+      <div class="content-left"></div>
+      <div class="content-center">
+        <div class="content-img">
+          <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" @click="selectBtn(questionAnswerA)">{{ questionAnswerA }}
+          <img src="@/assets/images/wakeup/maturity/btn2.png" @click="selectBtn(questionAnswerB)">{{ questionAnswerB }}
+          <img src="@/assets/images/wakeup/maturity/btn3.png" @click="selectBtn(questionAnswerC)">{{ questionAnswerC }}
+          <img src="@/assets/images/wakeup/maturity/btn4.png" @click="selectBtn(questionAnswerD)">{{ questionAnswerD }}
+          <img src="@/assets/images/wakeup/maturity/btn5.png" @click="selectBtn(questionAnswerE)">{{ questionAnswerE }}
+        </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" 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" @click="submitAnswer" v-show="newData.length >= questionSize" src="@/assets/images/wakeup/maturity/submit.png" >
+      </div>
     </div>
   </div>
 
@@ -16,15 +40,27 @@
 
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import {exampleList, insertAppraisalAnswer, maturityAppraisalList} from "@/api/xjc-integratedmachine/wakeup/index.js";
+import {ElMessageBox} from "element-plus";
 
 
 const router = useRouter()
-
+let pageLoading = ref(false)
 const headinfo = ref({})
-
-
+// const progress = ref(0)
 const draggedItem = ref(null);
+const maturityAppraisalData = ref([])
+const questionAnswerA =  ref(null)
+const questionAnswerB =  ref(null)
+const questionAnswerC =  ref(null)
+const questionAnswerD =  ref(null)
+const questionAnswerE =  ref(null)
 
+const itemScore = ref('')
+const newData = ref([])
+const appraisalId = ref(null)
+const questionSize = ref(null);
+const useTime = ref(0);
 function dragStart(event) {
   draggedItem.value = event.target;
 }
@@ -41,7 +77,7 @@ function drop(event) {
 
 function setHeadinfo(){
   headinfo.value = {
-    title: '生涯唤醒学习系统',
+    title: '生涯成熟度测评',
     user: {
       avatar: '头像路径',
       nickName: '张三'
@@ -58,16 +94,161 @@ function jumpTo(path) {
   })
 }
 
+function getMaturityAppraisalList() {
+  pageLoading = true;
+  let appraisalCode = "3001"
+  maturityAppraisalList({appraisalCode:appraisalCode}).then(res => {
+    if(res.data.questionList.length > 0){
+      res.data.questionList.map((item,index) =>{
+        item.questionAnswer = item.questionAnswer.split(';');
+        if(index === 0){
+          //给第一道题的选项进行赋值；
+          questionAnswerA.value = item.questionAnswer[0];
+          questionAnswerB.value = item.questionAnswer[1];
+          questionAnswerC.value = item.questionAnswer[2];
+          questionAnswerD.value = item.questionAnswer[3];
+          questionAnswerE.value = item.questionAnswer[4];
+        }
+      })
+      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);
+const isRunning = ref(false);
+
+const startTimer = () => {
+  if (!isRunning.value) {
+    isRunning.value = true;
+    timerId.value = setInterval(() => {
+      elapsedTime.value += 1000;
+    }, 1000);
+  }
+};
+
+const stopTimer = () => {
+  if (isRunning.value) {
+    isRunning.value = false;
+    clearInterval(timerId.value);
+    timerId.value = null;
+  }
+};
+
+const resetTimer = () => {
+  stopTimer();
+  elapsedTime.value = 0;
+};
+
+const formattedTime = (ms) => {
+  const totalSeconds = Math.floor(ms / 1000);
+  const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
+  const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
+  const seconds = String(totalSeconds % 60).padStart(2, '0');
+  useTime.value =  totalSeconds;
+  return `${hours}:${minutes}:${seconds}`;
+};
+
 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);
+    //给按钮赋值；
+    questionAnswerValue();
+  }
+};
+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);
+  //返回上一题后要更新按钮赋值；
+  questionAnswerValue();
+};
+function questionAnswerValue(){
+  questionAnswerA.value =  maturityAppraisalData.value[0].questionAnswer[0]
+  questionAnswerB.value =  maturityAppraisalData.value[0].questionAnswer[1]
+  questionAnswerC.value =  maturityAppraisalData.value[0].questionAnswer[2]
+  questionAnswerD.value =  maturityAppraisalData.value[0].questionAnswer[3]
+  questionAnswerE.value =  maturityAppraisalData.value[0].questionAnswer[4]
+}
+function submitAnswer() {
+  ElMessageBox.confirm('确定提交生成报告', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'info'
+  }).then(() => {
+    pageLoading = true;
+    let appraisalCode = "3001"
+    let params = {
+      "itemScore": itemScore.value,
+      "useTime": useTime.value,
+      "sourceType": "1",
+      "appraisalId":appraisalId.value,
+      "ytjType": "wakeup"
+    }
+    insertAppraisalAnswer(params).then(res => {
+      console.log(res);
+      pageLoading = false;
+    }).catch((err)=>{
+      console.log("error")
+      pageLoading = false;
+    })
+  }).catch(() => {
 
+  })
+
+}
 </script>
 
 
 <style scoped lang="scss">
+p{
+  margin: 0;
+  padding:0;
+}
 .maturity-game-page{
   background: url('@/assets/images/wakeup/maturity/maturity-game-bg.png') no-repeat;
   background-size: 1920px 1080px;
@@ -79,31 +260,113 @@ onMounted(() => {
     position: absolute;
     top: 123px;
     bottom: 0;
-   .top{
-     width: 100%;
-     height: 212px;
-     display: flex;
-     justify-content: center;
-     margin-top: 104px;
-     img{
-       width: 864px;
-       height: 212px;
-     }
-   }
-    .bottom{
-      width: 100%;
-      height: 248px;
+    display: flex;
+    justify-content: space-around;
+    .content-left{
+      width: 244px;
+    }
+    .content-center{
+      height:910px;
       display: flex;
-      justify-content: space-around;
-      margin-top:186px;
-      img{
-        width: 398px;
-        height: 248px;
+      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;
+      .btn-img{
+        width: 244px;
+        height: 77px;
+        margin-top: 20px;
+      }
+      .time{
+        width:220px;
+        height: 50px;
+        //border: 1px solid;
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+        img{
+          width: 42px;
+          height: 42px;
+          //border: 1px solid;
+        }
+        p{
+          width: 150px;
+          font-weight: 300;
+          font-size: 32px;
+          color: #363a3d;
+          margin-left: 10px;
+        }
       }
     }
   }
-
+  .group-btn{
+    display: flex;
+    justify-content: space-around;
+    margin-top: 80px;
+    img{
+      width: 200px;
+      height: 135px;
+    }
+  }
+}
+.el-message-box{
+  max-width:none;
+  width: 632px;
+  height: 289px;
 }
 
 </style>
 
+

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

@@ -51,7 +51,7 @@
                 avoidLabelOverlap: false,
                 itemStyle: {
                     borderRadius: 10,
-                    borderColor: '#ffff00',
+                    borderColor: props.chartProps.borderColor,
                     borderWidth: 2
                 },
                 label: {
@@ -60,7 +60,7 @@
                     // formatter: '{c}%',
                     fontSize: 24,
                     fontWeight: 'bold',
-                    color: '#333'
+                    color: props.chartProps.color,
                 },
                 emphasis: {
                     scale: false,
@@ -346,7 +346,6 @@
         width: 1700px;
         height: 910px;
         cursor: pointer;
-        border: 1px solid white;
         margin-top: 219px;
     }
 

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

@@ -4,7 +4,29 @@
         <div class="page-content">
             <div style="display: flex;justify-content: center;width: 1890px;height: 912px;margin-top: 13px">
                 <div class="page-box">
-                    <FollowRingChart id="ring-chart1" class="ring-chart1" :chartProps="chartPrpps1"/>
+                  <div style="width: 1px;height: 1700px;border: 1px solid red;position: absolute;left:916px;top: 0px"></div>
+                  <div style="width: 850px;height: 1px;border: 1px solid green;position: absolute;left: 66px;top: 400px"></div>
+                  <div style="width: 1700px;height: 1px;border: 1px solid white;position: absolute;left: 70px;top: 906px"></div>
+                  <FollowRingChart id="ring-chart1" class="ring-chart1" :chartProps="chartPrpps1"/>
+                    <FollowRingChart id="ring-chart2" class="ring-chart2" :chartProps="chartPrpps2"/>
+                    <FollowRingChart id="ring-chart3" class="ring-chart3" :chartProps="chartPrpps3"/>
+                    <FollowRingChart id="ring-chart4" class="ring-chart4" :chartProps="chartPrpps4"/>
+                  <FollowRingChart id="ring-chart5" class="ring-chart5" :chartProps="chartPrpps5"/>
+                  <FollowRingChart id="ring-chart6" class="ring-chart6" :chartProps="chartPrpps6"/>
+                  <FollowRingChart id="ring-chart7" class="ring-chart7" :chartProps="chartPrpps7"/>
+                  <FollowRingChart id="ring-chart8" class="ring-chart8" :chartProps="chartPrpps8"/>
+                  <FollowRingChart id="ring-chart9" class="ring-chart9" :chartProps="chartPrpps9"/>
+                  <FollowRingChart id="ring-chart10" class="ring-chart10" :chartProps="chartPrpps10"/>
+                  <FollowRingChart id="ring-chart11" class="ring-chart11" :chartProps="chartPrpps11"/>
+                  <FollowRingChart id="ring-chart12" class="ring-chart12" :chartProps="chartPrpps12"/>
+
+                  <FollowRingChart id="ring-chart13" class="ring-chart13" :chartProps="chartPrpps13"/>
+                  <FollowRingChart id="ring-chart14" class="ring-chart14" :chartProps="chartPrpps14"/>
+                  <FollowRingChart id="ring-chart15" class="ring-chart15" :chartProps="chartPrpps15"/>
+                  <FollowRingChart id="ring-chart16" class="ring-chart16" :chartProps="chartPrpps16"/>
+
+                  <FollowRingChart id="ring-chart17" class="ring-chart17" :chartProps="chartPrpps17"/>
+                  <FollowRingChart id="ring-chart18" class="ring-chart18" :chartProps="chartPrpps18"/>
                 </div>
             </div>
 
@@ -51,15 +73,251 @@
         left: 90,
         width: 1700,
         height: 1700,
-        borderColor: "#998877",
+        borderColor: "#FFFF00",
         color: "#ff00ff",
         bncolor: "#ffffff",
-        radiusMax: '100%',
-        radiusMin: '96%',
+        radiusMax: '850px',
+        radiusMin: '816px',
         isFinish: false,
         status : 'new'
     })
+    const chartPrpps2= ref({
+      top: 228,
+      left: 158,
+      width: 1628,
+      height: 1628,
+      borderColor: "#00af3c",
+      color: "#00af3c",
+      bncolor: "#00af3c",
+      radiusMax: '816px',
+      radiusMin: '782px',
+      isFinish: false,
+      status : 'new'
+    })
+    const chartPrpps3= ref({
+      top: 296,
+      left: 226,
+      width: 1562,
+      height: 1562,
+      borderColor: "pink",
+      color: "pink",
+      bncolor: "pink",
+      radiusMax: '782px',
+      radiusMin: '748px',
+      isFinish: false,
+      status : 'new'
+    })
+    const chartPrpps4= ref({
+      top: 364,
+      left: 294,
+      width: 1465,
+      height: 1465,
+      borderColor: "#ffff00",
+      color: "#ffff00",
+      bncolor: "#ffff00",
+      radiusMax: '731px',
+      radiusMin: '697px',
+      isFinish: false,
+      status : 'new'
+    })
+    const chartPrpps5= ref({
+      top: 483,
+      left: 413,
+      width: 1391,
+      height: 1391,
+      borderColor: "orange",
+      color: "orange",
+      bncolor: "orange",
+      radiusMax: '697px',
+      radiusMin: '663px',
+      isFinish: false,
+      status : 'new'
+    })
+    const chartPrpps6= ref({
+      top: 551,
+      left: 481,
+      width: 1325,
+      height: 1325,
+      borderColor: "green",
+      color: "green",
+      bncolor: "green",
+      radiusMax: '663px',
+      radiusMin: '629px',
+      isFinish: false,
+      status : 'new'
+    })
 
+
+    const chartPrpps7= ref({
+      top: 432,
+      left:200,
+      width: 1400,
+      height: 1400,
+      borderColor: "pink",
+      color: "pink",
+      bncolor: "pink",
+      radiusMax: '612px',
+      radiusMin: '578px',
+      isFinish: false,
+      status : 'new'
+    })
+    const chartPrpps8= ref({
+      top: 612,
+      left: 531,
+      width: 1271,
+      height: 1271,
+      borderColor: "green",
+      color: "green",
+      bncolor: "green",
+      radiusMax: '578px',
+      radiusMin: '544px',
+      isFinish: false,
+      status : 'new'
+    })
+    const chartPrpps9= ref({
+      top: 612,
+      left: 531,
+      width: 1100,
+      height: 1100,
+      borderColor: "orange",
+      color: "orange",
+      bncolor: "orange",
+      radiusMax: '544px',
+      radiusMin: '510px',
+      isFinish: false,
+      status : 'new'
+    })
+    const chartPrpps10= ref({
+      top: 612,
+      left: 531,
+      width: 1272,
+      height: 1272,
+      borderColor: "green",
+      color: "green",
+      bncolor: "green",
+      radiusMax: '493px',
+      radiusMin: '459px',
+      isFinish: false,
+      status : 'new'
+    })
+    const chartPrpps11= ref({
+      top: 612,
+      left: 531,
+      width: 1272,
+      height: 1272,
+      borderColor: "pink",
+      color: "pink",
+      bncolor: "pink",
+      radiusMax: '459px',
+      radiusMin: '425px',
+      isFinish: false,
+      status : 'new'
+    })
+    const chartPrpps12= ref({
+      top: 612,
+      left: 531,
+      width: 1272,
+      height: 1272,
+      borderColor: "orange",
+      color: "orange",
+      bncolor: "orange",
+      radiusMax: '425px',
+      radiusMin: '391px',
+      isFinish: false,
+      status : 'new'
+    })
+
+    const chartPrpps13= ref({
+      top: 612,
+      left: 531,
+      width: 1272,
+      height: 1272,
+      borderColor: "green",
+      color: "green",
+      bncolor: "green",
+      radiusMax: '374px',
+      radiusMin: '340px',
+      isFinish: false,
+      status : 'new'
+    })
+    const chartPrpps14= ref({
+      top: 612,
+      left: 531,
+      width: 1272,
+      height: 1272,
+      borderColor: "blue",
+      color: "blue",
+      bncolor: "blue",
+      radiusMax: '340px',
+      radiusMin: '306px',
+      isFinish: false,
+      status : 'new'
+    })
+    const chartPrpps15= ref({
+      top: 612,
+      left: 531,
+      width: 1272,
+      height: 1272,
+      borderColor: "pink",
+      color: "pink",
+      bncolor: "pink",
+      radiusMax: '306px',
+      radiusMin: '272px',
+      isFinish: false,
+      status : 'new'
+    })
+    const chartPrpps16= ref({
+      top: 612,
+      left: 531,
+      width: 1272,
+      height: 1272,
+      borderColor: "orange",
+      color: "orange",
+      bncolor: "orange",
+      radiusMax: '255px',
+      radiusMin: '221px',
+      isFinish: false,
+      status : 'new'
+    })
+    const chartPrpps17= ref({
+      top: 612,
+      left: 531,
+      width: 1272,
+      height: 1272,
+      borderColor: "blue",
+      color: "blue",
+      bncolor: "blue",
+      radiusMax: '221px',
+      radiusMin: '187px',
+      isFinish: false,
+      status : 'new'
+    })
+    const chartPrpps18= ref({
+      top: 612,
+      left: 531,
+      width: 1272,
+      height: 1272,
+      borderColor: "green",
+      color: "green",
+      bncolor: "green",
+      radiusMax: '187px',
+      radiusMin: '153px',
+      isFinish: false,
+      status : 'new'
+    })
+    // const chartPrpps19= ref({
+    //   top: 612,
+    //   left: 531,
+    //   width: 1272,
+    //   height: 1272,
+    //   borderColor: "orange",
+    //   color: "orange",
+    //   bncolor: "orange",
+    //   radiusMax: '306px',
+    //   radiusMin: '272px',
+    //   isFinish: false,
+    //   status : 'new'
+    // })
     const position = reactive({x: 10, y: 10});
     let isDragging = false;
     let originX, originY;
@@ -329,11 +587,132 @@
         .ring-chart1 {
             width: 1832px;
             height: 800px;
+            border: 1px pink solid;
             position: absolute;
             left: 0px;
             top: 0px;
             //background: #ffff00;
         }
+         .ring-chart2{
+           width: 1832px;
+           height: 800px;
+           position: absolute;
+           left: 36px;
+           top: 36px;
+         }
+      .ring-chart3{
+        width: 1832px;
+        height: 800px;
+        position: absolute;
+        left: 70px;
+        top: 69px;
+      }
+      .ring-chart4{
+        width: 1832px;
+        height: 800px;
+        position: absolute;
+        top: 117px;
+        left: 117px;
+      }
+      .ring-chart5{
+        width: 1832px;
+        height: 800px;
+        position: absolute;
+        left: 154px;
+        top: 154px;
+      }
+      .ring-chart6{
+        width: 1832px;
+        height: 800px;
+        position: absolute;
+        top: 187px;
+        left: 187px;
+      }
+      .ring-chart7{
+        width: 1832px;
+        height: 800px;
+        position: absolute;
+        top: 150px;
+        left: 150px;
+      }
+      .ring-chart8{
+        width: 1832px;
+        height: 800px;
+        position: absolute;
+        top: 214px;
+        left: 214px;
+      }
+      .ring-chart9{
+        width: 1832px;
+        height: 800px;
+        position: absolute;
+        top:  299px;
+        left: 299px;
+      }
+      .ring-chart10{
+           width: 1832px;
+           height: 800px;
+           position: absolute;
+           top: 213px;
+           left: 213px;
+         }
+      .ring-chart11{
+              width: 1832px;
+              height: 800px;
+              position: absolute;
+              top: 213px;
+              left: 213px;
+            }
+      .ring-chart12{
+                 width: 1832px;
+                 height: 800px;
+                 position: absolute;
+                 top: 213px;
+                 left: 213px;
+               }
+
+      .ring-chart13{
+        width: 1832px;
+        height: 800px;
+        position: absolute;
+        top: 213px;
+        left: 213px;
+      }
+      .ring-chart14{
+        width: 1832px;
+        height: 800px;
+        position: absolute;
+        top: 213px;
+        left: 213px;
+      }
+      .ring-chart15{
+        width: 1832px;
+        height: 800px;
+        position: absolute;
+        top: 213px;
+        left: 213px;
+      }
+      .ring-chart16{
+        width: 1832px;
+        height: 800px;
+        position: absolute;
+        top: 213px;
+        left: 213px;
+      }
+       .ring-chart17{
+        width: 1832px;
+        height: 800px;
+        position: absolute;
+        top: 213px;
+        left: 213px;
+      }
+      .ring-chart18{
+        width: 1832px;
+        height: 800px;
+        position: absolute;
+        top: 213px;
+        left: 213px;
+      }
     }
     .bg-color-style{
       color:black;