推荐系统初始化
This commit is contained in:
243
web/src/components/menus/GraphShow.vue
Normal file
243
web/src/components/menus/GraphShow.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user