<template>
|
<div class="msgListBox">
|
<div class="listBox" :class="[item.mine ? 'MineActive' : 'MineAway']" v-for="(item, index) in msgList"
|
:key="index" v-show="msgList.lenth != 0">
|
<img v-if="!item.mine" class="emoji" src="@/assets/images/agent/语义.png">
|
<div class="listContent" :class="[item.mine ? 'contentActive' : 'ContentAway']">
|
<div class="contTime" :class="[item.mine ? 'MineActive' : 'MineAway']">
|
{{ item.date }}
|
</div>
|
<div class="boxContent">
|
<div class="boxMenu" :class="[item.mine ? 'boxActive' : 'boxAway']" v-for="(res, key) in item.msg"
|
:key="key">
|
<!-- text文字 -->
|
<div v-if="res.type == 'text'">
|
<agent-text :id="item.id + key" :child-object="res"></agent-text>
|
</div>
|
<!-- loading -->
|
<div v-if="res.type == 'loading'">
|
<agent-load></agent-load>
|
</div>
|
<!-- rag -->
|
<div v-if="res.type == 'rag'">
|
<agent-rag :id="item.id + key" :child-object="res"></agent-rag>
|
</div>
|
<!-- insrtFile -->
|
<div v-if="res.type == 'insrtFile'">
|
{{ res }}
|
<agent-insert-file :id="item.id + key" :child-object="res"></agent-insert-file>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
|
<img v-if="item.mine" class="emoji" src="@/assets/images/agent/MIOTA.png">
|
|
</div>
|
<div class="listMneu" v-show="msgList.length == 0">
|
<img class="emoji" src="@/assets/images/agent/语义.png">
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import msgconfig from '@/assets/js/geoAgent/msgConfig';
|
import agentText from './child/agentText.vue';
|
import agentLoad from './child/agentLoad.vue';
|
import agentRag from './child/agentRag.vue';
|
import agentInsertFile from './child/agentInsertFile.vue';
|
import { rag_chat, rag_search, rag_upload } from "@/api/mapView/rag.js";
|
export default {
|
components: {
|
agentText,
|
agentLoad,
|
agentRag,
|
agentInsertFile
|
},
|
props: {
|
parentData: {
|
type: Object,
|
required: true
|
}
|
},
|
data() {
|
return {
|
msgList: [], textData: {}
|
}
|
},
|
watch: {
|
parentData: {
|
handler(newVal, oldVal) {
|
if (newVal) {
|
|
if (newVal.type == 'text') {
|
this.setUserMsg(newVal.msg);
|
} if (newVal.type == 'insertFile') {
|
this.setInsertFile(newVal);
|
}
|
|
}
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
methods: {
|
setInsertFile(res) {
|
const obj = msgconfig.initMsg({
|
type: res.type,
|
msg: res.msg,
|
mine: true,
|
})
|
console.log(obj);
|
this.msgList.push()
|
},
|
setUserMsg(res) {
|
this.msgList.push(msgconfig.initMsg({
|
type: 'text',
|
msg: res,
|
mine: true,
|
}))
|
|
this.getLoading();
|
this.$nextTick(() => {
|
this.getregMsgData(res);
|
})
|
},
|
getLoading() {
|
this.msgList.push(msgconfig.initMsg({
|
type: 'loading',
|
msg: '',
|
mine: false,
|
}))
|
},
|
getregMsgData(res) {
|
rag_search(res).then(response => {
|
if (response.status != 200) {
|
this.setMsgError(res);
|
return
|
}
|
|
this.setMsgChange(msgconfig.initMsg({
|
type: 'rag',
|
msg: response.data,
|
mine: false,
|
}))
|
})
|
},
|
setMsgChange(res) {
|
const lenth = this.msgList.length - 1;
|
if (this.msgList[lenth].msg[0].type != 'loading') {
|
this.msgList.push(res)
|
} else {
|
this.msgList[lenth].msg = res.msg
|
}
|
},
|
setMsgError(res) {
|
const lenth = this.msgList.length - 1;
|
if (this.msgList[lenth].msg[0].type != 'loading') return;
|
this.msgList[lenth].msg = msgconfig.initMsg({
|
type: 'text',
|
msg: "未查询到 '" + res + "' 相关信息",
|
mine: false,
|
}).msg
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.msgListBox {
|
width: 100%;
|
height: 100%;
|
// background: #e7e7e7;
|
border-radius: 10px;
|
|
.listBox {
|
padding: 12px 16px;
|
display: flex;
|
width: 100%;
|
|
.listContent {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.contTime {
|
color: rgb(186, 191, 199);
|
font-size: 0.85rem;
|
line-height: 1rem;
|
margin-bottom: 8px;
|
width: 100%;
|
display: flex;
|
}
|
|
.boxContent {
|
flex: 1;
|
position: relative;
|
|
.boxMenu {
|
padding: .5rem .75rem;
|
border-radius: .375rem;
|
font-size: 14px;
|
line-height: 1.75;
|
margin-top: 8px;
|
|
}
|
|
.boxActive {
|
background: #daf8d4;
|
float: right;
|
|
}
|
|
.boxAway {
|
background: #f5f6f8;
|
float: left;
|
}
|
|
}
|
|
|
|
|
|
}
|
|
.contentActive {
|
margin-right: 15px;
|
}
|
|
.ContentAway {
|
margin-left: 15px;
|
}
|
|
.MineActive {
|
justify-content: flex-end;
|
}
|
|
.MineAway {
|
justify-content: flex-start;
|
}
|
|
.emoji {
|
width: 30px;
|
height: 30px;
|
}
|
|
.listMneu {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
img {
|
width: 40px;
|
height: 40px;
|
}
|
}
|
|
}
|
</style>
|
