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>
|