weiweiw
/
Bonus-AI-LargeScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

人工智能对话界面组件间联动

This commit is contained in:
chengwenyou 2024-08-02 11:15:04 +08:00
parent 00a4e8c85a
commit ca7ccdfbec
5 changed files with 173 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/assets/styles/askRequest.css
View File

@ -76,79 +76,12 @@ body {
letter-spacing: .3rem;
}
.picOne {
position: absolute;
/* top: .625rem; */
width: 22.4375rem;
z-index: 1;
opacity: 0.3;
}
.picOneDom {
margin-top: 2rem;
margin-left: 15%;
height: 35%;
position: relative;
font-size: 1.125rem;
font-weight: bold;
letter-spacing: .2rem;
}
.searchIcon {
position: absolute;
top: 3.35rem;
left: 5.25rem;
width: 1.4375rem;
z-index: 2;
cursor: pointer;
}
.buttonText {
opacity: 1;
color: #FFFFFF;
/* background-color: transparent; */
position: absolute;
top: 3.35rem;
left: 8.5rem;
z-index: 3;
font-style: italic;
}
.ask_request {
height: 85%;
display: flex;
flex-direction: column;
}
.ask_req_box {
background-image: url(../../assets/images/askReqTextBack.png);
background-size: cover;
background-position: center;
flex: 1;
margin-top: 1rem;
/* background-color: aqua; */
margin-left: 2rem;
margin-right: 2rem;
}
.ask {
padding-top: .3rem;
font-size: 1.2rem;
font-weight: 600;
color: #FFFFFF;
padding-left: 1rem;
}
.request {
padding-top: .3rem;
font-size: .8rem;
font-weight: 400;
color: #FFFFFF;
padding-left: 1rem;
}

4
src/views/Violation/Violation.vue
View File

@ -1,14 +1,11 @@
<template>
<div class="main">
<largeScreenHeader></largeScreenHeader>
<div class="mainContent">
<div class="boxLevelOne leftBoxLevelOne">
<div class="boxLevelTwo boxLevelTwoFst">
<boxHeader :boxHeaderText="'识别结果统计'"></boxHeader>
<div class="circlecharts">
<div class="circlechartsone" ref="chartsPie"></div>
<div class="pieTextDom">
@ -70,7 +67,6 @@
</div>
<div class="IDCardNegative1Vio">
<button class="IDButton">识别</button>
<img src="../../assets/images/recognizeVio.png" alt="error" class="IDCardNegativeImg1">
</div>

123
src/views/askRequest/askRequest.vue
View File

@ -1,54 +1,40 @@
<template>
<div class="main">
<largeScreenHeader></largeScreenHeader>
<div class="mainContentAskRequest">
<div class="boxLevelOneAskReques sideBoxLevelOneAskReques">
<div class="boxLevelTwoAskReques boxLevelTwoAskRequesFst">
<boxHeader :boxHeaderText="'识别结果统计'"></boxHeader>
<div class="picOneDom">
<span class="buttonText">新增对话</span>
<span class="buttonText" @click="addClick">新增对话</span>
<img src="../../assets/images/picOne.png" alt="error" class="picOne">
<img src="../../assets/icons/searchIcon.png" alt="error" class="searchIcon"
@click="searchClick">
@click="addClick">
</div>
<div class="picOneDom">
<span class="buttonText">搜索历史记录</span>
<span class="buttonText" @click="searchIcon">搜索历史记录</span>
<img src="../../assets/images/picOne.png" alt="error" class="picOne">
<img src="../../assets/icons/addIcon.png" alt="error" class="searchIcon" @click="addClick">
<img src="../../assets/icons/addIcon.png" alt="error" class="searchIcon" @click="searchIcon">
<el-select v-model="value" multiple filterable remote reserve-keyword placeholder="请输入关键词"
v-if="isSearch" :remote-method="remoteMethod" :loading="loading"
style="position: absolute;left:10%;top:80%">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</div>
</div>
<div class="boxLevelTwoAskReques boxLevelTwoAskRequesSnd">
<boxHeader :boxHeaderText="'最近7天统计'"></boxHeader>
<div class="ask_request">
<div class="ask_req_box">
<div class="ask">frwrerfwef</div>
<div class="request">rfwerfref</div>
</div>
<div class="ask_req_box ask_req_box2">
<div class="ask">rfwrf</div>
<div class="request">rfwef</div>
</div>
<div class="ask_req_box">
<div class="ask">rfwerfer</div>
<div class="request">wrfwerfrefr3</div>
</div>
<div class="ask_req_box">
<div class="ask">eew</div>
<div class="request">fwerfewffvwrfvwrf</div>
</div>
</div>
<diagHistory ref="diagHis" :diagContentTmp="diagContentTmpMain"></diagHistory>
</div>
</div>
<div class="boxLevelOneAskReques midBoxLevelOneAskReques">
<boxHeader :boxHeaderText="'大模型问答应用'"></boxHeader>
<dialogue></dialogue>
<dialogue @textChange="updateDiagContent" ref="dialogueContent"></dialogue>
</div>
@ -61,24 +47,43 @@
import largeScreenHeader from '@/components/LargeScreen'
import boxHeader from '@/views/components/boxHeader.vue'
import dialogue from '@/views/askRequest/dialogue.vue'
import diagHistory from '@/views/askRequest/diagHistory.vue'
export default {
components: {
largeScreenHeader,
boxHeader,
dialogue
dialogue,
diagHistory
},
data() {
return {
isSearch: false,
value: '',
diagContentTmpMain: ''
}
},
methods: {
getTextContent() {
this.diagContentTmpMain = this.$refs.dialogueContent.text
},
updateDiagContent() {
this.getTextContent()
// console.log(this.diagContentTmpMain + '1111')
this.$refs.diagHis.createHistoryContent()
searchClick() {
// 在这里添加点击图片时的操作
},
addClick() {
this.updateDiagContent()
console.log('图片被点击了！');
// 可以在这里添加任何你想要执行的操作，比如打开一个模态框、跳转到另一个页面等
},
addClick() {
// 在这里添加点击图片时的操作
searchIcon() {
this.isSearch = !this.isSearch
console.log('图片被点击了！');
// 可以在这里添加任何你想要执行的操作，比如打开一个模态框、跳转到另一个页面等
},
@ -87,11 +92,7 @@ export default {
},
},
data() {
return {
inputText: ''
}
},
created() {
setInterval(this.updateDateTime, 1000);
},
@ -101,7 +102,43 @@ export default {
<style>
@import url('./../../assets/styles/askRequest.css');
el-input{
width: 19rem !important;
.picOneDom {
margin-top: 1rem;
margin-left: 15%;
height: 35%;
position: relative;
font-weight: bold;
letter-spacing: .2rem;
}
.picOne {
position: absolute;
width: 80%;
z-index: 1;
opacity: 0.3;
}
.buttonText {
color: #FFFFFF;
font-size: 1.2rem;
position: absolute;
top: 2.8rem;
left: 7.5rem;
z-index: 3;
font-style: italic;
cursor: pointer;
}
.searchIcon {
position: absolute;
top: 3rem;
left: 4.3rem;
width: 1.4375rem;
z-index: 2;
cursor: pointer;
}
</style>

85
src/views/askRequest/diagHistory.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<div class="diagHisBox" ref="diagHisBox">
</div>
</template>
<script>
export default {
name: 'diagHistory',
props: ['diagContentTmp'],
data() {
return {
diagTitle: '',
diagContent: ''
}
},
watch: {
diagContentTmp(newVal, oldVal) {
let tmp = newVal
console.log(tmp.length)
if(tmp.length > 24){
this.diagContent = tmp.substring(0, 24) + '...';
}
else{
this.diagContent = tmp
}
}
},
methods: {
createHistoryContent() {
let htmlHis
let htmlBox = this.$refs.diagHisBox
htmlHis = "<div class=\"ask_req_box\" >\n" +
"<div class=\"ask\" style=\"padding-top: 2rem;font-size: 1.2rem;font-weight: 600;color: #FFFFFF;\">" + this.diagTitle + "</div>\n" +
"<div class=\"request\">" + this.diagContent + "</div>\n" +
"</div>"
console.log(htmlHis)
htmlBox.innerHTML = htmlHis
}
}
}
</script>
<style scoped>
.diagHisBox {
margin-left: 2rem;
display: flex;
color: #fff;
flex-direction: column;
}
.ask_req_box {
background-image: url(../../assets/images/askReqTextBack.png);
background-size: cover;
background-position: center;
flex: 1;
background-color: aqua;
margin-top: 1rem;
margin-left: 2rem;
margin-right: 2rem;
}
.ask {
padding-top: .3rem;
font-size: 1.2rem;
font-weight: 600;
color: #FFFFFF;
padding-left: 1rem;
}
.request {
margin-top: 1.3rem;
font-size: .8rem;
font-weight: 400;
color: #FFFFFF;
padding-left: 1rem;
}
</style>

8
src/views/askRequest/dialogue.vue
View File

@ -39,6 +39,12 @@ export default {
created() {
this.init()
},
watch: {
text(newVal,oldVal) {
this.$emit('textChange')
console.log("text改变了")
}
},
methods: {
send() {
if (!this.text) {
@ -50,6 +56,7 @@ export default {
this.messages.push({ user: this.username, text: this.text });
console.log(this.messages)
this.createContent(null, this.username, this.text);
this.text = '';
sendAIRequest(formData).then(res => {
if (res.code == 200) {
@ -179,4 +186,5 @@ export default {
right: 3.5%;
bottom: 20%
}
</style>