Merge remote-tracking branch 'origin/master'

src/api/xjc-integratedmachine/environment/ai-career.js

@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+export function getHotOccupationList(data) {
+    return request({
+        url: '/ai/career/hot/occupation/list',
+        method: 'get',
+        params : data
+    })
+}
+
+export function getOccupationByKeyword(data) {
+    return request({
+        url: '/integratedmachine/tsytj/occupation/getOccupationByKeyword',
+        method: 'post',
+        data : data
+    })
+}
+
+// 聊天历史
+export function getCareerOccupationList(data) {
+    return request({
+        url: '/ai/career/occupation/list',
+        method: 'get',
+        params : data
+    })
+}
+
+// 聊天记录
+export function getCareerChatRecordList(data) {
+    return request({
+        url: '/ai/career/chat/record/list',
+        method: 'get',
+        params : data
+    })
+}
+
+// 增加生涯聊天记录
+export function addCareerChatRecord(data) {
+    return request({
+        url: '/ai/career/chat/record/add',
+        method: 'post',
+        data : data
+    })
+}
+
+// 查询ai题库
+export function getQuestionBankList(data) {
+    return request({
+        url: '/ai/question/bank/list',
+        method: 'get',
+        params : data
+    })
+}
+

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

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 获取对比实体
+export function getCompareList(data) {
+    return request({
+        url: '/integratedmachine/smo/compare/list',
+        method: 'get',
+        params : data
+    })
+}
+
+// 添加对比
+export function addCompare(data) {
+    return request({
+        url: '/integratedmachine/smo/compare/add',
+        method: 'post',
+        data : data
+    })
+}
+
+// 删除对比
+export function removeBybusinessId(data) {
+    return request({
+        url: '/integratedmachine/smo/compare/removeBybusinessId',
+        method: 'post',
+        data : data
+    })
+}
+
+// 获取对比数量
+export function getCompareSize(data) {
+    return request({
+        url: '/integratedmachine/smo/compare/size',
+        method: 'get',
+        params : data
+    })
+}

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

@@ -45,6 +45,8 @@ function getSource (source){
   console.log("11111",source);
   if(props.collection.source === 'pro_details_video' || source ===  'pro_details_video'){
     SESSION_COLLECT_KEY = 'majorList'
+  }else if(props.collection.source === 'occ_details_video' || source ===  'occ_details_video'){
+    SESSION_COLLECT_KEY = 'occList'
   }else {
     SESSION_COLLECT_KEY = 'contrastList'
   }

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

@@ -38,7 +38,6 @@
       }else {
         router.go(-1);
       }
-      // emit('backTo');
       clearData()
     }
     function clearData(){
@@ -68,6 +67,8 @@
          contrastList = JSON.parse(sessionStorage.getItem('majorList'));
       }else if(props.headinfo.contrastType === 'university'){
          contrastList = JSON.parse(sessionStorage.getItem('contrastList'));
+      }else if(props.headinfo.contrastType === 'occ'){
+        contrastList = JSON.parse(sessionStorage.getItem('occList'));
       }
       if(contrastList && contrastList.length <= 2 ){
        //暂无
@@ -87,6 +88,10 @@
         router.push({
           path: '/xjc-integratedmachine/environment/contrast_university'
         })
+      }else if(props.headinfo.contrastType === 'occ'){
+        router.push({
+          path: '/xjc-integratedmachine/environment/contrast_career'
+        })
       }
 
 

src/views/xjc-integratedmachine/environment/ai_interview/ai_career_interview.vue

@@ -4,8 +4,8 @@
         <div class="page-content">
             <div class="page-box">
                 <div>
-                    <div class="two-page">
-                        <div class="two-page-search">
+                    <div class="input-component">
+                        <div class="input-search">
                             <el-input
                                     v-model="form.name"
                                     style="width: 1484px;height: 84px"
@@ -13,7 +13,7 @@
                                     @input="byKeyword"
                             >
                                 <template #suffix>
-                                    <span style="font-size: 38px;color: #444040;margin-left: 37px;">
+                                    <span style="font-size: 38px;color: #444040;margin-left: 37px;cursor: pointer" @click="clearInput">
                                       X
                                     </span>
                                 </template>
@@ -29,7 +29,7 @@
                                 <div class="two-page-result">
                                     <div v-for="(item,index) in occupationList"
                                          :class="[item.selected?'item-result-box-active':'item-result-box']"
-                                         @click="toDetail(item)">
+                                         @click="toChatPage(item)">
                                         <div v-html="item.name"></div>
                                     </div>
                                 </div>
@@ -38,45 +38,18 @@
 
                         <div class="hot-search">
                             <div class="title">热门搜索：</div>
-                            <div style="display: flex;flex-wrap:wrap;
-                        margin-top: 11px;margin-left: 119px;margin-right: 91px">
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">教师</div>
-                                <div class="search-item">心理咨询师</div>
-                                <div class="search-item">实施运维工程师</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">教师</div>
-                                <div class="search-item">心理咨询师</div>
-                                <div class="search-item">实施运维工程师</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
+                            <div class="content">
+                                <div class="search-item" v-for="(item, index) in hotOccupationList" :key="index" @click="hotToChatPage(item)">
+                                    {{item.occupationName}}
+                                </div>
                             </div>
                         </div>
                         <div class="hot-search">
                             <div class="title">历史查询：</div>
-                            <div style="display: flex;flex-wrap:wrap;
-                        margin-top: 11px;margin-left: 119px;margin-right: 91px">
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">教师</div>
-                                <div class="search-item">心理咨询师</div>
-                                <div class="search-item">实施运维工程师</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">教师</div>
-                                <div class="search-item">心理咨询师</div>
-                                <div class="search-item">实施运维工程师</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
-                                <div class="search-item">计算机软件工程技术人员</div>
+                            <div class="content">
+                                <div class="search-item" v-for="(item, index) in occupationHistoryList" :key="index" @click="hotToChatPage(item)">
+                                    {{item.occupationName}}
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -94,7 +67,7 @@
     import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
     import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
     const headinfo = ref({})
-    import {getOccupationByKeyword} from "@/api/xjc-integratedmachine/environment/occupation.js";
+    import {getOccupationByKeyword, getHotOccupationList, getCareerOccupationList} from "@/api/xjc-integratedmachine/environment/ai-career.js";
 
     const router = useRouter()
 
@@ -104,6 +77,10 @@
 
     // 职业列表
     const occupationList = ref([])
+    // 热门职业列表
+    let hotOccupationList = ref([])
+    // 历史对话职业
+    let occupationHistoryList = ref([])
 
     function setHeadinfo(){
         headinfo.value = {
@@ -116,6 +93,11 @@
         }
     }
 
+    // 清除输入框
+    function clearInput(){
+        form.value.name = '';
+    }
+
     // 定义一个函数，用于将关键词变为红色
     function highlightKeywords(text, keywords) {
         // 遍历关键词列表
@@ -146,18 +128,53 @@
         }
     }
 
-    function toDetail(row) {
+    function toChatPage(row) {
         router.push({
             path: '/xjc-integratedmachine/environment/ai_career_interview_chat',
             query: {
-                id: row.id
+                occupationId: row.id,
+                occupationName: extractChineseCharacters(row.name)
             }
         })
     }
 
+    function hotToChatPage(row) {
+        router.push({
+            path: '/xjc-integratedmachine/environment/ai_career_interview_chat',
+            query: {
+                occupationId: row.occupationId,
+                occupationName: extractChineseCharacters(row.occupationName)
+            }
+        })
+    }
+
+    /**
+     * 只获取中文
+     */
+    function extractChineseCharacters(str) {
+        // 正则表达式匹配所有汉字
+        const regex = /[\u4e00-\u9fa5]+/g;
+        // 使用match方法找到所有匹配项
+        const matches = str.match(regex);
+        return matches ? matches.join('') : '';
+    }
+
+    function getHotOccupation(){
+        getHotOccupationList().then(resp => {
+            hotOccupationList.value = resp.rows
+        })
+    }
+
+    function getChatOccupationHistoryList(){
+        getCareerOccupationList().then(resp => {
+            occupationHistoryList.value = resp.rows
+        })
+    }
 
     onMounted(() => {
         setHeadinfo()
+        getHotOccupation()
+        getChatOccupationHistoryList()
     })
 
 </script>
@@ -194,12 +211,12 @@
     }
 
 
-    .two-page {
+    .input-component {
         display: flex;
         flex-direction: column;
         align-items: center;
 
-        .two-page-search {
+        .input-search {
             display: flex;
 
             margin-top: 57px;
@@ -222,6 +239,7 @@
                 height: 84px;
                 width: 1484px;
             }
+
             div{
                 width: 170px;
                 height: 84px;
@@ -320,6 +338,13 @@
             text-transform: none;
 
         }
+        .content{
+            display: flex;
+            flex-wrap:wrap;
+            margin-top: 11px;
+            margin-left: 119px;
+            margin-right: 91px
+        }
     }
 
     .search-item{
@@ -338,5 +363,6 @@
         text-align: left;
         font-style: normal;
         text-transform: none;
+        cursor: pointer;
     }
 </style>

src/views/xjc-integratedmachine/environment/ai_interview/ai_career_interview_chat.vue

@@ -5,22 +5,13 @@
                 <img  src="@/assets/images/environment/ai-career-profile.png" alt="404">
             </div>
             <div class="introduce-text">
-                在生涯访谈中，通过与不同职业人物对话，可以了解不同职业的发展前景、职业要求，为尽早规划职业发展 xxxx
+                AI生涯访谈依托人工智能，输入想访谈的职业名称后，AI将精准模拟该职业从业者，与你展开沉浸式职业探索对话。从职业发展前景、核心能力要求，到日常工作细节、学科适配方向，均可通过开放式提问进行深度探索，为高中选科、大学选专业和未来职业规划提供支持。
                 <p>访谈时你可以提出以下问题：</p>
             </div>
             <div class="question-list">
-                <p class="question-list-item">您为什么要选择这一职业？</p>
-                <p class="question-list-item">这项职业每天的核心任务是什么？</p>
-                <p class="question-list-item">这项职业的工作环境如何？（室内/室外，办公室/工厂，团队工作/独自工作等）</p>
-                <p class="question-list-item">从事这项职业需要哪些学历、证书、经验或关键能力？</p>
-                <p class="question-list-item">这项职业在招聘或晋升时，更看重哪些个人特质或阶段特征？</p>
-                <p class="question-list-item">大学里哪些专业与这项职业直接相关？</p>
-                <p class="question-list-item">为了从事这项职业，在校期间应做哪些具体准备？</p>
-                <p class="question-list-item">请分享一个最有成就感的项目/瞬间，以及一次印象深刻的挫折，您从中学到的关键经验是什么？</p>
-                <p class="question-list-item">这项职业未来的发展前景如何？</p>
-                <p class="question-list-item">这项职业进一步提升的途径有哪些？（培训、证书、项目、学历等）</p>
-                <p class="question-list-item">如果未来的我将选择从事该职业，您会给我哪些具体建议？</p>
-                <p class="question-list-item">请用时间轴描述一个典型工作日从上班到下班的详细流程？</p>
+                <p class="question-list-item" v-for="(item, index) in questionBankList" :key="index" @click="sendRequest(item.question)">
+                    {{index+1}}.{{item.question}}
+                </p>
             </div>
 
         </div>
@@ -29,7 +20,7 @@
             <div class="center-header">
                 <div style="margin-left: 30px"></div>
                 <div>小新老师</div>
-                <div class="header-exit-btn">退出</div>
+                <div class="header-exit-btn" @click="exitChatPage">退出</div>
             </div>
             <div v-loading="loadingHistoryRecord" class="chat-container">
                 <div class="message-list" ref="chatContainerRef">
@@ -59,8 +50,9 @@
                                         <div v-show="expandIndexList.includes(index)" v-html="item.content"  class="content-text"></div>
                                     </div>
                                 </div>
-                                <div style="margin: 4px">
-                                    <el-text>{{item.createTime}}</el-text>
+                                <div style="margin: 4px;display: flex;align-items: center">
+                                    <p><el-text>{{item.createTime}}</el-text></p>
+                                    <p style="margin-left: 1vw"><el-text>数据来源于AI，仅供参考</el-text></p>
                                 </div>
                             </div>
                             <div v-if="index !== chatRecordList.length-1">
@@ -68,25 +60,54 @@
                                            @click="foldOrExpandMessage(index, expandIndexList.includes(index))">
                                     {{expandIndexList.includes(index)?'折叠':'展开'}}
                                 </el-button>-->
-                                <img v-if="item.content.length>80"
+                                <img v-if="item.content.length>60"
                                      @click="foldOrExpandMessage(index, expandIndexList.includes(index))"
                                     :src="expandIndexList.includes(index)?msgFold:msgExpand"
                                     alt="icon"
                                     style="margin-left: 4px;height: 36px;width: 36px"/>
                             </div>
-                            <el-button @click="ttsStartPlay(item.content, index)">{{playActiveIndex === index && playButtonFlag ?'停止':'播放'}}</el-button>
+                            <!--<el-button @click="ttsStartPlay(item.content, index)">{{playActiveIndex === index && playButtonFlag ?'停止':'播放'}}</el-button>-->
+                            <img @click="ttsStartPlay(item.content, index)"
+                                 :src="playActiveIndex === index && playButtonFlag ?playingPlayer:mutePlayer"
+                                 alt="icon"
+                                 style="margin-left: 4px;height: 36px;width: 36px"/>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="input-container">
-                <el-input
-                        v-model="inputMessage"
-                        type="textarea"
-                        placeholder="请输入消息"
-                        @keyup.enter="sendMessage"
-                ></el-input>
-                <el-button @click="sendMessage" :disabled="isSending" type="primary">发送</el-button>
+            <div class="question-tip-box" ref="questionTipBoxRef" v-if="showQuestionTipBoxFlag">
+                <div>
+                    <div style="display: flex;justify-content: space-between;align-items: center">
+                        <div class="tip-title">你可以选择以下问题</div>
+                        <div>X</div>
+                    </div>
+                    <div style="display: flex;align-items: center;flex-wrap: wrap">
+                        <div class="tip-item" v-for="(item, index) in questionBankByKeywordList" :key="index" @click="tipSendRequest(item.question)">
+                            {{index+1}}.{{item.question}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="input-component">
+                <div class="input-search">
+                    <el-input
+                            v-model="inputMessage"
+                            style="width: 1220px;height: 84px"
+                            placeholder="请输入消息"
+                            @input="getQuestionBankByKeyword"
+                            @keyup.enter="sendMessage"
+                    >
+                        <template #suffix>
+                                    <span style="font-size: 38px;color: #444040;margin-left: 37px;cursor: pointer" @click="clearInput">
+                                      X
+                                    </span>
+                        </template>
+                    </el-input>
+                    <div @click="sendMessage" :disabled="isSending" type="primary">发送</div>
+                </div>
+            </div>
+            <div class="iat-box-default" @click="iatRecognizeVoice">
+                <img class="recognize-img" :src="iatVoiceOpen? recognize:microphone">
             </div>
         </div>
     </div>
@@ -106,14 +127,18 @@
     import {Base64} from 'js-base64'
     import * as AudioPlayer from "/public/ai/tts/dist/index.umd.js"
     import {aiChatRecordList, aiChatRecordAdd} from '@/api/xjc-integratedmachine/common/aiChat.js'
+    import {getCareerChatRecordList, addCareerChatRecord, getQuestionBankList} from "@/api/xjc-integratedmachine/environment/ai-career.js";
     import msgFold from '@/assets/images/environment/ai-career-msg-fold.png'
     import msgExpand from '@/assets/images/environment/ai-career-msg-expand.png'
+    import mutePlayer from '@/assets/images/environment/ai-career-mute-player.png'
+    import playingPlayer from '@/assets/images/environment/ai-career-playing-player.gif'
+    import microphone from '@/assets/images/environment/ai-career-microphone.png'
+    import recognize from '@/assets/images/environment/ai-career-recognize.gif'
     const router = useRouter()
     const route = useRoute()
 
     const param = route.query
 
-
     const loadingHistoryRecord = ref(false)
     // 聊天记录
     let chatRecordList = ref([])
@@ -136,14 +161,24 @@
     // 播放按钮状态
     let playActiveIndex = ref(0)
     let playButtonFlag = ref(false)
+    // 左侧推荐问题
+    let questionBankList = ref([])
+    // 关键词提示问题
+    let questionBankByKeywordList = ref([])
+
+    // 显示提示
+    let showQuestionTipBoxFlag = ref(false)
+    // 提示信息
+    const HELLO_MSG = '你是谁？'
     // 查看所有聊天记录
     function list() {
         loadingHistoryRecord.value = true
         let queryForm = {
             pageNum: 1,
-            pageSize: 10000
+            pageSize: 10000,
+            occupationId: param.occupationId,
         }
-        aiChatRecordList(queryForm).then(resp =>{
+        getCareerChatRecordList(queryForm).then(resp =>{
             chatRecordList.value = resp.rows;
             loadingHistoryRecord.value = false
             setTimeout(()=>{
@@ -157,22 +192,31 @@
 
     function addRecord(content) {
         let queryForm = {
-            content: content,
-            isUser: 0
+            'occupationName': param.occupationName,
+            'occupationId': param.occupationId,
+            'content': content,
+            'isUser': 0
         }
-        aiChatRecordAdd(queryForm).then(resp =>{
+        addCareerChatRecord(queryForm).then(resp =>{
             console.log(resp)
 
         })
     }
 
+    // 第一次聊天发送消息
     function sayHi() {
-        const botMsg = {
-            isUser: false,
-            content: '你好，我是来帮助你进行学习规划、选科辅导以及志愿填报的生涯教育专家。如果你有关于这些方面的问题，欢迎随时向我咨询！', // 增量填充
-            isTyping: false, // 显示加载动画
-        }
-        chatRecordList.value.push(botMsg)
+        sendRequest(HELLO_MSG)
+    }
+
+    // 清除输入框
+    function clearInput(){
+        inputMessage.value = '';
+    }
+
+    // 在关键词搜索页点击发送问题
+    function tipSendRequest(content){
+        sendRequest(content);
+        showQuestionTipBoxFlag.value = false
     }
 
     const sendMessage = () => {
@@ -183,14 +227,17 @@
     }
 
     const sendRequest = async(message) => {
-        // 用户信息
-        const userMessage = {
-            isUser: true,
-            content: message,
-            isTyping: false
-        }
-        // 消息加入聊天记录
-        chatRecordList.value.push(userMessage)
+        if(message !== HELLO_MSG){
+            // 用户信息
+            const userMsg = {
+                isUser: true,
+                content: message,
+                isTyping: false
+            }
+            // 消息加入聊天记录
+            chatRecordList.value.push(userMsg)
+        }
+
         const botMsg = {
             isUser: false,
             content: '', // 增量填充
@@ -209,10 +256,12 @@
 
             // 请求体
             let form = {
+                'occupationName': param.occupationName,
+                'occupationId': param.occupationId,
                 "content": message? message: "你是谁？"
             }
             // 发送fetch请求
-            const response = await fetch('/dev-api/ai/chat/record/stream', {
+            const response = await fetch('/dev-api/ai/career/chat/record/stream', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -279,9 +328,11 @@
         }
     }
 
+    // 存储职业
+
     /* 语音识别 ↓*/
-    // 控制录音弹窗
-    let iatVoiceOpen = false
+    // 语音识别按钮状态
+    let iatVoiceOpen = ref(false)
     // 是否开始录音
     let iatStartVoiceStatus = false
     // 识别中状态
@@ -331,15 +382,27 @@
             console.log('录音结束，停止定时器');
             clearInterval(iatCountdownInterval);
             iatStartVoiceStatus = false;
+            iatVoiceOpen.value = false;
         };
 
     }
 
+    function iatRecognizeVoice(){
+        if(iatVoiceOpen.value){
+            iatCloseVoiceOpen();
+        }else{
+            iatStartVoice();
+        }
+    }
+
+    /*
+    * 开始录音
+    * */
     async function iatStartVoice() {
         if (iatLoading) {
             return;
         }
-        iatVoiceOpen = true;
+        iatVoiceOpen.value = true;
         await iatPlayIatVoice();
     }
 
@@ -368,7 +431,7 @@
      * 关闭录音弹窗
      */
     function iatCloseVoiceOpen() {
-        iatVoiceOpen = false;
+        iatVoiceOpen.value = false;
         iatStartVoiceStatus = false;
         if (iatRecorder) {
             iatRecorder.stop();
@@ -708,11 +771,46 @@
         }
     }
 
+    function exitChatPage(){
+        router.go(-1)
+    }
+
+    function getRecommendQuestionBank(){
+        let form = {
+            type: 1,
+            isRecommend: 1,
+            pageNum: 1,
+            pageSize: 10000
+        }
+        getQuestionBankList(form).then(resp => {
+            questionBankList.value = resp.rows
+        })
+    }
+
+    function getQuestionBankByKeyword(){
+        let form = {
+            type: 1,
+            pageNum: 1,
+            pageSize: 10000,
+            keyword: inputMessage.value
+        }
+        getQuestionBankList(form).then(resp => {
+            if(resp.rows && resp.rows.length >0){
+                showQuestionTipBoxFlag.value = true
+                questionBankByKeywordList.value = resp.rows
+            }else{
+                showQuestionTipBoxFlag.value = false
+            }
+
+        })
+    }
+
     onMounted(()=>{
         nextTick(()=>{
             initSpeechRecognition();
             initSpeechSynthesis();
             list();
+            getRecommendQuestionBank();
         })
 
     })
@@ -752,7 +850,7 @@
                 width: 392px;
                 margin-left: 14px;
                 font-weight: 400;
-                font-size: 28px;
+                font-size: 24px;
                 color: #7D7C7C;
                 line-height: 40px;
                 text-align: left;
@@ -765,7 +863,7 @@
                 overflow: auto;
                 margin-left: 14px;
                 font-weight: 400;
-                font-size: 28px;
+                font-size: 24px;
                 color: #7D7C7C;
                 line-height: 40px;
                 text-align: left;
@@ -815,6 +913,7 @@
                     align-items: center;
                     justify-content: center;
                     margin-right: 30px;
+                    cursor: pointer;
                 }
             }
             .chat-container {
@@ -865,7 +964,7 @@
 
     .content-text{
         font-weight: 400;
-        font-size: 28px !important;
+        font-size: 24px !important;
         color: #333333;
         line-height: 52px;
         letter-spacing: 3px;
@@ -902,4 +1001,105 @@
             opacity: 1;
         }
     }
+
+    /*输入框*/
+
+    .input-component {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .input-search {
+            display: flex;
+
+            /*margin-top: 57px;*/
+
+            ::v-deep .el-input__inner {
+                font-size: 24px;
+                margin-left: 34px;
+            }
+
+            ::v-deep .el-input__suffix {
+                font-size: 100px;
+                width: 100px;
+                height: 100px;
+
+            }
+
+            ::v-deep .el-input__wrapper {
+                background-color: #F5F9FA;;
+                box-shadow: none;
+                height: 84px;
+                width: 1220px;
+            }
+            div{
+                width: 170px;
+                height: 84px;
+                background: linear-gradient( 180deg, #73EE71 0%, #0ACB63 100%);
+                border-radius: 0px 5px 5px 0px;
+
+                font-weight: 400;
+                font-size: 24px;
+                color: #FFFFFF;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+    }
+    .iat-box-default{
+        position: absolute;
+        right: 97px;
+        top:50vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        width: 200px;
+        height: 200px;
+        background: linear-gradient( 180deg, #F8F8F8 0%, #EAEAEA 100%);
+        box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.1);
+        border-radius: 227px 227px 227px 227px;
+        /*border: 1px solid;*/
+        border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.13)) 1 1;
+        .recognize-img{
+            height: 150px;
+            width: 150px;
+        }
+    }
+    .question-tip-box{
+        width: 1346px;
+        height: 100px;
+        overflow: auto;
+        z-index: 10;
+        position: absolute;
+        right: 68px;
+        bottom: 100px;
+
+        .tip-title{
+            font-weight: 400;
+            font-size: 24px;
+            color: #000000;
+            line-height: 40px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+        }
+        .tip-item{
+            height: 41px;
+            background: #E9FBFF;
+            border-radius: 35px 35px 35px 35px;
+            border: 1px solid #8CE349;
+            padding: 0 20px;
+            font-weight: 400;
+            font-size: 24px;
+            color: #7D7C7C;
+            line-height: 40px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            cursor: pointer;
+        }
+    }
+
 </style>

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

@@ -1,49 +1,228 @@
+
 <template>
-    生涯故事1
-    <div v-for="(item,index) in list" @click="toDetail(item)">
-        <div v-html="item.title"></div>
-        <div v-html="item.content.substr(0,10)"></div>
-        <div @click="toDetail(item)">>>>></div>
+  <div class="university_details_video">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+<!--        生涯故事1-->
+        <div>
+          <div  class="item-box" v-for="(item,index) in list" @click="toDetail(item)">
+            <div class="top">
+              <p class="title" v-html="item.title"></p>
+              <p class="details">详情 ></p>
+            </div>
+
+            <div class="content" >{{ safeTruncate(item.content, 50) }}...</div>
+          </div>
+        </div>
+        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+                    v-model:limit="queryParams.pageSize" @pagination="query"/>
+      </div>
+      <drag_component></drag_component>
     </div>
+  </div>
 
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-                v-model:limit="queryParams.pageSize" @pagination="query"/>
 </template>
-
 <script setup>
-    import {careerinformation} from '@/api/xjc-integratedmachine/environment/tscareer.js'
-    const router = useRouter()
-    const route = useRoute()
-    const list = ref([])
-    const total = ref(0)
-
-    const queryParams = ref({
-        pageNum: 1,
-        pageSize: 10,
-        type: '5'
-    })
-
-    function query() {
-        careerinformation(queryParams.value).then(resp => {
-            console.log(resp.data_list.rows)
-            list.value = resp.data_list.rows
-            total.value = resp.data_list.total
-        })
-    }
+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";
+import {getConfigKey} from "@/api/system/config.js";
+import {careerinformation} from '@/api/xjc-integratedmachine/environment/tscareer.js'
+const router = useRouter()
+const route = useRoute()
+const list = ref([])
+const total = ref(0)
+
+const showAreaChoose = ref(false)
+const showCategoryChoose = ref(false)
+const showGradeChoose = ref(false)
+
+const param = route.query
+const showIndex = ref(1)
+const baseUrl = ref()
+
+
+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({})
+const onePage = ref(true)
+const twoPage = ref(false)
+const threePage = ref(false)
+const fourPage = ref(false)
+const fivePage = ref(false)
+const fivePageDialog = ref(false)
+const sixPageDialog = ref(false)
+const eightPageDialog = ref(false)
+
+
+const sixPage = ref(false)
+const senvenPage = ref(false)
+const eightPage = ref(false)
 
-    function toDetail(item) {
-        router.push({
-            path : '/xjc-integratedmachine/environment/career_story2',
-            query :{
-                id : item.id
-            }
-        })
+function setHeadinfo(){
+  headinfo.value = {
+    title: '学职资讯',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
+    homeUrl:'/xjc-integratedmachine/environment/index',
+
+  }
+}
+function safeTruncate(text, length) {
+  // 使用 substring 方法截取字符串
+
+  // 这里可以添加额外的消毒步骤来确保文本安全
+  // 例如：使用正则表达式移除所有脚本标签等
+  // let reg = /[\u4e00-\u9fa5]|[\（\）\《\》\——\；\，\。\“\”\<\>\！]/g;
+  // const sanitizedText = text.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+  const sanitizedText = text.replace(/[^\u4e00-\u9fa5；，。“”《》？！]+/g, '');
+  // const truncatedText = sanitizedText.substring(0, length);
+
+  const truncatedText = sanitizedText.substring(0, length);
+  console.log("truncatedText",truncatedText)
+  // 但为了简化示例，这里仅返回截取的文本
+  return truncatedText;
+}
+
+onMounted(() => {
+  setHeadinfo()
+
+})
+
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  type: '5'
+})
+
+function query() {
+  careerinformation(queryParams.value).then(resp => {
+    console.log(resp.data_list.rows)
+    list.value = resp.data_list.rows
+    total.value = resp.data_list.total
+  })
+}
+
+function toDetail(item) {
+  router.push({
+    path : '/xjc-integratedmachine/environment/career_story2',
+    query :{
+      id : item.id
     }
+  })
+}
 
-    query()
+query()
 
 </script>
 
-<style scoped>
+<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;
+    flex-direction: column;
+    overflow: auto;
+    .item-box{
+      width: 1750px;
+      height: 204px;
+      border-left: 10px solid #1EC590;
+      background: #FFFFFF;
+      box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.09);
+      border-radius: 5px 5px 5px 5px;
+      margin-left: 40px;
+      margin-top: 46px;
+      padding-left: 40px;
+      padding-right: 40px;
+      .top{
+        display: flex;
+        justify-content: space-between;
+        padding-top: 40px;
+        .title{
+          font-weight: bold;
+          font-size: 32px;
+          color: #000000;
+          line-height: 52px;
+          //margin-left: 25px;
+        }
+        .details{
+          font-weight: 400;
+          font-size: 20px;
+          color: #515F6A;
+          //margin-right: 40px;
+          //margin-top: 40px;
+        }
+      }
+      .content{
+        border-top: #E6E6E6 1px solid;
+        height: 100px;
+        overflow: auto;
+        padding-top: 30px;
+        font-weight: 400;
+        font-size: 30px;
+        color: #333333;
+      }
+    }
+  }
+
+}
 
 </style>
+

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

@@ -1,26 +1,150 @@
 <template>
-    <div v-html="data.title"></div>
-    <div v-html="data.content"></div>
-</template>
+  <div class="university_details_video">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <!--        生涯故事1-->
+<!--        <div>-->
+<!--          <div  class="item-box" v-for="(item,index) in list" @click="toDetail(item)">-->
+<!--            <div class="top">-->
+<!--              <p class="title" v-html="item.title"></p>-->
+<!--              <p class="details">详情 ></p>-->
+<!--            </div>-->
+
+<!--            <div class="content" v-html="item.content"></div>-->
+<!--            &lt;!&ndash;            <div @click="toDetail(item)">>>>></div>&ndash;&gt;-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div v-html="data.title"></div>-->
+        <div  v-html="data.content"></div>
+
+<!--        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"-->
+<!--                    v-model:limit="queryParams.pageSize" @pagination="query"/>-->
+      </div>
+      <drag_component></drag_component>
+    </div>
+  </div>
 
+</template>
 <script setup>
-    import {careerdetail} from '@/api/xjc-integratedmachine/environment/tscareer.js'
-    const router = useRouter()
-    const route = useRoute()
-    const param = route.query
-
-    const data = ref({})
-    function detail() {
-        careerdetail({
-            id : param.id
-        }).then(resp =>{
-            data.value = resp.entity
-        })
-    }
-    detail()
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {careerdetail} from '@/api/xjc-integratedmachine/environment/tscareer.js'
+const router = useRouter()
+const route = useRoute()
+const param = route.query
+
+const data = ref({})
+function detail() {
+  careerdetail({
+    id : param.id
+  }).then(resp =>{
+    data.value = resp.entity
+  })
+}
+detail()
+import {ref} from "vue";
+
+
+
+
+const headinfo = ref({})
+
+function setHeadinfo(){
+  headinfo.value = {
+    title: '学职资讯',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
+    homeUrl:'/xjc-integratedmachine/environment/index',
+
+  }
+}
+
+onMounted(() => {
+  setHeadinfo()
+})
+
+
 
 </script>
 
-<style scoped>
+<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: white;
+    //border-radius: 35px 35px 35px 35px;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    border-top: 10px solid #1EC590;
+    padding-left: 157px;
+    padding-right: 157px;
+    padding-top: 20px;
+    .item-box{
+      width: 1750px;
+      height: 204px;
+      border-left: 10px solid #1EC590;
+      background: #FFFFFF;
+      box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.09);
+      border-radius: 5px 5px 5px 5px;
+      margin-left: 40px;
+      margin-top: 46px;
+      padding-left: 40px;
+      padding-right: 40px;
+      .top{
+        display: flex;
+        justify-content: space-between;
+        padding-top: 40px;
+        .title{
+          font-weight: bold;
+          font-size: 32px;
+          color: #000000;
+          line-height: 52px;
+          //margin-left: 25px;
+        }
+        .details{
+          font-weight: 400;
+          font-size: 20px;
+          color: #515F6A;
+          //margin-right: 40px;
+          //margin-top: 40px;
+        }
+      }
+      .content{
+        border-top: #E6E6E6 1px solid;
+        height: 100px;
+        overflow: auto;
+      }
+    }
+  }
+
+}
 
 </style>
+

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

@@ -5,28 +5,28 @@
       <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">
+            <img v-if="onePage" src="@/assets/images/environment/contrast/01-active.png">
+            <img v-else src="@/assets/images/environment/contrast/01.png">
             基本信息
           </div>
           <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
-            <img v-if="twoPage" src="@/assets/images/environment/score-h.png">
-            <img v-else src="@/assets/images/environment/score.png">
+            <img v-if="twoPage" src="@/assets/images/environment/contrast/02-active.png">
+            <img v-else src="@/assets/images/environment/contrast/02.png">
             主修课程
           </div>
           <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
-            <img v-if="threePage" src="@/assets/images/environment/score-h.png">
-            <img v-else src="@/assets/images/environment/score.png">
+            <img v-if="threePage" src="@/assets/images/environment/contrast/03.png">
+            <img v-else src="@/assets/images/environment/contrast/03-active.png">
             专业解读
           </div>
           <div :class="[fourPage?'item-box-active':'item-box']" @click="showPage(4)">
-            <img v-if="fourPage" src="@/assets/images/environment/score-h.png">
-            <img v-else src="@/assets/images/environment/score.png">
+            <img v-if="fourPage" src="@/assets/images/environment/contrast/04-active.png">
+            <img v-else src="@/assets/images/environment/contrast/04.png">
             就业前景与方向
           </div>
           <div :class="[fivePage?'item-box-active':'item-box']" @click="showPage(5)">
-            <img v-if="fivePage" src="@/assets/images/environment/score-h.png">
-            <img v-else src="@/assets/images/environment/score.png">
+            <img v-if="fivePage" src="@/assets/images/environment/contrast/05-active.png">
+            <img v-else src="@/assets/images/environment/contrast/05.png">
             开设院校
           </div>
         </div>

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

@@ -13,12 +13,12 @@
               </div>
             </div>
             <div class="info-box">
-              <p class="title"> 所属行业</p>
-              <p>{{entity.industryname}}</p>
+              <p class="title" > 所属行业</p>
+              <p class="answer" >{{entity.industryname}}</p>
             </div>
             <div class="info-box">
               <p class="title"> 职业兴趣类代码</p>
-              <p>{{entity.industryname}}</p>
+              <p class="answer" >{{entity.industryname}}</p>
             </div>
           </div>
         </div>
@@ -44,28 +44,32 @@
             </div>
           </div>
           <div class="one-page" v-show="onePage">
-            <p class="title">专业解读</p>
-            <div class="info"  v-html="entity.describe"></div>
+            <p class="title">职业概述</p>
+            <div class="info"  v-html="entity.definition"></div>
           </div>
           <div class="one-page" v-show="twoPage">
-            <p class="title">开设院校</p>
-            <div class="info"  v-for="(item,index) in kaishe_list">
-              {{ item.name }}
-            </div>
+            <p class="title">工作内容</p>
+            <div class="info"  v-html="entity.normalwork"></div>
           </div>
           <div class="one-page" v-show="threePage">
-            <p class="title">学科评估</p>
-            <div class="info"   v-for="(item,index) in pinggu_list">
-              {{ item.name }}
-            </div>
+            <p class="title">职业前景</p>
+            <div class="info"  v-html="entity.prospects"></div>
           </div>
           <div class="one-page" v-show="fourPage">
-            <p class="title">就业前景</p>
+            <p class="title">本科专业</p>
             <div class="info"   v-html="entity.employment">
             </div>
           </div>
           <div class="one-page" v-show="fivePage">
-            <p class="title">专业视频</p>
+            <p class="title">专科专业</p>
+            <div class="major">
+              <div class="info-item"  v-for="(item,index) in zk_list" @click="jumpZY(item)">
+                {{ item.name }}
+              </div>
+            </div>
+          </div>
+          <div class="one-page" v-show="sixPage">
+            <p class="title">职业视频</p>
             <div  ref="videoContainer" class="video-container"  v-if="entity.path">
               <video ref="videoPlayer" id="playerId" class="video-js vjs-default-skin" controls preload="auto"
                      :data-setup="{}">
@@ -78,7 +82,7 @@
       </div>
     </div>
     <el-dialog
-        v-model="fivePage"
+        v-model="sixPage"
         @before-close="dialogBeforeClose"
         destroy-on-close
         title="专业视频"
@@ -107,6 +111,7 @@ import headComponent from '@/views/xjc-integratedmachine/components/head_compone
 import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 import {handleThemeStyle} from "@/utils/theme.js";
 import useSettingsStore from "@/store/modules/settings.js";
+import {occupationDetail} from "@/api/xjc-integratedmachine/environment/occupation.js";
 
 const {proxy} = getCurrentInstance()
 const {educationlevel} = proxy.useDict('educationlevel')
@@ -133,13 +138,12 @@ function setHeadinfo(){
     backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
     homeUrl:'/xjc-integratedmachine/environment/index',
     contrast:true,
-    contrastType:'major'
+    contrastType:'occ'
   }
 }
 
 onMounted(() => {
   setHeadinfo()
-
 })
 
 const param = route.query
@@ -154,31 +158,26 @@ const collectionRef = ref(null)
 const collection_data = ref({})
 function setCollection_data(){
   collection_data.value = {
-    contentType: 2,
+    contentType: 3,
     contentId: param.id,
     contentVal: entity.value,
-    source:'pro_details_video'
+    source:'occ_details_video'
   }
   console.log("entity.value",entity.value)
 }
+
+const bk_list = ref([])
+const zk_list = ref([])
 function detail() {
-  specialtyDetail({
+  occupationDetail({
     id: param.id
   }).then(resp => {
     entity.value = resp.entity
-    kaishe_list.value = resp.kaishe_list
-    pinggu_list.value = resp.pinggu_list
-    similar_list.value = resp.similar_list
-    entity.value.kaishe_list = kaishe_list
+    bk_list.value = resp.bk_list
+    zk_list.value = resp.zk_list
   })
-  setTimeout(() => {
-    setCollection_data();
-    collectionRef.value.isContrast(entity.value);
-    collectionRef.value.getSource('pro_details_video');
-  }, 500);
 }
 
-
 const showPage = (val) => {
   if (val === 1) {
     onePage.value = true;
@@ -215,6 +214,7 @@ const showPage = (val) => {
     threePage.value = false;
     fourPage.value = false;
     fivePage.value = true;
+    sixPage.value = false;
   } else if (val === 6) {
     onePage.value = false;
     twoPage.value = false;
@@ -236,7 +236,14 @@ function dialogBeforeClose() {
   eightPage.value = false;
 }
 
-
+function jumpZY(item){
+  router.push({
+    path : '/xjc-integratedmachine/environment/pro_details_video',
+    query :{
+      id : item.id
+    }
+  })
+}
 </script>
 
 <style scoped lang="scss">
@@ -286,7 +293,7 @@ p, div {
         margin-left: 45px;
         width: 1782px;
         margin-left: 45px;
-        border: 1px solid;
+        //border: 1px solid;
         .title {
           font-weight: bold;
           font-size: 36px;
@@ -353,8 +360,8 @@ p, div {
       }
 
       .info-box{
-        border: 1px solid;
-        margin-left: 33px;
+        //border: 1px solid;
+        //margin-left: 33px;
         .title {
           height: 40px;
           border-left: 8px #8CE349 solid;
@@ -365,35 +372,13 @@ p, div {
           line-height: 40px;
           padding-left: 11px;
         }
-        .info{
-          margin-top: 19px;
-          font-weight: 400;
-          font-size: 20px;
-          color: #333333;
-          display: flex;
-          flex-wrap: wrap;
-
-          .info-item{
-            width: 244px;
-            height: 80px;
-            margin-left: 10px;
-            background: #FFFFFF;
-            border-radius: 5px 5px 5px 5px;
-            border: 1px solid #A2F57F;
-            font-weight: 400;
-            font-size: 30px;
-            color: #000000;
-            line-height:  80px;
-            text-align: center;
-            margin-top: 14px;
-          }
-        }
-        .info-text{
-          margin-top: 19px;
-          font-weight: 400;
-          font-size: 20px;
-          color: #333333;
-        }
+       .answer{
+         font-weight: 400;
+         font-size: 20px;
+         color: #333333;
+         margin-top: 20px;
+         margin-left: 20px;
+       }
       }
 
     }
@@ -496,6 +481,36 @@ p, div {
     color: #333333;
     line-height: 40px;
   }
+  .major{
+    margin-top: 19px;
+    font-weight: 400;
+    font-size: 20px;
+    color: #333333;
+    display: flex;
+    //justify-content: space-around;
+    flex-wrap: wrap;
+
+    .info-item{
+      width: 244px;
+      height: 80px;
+      margin-left: 10px;
+      background: #FFFFFF;
+      border-radius: 5px 5px 5px 5px;
+      border: 1px solid #A2F57F;
+      font-weight: 400;
+      font-size: 30px;
+      color: #000000;
+      line-height:  80px;
+      text-align: center;
+      margin-top: 14px;
+      .info-text{
+        margin-top: 19px;
+        font-weight: 400;
+        font-size: 20px;
+        color: #333333;
+      }
+    }
+  }
 
   .select-div {
     width: 100%;

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

@@ -5,18 +5,18 @@
       <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">
+            <img v-if="onePage" src="@/assets/images/environment/career/01-active.png">
+            <img v-else src="@/assets/images/environment/career/01.png">
             行业分类查询
           </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">
+            <img v-if="twoPage" src="@/assets/images/environment/career/02-active.png">
+            <img v-else src="@/assets/images/environment/career/02.png">
             霍兰徳码查询
           </div>
           <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
-            <img v-if="threePage" src="@/assets/images/environment/keys-search-h.png">
-            <img v-else src="@/assets/images/environment/keys-search.png">
+            <img v-if="threePage" src="@/assets/images/environment/career/03-active.png">
+            <img v-else src="@/assets/images/environment/career/03.png">
             关键字查询
           </div>
         </div>
@@ -39,11 +39,35 @@
           </div>
         </div>
         <div class="one-page" v-show="threePage">
-          <div class="top">
-            心理学家霍兰德归纳了六种职业兴趣类型:现实型(R)、研究型(I)、艺术型(A)、社会型(S)、企业型(E)常规型(C)。个体完成职业兴趣测评后，可査询与霍兰德代码(一码、二码、三码)相对应的职业，详细了解相关的职业信息。(注：点击顺序即为霍兰德代码顺序，请按兴趣强弱依次选择类型)-->
-            <div class="search-btn">
-              <img @click="jumpTo('/xjc-integratedmachine/environment/occdb_interestcode')" style="z-index:10" src="@/assets/images/environment/search-btn.png">
+          <div class="input-component">
+            <div class="input-search">
+              <el-input
+                  v-model="form.name"
+                  style="width: 1392px;height: 84px"
+                  placeholder="请输入关键字"
+                  @input="byKeyWord"
+              >
+                <template #suffix>
+                                    <span @click="clearResult"
+                                          style="font-size: 38px;color: #444040;margin-left: 37px;">
+                                      X
+                                    </span>
+                </template>
+              </el-input>
+              <div @click="byKeyWord">
+                开始查询
+              </div>
+            </div>
+          </div>
+          <div class="result-box">
+            <div class="two-page-result">
+              <div v-for="(item,index) in data_list"
+                   :class="[item.selected?'item-result-box-active':'item-result-box']"
+                   @click="toDetail(item)">
+                <div v-html="item.name"></div>
+              </div>
             </div>
+
           </div>
         </div>
       </div>
@@ -96,6 +120,7 @@ import headComponent from '@/views/xjc-integratedmachine/components/head_compone
 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 {getOccupationByKeyword} from "@/api/xjc-integratedmachine/environment/occupation.js";
 
 const router = useRouter()
 
@@ -171,32 +196,23 @@ function highlightKeywords(text, keywords) {
   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)
-      // 遍历数据数组，并处理每个字符串
-    })
-
-    universityList.value = resp.list
+const data_list = ref([])
+function byKeyWord() {
+  getOccupationByKeyword(form.value).then(resp =>{
+    console.log("sss",resp)
+    data_list.value = resp.list
   })
 }
 
-
-function toDetail(row) {
+function toDetail(item){
   router.push({
-    path: '/xjc-integratedmachine/environment/university_details_video',
-    query: {
-      id: row.id,
-      name: row.name,
+    path : '/xjc-integratedmachine/environment/occ_details_video',
+    query :{
+      id :  item.id
     }
   })
 }
 
-
 const tab = ref("tj")
 
 function changeTab(path) {
@@ -249,6 +265,10 @@ function search() {
   })
 }
 
+function clearResult(item) {
+  form.value.name = '';
+  byKeyword();
+}
 </script>
 
 
@@ -352,6 +372,50 @@ function search() {
             margin-left: 3px;
           }
         }
+        .input-component {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .input-search {
+            display: flex;
+
+            margin-top: 57px;
+
+            ::v-deep .el-input__inner {
+              font-size: 24px;
+              margin-left: 34px;
+            }
+
+            ::v-deep .el-input__suffix {
+              font-size: 100px;
+              width: 100px;
+              height: 100px;
+
+            }
+
+            ::v-deep .el-input__wrapper {
+              background: #E2E2E2;
+              box-shadow: none;
+              height: 84px;
+              width: 1484px;
+            }
+
+            div {
+              width: 170px;
+              height: 84px;
+              background: linear-gradient(180deg, #73EE71 0%, #0ACB63 100%);
+              border-radius: 0px 5px 5px 0px;
+
+              font-weight: 400;
+              font-size: 24px;
+              color: #FFFFFF;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+          }
+        }
       }
 
       .two-page {
@@ -456,7 +520,72 @@ function search() {
         }
 
       }
+      .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-right: 50px;
+            margin-top: 32px;
+            padding-left: 20px;
+            padding-right: 20px;
+          }
+
+          .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-right: 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;
+          }
+        }
+      }
     }
   }
 

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

@@ -29,7 +29,7 @@
           <div class="info-box">
             <p class="title">相近专业</p>
             <div class="info">
-              <div class="info-item" v-for="(item,index) in similar_list">
+              <div class="info-item"  v-for="(item,index) in similar_list" @click="toDetail(item)">
                 {{ item.name }}
               </div>
             </div>
@@ -169,9 +169,9 @@ function setCollection_data(){
   }
   console.log("entity.value",entity.value)
 }
-function detail() {
+function detail(id) {
   specialtyDetail({
-    id: param.id
+    id: id || param.id
   }).then(resp => {
     entity.value = resp.entity
     kaishe_list.value = resp.kaishe_list
@@ -253,7 +253,15 @@ function dialogBeforeClose() {
   senvenPage.value = false
   eightPage.value = false;
 }
-
+function toDetail(item){
+  // router.push({
+  //   path:'/xjc-integratedmachine/environment/pro_details_video',
+  //   query : {
+  //     id : item.id
+  //   }
+  // })
+  detail(item.id)
+}
 
 </script>
 

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

@@ -5,18 +5,18 @@
       <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">
+            <img v-if="onePage" src="@/assets/images/environment/major/01-active.png">
+            <img v-else src="@/assets/images/environment/major/01.png">
             本科-学科门类
           </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">
+            <img v-if="twoPage" src="@/assets/images/environment/major/02-active.png">
+            <img v-else src="@/assets/images/environment/major/02.png">
             专科-学科门类
           </div>
           <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
-            <img v-if="threePage" src="@/assets/images/environment/keys-search-h.png">
-            <img v-else src="@/assets/images/environment/keys-search.png">
+            <img v-if="threePage" src="@/assets/images/environment/major/03-active.png">
+            <img v-else src="@/assets/images/environment/major/03.png">
             关键字查询
           </div>
         </div>
@@ -46,30 +46,38 @@
           </div>
         </div>
         <div class="three-page" v-show="threePage">
-          <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>
-              </template>
-            </el-input>
-          </div>
-          <div class="result-box">
-            <div class="two-page-result">
-              <div v-for="(item,index) in data_list"
-                   :class="[item.selected?'item-result-box-active':'item-result-box']"
-                   @click="toDetail(item)">
-                <div v-html="item.name"></div>
+
+          <div class="input-component">
+            <div class="input-search">
+              <el-input
+                  v-model="form.name"
+                  style="width: 1392px;height: 84px"
+                  placeholder="请输入关键字"
+                  @input="byKeyword"
+              >
+                <template #suffix>
+                                    <span @click="clearResult"
+                                          style="font-size: 38px;color: #444040;margin-left: 37px;">
+                                      X
+                                    </span>
+                </template>
+              </el-input>
+              <div @click="byKeyword">
+                开始查询
               </div>
             </div>
           </div>
         </div>
+        <div class="result-box">
+          <div class="two-page-result">
+            <div v-for="(item,index) in data_list"
+                 :class="[item.selected?'item-result-box-active':'item-result-box']"
+                 @click="toDetail(item)">
+              <div v-html="item.name"></div>
+            </div>
+          </div>
+
+        </div>
 
       </div>
       <drag_component></drag_component>
@@ -187,8 +195,6 @@ function highlightKeywords(text, keywords) {
 }
 
 
-
-
 const showAreaChoose = ref(false)
 const showEducationlevel = ref(false)
 const showCharacteristic = ref(false)
@@ -293,6 +299,7 @@ specialty()
   z-index: 10;
   width: 100%;
   height: 1080px;
+
   .page-content {
     width: 100%;
     position: absolute;
@@ -357,6 +364,7 @@ specialty()
       border-radius: 35px 35px 35px 35px;
       margin-top: 13px;
       margin-right: 24px;
+
       .result-box {
         width: 1484px;
         height: 750px;
@@ -423,6 +431,7 @@ specialty()
           }
         }
       }
+
       .one-page {
       }
 
@@ -452,6 +461,7 @@ specialty()
             background: #F5F9FA;
             box-shadow: none;
           }
+
         }
 
         .result-box {
@@ -522,12 +532,13 @@ specialty()
         }
 
       }
+
       .three-page {
         display: flex;
         flex-direction: column;
         align-items: center;
 
-        .two-page-search {
+        .three-page-search {
           margin-top: 57px;
 
           ::v-deep .el-input__inner {
@@ -550,12 +561,57 @@ specialty()
           }
         }
 
+        .input-component {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .input-search {
+            display: flex;
+
+            margin-top: 57px;
+
+            ::v-deep .el-input__inner {
+              font-size: 24px;
+              margin-left: 34px;
+            }
+
+            ::v-deep .el-input__suffix {
+              font-size: 100px;
+              width: 100px;
+              height: 100px;
+
+            }
+
+            ::v-deep .el-input__wrapper {
+              background: #E2E2E2;
+              box-shadow: none;
+              height: 84px;
+              width: 1484px;
+            }
+
+            div {
+              width: 170px;
+              height: 84px;
+              background: linear-gradient(180deg, #73EE71 0%, #0ACB63 100%);
+              border-radius: 0px 5px 5px 0px;
+
+              font-weight: 400;
+              font-size: 24px;
+              color: #FFFFFF;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+          }
+        }
+
         .result-box {
           width: 1484px;
           height: 750px;
           overflow: auto;
 
-          .two-page-result {
+          .three-page-result {
             display: flex;
             flex-wrap: wrap;
             justify-content: space-between;
@@ -615,6 +671,7 @@ specialty()
               padding-right: 20px;
             }
           }
+
         }
 
       }
@@ -636,7 +693,7 @@ specialty()
   p {
     min-width: 120px;
     padding-left: 10px;
-    padding-right:10px;
+    padding-right: 10px;
     height: 60px;
     margin-left: 10px;
     margin-right: 10px;
@@ -649,7 +706,8 @@ specialty()
     border-radius: 10px;
   }
 }
-.dialog-box2{
+
+.dialog-box2 {
   display: flex;
   justify-content: space-around;
 }

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

@@ -37,18 +37,37 @@
         </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>
-              </template>
-            </el-input>
+<!--            <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>-->
+<!--              </template>-->
+<!--            </el-input>-->
+            <div class="input-component">
+              <div class="input-search">
+                <el-input
+                    v-model="form.name"
+                    style="width: 1392px;height: 84px"
+                    placeholder="请输入你要访谈的职业"
+                    @input="byKeyword"
+                >
+                  <template #suffix>
+                                    <span @click="clearResult" style="font-size: 38px;color: #444040;margin-left: 37px;">
+                                      X
+                                    </span>
+                  </template>
+                </el-input>
+                <div @click="byKeyword">
+                  开始查询
+                </div>
+              </div>
+            </div>
           </div>
           <div class="result-box">
             <div class="two-page-result">
@@ -59,6 +78,9 @@
               </div>
             </div>
           </div>
+<!--          <div class="search-btn">-->
+<!--            <img @click="byKeyword" style="z-index:10" src="@/assets/images/environment/search-btn.png">-->
+<!--          </div>-->
         </div>
       </div>
       <drag_component></drag_component>
@@ -262,6 +284,10 @@ function search() {
     query: form.value
   })
 }
+function clearResult(item) {
+  form.value.name = '';
+  byKeyword();
+}
 
 </script>
 
@@ -375,28 +401,28 @@ function search() {
         flex-direction: column;
         align-items: center;
 
-        .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;
-
-          }
-
-          ::v-deep .el-input__wrapper {
-            background: #F5F9FA;
-            box-shadow: none;
-          }
-        }
+        //.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;
+        //
+        //  }
+        //
+        //  ::v-deep .el-input__wrapper {
+        //    background: #F5F9FA;
+        //    box-shadow: none;
+        //  }
+        //}
 
         .result-box {
           width: 1484px;
@@ -464,7 +490,50 @@ function search() {
             }
           }
         }
+        .input-component {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .input-search {
+            display: flex;
+
+            margin-top: 57px;
+
+            ::v-deep .el-input__inner {
+              font-size: 24px;
+              margin-left: 34px;
+            }
+
+            ::v-deep .el-input__suffix {
+              font-size: 100px;
+              width: 100px;
+              height: 100px;
+
+            }
+
+            ::v-deep .el-input__wrapper {
+              background: #E2E2E2;
+              box-shadow: none;
+              height: 84px;
+              width: 1484px;
+            }
+
+            div{
+              width: 170px;
+              height: 84px;
+              background: linear-gradient( 180deg, #73EE71 0%, #0ACB63 100%);
+              border-radius: 0px 5px 5px 0px;
 
+              font-weight: 400;
+              font-size: 24px;
+              color: #FFFFFF;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+          }
+        }
       }
 
     }
@@ -479,7 +548,12 @@ function search() {
 
   div {
     //border: 1px solid;
-
+    //width: 244px;
+    //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;
   }
 
   p {
@@ -495,12 +569,15 @@ function search() {
     color: #333333;
     text-align: center;
     line-height: 60px;
-    border-radius: 10px;
+    //border-radius: 10px;
   }
 }
 .dialog-box2{
      display: flex;
      justify-content: space-around;
 }
+.el-dialog{
+  border-radius: 35px 35px 35px 35px !important;
+}
 </style>
 

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

@@ -21,7 +21,7 @@
         </div>
       </div>
     </div>
-    <drag_component></drag_component>
+<!--    <drag_component></drag_component>-->
   </div>
 
 </template>

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

@@ -1,45 +1,308 @@
-<template>
-    学科评估报告2<br>
+<!--<template>-->
+<!--    学科评估报告2<br>-->
+
+<!--    本一级学科中......<br>-->
+
+<!--    <div v-for="(item,index) in evaluationresults_list">-->
+<!--        {{item.university}}-{{item.univercode}}=={{item.result}}&#45;&#45;-->
+<!--        <div @click="jumpToPro_details_video(item)">-->
+<!--            详情>>-->
+<!--        </div>-->
+<!--    </div>-->
+<!--</template>-->
+
+<!--<script setup>-->
+
+<!--    import {evaluationresults} from '@/api/xjc-integratedmachine/environment/tscareer.js'-->
+<!--    const router = useRouter()-->
+<!--    const route = useRoute()-->
 
-    本一级学科中......<br>
+<!--    const param = route.query-->
 
-    <div v-for="(item,index) in evaluationresults_list">
-        {{item.university}}-{{item.univercode}}=={{item.result}}--
-        <div @click="jumpToPro_details_video(item)">
-            详情>>
+<!--    const evaluationresults_list = ref([])-->
+<!--    function results(){-->
+<!--        evaluationresults({-->
+<!--            id : param.id-->
+<!--        }).then(resp =>{-->
+<!--            evaluationresults_list.value = resp.evaluationresults-->
+<!--        })-->
+<!--    }-->
+<!--    function jumpToPro_details_video(item){-->
+<!--        console.log("-&#45;&#45;&#45;&#45;&#45;&#45;",item.id)-->
+<!--        router.push({-->
+<!--            path : '/xjc-integratedmachine/environment/university_details_video',-->
+<!--            query :{-->
+<!--                id : item.id-->
+<!--            }-->
+<!--        })-->
+<!--    }-->
+
+<!--    results()-->
+<!--</script>-->
+
+<!--<style scoped>-->
+
+<!--</style>-->
+<template>
+  <div class="university_details_video">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <div class="box-content">
+          <p class="title-info">
+            本一级学科中，全国具有“博士授权”的高校共48所，本次参评38所;部分具有“硕士授权”的高校也参加了评估;参评高校共计84所。(注:评估结果相同的高校排序不分先后，按学校代码排列)</p>
+          <div class="school-box" v-for="(item,index) in evaluationresults_list" :key="index"
+               @click="jumpToPro_details_video(item)">
+            <img src="@/assets/images/environment/contrast.png"/>
+            <div class="right-box">
+              <div class="right-top">
+                <div class="right-top-title">{{ item.university }}</div>
+                <div class="right-top-details">详情
+                  <img style="width: 24px;height: 24px" src="@/assets/images/environment/details_icon.png"/>
+                </div>
+              </div>
+              <p class="info">学校编码：{{item.universitycode }}</p>
+              <p class="info">学科得分： <span class="info-result" :style="{ color: computedColor(item.result)  }">{{item.result}}</span></p>
+              <!--              <p class="info"><span>创建时间:</span><span>{{-->
+              <!--                  item.ctime-->
+              <!--                }}</span><span style="margin-left: 46px">所在地区:</span><span>{{ item.areaname }}</span></p>-->
+              <!--              <p class="info"><span>院校隶属:</span><span>{{ item.subjection }}</span>-->
+              <!--                <span style="margin-left: 46px">院校类型:</span><span>-->
+              <!--                <dict-tag :options="school_category"-->
+              <!--                          :value="item.categoryid"/></span>-->
+              <!--              </p>-->
+            </div>
+          </div>
+          <!--          <div v-for="(item,index) in evaluationresults_list">&ndash;&gt;-->
+          <!--            {{ item.university }}-{{ item.univercode }}=={{ item.result }}-->
+          <!--            <div @click="jumpToPro_details_video(item)">-->
+          <!--              详情>>-->
+          <!--            </div>-->
+          <!--          </div>-->
         </div>
+      </div>
+      <drag_component></drag_component>
     </div>
-</template>
+  </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 {universityList} from '@/api/xjc-integratedmachine/environment/university.js'
+import {ref} from "vue";
+import {evaluationresults} from '@/api/xjc-integratedmachine/environment/tscareer.js'
+
+const router = useRouter()
+const route = useRoute()
+const headinfo = ref({})
+const param = route.query
+const {proxy} = getCurrentInstance()
+const {school_category} = proxy.useDict('school_category')
+import {rankinglist} from '@/api/xjc-integratedmachine/environment/tscareer.js'
+
+const total = ref(0)
+
+
+const evaluationresults_list = ref([])
+
+
+onMounted(() => {
+  setHeadinfo()
+})
+
+function setHeadinfo() {
+  headinfo.value = {
+    title: '高校列表',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl: '/xjc-integratedmachine/environment/query_universitydb_conditions',
+    homeUrl: '/xjc-integratedmachine/environment/index',
+
+  }
+}
+
 
-    import {evaluationresults} from '@/api/xjc-integratedmachine/environment/tscareer.js'
-    const router = useRouter()
-    const route = useRoute()
+const data_list = ref([])
 
-    const param = route.query
+function list() {
+  rankinglist().then(resp => {
+    console.log("##", resp)
+    data_list.value = resp.data_list.rows
+  })
+}
 
-    const evaluationresults_list = ref([])
-    function results(){
-        evaluationresults({
-            id : param.id
-        }).then(resp =>{
-            evaluationresults_list.value = resp.evaluationresults
-        })
+list()
+
+function results() {
+  evaluationresults({
+    id: param.id
+  }).then(resp => {
+    evaluationresults_list.value = resp.evaluationresults
+  })
+}
+
+function jumpToPro_details_video(item) {
+  console.log("-&#45;&#45;&#45;&#45;&#45;&#45;", item.id)
+  router.push({
+    path: '/xjc-integratedmachine/environment/university_details_video',
+    query: {
+      id: item.id
     }
-    function jumpToPro_details_video(item){
-        console.log("-------",item.id)
-        router.push({
-            path : '/xjc-integratedmachine/environment/university_details_video',
-            query :{
-                id : item.id
+  })
+}
+// 定义一个计算属性来计算颜色
+function computedColor(devisionResult) {
+  switch (devisionResult) {
+    case 'A+':
+    case 'A':
+    case 'A-':
+      return '#14CB8B'; // 当devisionResult为“中等”时返回蓝色
+    case 'B+':
+    case 'B':
+    case 'B-':
+      return '#3A57F8'; // 当devisionResult为“中等”时返回蓝色
+    case 'C+':
+    case 'C':
+    case 'C-':
+      return '#FF7D59'; // 当devisionResult为“中等”时返回蓝色
+  }
+}
+results()
+</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%;
+    height: 922px;
+    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;
+      flex-direction: column;
+
+      .box-content {
+        width: 1832px;
+        height: 922px;
+        display: flex;
+        padding-left: 20px;
+        padding-top: 30px;
+        padding-bottom: 55px;
+        //justify-content: space-between;
+        //margin-left: 41px;
+        //margin-right: 41px;
+        align-items: center;
+        flex-wrap: wrap;
+        overflow: auto;
+        //border: 1px solid red;
+        .school-box {
+          width: 570px;
+          height: 204px;
+          background: #FFFFFF;
+          margin-left: 20px;
+          box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.09);
+          border-radius: 5px 5px 5px 5px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 45px;
+
+          img {
+            width: 154px;
+            height: 154px;
+            //border: 1px solid;
+            margin-left: 13px;
+          }
+
+          .right-box {
+            width: 384px;
+            height: 204px;
+            margin-left: 35px;
+            //border: 1px solid;
+            .right-top {
+              height: 90px;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              border-bottom: 1px solid #E6E6E6;
+
+              .right-top-title {
+                font-weight: bold;
+                font-size: 32px;
+                color: #1E410E;
+                line-height: 24px;
+              }
+
+              .right-top-details {
+                font-weight: 400;
+                font-size: 20px;
+                color: #515F6A;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                margin-right: 30px;
+              }
             }
-        })
-    }
 
-    results()
-</script>
+            .info {
+              margin-top: 14px;
+              font-weight: 400;
+              font-size: 20px;
+              color: #333333;
+              line-height: 25px;
+              display: flex;
+
+              span {
+                margin-left: 4px;
+              }
+            }
+            .info-result{
+              font-weight: bold;
+              font-size: 48px;
+              color: #14CB8B;
+            }
+          }
+        }
+
+        .title-info {
+          font-weight: bold;
+          font-size: 32px;
+          color: #333333;
+          line-height: 52px;
+          text-indent: 2em;
+          //text-align: center;
+          margin-left: 57px;
+          margin-right: 57px;
+          margin-bottom: 30px;
+        }
+      }
+    }
+  }
+}
 
-<style scoped>
 
 </style>
+

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

@@ -6,8 +6,11 @@
         <p class="title">高中学科</p>
         <div class="two-page-result">
           <div v-for="(item,index) in subject"
-               :class="[item.selected?'item-result-box-active':'item-result-box']"
-               @click="detail(item.value)">
+               :class="{
+      'item-result-box-active': activeIndex === index,
+      'item-result-box': activeIndex !== index
+    }"
+               @click="detail(item.value,index)">
             <div v-html="item.value"></div>
           </div>
         </div>
@@ -21,7 +24,7 @@
         </div>
       </div>
     </div>
-    <drag_component></drag_component>
+<!--    <drag_component></drag_component>-->
   </div>
 
 </template>
@@ -30,37 +33,46 @@
 import {onMounted} from "vue";
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+
 const headinfo = ref({})
 
-function setHeadinfo(){
+function setHeadinfo() {
   headinfo.value = {
     title: '学科适合专业',
     user: {
       avatar: '头像路径',
       nickName: '张三'
     },
-    backUrl : '/xjc-integratedmachine/wakeup/career_recognize/index'
+    backUrl: '/xjc-integratedmachine/wakeup/career_recognize/index'
   }
 }
+
 import {subjectspecialdetail} from '@/api/xjc-integratedmachine/environment/tscareer.js'
+
 const router = useRouter()
 const {proxy} = getCurrentInstance()
 const {subject} = proxy.useDict('subject')
-
+const activeIndex = ref(null)
 const data_list = ref([])
-function detail(data) {
+
+function detail(data, index) {
+  setActive(index)
   subjectspecialdetail({
-    id : data
-  }).then(resp =>{
+    id: data
+  }).then(resp => {
     data_list.value = resp.subjectspecialdetail
   })
 }
 
-function jumpToPro_details_video(item){
+function setActive(index) {
+  activeIndex.value = index; // 设置当前被激活的按钮的索引
+}
+
+function jumpToPro_details_video(item) {
   router.push({
-    path : '/xjc-integratedmachine/environment/pro_details_video',
-    query :{
-      id : item.majorid
+    path: '/xjc-integratedmachine/environment/pro_details_video',
+    query: {
+      id: item.majorid
     }
   })
 }
@@ -72,16 +84,18 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-p{
+p {
   margin: 0;
   padding: 0;
 }
-.development_stage{
+
+.development_stage {
   background: url('@/assets/images/login/login-home-background.png') no-repeat;
   background-size: 1920px 1080px;
-  z-index:10;
+  z-index: 10;
   width: 100%;
   height: 1080px;
+
   .page-content {
     width: 100%;
     height: 980px;
@@ -89,7 +103,8 @@ p{
     top: 100px;
     bottom: 0;
   }
-  .page-box{
+
+  .page-box {
     width: 1832px;
     height: 910px;
     background: #FFFFFF;
@@ -99,6 +114,7 @@ p{
     position: relative;
     overflow: auto;
     padding-bottom: 30px;
+
     .title {
       height: 40px;
       border-left: 8px #8CE349 solid;
@@ -111,6 +127,7 @@ p{
       padding-left: 11px;
     }
   }
+
   .two-page-result {
     //width: 1276px;
     //height: 337px;
@@ -118,16 +135,15 @@ p{
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    .item-result-box-active {
+
+    .item-result-box {
       min-width: 244px;
       height: 92px;
-      background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
-      box-shadow: inset 0px -2px 7px 0px #1E410E;
+      background: #E0EEF4;
       border-radius: 5px 5px 5px 5px;
-      border: 1px solid #A2F57F;
       font-weight: 400;
       font-size: 30px;
-      color: #0DE6A1;
+      color: #000000;
       line-height: 90px;
       text-align: center;
       margin-left: 50px;
@@ -137,11 +153,13 @@ p{
       padding-right: 20px;
     }
 
-    .item-result-box {
+    .item-result-box:hover {
       min-width: 244px;
       height: 92px;
-      background: #E0EEF4;
+      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;
@@ -154,7 +172,7 @@ p{
       padding-right: 20px;
     }
 
-    .item-result-box:hover {
+    .item-result-box-active {
       min-width: 244px;
       height: 92px;
       background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
@@ -167,6 +185,7 @@ p{
       line-height: 90px;
       text-align: center;
       margin-left: 50px;
+      margin-right: 50px;
       margin-top: 32px;
       padding-left: 20px;
       padding-right: 20px;

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

@@ -816,9 +816,9 @@ p, div {
     line-height: 40px;
     display: flex;
     justify-content: center;
-    align-items: center;
+    //align-items: center;
     margin-bottom: 21px;
-    margin-top: 10px;
+    margin-top: 30px;
     .select-box {
       width: 300px;
       height: 90px;

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

@@ -22,6 +22,7 @@
                           :value="item.categoryid"/></span>
               </p>
             </div>
+
           </div>
         </div>
       </div>

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

@@ -1,19 +1,109 @@
 <template>
-    高校排名查询1<br>
-    软科中国大学排名..........................
-    <el-button @click="jumpTo">点击查询</el-button>
+  <div class="university_ranking_query1">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-box">
+        <div class="content">
+          软科中国大学排名(Best Chinese Universities Ranking)，
+          前称软科中国最好大学排名，是由上海软科教育信息咨询有限公司(简称软科)发布的年度中国大学排名，
+          首次发布于2015年。“软科中国大学排名”的评价体系源自自主研发的可视化评价专利技术，
+          依托“大学360度数据监测平台”的大数据支持，
+          设置办学层次、学科水平、办学资源、师资规模与结构、人才培养、科学研究、服务社会、高端人才、重大项目与成果、国际竞争力共十个评价模块，
+          细分36个评价维度，内嵌104项评价指标，涉及320个评价变量，是对中国大学办学水平的立体化监测式评价。
+        </div>
+        <div class="bottom-box">
+          <img class="bottom-btn" @click="jumpTo" style="z-index:10;  width: 244px; height: 100px;" src="@/assets/images/environment/search-btn.png">
+        </div>
+      </div>
+    </div>
+    <!--    <drag_component></drag_component>-->
+  </div>
 </template>
 
 <script setup>
-    const router = useRouter()
-    function jumpTo() {
-        router.push({
-            path : '/xjc-integratedmachine/environment/university_ranking_query2'
-        })
-    }
+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";
 
+function setHeadinfo() {
+  headinfo.value = {
+    title: '高校排名查询',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl: '/index',
+    backUrlUse: true,
+  }
+}
+
+function jumpTo() {
+  router.push({
+    path: '/xjc-integratedmachine/environment/university_ranking_query2'
+  })
+}
+onMounted(()=>{
+  setHeadinfo();
+})
 </script>
 
-<style scoped>
+
+<style scoped lang="scss">
+.university_ranking_query1 {
+  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;
+
+    div {
+      width: 1600px;
+      margin: 0 auto;
+      //border: 1px solid;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+
+    .page-box {
+      width: 1832px;
+      height: 910px;
+      background: #FFFFFF;
+      border-radius: 35px 35px 35px 35px;
+      margin: 13px auto 0;
+      padding-top: 25px;
+      position: relative;
+      padding-bottom: 30px;
+
+      .content {
+        text-indent: 2em;
+        font-size: 30px;
+        color: #333333;
+        line-height: 52px;
+        margin-top: 100px;
+      }
+    }
+    .bottom-box{
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      .bottom-btn {
+        margin-top: 420px;
+      }
+    }
+
+  }
+}
+
 
 </style>
+

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

@@ -1,32 +1,234 @@
 <template>
-    高校排名查询2<br>
-    <div v-for="(item,index) in data_list">
-        {{item.logo}}--{{item.schoolname}}--
-        创建时间:{{item.ctime}},所在地区{{item.areaname}},院校隶属{{item.subjection}},院校类型:<dict-tag :options="school_category" :value="item.categoryid"/>
+  <div class="university_details_video">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <div class="box-content">
+          <div class="school-box" v-for="(item,index) in data_list" :key="index" @click="handleDetail(item)">
+            <img src="@/assets/images/environment/contrast.png"/>
+            <div class="right-box">
+              <div class="right-top">
+                <div class="right-top-title">{{ item.schoolname }}</div>
+                <div class="right-top-details">详情
+                  <img style="width: 24px;height: 24px" src="@/assets/images/environment/details_icon.png"/>
+                </div>
+              </div>
+<!--              <p class="info">学校编码：</p>-->
+<!--              <p class="info">学科得分：</p>-->
+              <p class="info"><span>创建时间:</span><span>{{
+                  item.ctime
+                }}</span><span style="margin-left: 46px">所在地区:</span><span>{{ item.areaname }}</span></p>
+              <p class="info"><span>院校隶属:</span><span>{{ item.subjection }}</span>
+                <span style="margin-left: 46px">院校类型:</span><span>
+                <dict-tag :options="school_category"
+                          :value="item.categoryid"/></span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <drag_component></drag_component>
     </div>
-
+  </div>
 
 </template>
-
 <script setup>
-    const {proxy} = getCurrentInstance()
-    const {school_category} = proxy.useDict('school_category')
-    import {rankinglist} from '@/api/xjc-integratedmachine/environment/tscareer.js'
-    const router = useRouter()
-    const route = useRoute()
-
-
-    const data_list = ref([])
-    function list() {
-        rankinglist().then(resp =>{
-            console.log("##",resp)
-            data_list.value = resp.data_list.rows
-        })
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {universityList} from '@/api/xjc-integratedmachine/environment/university.js'
+import {ref} from "vue";
+
+const router = useRouter()
+const route = useRoute()
+const headinfo = ref({})
+const params = route.query
+const {proxy} = getCurrentInstance()
+const {school_category} = proxy.useDict('school_category')
+import {rankinglist} from '@/api/xjc-integratedmachine/environment/tscareer.js'
+const total = ref(0)
+const tableData = ref(null)
+
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    areaid: params.areaid,
+    educationlevel: params.educationlevel,
+    characteristic: params.characteristic,
+  },
+})
+const {queryParams} = toRefs(data)
+
+
+function getList() {
+  universityList(proxy.addDateRange(queryParams.value)).then(resp => {
+    tableData.value = resp.data.rows
+    total.value = resp.data.total
+  })
+}
+
+function handleDetail(row) {
+  router.push({
+    path: '/xjc-integratedmachine/environment/university_details_video',
+    query: {
+      id: row.id,
+      name: row.name,
+      oldid: row.oldid,
     }
-    list()
+  })
+}
+
+onMounted(() => {
+  setHeadinfo()
+})
+getList()
+
+function setHeadinfo() {
+  headinfo.value = {
+    title: '中国大学百强榜',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl: '/xjc-integratedmachine/environment/query_universitydb_conditions',
+    homeUrl: '/xjc-integratedmachine/environment/index',
+  }
+}
+
+
+
+const data_list = ref([])
+function list() {
+  rankinglist().then(resp =>{
+    console.log("##",resp)
+    data_list.value = resp.data_list.rows
+  })
+}
+list()
 
 </script>
 
-<style scoped>
+<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%;
+    height: 922px;
+    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;
+      flex-direction: column;
+      .box-content{
+        width: 1832px;
+        height: 922px;
+        display: flex;
+        padding-left: 20px;
+        padding-top: 30px;
+        padding-bottom: 55px;
+        //justify-content: space-between;
+        //margin-left: 41px;
+        //margin-right: 41px;
+        align-items: center;
+        flex-wrap: wrap;
+        overflow: auto;
+        //border: 1px solid red;
+        .school-box {
+          width: 570px;
+          height: 204px;
+          background: #FFFFFF;
+          margin-left: 20px;
+          box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.09);
+          border-radius: 5px 5px 5px 5px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 45px;
+          img {
+            width: 154px;
+            height: 154px;
+            //border: 1px solid;
+            margin-left: 13px;
+          }
+
+          .right-box {
+            width: 384px;
+            height: 204px;
+            //border: 1px solid;
+
+            .right-top {
+              height: 90px;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              border-bottom: 1px solid #E6E6E6;
+
+              .right-top-title {
+                font-weight: bold;
+                font-size: 32px;
+                color: #1E410E;
+                line-height: 24px;
+              }
+
+              .right-top-details {
+                font-weight: 400;
+                font-size: 20px;
+                color: #515F6A;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                margin-right: 30px;
+              }
+            }
+
+            .info {
+              margin-top: 14px;
+              font-weight: 400;
+              font-size: 20px;
+              color: #333333;
+              line-height: 25px;
+              display: flex;
+              span {
+                margin-left: 4px;
+              }
+            }
+          }
+        }
+        .title-info{
+          font-weight: bold;
+          font-size: 32px;
+          color: #333333;
+          line-height: 52px;
+          text-indent: 2em;
+          //text-align: center;
+          margin-left: 57px;
+          margin-right: 57px;
+          margin-bottom: 30px;
+        }
+      }
+    }
+  }
+}
+
 
 </style>
+

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

@@ -46,7 +46,7 @@
             <p class="title">工科基地</p>
             <div class="info"  v-html="data_list[4].content"></div>
           </div>
-          <div class="one-page" v-show="fivePage">
+          <div class="one-page" v-show="sixPage">
             <p class="title">珠峰计划</p>
             <div class="info"  v-html="data_list[5].content"></div>
           </div>
@@ -91,8 +91,6 @@ function setHeadinfo(){
     },
     backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
     homeUrl:'/xjc-integratedmachine/environment/index',
-    contrast:true,
-    contrastType:'major'
   }
 }
 
@@ -174,6 +172,14 @@ const showPage = (val) => {
     threePage.value = false;
     fourPage.value = false;
     fivePage.value = true;
+    sixPage.value = false;
+  }else if (val === 6) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = true;
   }
 }
 detail()
@@ -241,7 +247,7 @@ p, div {
 
   .bottom-content {
     //margin-top: 10px;
-    border: 1px solid;
+    //border: 1px solid;
     height: 922px;
     .tab-box {
       display: flex;

vite.config.js

@@ -47,7 +47,9 @@ export default defineConfig(({ mode, command }) => {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
           target: 'http://localhost:8080',
-          // target: 'http://192.168.3.169:8080',//临时11
+          // target: 'http://test.chuiinxgk.com',//服务器
+          // target: 'http://192.168.3.100:8080',//服务器
+
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }