<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,
|
},
|
closeMap: false,
|
};
|
},
|
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 != "连接成功" || 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() {
|
const item = {
|
sourceType: "Tileset",
|
name: "MilitaryFacilities",
|
url: "/data-api/gisserver/c3dserver/sedb_DESKTOP-15DOTHJ_SEM4550/tileset.json",
|
};
|
setTimeout(() => {
|
mapServer.addServer(item);
|
}, 1000);
|
return;
|
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") {
|
console.log("items[i]", items[i]);
|
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) {
|
console.log("res----", res);
|
//输入@map打开地图
|
if (res == "@map") {
|
var rolMsg = [
|
{
|
type: "text",
|
val: "地图已打开",
|
},
|
];
|
this.refashMsg(rolMsg);
|
//打开地图
|
this.$store.state.setScreenFlag = true;
|
this.closeMap = true;
|
earthCtrl.viewer.camera.flyTo({
|
destination: {
|
x: -1803769.3854512463,
|
y: 29158371.286777183,
|
z: 13465105.223495383,
|
},
|
orientation: {
|
heading: 6.283185307179586,
|
pitch: -1.5707963267948966,
|
roll: 0,
|
},
|
});
|
}
|
//有map关键字定位
|
else if (res.indexOf("@map") > -1) {
|
this.closeMap = true;
|
window.earthCtrl.camera.flyTo(
|
121.5898036178841,
|
23.93799083591751,
|
2732.163687177577,
|
4.501790216143808,
|
-32.230361363631324,
|
0.001313831409284339,
|
2
|
);
|
} else {
|
//关闭地图
|
// this.$store.state.setScreenFlag = false;
|
}
|
mapImg.removeInit();
|
mapSetFunc.removeAll();
|
this.$store.state.setListColor = [];
|
this.$store.state.showLenged = false;
|
|
// const formData = new FormData();
|
// formData.append("message", res);
|
// formData.append("lib_id", "No1");
|
// formData.append("session_id", this.uuid.toString());
|
const formData = {
|
message: res,
|
lib_id: "No1",
|
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) {
|
console.log("obj", formData);
|
getAgentIntention(formData)
|
.then((response) => {
|
if (response.code != 200) {
|
if (formData.message != "@map") {
|
var rolMsg = [
|
{
|
type: "text",
|
val: "未查询到相关信息。",
|
},
|
];
|
this.refashMsg(rolMsg);
|
}
|
return;
|
}
|
|
const type = response.type;
|
//普通对话信息查询
|
if (type == "message") {
|
//关闭地图
|
if (!this.closeMap) {
|
this.$store.state.setScreenFlag = false;
|
}
|
var rolMsg = [
|
{
|
type: "text",
|
val: response.msg,
|
},
|
];
|
this.refashMsg(rolMsg);
|
}
|
//地图查询
|
else {
|
//打开地图
|
this.$store.state.setScreenFlag = true;
|
this.setMapfunc(response.content, obj);
|
}
|
// if (type == "Map") {
|
// this.setMapfunc(response.content, obj);
|
// } else if (type == "Rag") {
|
// this.setMapRag(response, obj);
|
// } else {
|
// // this.setMapfunc(response.content, obj);
|
// }
|
})
|
.catch((error) => {
|
var rolMsg = [
|
{
|
type: "text",
|
val: "抱歉，服务器似乎出了点问题，我们正在修复中。",
|
},
|
];
|
this.refashMsg(rolMsg);
|
});
|
},
|
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 = `|数据类型 |数据量 |\n|------|------|\n|军事目标 |724|\n|`//`${res.data}`;
|
const subData = res.data
|
.filter((item) => item.subtype !== null)
|
.map((item) => `| ${item.subtype} | ${item.count} |`)
|
.join("\n");
|
var a = `| 数据类型 | 数据量 |\n|------|------|\n` + subData;
|
console.log("aaa", subData, a);
|
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":
|
mapSetFunc.init(res);
|
this.setUpdateHistoryInFor(obj, res.msg);
|
var roleMsg = msgData.getAffairsData([
|
{ type: "text", val: "地图已显示" },
|
]);
|
console.log("roleMsg----", roleMsg);
|
this.refashMsg(roleMsg.list);
|
break;
|
case "aroundPoi":
|
let dataList = [
|
{
|
type: "可打击目标",
|
color: "#FF3366",
|
list: [],
|
},
|
{
|
type: "不可打击目标",
|
color: "#33FF66",
|
list: [],
|
},
|
{
|
type: "其他",
|
color: "#3366FF",
|
list: [],
|
},
|
];
|
res.data.forEach((item) => {
|
if (item.ifstrike === "1") {
|
dataList[0].list.push(item.uuid);
|
} else if (item.ifstrike === "2") {
|
dataList[1].list.push(item.uuid);
|
} else {
|
dataList[2].list.push(item.uuid);
|
}
|
});
|
const resultData = dataList
|
.map((item) => `| ${item.type} | ${item.list.length} |`)
|
.join("\n");
|
var a = `| 数据类型 | 数据量 |\n|------|------|\n` + resultData;
|
console.log("aaa", a);
|
this.setUpdateHistoryInFor(obj, a);
|
var roleMsg = msgData.getMdData("markdown", a);
|
this.refashMsg(roleMsg.list);
|
const finalData = {
|
func: "aroundPoi",
|
data: dataList,
|
};
|
mapSetFunc.init(finalData);
|
break;
|
case "getStrike":
|
let dataList1 = [
|
{
|
type: "可打击目标",
|
color: "#FF3366",
|
list: [],
|
},
|
{
|
type: "不可打击目标",
|
color: "#33FF66",
|
list: [],
|
},
|
{
|
type: "其他",
|
color: "#3366FF",
|
list: [],
|
},
|
];
|
res.data.forEach((item) => {
|
if (item.ifstrike === "1") {
|
dataList1[0].list.push(item.uuid);
|
} else if (item.ifstrike === "2") {
|
dataList1[1].list.push(item.uuid);
|
} else {
|
dataList1[2].list.push(item.uuid);
|
}
|
});
|
const resultData1 = dataList1
|
.map((item) => `| ${item.type} | ${item.list.length} |`)
|
.join("\n");
|
var a = `| 数据类型 | 数据量 |\n|------|------|\n` + resultData1;
|
console.log("aaa", a);
|
this.setUpdateHistoryInFor(obj, a);
|
var roleMsg = msgData.getMdData("markdown", a);
|
this.refashMsg(roleMsg.list);
|
const finalData1 = {
|
func: "aroundPoi",
|
data: dataList1,
|
};
|
mapSetFunc.init(finalData1);
|
break;
|
case "getParam":
|
mapSetFunc.init(res);
|
console.log("res.data.targetinfo", res);
|
this.setUpdateHistoryInFor(obj, res.msg);
|
if (res.data.length === 1) {
|
var roleMsg = msgData.getAffairsData([
|
{ type: "text", val: res.data[0].targetinfo },
|
]);
|
this.refashMsg(roleMsg.list);
|
} else {
|
const markData = res.data
|
.map((item) => `| ${item.name} | ${item.targetinfo} |`)
|
.join("\n");
|
let markAttr = `| 名称 | 属性信息 |\n|------|------|\n` + markData;
|
var roleMsg = msgData.getMdData("markdown", markAttr);
|
this.refashMsg(roleMsg.list);
|
}
|
break;
|
case "aroundPoi_2":
|
mapSetFunc.init(res);
|
console.log("res.data.targetinfo", res);
|
const resData = res.data
|
.map((item) => `| ${item.name} | ${item.targetinfo} |`)
|
.join("\n");
|
var attr = `| 名称 | 属性信息 |\n|------|------|\n` + resData;
|
console.log("aaa", attr);
|
var roleMsg = msgData.getMdData("markdown", attr);
|
this.setUpdateHistoryInFor(obj, 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>
|
