|
|
@@ -0,0 +1,303 @@
|
|
|
+<template>
|
|
|
+ <div class="counsel-container">
|
|
|
+ <div class="counsel-header">
|
|
|
+ <span>会话</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--右侧-->
|
|
|
+ <div v-for="(item, index) in questionList" :key="index">
|
|
|
+ <!--右侧-->
|
|
|
+ <div class="counsel-right flex">
|
|
|
+ <div class="content">
|
|
|
+ <span>{{ item.content }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="header-img">
|
|
|
+ <img src="/static/images/aiModel/default.png" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--左侧-->
|
|
|
+ <div class="counsel-left flex" v-if="searchauxiliaryList.length == 0">
|
|
|
+ <div class="header-img">
|
|
|
+ <img src="/static/images/aiModel/kefu.png" />
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <span class="tit">参考意见</span>
|
|
|
+ <span>您好，暂未找到符合的内容，可以试试别的关键词</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="counsel-left flex"
|
|
|
+ v-for="(item, index) in searchauxiliaryList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="header-img">
|
|
|
+ <img src="/static/images/aiModel/kefu.png" />
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <span class="tit">参考意见:</span>
|
|
|
+ <span>{{ item.content }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchBtom">
|
|
|
+ <div v-if="spdisabled">正在识别...</div>
|
|
|
+ <i
|
|
|
+ class="el-icon-microphone icon"
|
|
|
+ :disabled="spdisabled"
|
|
|
+ title="按住说话"
|
|
|
+ @click="voice"
|
|
|
+ ></i>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="sendContent"
|
|
|
+ @input="change_witch"
|
|
|
+ class="search"
|
|
|
+ placeholder="请输入问题"
|
|
|
+ ></el-input>
|
|
|
+ <i
|
|
|
+ class="el-icon-s-promotion icon sendIcon"
|
|
|
+ :class="sendContent ? 'ok' : 'no'"
|
|
|
+ @click="send"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+let recognition = null;
|
|
|
+export default {
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ user: {},
|
|
|
+ caseType: 0,
|
|
|
+ questionList: [
|
|
|
+ { type: 0, content: "-s--" },
|
|
|
+ { type: 0, content: "---d" },
|
|
|
+ ],
|
|
|
+ auxiliaryList: [], // 随机数据
|
|
|
+ searchauxiliaryList: [{ relatedName: "asncksdnclkdcndkn" }],
|
|
|
+ sendContent: "aa",
|
|
|
+ spdisabled: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ // if (this.caseArray.length > 0) {
|
|
|
+ // this.caseType = this.caseArray[0].k;
|
|
|
+ // this.initLoadAuxiliary();
|
|
|
+ // }
|
|
|
+ this.send();
|
|
|
+ console.log("========", this.questionList);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initSpeech() {
|
|
|
+ // 检查浏览器是否支持SpeechRecognition
|
|
|
+ const SpeechRecognition =
|
|
|
+ window.SpeechRecognition || window.webkitSpeechRecognition;
|
|
|
+ if (!SpeechRecognition) {
|
|
|
+ alert(
|
|
|
+ "你的浏览器不支持语音识别功能，请使用支持的浏览器，例如Google Chrome。"
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ recognition = new SpeechRecognition();
|
|
|
+ recognition.lang = "zh-CN"; // 设置识别语言为中文
|
|
|
+ recognition.interimResults = false; // 不返回临时结果
|
|
|
+ recognition.maxAlternatives = 1; // 返回的识别结果数量
|
|
|
+
|
|
|
+ recognition.onstart = () => {
|
|
|
+ console.log("开始语音识别...");
|
|
|
+ this.spdisabled = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ recognition.onresult = (event) => {
|
|
|
+ this.sendContent = event.results[0][0].transcript;
|
|
|
+ this.sendToBackend(); // 将识别结果发送到后台
|
|
|
+ };
|
|
|
+
|
|
|
+ recognition.onerror = (event) => {
|
|
|
+ alert("语音识别出错: " + event.error);
|
|
|
+ };
|
|
|
+
|
|
|
+ recognition.onend = () => {
|
|
|
+ console.log("语音识别结束");
|
|
|
+ this.spdisabled = false;
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ send() {
|
|
|
+ // 咨询问题
|
|
|
+ if (this.sendContent) {
|
|
|
+ this.questionList.push({ content: this.sendContent });
|
|
|
+ this.sendToBackend(this.sendContent);
|
|
|
+ this.sendContent = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ voice() {
|
|
|
+ if (!recognition) this.initSpeech();
|
|
|
+ recognition.start(); // 开始语音识别
|
|
|
+ },
|
|
|
+ sendToBackend(msg) {
|
|
|
+ fetch(`${window.aiURI}/msg`, {
|
|
|
+ method: "POST",
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "application/json",
|
|
|
+ // 'Content-Type': 'application/json;charset=UTF-8',
|
|
|
+ // "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
|
|
|
+ "Access-Control-Allow-Origin": "*",
|
|
|
+ },
|
|
|
+ body: JSON.stringify({ msg }),
|
|
|
+ mode: "no-cors",
|
|
|
+ })
|
|
|
+ .then((response) => response.json())
|
|
|
+ .then((data) => {
|
|
|
+ console.log("服务器响应:", data);
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error("发送到后台时发生错误:", error);
|
|
|
+ alert("发送到后台时发生错误:", error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // onSearchTune(k) {
|
|
|
+ // this.caseType = k;
|
|
|
+ // this.initLoadAuxiliary();
|
|
|
+ // },
|
|
|
+ // initLoadAuxiliary() {
|
|
|
+ // // 随机智能辅调
|
|
|
+ // this.auxiliaryList = [];
|
|
|
+ // General.News.queryAutoConsulting({
|
|
|
+ // caseType: this.caseType,
|
|
|
+ // limit: 5,
|
|
|
+ // }).then((res) => {
|
|
|
+ // const { status, data } = res.data;
|
|
|
+ // if (status == 0) {
|
|
|
+ // this.auxiliaryList = data;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // initKeywordsLoadAuxiliary(keywords) {
|
|
|
+ // // 搜索关键词查询
|
|
|
+ // this.searchauxiliaryList = [];
|
|
|
+ // General.News.queryAutoConsulting({
|
|
|
+ // keyWord: keywords,
|
|
|
+ // limit: 5,
|
|
|
+ // }).then((res) => {
|
|
|
+ // const { status, data } = res.data;
|
|
|
+ // if (status == 0) {
|
|
|
+ // this.searchauxiliaryList = data;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.flex {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+//智能咨询
|
|
|
+.counsel-container {
|
|
|
+ padding: 15px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ background: #222;
|
|
|
+ .counsel-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ border-bottom: 1px solid #1f4099;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ color: #999999;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ .header-img {
|
|
|
+ // flex: 0 0 50px;
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 50px;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 50px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ // flex: 1;
|
|
|
+ margin-left: 20px;
|
|
|
+ max-width: calc(100% - 100px);
|
|
|
+ padding: 5px 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #323f96;
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ display: block;
|
|
|
+ color: #f99f2b;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .counsel-left {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ align-items: flex-start;
|
|
|
+ .content {
|
|
|
+ background: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .counsel-right {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: flex-start;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.searchBtom {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ height: 70px;
|
|
|
+ background: #44444e !important;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.12);
|
|
|
+ box-shadow: #0003 0 0 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ padding-top: 15px;
|
|
|
+ .search {
|
|
|
+ width: calc(100% - 120px);
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .no {
|
|
|
+ color: #2f2f39;
|
|
|
+ }
|
|
|
+ .ok {
|
|
|
+ color: #0f7ac8;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
