fix: 语句调试
parent
d82e842bc2
commit
3f0d1d675c
Binary file not shown.
|
After Width: | Height: | Size: 583 B |
Binary file not shown.
|
After Width: | Height: | Size: 680 B |
@ -0,0 +1,288 @@
|
||||
|
||||
<template>
|
||||
<cs-dialog
|
||||
:dialog="dialogOption"
|
||||
class="GraphDebug"
|
||||
@onSubmit="handleSubmit"
|
||||
>
|
||||
<template slot="content">
|
||||
<div class="main-content">
|
||||
<el-form ref="searchForm" :model="searchForm" :rules="rules" class="main-content-left" label-width="100px">
|
||||
<el-form-item label="案件名称" prop="caseId">
|
||||
<el-select v-model="searchForm.caseId" filterable placeholder="请选择案件" style="width: 100%" @change="selectId">
|
||||
<el-option
|
||||
v-for="item in caseOptions"
|
||||
:key="item.id"
|
||||
:label="item.caseName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="原子指标名称" prop="name">
|
||||
<el-input v-model="searchForm['name']" readonly placeholder="请输入提示词名称" />
|
||||
</el-form-item>
|
||||
<el-form-item style="position: relative;" label="查询语句" prop="queryLang">
|
||||
<el-input
|
||||
v-model="searchForm['queryLang']"
|
||||
type="textarea"
|
||||
:rows="16"
|
||||
placeholder="请输入查询语句"
|
||||
/>
|
||||
<div class="sql_btn" @click="getData">重新调试</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="main-content-right">
|
||||
<div class="title">查询结果</div>
|
||||
<div class="content">
|
||||
<div class="content-top">
|
||||
<div class="nav-item" :class="[type ==='1'? 'actived':'']" @click="changeType('1')">图谱</div>
|
||||
<div class="nav-item" :class="[type ==='2'? 'actived':'']" @click="changeType('2')">列表</div>
|
||||
</div>
|
||||
<div v-if="nodeLabels.length === 0" class="empty">
|
||||
暂无数据
|
||||
</div>
|
||||
<div v-if="type==='1' && nodeLabels.length > 0" class="graph">
|
||||
<div class="graph-main">
|
||||
<vue-charts autoresize :style="{ width: '100%', height: '100%' }" :option="caseAtlasOption" />
|
||||
</div>
|
||||
|
||||
<div class="desc">
|
||||
<div class="desc-title">实体</div>
|
||||
<div class="node-list">
|
||||
<span v-for="(item,index) in nodeLabels" :key="index" class="node-item">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="desc-title">关系</div>
|
||||
<div class="node-list">
|
||||
<span v-for="(item,index) in relTypes" :key="index" class="node-item">{{ `${item.name}(${item.count})` }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type==='2' && nodeLabels.length > 0" class="model-content">
|
||||
<vxe-grid
|
||||
ref="xTable"
|
||||
style="margin-top: 10px;width: 850px"
|
||||
row-id="id"
|
||||
v-bind="gridOptions"
|
||||
/></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</cs-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixin from '@/views/mixin'
|
||||
import VueCharts from '@/plugins/echarts'
|
||||
import caseAtlasConfig from '@/views/caseDetails/js/caseAtlasConfig'
|
||||
import { atomicDebug } from '@/api/atomicIndex/index'
|
||||
import { queryCaseList } from '@/api/caseManagement'
|
||||
export default {
|
||||
name: 'SelectSql',
|
||||
components: { VueCharts },
|
||||
mixins: [mixin],
|
||||
data() {
|
||||
return {
|
||||
dialogOption: {
|
||||
show: false,
|
||||
appendToBody: true,
|
||||
width: '1400px',
|
||||
// height: '800px',
|
||||
title: {
|
||||
title: '图谱推理调试'
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
caseId: [{ required: true, message: '案件名称不能为空!', trigger: 'change' }],
|
||||
queryLang: [{ required: true, message: '查询语句不能为空!', trigger: 'change' }]
|
||||
},
|
||||
nodeLabels: [],
|
||||
relTypes: [],
|
||||
caseAtlasOption: caseAtlasConfig,
|
||||
type: '1',
|
||||
searchForm: {
|
||||
caseId: '',
|
||||
queryLang: '',
|
||||
name: ''
|
||||
},
|
||||
caseOptions: [],
|
||||
// 表格配置
|
||||
gridOptions: {
|
||||
height: '450px',
|
||||
columns: [
|
||||
{ title: '序号', field: 'serialNumber' }
|
||||
],
|
||||
data: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 显示弹窗
|
||||
show(data) {
|
||||
this.$nextTick(() => {
|
||||
const { name, queryLang } = data
|
||||
this.searchForm.name = name
|
||||
this.searchForm.queryLang = queryLang
|
||||
|
||||
this.dialogOption.show = true
|
||||
this.getCaseList()
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
selectId() {
|
||||
this.getData()
|
||||
},
|
||||
changeType(val) {
|
||||
this.type = val
|
||||
},
|
||||
getCaseList() {
|
||||
queryCaseList({}, 1, 9999).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.caseOptions = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取图谱
|
||||
async getData() {
|
||||
this.$refs.searchForm.validate(async valid => {
|
||||
if (valid) {
|
||||
const res = await atomicDebug({
|
||||
caseId: this.searchForm.caseId,
|
||||
queryLang: this.searchForm.queryLang
|
||||
})
|
||||
if (res.code === 200) {
|
||||
if (!res.data.graphNodeList) return
|
||||
this.caseAtlasOption.series[0].links = res.data.graphRelList
|
||||
this.relTypes = res.data.graphReCountList
|
||||
this.nodeLabels = res.data.graphNodeList
|
||||
this.caseAtlasOption.series[0].data = res.data.graphNodeList
|
||||
const list = []
|
||||
res.data.recordTitleList.forEach(e => {
|
||||
list.push({
|
||||
title: e, field: e
|
||||
})
|
||||
})
|
||||
|
||||
this.gridOptions.columns = list
|
||||
this.gridOptions.columns.unshift({ title: '序号', type: 'seq', width: '80px' })
|
||||
this.gridOptions.data = res.data.recordList
|
||||
this.gridOptions.data.forEach(obj => {
|
||||
for (const key in obj) {
|
||||
obj[key] = JSON.stringify(obj[key])
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 确定按钮
|
||||
handleSubmit() {
|
||||
this.dialogOption.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.GraphDebug {
|
||||
.main-content {
|
||||
display: flex;
|
||||
padding: 32px;
|
||||
.main-content-left {
|
||||
width: 400px;
|
||||
.sql_btn {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
height: 16px;width: 112px;
|
||||
height: 42px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
border: 1px solid #3763FF;
|
||||
text-align: center;
|
||||
line-height: 42px;font-size: 16px;
|
||||
color: #3763FF;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
}
|
||||
.main-content-right {
|
||||
flex: 1;
|
||||
// margin-left: 32px;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.content {
|
||||
background: #FFFFFF;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
border: 1px solid #D9D9D9;
|
||||
.content-top {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #D9D9D9;
|
||||
align-items: center;
|
||||
padding-left: 24px;
|
||||
.nav-item {
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
margin-right: 32px;
|
||||
padding-bottom: 16px;position: relative;
|
||||
top: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.actived {
|
||||
border-bottom: 3px solid #3763FF;
|
||||
}
|
||||
}
|
||||
.empty {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.graph {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
.graph-main {
|
||||
width: 580px;
|
||||
}
|
||||
.desc {
|
||||
flex: 1;
|
||||
background: #FFFFFF;
|
||||
box-shadow: -2px 4px 12px 0px rgba(0,0,0,0.05);
|
||||
border-radius: 0px 0px 6px 0px;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
.desc-title {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.node-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 24px;
|
||||
.node-item {
|
||||
background: #999999;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
margin:0 8px 8px 0;
|
||||
padding: 8px 16px;font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.el-dialog {
|
||||
background: #fff !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue