<template>
|
<!-- 聊连页面记录 -->
|
<div class="Followupdetailspage">
|
<div>
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>{{ TemplateName }}</span>
|
<el-button
|
style="float: right; padding: 3px 0; color: red"
|
type="text"
|
@click="$router.go(-1)"
|
>退出测试</el-button
|
>
|
<el-button
|
style="float: right; padding: 3px 0; margin-right: 10px"
|
type="text"
|
@click="drawer = true"
|
>查看匹配结果</el-button
|
>
|
</div>
|
<div class="borderdiv">
|
<div v-for="item in Answerline">
|
<div class="leftside" v-if="item.isEat == 1">
|
<i class="el-icon-phone-outline"></i><span>{{ item.value }}</span>
|
</div>
|
<div class="offside" v-else-if="item.isEat == 2">
|
<i class="el-icon-user"></i>
|
<div class="offside-value">
|
<el-input :disabled="true" v-model="item.value"></el-input>
|
</div>
|
</div>
|
<div class="offside" v-else-if="item.isEat == 3">
|
<i class="el-icon-user"></i>
|
<div class="offside-value">
|
<el-input v-model="item.value"></el-input>
|
<el-radio v-model="radio" label="1">备选项</el-radio>
|
<el-radio v-model="radio" label="2">备选项2</el-radio>
|
<el-radio v-model="radio" label="3">备选项3</el-radio>
|
<el-radio v-model="radio" label="4">备选项4</el-radio>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="margin-top: 15px">
|
<el-input
|
placeholder="请输入内容"
|
@keyup.enter.native="sendFn"
|
v-model="answer"
|
>
|
<el-button
|
style="background-color: #7799fa; color: #ffff; border: 0"
|
@click="sendFn"
|
slot="append"
|
type="primary"
|
>发送</el-button
|
>
|
</el-input>
|
</div>
|
</el-card>
|
<el-drawer title="匹配结果" :visible.sync="drawer" direction="rtl">
|
<div class="preview-left">
|
<!-- 单选 -->
|
<div
|
class="topic-dev"
|
v-for="(item, index) in questionList"
|
:key="item.aaa"
|
>
|
<div class="dev-text">
|
{{ index + 1 }}、<span>{{ item.scriptContent }}</span>
|
</div>
|
|
<div class="dev-xx" v-if="item.valueType == 1">
|
<el-radio-group v-model="item.radio">
|
<el-radio
|
v-for="(items, index) in item.ivrLibaScriptTargetoptionList"
|
:key="items.id"
|
:label="items.id"
|
>{{ items.targetvalue }}</el-radio
|
>
|
</el-radio-group>
|
</div>
|
<div v-else>
|
<el-input
|
type="textarea"
|
placeholder="未获取到信息"
|
v-model.sync="item.questionResult"
|
:rows="2"
|
/>
|
</div>
|
</div>
|
</div>
|
</el-drawer>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
sendWebsocket,
|
websocketSend,
|
closeWebsocket,
|
} from "@/websocket/websocket.js";
|
import store from "@/store";
|
export default {
|
data() {
|
return {
|
answer: "", //回答
|
id: null,
|
TemplateName: "随访模板名称", //模板名
|
radio: "1",
|
userid: "",
|
input: "还不错",
|
drawer: false,
|
radio: "2",
|
code: "",
|
timeout: "5",
|
Answerline: [],
|
questionList: [],
|
};
|
},
|
|
created() {
|
this.TemplateName = this.$route.query.name;
|
this.userid = store.getters.Id;
|
console.log(store.getters.Id,'11');
|
|
this.requstWs(); //进入页面创建连接
|
},
|
mounted() {
|
// 获取class为borderdiv的元素
|
const borderdiv = document.querySelector(".borderdiv");
|
|
// 创建一个MutationObserver实例，用于监听元素的变化
|
const observer = new MutationObserver(() => {
|
// 当元素高度变化时，将滚动条滚动到最下方
|
borderdiv.scrollTop = borderdiv.scrollHeight;
|
});
|
|
// 配置MutationObserver实例的观察目标和观察选项
|
observer.observe(borderdiv, {
|
attributes: true,
|
childList: true,
|
subtree: true,
|
});
|
|
// 当不再需要监听时，可以使用disconnect方法停止观察
|
// observer.disconnect();
|
},
|
|
methods: {
|
// 建立连接
|
requstWs(message, next, file) {
|
console.log("连接");
|
this.id = this.$route.query.id;
|
this.timeout = this.$route.query.timeout;
|
// 防止用户多次连续点击发起请求，所以要先关闭上次的ws请求。
|
closeWebsocket();
|
console.log(this.id);
|
const obj = {
|
type: "text",
|
userId: this.userid,
|
templateId: this.id,
|
content: null,
|
};
|
// 发起ws请求
|
sendWebsocket(
|
"ws://192.168.2.13:8095/chat?userId="+this.userid,
|
obj,
|
this.wsMessage,
|
this.wsError
|
);
|
},
|
// 接收ws返回的数据
|
wsMessage(data) {
|
let dataJson = data;
|
let timerId = null;
|
dataJson = JSON.parse(dataJson);
|
dataJson = JSON.parse(dataJson);
|
console.log(dataJson, "数据");
|
// 首次接收数据
|
// if (!this.Answerline[0]) {
|
// this.Answerline.push({
|
// value: dataJson.kcb,
|
// isEat: 1,
|
// });
|
// }
|
timerId = setTimeout(() => {
|
if (!this.answer) {
|
this.sendFn(); // 后调用
|
}
|
}, this.timeout * 1000);
|
if (condition) {
|
|
}
|
// clearTimeout(timerId)
|
// 优先加入通用库匹配文本
|
if (dataJson.nowQuestion.submoduleText) {
|
this.Answerline.push({
|
value: dataJson.nowQuestion.submoduleText,
|
isEat: 1,
|
});
|
}
|
// 是否结束
|
if (dataJson.jsy) {
|
this.Answerline.push({
|
value: dataJson.jsy,
|
isEat: 1,
|
});
|
} else if (dataJson.nowQuestion.scriptContent) {
|
this.Answerline.push({
|
value: dataJson.nowQuestion.scriptContent,
|
isEat: 1,
|
});
|
}
|
this.questionList = dataJson.questionList;
|
this.questionList = this.questionList.map((item) => {
|
item.ivrLibaScriptTargetoptionList.forEach((row) => {
|
if (row.isUserOperation) {
|
item.radio = row.id;
|
}
|
});
|
return item;
|
});
|
console.log(this.questionList);
|
|
// IMUI.appendMessage(data);
|
},
|
//ws错误回调
|
wsError(data) {
|
console.log(data);
|
},
|
|
sendFn() {
|
console.log("发送");
|
|
// 消息发送
|
const obj = {
|
type: "text",
|
userId: this.userid,
|
templateId: "",
|
questionMessage: { content: this.answer },
|
};
|
console.log(obj, "入参");
|
// 发起ws请求
|
sendWebsocket(
|
"ws://192.168.2.13:8095/chat?userId="+this.userid,
|
obj,
|
this.wsMessage,
|
this.wsError
|
);
|
this.Answerline.push({
|
value: this.answer,
|
isEat: 2,
|
});
|
this.answer = "";
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.Followupdetailspage {
|
margin: 10px;
|
}
|
.Followuserinfo {
|
margin: 20px 10px;
|
align-items: center;
|
padding: 30px;
|
background: #ffff;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
.userinfo-text {
|
font-size: 20px;
|
margin-right: 20px;
|
margin-bottom: 10px;
|
}
|
.userinfo-value {
|
color: rgb(15, 139, 211);
|
span {
|
margin-right: 20px;
|
}
|
}
|
}
|
.borderdiv {
|
height: 100vh;
|
font-size: 20px;
|
padding: 30px;
|
max-height: 700px;
|
overflow: auto;
|
.leftside {
|
margin-bottom: 30px;
|
max-width: 566px;
|
margin-left: 20px;
|
padding: 10px;
|
color: #fff;
|
background: rgb(110, 196, 247);
|
border-radius: 10px;
|
span {
|
word-wrap: break-word;
|
}
|
}
|
.offside {
|
display: flex;
|
flex-direction: row-reverse;
|
margin-bottom: 10px;
|
.offside-value {
|
padding: 10px;
|
background: rgb(217, 173, 253);
|
border-radius: 10px;
|
color: #fff;
|
margin-right: 20px;
|
}
|
}
|
}
|
.preview-left {
|
margin: 20px;
|
// margin: 20px;
|
padding: 30px;
|
background: #ffff;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
.topic-dev {
|
margin-bottom: 25px;
|
font-size: 20px !important;
|
.dev-text {
|
margin-bottom: 10px;
|
}
|
}
|
}
|
::v-deep.offside-value .el-radio__label {
|
color: #fff;
|
}
|
::v-deep.el-input.is-disabled .el-input__inner {
|
background-color: #fff;
|
border-color: #dfe4ed;
|
color: #000;
|
cursor: not-allowed;
|
}
|
.mulsz {
|
font-size: 25px;
|
margin-top: 20px;
|
}
|
.text {
|
font-size: 14px;
|
}
|
|
.item {
|
margin-bottom: 18px;
|
}
|
.clearfix {
|
font-size: 20px;
|
}
|
.clearfix:before,
|
.clearfix:after {
|
display: table;
|
content: "";
|
}
|
.clearfix:after {
|
clear: both;
|
}
|
</style>
|
