[feat] 环境探索-部分

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

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

src/components/HeaderSearch/index.vue

@@ -58,7 +58,7 @@ const activeIndex = ref(-1)
 const show = ref(false)
 const fuse = ref(undefined)
 const headerSearchSelectRef = ref(null)
-const router = useRouter()
+
 const theme = computed(() => useSettingsStore().theme)
 const routes = computed(() => usePermissionStore().defaultRoutes)
 

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

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <el-dialog v-model="centerDialogVisible" :show-close="false" width="500" center>
+      <div class="dialog-box">
+        {{ dialogInfo.content }}
+      </div>
+      <div class="footer-box">
+        <el-button type="primary" @click=""handClick>
+          {{dialogInfo.confirm}}
+        </el-button>
+        <el-button type="primary" @click="centerDialogVisible = false">
+          关闭
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { defineEmit } from 'vue';
+const centerDialogVisible = ref(false)
+const props = defineProps({
+  dialogInfo: {}
+})
+function handClick(){
+  emit('notify');
+}
+const emit = defineEmit(['notify']);
+</script>
+
+
+
+<style scoped lang="scss">
+.dialog-box{
+  width: 463px;
+  height: 188px;
+  font-weight: bold;
+  font-size: 32px;
+  color: #000000;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.footer-box{
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  ::v-deep .el-button:nth-child(1){
+    width: 136px;
+    height: 60px;
+    background: #2BC17B;
+  }
+  ::v-deep .el-button:nth-child(2){
+    width: 136px;
+    height: 60px;
+    background: #FB5451;
+  }
+  ::v-deep .el-button>span{
+    font-size: 24px;
+  }
+}
+</style>

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

@@ -26,12 +26,14 @@
     const props = defineProps({
       headinfo: {}
     })
-
     function backTo() {
-        // router.push({
-        //     path: props.headinfo.backUrl
-        // })
-      router.go(-1);
+      if(props.headinfo.backUrlUse){
+        router.push({
+            path: props.headinfo.backUrl
+        })
+      }else {
+        router.go(-1);
+      }
     }
 
     function exit() {
@@ -98,6 +100,7 @@
           font-weight: 400;
           font-size: 24px;
           color: #FFFFFF;
+          margin-right: 48px;
         }
         .right-user{
 

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

@@ -1,29 +1,163 @@
 <template>
-    数字化生涯学习系列资源<br>
-    环境探索学习系统<br>
-    生涯学习不仅要对自我进行认知，还要对家庭和社会环境进行探索，对学职世界的外部环境进行探索，即对高校、专业、职业的探究。<br>
-    <button @click="jumpTo('/xjc-integratedmachine/environment/query_universitydb_conditions')">高校库</button>
-    <button @click="jumpTo('/xjc-integratedmachine/environment/prodb_search_undergraduate')">专业库</button>
-    <button @click="jumpTo('/xjc-integratedmachine/environment/occdb_search_industry')">职业库</button>
-    <button @click="jumpTo('/xjc-integratedmachine/environment/studyocc_information')">学职资讯</button>
-    <button>AI生涯访谈</button>
-
-
+  <div class="wake-up-page">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <div class="img-box">
+          <img src="@/assets/images/environment/card1.png" @click="jumpTo('/xjc-integratedmachine/environment/query_universitydb_conditions')">
+          <img src="@/assets/images/environment/card2.png" @click="jumpTo('/xjc-integratedmachine/environment/prodb_search_undergraduate')">
+          <img src="@/assets/images/environment/card3.png" @click="jumpTo('/xjc-integratedmachine/environment/occdb_search_industry')">
+          <img src="@/assets/images/environment/card4.png" @click="jumpTo('/xjc-integratedmachine/environment/studyocc_information')">
+        </div>
+        <div class="bottom-img">
+          <img src="@/assets/images/environment/ai-img.png">
+        </div>
+      </div>
+      <drag_component></drag_component>
+    </div>
+  </div>
 
 </template>
 
 <script setup>
-    const route = useRoute()
-    const router = useRouter()
-    const {proxy} = getCurrentInstance()
-
-    function jumpTo(path) {
-        router.push({
-            path : path
-        })
-    }
+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({})
+
+function setHeadinfo(){
+  headinfo.value = {
+    title: '生涯唤醒学习系统',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/xjc-integratedmachine/wakeup/index'
+  }
+}
+
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: {name: 123}
+  })
+}
+onMounted(() => {
+  setHeadinfo()
+})
 </script>
 
-<style scoped>
+
+<style scoped lang="scss">
+.wake-up-page{
+  background: url('@/assets/images/login/login-home-background.png') no-repeat;
+  background-size: 1920px 1080px;
+  z-index:10;
+  width: 100%;
+  height: 1080px;
+  .page-content{
+    width: 100%;
+    position: absolute;
+    top: 123px;
+    bottom: 0;
+    p{
+      padding-left: 44px;
+      padding-right: 44px;
+      font-weight: 400;
+      font-size: 30px;
+      color: #333333;
+      line-height: 52px;
+      letter-spacing: 3px;
+      text-indent: 2em;
+    }
+  }
+  .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;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 40px;
+    .img-box{
+      width: 1520px;
+      display: flex;
+      justify-content: space-around;
+      img{
+        width: 350px;
+        height: 500px;
+      }
+    }
+    .bottom-img{
+      width: 1520px;
+      height: 316px;
+      margin-top: 63px;
+      img{
+        width: 1520px;
+        height: 316px;
+      }
+    }
+  }
+
+  .content-bottom{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    .draw{
+      width: 109px;
+      height: 170px;
+      margin-left: 100px;
+      img{
+        width: 109px;
+        height: 170px;
+      }
+    }
+
+    .ai-rabit{
+      position: absolute;
+      right: 100px;
+      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;
+      }
+    }
+  }
+
+}
+.temp{
+  width:20vw;
+  height: 10vh;
+  background: #85eff5;
+  border: solid 1px #a2fffc;
+  border-radius: 10px;
+  cursor: pointer;
+}
 
 </style>
+

src/views/xjc-integratedmachine/environment/query_universitydb_conditions.vue

@@ -1,150 +1,336 @@
 <template>
-    高校库条件查询
-
-    <el-card style="width:200px">
-        <div @click="changeTab('tj')">
+  <div class="wake-up-page">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="content-left">
+        <div class="tab-box">
+          <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
+               <img v-if="onePage" src="@/assets/images/environment/condition-search-h.png">
+               <img v-else src="@/assets/images/environment/condition-search.png">
             条件查询
-        </div>
-        <div @click="changeTab('gjz')">
+          </div>
+          <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
+            <img v-if="twoPage" src="@/assets/images/environment/keys-search-h.png">
+            <img v-else src="@/assets/images/environment/keys-search.png">
             关键字查询
+          </div>
         </div>
-    </el-card>
-
-
-    <div v-show="tab == 'tj'">
-        <div @click="showAreaChooseHandler">院校属地::{{form.areaname}}</div>
-        <div @click="showEducationlevelHandler">学历层次:: {{form.educationlevelName}}</div>
-        <div @click="showCharacteristicHandler">特色::{{form.characteristicName}}</div>
-        <div>
-            <!--院校属地-->
-            <el-dialog v-model="showAreaChoose" width="600px" append-to-body>
-                <div v-for="dict in gk_province" :key="dict.value" @click="chooseArea(dict)">{{dict.label}}</div>
-            </el-dialog>
-        </div>
-        <div>
-            <!--学历层次-->
-            <el-dialog v-model="showEducationlevel" width="600px" append-to-body>
-                <div v-for="dict in educationlevel" :key="dict.value" @click="chooseEducationlevel(dict)">
-                    {{dict.label}}
-                </div>
-            </el-dialog>
-        </div>
-        <div>
-            <!--特色-->
-            <el-dialog v-model="showCharacteristic" width="600px" append-to-body>
-                <div v-for="dict in characteristic" :key="dict.value" @click="chooseCharacteristic(dict)">
-                    {{dict.label}}
-                </div>
-            </el-dialog>
+      </div>
+      <div class="content-right">
+        <div class="one-page" v-show="onePage">
+          <div>
+            <img  src="@/assets/images/environment/search-card1.png">
+            <img  src="@/assets/images/environment/search-card2.png">
+            <img  src="@/assets/images/environment/search-card3.png">
+          </div>
         </div>
+        <div class="two-page" v-show="twoPage">
+          <div class="two-page-search">
+            <el-input
+                v-model="form.name"
+                style="width: 1484px;height: 84px"
+                placeholder="请输入"
+                @change="byKeyword"
+            >
+              <template #suffix>
+                <span style="font-size: 38px;color: #444040;margin-left: 37px;">
+                  X
+                </span>
+<!--                <el-icon class="el-input__icon"><calendar /></el-icon>-->
+<!--                <img  src="@/assets/images/environment/condition-search-h.png">-->
+              </template>
+            </el-input>
+          </div>
+          <div class="result-box" >
+          <div class="two-page-result">
 
-        <el-button @click="search">开始查询</el-button>
-    </div>
-    <div v-show="tab == 'gjz'">
-        <el-input v-model="form.name"></el-input>
-        <el-button @click="byKeyword">关键字</el-button>
-        <div v-for="(item,index) in universityList">
-            <div @click="toDetail(item)">{{item.name}}</div>
+              <div v-for="(item,index) in universityList" :class="[item.selected?'item-result-box-active':'item-result-box']"
+                   @click="toDetail(item)">
+                <div v-html="item.name"></div>
+              </div>
+            </div>
+
+<!--            <div class="item-result-box-active">-->
+<!--              程序员计算机程序员计算机程序员计算机程序员计算机-->
+<!--            </div>-->
+          </div>
         </div>
+      </div>
+      <drag_component></drag_component>
     </div>
-
+  </div>
 
 </template>
 
 <script setup>
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {ref} from "vue";
+import {getUniversityByKeyword} from "@/api/xjc-integratedmachine/environment/university.js";
 
-    import {getUniversityByKeyword} from '@/api/xjc-integratedmachine/environment/university.js'
-
-    const tab = ref("tj")
-
-    function changeTab(path) {
-        tab.value = path
-    }
+const router = useRouter()
 
-    const router = useRouter()
 
-    const showAreaChoose = ref(false)
-    const showEducationlevel = ref(false)
-    const showCharacteristic = ref(false)
+const onePage = ref(true)
+const twoPage = ref(false)
+const threePage = ref(false)
+const form = ref({
+  areaid: null,
+  areaname: null,
+  educationlevel: null,
+  educationlevelName: null,
+  characteristic: null,
+  characteristicName: null,
+  name : null
+})
+const keyInput = ref(false);
+const headinfo = ref({})
+function setHeadinfo(){
+  headinfo.value = {
+    title: '生涯唤醒学习系统',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/xjc-integratedmachine/wakeup/index'
+  }
+}
 
-    const {proxy} = getCurrentInstance()
-    const {gk_province, educationlevel, characteristic} = proxy.useDict('gk_province', 'educationlevel', 'characteristic')
+//切换tabs
+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;
+  }
+}
 
-    const form = ref({
-        areaid: null,
-        areaname: null,
-        educationlevel: null,
-        educationlevelName: null,
-        characteristic: null,
-        characteristicName: null,
-        name : null
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: {name: 123}
+  })
+}
+onMounted(() => {
+  setHeadinfo()
+})
+const universityList = ref([])
+// 定义一个函数，用于将关键词变为红色
+function highlightKeywords(text, keywords) {
+  // 遍历关键词列表
+  keywords.forEach(keyword => {
+    // 使用正则表达式匹配关键词，并替换为带有红色样式的HTML标签
+    // 这里使用全局匹配标志'g'，以确保替换所有出现的关键词
+    console.log("keywords",keywords)
+    let regex = new RegExp(keyword, 'g');
+    text = text.replace(regex, `<span style="color: #0DE6A1;">${keyword}</span>`);
+    console.log("text",text)
+  });
+  return text;
+}
+function byKeyword() {
+  getUniversityByKeyword(form.value).then(resp => {
+    resp.list.map(item =>{
+      item.selected = false;
+      let keyWord = form.value.name
+      item.name = highlightKeywords(item.name, [keyWord]);
+      console.log(" item.name", item.name)
+      // 遍历数据数组，并处理每个字符串
     })
 
-    function showAreaChooseHandler() {
-        showAreaChoose.value = true
-    }
+    universityList.value = resp.list
+  })
+}
 
-    function chooseArea(item) {
-        form.value.areaid = item.value
-        form.value.areaname = item.label
-        showAreaChoose.value = false
-    }
 
-    function showEducationlevelHandler() {
-        showEducationlevel.value = true
+function toDetail(row) {
+  router.push({
+    path : '/xjc-integratedmachine/environment/university_details_video',
+    query : {
+      id : row.id,
+      name : row.name,
     }
+  })
+}
 
-    function chooseEducationlevel(item) {
-        form.value.educationlevel = item.value
-        form.value.educationlevelName = item.label
-        showEducationlevel.value = false
-    }
+</script>
 
-    function showCharacteristicHandler() {
-        showCharacteristic.value = true
-    }
 
-    function chooseCharacteristic(item) {
-        form.value.characteristic = item.value
-        form.value.characteristicName = item.label
-        showCharacteristic.value = false
-    }
+<style scoped lang="scss">
+.wake-up-page {
+  background: url('@/assets/images/login/login-home-background.png') no-repeat;
+  background-size: 1920px 1080px;
+  z-index: 10;
+  width: 100%;
+  height: 1080px;
 
-    function search() {
-        router.push({
-            path: '/xjc-integratedmachine/environment/university_list',
-            query: form.value
-        })
+  .page-content {
+    width: 100%;
+    position: absolute;
+    top: 100px;
+    bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    .content-left {
+      width: 244px;
+      height: 957px;
+      background: rgba(255, 255, 255, 0.26);
+      ::v-deep .el-menu-item .is-active {
+        background: red !important;
+      }
+      .item-box{
+        width: 244px;
+        height: 80px;
+        color: #B3B3B3;
+        display: flex;
+        align-items: center;
+        margin-right:5px;
+        font-weight: bold;
+        font-size: 20px;
+        background: #C8FFED;
+        img{
+          width: 28px;
+          height: 28px;
+          margin-right:10px;
+          margin-left: 40px;
+        }
+      }
+      .item-box-active{
+        width: 244px;
+        height: 80px;
+        background: #1EC590;
+        font-weight: bold;
+        font-size: 20px;
+        display: flex;
+        color: #FFFFFF;
+        line-height: 40px;
+        margin-right:5px;
+        align-items: center;
+        img{
+          width: 28px;
+          height: 28px;
+          margin-right:10px;
+          margin-left: 40px;
+        }
+      }
     }
+    .content-right{
+      width: 1615px;
+      height: 926px;
+      background: #FFFFFF;
+      border-radius: 35px 35px 35px 35px;
+      margin-top: 13px;
+      margin-right: 24px;
+      .one-page{
+        div{
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+        }
+        img{
+          width: 446px;
+          height: 239px;
+          margin-top: 271px;
+        }
+      }
+      .two-page{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
 
-    const universityList = ref([])
-    function byKeyword() {
-        getUniversityByKeyword(form.value).then(resp => {
-            universityList.value = resp.list
-        })
-    }
+        .two-page-search{
+            margin-top: 57px;
+            ::v-deep .el-input__inner{
+              width: 1300px;
+              height: 84px;
+              font-size: 24px;
+              margin-left: 34px;
+            }
+          ::v-deep .el-input__suffix{
+            font-size: 100px;
+            width: 100px;
+            height: 100px;
 
-    function toDetail(row) {
-        router.push({
-            path : '/xjc-integratedmachine/environment/university_details_video',
-            query : {
-                id : row.id,
-                name : row.name,
+          }
+          ::v-deep .el-input__wrapper{
+            background: #F5F9FA;
+            box-shadow: none;
+          }
+        }
+        .result-box{
+           width: 1484px;
+           height: 750px;
+           overflow: auto;
+          .two-page-result{
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            align-items: center;
+            .item-result-box-active{
+              min-width: 320px;
+              height: 92px;
+              background: linear-gradient( 180deg, #B6FFEF 0%, #C5EEFF 100%);
+              box-shadow: inset 0px -2px 7px 0px #1E410E;
+              border-radius: 5px 5px 5px 5px;
+              border: 1px solid #A2F57F;
+              font-weight: 400;
+              font-size: 30px;
+              color: #0DE6A1;
+              line-height:90px;
+              text-align: center;
+              margin-left: 50px;
+              margin-top: 32px;
+              padding-left: 20px;
+              padding-right: 20px;
             }
-        })
-    }
-    // function showAreaChooseHandler() {
-    //     showAreaChoose.value = true
-    // }
-    //
-    // function chooseArea(item) {
-    //     form.value.areaid = item.value
-    //     form.value.areaname = item.label
-    //     showAreaChoose.value = false
-    // }
+            .item-result-box{
+              min-width: 320px;
+              height: 92px;
+              background: #E0EEF4;
+              border-radius: 5px 5px 5px 5px;
+              font-weight: 400;
+              font-size: 30px;
+              color: #000000;
+              line-height:90px;
+              text-align: center;
+              margin-left: 50px;
+              margin-top: 32px;
+              padding-left: 20px;
+              padding-right: 20px;
+            }
+            .item-result-box:hover{
+              min-width: 320px;
+              height: 92px;
+              background: linear-gradient( 180deg, #B6FFEF 0%, #C5EEFF 100%);
+              box-shadow: inset 0px -2px 7px 0px #1E410E;
+              border-radius: 5px 5px 5px 5px;
+              border: 1px solid #A2F57F;
+              font-weight: 400;
+              font-size: 30px;
+              color: #000000;
+              line-height:90px;
+              text-align: center;
+              margin-left: 50px;
+              margin-top: 32px;
+              padding-left: 20px;
+              padding-right: 20px;
+            }
+          }
+        }
 
-</script>
+      }
 
-<style scoped>
+    }
+  }
+}
 
 </style>
+

src/views/xjc-integratedmachine/environment/university_details_video.vue

@@ -1,272 +1,439 @@
 <template>
-
-    <div>
-
-        创建时间:{{entity.ctime}} 所在地区:{{entity.areaname}}
-        学历层次:
-        <dict-tag :options="educationlevel" :value="entity.educationlevel"/>
-        办学性质:
-        <dict-tag :options="property" :value="entity.property"/>
-        院校类型:
-        <dict-tag :options="school_category" :value="entity.school_category"/>
-        院校隶属:{{entity.subjection}}
-        联系电话:{{entity.telephone}}
-        通讯地址:{{entity.address}}
-    </div>
-
-    <collectionComponent :collection="collection_data"></collectionComponent>
-
-    <el-card style="width:80%;">
-        <div style="display: flex;flex-direction: row;justify-content: space-between">
-            <div @click="changeShowIndex(1)">学校简介</div>
-            <div @click="changeShowIndex(2)">院系设置</div>
-            <div @click="changeShowIndex(3)">学科专业</div>
-            <div @click="changeShowIndex(4)">奖励资助</div>
-            <div @click="changeShowIndex(5)">考分查询</div>
-            <div @click="changeShowIndex(6)">计划查询</div>
-            <div @click="changeShowIndex(7)">招生简章</div>
-            <div @click="changeShowIndex(8)">学校视频</div>
+  <div class="university_details_video">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <div class="top-content">
+          <!--           <img :src= "`${baseUrl}`+ item.picPath" />-->
+          <div style="width: 154px;height: 154px;border: 1px solid;margin-left: 48px"></div>
+          <div class="top-content-right">
+            <div class="right-top">
+              <p class="title">title</p>
+              <div class="right-top-icon">
+                <div class="item-img">
+                  <img src="@/assets/images/environment/collage.png">
+                  <p>收藏</p>
+                </div>
+                <div class="item-img">
+                  <img src="@/assets/images/environment/contrast.png">
+                  <p>对比</p>
+                </div>
+
+              </div>
+            </div>
+
+            <div class="school-level-box">
+              <p class="school-level">98</p>
+              <p class="school-level"></p>
+              <p class="school-level"></p>
+              <p class="school-level"></p>
+            </div>
+            <div class="text-box">
+              <p>创建时间:{{entity.ctime}}</p>
+              <p>所在地区:{{entity.areaname}}</p>
+              <p>学历层次:{{entity.educationlevel}}</p>
+              <p>办学性质:{{entity.property}}</p>
+              <p>院校类型:{{entity.school_category}}</p>
+              <p>院校隶属:{{entity.subjection}}:</p>
+              <p>通讯地址:{{entity.address}}</p>
+            </div>
+          </div>
         </div>
-    </el-card>
+        <div class="bottom-content">
 
-    <div v-show="showIndex == 1">
-        <div v-html="entity.summary">
-        </div>
-    </div>
-    <div v-show="showIndex == 2">
-        <div v-html="entity.collegeset">
-        </div>
-    </div>
-    <div v-show="showIndex == 3">
-        <div v-html="entity.specialtyintroduction">
-        </div>
-    </div>
-    <div v-show="showIndex == 4">
-        <div v-html="entity.incentivegrant">
-        </div>
-    </div>
-    <div v-show="showIndex == 5">
-        -------考分查询-------
-        <div @click="showAreaChooseHandler">招生地区::{{form.areaname}}</div>
-        <div @click="showCategoryHandler">考生类别::{{form.categoryName}}</div>
-        <el-button @click="getScore">点击查询</el-button>
-        <el-table :data="kf_tableData">
-            <el-table-column label="招生年份" align="center" key="years" prop="years"/>
-            <el-table-column label="录取批次" align="center" key="batchname" prop="batchname"/>
-            <el-table-column label="最低分" align="center" key="lowscore" prop="lowscore"/>
-            <el-table-column label="最低分位次" align="center" key="totalorder" prop="totalorder"/>
-        </el-table>
-    </div>
-    <div v-show="showIndex == 6">
-        <div @click="showAreaChooseHandler">招生地区::{{form.areaname}}</div>
-        <div @click="showGradeHandler">年份::{{form.grade}}</div>
-        <div @click="showCategoryHandler">考生类别::{{form.categoryName}}</div>
-        <el-button @click="getPlan">点击查询</el-button>
-        <el-table :data="jh_tableData">
-            <el-table-column label="招生年份" align="center" key="years" prop="years"/>
-            <el-table-column label="专业名称" align="center" key="enrollname" prop="enrollname"/>
-            <el-table-column label="大学学制" align="center" key="studyyears" prop="studyyears"/>
-            <el-table-column label="批次" align="center" key="batch_name" prop="batch_name"/>
-            <el-table-column label="计划招生人数" align="center" key="plannum" prop="plannum"/>
-            <el-table-column label="学费" align="center" key="fee" prop="fee"/>
-        </el-table>
-    </div>
-    <div v-show="showIndex == 7">
-        <div v-html="entity.sturecruitmen">
-
-        </div>
-    </div>
-    <div v-show="showIndex == 8">
-        <div ref="videoContainer" class="video-container">
-            <video ref="videoPlayer" id="playerId" class="video-js vjs-default-skin" controls preload="auto" :data-setup="{}">
-                <!-- 可以在这里插入source标签以指定你的视频源 -->
-                <source :src="entity.path" type="video/mp4">
-            </video>
         </div>
+      </div>
+      <drag_component></drag_component>
     </div>
-
-    <div>
-        <!--招生地区-->
-        <el-dialog v-model="showAreaChoose" width="600px" append-to-body>
-            <div v-for="dict in gk_province" :key="dict.value" @click="chooseArea(dict)">{{dict.label}}</div>
-        </el-dialog>
-        <!--考生类别-->
-        <el-dialog v-model="showCategoryChoose" width="600px" append-to-body>
-            <div v-for="dict in category" :key="dict.value" @click="chooseCategory(dict)">{{dict.label}}</div>
-        </el-dialog>
-        <!--年份-->
-        <el-dialog v-model="showGradeChoose" width="600px" append-to-body>
-            <div v-for="item in grade" :key="item" @click="chooseGrade(item)">{{item}}</div>
-        </el-dialog>
-    </div>
-
+  </div>
 
 </template>
-
 <script setup>
-    import {
-        universityDetail,
-        getPlanYearList,
-        getScoreList,
-        getPlanList,
-    } from '@/api/xjc-integratedmachine/environment/university.js'
-    import videojs from 'video.js';
-    import 'video.js/dist/video-js.css';
-
-    import collectionComponent from '@/views/xjc-integratedmachine/components/collection_component.vue'
-
-
-
-    const showAreaChoose = ref(false)
-    const showCategoryChoose = ref(false)
-    const showGradeChoose = ref(false)
-
-    const router = useRouter()
-    const route = useRoute()
-
-    const param = route.query
-    const showIndex = ref(1)
-
-    const collection_data = ref({
-        contentType : 1,
-        contentId :param.id
-    })
-
-    const grade = ref([])
-
-    const {proxy} = getCurrentInstance()
-
-    const {gk_province, category, educationlevel, property, school_category} = proxy.useDict('gk_province', 'category', 'educationlevel', 'property', 'school_category')
-
-    const form = ref({
-        area: null,
-        areaname: null,
-        university: param.name,
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {
+  universityDetail,
+  getPlanYearList,
+  getScoreList,
+  getPlanList,
+  getCollection
+} from '@/api/xjc-integratedmachine/environment/university.js'
+import videojs from 'video.js';
+import 'video.js/dist/video-js.css';
+
+import collectionComponent from '@/views/xjc-integratedmachine/components/collection_component.vue'
+import {ref} from "vue";
+
+
+
+const showAreaChoose = ref(false)
+const showCategoryChoose = ref(false)
+const showGradeChoose = ref(false)
+
+const router = useRouter()
+const route = useRoute()
+
+const param = route.query
+const showIndex = ref(1)
+
+const collection_data = ref({
+  contentType : 1,
+  contentId :param.id
+})
+
+const grade = ref([])
+
+const {proxy} = getCurrentInstance()
+
+const {gk_province, category, educationlevel, property, school_category} = proxy.useDict('gk_province', 'category', 'educationlevel', 'property', 'school_category')
+
+const form = ref({
+  area: null,
+  areaname: null,
+  university: param.name,
+})
+
+const entity = ref({})
+const collectionList = ref([])
+const headinfo = ref({})
+function setHeadinfo(){
+  headinfo.value = {
+    title: '生涯唤醒学习系统',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/xjc-integratedmachine/wakeup/index'
+  }
+}
+
+function detail() {
+  universityDetail({
+    id: param.id
+  }).then(resp => {
+    entity.value.oldid = resp.entity.oldid
+    //学校信息在这里
+    entity.value = resp.entity
+    //看看收藏
+    queryConnection()
+  })
+}
+
+function changeShowIndex(index) {
+  showIndex.value = index
+  if (showIndex.value == 8) {
+    const player = videojs(playerId, {autoplay: true});
+    player.src(entity.value.path);
+    player.on("ended", () => {
     })
+  }
+}
+
+function showAreaChooseHandler() {
+  showAreaChoose.value = true
+}
+
+function chooseArea(item) {
+  form.value.area = item.value
+  form.value.areaname = item.label
+  showAreaChoose.value = false
+  getPlanYear()
+}
+
+function showCategoryHandler() {
+  showCategoryChoose.value = true
+}
+
+function chooseCategory(item) {
+  form.value.category = item.value
+  form.value.categoryName = item.label
+  showCategoryChoose.value = false
+}
+
+function showGradeHandler() {
+  showGradeChoose.value = true
+}
+
+function chooseGrade(item) {
+  form.value.grade = item
+  showGradeChoose.value = false
+}
+
+function getPlanYear() {
+  getPlanYearList({
+    university: param.name,
+    area: form.value.area
+  }).then(resp => {
+    grade.value = resp.list
+  })
+}
+
+const kf_tableData = ref([])
+
+function getScore() {
+  let data = {
+    area: form.value.area,
+    university: entity.value.oldid,
+    category: form.value.category
+  }
+  getScoreList(data).then(resp => {
+    kf_tableData.value = resp.list
+  })
+}
+
+const jh_tableData = ref([])
+
+function getPlan() {
+  let data = {
+    university: param.name,
+    area: form.value.area,
+    category: form.value.category,
+    year: form.value.grade
+  }
+  getPlanList(data).then(resp => {
+    jh_tableData.value = resp.list
+  })
+}
+
+function collection() {
+  let data = {
+    contentType: 1,
+    contentId: param.id,
+  }
+  addCollection(data).then(resp => {
+    queryConnection()
+  })
+}
+function queryConnection() {
+  let data = {
+    contentType: 1,
+    contentId: param.id,
+  }
+  getCollection(data).then(resp => {
+    collectionList.value = resp.collection
+  })
+}
+function cancle_collection() {
+  let data = {
+    id: collectionList.value[0].id,
+  }
+  removeCollection(data).then(resp => {
+    queryConnection()
+  })
+}
+
+
+detail()
 
-    const entity = ref({})
-    const collectionList = ref([])
-
-    function detail() {
-        universityDetail({
-            id: param.id
-        }).then(resp => {
-            entity.value.oldid = resp.entity.oldid
-            //学校信息在这里
-            entity.value = resp.entity
-            //看看收藏
-            queryConnection()
-        })
-    }
-
-    function changeShowIndex(index) {
-        showIndex.value = index
-        if (showIndex.value == 8) {
-            const player = videojs(playerId, {autoplay: true});
-            player.src(entity.value.path);
-            player.on("ended", () => {
-            })
+</script>
+<!--<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({})-->
+
+<!--function setHeadinfo() {-->
+<!--  headinfo.value = {-->
+<!--    title: '生涯唤醒学习系统',-->
+<!--    user: {-->
+<!--      avatar: '头像路径',-->
+<!--      nickName: '张三'-->
+<!--    },-->
+<!--    backUrl: '/xjc-integratedmachine/wakeup/index'-->
+<!--  }-->
+<!--}-->
+
+
+<!--function jumpTo(path) {-->
+<!--  router.push({-->
+<!--    path: path,-->
+<!--    query: {name: 123}-->
+<!--  })-->
+<!--}-->
+
+<!--onMounted(() => {-->
+<!--  setHeadinfo()-->
+<!--})-->
+<!--</script>-->
+
+
+<style scoped lang="scss">
+p, div {
+  margin: 0;
+  padding: 0;
+}
+
+.university_details_video {
+  background: url('@/assets/images/environment/university-detail.png') no-repeat;
+  background-size: 1920px 1080px;
+  z-index: 10;
+  width: 100%;
+  height: 1080px;
+
+  .page-content {
+    width: 100%;
+    position: absolute;
+    top: 100px;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  .page-img-box {
+    width: 1832px;
+    height: 922px;
+    margin-top: 13px;
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 35px 35px 35px 35px;
+    display: flex;
+    //justify-content: space-around;
+    //flex-direction: column;
+    //align-items: center;
+
+    .top-content {
+      width: 1832px;
+      height: 282px;
+      border: 1px solid;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .top-content-right {
+        margin-left: 45px;
+        width: 1630px;
+        height: 281px;
+        border: 1px solid;
+
+        .title {
+          font-weight: bold;
+          font-size: 36px;
+          color: #1E410E;
+          line-height: 24px;
+          //margin-top: 63px;
         }
-    }
-
-    function showAreaChooseHandler() {
-        showAreaChoose.value = true
-    }
 
-    function chooseArea(item) {
-        form.value.area = item.value
-        form.value.areaname = item.label
-        showAreaChoose.value = false
-        getPlanYear()
-    }
-
-    function showCategoryHandler() {
-        showCategoryChoose.value = true
-    }
-
-    function chooseCategory(item) {
-        form.value.category = item.value
-        form.value.categoryName = item.label
-        showCategoryChoose.value = false
-    }
+        .school-level-box {
+          display: flex;
+          justify-content: left;
+          //margin-top: 32px;
+
+          .school-level {
+            margin-right: 20px;
+            width: 174px;
+            height: 54px;
+            background: #B3FC7C;
+            border-radius: 5px 5px 5px 5px;
+            font-weight: bold;
+            font-size: 20px;
+            color: #000000;
+            line-height: 54px;
+            text-align: center;
+          }
+        }
 
-    function showGradeHandler() {
-        showGradeChoose.value = true
-    }
+        .text-box {
+          width: 100%;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          flex-wrap: wrap;
 
-    function chooseGrade(item) {
-        form.value.grade = item
-        showGradeChoose.value = false
-    }
+          p {
+            margin-right: 20px;
+          }
+        }
 
-    function getPlanYear() {
-        getPlanYearList({
-            university: param.name,
-            area: form.value.area
-        }).then(resp => {
-            grade.value = resp.list
-        })
+        .right-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .right-top-icon {
+            width: 100px;
+            height: 68px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 24px;
+            .item-img {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+
+              p {
+                font-weight: 400;
+                font-size: 20px;
+                color: #515F6A;
+
+              }
+              img {
+                width: 36px;
+                height: 36px;
+                border: 1px solid;
+              }
+            }
+          }
+        }
+      }
     }
 
-    const kf_tableData = ref([])
+  }
 
-    function getScore() {
-        let data = {
-            area: form.value.area,
-            university: entity.value.oldid,
-            category: form.value.category
-        }
-        getScoreList(data).then(resp => {
-            kf_tableData.value = resp.list
-        })
-    }
+  .content-bottom {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
 
-    const jh_tableData = ref([])
+    .draw {
+      width: 109px;
+      height: 170px;
+      margin-left: 100px;
 
-    function getPlan() {
-        let data = {
-            university: param.name,
-            area: form.value.area,
-            category: form.value.category,
-            year: form.value.grade
-        }
-        getPlanList(data).then(resp => {
-            jh_tableData.value = resp.list
-        })
+      img {
+        width: 109px;
+        height: 170px;
+      }
     }
 
-    function collection() {
-        let data = {
-            contentType: 1,
-            contentId: param.id,
-        }
-        addCollection(data).then(resp => {
-            queryConnection()
-        })
-    }
-    function queryConnection() {
-        let data = {
-            contentType: 1,
-            contentId: param.id,
-        }
-        getCollection(data).then(resp => {
-            collectionList.value = resp.collection
-        })
-    }
-    function cancle_collection() {
-        let data = {
-            id: collectionList.value[0].id,
-        }
-        removeCollection(data).then(resp => {
-            queryConnection()
-        })
+    .ai-rabit {
+      position: absolute;
+      right: 100px;
+      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;
+      }
     }
+  }
 
+}
 
-    detail()
-
-</script>
-
-<style scoped>
+.temp {
+  width: 20vw;
+  height: 10vh;
+  background: #85eff5;
+  border: solid 1px #a2fffc;
+  border-radius: 10px;
+  cursor: pointer;
+}
 
 </style>
+

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

@@ -156,7 +156,8 @@ p{
         height:850px;
         overflow:auto;
         margin-left: 26px;
-        scrollbar-color: #9be9fa #ffffff;
+        scrollbar-color: #D9D9D9 #9feafa0f;
+        scrollbar-width: thin;
         .box-item{
           margin-top: 29px;
           width: 1786px;
@@ -189,7 +190,8 @@ p{
             height: 314px;
             .text-box{
               overflow:auto;
-              //scrollbar-color: #9be9fa #ffffff;
+              scrollbar-color: #D9D9D9 #9feafa0f;
+              scrollbar-width: thin;
               height: 314px;
               //border: 1px solid;
               .text{

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

@@ -3,8 +3,8 @@
     <head-component :headinfo=headinfo></head-component>
     <div class="page-content">
       <div class="content-left">
-        <p>{{exampleInfo.shortIntroduce}}</p>
-        <p>{{exampleInfo.name}}：{{exampleInfo.type}}</p>
+<!--        <p>{{exampleInfo.shortIntroduce}}</p>-->
+<!--        <p>{{exampleInfo.name}}：{{exampleInfo.type}}</p>-->
         <div class="left-main">
           <div class="text-box" v-html="exampleInfo.introduce">
           </div>
@@ -12,10 +12,8 @@
       </div>
 
       <div class="content-right">
-          <div v-for="(item,index) in exampleData" class="item-box" :class="{ 'active-button': isActive }" @click="showInfo(item,index)">
+          <div v-for="(item,index) in exampleData" class="item-box" :class="[item.selected?'active-button':'']" @click="showInfo(item,index)">
             <img :src= "`${baseUrl}`+ item.picPath" />
-          {{exampleId===item.id}}
-            {{item.id}}
             <div>{{item.name}}</div>
             <p >{{item.type}}</p>
             <p >{{item.shortIntroduce}}</p>
@@ -95,14 +93,17 @@ onMounted(() => {
 function getExampleList() {
   pageLoading = true;
   exampleList().then(res => {
-    // console
     if(res.exampleList.length > 0){
       exampleInfo.value = res.exampleList[0];
     }
+    res.exampleList.map(item =>{
+      item.selected = false;
+    })
+    console.log("res.exampleList",res.exampleList)
+
     exampleData.value = res.exampleList;
     pageLoading = false;
   }).catch((err)=>{
-    console.log("error")
     pageLoading = false;
   })
 }
@@ -116,14 +117,16 @@ function dialogBeforeClose(){
 }
 
 
-function showInfo(val){
+function showInfo(val,index){
   console.log("11111111",val)
   exampleId.value = val.id
-  isActive = !isActive;
   console.log("exampleId0".exampleId,"val.id",val.id)
   exampleInfo.value = val
-  // exampleData[index].selected.value = true;
-
+  exampleData.value.map(item =>{
+    item.selected = false;
+  })
+  exampleData.value[index].selected = true;
+  console.log("exampleData.value",exampleData.value)
   console.log("11111111",exampleInfo)
 
 }
@@ -150,10 +153,11 @@ p{
     display: flex;
     justify-content: space-around;
     .content-left{
-      width: 1290px;
+      width: 1330px;
       height: 919px;
       background: #FFFFFF;
       border-radius: 35px 35px 35px 35px;
+      margin-left: 20px;
       p:nth-child(1){
         font-weight: bold;
         font-size: 32px;
@@ -186,48 +190,56 @@ p{
           }
         }
         .text-box{
-          width: 1290px;
+          width: 1385px;
           height: 777px;
           font-weight: 400;
-          font-size: 30px;
           color: #333333;
-          line-height: 52px;
-          //border: 1px solid;
           text-indent: 2em;
           overflow: auto;
+          scrollbar-color: #D9D9D9 #9feafa0f;
+          scrollbar-width: thin;
           padding-right: 52px;
+          margin-top: 20px;
           padding-left: 52px;
+          p{
+            line-height: 22px;
+            font-size: 40px;
+          }
         }
       }
     }
     .content-right{
-      width: 521px;
+      width: 460px;
       height: 910px;
       background: #FFFFFF;
+      margin-right: 20px;
       border-radius: 35px 35px 35px 35px;
       overflow: auto;
+      scrollbar-color: #D9D9D9 #9feafa0f;
+      scrollbar-width: thin;
       .item-box{
-        width: 470px;
+        width: 410px;
         height: 370px;
         //border: 1px solid;
         background: #F8F8F8;
-        margin: 17px auto;
+        margin: 17px;
         border-radius: 35px 35px 35px 35px;
         img{
           width: 115px;
           height: 115px;
           border-radius: 50%;
           //border: 1px solid;
-          margin-left: 192px;
+          margin-left: 144px;
           margin-top: 28px;
         }
         p
         {
           font-weight: bold;
-          font-size: 32px;
+          font-size: 30px;
           color: #333333;
           line-height: 52px;
           padding-left: 10px;
+          text-align: center;
           //background: #EAFAFF;
         }
         div{
@@ -244,10 +256,11 @@ p{
       .item-box:hover{
         background: #EAFAFF;
       }
-      //.active-button{
-      //  background: red;
-      //}
+      .active-button{
+        background: #EAFAFF;
+      }
     }
+
   }
 }
 //{

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

@@ -5,18 +5,30 @@
       <div class="page-box">
         <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 :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
+              <img v-if="onePage" src="@/assets/images/wakeup/maturity/report-icon1-active.png">
+              <img v-else src="@/assets/images/wakeup/maturity/report-icon1.png">
+              数据汇总
+            </div>
+            <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
+              <img v-if="twoPage" src="@/assets/images/wakeup/maturity/report-icon2-active.png">
+              <img v-else src="@/assets/images/wakeup/maturity/report-icon2.png">
+              生涯决策知识
+            </div>
+            <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
+              <img v-if="threePage" src="@/assets/images/wakeup/maturity/report-icon3-active.png">
+              <img v-else src="@/assets/images/wakeup/maturity/report-icon3.png">
+              生涯决策态度
+            </div>
           </div>
         </div>
         <div class="one-page" v-show="onePage">
-          <p class="maturity-text">生涯成熟度：<span>中等</span></p>
+          <p class="maturity-text">{{ resultObj.devision }}
+            ：<span :style="{ color: computedColor(resultObj.devisionResult)  }">{{ resultObj.score }}</span>
+            <span :style="{ color: computedColor(resultObj.devisionResult)  }"
+                  style="margin-left: 22px">{{ resultObj.devisionResult }}</span></p>
           <p class="text-info">
-            综合来看，你对生涯发展有一定认知，但心理准备不足，缺乏系统规划，面对生涯选择时容易迷茫，易受周围同学或家长影响，尚未形成稳定的生涯发展思路。
+            {{ resultObj.devisionResultDetail }}
           </p>
           <div class="table-box">
             <div class="main">
@@ -24,8 +36,60 @@
             </div>
           </div>
         </div>
-        <div class="two-page" v-show="twoPage">112</div>
-        <div class="three-page" v-show="threePage">11112</div>
+        <div class="two-page" v-show="twoPage">
+          <div v-for="(item,index) in resultList2">
+            <div v-if="index===0?true:false">
+              <p class="maturity-text">{{ item.devision }}
+                ：<span :style="{ color: computedColor(item.devisionResult)  }">{{ item.score }}</span>
+                <span :style="{ color: computedColor(item.devisionResult)  }"
+                      style="margin-left: 22px">{{ item.devisionResult }}</span></p>
+              <p class="text-info">
+                {{ item.devisionResultDetail }}
+              </p>
+            </div>
+            <div v-else class="description-box">
+              <p class="maturity-text">{{item.devision}}
+                <p>得分：
+                  <span :style="{ color: computedColor(item.devisionResult)  }">{{ item.score }}</span>
+                  <span :style="{ color: computedColor(item.devisionResult)  }"
+                        style="margin-left: 22px">{{ item.devisionResult }}</span>
+                </p>
+              </p>
+              <p class="text-info">
+                {{ item.devisionResultDetail }}
+              </p>
+              <p class="text-description">描述：{{item.devisionResultDetail}}</p>
+              <p class="text-description">建议：{{item.devisionAdvice}}</p>
+            </div>
+          </div>
+        </div>
+        <div class="three-page" v-show="threePage">
+          <div v-for="(item,index) in resultList3">
+            <div v-if="index===0?true:false">
+              <p class="maturity-text">{{ item.devision }}
+                ：<span :style="{ color: computedColor(item.devisionResult)  }">{{ item.score }}</span>
+                <span :style="{ color: computedColor(item.devisionResult)  }"
+                      style="margin-left: 22px">{{ item.devisionResult }}</span></p>
+              <p class="text-info">
+                {{ item.devisionResultDetail }}
+              </p>
+            </div>
+            <div v-else class="description-box">
+              <p class="maturity-text">{{item.devision}}
+                <p>得分：
+                  <span :style="{ color: computedColor(item.devisionResult)  }">{{ item.score }}</span>
+                  <span :style="{ color: computedColor(item.devisionResult)  }"
+                        style="margin-left: 22px">{{ item.devisionResult }}</span>
+                </p>
+              </p>
+              <p class="text-info">
+                {{ item.devisionResultDetail }}
+              </p>
+              <p class="text-description">描述：{{item.devisionResultDetail}}</p>
+              <p class="text-description">建议：{{item.devisionAdvice}}</p>
+            </div>
+          </div>
+        </div>
       </div>
 
     </div>
@@ -48,13 +112,23 @@
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 import {Calendar} from '@element-plus/icons-vue'
-import {ref,onMounted} from "vue";
+import {ref, onMounted} from "vue";
 import {maturityReport} from "@/api/xjc-integratedmachine/wakeup/index.js";
 import * as echarts from 'echarts';
 
+const router = useRouter()
+const route = useRoute()
+
 const headinfo = ref({})
 const describeInfo = ref('')
-const evaluationList =  ref([])
+const resultObj = ref('')
+const resultList2 = ref('')
+const resultList3 = ref('')
+
+const evaluationList = ref([])
+const evalKey = ref([])
+const evalValue = ref([])
+
 let pageLoading = ref(false)
 
 function setHeadinfo() {
@@ -64,7 +138,8 @@ function setHeadinfo() {
       avatar: '头像路径',
       nickName: '张三'
     },
-    backUrl: '/xjc-integratedmachine/wakeup/career_recognize/index'
+    backUrl: '/xjc-integratedmachine/wakeup/career_maturity/index',
+    backUrlUse:true
   }
 }
 
@@ -77,29 +152,54 @@ const describe = (val) => {
   describeInfo.value = val;
   centerDialogVisible.value = true;
 };
+
 //请求页面数据
 function getMaturityReport() {
-  // pageLoading = true;
-  let id = "60f384a7-4970-44cb-a9da-0ce00519eee9"
-  maturityReport({id :id }).then(res => {
-
-    //
-    pageLoading = false;
-    // if(res.data.eval.length > 0){
+  pageLoading = true;
+  let id = route.query.id;
+  maturityReport({id: id}).then(res => {//
     evaluationList.value = res.data.eval;
-    console.log("evaluationList.value",evaluationList.value)
-    // }
-    // exampleData.value = res.data.exampleList;
-
-  }).catch((err)=>{
+    resultObj.value = res.data.resultList1[0];
+    resultList2.value = res.data.resultList2;
+    resultList3.value = res.data.resultList3;
+    //处理echats中的数据显示
+    evaluationList.value = evaluationList.value.reverse()
+    evaluationList.value.map((item) => {
+      evalKey.value.push({value: item.devision});
+      let obj = {
+        itemStyle: {},
+        value: ''
+      }
+      if (item.devision === '稳定性' ||
+          item.devision === '功利性' ||
+          item.devision === '自信心' ||
+          item.devision === '独立性' ||
+          item.devision === '主动性' ||
+          item.devision === '生涯决策态度') {
+        obj.itemStyle.color = '#3FD4CF'
+      } else if (item.devision === '职业自我知识' ||
+          item.devision === '职业世界知识' ||
+          item.devision === '生涯决策知识'
+      ) {
+        obj.itemStyle.color = '#F9CC44'
+      } else if (item.devision === '生涯成熟度') {
+        obj.itemStyle.color = '#3C7EFF'
+      }
+      obj.value = parseFloat(item.score)
+      evalValue.value.push(obj);
+    })
+    initChart();
+    pageLoading = false;
+  }).catch((err) => {
     console.log("error")
-    alert("111111111")
     pageLoading = false;
   })
 }
+
 onMounted(() => {
   setHeadinfo()
   getMaturityReport()
+
 })
 
 // 定义一个ref来引用图表的容器
@@ -117,13 +217,13 @@ const chartOptions = {
   },
   yAxis: {
     type: 'category', // 修改为类目轴，用于显示柱状图的类别
-    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子','11','23','34','34'],
+    data: evalKey.value,
   },
   series: [
     {
       name: '销量',
       type: 'bar', // 仍然使用柱状图，但方向会由ECharts根据xAxis和yAxis的配置自动调整
-      data: [5, 20, 36, 10, 10, 20,23,33,33,44],
+      data: evalValue.value,
     },
   ],
 };
@@ -131,14 +231,50 @@ const chartOptions = {
 // 初始化图表
 const initChart = () => {
   if (chartContainer.value) {
+    chartContainer.value.style.width = '1040px';
+    chartContainer.value.style.height = '640px';
     chartInstance = echarts.init(chartContainer.value);
     chartInstance.setOption(chartOptions);
   }
 };
+// 模拟一个包含devisionResult的对象
+const resultObjStyle = reactive({
+  devisionResult: '中等' // 你可以根据需要改变这个值来测试颜色变化
+});
+
+// 定义一个计算属性来计算颜色
+function computedColor(devisionResult) {
+  switch (devisionResult) {
+    case '中等':
+      return '#3A57F8'; // 当devisionResult为“中等”时返回蓝色
+    case '较低':
+      return '#FF7D59'; // 当devisionResult为“较低”时返回橙色
+    case '较高':
+      return '#14CB8B'; // 当devisionResult为“较高”时返回绿色
+    default:
+      return '#000000'; // 默认返回黑色（或者你可以根据需要返回其他颜色）
+  }
+}
 
+//切换tabs
+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;
+  }
+}
 // 组件挂载时初始化图表
 onMounted(() => {
-  initChart();
+
 });
 
 </script>
@@ -173,30 +309,37 @@ p {
     padding-top: 25px;
     position: relative;
     overflow: auto;
+    scrollbar-color: #9be9fa #ffffff;
 
     .tab-box {
       display: flex;
       justify-content: center;
       padding-left: 279px;
       padding-right: 279px;
+      img{
+         width: 36px;
+         height: 36px;
+         margin-right: 12px;
+      }
     }
 
     .item-box {
       width: 422px;
       height: 136px;
       border: 1px dashed gray;
-      text-align: center;
       line-height: 136px;
       font-weight: 400;
       font-size: 32px;
       margin-left: 3px;
       color: #A8A8A8;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .item-box-active {
       width: 422px;
       height: 136px;
-
       text-align: center;
       line-height: 136px;
       font-weight: 400;
@@ -206,94 +349,99 @@ p {
       background: #CFF7FF;
       border: 1px dashed gray;
       border-top: 3px solid #0088FF;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .one-page {
-      .maturity-text{
+      .maturity-text {
         font-weight: bold;
         font-size: 32px;
         color: #333333;
         line-height: 52px;
-        margin: 95px;
+        margin: 95px 0 35px;
       }
-      .text-info{
+
+      .text-info {
         font-weight: 400;
         font-size: 30px;
         color: #333333;
         line-height: 52px;
       }
-      .table-box{
+
+      .table-box {
         width: 1525px;
         height: 720px;
-        background:rgba(192, 231, 255, 0.20);
+        display: flex;
+        justify-content: center;
+        background: rgba(192, 231, 255, 0.20);
         //opacity: 0.2;
         margin-top: 26px;
-        z-index:10;
-      }
-
-    }
-    .one-page ,.two-page,.three-page{
-      padding-left: 157px;
-      padding-right: 157px;
-    }
-  }
-
-  .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;
+        margin-top: 26px;
 
-    .draw {
-      width: 109px;
-      height: 170px;
+        z-index: 10;
+        margin-bottom:  25px;
+        .main {
+          margin-top: 58px;
 
-      img {
-        width: 109px;
-        height: 170px;
+        }
       }
+
     }
 
-    .ai-rabit {
-      position: absolute;
-      right: -27px;
-      display: flex;
-      align-items: center;
+    .two-page,.three-page{
+      margin-top: 95px;
+      margin-bottom: 45px;
+      //.description-box{
+      //  margin-top: 5px;
+      //}
+      .maturity-text {
+        font-weight: bold;
+        font-size: 32px;
+        color: #333333;
+        line-height: 52px;
+        margin: 25px 0 15px;
+      }
 
-      .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;
+      .text-info {
+        font-weight: 400;
+        font-size: 30px;
+        color: #333333;
+        line-height: 52px;
       }
+      .text-description{
+        text-indent: 2em;
+        font-weight: 400;
+        font-size: 30px;
+        color: #333333;
+        line-height: 52px;
+        margin-top: 12px;
+      }
+      .table-box {
+        width: 1525px;
+        height: 720px;
+        display: flex;
+        justify-content: center;
+        background: rgba(192, 231, 255, 0.20);
+        //opacity: 0.2;
+        margin-top: 26px;
+        z-index: 10;
 
-      img {
-        width: 178px;
-        height: 270px;
+        .main {
+          margin-top: 58px;
+        }
       }
+
     }
-  }
 
-  .draggable-ball {
-    position: absolute;
-    cursor: pointer;
-    user-select: none; /* 防止拖拽时选中文字 */
+    .one-page, .two-page, .three-page {
+      padding-left: 157px;
+      padding-right: 157px;
+    }
   }
 
+
   ::v-deep .el-dialog {
     width: 632px;
     height: 343px;
@@ -327,9 +475,10 @@ p {
     color: #266EFF;
   }
 }
+
 .chart-container {
   width: 1040px;
   height: 620px; /* 可以根据需要调整高度 */
-  border: 1px solid;
+  //border: 1px solid;
 }
 </style>

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

@@ -7,24 +7,22 @@
       </div>
       <div class="bottom">
         <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')">
+        <img src="@/assets/images/wakeup/maturity/maturity-game-right.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/maturity_game')">
       </div>
       <drag_component></drag_component>
     </div>
   </div>
-
 </template>
 
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {onMounted} from "vue";
 
 
 const router = useRouter()
 
 const headinfo = ref({})
-
-
 const draggedItem = ref(null);
 
 function dragStart(event) {
@@ -48,10 +46,13 @@ function setHeadinfo(){
       avatar: '头像路径',
       nickName: '张三'
     },
-    backUrl : '/index'
+    backUrl: '/xjc-integratedmachine/wakeup/index',
+    backUrlUse:true,
   }
 }
-
+onMounted(() => {
+  setHeadinfo()
+})
 
 function jumpTo(path) {
   router.push({
@@ -60,10 +61,6 @@ function jumpTo(path) {
   })
 }
 
-onMounted(() => {
-  setHeadinfo()
-})
-
 
 
 </script>

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

@@ -12,27 +12,22 @@
             </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
-            }}
+
+            <img  src="@/assets/images/wakeup/maturity/btn1.png"  @click="selectBtn(questionAnswerA,1)" class="icon" :class="{ shake: isShaking1 }">
+
+            <img src="@/assets/images/wakeup/maturity/btn2.png" @click="selectBtn(questionAnswerB,2)" class="icon" :class="{ shake: isShaking2 }">
+            <img src="@/assets/images/wakeup/maturity/btn3.png" @click="selectBtn(questionAnswerC,3)" class="icon" :class="{ shake: isShaking3 }">
+            <img src="@/assets/images/wakeup/maturity/btn4.png" @click="selectBtn(questionAnswerD,4)" class="icon" :class="{ shake: isShaking4 }">
+            <img src="@/assets/images/wakeup/maturity/btn5.png" @click="selectBtn(questionAnswerE,5)" class="icon" :class="{ shake: isShaking5 }">
+
           </div>
           <div class="progress-container">
-            <div class="progress-bar" :style="{ width: progress + '%' }">
+            <div class="bar-box">
+              <div class="progress-bar" :style="{ width: progress + '%' }">
+              </div>
             </div>
             <div class="progress-info">
-              {{ newData.length }} / {{ questionSize }}
+              {{ current }} / {{ questionSize }}
             </div>
           </div>
         </div>
@@ -43,14 +38,27 @@
             <img src="@/assets/images/wakeup/maturity/time.png">
             <p> {{ formattedTime(elapsedTime) }}</p>
           </div>
-          <img class="btn-img" @click="submitAnswer" v-show="newData.length >= questionSize"
+          <img class="btn-img" @click="messageDislog()" v-show="newData.length >= questionSize"
                src="@/assets/images/wakeup/maturity/submit.png">
         </div>
         <drag_component></drag_component>
       </div>
     </div>
-  </div>
+    <el-dialog v-model="centerDialogVisible" :show-close="false" width="500" center>
 
+      <div class="dialog-box">
+         {{ dialogInfo }}
+      </div>
+      <div class="footer-box">
+        <el-button type="primary" @click="submitAnswer()">
+          提交
+        </el-button>
+        <el-button type="primary" @click="centerDialogVisible = false">
+          关闭
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
@@ -61,6 +69,8 @@ import drag_component from "@/views/xjc-integratedmachine/components/drag_compon
 
 
 const router = useRouter()
+const route = useRoute()
+
 let pageLoading = ref(false)
 const headinfo = ref({})
 // const progress = ref(0)
@@ -71,12 +81,15 @@ 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 current = ref(null);
 const useTime = ref(0);
+const centerDialogVisible = ref(false)
+const dialogInfo = ref('')
 
 function dragStart(event) {
   draggedItem.value = event.target;
@@ -185,22 +198,22 @@ onMounted(() => {
 onUnmounted(() => {
   stopTimer();
 });
-// 定义当前完成题目数量和总题目数量
-const current = ref(34);
-const total = ref(100); // 假设总共有10道题
+
 
 // 计算进度
 const progress = computed(() => {
-  return Math.floor((current.value / total.value) * 100);
+  return Math.floor((current.value / questionSize.value) * 100);
 });
 
 // 更新当前完成题目数量的函数（例如，当用户完成一道题时调用）
 const updateCurrent = (newCurrent) => {
-  if (newCurrent >= 0 && newCurrent <= total.value) {
+  if (newCurrent >= 0 && newCurrent <= questionSize.value) {
     current.value = newCurrent;
   }
 };
-const selectBtn = (val) => {
+const selectBtn = (val,index) => {
+  //调用动画效果
+  triggerShake(index)
   //将当前题目加入新数组，
   // 拼接选项数据
   if (newData.value.length != questionSize.value) {
@@ -213,6 +226,8 @@ const selectBtn = (val) => {
     //给按钮赋值；
     questionAnswerValue();
   }
+  current.value = newData.value.length
+  updateCurrent(current.value);
 };
 const previousQuestion = (val) => {
   //新数组中的最后一位从头插入旧数组
@@ -234,12 +249,12 @@ function questionAnswerValue() {
   questionAnswerE.value = maturityAppraisalData.value[0].questionAnswer[4]
 }
 
+function messageDislog() {
+  dialogInfo.value = '确定提交生成报告?'
+  centerDialogVisible.value = true;
+}
+
 function submitAnswer() {
-  ElMessageBox.confirm('确定提交生成报告', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'info'
-  }).then(() => {
     pageLoading = true;
     let appraisalCode = "3001"
     let params = {
@@ -252,15 +267,73 @@ function submitAnswer() {
     insertAppraisalAnswer(params).then(res => {
       console.log(res);
       pageLoading = false;
+      console.log("res", res.data.appraisalAnswerId)
+
+      router.push({
+        path: '/xjc-integratedmachine/wakeup/career_maturity/evaluation',
+        query: {
+          id: res.data.appraisalAnswerId
+        }
+      })
     }).catch((err) => {
       console.log("error")
       pageLoading = false;
     })
-  }).catch(() => {
 
-  })
 
 }
+// 定义一个响应式变量来控制抖动效果
+const isShaking1 = ref(false);
+const isShaking2 = ref(false);
+const isShaking3 = ref(false);
+const isShaking4 = ref(false);
+const isShaking5 = ref(false);
+
+// 定义一个函数来触发抖动效果
+const triggerShake = (val) => {
+  if(val === 1 ){
+    // 先将isShaking设置为true以触发抖动动画
+    isShaking1.value = true;
+
+    // 动画结束后，将isShaking设置为false以便下次点击可以重新触发
+    setTimeout(() => {
+      isShaking1.value = false;
+    }, 300); // 这里的300毫秒应该与CSS中定义的动画时长相匹配
+  }else if(val === 2){
+    // 先将isShaking设置为true以触发抖动动画
+    isShaking2.value = true;
+
+    // 动画结束后，将isShaking设置为false以便下次点击可以重新触发
+    setTimeout(() => {
+      isShaking2.value = false;
+    }, 300); // 这里的300毫秒应该与CSS中定义的动画时长相匹配
+  }else if(val === 3){
+    // 先将isShaking设置为true以触发抖动动画
+    isShaking3.value = true;
+
+    // 动画结束后，将isShaking设置为false以便下次点击可以重新触发
+    setTimeout(() => {
+      isShaking3.value = false;
+    }, 300); // 这里的300毫秒应该与CSS中定义的动画时长相匹配
+  }else if(val === 4){
+    // 先将isShaking设置为true以触发抖动动画
+    isShaking4.value = true;
+
+    // 动画结束后，将isShaking设置为false以便下次点击可以重新触发
+    setTimeout(() => {
+      isShaking4.value = false;
+    }, 300); // 这里的300毫秒应该与CSS中定义的动画时长相匹配
+  }else if(val === 5){
+    // 先将isShaking设置为true以触发抖动动画
+    isShaking5.value = true;
+
+    // 动画结束后，将isShaking设置为false以便下次点击可以重新触发
+    setTimeout(() => {
+      isShaking5.value = false;
+    }, 300); // 这里的300毫秒应该与CSS中定义的动画时长相匹配
+  }
+
+};
 </script>
 
 
@@ -283,12 +356,19 @@ p {
     top: 123px;
     bottom: 0;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
 
     .content-left {
       width: 244px;
     }
 
+    .page-box {
+      display: flex;
+      position: absolute;
+      width: 100%;
+      justify-content: space-between;
+    }
+
     .content-center {
       height: 910px;
       display: flex;
@@ -297,7 +377,6 @@ p {
       .content-img {
         width: 1187px;
         height: 424px;
-        //border: 1px solid;
         margin-top: 40px;
         position: relative;
 
@@ -309,13 +388,14 @@ p {
         p {
           width: 930px;
           position: absolute;
-          top: 150px;
+          top: 130px;
           left: 130px;
           font-weight: 400;
           font-size: 30px;
           color: #000000;
           letter-spacing: 4px;
-          text-align: center;
+          text-align: left;
+          text-indent: 2em;
         }
       }
 
@@ -326,9 +406,15 @@ p {
         margin-bottom: 10px;
         overflow: hidden;
         display: flex;
-        justify-content: center;
+        justify-content: left;
         align-items: center;
         margin-top: 200px;
+
+        .bar-box {
+          background-color: #f3f3f3;
+          border-radius: 4px;
+          width: 1082px;
+        }
       }
 
       .progress-bar {
@@ -350,10 +436,11 @@ p {
     }
 
     .content-right {
+      width: 244px;
       display: flex;
       flex-direction: column;
       align-items: center;
-
+      margin-right: 48px;
       .btn-img {
         width: 244px;
         height: 77px;
@@ -396,12 +483,64 @@ p {
     }
   }
 }
-
+::v-deep .el-dialog:not(.is-fullscreen) {
+  margin-top: 20vh !important;
+}
 .el-message-box {
   max-width: none;
   width: 632px;
   height: 289px;
 }
+.dialog-box{
+  width: 463px;
+  height: 188px;
+  font-weight: bold;
+  font-size: 32px;
+  color: #000000;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.footer-box{
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  ::v-deep .el-button:nth-child(1){
+    width: 136px;
+    height: 60px;
+    background: #2BC17B;
+  }
+  ::v-deep .el-button:nth-child(2){
+    width: 136px;
+    height: 60px;
+    background: #FB5451;
+  }
+  ::v-deep .el-button>span{
+   font-size: 24px;
+  }
+
+}
+//按钮动画效果
+.icon {
+  display: inline-block;
+  cursor: pointer; /* 鼠标悬停时显示为手形 */
+  transition: transform 0.1s ease-in-out; /* 添加过渡效果使动画更平滑 */
+}
+
+/* 定义shake动画的关键帧 */
+@keyframes shake {
+  0% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  50% { transform: translateX(5px); }
+  75% { transform: translateX(-5px); }
+  100% { transform: translateX(0); }
+}
+
+/* 当isShaking为true时，应用shake动画 */
+.shake {
+  animation: shake 0.3s ease-in-out;
+}
 
 </style>
 

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

@@ -43,7 +43,8 @@
                 avatar: '头像路径',
                 nickName: '张三'
             },
-            backUrl : '/index'
+            backUrl : '/index',
+          backUrlUse:true,
         }
     }
 
@@ -54,8 +55,9 @@
             query: {name: 123}
         })
     }
-
-
+    onMounted(() => {
+      setHeadinfo()
+    })
 
 </script>
 
@@ -87,7 +89,7 @@
     width: 100%;
     //height: 126px;
     background: url('@/assets/images/wakeup/background-content-style.png') no-repeat;
-    background-size: 1920px 126px;
+    background-size: 1920px 182px;
     margin-top:23px;
     display: flex;
     align-items: center;