|
|
|
@ -9,7 +9,7 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<el-dialog
|
|
|
|
<el-dialog
|
|
|
|
:visible.sync="dialogVisible"
|
|
|
|
:visible.sync="dialogVisible"
|
|
|
|
width="65%"
|
|
|
|
width="1300px"
|
|
|
|
:show-close="false"
|
|
|
|
:show-close="false"
|
|
|
|
append-to-body
|
|
|
|
append-to-body
|
|
|
|
:before-close="handleClose"
|
|
|
|
:before-close="handleClose"
|
|
|
|
@ -20,15 +20,17 @@
|
|
|
|
<div class="flex-row" style="align-items: center;justify-content: space-between;margin: 10px 0">
|
|
|
|
<div class="flex-row" style="align-items: center;justify-content: space-between;margin: 10px 0">
|
|
|
|
<div class="flex-row form-row">
|
|
|
|
<div class="flex-row form-row">
|
|
|
|
<span>案件名称</span>
|
|
|
|
<span>案件名称</span>
|
|
|
|
<el-input v-model="baseForm['caseName']" placeholder="请输入案件名称" style="flex: 1" />
|
|
|
|
<el-select v-model="baseForm['caseId']" style="flex: 1;" clearable placeholder="请选择案件" @change="selectCase">
|
|
|
|
|
|
|
|
<el-option v-for="item in caseOptions" :key="item.id" :label="item.caseName" :value="item.id" />
|
|
|
|
|
|
|
|
</el-select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex-row form-row">
|
|
|
|
<div class="flex-row form-row">
|
|
|
|
<span>行为人</span>
|
|
|
|
<span>行为人</span>
|
|
|
|
<el-input v-model="baseForm['caseName']" placeholder="请输入案件名称" style="flex: 1" />
|
|
|
|
<el-input v-model="baseForm['caseActorName']" readonly placeholder="请输入行为人" style="flex: 1" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="config-button">
|
|
|
|
<!-- <div class="config-button">
|
|
|
|
<el-button type="text" icon="el-icon-check" style="width: 100%" @click="handleConfirm">确定</el-button>
|
|
|
|
<el-button type="text" icon="el-icon-check" style="width: 100%" @click="handleConfirm">确定</el-button>
|
|
|
|
</div>
|
|
|
|
</div> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
@ -48,9 +50,9 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
v-for="(message, index) in conversationList"
|
|
|
|
v-for="(message, index) in conversationList"
|
|
|
|
|
|
|
|
:id="'message' + index"
|
|
|
|
:key="index"
|
|
|
|
:key="index"
|
|
|
|
class="conversation-item"
|
|
|
|
class="conversation-item"
|
|
|
|
:id="'message' + index"
|
|
|
|
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div v-if="message.type === 'user'" class="flex-row user-message">
|
|
|
|
<div v-if="message.type === 'user'" class="flex-row user-message">
|
|
|
|
<img src="~@/assets/avatar/man.png">
|
|
|
|
<img src="~@/assets/avatar/man.png">
|
|
|
|
@ -58,7 +60,15 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-if="message.type === 'robot'" class="flex-row robot-message">
|
|
|
|
<div v-if="message.type === 'robot'" class="flex-row robot-message">
|
|
|
|
<img src="~@/assets/common/touxiang@2x.png">
|
|
|
|
<img src="~@/assets/common/touxiang@2x.png">
|
|
|
|
<span>
|
|
|
|
<span v-loading="!message.text">
|
|
|
|
|
|
|
|
<span>{{ message.text }}</span>
|
|
|
|
|
|
|
|
<el-collapse>
|
|
|
|
|
|
|
|
<el-collapse-item title="知识库匹配结果" :name="i">
|
|
|
|
|
|
|
|
<div v-for="(item ,i) in message.docs" :key="i" v-html="item" />
|
|
|
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
|
|
|
</el-collapse>
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<!-- <span>
|
|
|
|
<p>{{ `指标名称：${message['indexName']}` }}</p>
|
|
|
|
<p>{{ `指标名称：${message['indexName']}` }}</p>
|
|
|
|
<p>{{ `笔录结果：${message['recordResult']}` }}</p>
|
|
|
|
<p>{{ `笔录结果：${message['recordResult']}` }}</p>
|
|
|
|
<p>{{ `笔录信息：${message['recordInfo']}` }}</p>
|
|
|
|
<p>{{ `笔录信息：${message['recordInfo']}` }}</p>
|
|
|
|
@ -72,21 +82,21 @@
|
|
|
|
{{ item.fileName }}
|
|
|
|
{{ item.fileName }}
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</span>
|
|
|
|
</span> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="left-bottom">
|
|
|
|
<div class="left-bottom">
|
|
|
|
<el-input
|
|
|
|
<el-input
|
|
|
|
v-model="caseIndex"
|
|
|
|
v-model="caseIndex"
|
|
|
|
type="textarea"
|
|
|
|
|
|
|
|
placeholder="请输入咨询的案件指标......"
|
|
|
|
placeholder="请输入咨询的案件指标......"
|
|
|
|
:autosize="{ minRows: 2, maxRows: 2 }"
|
|
|
|
|
|
|
|
|
|
|
|
@keyup.enter.native="handleSend"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<el-button
|
|
|
|
<el-button
|
|
|
|
type="primary"
|
|
|
|
type="primary"
|
|
|
|
icon="el-icon-s-promotion"
|
|
|
|
icon="el-icon-s-promotion"
|
|
|
|
:disabled="caseIndex === ''"
|
|
|
|
:disabled="caseIndex === ''|| !baseForm.caseId"
|
|
|
|
@click="handleSend"
|
|
|
|
@click="handleSend"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
发送
|
|
|
|
发送
|
|
|
|
@ -97,7 +107,7 @@
|
|
|
|
<el-col :span="8">
|
|
|
|
<el-col :span="8">
|
|
|
|
<div class="content-right">
|
|
|
|
<div class="content-right">
|
|
|
|
<div class="right-title">案件指标</div>
|
|
|
|
<div class="right-title">案件指标</div>
|
|
|
|
<el-tabs v-model="activeTab">
|
|
|
|
<el-tabs v-model="activeTab" @tab-click="changeTab">
|
|
|
|
<el-tab-pane
|
|
|
|
<el-tab-pane
|
|
|
|
v-for="item in tabs"
|
|
|
|
v-for="item in tabs"
|
|
|
|
:key="item.name"
|
|
|
|
:key="item.name"
|
|
|
|
@ -106,14 +116,14 @@
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div class="index-content" :style="{ height: height + 'px' }">
|
|
|
|
<div class="index-content" :style="{ height: height + 'px' }">
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
v-for="subItem in item.list"
|
|
|
|
v-for="subItem in questionlist"
|
|
|
|
:key="subItem.key"
|
|
|
|
:key="subItem.key"
|
|
|
|
class="index-item"
|
|
|
|
class="index-item"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<el-tooltip placement="top" :content="subItem.label">
|
|
|
|
<el-tooltip placement="top" :content="subItem.shortName">
|
|
|
|
<span class="etc">{{ subItem.label }}</span>
|
|
|
|
<span class="etc">{{ subItem.shortName }}</span>
|
|
|
|
</el-tooltip>
|
|
|
|
</el-tooltip>
|
|
|
|
<div class="ask-button" @click="handelAsk(subItem)">提问</div>
|
|
|
|
<!-- <div v-if="caseIndex !== ''|| baseForm.caseId" class="ask-button" @click="handelAsk(subItem)">提问</div> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-tab-pane>
|
|
|
|
</el-tab-pane>
|
|
|
|
@ -126,6 +136,10 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import { queryCaseList, robotChat } from '@/api/caseManagement'
|
|
|
|
|
|
|
|
import { queryIndexData } from '@/api/indexRule'
|
|
|
|
|
|
|
|
import { marked } from 'marked'
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: 'Index',
|
|
|
|
name: 'Index',
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
@ -133,8 +147,8 @@ export default {
|
|
|
|
// 是否显示弹窗
|
|
|
|
// 是否显示弹窗
|
|
|
|
dialogVisible: false,
|
|
|
|
dialogVisible: false,
|
|
|
|
baseForm: {
|
|
|
|
baseForm: {
|
|
|
|
caseName: '',
|
|
|
|
caseId: '',
|
|
|
|
dore: ''
|
|
|
|
caseActorName: ''
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 当前选中的tab
|
|
|
|
// 当前选中的tab
|
|
|
|
activeTab: '1',
|
|
|
|
activeTab: '1',
|
|
|
|
@ -149,6 +163,7 @@ export default {
|
|
|
|
{ label: '入罪指标', name: '2', list: [] },
|
|
|
|
{ label: '入罪指标', name: '2', list: [] },
|
|
|
|
{ label: '出罪指标', name: '3', list: [] }
|
|
|
|
{ label: '出罪指标', name: '3', list: [] }
|
|
|
|
],
|
|
|
|
],
|
|
|
|
|
|
|
|
questionlist: [],
|
|
|
|
// 案件指标
|
|
|
|
// 案件指标
|
|
|
|
caseIndex: '',
|
|
|
|
caseIndex: '',
|
|
|
|
// 指标内容高度
|
|
|
|
// 指标内容高度
|
|
|
|
@ -156,39 +171,94 @@ export default {
|
|
|
|
// 对话列表
|
|
|
|
// 对话列表
|
|
|
|
conversationList: [],
|
|
|
|
conversationList: [],
|
|
|
|
// 是否第一次进入
|
|
|
|
// 是否第一次进入
|
|
|
|
firstEnter: false
|
|
|
|
firstEnter: false,
|
|
|
|
|
|
|
|
caseOptions: []
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
const _this = this
|
|
|
|
const _this = this
|
|
|
|
_this.height = (document.documentElement.clientHeight - 400)
|
|
|
|
_this.height = (document.documentElement.clientHeight - 500)
|
|
|
|
window.onresize = () => {
|
|
|
|
window.onresize = () => {
|
|
|
|
_this.height = (document.documentElement.clientHeight - 400)
|
|
|
|
_this.height = (document.documentElement.clientHeight - 500)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
// 显示弹窗
|
|
|
|
// 显示弹窗
|
|
|
|
show() {
|
|
|
|
show(val) {
|
|
|
|
this.dialogVisible = true
|
|
|
|
this.dialogVisible = true
|
|
|
|
|
|
|
|
this.fetchData()
|
|
|
|
|
|
|
|
this.baseForm.caseId = val || ''
|
|
|
|
|
|
|
|
if (val) this.selectCase(val)
|
|
|
|
|
|
|
|
this.getIndexData('1')
|
|
|
|
|
|
|
|
// const markdownText = '# Hello, world!'
|
|
|
|
|
|
|
|
// console.log(marked(markdownText))
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
marked
|
|
|
|
// 延迟1秒显示
|
|
|
|
// 延迟1秒显示
|
|
|
|
setTimeout(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
this.firstEnter = true
|
|
|
|
this.firstEnter = true
|
|
|
|
}, 1000)
|
|
|
|
}, 1000)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 选择案件
|
|
|
|
|
|
|
|
selectCase(val) {
|
|
|
|
|
|
|
|
const obj = this.caseOptions.find(item => item.id === val)
|
|
|
|
|
|
|
|
this.$set(this.baseForm, 'caseActorName', obj ? obj.caseActorName : '')
|
|
|
|
|
|
|
|
},
|
|
|
|
// 请求接口数据
|
|
|
|
// 请求接口数据
|
|
|
|
fetchData() {
|
|
|
|
fetchData() {
|
|
|
|
|
|
|
|
queryCaseList({}, 1, 99999).then(res => {
|
|
|
|
|
|
|
|
this.caseOptions = res.data.records
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
changeTab(val) {
|
|
|
|
|
|
|
|
this.activeTab = val.name
|
|
|
|
|
|
|
|
this.getIndexData(this.activeTab)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
// 查询指标
|
|
|
|
|
|
|
|
getIndexData(val) {
|
|
|
|
|
|
|
|
queryIndexData({
|
|
|
|
|
|
|
|
indexType: val
|
|
|
|
|
|
|
|
}, 1, 999).then(res => {
|
|
|
|
|
|
|
|
this.questionlist = res.data.result
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
// 对话
|
|
|
|
|
|
|
|
playChat(val) {
|
|
|
|
|
|
|
|
this.conversationList.push({
|
|
|
|
|
|
|
|
type: 'robot',
|
|
|
|
|
|
|
|
text: '',
|
|
|
|
|
|
|
|
docs: []
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
robotChat({
|
|
|
|
|
|
|
|
caseId: this.baseForm.caseId,
|
|
|
|
|
|
|
|
query: val || this.caseIndex
|
|
|
|
|
|
|
|
}).then(res => {
|
|
|
|
|
|
|
|
this.caseIndex = ''
|
|
|
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
|
|
|
this.conversationList[this.conversationList.length - 1].text = res.data.answer
|
|
|
|
|
|
|
|
const list = []
|
|
|
|
|
|
|
|
res.data.docs.forEach(e => {
|
|
|
|
|
|
|
|
e = marked(e)
|
|
|
|
|
|
|
|
list.push(e)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.conversationList[this.conversationList.length - 1].docs = list
|
|
|
|
|
|
|
|
console.log(this.conversationList)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.scrollBottom()
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 提问按钮点击
|
|
|
|
// 提问按钮点击
|
|
|
|
handelAsk(item) {
|
|
|
|
handelAsk(item) {
|
|
|
|
this.conversationList.push({
|
|
|
|
this.conversationList.push({
|
|
|
|
type: 'user',
|
|
|
|
type: 'user',
|
|
|
|
text: item.label
|
|
|
|
text: item.shortName
|
|
|
|
})
|
|
|
|
})
|
|
|
|
this.scrollBottom()
|
|
|
|
|
|
|
|
this.fetchData()
|
|
|
|
this.playChat(item.shortName)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 确定按钮点击
|
|
|
|
// 确定按钮点击
|
|
|
|
handleConfirm() {
|
|
|
|
handleConfirm() {
|
|
|
|
@ -202,8 +272,7 @@ export default {
|
|
|
|
recordList: [{ fileName: '裴金禄第1次笔录1.jpg', url: '' }, { fileName: '裴金禄第2次笔录1.jpg', url: '' }]
|
|
|
|
recordList: [{ fileName: '裴金禄第1次笔录1.jpg', url: '' }, { fileName: '裴金禄第2次笔录1.jpg', url: '' }]
|
|
|
|
})
|
|
|
|
})
|
|
|
|
this.scrollBottom()
|
|
|
|
this.scrollBottom()
|
|
|
|
this.fetchData()
|
|
|
|
this.playChat()
|
|
|
|
this.caseIndex = ''
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 弹窗关闭前回调
|
|
|
|
// 弹窗关闭前回调
|
|
|
|
handleClose(done) {
|
|
|
|
handleClose(done) {
|
|
|
|
@ -211,6 +280,9 @@ export default {
|
|
|
|
this.conversationList = []
|
|
|
|
this.conversationList = []
|
|
|
|
done()
|
|
|
|
done()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 回车事件
|
|
|
|
|
|
|
|
handleEnter() {
|
|
|
|
|
|
|
|
},
|
|
|
|
// 滑动到界面最下方
|
|
|
|
// 滑动到界面最下方
|
|
|
|
scrollBottom() {
|
|
|
|
scrollBottom() {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
@ -329,9 +401,15 @@ export default {
|
|
|
|
padding: 0 8px;
|
|
|
|
padding: 0 8px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
box-sizing: border-box;
|
|
|
|
border-radius: 5px;
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
|
|
width: 380px;
|
|
|
|
|
|
|
|
|
|
|
|
>span {
|
|
|
|
>span {
|
|
|
|
display: inline-block;
|
|
|
|
display: inline-block;
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&:hover {
|
|
|
|
&:hover {
|
|
|
|
background: #F2F6FD;
|
|
|
|
background: #F2F6FD;
|
|
|
|
@ -377,5 +455,16 @@ export default {
|
|
|
|
border: none;
|
|
|
|
border: none;
|
|
|
|
resize: none;
|
|
|
|
resize: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.el-loading-spinner .circular {
|
|
|
|
|
|
|
|
width: 16px;
|
|
|
|
|
|
|
|
height: 16px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.el-collapse-item__header {
|
|
|
|
|
|
|
|
padding-left: 16px;
|
|
|
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.el-collapse-item__content {
|
|
|
|
|
|
|
|
padding-left: 16px;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
