[feat][ai生涯访谈][聊天静态页面]

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

@@ -0,0 +1,23 @@
+import request from '@/utils/request'
+
+export function getHotOccupationList(data) {
+    return request({
+        url: '/ai/career/hotOccupation/list',
+        method: 'get',
+        params : data
+    })
+}
+export function getOccupationList(data) {
+    return request({
+        url: '/ai/career/occupation/list',
+        method: 'get',
+        data : data
+    })
+}
+export function getOccupationByKeyword(data) {
+    return request({
+        url: '/integratedmachine/tsytj/occupation/getOccupationByKeyword',
+        method: 'post',
+        data : data
+    })
+}

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

@@ -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,30 +38,15 @@
 
                         <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="toChatPage(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="content">
                                 <div class="search-item">计算机软件工程技术人员</div>
                                 <div class="search-item">教师</div>
                                 <div class="search-item">心理咨询师</div>
@@ -94,7 +79,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} from "@/api/xjc-integratedmachine/environment/ai-career.js";
 
     const router = useRouter()
 
@@ -104,6 +89,8 @@
 
     // 职业列表
     const occupationList = ref([])
+    // 热门职业列表
+    let hotOccupationList = ref([])
 
     function setHeadinfo(){
         headinfo.value = {
@@ -146,7 +133,7 @@
         }
     }
 
-    function toDetail(row) {
+    function toChatPage(row) {
         router.push({
             path: '/xjc-integratedmachine/environment/ai_career_interview_chat',
             query: {
@@ -155,9 +142,15 @@
         })
     }
 
+    function getHotOccupation(){
+        getHotOccupationList().then(resp => {
+            hotOccupationList.value = resp.rows
+        })
+    }
 
     onMounted(() => {
         setHeadinfo()
+        getHotOccupation()
     })
 
 </script>
@@ -320,6 +313,13 @@
             text-transform: none;
 
         }
+        .content{
+            display: flex;
+            flex-wrap:wrap;
+            margin-top: 11px;
+            margin-left: 119px;
+            margin-right: 91px
+        }
     }
 
     .search-item{
@@ -338,5 +338,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

@@ -101,6 +101,9 @@
                     <div @click="sendMessage" :disabled="isSending" type="primary">发送</div>
                 </div>
             </div>
+            <div class="iat-box">
+                <img>
+            </div>
         </div>
     </div>
 </template>
@@ -182,12 +185,14 @@
     }
 
     function sayHi() {
-        const botMsg = {
-            isUser: false,
-            content: '你好，我是来帮助你进行学习规划、选科辅导以及志愿填报的生涯教育专家。如果你有关于这些方面的问题，欢迎随时向我咨询！', // 增量填充
-            isTyping: false, // 显示加载动画
+ /*       const botMsg = {
+            isUser: true,
+            content: '',
+            isTyping: false
         }
-        chatRecordList.value.push(botMsg)
+        chatRecordList.value.push(botMsg);*/
+
+        sendRequest('你是谁？')
     }
 
     const sendMessage = () => {
@@ -199,13 +204,13 @@
 
     const sendRequest = async(message) => {
         // 用户信息
-        const userMessage = {
+        const userMsg = {
             isUser: true,
             content: message,
             isTyping: false
         }
         // 消息加入聊天记录
-        chatRecordList.value.push(userMessage)
+        chatRecordList.value.push(userMsg)
         const botMsg = {
             isUser: false,
             content: '', // 增量填充
@@ -294,7 +299,11 @@
         }
     }
 
+    // 存储职业
+
     /* 语音识别 ↓*/
+    // 语音识别按钮状态
+    let iatButtonFlag = ref(false)
     // 控制录音弹窗
     let iatVoiceOpen = false
     // 是否开始录音
@@ -928,7 +937,7 @@
         .input-search {
             display: flex;
 
-            margin-top: 57px;
+            /*margin-top: 57px;*/
 
             ::v-deep .el-input__inner {
                 font-size: 24px;