<template>
|
<div class="chartBox">
|
<div class="ChartBox">
|
<JwChat-index :taleList="list" @enter="bindEnter" v-model="inputMsg" :toolConfig="tool">
|
</JwChat-index>
|
</div>
|
</div>
|
<!-- -->
|
</template>
|
|
<script>
|
import msgData from "../../assets/js/msg/msgData";
|
import store from "../../store";
|
import bus from "./../../assets/js/bus.js";
|
import { getAgentThistoryUpdate, getAgentIntention, getAgentLayerList, getAgentThistorySave } from "../../api/api.js";
|
import mapSetFunc from "../../assets/js/mapSetFunc.js";
|
import { nanoid } from 'nanoid'
|
import mapServer from "../../assets/js/map/mapServer.js";
|
import mapImg from "../../assets/js/map/mapImg.js";
|
import mapModel from "../../assets/js/map/mapModel.js";
|
export default {
|
name: "jwChat",
|
|
data() {
|
return {
|
uuid: null,
|
inputMsg: "",
|
loading: false,
|
list: [],
|
msgData: [],
|
wsSocket: null,
|
obj: null,
|
tool: {
|
show: ["file", "history", "img"],
|
callback: this.toolEvent
|
},
|
config: {
|
img: "/image/cover.png",
|
name: "JwChat",
|
dept: "最简单、最便捷",
|
callback: this.bindCover
|
}
|
};
|
},
|
computed: {
|
Obj() {
|
return store.state.setMsgData;
|
}
|
},
|
watch: {
|
Obj(newVal, oldVal) {
|
if (newVal) {
|
if (newVal.text == "加载完成") {
|
setTimeout(() => {
|
this.setMsgImg();
|
}, 500);
|
setTimeout(() => {
|
this.setMsgtab();
|
}, 1500);
|
this.loading = false;
|
store.state.setMsgData = null;
|
} else {
|
this.list[this.list.length - 1].text = newVal;
|
}
|
}
|
}
|
},
|
mounted() {
|
this.uuid = nanoid();
|
|
this.getQueryLayerList();
|
this.createSocket();
|
this.$store.state.sessionId = this.uuid;
|
if (window.timer) {
|
clearInterval(window.timer);
|
window.timer = null;
|
}
|
// modelLayer.init();
|
setTimeout(() => {
|
this.getMsg("ai", "您好，请输入指令");
|
|
}, 1000);
|
|
bus.$on("mapInfo", (res) => {
|
if (res) {
|
// this.setMapInfo(res);
|
}
|
});
|
bus.$on("setInsertMarkDown", (res) => {
|
if (res) {
|
this.setMarkDownInfo(res);
|
}
|
});
|
bus.$on("setRagMoreListAll", (res) => {
|
if (res) {
|
this.setRagMoreList(res);
|
}
|
});
|
// axios.get("http://192.168.11.89:12315/Markdown.md").then((response) => {
|
// if (response.status == 200) {
|
// console.log(response);
|
// this.setMarkDownInfo(response.data);
|
// }
|
// });
|
},
|
methods: {
|
createSocket() {
|
this.wsSocket = new WebSocket(config.wsHost);
|
this.wsSocket.onopen = (event) => {
|
console.log('WebSocket连接成功');
|
//定时任务，由于使用nginx反向代理，60秒无数据传输会断开
|
var timer = setInterval(() => {
|
if ( this.wsSocket.readyState == 1) {
|
this.wsSocket.send("心跳包检测");
|
} else {
|
//IM连接已断开
|
}
|
}, 50 * 1000);
|
|
};
|
this.wsSocket.onmessage = (event) => {
|
// console.log('Received message:', event.data);
|
console.log(event);
|
|
if (event.data != "连接成功") {
|
console.log(event.data);
|
const val = JSON.parse(event.data)
|
if (val.session_id == this.uuid) {
|
this.setMapfunc(val, this.obj)
|
}
|
}
|
|
}
|
},
|
async getQueryLayerList() {
|
getAgentLayerList().then(response => {
|
if (response.code != 200) return;
|
const items = response.data;
|
for (var i in items) {
|
const name = items[i].name;
|
if (
|
name != "FW20" && name != "FW12"
|
) {
|
mapServer.addServer(items[i])
|
}
|
|
}
|
|
})
|
},
|
bindEnter() {
|
const msg = this.inputMsg;
|
if (!msg) return;
|
this.getMsg("role", msg);
|
this.setLoading();
|
setTimeout(() => {
|
this.setMsgStart(msg);
|
}, 200);
|
},
|
setLoading() {
|
const loader = msgData.getLoader();
|
this.list.push(loader);
|
this.loading = true;
|
},
|
setMsgStart2() {
|
earthCtrl.camera.flyTo(
|
121.51795297995497,
|
23.884136798593303,
|
1463114.1994667982,
|
0,
|
-90,
|
0,
|
2
|
);
|
mapImg.addImageLayer();
|
var roleMsg1 = msgData.getAffairsData([{ type: "text", val: "相关信息已在地图展示" }]);
|
this.refashMsg(roleMsg1.list);
|
},
|
getMsg(type, msg) {
|
var roleMsg = msgData.getRole(type, msg);
|
if (this.loading) {
|
this.loading = false;
|
this.list[this.list.length - 1].list = roleMsg.msg.list;
|
} else {
|
this.list.push(roleMsg.msg);
|
}
|
},
|
async setMsgStart(res) {
|
mapImg.removeInit();
|
mapSetFunc.removeAll();
|
this.$store.state.setListColor = [];
|
this.$store.state.showLenged = false;
|
window.earthCtrl.camera.flyTo(
|
121.5898036178841,
|
23.93799083591751,
|
2732.163687177577,
|
4.501790216143808,
|
-32.230361363631324,
|
0.001313831409284339,
|
2
|
);
|
|
const formData = new FormData();
|
formData.append("message", res);
|
formData.append("lib_id", "No1");
|
formData.append("session_id", this.uuid.toString());
|
|
var obj = {
|
"ai": "",
|
"create_time": msgData.getDate1(),
|
"human": res,
|
"sessionid": this.uuid,
|
"update_time": "",
|
"userid": 0
|
}
|
|
getAgentThistorySave(
|
obj
|
).then(response => {
|
|
if (response.code == 200) {
|
obj.id = response.id;
|
this.obj = obj;
|
}
|
|
this.setAgentIntention(obj, formData)
|
})
|
|
|
|
|
},
|
async setAgentIntention(obj, formData) {
|
getAgentIntention(formData).then((response) => {
|
|
if (response.code != 200) {
|
var rolMsg = [
|
{
|
type: "text",
|
val: "未查询到相关信息。"
|
}
|
];
|
this.refashMsg(rolMsg);
|
return;
|
}
|
|
|
const type = response.type;
|
if (type == "Map") {
|
this.setMapfunc(response.content, obj);
|
} else if (type == "Rag") {
|
this.setMapRag(response, obj);
|
}
|
});
|
},
|
setMapfunc(res, obj) {
|
this.$store.state.showLenged = false;
|
|
switch (res.func) {
|
case "queryRelationship":
|
|
var roleMsg = null;
|
if (res.data) {
|
mapSetFunc.init(res)
|
var a = `${res.msg}`;
|
this.setUpdateHistoryInFor(obj, a);
|
roleMsg = msgData.getMdData("markdown", a);
|
} else {
|
roleMsg = msgData.getAffairsData([{ type: "text", val: res.msg }]);
|
|
}
|
|
this.refashMsg(roleMsg.list);
|
break;
|
case "queryMeta":
|
var a = `${res.data}`;
|
this.setUpdateHistoryInFor(obj, a);
|
var roleMsg = msgData.getMdData("markdown", a);
|
this.refashMsg(roleMsg.list);
|
mapSetFunc.init(res)
|
break;
|
case "combatSimulate":
|
this.setMsgStart2();
|
var a = "相关信息已在地图展示";
|
this.setUpdateHistoryInFor(obj, a);
|
var roleMsg1 = msgData.getAffairsData([{ type: "text", val: a }]);
|
this.refashMsg(roleMsg1.list);
|
break;
|
case "batEnv":
|
|
if (res.msg) {
|
var a = `${res.msg}`;
|
var roleMsg = msgData.getMdData("markdown", a);
|
|
|
roleMsg.list[0].link = true;
|
|
setTimeout(() => {
|
this.setUpdateHistoryInFor(obj, a);
|
this.refashMsg(roleMsg.list);
|
}, 500);
|
}
|
|
break;
|
case "poiMap":
|
case "aroundPoi":
|
mapSetFunc.init(res)
|
this.setUpdateHistoryInFor(obj, res.msg);
|
var roleMsg = msgData.getAffairsData([{ type: "text", val: res.msg }]);
|
this.refashMsg(roleMsg.list);
|
break;
|
default:
|
this.setUpdateHistoryInFor(obj, res.msg);
|
var roleMsg1 = msgData.getAffairsData([{ type: "text", val: res.msg }]);
|
this.refashMsg(roleMsg1.list);
|
break;
|
}
|
},
|
setUpdateHistoryInFor(obj, message) {
|
obj.ai = message;
|
obj.update_time = msgData.getDate1();
|
getAgentThistoryUpdate(obj).then(response => {
|
console.log(response);
|
|
})
|
},
|
setMapRag(res, objRes) {
|
const val = res.content.split("\n");
|
const obj = [];
|
for (var i in val) {
|
if (val[i]) {
|
obj.push({
|
type: "text",
|
val: val[i]
|
})
|
}
|
}
|
var listData = [];
|
if (res.fileSrource) {
|
var obj_file = res.fileSrource;
|
for (var i = 0; i < obj_file.length; i++) {
|
const file_name = obj_file[i].metadata.split("/");
|
const name = file_name[file_name.length - 1]
|
if (listData.length == 0) {
|
listData.push({
|
name: name,
|
val: [
|
obj_file[i].page_content
|
]
|
})
|
} else {
|
var boolen = false;
|
for (var k in listData) {
|
if (listData[k].name == name) {
|
boolen = true;
|
listData[k].val.push(obj_file[i].page_content)
|
}
|
}
|
if (boolen == false) {
|
listData.push({
|
name: name,
|
val: [
|
obj_file[i].page_content
|
]
|
})
|
}
|
|
}
|
}
|
}
|
if (listData.length > 0) {
|
obj.push({
|
type: "fileSrource",
|
val: listData
|
})
|
}
|
|
var roleMsg = msgData.getAffairsData(obj);
|
|
this.setUpdateHistoryInFor(objRes, JSON.stringify(roleMsg.list));
|
this.refashMsg(roleMsg.list);
|
|
},
|
refashMsg(res) {
|
this.loading = false;
|
this.list[this.list.length - 1].list = res;
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
/* .rightSlot {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
flex-direction: column;
|
} */
|
.chartBox {
|
width: 100%;
|
height: 100vh;
|
background: black;
|
position: relataive;
|
}
|
</style>
|
<style scoped>
|
.divboder {
|
display: flex;
|
}
|
|
.tabTable {
|
width: 100%;
|
min-width: 25vh !important;
|
text-align: center;
|
border: 1px solid #c1c1c1;
|
}
|
|
.tabTable .tabHeader {
|
height: 32px;
|
background: linear-gradient(180deg, #28a9de 0%, #1987c2 100%);
|
border-radius: 0px 0px 0px 0px;
|
color: white;
|
}
|
|
.tabTable .tabBody tr {
|
height: 64px;
|
border-bottom: 1px solid #c1c1c1;
|
}
|
|
.tabTable .tabBody td:nth-child(2) {
|
height: 64px;
|
word-break: break-all;
|
word-wrap: break-word;
|
text-align: center;
|
width: 68%;
|
padding: 0px 1%;
|
line-height: 30px;
|
border-bottom: 1px solid #c1c1c1;
|
}
|
|
@keyframes siz {
|
from {
|
width: 0;
|
}
|
|
to {
|
width: 100%;
|
}
|
}
|
|
.msgText {
|
width: 300px;
|
word-break: break-all;
|
word-wrap: break-word;
|
overflow: hidden;
|
white-space: normal;
|
letter-spacing: 0.15em;
|
animation: siz 3s steps(60) forwards;
|
}
|
|
.loading {
|
margin: 20px;
|
position: relative;
|
width: 1px;
|
height: 1px;
|
}
|
|
.loading:before,
|
.loading:after {
|
position: absolute;
|
display: inline-block;
|
width: 15px;
|
height: 15px;
|
content: "";
|
border-radius: 100%;
|
background-color: #000;
|
}
|
|
.loading:before {
|
left: -15px;
|
animation: ball-pulse infinite 0.75s -0.4s cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
}
|
|
.loading:after {
|
right: -15px;
|
animation: ball-pulse infinite 0.75s cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
}
|
|
@keyframes ball-pulse {
|
0% {
|
transform: scale(1);
|
opacity: 1;
|
}
|
|
50% {
|
transform: scale(0.1);
|
opacity: 0.6;
|
}
|
|
100% {
|
transform: scale(1);
|
opacity: 1;
|
}
|
}
|
</style>
|
