You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
585 lines
24 KiB
585 lines
24 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
<meta http-equiv="Expires" content="0" />
|
|
<link rel="stylesheet" type="text/css" href="css/libs/reset.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/libs/animate.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/plugins/swiper-bundle.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/index.css" />
|
|
<!--[if lt IE 9]>
|
|
<script src="js/html5shiv.js"></script>
|
|
<script src="js/respond.min.js"></script>
|
|
<![endif]-->
|
|
<title>AI数字人</title>
|
|
</head>
|
|
<body>
|
|
<div class="ai-wrapper">
|
|
<!-- <iframe style="position: absolute; top: 0; left: 0; border: none; z-index: 9;" width="100%" height="100%" src="https://f.3dman.cn/art/9fM6sgHv/avatars/GPBrJQBD/index.html"></iframe> -->
|
|
<!-- <iframe style="position: absolute; top: 0; left: 0; border: none; z-index: 9;" width="100%" height="100%" src="https://f.3dman.cn/art/sDpbYwwJ/fbx/CdYqVH95/index.html"></iframe> -->
|
|
|
|
<div class="page-content">
|
|
<!-- 菜单 -->
|
|
<ul class="ai-nav">
|
|
<li class="nav-home"><p><span>主页</span></p></li>
|
|
<!-- nav-talk -->
|
|
<!-- talk-ing -->
|
|
<!-- talk-end -->
|
|
<li class="nav-talk"><p><span>提问</span></p></li>
|
|
<li class="nav-help"><p><span>帮助</span></p></li>
|
|
</ul>
|
|
|
|
<!-- animate__swing / animate__tada / animate__wobble-->
|
|
<!-- animate__rollIn / animate__bounceInDown -->
|
|
<!-- animate__animated animate__tada -->
|
|
<div class="ai-tip">喊一声“晓菲晓菲”，可以跟我对话</div>
|
|
<div class="chat-container">
|
|
<!-- <div class="chat-message user-message animate__animated animate__fadeInUp">
|
|
<div class="message-content">
|
|
<img src="images/1080_4.png" alt="" class="message-avatar" />
|
|
<span class="message-text">你好！</span>
|
|
</div>
|
|
</div>
|
|
<div class="chat-message ai-message animate__animated animate__flipInY">
|
|
<div class="message-content">
|
|
<img src="images/1080_5.png" alt="" class="message-avatar" />
|
|
<span class="message-text" id="botReplyText">你好！请问有需要帮助的吗？</span>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div class="other-content">
|
|
<!-- animate__backInDown / animate__backInUp / animate__bounceIn / animate__bounceInDown /animate__bounceInUp -->
|
|
<!-- 图书列表 -->
|
|
<div class="book-box">
|
|
<div class="layer-content layer-book-box animate__animated animate__bounceInUp">
|
|
<div class="layer-header">
|
|
<h3>图书列表</h3>
|
|
<div class="layer-closed layer-index-closed"></div>
|
|
</div>
|
|
<div class="swiper mySwiper">
|
|
<div class="swiper-wrapper">
|
|
</div>
|
|
<div class="book-last">
|
|
<div class="book-result"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
<div class="swiper-pagination"></div>
|
|
<div class="swiper-button-next"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 导航地址页 -->
|
|
<div class="layer-content layer-place-box animate__animated animate__bounceInUp">
|
|
<div class="layer-header">
|
|
<h3>导航</h3>
|
|
<div class="layer-closed layer-place-closed"></div>
|
|
</div>
|
|
<div class="map-content">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 导航地址页 -->
|
|
<div class="layer-content layer-place2-box animate__animated animate__bounceInUp">
|
|
<div class="layer-header">
|
|
<h3>导航</h3>
|
|
<div class="layer-closed layer-place-closed"></div>
|
|
</div>
|
|
<div class="map-content2">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3D内容页 -->
|
|
<div class="layer-content layer-img3-box animate__animated animate__bounceInUp">
|
|
<div class="layer-closed layer-place-closed"></div>
|
|
<div class="threeImg-content">
|
|
</div>
|
|
<div class="threeImg-info">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test" style="position: fixed; right: 0; top: 0;"></div>
|
|
|
|
<!-- 视频播放 -->
|
|
<div class="layer-content layer-video-box animate__animated animate__bounceInUp">
|
|
<div class="layer-header">
|
|
<h3>视频标题</h3>
|
|
<div class="layer-closed layer-index-closed"></div>
|
|
</div>
|
|
<div class="video-box">
|
|
<!-- <video width="100%" height="100%" controls autoplay muted>
|
|
<source src="video/入门级开源机械臂ultraArm套装.mp4" type="video/mp4">
|
|
</video> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 帮助 -->
|
|
<div class="layer-help-box animate__animated animate__fadeInLeft">
|
|
<div class="layer-closed layer-help-closed"></div>
|
|
<h4>HI,您好！<br/>
|
|
我是您的AI助手晓菲！</h4>
|
|
<p class="help-top-text">我可以为您提供图书查询、导航定位、参考咨询、智能推荐等服务。让我们一起在知识的海洋中航行，发现新大陆！有什么问题想要探讨吗？</p>
|
|
<ul class="help-tip">
|
|
<li class="animate__animated animate__bounceInUp">
|
|
<span>图书查询</span>
|
|
<p>"请帮我查一下《斗罗大陆》这本书"</p>
|
|
</li>
|
|
<li class="animate__animated animate__bounceInUp">
|
|
<span>图书推荐</span>
|
|
<p>"帮我推荐一下近期热门书籍"</p>
|
|
</li>
|
|
<li class="animate__animated animate__bounceInUp">
|
|
<span>知识百科</span>
|
|
<p>"请问《红楼梦》里王熙凤和贾宝玉是什么关系？"</p>
|
|
</li>
|
|
<li class="animate__animated animate__bounceInUp">
|
|
<span>大模型</span>
|
|
<p>"请帮我写一篇关于“日落”的300字文章"</p>
|
|
</li>
|
|
<li class="animate__animated animate__bounceInUp">
|
|
<span>导航定位</span>
|
|
<p>"请问少儿借阅室怎么走"</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script>
|
|
<script type="text/javascript" src="js/libs/flexible.js"></script>
|
|
<!-- 弹出框 -->
|
|
<script type="text/javascript" src="js/plugins/swiper-bundle.min.js"></script>
|
|
<script type="text/javascript" src="config.js"></script>
|
|
<script type="text/javascript" src="data.js"></script>
|
|
|
|
<script>
|
|
var dataJson = data
|
|
var shouldStopTyping = false; // 停止打字标识
|
|
var helpTimer; // 帮助的自动消失定时器
|
|
var intervalText; // 打字定时器
|
|
var swiper;
|
|
|
|
function helpShowHide() {
|
|
clearTimeout(helpTimer);
|
|
$('.chat-message').remove();
|
|
$('.layer-content').hide();
|
|
|
|
if ($('.layer-help-box').is(':visible')) {
|
|
// 如果帮助框是可见的，则隐藏它
|
|
$('.layer-help-box').hide();
|
|
} else {
|
|
// 如果帮助框是隐藏的，则显示它，并设置定时器
|
|
$('.layer-help-box').show();
|
|
helpTimer = setTimeout(() => {
|
|
$('.layer-help-box').hide();
|
|
}, 7000); // 7秒后隐藏帮助框
|
|
}
|
|
}
|
|
|
|
// animate__swing / animate__tada / animate__wobble
|
|
// animate__rollIn / animate__bounceInDown
|
|
$(function(){
|
|
// 顶部提示语动画
|
|
setInterval(function() {
|
|
$('.ai-tip').css('animation-duration', '1s').addClass('animate__animated animate__tada');
|
|
setTimeout(function() {
|
|
$('.ai-tip').removeClass('animate__animated animate__tada');
|
|
}, 1000);
|
|
}, 5000);
|
|
|
|
// 禁用右键菜单
|
|
document.addEventListener('contextmenu', function(event) {
|
|
event.preventDefault();
|
|
});
|
|
|
|
// 帮助按钮点击事件
|
|
$('.nav-help').on('click', function() {
|
|
helpShowHide();
|
|
});
|
|
|
|
// 帮助的关闭按钮click
|
|
$(".layer-help-closed").on("click",function(){
|
|
clearTimeout(helpTimer); // 清除之前的定时器
|
|
$('.layer-help-box').hide()
|
|
})
|
|
|
|
// 图书列表 / 视频弹框的关闭按钮
|
|
$(".layer-index-closed").on("click",function(){
|
|
// 销毁 Swiper 实例
|
|
if (swiper) {
|
|
swiper.destroy();
|
|
}
|
|
$('.layer-content').hide()
|
|
$('.swiper-wrapper').html('')
|
|
})
|
|
|
|
// 新地址弹框
|
|
$('.layer-place2-box .layer-place-closed').on("click",function(){
|
|
$('.map-content2').html('');
|
|
$('.layer-place2-box').hide();
|
|
})
|
|
|
|
// 3D图片弹框
|
|
$('.layer-img3-box .layer-place-closed').on("click",function(){
|
|
$('.threeImg-content').html('');
|
|
$('.layer-img3-box').hide();
|
|
})
|
|
})
|
|
|
|
// 图书列表
|
|
// getBookList(dataJson)
|
|
// getBookList([{"BookName":"陈氏太极拳图说：简体版","Author":"陈鑫","Isbn":"7537727279","Publish":null,"Sortmark":"G852.111.9-64/1","BookCover":"aba3eec6723f4cef8d2ae0661946862e","SrcUrl":"http://static1.showapi.com/app2/isbn/unk/8587da2ac70e4a41a4ce3a30cd5c1035.jpg","Books":[{"Barcode":"4201120100108481","PlaceName":null}]},{"BookName":"孟子译注：简体字本","Author":"杨伯峻译注","Isbn":"9787101063585","Publish":null,"Sortmark":"B222.52/1","BookCover":"85ebce648e24408db5095528e6534356","SrcUrl":"http://static1.showapi.com/app2/isbn/101/b16902a8ad4646ed8296f51a6c2c3483.jpg","Books":[{"Barcode":"4201120100237455","PlaceName":"三楼图书借阅区001排A面06架05层"}]},{"BookName":"章太炎家书：手稿与简体字对照版","Author":"章太炎等","Isbn":"9787512673069","Publish":null,"Sortmark":"B259.25/6","BookCover":"dd5948c5f9454e959b25220b86d57c7c","SrcUrl":"https://book-resource.dataesb.com/cover/p/20210730/eae5b39e98f14d388c8e18e5276b9451.jpeg","Books":[{"Barcode":"4201120100417226","PlaceName":"三楼图书借阅区001排A面07架04层"},{"Barcode":"4201120100417225","PlaceName":null}]},{"BookName":"论语译注：简体字本","Author":"杨伯峻译注","Isbn":"7101054196","Publish":null,"Sortmark":"B222.22/5","BookCover":"732e35c6e0914443b6c375456eb1e3b5","SrcUrl":"https://book-resource.dataesb.com/cover/p/20200516/775ed0e2d7a14163bbf872dd47f4d31b.jpeg","Books":[{"Barcode":"4201120100237456","PlaceName":"三楼图书借阅区001排A面05架07层"}]}])
|
|
function handleImageError(imgElement) {
|
|
imgElement.src = 'images/dxh/default-img.png';
|
|
if (!imgElement.classList.contains('dxh-class')) {
|
|
imgElement.classList.add('dxh-class');
|
|
}
|
|
imgElement.onerror = null;
|
|
}
|
|
|
|
function getBookList(dataBook){
|
|
var swiperHtml = '';
|
|
var processedBooks = 0;
|
|
var promises = [];
|
|
|
|
for (let i = 0; i < dataBook.length; i++) {
|
|
let book = dataBook[i];
|
|
let places = book.books || book.Books || [];
|
|
|
|
let placesHtml = places.map(function(place) {
|
|
let noDataClass = ( place.placeName === null || place.PlaceName === null) ? 'no-data' : '';
|
|
return '<a class="' + noDataClass + '" href="javascript:;" data-id="'+ (place.barcode || place.Barcode) +'">' + ( ( place.placeName || place.PlaceName ) || '暂无架位信息') + '</a>';
|
|
}).join('');
|
|
|
|
(function(book) {
|
|
promises.push($.ajax({
|
|
url: config.apiUrl+'/dxhtsg/getCoverByISBN',
|
|
type: 'GET',
|
|
data: {
|
|
'isbn': book.isbn || book.Isbn
|
|
},
|
|
success: function(res) {
|
|
console.log('res',res)
|
|
if (res) {
|
|
book.cover = res;
|
|
}
|
|
swiperHtml += createBookHtml(book, placesHtml);
|
|
processedBooks++;
|
|
},
|
|
error: function(err) {
|
|
console.error(err);
|
|
}
|
|
}));
|
|
})(book);
|
|
}
|
|
|
|
Promise.all(promises).then(function() {
|
|
$('.book-result').html('共有 ' + dataBook.length + ' 册图书符合您的检索结果');
|
|
$('.swiper-wrapper').html(swiperHtml);
|
|
$('.layer-book-box').show();
|
|
|
|
// list轮播切换
|
|
swiper = new Swiper(".mySwiper", {
|
|
spaceBetween: 30,
|
|
centeredSlides: true,
|
|
autoHeight: true,
|
|
autoplay: {
|
|
delay: 6000,
|
|
disableOnInteraction: false,
|
|
},
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
type: "fraction",
|
|
},
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
on: {
|
|
init: function () {
|
|
// 轮播初始化后立即请求第一个图书的gist
|
|
requestBookGist(this.slides[0].dataset.isbn);
|
|
},
|
|
touchStart: function(swiper,event){
|
|
swiper.autoplay.stop();
|
|
},
|
|
touchEnd: function(swiper,event){
|
|
swiper.autoplay.start();
|
|
},
|
|
slideChangeTransitionStart: function () {
|
|
let currentBook = this.slides[this.activeIndex].dataset.isbn
|
|
requestBookGist(currentBook);
|
|
}
|
|
}
|
|
});
|
|
|
|
// 图书导航列表点击
|
|
// http://58.49.77.70:8443/anchoring/goNavigation.do?libcode=1201&barcode=4201120100440912
|
|
$('.place-book a').on("click",function(){
|
|
var _thisBarcode = $(this).attr('data-id');
|
|
var _thisNoData = $(this).hasClass('no-data')
|
|
if(!_thisNoData){
|
|
// 点击时停止轮播
|
|
swiper.autoplay.stop();
|
|
$('.map-content').html('<iframe style="border: none;" width="100%" height="100%" src="'+config.apiUrl+'/anchoring/goNavigation.do?libcode='+config.libcode+'&barcode='+_thisBarcode+'"></iframe>');
|
|
$('.layer-place-box').show();
|
|
}
|
|
})
|
|
// 图书导航关闭按钮
|
|
$('.layer-place-closed').on("click",function(){
|
|
$('.map-content').html('');
|
|
$('.layer-place-box').hide();
|
|
// 弹框关闭后恢复轮播
|
|
swiper.autoplay.start();
|
|
})
|
|
}).catch(function(error) {
|
|
console.error(error);
|
|
});
|
|
|
|
function createBookHtml(book, placesHtml) {
|
|
var imgClass = book.cover.includes('dxh') ? 'dxh-class' : '';
|
|
return '<div class="swiper-slide" data-isbn='+ (book.isbn || book.Isbn) +'>' +
|
|
'<div class="book-wrapper">' +
|
|
'<div class="book-info">' +
|
|
'<div class="info-img">' +
|
|
'<img src="' + book.cover + '" alt="" class="' + imgClass + '" onerror="handleImageError(this);" />' +
|
|
'</div>' +
|
|
'<div class="info-text">' +
|
|
'<p>' + ( book.bookName || book.BookName ) + '</p>' +
|
|
'<p><i>著者：</i><span>' + (book.author || book.Author || '-') + '</span></p>' +
|
|
'<p><i>出版社：</i><span>' + (book.publish || book.Publish || '-') + '</span></p>' +
|
|
'<p><i>ISBN：</i><span>' + (book.isbn || book.Isbn || '-') + '</span></p>' +
|
|
'<p class="gist-content"><span>' + (book.gist || book.Gist || '-') + '</span></p>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="place-book">' + placesHtml + '</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
// http://58.49.77.70:8443/dxhtsg/LibraryBookByBarcode 通过barcode获取一本图书 {"barcode":"4201000201648913"}
|
|
// http://58.49.77.70:8443/dxhtsg/LibraryBookByISBN 通过isbn获取第一本有简介的图书 {"isbn":"4201000201648913"}
|
|
// http://58.49.77.70:8443/dxhtsg/LibraryBookByISBNTop1 通过isbn获取图书集合 {"isbn":"4201000201648913"}
|
|
// http://58.49.77.70:19000/LibraryBookByBarcode
|
|
function requestBookGist(isbn) {
|
|
if (isbn) {
|
|
$.ajax({
|
|
url: config.apiUrl + '/dxhtsg/LibraryBookByISBN ',
|
|
type: 'POST',
|
|
contentType:'application/json',
|
|
dataType: "json",
|
|
data: JSON.stringify({
|
|
'isbn': isbn
|
|
}),
|
|
success: function(res) {
|
|
console.log(res)
|
|
if(res.length !== 0){
|
|
updateGist(res[0].gist);
|
|
}else{
|
|
updateGist('');
|
|
}
|
|
},
|
|
error: function(err) {
|
|
console.error(err);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
function updateGist(gist) {
|
|
$('.gist-content span').text('')
|
|
$('.gist-content span').text(gist);
|
|
}
|
|
}
|
|
|
|
// newPlace('http://58.49.77.70:8443/anchoring/goNavigation.do?libcode=1201&barcode=4201120100331343')
|
|
function newPlace(url){
|
|
$('.map-content2').html('<iframe style="border: none;" width="100%" height="100%" src="'+url+'"></iframe>');
|
|
$('.layer-place2-box').show();
|
|
}
|
|
|
|
// 3D图片弹框
|
|
const json = {
|
|
'url': 'https://f.3dman.cn/art/9fM6sgHv/fbx/YwU35Vn8/index.html',
|
|
'name': '景泰蓝珐琅景泰蓝珐琅景泰蓝珐琅景泰',
|
|
'date': '清乾隆清乾隆清乾隆清乾隆22222',
|
|
'size': '6.8*9.8*25.8cm',
|
|
}
|
|
// threeDieImg(json)
|
|
function threeDieImg(json){
|
|
$('.threeImg-content').html('<iframe id="myIframe" style="border: none;" width="100%" height="100%" src="'+json.url+'"></iframe>');
|
|
// 首先展示name
|
|
// $('.threeImg-info').html(json.name).addClass('animate__animated animate__fadeIn');
|
|
|
|
const sizeParts = json.size.split('*').map((size, index) => {
|
|
const dimension = size.replace('cm', '').trim();
|
|
const prefixes = ['长', '宽', '高'];
|
|
return `<span class="three-dimension">${prefixes[index]}：${dimension}</span>`;
|
|
}).join(' ');
|
|
const sizeWithUnit = `${sizeParts} <span class="three-unit">单位：cm</span>`;
|
|
|
|
|
|
$('.threeImg-info').html(`
|
|
<p class="three-name">${json.name}</p>
|
|
<p class="three-size">${sizeWithUnit}</p>
|
|
<p class="three-date">${json.date}</p>
|
|
`).addClass('animate__animated animate__fadeIn');
|
|
|
|
|
|
// // 等待一段时间后隐藏name，展示date
|
|
// setTimeout(function() {
|
|
// $('.threeImg-info').hide().removeClass('animate__animated animate__fadeIn');
|
|
// $('.threeImg-info').html(json.date);
|
|
// $('.threeImg-info').show().addClass('animate__animated animate__fadeIn');
|
|
// }, 4000); // 延迟4秒，可以根据需要调整时间
|
|
|
|
// // 再等待一段时间后隐藏date，展示size
|
|
// setTimeout(function() {
|
|
// $('.threeImg-info').hide().removeClass('animate__animated animate__fadeIn');
|
|
// $('.threeImg-info').html(json.size);
|
|
// $('.threeImg-info').show().addClass('animate__animated animate__fadeIn');
|
|
// }, 8000); // 延迟8秒，即在展示date后2秒展示size
|
|
|
|
// // 全部展示完之后
|
|
// setTimeout(function() {
|
|
// $('.threeImg-info').html('');
|
|
// $('.threeImg-info').hide();
|
|
// }, 12000);
|
|
|
|
$('.layer-img3-box').show();
|
|
}
|
|
|
|
function handleThreeImg(value1, value2, value3) {
|
|
document.getElementById('myIframe').contentWindow.postMessage({ action: 'setModelRotation', data: [value1, value2, value3] }, '*');
|
|
}
|
|
|
|
// 获取视频播放
|
|
function getVideo(title,videoSrc){
|
|
$('.layer-video-box').show();
|
|
$('.layer-video-box').find('h3').html(title);
|
|
var html = '<video width="100%" height="100%" controls autoplay muted>'+
|
|
'<source src="'+videoSrc+'" type="video/mp4">'+
|
|
'</video>';
|
|
$('.video-box').html(html);
|
|
}
|
|
|
|
// $(document).on('click', '.nav-talk', function() {
|
|
// talkDefalutToIng()
|
|
// setTimeout(()=>{
|
|
// // 检测发送用户提问内容
|
|
// userQuestion(1,'测试一下')
|
|
// // 模拟机器人的回答
|
|
// setTimeout(function() {
|
|
// talkIngToEnd()
|
|
// var message = "所替代，万物复苏，生命在这个季节里得到了更新。在田野上，农民们忙碌地耕种，希望在秋天收获满满的果实。而在城市中，人们带着期待和希望迎接新的一年。孩子们在公园里欢笑玩耍，他们的笑声如同春天的风，温暖而清新。河边的柳树开始发芽，嫩绿的叶子在阳光下闪闪发光。花朵在春风的吹拂下慢慢绽放，她们像是一群群舞者，在舞台上展示着各自的美丽。春天是一首优美的诗，是一幅生动的画。它带给我们的不仅仅是美景，更是对生活的热爱和对未来的期待。让我们珍惜这个美丽的季节，感受大自然的魅力，享受生活的美好。"
|
|
// digiPeopleReply(message)
|
|
// getBookList(dataJson)
|
|
|
|
// }, 4000);
|
|
// $('.layer-help-box').hide();
|
|
// $('.layer-content').hide()
|
|
// },4000)
|
|
// })
|
|
|
|
// $(document).on('click', '.talk-end', function() {
|
|
// talkEndToDefalut()
|
|
// })
|
|
|
|
// $(document).on('click', '.nav-home', function() {
|
|
// setTimeout(()=>{
|
|
// // 检测发送用户提问内容
|
|
// userQuestion(2,'文物介绍')
|
|
// $('.layer-help-box').hide();
|
|
// $('.layer-content').hide()
|
|
// },4000)
|
|
// })
|
|
|
|
// 提问 - 录音
|
|
function talkDefalutToIng(){
|
|
$('.nav-talk').html('<p><span>录音</span></p>').removeClass().addClass('talk-ing');
|
|
$('.layer-help-box').hide();
|
|
}
|
|
|
|
// 录音 - 打断
|
|
function talkIngToEnd(){
|
|
$('.talk-ing').html('<p><span>打断</span></p>').removeClass().addClass('talk-end');
|
|
}
|
|
|
|
// 打断 - 提问
|
|
function talkEndToDefalut(){
|
|
$('.talk-end').html('<p><span>提问</span></p>').removeClass().addClass('nav-talk');
|
|
shouldStopTyping = true; // 设置变量，指示应该停止打字
|
|
clearInterval(intervalText); // 清除定时器
|
|
}
|
|
|
|
// 用户提问
|
|
function userQuestion(chatType, message){
|
|
if (swiper) {
|
|
swiper.destroy();
|
|
}
|
|
$('.layer-help-box').hide();
|
|
$('.layer-content').hide();
|
|
$('.swiper-wrapper').html('')
|
|
|
|
var $userMessageBox = $('<div class="chat-message user-message animate__animated animate__fadeInUp"></div>');
|
|
$userMessageBox.html(
|
|
'<div class="message-content">' +
|
|
'<img src="images/1080_4.png" alt="" class="message-avatar" />' +
|
|
'<span class="message-text">' + message + '</span>' +
|
|
'</div>'
|
|
);
|
|
|
|
// 将用户的消息添加到聊天容器的最顶部
|
|
$('.chat-container').prepend($userMessageBox);
|
|
// 清空旧的消息，只保留最新的一条问答
|
|
$('.chat-container').children('.chat-message').slice(1).remove();
|
|
|
|
if(chatType===1){
|
|
// 常规提问 居中
|
|
$('.chat-container').removeClass('three-chat-container')
|
|
}else{
|
|
// 非常规提问 顶部
|
|
$('.chat-container').addClass('three-chat-container')
|
|
}
|
|
|
|
setTimeout(()=>{
|
|
var $userMessageBox = $('.chat-container').children('.chat-message.user-message').last();
|
|
var $botMessageBox = $('<div class="chat-message ai-message animate__animated animate__fadeInUp"></div>');
|
|
$botMessageBox.html(
|
|
'<div class="message-content">' +
|
|
'<img src="images/1080_5.png" alt="" class="message-avatar" />' +
|
|
'<span class="message-text" id="botReplyText"><img class="loading" src="images/loading.webp" alt="" /></span>' +
|
|
'</div>'
|
|
);
|
|
$userMessageBox.after($botMessageBox);
|
|
},1000)
|
|
}
|
|
|
|
// 数字人回答
|
|
function digiPeopleReply(message) {
|
|
shouldStopTyping = false;
|
|
setTimeout(function() {
|
|
// 隐藏loading
|
|
$('.ai-message').find('.loading').hide();
|
|
|
|
// 数字人回复逐字敲打出来
|
|
var index = 0;
|
|
intervalText = setInterval(function() {
|
|
if (!shouldStopTyping && index < message.length) {
|
|
$('#botReplyText').text(message.substring(0, index + 1));
|
|
index++;
|
|
$('#botReplyText').scrollTop($('#botReplyText')[0].scrollHeight);
|
|
} else if (shouldStopTyping) {
|
|
clearInterval(intervalText); // 停止打字动画
|
|
}
|
|
}, 100); // 100 打字速度，越小越快
|
|
}, 1000);
|
|
}
|
|
</script>
|
|
</html>
|