244 lines
7.1 KiB
Vue
244 lines
7.1 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<div class="menu-title">
|
|||
|
|
航发控制装备维修知识补全
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-content">
|
|||
|
|
<el-row :gutter="40" style="border-bottom: 1px solid #c1c2c4;padding-bottom: 40px">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<div>
|
|||
|
|
<label>请选择模式：</label>
|
|||
|
|
<el-select v-model="qo.select" placeholder="选择模式">
|
|||
|
|
<el-option label="评估模式" value="1"></el-option>
|
|||
|
|
<el-option label="应用模式" value="2"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<div>
|
|||
|
|
<label>请选择知识图谱：</label>
|
|||
|
|
<el-select v-model="qo.graph" placeholder="选择知识图谱">
|
|||
|
|
<el-option label="图谱1" value="1"></el-option>
|
|||
|
|
<el-option label="图谱2" value="2"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-graph-content" v-if="qo.graph">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6" v-if="qo.select == '1'">
|
|||
|
|
<div>
|
|||
|
|
<label>请选择待补全三元组文件：</label>
|
|||
|
|
<el-upload
|
|||
|
|
ref="upload" style="display: inline-block"
|
|||
|
|
:auto-upload="false"
|
|||
|
|
action="#"
|
|||
|
|
:on-change="handleFileChange"
|
|||
|
|
:limit="2"
|
|||
|
|
:show-file-list="false">
|
|||
|
|
<el-button type="primary">上传文件</el-button>
|
|||
|
|
</el-upload>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="file">
|
|||
|
|
<el-table :data="ralationData" style="width: 100%;margin-top: 20px;" height="150">
|
|||
|
|
<el-table-column prop="source" label="头实体"></el-table-column>
|
|||
|
|
<el-table-column prop="relation" label="关系"></el-table-column>
|
|||
|
|
<el-table-column prop="target" label="尾实体"></el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-button type="primary">开始链接预测</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="path-bottom-box">
|
|||
|
|
<div class="path-left-box">
|
|||
|
|
<div style="height: calc(100% - 50px);overflow-y: auto;margin-right: 20px">
|
|||
|
|
<el-table :data="tableData" style="width: 100%;margin-top: 20px;">
|
|||
|
|
<el-table-column prop="len" label="待测试三元组"></el-table-column>
|
|||
|
|
<el-table-column prop="hits@1" label="预测答案"></el-table-column>
|
|||
|
|
<el-table-column prop="hits@5" label="真实答案"></el-table-column>
|
|||
|
|
<el-table-column prop="hits@10" label="真实答案排名"></el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
<div class="page-box">
|
|||
|
|
<el-pagination background
|
|||
|
|
@current-change="handleCurrentChange"
|
|||
|
|
:current-page="qo.pageNo"
|
|||
|
|
:page-size="qo.pageSize"
|
|||
|
|
layout="total, prev, pager, next"
|
|||
|
|
:total="result.total">
|
|||
|
|
</el-pagination>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="path-right-box">
|
|||
|
|
<div id="echart"></div>
|
|||
|
|
<div style="width: calc(100% - 70px);margin: 30px">
|
|||
|
|
<el-table :data="tableData" style="width: 100%;">
|
|||
|
|
<el-table-column prop="len" label="推理路径长度"></el-table-column>
|
|||
|
|
<el-table-column prop="hits@1" label="hits@1"></el-table-column>
|
|||
|
|
<el-table-column prop="hits@5" label="hits@5"></el-table-column>
|
|||
|
|
<el-table-column prop="hits@10" label="hits@10"></el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from '@/utils/request';
|
|||
|
|
|
|||
|
|
var _this;
|
|||
|
|
export default {
|
|||
|
|
name: "graphShow",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
qo: {
|
|||
|
|
select: "",
|
|||
|
|
graph: "",
|
|||
|
|
pageNo: 1,
|
|||
|
|
pageSize: 10
|
|||
|
|
},
|
|||
|
|
file: "",
|
|||
|
|
result: {
|
|||
|
|
total: 100
|
|||
|
|
},
|
|||
|
|
tableData: [
|
|||
|
|
{len: "1-hop", "hits@1": "hits@1", "hits@5": "hits@5", "hits@10": "hits@10"},
|
|||
|
|
{len: "2-hop", "hits@1": "hits@1", "hits@5": "hits@5", "hits@10": "hits@10"},
|
|||
|
|
{len: "3-hop", "hits@1": "hits@1", "hits@5": "hits@5", "hits@10": "hits@10"},
|
|||
|
|
{len: "4-hop", "hits@1": "hits@1", "hits@5": "hits@5", "hits@10": "hits@10"}
|
|||
|
|
],
|
|||
|
|
ralationData: [
|
|||
|
|
{source: "头实体", relation: "关系", target: "尾实体"},
|
|||
|
|
{source: "头实体", relation: "关系", target: "尾实体"},
|
|||
|
|
{source: "头实体", relation: "关系", target: "尾实体"},
|
|||
|
|
{source: "头实体", relation: "关系", target: "尾实体"},
|
|||
|
|
{source: "头实体", relation: "关系", target: "尾实体"}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
_this = this;
|
|||
|
|
_this.initRchart();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleFileChange(item) {
|
|||
|
|
this.$refs.upload.clearFiles();
|
|||
|
|
let formData = new FormData();
|
|||
|
|
formData.append("file", item.raw);
|
|||
|
|
_this.file = item.raw.name;
|
|||
|
|
// request({
|
|||
|
|
// url: '/sys-file/create',
|
|||
|
|
// method: 'put',
|
|||
|
|
// data: formData
|
|||
|
|
// }).then(res => {
|
|||
|
|
// _this.$message.success("上传成功");
|
|||
|
|
// _this.queryData();
|
|||
|
|
// });
|
|||
|
|
},
|
|||
|
|
handleCurrentChange(val) {
|
|||
|
|
_this.qo.pageNo = val;
|
|||
|
|
},
|
|||
|
|
initRchart() {
|
|||
|
|
var chart = this.$echarts.init(document.getElementById("echart"));
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
text: '链接预测Hits@1、Hits@5、Hits@10以及其他占比',
|
|||
|
|
left: 'center'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
top: 'bottom'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: 'Access From',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '50%',
|
|||
|
|
data: [
|
|||
|
|
{value: 1048, name: 'Search Engine'},
|
|||
|
|
{value: 735, name: 'Direct'},
|
|||
|
|
{value: 580, name: 'Email'},
|
|||
|
|
{value: 484, name: 'Union Ads'},
|
|||
|
|
{value: 300, name: 'Video Ads'}
|
|||
|
|
],
|
|||
|
|
emphasis: {
|
|||
|
|
itemStyle: {
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowOffsetX: 0,
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
chart.setOption(option);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.file-graph-content {
|
|||
|
|
border: 1px solid #dcdddf;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
line-height: 25px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333333;
|
|||
|
|
width: calc(100% - 20px);
|
|||
|
|
height: 150px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.path-bottom-box {
|
|||
|
|
height: calc(100% - 95px);
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.path-left-box {
|
|||
|
|
width: 50%;
|
|||
|
|
border-right: 1px solid #c1c2c4;
|
|||
|
|
|
|||
|
|
.question-item {
|
|||
|
|
margin: 15px 10%;
|
|||
|
|
line-height: 30px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #333333;
|
|||
|
|
|
|||
|
|
.question-item-div {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 8px 0;
|
|||
|
|
|
|||
|
|
.question-item-title {
|
|||
|
|
width: 80px;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.question-item-answer {
|
|||
|
|
flex: 1;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.path-right-box {
|
|||
|
|
flex: 1;
|
|||
|
|
margin: 30px 0;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
|
|||
|
|
#echart {
|
|||
|
|
height: 400px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|