|
@@ -1,120 +1,81 @@
|
|
|
<template>
|
|
|
<div class="main_right_height">
|
|
|
<div class="smart_content">
|
|
|
- <el-row>
|
|
|
- <!-- <el-col :span="1"> </el-col> -->
|
|
|
- <el-col :span="24">
|
|
|
- <div
|
|
|
- class="chat-window"
|
|
|
- id="contant1"
|
|
|
- ref="scrollview"
|
|
|
- style="margin-top: 20px"
|
|
|
- >
|
|
|
- <div v-if="echoFlag" style="text-align: center">
|
|
|
- <i class="el-icon-loading"></i>
|
|
|
+ <div style="height:30px"> </div>
|
|
|
+
|
|
|
+ <div class="chat-window" id="contant1" ref="scrollview" style="margin-top: 20px">
|
|
|
+ <!-- <div class="chat-window" id="contant1" ref="scrollview" style="margin-top: 20px"> -->
|
|
|
+ <div v-if="echoFlag" style="text-align: center">
|
|
|
+ <i class="el-icon-loading"></i>
|
|
|
+ </div>
|
|
|
+ <div class="chat-msg-content" id="rongqi" v-for="content in chatContents" :key="content.index">
|
|
|
+ <div v-if="content.from == 1" :key="content.id" class="main_answer_right"
|
|
|
+ style="margin-top: 10px; padding-left: 20px">
|
|
|
+ <div class="img-wrapper">
|
|
|
+ <img width="60px" heigth="60px" class="img" :src="from1" />
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="chat-msg-content"
|
|
|
- id="rongqi"
|
|
|
- v-for="content in chatContents"
|
|
|
- :key="content.index"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-if="content.from == 1"
|
|
|
- :key="content.id"
|
|
|
- class="main_answer_right"
|
|
|
- style="margin-top: 10px; padding-left: 20px"
|
|
|
- >
|
|
|
- <div class="img-wrapper">
|
|
|
- <img width="60px" heigth="60px" class="img" :src="from1" />
|
|
|
+ <div class="message-wrapper message-wrapper-left">
|
|
|
+ <!-- {{ content.question }} -->
|
|
|
+ <div class="message" v-html="content.question"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-row v-else style="margin-top: 10px; padding-right: 20px">
|
|
|
+ <el-col :span="10"> </el-col>
|
|
|
+ <el-col :span="14">
|
|
|
+ <div class="main_answer_left" style="float: right">
|
|
|
+ <div class="message-wrapper message-wrapper-right">
|
|
|
+ <div class="message">{{ content.answer }}</div>
|
|
|
</div>
|
|
|
- <div class="message-wrapper message-wrapper-left">
|
|
|
- <!-- {{ content.question }} -->
|
|
|
- <div class="message" v-html="content.question"></div>
|
|
|
+ <div class="img-wrapper">
|
|
|
+ <img width="60px" heigth="60px" class="img" :src="from2" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-row v-else style="margin-top: 10px; padding-right: 20px">
|
|
|
- <el-col :span="10"> </el-col>
|
|
|
- <el-col :span="14">
|
|
|
- <div class="main_answer_left" style="float: right">
|
|
|
- <div class="message-wrapper message-wrapper-right">
|
|
|
- <div class="message">{{ content.answer }}</div>
|
|
|
- </div>
|
|
|
- <div class="img-wrapper">
|
|
|
- <img width="60px" heigth="60px" class="img" :src="from2" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <!-- <el-col :span="1"> </el-col> -->
|
|
|
- </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="smart_line_class"></div>
|
|
|
<el-row v-show="inputFlag === 1" class="footSend">
|
|
|
<!-- <el-col :span="1"> </el-col> -->
|
|
|
- <el-col :span="22">
|
|
|
- <el-input
|
|
|
- class="xl_input"
|
|
|
- type="textarea"
|
|
|
- resize="none"
|
|
|
- placeholder="请输入内容"
|
|
|
- v-model="desc"
|
|
|
- show-word-limit
|
|
|
- @keyup.enter.native="sendMsg"
|
|
|
- clearable
|
|
|
- >
|
|
|
+ <div style="flex:1">
|
|
|
+ <el-input class="xl_input" type="textarea" resize="none" placeholder="请输入内容" v-model="desc" show-word-limit
|
|
|
+ @keyup.enter.native="sendMsg" clearable>
|
|
|
</el-input>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" style="">
|
|
|
-
|
|
|
- <!-- {{sendMsgFlag}}
|
|
|
- {{desc.length>0}}
|
|
|
- !((!sendMsgFlag)||(desc.length>0)) -->
|
|
|
- <el-button
|
|
|
- :disabled="desc.length == 0 || buttonFlag"
|
|
|
- class="xl_d_send"
|
|
|
- @click="sendMsg"
|
|
|
- >发送</el-button
|
|
|
- >
|
|
|
- </el-col>
|
|
|
+ </div>
|
|
|
+ <!-- <el-col :span="21">
|
|
|
+
|
|
|
+ </el-col> -->
|
|
|
+ <div class="send_buttom_style">
|
|
|
+ <div style="flex:1"> </div>
|
|
|
+ <el-button :disabled="desc.length == 0 || buttonFlag" class="xl_d_send"
|
|
|
+ @click="sendMsg">发 送</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- <el-col :span="3" class="send_buttom_style" style="">
|
|
|
+ <div style="flex:1"> </div>
|
|
|
+ <el-button :disabled="desc.length == 0 || buttonFlag" class="xl_d_send"
|
|
|
+ @click="sendMsg">发 送</el-button>
|
|
|
+ </el-col> -->
|
|
|
</el-row>
|
|
|
<el-row v-show="inputFlag === 2" class="footSendSelect">
|
|
|
<el-col :span="1"> </el-col>
|
|
|
<el-col :span="22" style="margin-top: 20px; margin-bottom: 20px">
|
|
|
<div>
|
|
|
- <el-radio
|
|
|
- style="margin-top: 10px"
|
|
|
- v-for="(item, index) in scale_checkItems"
|
|
|
- :key="index"
|
|
|
- v-model="radio"
|
|
|
- :label="item"
|
|
|
- fill="#57ACBB"
|
|
|
- @change="selectRadio(item)"
|
|
|
- >{{ item }}</el-radio
|
|
|
- >
|
|
|
- </div></el-col
|
|
|
- >
|
|
|
+ <el-radio style="margin-top: 10px" v-for="(item, index) in scale_checkItems" :key="index" v-model="radio"
|
|
|
+ :label="item" fill="#57ACBB" @change="selectRadio(item)">{{ item }}</el-radio>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
<el-col :span="1"> </el-col>
|
|
|
</el-row>
|
|
|
<el-row v-show="inputFlag === 3" class="footSendSelect">
|
|
|
<el-col :span="1"> </el-col>
|
|
|
<el-col :span="22" style="margin-top: 20px; margin-bottom: 20px">
|
|
|
<div>
|
|
|
- <el-radio
|
|
|
- :disabled="!scaleSelectFlag"
|
|
|
- style="margin-top: 10px"
|
|
|
- v-for="(item, index) in scale_checkItems"
|
|
|
- :key="index"
|
|
|
- v-model="radio"
|
|
|
- :label="item"
|
|
|
- fill="#57ACBB"
|
|
|
- @change="choiceTriger(item)"
|
|
|
- >{{ item }}</el-radio
|
|
|
- >
|
|
|
- </div></el-col
|
|
|
- >
|
|
|
+ <el-radio :disabled="!scaleSelectFlag" style="margin-top: 10px" v-for="(item, index) in scale_checkItems"
|
|
|
+ :key="index" v-model="radio" :label="item" fill="#57ACBB" @change="choiceTriger(item)">{{ item
|
|
|
+ }}</el-radio>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
<el-col :span="1"> </el-col>
|
|
|
</el-row>
|
|
|
<el-row v-show="inputFlag === 4" class="footSendSelect">
|
|
@@ -126,22 +87,11 @@
|
|
|
<el-button @click="isMood(4)">应激</el-button>
|
|
|
<el-button @click="isMood(3)">睡眠</el-button> -->
|
|
|
<el-checkbox-group v-model="emotionMul">
|
|
|
- <el-checkbox
|
|
|
- @change="mulItem(item.name)"
|
|
|
- v-for="item in scale_MulItems"
|
|
|
- :label="item.name"
|
|
|
- :disabled="item.disable"
|
|
|
- :key="item.name"
|
|
|
- >{{ item.name }}</el-checkbox
|
|
|
- >
|
|
|
+ <el-checkbox @change="mulItem(item.name)" v-for="item in scale_MulItems" :label="item.name"
|
|
|
+ :disabled="item.disable" :key="item.name">{{ item.name }}</el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
- <el-button
|
|
|
- @click="selectionComplete"
|
|
|
- size="mini"
|
|
|
- class="smart_mul_button_select"
|
|
|
- :disabled="emotionMul.length == 0"
|
|
|
- >确认选择</el-button
|
|
|
- >
|
|
|
+ <el-button @click="selectionComplete" size="mini" class="smart_mul_button_select"
|
|
|
+ :disabled="emotionMul.length == 0">确认选择</el-button>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="1"> </el-col>
|
|
@@ -223,7 +173,7 @@ export default {
|
|
|
currenRecordTotol: 0,
|
|
|
};
|
|
|
},
|
|
|
- created() {},
|
|
|
+ created() { },
|
|
|
|
|
|
mounted() {
|
|
|
window.jumpPage = this.jumpPage;
|
|
@@ -249,6 +199,7 @@ export default {
|
|
|
methods: {
|
|
|
handleScroll() {
|
|
|
let scrollview = this.$refs["scrollview"];
|
|
|
+ console.log(scrollview.scrollTop)
|
|
|
if (scrollview.scrollTop == 0) {
|
|
|
//当前没有调接口的时候
|
|
|
if (!this.echoFlag) {
|
|
@@ -829,7 +780,6 @@ export default {
|
|
|
//`http://127.0.0.1:9998/chat`
|
|
|
//http://127.0.0.1:9998/chat
|
|
|
//http://ray-thunder.natapp1.cc/chat
|
|
|
- debugger;
|
|
|
HTTP_AXIOS({
|
|
|
method: "post",
|
|
|
url: `http://127.0.0.1:9998/chat`,
|
|
@@ -1025,9 +975,11 @@ export default {
|
|
|
.mainTable-top {
|
|
|
margin-top: 5%;
|
|
|
}
|
|
|
+
|
|
|
.mainTable-top-two {
|
|
|
margin-top: 10%;
|
|
|
}
|
|
|
+
|
|
|
.mainTable-tab {
|
|
|
cursor: pointer;
|
|
|
margin-left: 100px;
|
|
@@ -1038,26 +990,32 @@ export default {
|
|
|
height: 150px;
|
|
|
margin-bottom: 100px;
|
|
|
}
|
|
|
+
|
|
|
.mainTable-tab-p {
|
|
|
padding-top: 40px;
|
|
|
}
|
|
|
+
|
|
|
.musicTitle {
|
|
|
display: block;
|
|
|
font-size: 18px;
|
|
|
color: #57acbb;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
+
|
|
|
.main_answer_left {
|
|
|
display: flex;
|
|
|
/* text-align: left; */
|
|
|
}
|
|
|
+
|
|
|
.main_answer_right {
|
|
|
display: flex;
|
|
|
/* text-align: right; */
|
|
|
}
|
|
|
+
|
|
|
.message-wrapper {
|
|
|
background-color: #ffffff;
|
|
|
}
|
|
|
+
|
|
|
.message-wrapper-left {
|
|
|
margin-left: 10px;
|
|
|
/* border-radius: 0 1rem 1rem 1rem; */
|
|
@@ -1065,6 +1023,7 @@ export default {
|
|
|
max-width: 20.86667rem;
|
|
|
display: inline-table;
|
|
|
}
|
|
|
+
|
|
|
.message-wrapper-right {
|
|
|
margin-right: 10px;
|
|
|
border-radius: 4px 4px 4px 4px;
|
|
@@ -1074,6 +1033,7 @@ export default {
|
|
|
color: #ffffff;
|
|
|
/* margin-top: 25px; */
|
|
|
}
|
|
|
+
|
|
|
.message {
|
|
|
word-break: break-all;
|
|
|
padding: 18px;
|
|
@@ -1092,6 +1052,7 @@ export default {
|
|
|
line-height: 40px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+
|
|
|
.xl_d_button:hover {
|
|
|
background: rgb(87, 172, 187);
|
|
|
opacity: 1;
|
|
@@ -1101,6 +1062,7 @@ export default {
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
+
|
|
|
.xl_d_button:focus {
|
|
|
background: rgb(87, 172, 187);
|
|
|
opacity: 1;
|
|
@@ -1110,38 +1072,52 @@ export default {
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
+
|
|
|
.refrshSmart {
|
|
|
float: right;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
-.xl_input >>> .el-input__inner {
|
|
|
+
|
|
|
+.xl_input>>>.el-input__inner {
|
|
|
border: 0;
|
|
|
border-radius: 4px;
|
|
|
background-color: #f4f4f4;
|
|
|
+ height: 120px;
|
|
|
}
|
|
|
+
|
|
|
.footSend {
|
|
|
background: #ffffff;
|
|
|
- position: absolute;
|
|
|
- height: 80px;
|
|
|
+ /* position: absolute; */
|
|
|
+ height: 120px;
|
|
|
margin-left: 2%;
|
|
|
- width: 90%;
|
|
|
+ width: 96%;
|
|
|
border-radius: 14px;
|
|
|
- bottom: 50px;
|
|
|
+ margin-bottom: 35px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+
|
|
|
+ /* bottom: 50px; */
|
|
|
}
|
|
|
+
|
|
|
.smart_line_class {
|
|
|
/* background: #BBC5D4; */
|
|
|
- position: absolute;
|
|
|
+ /* position: absolute; */
|
|
|
height: 1px;
|
|
|
margin-left: 2%;
|
|
|
- width: 90%;
|
|
|
+ width: 96%;
|
|
|
border-radius: 14px;
|
|
|
bottom: 150px;
|
|
|
border-bottom: 1px solid #bbc5d4;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
-.footSend >>> .el-textarea__inner {
|
|
|
+
|
|
|
+.footSend>>>.el-textarea__inner {
|
|
|
border: 0px solid #ffffff !important;
|
|
|
border-radius: 14px !important;
|
|
|
+ height: 100px !important;
|
|
|
}
|
|
|
+
|
|
|
.footSendSelect {
|
|
|
background: #ffffff;
|
|
|
/* padding-bottom: 40px; */
|
|
@@ -1150,6 +1126,7 @@ export default {
|
|
|
width: 90%;
|
|
|
bottom: 40px;
|
|
|
}
|
|
|
+
|
|
|
.xl_d_send {
|
|
|
margin-top: 18px;
|
|
|
color: #087b50;
|
|
@@ -1161,7 +1138,11 @@ export default {
|
|
|
text-align: center;
|
|
|
border: 0px;
|
|
|
border-radius: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ width: 80px;
|
|
|
}
|
|
|
+
|
|
|
.xl_d_send:hover {
|
|
|
margin-top: 18px;
|
|
|
color: #087b50;
|
|
@@ -1172,7 +1153,10 @@ export default {
|
|
|
font-weight: 400;
|
|
|
text-align: center;
|
|
|
border-radius: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
+
|
|
|
.xl_d_send:focus {
|
|
|
margin-top: 18px;
|
|
|
color: #087b50;
|
|
@@ -1184,6 +1168,7 @@ export default {
|
|
|
text-align: center;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
+
|
|
|
.xl_d_send.is-disabled,
|
|
|
.xl_d_send.is-disabled:hover,
|
|
|
.xl_d_send.is-disabled:focus {
|
|
@@ -1202,29 +1187,49 @@ export default {
|
|
|
/* padding:40px; */
|
|
|
height: 100vh !important;
|
|
|
display: block !important;
|
|
|
- overflow-y: auto !important;
|
|
|
+ /* overflow-y: auto !important; */
|
|
|
+ overflow-y: hidden !important;
|
|
|
background-color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.smart_content {
|
|
|
height: 88%;
|
|
|
+ /* height: 88%; */
|
|
|
margin-top: 5%;
|
|
|
width: 94%;
|
|
|
margin-left: 3%;
|
|
|
border-radius: 40px;
|
|
|
background: #f6f6f6;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
+
|
|
|
.chat-window {
|
|
|
- /* overflow-y: scroll; */
|
|
|
- height: 70vh;
|
|
|
+ overflow-y: scroll;
|
|
|
+ /* height: 70vh; */
|
|
|
overflow: auto;
|
|
|
/* overflow-y:hidden; */
|
|
|
}
|
|
|
+
|
|
|
.smart_mul_button {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+
|
|
|
+.smart_mid {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.send_buttom_style {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
/* .contant1{
|
|
|
height:70vh;
|
|
|
overflow:auto;
|