p85126437
/
geo_info_platform
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
geo_info_platform/machine.html

172 lines
5.3 KiB
HTML
Raw Normal View History

AI对话
2019-12-19 17:58:19 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>map</title>
<script src="./js/jQuery-1.8.3.min.js"></script>
<link href="./css/machine.css" rel="stylesheet">
<link href="./css/demo.css" rel="stylesheet">
ai对话头部导航
2019-12-19 18:35:32 +08:00
<link href="./css/flexleft.css" rel="stylesheet">
<script src="./js/public.js"></script>
AI对话
2019-12-19 17:58:19 +08:00
</head>
<body>
ai对话头部导航
2019-12-19 18:35:32 +08:00
<div class="map_header">
<div class="map_left">
<h2 class="logo_txt">
基于知识图谱的兵要信息平台
</h2>
<ul class="map-nav">
<li>
<a href="./map.html">首页</a>
</li>
<li>
<a href="javscript:void(0)">产品</a>
</li>
<li>
<a href="javscript:void(0)">后台管理</a>
</li>
</ul>
</div>
<ul class="user_info">
<!-- <span class="search-Panel">
<input class="search-input-item prov" placeholder="请输入地点" />
<input onkeyup="this.value=this.value.replace(/[^\d.]/g, '')" class="search-input-item lon" placeholder="经度" />
<input onkeyup="this.value=this.value.replace(/[^\d.]/g, '')" class="search-input-item lon" placeholder="纬度" />
<div class="show_detail ml10">
<i class="iconfont icon-search"></i>
<ul class="detail_info">
<li class="info_txt" data-key="prov">地点</li>
<li class="info_txt" data-key="lon">经纬度</li>
<li class="info_txt" data-key="voice">语音</li>
</ul>
</div>
</span> -->
<li class="info-item">
<div class="show_detail">
<img class="user_img" src="./image/3.jpg" />
<ul class="detail_info">
<li class="info_txt" data-key="user">admin</li>
<li class="info_txt" data-key="off">退出</li>
</ul>
</div>
</li>
</ul>
</div>
AI对话
2019-12-19 17:58:19 +08:00
<div class="ai_content">
<div id="box">
<div class="b-head">
<span class="h_span">AI对话</span>
</div>
<div class="b_body">
<div class="rotWord">
<span></span>
<p id="member">我们聊聊吧！</p>
</div>
</div>
<div class="b-footer">
<input type="text" name="text" id="f-left">
<div id="btn">发送</div>
</div>
</div>
</div>
<script>
var params = window.location.href.split('?');
$(function(){
if(params.length>1){
action('中印边境包含哪几段');
}
})
var array = [
{
input:'中印边境包含哪几段',
output:'中印边境包含东段、中段、西段以及锡金段。'
},{
input:'中印边境问题引发了哪些对峙事件？',
output:'中印边境问题引发了桑多河谷对峙、洞朗对峙、班公湖对峙。'
},{
input:'班公湖对峙发生于哪里',
output:'发生在拉达克地区的班公湖北岸。'
},{
input:'班公湖近况如何？',
output:'2019年9月14日印军逼近拉达克地区的班公湖。'
},{
input:'印军近期在班公湖的活动？',
output:'印军在拉达克地区举行联合军演、印度北部军区司令到班公湖巡视。'
}
]
var text = $("#f-left");
text.focus();
function action(value)
{
if(value==null||value=="")
{
text.focus();
return;
}
var html = '<div class="mWord"><span></span><p>'+value+'</p></div>';
$(".b_body").append(html);
对话调用接口
2019-12-19 18:24:00 +08:00
var args= {
type : "get",
url:"https://api.ownthink.com/bot",
data : {"appid" : "xiaosi", "spoken" : value},
success : function(redata)//回调函数
{
var my_data = $.parseJSON(redata)
var array= [my_data.data.info.text];
if(my_data.data.info.hasOwnProperty("heuristic"))
{
for (var i=0; i < my_data.data.info.heuristic.length; i++)
{
array.push(my_data.data.info.heuristic[i]);
}
}
for (var i=0; i < array.length; i++)
{
var result = array[i];
$(".b_body").append("<div class='rotWord'><span></span> <p id='member'>" + result + "</p></div>");
$(".b_body").scrollTop(10000000);
}
AI对话
2019-12-19 17:58:19 +08:00
}
}
数据获取（数组以及接口）
2019-12-19 19:45:16 +08:00
var answer = "";
var flag = false;
for(var i = 0 ;i<array.length;i++){
if( array[i].input.indexOf(value) > -1 ){
flag = true;
answer = '<div class="rotWord"><span></span><p id="member">'+array[i].output+'</p></div>';
continue;
}
}
if(flag){
setTimeout(function(){
$(".b_body").append(answer);
$(".b_body").scrollTop(10000000);
},500);
}else{
ajax(args);
}
AI对话
2019-12-19 17:58:19 +08:00
$(".b_body").scrollTop(10000000);
text.val('');
}
$("#btn").click(function()//鼠标点击
{
action(text.val());
});
$(document).keydown(function(event)//回车
{
if(event.keyCode==13)
{
action(text.val());
}
});
对话调用接口
2019-12-19 18:24:00 +08:00
数据获取（数组以及接口）
2019-12-19 19:45:16 +08:00
AI对话
2019-12-19 17:58:19 +08:00
</script>
</body>
</html>