267 lines
14 KiB
Vue
267 lines
14 KiB
Vue
<template>
|
||
<div>
|
||
<div class="menu-title">
|
||
知识图谱融合
|
||
</div>
|
||
<div class="menu-content">
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<div class="result" style="margin-bottom: 20px">待融合的图谱1</div>
|
||
<el-select v-model="sourceGraph.name" placeholder="请选择要融合的知识图谱1" @change="handleSourceGraphChange">
|
||
<el-option v-for="item in resultCmd.graphs" :label="item.name" :value="item.name">
|
||
</el-option>
|
||
</el-select>
|
||
<div style="margin-top: 20px;height: 138px;border: 1px solid rgba(0, 0, 0, 0.1);padding: 20px">
|
||
<el-descriptions title="" :column="1" v-if="sourceGraph.name">
|
||
<el-descriptions-item label="概念数量">{{sourceGraph.gn_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
|
||
<el-descriptions-item label="属性数量">{{sourceGraph.sx_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
|
||
<el-descriptions-item label="实体数量">{{sourceGraph.sl_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
|
||
<el-descriptions-item label="三元组数量">{{sourceGraph.saz_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
<div class="result">待融合的图谱2</div>
|
||
<el-select v-model="targetGraph.name" placeholder="请选择要融合的知识图谱2"
|
||
@change="handleTargetGraphChange" style="margin-top: 25px">
|
||
<el-option
|
||
v-for="item in resultCmd.graphs"
|
||
:label="item.name"
|
||
:value="item.name">
|
||
</el-option>
|
||
</el-select>
|
||
<div style="margin-top: 20px;height: 138px;border: 1px solid rgba(0, 0, 0, 0.1);padding: 20px">
|
||
<el-descriptions class="margin-top" title="" :column="1" v-if="targetGraph.name">
|
||
<el-descriptions-item label="概念数量">{{targetGraph.gn_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
|
||
<el-descriptions-item label="属性数量">{{targetGraph.sx_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
|
||
<el-descriptions-item label="实体数量">{{targetGraph.sl_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
|
||
<el-descriptions-item label="三元组数量">{{targetGraph.saz_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
<div style="margin: 0 auto;margin-top: 25px;display: flex;justify-content: center">
|
||
<el-button type="primary" @click="fusionData" :loading="loading">开始融合</el-button>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="16" v-if="showFlag">
|
||
<el-row :gutter="50">
|
||
<el-col :span="12" >
|
||
<div class="result" style="text-align: center;width: 100%;margin-bottom: 20px;color: #5c5c5c;">本体匹配结果展示</div>
|
||
<el-table :data="btResults" style="width: 100%" height="350px" @current-change="handleCurrentChange1" highlight-current-row>
|
||
<el-table-column prop="srcNode" label="本体1"></el-table-column>
|
||
<el-table-column prop="dctNode" label="本体2"></el-table-column>
|
||
<el-table-column prop="type" label="类型"></el-table-column>
|
||
<el-table-column prop="reliability" label="匹配置信度"></el-table-column>
|
||
<el-table-column prop="result" label="匹配结果"></el-table-column>
|
||
</el-table>
|
||
<div class="page-box">
|
||
<el-pagination background
|
||
@current-change="handleChange1"
|
||
:current-page="qo1.pageNo"
|
||
:page-size="qo1.pageSize"
|
||
layout="total, prev, pager, next"
|
||
:total="resultCmd1.btResults.length">
|
||
</el-pagination>
|
||
</div>
|
||
<div style="display: flex;width: 100%;margin-top: 20px">
|
||
<el-button type="primary" size="small" style="flex: 1" @click="clickStr('currentRow1','srcNode')">验证本体1</el-button>
|
||
<el-button type="primary" size="small" style="flex: 1" @click="clickStr('currentRow1','dctNode')">验证本体2</el-button>
|
||
</div>
|
||
<div class="result">本体匹配结果： {{resultCmd1.bfb.bt_result}}</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="result" style="text-align: center;width: 100%;margin-bottom: 20px;color: #5c5c5c;">实例匹配结果展示</div>
|
||
<el-table :data="slResults" style="width: 100%" height="350px" @current-change="handleCurrentChange2" highlight-current-row>
|
||
<el-table-column prop="srcNode" label="本体1"></el-table-column>
|
||
<el-table-column prop="dctNode" label="本体2"></el-table-column>
|
||
<el-table-column prop="type" label="类型"></el-table-column>
|
||
<el-table-column prop="reliability" label="匹配置信度"></el-table-column>
|
||
<el-table-column prop="result" label="匹配结果"></el-table-column>
|
||
</el-table>
|
||
<div class="page-box">
|
||
<el-pagination background
|
||
@current-change="handleChange2"
|
||
:current-page="qo2.pageNo"
|
||
:page-size="qo2.pageSize"
|
||
layout="total, prev, pager, next"
|
||
:total="resultCmd1.slResults.length">
|
||
</el-pagination>
|
||
</div>
|
||
<div style="display: flex;width: 100%;margin-top: 20px">
|
||
<el-button type="primary" size="small" style="flex: 1" @click="clickStr('currentRow2','srcNode')">验证本体1</el-button>
|
||
<el-button type="primary" size="small" style="flex: 1" @click="clickStr('currentRow2','dctNode')">验证本体2</el-button>
|
||
</div>
|
||
<div class="result">实例匹配结果： {{resultCmd1.bfb.sl_result}}</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="result" style="text-align: center;width: 100%;margin-top: 20px;color: #5c5c5c;">融合后知识图谱统计信息</div>
|
||
<div style="margin-top: 20px;height:20px;border: 1px solid rgba(0, 0, 0, 0.1);padding: 20px">
|
||
<el-descriptions title="" :column="4">
|
||
<el-descriptions-item label="概念数量">{{resultCmd1.rhGraph.gn_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
|
||
<el-descriptions-item label="属性数量">{{resultCmd1.rhGraph.sx_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
|
||
<el-descriptions-item label="实体数量">{{resultCmd1.rhGraph.sl_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
|
||
<el-descriptions-item label="三元组数量">{{resultCmd1.rhGraph.saz_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/utils/request';
|
||
|
||
var _this;
|
||
export default {
|
||
name: "knowledgeFusion",
|
||
data() {
|
||
return {
|
||
sourceGraph: {
|
||
"name": "",
|
||
"gn_count": "",
|
||
"sx_count": "",
|
||
"sl_count": "",
|
||
"saz_count": ""
|
||
},
|
||
targetGraph: {
|
||
"name": "",
|
||
"gn_count": "",
|
||
"sx_count": "",
|
||
"sl_count": "",
|
||
"saz_count": ""
|
||
},
|
||
resultCmd: {},
|
||
resultCmd1: {
|
||
bfb:{
|
||
bt_result:"",
|
||
sl_result:""
|
||
},
|
||
rhGraph: {
|
||
"gn_count": "",
|
||
"sx_count": "",
|
||
"sl_count": "",
|
||
"saz_count": ""
|
||
},
|
||
btResults:[],
|
||
slResults:[]
|
||
},
|
||
currentRow1:{},
|
||
currentRow2:{},
|
||
qo1:{
|
||
pageNo:1,
|
||
pageSize:10
|
||
},
|
||
qo2:{
|
||
pageNo:1,
|
||
pageSize:10
|
||
},
|
||
btResults:[],
|
||
slResults:[],
|
||
showFlag: false,
|
||
loading:false
|
||
}
|
||
},
|
||
mounted() {
|
||
_this = this;
|
||
_this.queryData();
|
||
},
|
||
methods: {
|
||
handleSourceGraphChange() {
|
||
_this.resultCmd.graphs.forEach(item => {
|
||
if(item.name == _this.sourceGraph.name){
|
||
_this.sourceGraph = JSON.parse(JSON.stringify(item))
|
||
}
|
||
})
|
||
console.log(_this.resultCmd.graphs)
|
||
},
|
||
handleTargetGraphChange() {
|
||
_this.resultCmd.graphs.forEach(item => {
|
||
if(item.name == _this.targetGraph.name){
|
||
_this.targetGraph = JSON.parse(JSON.stringify(item))
|
||
}
|
||
})
|
||
},
|
||
handleChange1(val) {
|
||
_this.qo1.pageNo = val;
|
||
_this.btResults = _this.resultCmd1.btResults.slice((_this.qo1.pageNo - 1) * 10, _this.qo1.pageNo * 10);
|
||
},
|
||
handleChange2(val) {
|
||
_this.qo2.pageNo = val;
|
||
_this.slResults = _this.resultCmd1.slResults.slice((_this.qo2.pageNo - 1) * 10, _this.qo2.pageNo * 10);
|
||
},
|
||
fusionData(){
|
||
if(_this.targetGraph.name == _this.sourceGraph.name){
|
||
_this.$message.warning("待融合图谱1和待融合图谱2不可相同");
|
||
return false;
|
||
}
|
||
_this.queryResult();
|
||
},
|
||
queryData() {
|
||
request({
|
||
url: '/indicator/indicator4/1',
|
||
method: 'get',
|
||
}).then(res => {
|
||
_this.resultCmd = res.data;
|
||
if(_this.resultCmd.graphs.length >= 2){
|
||
_this.sourceGraph = JSON.parse(JSON.stringify(_this.resultCmd.graphs[0]))
|
||
_this.targetGraph = JSON.parse(JSON.stringify(_this.resultCmd.graphs[1]))
|
||
}
|
||
});
|
||
},
|
||
queryResult() {
|
||
_this.loading = true
|
||
request({
|
||
url: '/indicator/indicator4/2',
|
||
method: 'get',
|
||
}).then(res => {
|
||
_this.loading = false
|
||
_this.resultCmd1 = res.data;
|
||
_this.$nextTick(()=>{
|
||
_this.showFlag = true;
|
||
_this.handleChange1(1);
|
||
_this.handleChange2(1);
|
||
})
|
||
});
|
||
},
|
||
handleCurrentChange1(val) {
|
||
this.currentRow1 = val;
|
||
},
|
||
handleCurrentChange2(val) {
|
||
this.currentRow2 = val;
|
||
},
|
||
clickStr(name,value){
|
||
if(!this[name][value]){
|
||
_this.$message.warning("请选中行");
|
||
return false;
|
||
}
|
||
|
||
var srcNode = this[name][value];
|
||
|
||
if(srcNode.substring(0,1) == '<'){
|
||
srcNode = srcNode.substring(1)
|
||
}
|
||
|
||
if(srcNode.substring(srcNode.length-3) == '> .'){
|
||
srcNode = srcNode.substring(0,srcNode.length-3)
|
||
}
|
||
|
||
if(srcNode.substring(srcNode.length-1) == '>'){
|
||
srcNode = srcNode.substring(0,srcNode.length-1)
|
||
}
|
||
|
||
window.open(srcNode, "_blank")
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.result {
|
||
text-align: center;
|
||
margin-top: 25px;
|
||
font-size: 16px;
|
||
color: #5c5c5c;
|
||
}
|
||
|
||
</style>
|
||
|
||
|