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