Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/views/xjc-integratedmachine/wakeup/rainbow/FollowRingChart.vue

package.json

@@ -36,8 +36,9 @@
     "simple-keyboard-layouts": "^3.4.114",
     "splitpanes": "4.0.4",
     "video.js": "^8.23.3",
-    "vue": "3.5.16",
+    "vue": "3.5.17",
     "vue-cropper": "1.1.1",
+    "vue-element-plus-x": "^1.3.2",
     "vue-router": "4.5.1",
     "vuedraggable": "4.1.0"
   },

src/api/xjc-integratedmachine/common/aiChat.js

@@ -1,9 +1,21 @@
 import request from '@/utils/request'
 
-export function getAiChatRecordList(data) {
+// 获取ai聊天记录
+export function aiChatRecordList(data) {
     return request({
-        url: '/ai/chat/list',
+        url: '/ai/chat/record/list',
         method: 'get',
         params : data
     })
-}
+}
+
+// 增加ai聊天记录
+export function aiChatRecordAdd(data) {
+    return request({
+        url: '/ai/chat/record/add',
+        method: 'post',
+        params : data
+    })
+}
+
+// 创建ai记忆id

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/main.js

@@ -6,7 +6,7 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import locale from 'element-plus/es/locale/lang/zh-cn'
-
+import ElementPlusX from 'vue-element-plus-x'
 import '@/assets/styles/index.scss' // global css
 
 import App from './App'
@@ -70,6 +70,7 @@ app.use(router)
 app.use(store)
 app.use(plugins)
 app.use(elementIcons)
+app.use(ElementPlusX)
 app.component('svg-icon', SvgIcon)
 
 directive(app)

src/views/xjc-integratedmachine/common/ai/chat.vue

@@ -15,13 +15,24 @@
         <div class="main-content">
             <div class="chat-container">
                 <div class="message-list">
-
+                    <div v-for="item in chatRecordList" :key="item.id" :class="item.isUser? 'every-message user-message' : 'message bot-message' ">
+                        <!-- 会话图标 -->
+                        <div :class="item.isUser == 1? 'user-image' : 'system-image' "></div>
+                        <span style="display: flex">
+                            <el-text v-html="item.content"></el-text>
+                        </span>
+                    </div>
                 </div>
-                <div class="content-box">
-                    <div v-html="streamHtmlData"></div>
-                    <span class="loading-dots"></span>
-                    <span class="dot"></span>
-                    <span class="dot"></span>
+                <div class="message-box">
+                    <div class="typing-message">
+                        <span>
+                            <span v-html="streamHtmlData"></span>
+                            <span class="loading-dots">
+                                <span class="dot"></span>
+                                <span class="dot"></span>
+                            </span>
+                        </span>
+                    </div>
                 </div>
                 <el-button @click="stopMessage">停止回答</el-button>
             </div>
@@ -54,14 +65,14 @@
 </template>
 
 <script setup>
-    import {getAiChatRecordList} from '@/api/xjc-integratedmachine/common/aiChat.js'
+    import {aiChatRecordList} from '@/api/xjc-integratedmachine/common/aiChat.js'
     import { getToken } from '@/utils/auth'
     import { marked } from 'marked'
 
     // 聊天记录
     let chatRecordList = ref([])
     // md流式数据
-    const streamData = ref('');
+    const streamMarkdownData = ref('');
     // html流式数据
     let streamHtmlData = ref('');
     // 流式加载状态
@@ -71,22 +82,26 @@
     // AbortController用于中止请求
     let controller = null;
     // 输入的问题
-    const inputMessage = ref('')
-
+    let inputMessage = ref('')
+    // 发送标识
+    let isSending = ref(false)
     // 查看所有聊天记录
     list();
     function list() {
-        getAiChatRecordList().then(resp =>{
+        let queryForm = {
+
+        }
+        aiChatRecordList(queryForm).then(resp =>{
             console.log(resp)
-            chatRecordList.value = resp;
+            chatRecordList.value = resp.rows;
         })
     }
 
     const sendMessage = () => {
-        if (inputMessage.value.trim()) {
+/*        if (inputMessage.value.trim()) {
             sendRequest(inputMessage.value.trim())
             inputMessage.value = ''
-        }
+        }*/
     }
 
     const sendRequest = async(message) => {
@@ -100,7 +115,7 @@
         // chatRecordList.value.push(userMessage)
         try{
             isLoading.value = true;
-            streamData.value = ''; // 清空之前的数据
+            streamMarkdownData.value = ''; // 清空之前的数据
 
             // 创建AbortController以便可以中止请求
             controller = new AbortController();
@@ -110,7 +125,7 @@
                 "content": message? message: "你是谁？"
             }
             // 发送fetch请求
-            const response = await fetch('/dev-api/ai/chat/stream', {
+            const response = await fetch('/dev-api/ai/chat/record/stream', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -131,17 +146,17 @@
                 // 解码并追加数据
                 let chunk = decoder.decode(value, { stream: true });
                 chunk = chunk.replace(/\n\n/g, '').replace(/data:/g, '')
-                streamData.value += chunk;
-                streamHtmlData.value = marked(streamData.value)
+                streamMarkdownData.value += chunk;
+                streamHtmlData.value = marked(streamMarkdownData.value)
             }
         }catch (error) {
             // 如果是手动中止，不显示错误
             if (error.name !== 'AbortError') {
                 console.error('流式读取失败:', error);
-                streamData.value = 'Error: ' + error.message;
+                streamMarkdownData.value = 'Error: ' + error.message;
             }
         } finally {
-            streamHtmlData.value = marked(streamData.value)
+            streamHtmlData.value = marked(streamMarkdownData.value)
             isLoading.value = false;
             console.log("==============");
         }
@@ -214,9 +229,6 @@
         width: 10vw;
         background-color: #f4f4f9;
         padding: 20px;
-/*        display: flex;
-        flex-direction: column;
-        align-items: center;*/
     }
 
     .control-button-box {
@@ -245,6 +257,15 @@
         flex-direction: column;
     }
 
+    .every-message {
+        margin-bottom: 10px;
+        padding: 10px;
+        border-radius: 4px;
+        display: flex;
+        width: 40vw;
+        /* align-items: center; */
+    }
+
     .user-message {
         max-width: 70%;
         background-color: #e1f5fe;
@@ -258,10 +279,23 @@
         align-self: flex-start;
     }
 
-    /* 内容区 */
-    .content-box {
+    .system-image {
+        width: 32px;
+        height:32px;
+        background-image: url('@/assets/images/common/ai/system.png');
+    }
+
+    .user-image {
+        width: 32px;
+        height:32px;
+        background-image: url('@/assets/images/common/ai/user.png');
+    }
+
+    /* 每个消息的区域 */
+    .message-box {
         /*max-height: 300px;*/
         width: 60vw;
+        /*height: 30vh;*/
         overflow-y: auto;
         border: 1px solid #eee;
         padding: 10px;

src/views/xjc-integratedmachine/components/drag_component.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="fixed-box">
+    <div class="content-bottom">
+      <div class="draw draggable" ref="draggableRef" :style="{ top: position.y + 'px', left: position.x + '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>
+</template>
+<script setup>
+import {ref, onMounted, onUnmounted} from 'vue';
+
+const draggableRef = ref(null);
+const position = ref({x: 0, y: 0});
+const dragging = ref(false);
+const startX = ref(0);
+const startY = ref(0);
+const onMouseDown = (event) => {
+  dragging.value = true;
+  startX.value = event.clientX - position.value.x;
+  startY.value = event.clientY - position.value.y;
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp);
+};
+
+const onTouchStart = (event) => {
+  if (event.touches.length === 1) {
+    dragging.value = true;
+    startX.value = event.touches[0].clientX - position.value.x;
+    startY.value = event.touches[0].clientY - position.value.y;
+    document.addEventListener('touchmove', onTouchMove, {passive: true});
+    document.addEventListener('touchend', onTouchEnd, {passive: true});
+  }
+};
+
+const onMouseMove = (event) => {
+  if (dragging.value) {
+    position.value.x = event.clientX - startX.value;
+    position.value.y = event.clientY - startY.value;
+  }
+};
+
+const onTouchMove = (event) => {
+  if (dragging.value && event.touches.length === 1) {
+    position.value.x = event.touches[0].clientX - startX.value;
+    position.value.y = event.touches[0].clientY - startY.value;
+  }
+};
+
+const onMouseUp = () => {
+  dragging.value = false;
+  document.removeEventListener('mousemove', onMouseMove);
+  document.removeEventListener('mouseup', onMouseUp);
+};
+
+const onTouchEnd = () => {
+  dragging.value = false;
+  document.removeEventListener('touchmove', onTouchMove, {passive: true});
+  document.removeEventListener('touchend', onTouchEnd, {passive: true});
+};
+
+onMounted(() => {
+  const draggable = draggableRef.value;
+  draggable.addEventListener('mousedown', onMouseDown);
+  draggable.addEventListener('touchstart', onTouchStart, {passive: true});
+});
+
+// onUnmounted(() => {
+//   const draggable = draggableRef.value;
+//   draggable.removeEventListener('mousedown', onMouseDown);
+//   draggable.removeEventListener('touchstart', onTouchStart, {passive: true});
+//   document.removeEventListener('mousemove', onMouseMove);
+//   document.removeEventListener('mouseup', onMouseUp);
+//   document.removeEventListener('touchmove', onTouchMove, {passive: true});
+//   document.removeEventListener('touchend', onTouchEnd, {passive: true});
+// });
+
+</script>
+
+
+<style scoped lang="scss">
+.draggable {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  cursor: pointer;
+  user-select: none;
+}
+.fixed-box{
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  //bottom: 0px;
+  top: 678px;
+}
+.content-bottom{
+  width: 100%;
+  height: 270px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  align-items: center;
+  .draw{
+    width: 109px;
+    height: 170px;
+    img{
+      width: 109px;
+      height: 170px;
+    }
+  }
+
+  .ai-rabit{
+    position: absolute;
+    right: 0px;
+    bottom: 20px;
+    display: flex;
+    align-items: center;
+    .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;
+    }
+  }
+}
+.draggable-ball {
+  position: absolute;
+  cursor: pointer;
+  user-select: none; /* 防止拖拽时选中文字 */
+}
+</style>

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/index.vue

@@ -9,6 +9,7 @@
         <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>
+      <drag_component></drag_component>
     </div>
   </div>
 
@@ -16,6 +17,7 @@
 
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 
 
 const router = useRouter()

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

@@ -14,40 +14,25 @@
           本测评从<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 }}
+          <img src="@/assets/images/wakeup/maturity/structure-img.png">
          <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>
+               <p @click="describe('职业世界认知： 个体对职业的意义、职业的发展前景、从业要求、实现途径、工作职责、社会地位等的了解程度。')"></p>
+               <p @click="describe('职业自我认知：个体对自己的职业能力、气质、性格、兴趣、价值观等的了解程度。')"></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>
+               <p @click="describe('主动性反映的是个体积极参与生涯决策过程的程度。')"></p>
+               <p @click="describe('独立性反映的是个体不盲目依赖他人而独立作出生涯决策的程度。')"></p>
+               <p @click="describe('自信心反映的是个体对自己生涯决策知识与能力的信心程度。')"></p>
+               <p @click="describe('功利性反映的是个体根据自身特点还是根据待遇收入等功利性因素来选择职业的程度。')"></p>
+               <p @click="describe('稳定性反映的是不同时期个体对将来想从事的职业领域的一致性程度。')"></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>
+      <drag_component></drag_component>
     </div>
     <el-dialog v-model="centerDialogVisible" :show-close="false" width="500" center>
     <span>
@@ -68,6 +53,7 @@
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 import {onMounted, reactive} from "vue";
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 const headinfo = ref({})
 const describeInfo = ref('')
 function setHeadinfo(){
@@ -167,20 +153,16 @@ p{
       img{
         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;
@@ -188,12 +170,10 @@ p{
        p{
          width: 89px;
          height: 314px;
-         border: 1px solid green;
        }
      }
       .right{
         margin-left: 89px;
-        border: 1px solid pink;
         width: 541px;
         height: 314px;
         display: flex;
@@ -201,7 +181,6 @@ p{
         p{
           width: 89px;
           height: 314px;
-          border: 1px solid green;
         }
       }
     }
@@ -215,55 +194,6 @@ p{
       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;
-      img{
-        width: 109px;
-        height: 170px;
-      }
-    }
-
-    .ai-rabit{
-      position: absolute;
-      right: -27px;
-      display: flex;
-      align-items: center;
-      .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;
-      }
-    }
-  }
-  .draggable-ball {
-    position: absolute;
-    cursor: pointer;
-    user-select: none; /* 防止拖拽时选中文字 */
-  }
   ::v-deep .el-dialog{
     width: 632px;
     height: 343px;

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

@@ -2,36 +2,51 @@
   <div class="maturity-game-page" v-loading="pageLoading">
     <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 class="page-box">
+        <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>
-        <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 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-info">
-            {{ newData.length }} / {{ questionSize }}
+          <div class="progress-container">
+            <div class="progress-bar" :style="{ width: progress + '%' }">
+            </div>
+            <div class="progress-info">
+              {{ newData.length }} / {{ questionSize }}
+            </div>
           </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 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>
-        <img class="btn-img" @click="submitAnswer" v-show="newData.length >= questionSize" src="@/assets/images/wakeup/maturity/submit.png" >
+        <drag_component></drag_component>
       </div>
     </div>
   </div>
@@ -40,8 +55,9 @@
 
 <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";
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 
 
 const router = useRouter()
@@ -50,17 +66,18 @@ 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 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;
 }
@@ -75,14 +92,14 @@ function drop(event) {
   }
 }
 
-function setHeadinfo(){
+function setHeadinfo() {
   headinfo.value = {
     title: '生涯成熟度测评',
     user: {
       avatar: '头像路径',
       nickName: '张三'
     },
-    backUrl : '/index'
+    backUrl: '/index'
   }
 }
 
@@ -97,11 +114,11 @@ 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) =>{
+  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){
+        if (index === 0) {
           //给第一道题的选项进行赋值；
           questionAnswerA.value = item.questionAnswer[0];
           questionAnswerB.value = item.questionAnswer[1];
@@ -116,11 +133,12 @@ function getMaturityAppraisalList() {
     appraisalId.value = res.data.appraisalId;
     questionSize.value = res.data.questionSize;
     pageLoading = false;
-  }).catch((err)=>{
+  }).catch((err) => {
     console.log("error")
     pageLoading = false;
   })
 }
+
 //计时器
 const elapsedTime = ref(0);
 const timerId = ref(null);
@@ -153,7 +171,7 @@ const formattedTime = (ms) => {
   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;
+  useTime.value = totalSeconds;
   return `${hours}:${minutes}:${seconds}`;
 };
 
@@ -185,12 +203,12 @@ const updateCurrent = (newCurrent) => {
 const selectBtn = (val) => {
   //将当前题目加入新数组，
   // 拼接选项数据
-  if(newData.value.length != questionSize.value ){
+  if (newData.value.length != questionSize.value) {
     itemScore.value += val + '|'
     newData.value.push(maturityAppraisalData.value[0]);
   }
   //更换题卡；
-  if(maturityAppraisalData.value.length >1 ){
+  if (maturityAppraisalData.value.length > 1) {
     maturityAppraisalData.value.splice(0, 1);
     //给按钮赋值；
     questionAnswerValue();
@@ -207,13 +225,15 @@ const previousQuestion = (val) => {
   //返回上一题后要更新按钮赋值；
   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 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: '确定',
@@ -226,13 +246,13 @@ function submitAnswer() {
       "itemScore": itemScore.value,
       "useTime": useTime.value,
       "sourceType": "1",
-      "appraisalId":appraisalId.value,
+      "appraisalId": appraisalId.value,
       "ytjType": "wakeup"
     }
     insertAppraisalAnswer(params).then(res => {
       console.log(res);
       pageLoading = false;
-    }).catch((err)=>{
+    }).catch((err) => {
       console.log("error")
       pageLoading = false;
     })
@@ -245,41 +265,48 @@ function submitAnswer() {
 
 
 <style scoped lang="scss">
-p{
+p {
   margin: 0;
-  padding:0;
+  padding: 0;
 }
-.maturity-game-page{
+
+.maturity-game-page {
   background: url('@/assets/images/wakeup/maturity/maturity-game-bg.png') no-repeat;
   background-size: 1920px 1080px;
-  z-index:10;
+  z-index: 10;
   width: 100%;
   height: 1080px;
-  .page-content{
+
+  .page-content {
     width: 100%;
     position: absolute;
     top: 123px;
     bottom: 0;
     display: flex;
     justify-content: space-around;
-    .content-left{
+
+    .content-left {
       width: 244px;
     }
-    .content-center{
-      height:910px;
+
+    .content-center {
+      height: 910px;
       display: flex;
       flex-direction: column;
-      .content-img{
+
+      .content-img {
         width: 1187px;
         height: 424px;
         //border: 1px solid;
         margin-top: 40px;
         position: relative;
-        img{
+
+        img {
           width: 1187px;
           height: 424px;
         }
-        p{
+
+        p {
           width: 930px;
           position: absolute;
           top: 150px;
@@ -291,6 +318,7 @@ p{
           text-align: center;
         }
       }
+
       .progress-container {
         width: 100%;
         //background-color: #f3f3f3;
@@ -320,28 +348,33 @@ p{
         margin-left: 20px;
       }
     }
-    .content-right{
+
+    .content-right {
       display: flex;
       flex-direction: column;
       align-items: center;
-      .btn-img{
+
+      .btn-img {
         width: 244px;
         height: 77px;
         margin-top: 20px;
       }
-      .time{
-        width:220px;
+
+      .time {
+        width: 220px;
         height: 50px;
         //border: 1px solid;
         display: flex;
         justify-content: center;
         margin-top: 20px;
-        img{
+
+        img {
           width: 42px;
           height: 42px;
           //border: 1px solid;
         }
-        p{
+
+        p {
           width: 150px;
           font-weight: 300;
           font-size: 32px;
@@ -351,18 +384,21 @@ p{
       }
     }
   }
-  .group-btn{
+
+  .group-btn {
     display: flex;
     justify-content: space-around;
     margin-top: 80px;
-    img{
+
+    img {
       width: 200px;
       height: 135px;
     }
   }
 }
-.el-message-box{
-  max-width:none;
+
+.el-message-box {
+  max-width: none;
   width: 632px;
   height: 289px;
 }

src/views/xjc-integratedmachine/wakeup/career_recognize/development_stage.vue

@@ -13,17 +13,7 @@
     <p class="answer">从幼年到老年，随着生理的成熟、经验能力和自我概念的发展，个人对工作情况的认识和判断、对职业的选择及决定，也在不断地适应和发展。</p>
     <p  class="title">4.生涯发展是一个适应的过程</p>
     <p class="answer">生涯发展的过程，要求个体一方面发展个人特长，另一方面适应社会发展的需要，以达到人尽其才、适应者得以更好发展的境界</p>
-    <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" />
-      </div>
-    </div>
+    <drag_component></drag_component>
   </div>
       </div>
   </div>
@@ -31,8 +21,9 @@
 </template>
 
 <script setup>
+import {onMounted} from "vue";
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
-import {onMounted, reactive} from "vue";
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 const headinfo = ref({})
 
 function setHeadinfo(){
@@ -45,33 +36,7 @@ function setHeadinfo(){
     backUrl : '/xjc-integratedmachine/wakeup/career_recognize/index'
   }
 }
-const position = reactive({ x: 100, 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);
-};
-
-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 stopDrag = () => {
-  isDragging = false;
-  document.removeEventListener('mousemove', onMouseMove);
-  document.removeEventListener('mouseup', stopDrag);
-};
 onMounted(() => {
   setHeadinfo()
 })
@@ -103,6 +68,7 @@ p{
     border-radius: 35px 35px 35px 35px;
     margin: 13px auto 0;
     padding-top: 25px;
+    position: relative;
     .text-info{
       font-weight: bold;
       font-size: 32px;
@@ -127,49 +93,7 @@ p{
       padding: 0 150px;
     }
   }
-  .content-bottom{
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    .draw{
-      width: 109px;
-      height: 170px;
-      margin-left: 34px;
-      img{
-        width: 109px;
-        height: 170px;
-      }
-    }
 
-    .ai-rabit{
-      position: absolute;
-      right: 6px;
-      top: -50px;
-      display: flex;
-      align-items: center;
-      .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;
-      }
-    }
-  }
-  .draggable-ball {
-    position: absolute;
-    cursor: pointer;
-    user-select: none; /* 防止拖拽时选中文字 */
-  }
 }
 
 </style>

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

@@ -13,17 +13,7 @@
           <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" @touchstart.native="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" />
-        </div>
-      </div>
+      <drag_component></drag_component>
     </div>
   </div>
 
@@ -31,17 +21,12 @@
 
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
-
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 
 const router = useRouter()
 
 const headinfo = ref({})
 
-// const isDragging = ref(false)
-const offset = ref({ x: 0, y: 0 })
-const startX = ref(0)
-const startY = ref(0)
-
 function setHeadinfo(){
   headinfo.value = {
     title: '生涯唤醒学习系统',
@@ -63,34 +48,6 @@ function jumpTo(path) {
 onMounted(() => {
   setHeadinfo()
 })
-
-import { reactive, onMounted } from 'vue';
-
-const position = reactive({ x: 100, y: 10 });
-let isDragging = false;
-let originX, originY;
-
-const startDrag = (e) => {
-  isDragging = true;
-  originX = e.clientX - position.x;
-  originY = e.clientY - position.y;
-  document.addEventListener('mousemove', onMouseMove);
-  document.addEventListener('mouseup', stopDrag);
-};
-
-const onMouseMove = (e) => {
-  if (isDragging) {
-    position.x = e.clientX - originX;
-    position.y = e.clientY - originY;
-  }
-};
-
-const stopDrag = () => {
-  isDragging = false;
-  document.removeEventListener('mousemove', onMouseMove);
-  document.removeEventListener('mouseup', stopDrag);
-};
-
 </script>
 
 
@@ -190,12 +147,6 @@ const stopDrag = () => {
   border-radius: 10px;
   cursor: pointer;
 }
-.draggable-ball {
-  position: absolute;
-  cursor: pointer;
-  user-select: none; /* 防止拖拽时选中文字 */
-}
-
 
 </style>
 

src/views/xjc-integratedmachine/wakeup/career_recognize/plan_significance.vue

@@ -9,16 +9,7 @@
         <p class="text-info">
           对高中生而言，做好生涯规划可以使我们以明确的人生目标为导向，激发自身潜能、发挥个人特长，增强克服困难的勇气与毅力，在实现学业与人生阶段性价值的同时，为未来的幸福生活奠定基础。
         </p>
-        <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>
+        <drag_component></drag_component>
       </div>
     </div>
   </div>
@@ -27,7 +18,8 @@
 
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
-import {onMounted, reactive} from "vue";
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {onMounted} from "vue";
 const headinfo = ref({})
 
 function setHeadinfo(){
@@ -40,33 +32,6 @@ function setHeadinfo(){
     backUrl : '/xjc-integratedmachine/wakeup/career_recognize/index'
   }
 }
-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);
-};
-
-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 stopDrag = () => {
-  isDragging = false;
-  document.removeEventListener('mousemove', onMouseMove);
-  document.removeEventListener('mouseup', stopDrag);
-};
 onMounted(() => {
   setHeadinfo()
 })
@@ -111,55 +76,6 @@ p{
       margin-top: 100px;
     }
   }
-  .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;
-      img{
-        width: 109px;
-        height: 170px;
-      }
-    }
-
-    .ai-rabit{
-      position: absolute;
-      right: -27px;
-      display: flex;
-      align-items: center;
-      .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;
-      }
-    }
-  }
-  .draggable-ball {
-    position: absolute;
-    cursor: pointer;
-    user-select: none; /* 防止拖拽时选中文字 */
-  }
 }
 
 </style>

src/views/xjc-integratedmachine/wakeup/career_recognize/plan_steps.vue

@@ -19,16 +19,7 @@
         <p class="answer">通过对自我认知与环境探索的组合分析，发展决策能力，做出生涯决策，确立自己的人生目标、职业目标、学业目标，同时根据长远目标，分解出中期目标和短期目标。</p>
         <p  class="title">6.反思改进（评估）</p>
         <p class="answer">行动的结果如何？是否适合我？坚持省察与批判的态度，评估目标的达成度、计划的可行性等，根据环境和自身的发展，适当调整和修正目标，让生涯历程既有规划又有变通，即人和环境均衡协调。</p>
-        <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>
+        <drag_component></drag_component>
       </div>
     </div>
   </div>
@@ -38,6 +29,7 @@
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 import {onMounted, reactive} from "vue";
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 const headinfo = ref({})
 
 function setHeadinfo(){
@@ -133,56 +125,6 @@ p{
       padding: 0 150px;
     }
   }
-  .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;
-      img{
-        width: 109px;
-        height: 170px;
-      }
-    }
-
-    .ai-rabit{
-      position: absolute;
-      right: -27px;
-      //top: -271px;
-      display: flex;
-      align-items: center;
-      .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;
-      }
-    }
-  }
-  .draggable-ball {
-    position: absolute;
-    cursor: pointer;
-    user-select: none; /* 防止拖拽时选中文字 */
-  }
 }
 
 </style>

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

@@ -3,7 +3,6 @@
     <head-component :headinfo=headinfo></head-component>
     <div class="page-content">
       <div class="content-text-box">
-<!--         <img  class="head-icon" src="@/assets/images/wakeup/background-content-style.png" alt="404">-->
         <p>
           生涯是个人有目的、连续不断的生活模式，由我们选择扮演的各种生活角色、所从事的活动组成。生涯不仅仅是职业，对我们每个人而言，最大的幸福不只是在职业上的成功，更在于一生中是否能拥有一个多彩、平衡、充盈的生涯。
         </p>
@@ -25,54 +24,18 @@
           <img src="@/assets/images/wakeup/card5.png"  @click="jumpTo('/xjc-integratedmachine/wakeup/career_cinema/index')">
         </div>
       </div>
-<!--      <div class="content-bottom">-->
-<!--        <div class="draw draggable-ball" ref="draggableBox" @touchstart.native="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" />-->
-<!--        </div>-->
-<!--      </div>-->
-<!--      <div id="draggable" style="width: 100px; height: 100px; background-color: red; position: absolute; top: 0; left: 0;">Drag me!</div>-->
-      <div id="draggable" style="width: 100px; height: 100px; background-color: red; position: absolute;">拖拽我</div>
+     <drag_component></drag_component>
     </div>
   </div>
-
 </template>
 
 <script setup>
     import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
-
-
     const router = useRouter()
-
     const headinfo = ref({})
+    import { ref, onMounted, onUnmounted } from 'vue';
+    import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 
-    // const isDragging = ref(false)
-    const offset = ref({ x: 0, y: 0 })
-    // const startX = ref(0)
-    // const startY = ref(0)
-///
-
-    const draggedItem = ref(null);
-
-    function dragStart(event) {
-      draggedItem.value = event.target;
-    }
-
-    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(){
         headinfo.value = {
             title: '生涯唤醒学习系统',
@@ -92,32 +55,8 @@
         })
     }
 
-    // onMounted(() => {
-    //
-    // })
-    onMounted(() => {
-      setHeadinfo()
-      // let startPosX, startPosY, startTouchX, startTouchY;
-      //
-      // $('#draggable').on('touchstart', function(e) {
-      //   startPosX = $(this).position().left;
-      //   startPosY = $(this).position().top;
-      //   startTouchX = e.originalEvent.touches[0].pageX;
-      //   startTouchY = e.originalEvent.touches[0].pageY;
-      // });
-      //
-      // $('#draggable').on('touchmove', function(e) {
-      //   e.preventDefault(); // 阻止默认的滚动行为
-      //   const touchX = e.originalEvent.touches[0].pageX;
-      //   const touchY = e.originalEvent.touches[0].pageY;
-      //   const deltaX = touchX - startTouchX;
-      //   const deltaY = touchY - startTouchY;
-      //   $(this).css({
-      //     left: startPosX + deltaX,
-      //     top: startPosY + deltaY,
-      //   });
-      // });
-    });
+
+
 </script>
 
 
@@ -133,7 +72,7 @@
     position: absolute;
     top: 123px;
     bottom: 0;
-    p{
+       p{
       padding-left: 44px;
       padding-right: 44px;
       font-weight: 400;
@@ -222,26 +161,6 @@
         border-radius: 10px;
         cursor: pointer;
     }
-.draggable-ball {
-  touch-action: none;
-  position: absolute;
-  //width: 50px;
-  //height: 50px;
-  //background-color: blue;
-  //border-radius: 50%;
-  cursor: pointer;
-  user-select: none; /* 防止拖拽时选中文字 */
-}
 
-.draggable {
-  width: 100px;
-  height: 100px;
-  background-color: lightblue;
-  margin: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #ccc;
-}
 </style>
 

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

@@ -20,6 +20,7 @@
     };
 
 
+    // document.body.style.overflow = 'hidden';
     const props = defineProps({
         chartProps: {}
     })