|
|
|
|
@ -9,7 +9,7 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-dialog
|
|
|
|
|
:visible.sync="dialogVisible"
|
|
|
|
|
width="1200px"
|
|
|
|
|
width="1300px"
|
|
|
|
|
append-to-body
|
|
|
|
|
:before-close="handleClose"
|
|
|
|
|
>
|
|
|
|
|
@ -34,41 +34,8 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="conversation-content">
|
|
|
|
|
<div v-if="firstEnter" class="conversation-item-left">
|
|
|
|
|
<p class="title">案件助手</p>
|
|
|
|
|
<p>可通过对话咨询方式查询案件笔录、证据材料以及模型指标分析结果</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
v-for="(message, index) in conversationList"
|
|
|
|
|
:id="'message' + index"
|
|
|
|
|
:key="index"
|
|
|
|
|
class="conversation-item"
|
|
|
|
|
>
|
|
|
|
|
<div v-if="message.type === 'user'" class="flex-row user-message">
|
|
|
|
|
<span>{{ message['text'] }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="message.type === 'robot'" class="robot-message">
|
|
|
|
|
<div v-loading="!message.text">
|
|
|
|
|
<span class="robot-message-item">
|
|
|
|
|
<span class="label">指标名称：</span>
|
|
|
|
|
<span class="value">{{ message.name }}</span>
|
|
|
|
|
</span>
|
|
|
|
|
<span class="robot-message-item">
|
|
|
|
|
<span class="label">指标结果：</span>
|
|
|
|
|
<span class="value">{{ message.name }}</span>
|
|
|
|
|
</span>
|
|
|
|
|
<span class="robot-message-item">
|
|
|
|
|
<span class="point" />
|
|
|
|
|
<span class="label">笔录：</span>
|
|
|
|
|
<span class="value">{{ message.name }}</span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="16">
|
|
|
|
|
<div class="content-left">
|
|
|
|
|
<div ref="message" class="left-top" :style="{ height: height + 'px' }">
|
|
|
|
|
<div v-if="firstEnter" class="conversation-item">
|
|
|
|
|
@ -100,7 +67,7 @@
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
</el-collapse>
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<!-- <span>
|
|
|
|
|
<p>{{ `指标名称：${message['indexName']}` }}</p>
|
|
|
|
|
<p>{{ `笔录结果：${message['recordResult']}` }}</p>
|
|
|
|
|
<p>{{ `笔录信息：${message['recordInfo']}` }}</p>
|
|
|
|
|
@ -114,7 +81,7 @@
|
|
|
|
|
{{ item.fileName }}
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</span>
|
|
|
|
|
</span> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -152,33 +119,17 @@
|
|
|
|
|
:key="subItem.key"
|
|
|
|
|
class="index-item"
|
|
|
|
|
>
|
|
|
|
|
<el-tooltip placement="top" :content="subItem.shortName">
|
|
|
|
|
<!-- <el-tooltip placement="top" :content="subItem.shortName"> -->
|
|
|
|
|
<span :title="subItem.shortName" class="etc">{{ subItem.shortName }}</span>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
<div v-if="caseIndex !== ''|| baseForm.caseId" class="ask-button" @click="handelAsk(subItem)">提问</div>
|
|
|
|
|
<!-- </el-tooltip> -->
|
|
|
|
|
<!-- <div v-if="caseIndex !== ''|| baseForm.caseId" class="ask-button" @click="handelAsk(subItem)">提问</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="send-bottom">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="caseIndex"
|
|
|
|
|
placeholder="请输入咨询的案件指标......"
|
|
|
|
|
|
|
|
|
|
@keyup.enter.native="handleSend"
|
|
|
|
|
/>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
icon="el-icon-s-promotion"
|
|
|
|
|
:disabled="caseIndex === ''|| !baseForm.caseId"
|
|
|
|
|
@click="handleSend"
|
|
|
|
|
>
|
|
|
|
|
发送
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
@ -380,176 +331,114 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.conversation-content {
|
|
|
|
|
height: calc(100vh - 500px);
|
|
|
|
|
.flex-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
.content-left {
|
|
|
|
|
.left-top {
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
.conversation-item {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 0 24px;
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
.user-message {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
|
span {
|
|
|
|
|
max-width: 646px;
|
|
|
|
|
padding: 16px;
|
|
|
|
|
background: #ECF0FF;
|
|
|
|
|
border-radius: 16px 0px 16px 16px;font-size: 16px;
|
|
|
|
|
color: #333333;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
.case-assistant {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
color: $base-color-default;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.robot-message {
|
|
|
|
|
.robot-message-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
.point {
|
|
|
|
|
width: 5px;
|
|
|
|
|
height: 5px;
|
|
|
|
|
background-color: black;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
.label {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
.conversation-item>div>img {
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
border-radius: 15px;
|
|
|
|
|
}
|
|
|
|
|
.conversation-item>div>span {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
}
|
|
|
|
|
.user-message {
|
|
|
|
|
color: #333333;
|
|
|
|
|
}
|
|
|
|
|
.value {
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
.robot-message {
|
|
|
|
|
color: #333333;
|
|
|
|
|
>span {
|
|
|
|
|
background: #F2F8FF;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
p:nth-child(1) {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
p:nth-child(5) {
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.conversation-item-left {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #333333;
|
|
|
|
|
margin: 12px 24px;
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: #3763FF;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// .content-left {
|
|
|
|
|
// .left-top {
|
|
|
|
|
// overflow-y: auto;
|
|
|
|
|
// overflow-x: hidden;
|
|
|
|
|
// padding: 20px;
|
|
|
|
|
// box-sizing: border-box;
|
|
|
|
|
// .conversation-item {
|
|
|
|
|
// margin-bottom: 20px;
|
|
|
|
|
// .case-assistant {
|
|
|
|
|
// font-weight: 700;
|
|
|
|
|
// color: $base-color-default;
|
|
|
|
|
// margin-bottom: 0;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .conversation-item>div>img {
|
|
|
|
|
// width: 30px;
|
|
|
|
|
// height: 30px;
|
|
|
|
|
// border-radius: 15px;
|
|
|
|
|
// }
|
|
|
|
|
// .conversation-item>div>span {
|
|
|
|
|
// margin-left: 10px;
|
|
|
|
|
// flex: 1;
|
|
|
|
|
// line-height: 30px;
|
|
|
|
|
// }
|
|
|
|
|
// .user-message {
|
|
|
|
|
// color: #333333;
|
|
|
|
|
// }
|
|
|
|
|
// .robot-message {
|
|
|
|
|
// color: #333333;
|
|
|
|
|
// >span {
|
|
|
|
|
// background: #F2F8FF;
|
|
|
|
|
// border-radius: 8px;
|
|
|
|
|
// display: inline-block;
|
|
|
|
|
// padding: 10px;
|
|
|
|
|
// p:nth-child(1) {
|
|
|
|
|
// margin-top: 0;
|
|
|
|
|
// }
|
|
|
|
|
// p:nth-child(5) {
|
|
|
|
|
// margin-bottom: 8px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .left-bottom {
|
|
|
|
|
// border-top: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
|
|
// height: 100px;
|
|
|
|
|
// position: relative;
|
|
|
|
|
// .el-button {
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// bottom: 0;
|
|
|
|
|
// right: 20px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .content-right {
|
|
|
|
|
// border-left: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
|
|
// padding: 20px;
|
|
|
|
|
// box-sizing: border-box;
|
|
|
|
|
// .right-title {
|
|
|
|
|
// font-weight: bold;
|
|
|
|
|
// color: #333333;
|
|
|
|
|
// }
|
|
|
|
|
// .index-content {
|
|
|
|
|
// overflow-y: auto;
|
|
|
|
|
// overflow-x: hidden;
|
|
|
|
|
// .index-item {
|
|
|
|
|
// position: relative;
|
|
|
|
|
// height: 40px;
|
|
|
|
|
// line-height: 40px;
|
|
|
|
|
// cursor: pointer;
|
|
|
|
|
// padding: 0 8px;
|
|
|
|
|
// box-sizing: border-box;
|
|
|
|
|
// border-radius: 5px;
|
|
|
|
|
// width: 380px;
|
|
|
|
|
|
|
|
|
|
// >span {
|
|
|
|
|
// display: inline-block;
|
|
|
|
|
// width: 100%;
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
// text-overflow: ellipsis;
|
|
|
|
|
// white-space: nowrap;
|
|
|
|
|
// vertical-align: middle;
|
|
|
|
|
// }
|
|
|
|
|
// &:hover {
|
|
|
|
|
// background: #F2F6FD;
|
|
|
|
|
// .ask-button {
|
|
|
|
|
// display: inline-block;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .ask-button {
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// right: 8px;
|
|
|
|
|
// bottom: 8px;
|
|
|
|
|
// top: 8px;
|
|
|
|
|
// line-height: 24px;
|
|
|
|
|
// border: 1px solid #999999;
|
|
|
|
|
// color: #999999;
|
|
|
|
|
// border-radius: 5px;
|
|
|
|
|
// padding: 0 10px;
|
|
|
|
|
// text-align: center;
|
|
|
|
|
// z-index: 99;
|
|
|
|
|
// box-shadow: -10px 0 #F2F6FD;
|
|
|
|
|
// background: #ffffff;
|
|
|
|
|
// display: none;
|
|
|
|
|
// cursor: pointer;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
.send-bottom {
|
|
|
|
|
.left-bottom {
|
|
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 100px;
|
|
|
|
|
position: relative;
|
|
|
|
|
.el-button {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 24px;
|
|
|
|
|
right: 24px;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.content-right {
|
|
|
|
|
border-left: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
|
|
padding: 20px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
.right-title {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #333333;
|
|
|
|
|
}
|
|
|
|
|
.index-content {
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
.index-item {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 40px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 0 8px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
width: 380px;
|
|
|
|
|
|
|
|
|
|
>span {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
background: #F2F6FD;
|
|
|
|
|
.ask-button {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ask-button {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 8px;
|
|
|
|
|
bottom: 8px;
|
|
|
|
|
top: 8px;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
border: 1px solid #999999;
|
|
|
|
|
color: #999999;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
z-index: 99;
|
|
|
|
|
box-shadow: -10px 0 #F2F6FD;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
display: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
::v-deep {
|
|
|
|
|
|
