<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 { getAIMessage, getV1Fastgpt } from "../../api/api.js";
|
import mapInfo from "../../assets/js/map/mapInfo.js";
|
import axios from "axios";
|
import layerJson from "../../assets/js/map/mapJsonLayer.js";
|
import { factors } from "@turf/turf";
|
export default {
|
name: "jwChat",
|
|
data() {
|
return {
|
inputMsg: "",
|
loading: false,
|
list: [],
|
msgData: [],
|
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() {
|
if (window.timer) {
|
clearInterval(window.timer);
|
window.timer = null;
|
}
|
// this.setLoading();
|
setTimeout(() => {
|
this.setMsgStart("您好");
|
}, config.loadTime);
|
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: {
|
bindEnter() {
|
const msg = this.inputMsg;
|
|
if (!msg) return;
|
|
this.getMsg("role", msg);
|
|
this.setLoading();
|
setTimeout(() => {
|
|
this.setMsgStart(msg);
|
}, 200);
|
},
|
async setMsgStart(res) {
|
if (res.indexOf("军事目标") > -1 || res.indexOf("民宅") > -1 || res.indexOf("经济目标") > -1 || res.indexOf("海军陆战队") > -1 || res.indexOf("堤丰") > -1) {
|
this.$store.state.setScreenFlag = true;
|
this.list.splice(-1, 1);
|
this.loading = false;
|
layerJson.setQyeryData(res);
|
}
|
// else if(res.indexOf("苏比克湾") > -1){
|
// this.$store.state.setScreenFlag = true;
|
// this.list.splice(-1, 1);
|
// this.loading = false;
|
// this.$nextTick(() => {
|
// setTimeout(() => {
|
// mapInfo.setEntityQueryInput();
|
// }, 1000);
|
// });
|
// }
|
else if (res == "三维实景") {
|
layerJson.setTitleSetRest();
|
this.setV1Fastgpt(res)
|
} else {
|
const data = await getAIMessage(res);
|
|
if (data.code == 200) {
|
if (data.content) {
|
this.getMsg("ai", data.content);
|
} else {
|
this.getMsg("ai", "");
|
}
|
if (data.name) {
|
this.$store.state.setScreenFlag = true;
|
this.$nextTick(() => {
|
setTimeout(() => {
|
mapInfo.init(data.name);
|
}, 1000);
|
});
|
}
|
}
|
}
|
},
|
setRagMoreList(res) {
|
const obj = this.$store.state.ragList
|
const val_data = obj.filter(item => {
|
if (item.quest === res) {
|
return item;
|
}
|
});
|
if (val_data.length <= 0) return
|
|
this.$store.state.ragList = obj;
|
const val_obj = val_data[0]
|
const key = val_obj.index;
|
const val = val_obj.val;
|
this.list[key].list[0].more = false;
|
var flag = 1;
|
var intValTime = setInterval(() => {
|
if (flag >= val.length) {
|
const obj = JSON.parse(JSON.stringify(this.list))
|
this.list = obj
|
for (var i in obj) {
|
if (obj[i].quest === res) {
|
obj.splice(i, 1)
|
}
|
}
|
|
clearInterval(intValTime)
|
return
|
}
|
const valitem = val[flag];
|
const roleMsg = msgData.getRagData(valitem, false, "");
|
this.list[key].list.push(roleMsg[0])
|
flag++
|
}, 1000);
|
|
},
|
setRagInterval(flag, index, res) {
|
if (flag < res.length) {
|
const obj = res[flag]
|
|
this.list[index].list.push(roleMsg[0])
|
setTimeout(() => {
|
flag++;
|
this.setRagInterval(flag, index, res)
|
}, 1000);
|
} else {
|
return
|
}
|
},
|
async setV1Fastgpt(res) {
|
const data = await getV1Fastgpt(res);
|
|
const length = this.list.length - 1;
|
const obj = data[0].quoteList
|
this.$store.state.ragList.push({
|
quest: res,
|
index: length,
|
val: obj
|
})
|
var roleMsg = msgData.getRagData(obj[0], true, res);
|
this.list[length].list = roleMsg
|
this.loading = false;
|
},
|
setMarkDownInfo(res) {
|
var roleMsg = msgData.getRole("markDown", res);
|
this.list.push(roleMsg.msg);
|
//
|
},
|
setMapInfo(res) {
|
var msg = "";
|
if (res.type === "erroInfo") {
|
msg = "<div>异常查询</div>" + res.value;
|
}
|
this.getMsg("role", msg);
|
this.setMsgStart(res.value);
|
},
|
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);
|
}
|
},
|
setShowMsg() {
|
if (this.msgData.text) {
|
this.setMsgText();
|
} else if (this.msgData.img) {
|
this.setMsgImg();
|
}
|
},
|
setMsgText() {
|
if (this.msgData.text) {
|
msgData.setmsgText(this.msgData.text);
|
}
|
},
|
setMsgImg() {
|
if (this.msgData.img) {
|
var val = msgData.setmsgImg(this.msgData.img);
|
|
this.list.push(val);
|
}
|
},
|
setMsgtab() {
|
if (this.msgData.tab) {
|
var val = msgData.setmsgtab(this.msgData.tab);
|
|
this.list.push(val);
|
}
|
},
|
setLoading() {
|
const loader = msgData.getLoader();
|
this.list.push(loader);
|
this.loading = true;
|
},
|
getLoadingFlag() {
|
if (this.list.length == 0) {
|
return;
|
}
|
var load = this.list[this.list.length - 1].text;
|
if ((load.indexOf = "loading" > -1)) {
|
return true;
|
}
|
return false;
|
}
|
}
|
};
|
</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>
|
