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

src/assets/styles/askRequest.css

@@ -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;
-}
 
 
 

src/views/Violation/Violation.vue

@@ -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>

src/views/askRequest/askRequest.vue

@@ -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 class="boxLevelTwoAskReques boxLevelTwoAskRequesSnd">
                     <boxHeader :boxHeaderText="'最近7天统计'"></boxHeader>
-                    <div class="ask_request">
+                    <diagHistory ref="diagHis" :diagContentTmp="diagContentTmpMain"></diagHistory>
-                        <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>
                 </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>

src/views/askRequest/diagHistory.vue

@@ -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>

src/views/askRequest/dialogue.vue

@@ -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>