You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
221 lines
5.8 KiB
221 lines
5.8 KiB
<template>
|
|
<div class="model-dialog-container" ref="modelDialogContainer">
|
|
<div class="model-dialog-title" @mousedown="startDrag">
|
|
模型信息查询
|
|
<i class="el-icon-close cloesIcon" @click="showModelDialog"></i>
|
|
</div>
|
|
<div class="model-dialog-content">
|
|
<div class="modelDialogContent" ref="modelDialogContent">
|
|
<!-- <div class="item" v-for="item in 100">11111111</div> -->
|
|
<!-- <div class="modelSend">
|
|
撒打算来到喀山水水水水水水水水水水水水水水水水水水水
|
|
</div>
|
|
<div class="modelReceive">
|
|
撒打算来到喀山水水水水水水水水水水水水水水水水水水水
|
|
</div> -->
|
|
</div>
|
|
<div class="input-box">
|
|
<el-input
|
|
class="input-box-input"
|
|
placeholder="请输入需要查询的内容"
|
|
v-model="modelName"
|
|
@keyup.enter="sendBtn"
|
|
></el-input>
|
|
<el-button @click="sendBtn">发送</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { semanticsModel } from "@/api/modelDialog/modelDialog.js";
|
|
import { set } from "nprogress";
|
|
export default {
|
|
data() {
|
|
return {
|
|
modelName: "",
|
|
isDragging: false,
|
|
offset: { x: 0, y: 0 },
|
|
};
|
|
},
|
|
methods: {
|
|
sendBtn(event) {
|
|
if (event && !event.isTrusted) return;
|
|
if (!this.modelName.trim()) return;
|
|
// 创建新元素
|
|
let newDiv = document.createElement("div");
|
|
newDiv.className = "modelSend";
|
|
newDiv.textContent = this.modelName;
|
|
// 添加到 .modelDialogContent 容器中
|
|
let container = this.$refs.modelDialogContent;
|
|
container.appendChild(newDiv);
|
|
let inputStr = this.modelName;
|
|
this.modelName = "";
|
|
// 滚动到底部
|
|
container.scrollTop = container.scrollHeight;
|
|
|
|
// ajax.....
|
|
semanticsModel({ text: inputStr }).then((res) => {
|
|
console.log(res, "模型返回");
|
|
if (res.code == 200) {
|
|
let str = res.data;
|
|
console.log(str, "模型数据处理");
|
|
let receiveDiv = document.createElement("div");
|
|
receiveDiv.classList.add("modelReceive", "modelReceiveTyping");
|
|
receiveDiv.textContent = str;
|
|
// 添加到 .content 容器中
|
|
// this.$refs.modelDialogContent.appendChild(receiveDiv);
|
|
container.appendChild(receiveDiv);
|
|
container.scrollTop = container.scrollHeight;
|
|
// this.typeWriterWithAutoScroll(str, receiveDiv, 50);
|
|
}
|
|
});
|
|
},
|
|
// typeWriterWithAutoScroll(text, element, speed) {
|
|
// let i = 0;
|
|
// // 清空容器
|
|
// element.html("");
|
|
// function typing() {
|
|
// if (i < text.length) {
|
|
// // 添加新字符
|
|
// element.append(text.charAt(i));
|
|
// // 自动滚动到底部
|
|
// $(".modelDialogContent").scrollTop(element[0].scrollHeight);
|
|
// i++;
|
|
// setTimeout(typing, speed);
|
|
// } else {
|
|
// // 完成时移除光标
|
|
// element.find(".typewriter-cursor").remove();
|
|
// element.classList.remove("modelReceiveTyping");
|
|
// }
|
|
// }
|
|
// // 开始打字效果
|
|
// typing();
|
|
// },
|
|
showModelDialog() {
|
|
console.log(111);
|
|
this.$emit("showModelDialog", false);
|
|
},
|
|
// 开始拖拽
|
|
startDrag(e) {
|
|
if (e.target !== e.currentTarget) return; // 防止点击子元素触发拖拽
|
|
this.isDragging = true;
|
|
const dialog = this.$refs.modelDialogContainer;
|
|
const rect = dialog.getBoundingClientRect();
|
|
this.offset = {
|
|
x: e.clientX - rect.left,
|
|
y: e.clientY - rect.top,
|
|
};
|
|
document.addEventListener("mousemove", this.onDrag);
|
|
document.addEventListener("mouseup", this.endDrag);
|
|
},
|
|
|
|
// 拖拽中
|
|
onDrag(e) {
|
|
if (!this.isDragging) return;
|
|
const dialog = this.$refs.modelDialogContainer;
|
|
const x = e.clientX - this.offset.x;
|
|
const y = e.clientY - this.offset.y;
|
|
dialog.style.left = `${x}px`;
|
|
dialog.style.top = `${y}px`;
|
|
},
|
|
|
|
// 结束拖拽
|
|
endDrag() {
|
|
this.isDragging = false;
|
|
document.removeEventListener("mousemove", this.onDrag);
|
|
document.removeEventListener("mouseup", this.endDrag);
|
|
},
|
|
|
|
showModelDialog() {
|
|
this.$emit("showModelDialog", false);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.model-dialog-container {
|
|
width: 500px;
|
|
height: 600px;
|
|
background-color: #0a0919;
|
|
position: fixed;
|
|
top: 120px;
|
|
/* right: 20px; */
|
|
left: calc(100% - 520px); /* 替代 right */
|
|
z-index: 999999;
|
|
border-radius: 5px;
|
|
/* border: 1px solid #006686; */
|
|
}
|
|
.model-dialog-title {
|
|
height: 46px;
|
|
line-height: 37px;
|
|
/* padding: 5px; */
|
|
padding-left: 40px;
|
|
background-image: url("../assets/right-title.png");
|
|
background-size: 100% 46px;
|
|
position: relative;
|
|
cursor: move;
|
|
}
|
|
.model-dialog-content {
|
|
padding: 10px;
|
|
width: 100%;
|
|
height: calc(100% - 46px);
|
|
}
|
|
.modelDialogContent {
|
|
width: 100%;
|
|
height: 90%;
|
|
border: 1px solid #006686;
|
|
border-radius: 5px;
|
|
overflow-y: scroll;
|
|
padding: 5px;
|
|
/* background: red; */
|
|
}
|
|
.modelDialogContent div {
|
|
margin-bottom: 5px;
|
|
}
|
|
.input-box {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
/* height: 10%; */
|
|
/* border: 1px solid #006686; */
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
.input-box-input {
|
|
width: 85%;
|
|
}
|
|
.modelSend {
|
|
width: 80%;
|
|
line-height: 24px;
|
|
background: #172533;
|
|
/* color: black; */
|
|
border-radius: 5px;
|
|
margin-left: 20%;
|
|
padding: 5px;
|
|
padding-right: 0px;
|
|
}
|
|
.modelReceive {
|
|
width: 80%;
|
|
line-height: 24px;
|
|
background: #1e4451;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
}
|
|
.queryHint {
|
|
width: 80%;
|
|
line-height: 24px;
|
|
background: #1e4451;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
}
|
|
.cloesIcon {
|
|
position: absolute;
|
|
right: 10px;
|
|
font-size: 30px;
|
|
top: 5px;
|
|
cursor: pointer;
|
|
z-index: 9999999;
|
|
}
|
|
</style>
|