清理无用菜单
This commit is contained in:
@@ -1,314 +0,0 @@
|
||||
<template>
|
||||
<div class="graph-main">
|
||||
<div class="legend-box" v-show="!legendHide">
|
||||
<div class="item-row" v-for="(value, key) in legendList" :key="key">
|
||||
<div class="point" :style="'background-color:' + value.color"></div>
|
||||
<div class="label">{{ value.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :id="id" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
import G6 from '@antv/g6';
|
||||
|
||||
var graphObj = {};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ontologyId: '',
|
||||
id: Math.round(Math.random() * 10000000).toString(),
|
||||
graph: null,
|
||||
graphData: null,
|
||||
legendHide: false,
|
||||
legendList: {
|
||||
"armyType": {label: '军种', color: 'rgb(76,142,218)'},
|
||||
"control": {label: '控制系统', color: 'rgb(236,181,201)'},
|
||||
"engine": {label: '发动机', color: 'rgb(241,102,103)'},
|
||||
"fault": {label: '故障信息', color: 'rgb(141,204,147)'},
|
||||
"faultCase": {label: '故障案例', color: 'rgb(156,33,234)'},
|
||||
"oriPlane": {label: '原飞机', color: 'rgb(255,196,84)'},
|
||||
"part": {label: '部件', color: 'rgb(86,148,128)'},
|
||||
"place": {label: '发生地', color: 'rgb(217,200,174)'},
|
||||
"plane": {label: '飞机', color: 'rgb(87,199,227)'}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.ontologyId = this.$route.query.id;
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
initGraph: function (cmd, flag, clickNodeFun, legendHide) { // 是否隐藏图例
|
||||
if(legendHide) {
|
||||
this.legendHide = true;
|
||||
}
|
||||
let graph = graphObj[this.id];
|
||||
this.$nextTick(() => {
|
||||
this.destroyGraph();
|
||||
let _width = document.getElementById(this.id).clientWidth;
|
||||
let _height = document.getElementById(this.id).clientHeight;
|
||||
// 创建 G6 图实例
|
||||
if (graph == undefined || graph == null) {
|
||||
graph = new G6.Graph({
|
||||
container: this.id, // 指定图画布的容器 id，与第 9 行的容器对应
|
||||
// 画布宽高
|
||||
width: _width,
|
||||
height: _height,
|
||||
layout: {
|
||||
type: 'force',
|
||||
nodeStrength: -0,
|
||||
nodeSize: 80,
|
||||
preventOverlap: true,
|
||||
edgeStrength: 0.1
|
||||
},
|
||||
modes: {
|
||||
// Defualt mode
|
||||
default: ['drag-node',
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
enableOptimize: true, // enable the optimize to hide the shapes beside nodes' keyShape
|
||||
},
|
||||
{
|
||||
type: 'zoom-canvas',
|
||||
enableOptimize: true, // enable the optimize to hide the shapes beside nodes' keyShape
|
||||
},
|
||||
{
|
||||
type: 'tooltip',
|
||||
formatText: function formatText(model) {
|
||||
let name = '';
|
||||
let argumentsStr = '';
|
||||
if (model.label) name = model.label + '<br/>';
|
||||
if (model.arguments && model.arguments.length > 0) {
|
||||
model.arguments.forEach(arg => {
|
||||
argumentsStr += arg.role + "：" + arg.argument + '<br/>';
|
||||
});
|
||||
}
|
||||
const text = `${name} ${argumentsStr}`;
|
||||
return text;
|
||||
},
|
||||
|
||||
shouldUpdate: function shouldUpdate() {
|
||||
return true;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
defaultNode: {
|
||||
size: 20,
|
||||
color: '#4b4b4b',
|
||||
label: 'name',
|
||||
style: {
|
||||
lineWidth: 2,
|
||||
fill: '#68BDF6'
|
||||
},
|
||||
labelCfg: {
|
||||
position: 'bottom',
|
||||
style: {
|
||||
fontSize: 14,
|
||||
fill: '#454545'
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultEdge: {
|
||||
style: {
|
||||
stroke: '#b3b3b3',
|
||||
lineAppendWidth: 10, // Enlarge the range the edge to be hitted
|
||||
},
|
||||
labelCfg: {
|
||||
autoRotate: false,
|
||||
style: {
|
||||
fontSize: 14,
|
||||
fill: '#848484'
|
||||
}
|
||||
},
|
||||
},
|
||||
nodeStateStyles: {
|
||||
yourStateName: {
|
||||
stroke: '#f00',
|
||||
lineWidth: 3,
|
||||
},
|
||||
},
|
||||
edgeStateStyles: {
|
||||
yourStateName: {
|
||||
stroke: '#f00',
|
||||
lineWidth: 3,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
/*拖动节点-start*/
|
||||
const forceLayout = graph.get('layoutController').layoutMethod;
|
||||
graph.on('node:dragstart', function (e) {
|
||||
graph.layout();
|
||||
refreshDragedNodePosition(e);
|
||||
});
|
||||
graph.on('node:drag', function (e) {
|
||||
if (forceLayout) {
|
||||
forceLayout.execute();
|
||||
}
|
||||
refreshDragedNodePosition(e);
|
||||
});
|
||||
graph.on('node:dragend', function (e) {
|
||||
e.item.get('model').fx = null;
|
||||
e.item.get('model').fy = null;
|
||||
});
|
||||
/*拖动节点-end*/
|
||||
|
||||
graph.on('node:click', (e) => {
|
||||
let node = e.item._cfg.model;
|
||||
if (clickNodeFun) {
|
||||
clickNodeFun(node);
|
||||
}
|
||||
this.clearStates();
|
||||
graph.setItemState(e.item, 'yourStateName', true);
|
||||
});
|
||||
|
||||
graph.on('canvas:click', (e) => {
|
||||
this.clearStates();
|
||||
});
|
||||
|
||||
graphObj[this.id] = graph;
|
||||
|
||||
}
|
||||
if (flag) {
|
||||
this.importData(cmd);
|
||||
} else {
|
||||
this.queryData(cmd);
|
||||
}
|
||||
});
|
||||
},
|
||||
importData({nodes, edges}) { // 查询图空间内节点关系
|
||||
let graph = graphObj[this.id];
|
||||
// 更新颜色数据
|
||||
nodes.forEach(node => {
|
||||
node.style = {
|
||||
lineWidth: 2,
|
||||
fill: this.legendList[node._label].color || "#68BDF6"
|
||||
};
|
||||
});
|
||||
|
||||
this.graphData = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
// 读取数据
|
||||
graph.data(this.graphData);
|
||||
// 渲染图
|
||||
graph.render();
|
||||
},
|
||||
queryData({path, qo}) { // 查询图空间内节点关系
|
||||
let graph = graphObj[this.id];
|
||||
request({
|
||||
url: path,
|
||||
method: 'post',
|
||||
data: qo
|
||||
}).then(res => {
|
||||
res.data.nodes.forEach(node => {
|
||||
node.label = node.properties.name;
|
||||
node.id = node.id.toString();
|
||||
});
|
||||
res.data.relations.forEach(edge => {
|
||||
delete edge.id;
|
||||
edge.source = edge.source.toString();
|
||||
edge.target = edge.target.toString();
|
||||
if (edge.source === edge.target) {
|
||||
edge.type = 'loop';
|
||||
} else {
|
||||
delete edge.type;
|
||||
}
|
||||
});
|
||||
this.importData({
|
||||
nodes: res.data.nodes,
|
||||
edges: res.data.relations
|
||||
});
|
||||
// this.graphData = {
|
||||
// nodes: res.data.nodes,
|
||||
// edges: res.data.relations
|
||||
// };
|
||||
// // 读取数据
|
||||
// graph.data(this.graphData);
|
||||
// // 渲染图
|
||||
// graph.render();
|
||||
});
|
||||
},
|
||||
clearStates() { // 清空选中状态
|
||||
let graph = graphObj[this.id];
|
||||
graph.getNodes().forEach((node) => {
|
||||
graph.clearItemStates(node);
|
||||
});
|
||||
graph.getEdges().forEach((edge) => {
|
||||
graph.clearItemStates(edge);
|
||||
});
|
||||
},
|
||||
destroyGraph() {
|
||||
let graph = graphObj[this.id];
|
||||
try {
|
||||
if (graph != undefined && graph != null) {
|
||||
graph.clear();
|
||||
graph = null;
|
||||
document.getElementById("mountNode").innerHTML = "";
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function refreshDragedNodePosition(e) {
|
||||
const model = e.item.get('model');
|
||||
model.fx = e.x;
|
||||
model.fy = e.y;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.g6-tooltip {
|
||||
border: 1px solid #e2e2e2;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #545454;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
padding: 10px 8px;
|
||||
box-shadow: rgb(174 174 174) 0px 0px 10px;
|
||||
}
|
||||
|
||||
.graph-main {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.legend-box {
|
||||
position: absolute;
|
||||
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.item-row {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.item-row .point {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 40px;
|
||||
border: 2px solid #4b4b4b;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.item-row .label {
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -250,7 +250,6 @@ import {config} from '@/components/graph/config';
|
||||
import G6 from '@antv/g6';
|
||||
import {listToTree} from "@/utils/common";
|
||||
import noumenonInfo from '@/components/dialog/NoumenonInfo';
|
||||
import tagModify from "@/components/dialog/TagModify";
|
||||
|
||||
var vm;
|
||||
var graph;
|
||||
|
||||
@@ -1,782 +0,0 @@
|
||||
<template>
|
||||
<div class="node-box" style="position: relative">
|
||||
<transition name="el-zoom-in-center">
|
||||
<div v-show="infoVisible" class="graph-info-box">
|
||||
<div class="graph-info-child">
|
||||
<div v-show="selectObj.type == 'edge'">
|
||||
<noumenon-edge-modify ref="noumenonEdgeModify"></noumenon-edge-modify>
|
||||
</div>
|
||||
<div v-show="selectObj.type == 'node'">
|
||||
<noumenon-modify ref="noumenonModify"></noumenon-modify>
|
||||
</div>
|
||||
<i class="el-icon-d-arrow-left" @click="infoVisible = false"></i>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div v-show="treeInfoVisible" class="tree-graph-info">
|
||||
<div class="graph-info-child">
|
||||
<tree-graph-info ref="treeGraphInfo"></tree-graph-info>
|
||||
<i class="el-icon-d-arrow-right" @click="treeInfoVisible = false"></i>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 为图谱准备一个具备大小（宽高）的Dom -->
|
||||
<div class="tree-container">
|
||||
<div class="graph-name-box">
|
||||
<label>本体名称： {{ graphName }}；</label>
|
||||
<label>节点数量：{{ nodeCount }}；</label>
|
||||
<label>关系属性数量：{{ edgeCount }}；</label>
|
||||
<label>值属性数量：{{ valueCount }}；</label>
|
||||
</div>
|
||||
<!-- <div class="tips-box">-->
|
||||
<!-- <label></label>-->
|
||||
<!-- </div>-->
|
||||
<div class="icon-box">
|
||||
<div class="icon icon-tree" @click="showTreeCom">
|
||||
<i title="树形图谱"></i>
|
||||
</div>
|
||||
<div class="icon icon-add" @click="showAddNodeDialog">
|
||||
<i title="新增概念"></i>
|
||||
</div>
|
||||
<div title="按住shift点选两节点可新增关系" :class="['icon icon-arrow', createEdgeModelFlag ? 'active' : '']" @click="changeCreateEdgeModel">
|
||||
<i title="按住shift点选两节点可新增关系"></i>
|
||||
</div>
|
||||
<div class="icon icon-remove" @click="removeNode">
|
||||
<i title="删除"></i>
|
||||
</div>
|
||||
<div class="icon icon-save" @click="backGraph">
|
||||
<i title="返回"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mountNode" style="width: 100%; height: 1000px"></div>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="新增概念"
|
||||
:visible.sync="addNodeDialogVisible"
|
||||
width="40%">
|
||||
<el-form ref="addNodeForm" label-width="80px" :rules="addNodeRules" :model="addNodeCmd">
|
||||
<el-form-item label="概念名" prop="tagName">
|
||||
<el-input v-model="addNodeCmd.tagName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="概念描述">
|
||||
<el-input v-model="addNodeCmd.label"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button @click="addNodeDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitAddNode">确 定</el-button>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="新增关系"
|
||||
:visible.sync="addEdgeDialogVisible"
|
||||
@close="handleAddEdgeDialogClose"
|
||||
width="40%">
|
||||
<el-form ref="addEdgeForm" :model="addEdgeCmd" label-width="100px" :rules="addEdgeRules">
|
||||
<el-form-item label="关系名称" prop="edgeName">
|
||||
<el-input v-model="addEdgeCmd.edgeName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="关系描述">
|
||||
<el-input v-model="addEdgeCmd.label"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否显示箭头">
|
||||
<el-radio v-model="addEdgeCmd.arrow" :label="true">是</el-radio>
|
||||
<el-radio v-model="addEdgeCmd.arrow" :label="false">否</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button @click="addEdgeDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitAddEdge">确 定</el-button>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
import {config} from '@/components/graph/config';
|
||||
import G6 from '@antv/g6';
|
||||
import noumenonModify from '@/components/dialog/NoumenonModify';
|
||||
import noumenonEdgeModify from '@/components/dialog/NoumenonEdgeModify';
|
||||
import treeGraphInfo from '@/components/dialog/TreeGraphInfo';
|
||||
|
||||
|
||||
G6.registerBehavior('click-add-edge', {
|
||||
// Set the events and the corresponding responsing function for this behavior
|
||||
getEvents() {
|
||||
return {
|
||||
'node:click': 'onClick', // The event is canvas:click, the responsing function is onClick
|
||||
mousemove: 'onMousemove', // The event is mousemove, the responsing function is onMousemove
|
||||
'edge:click': 'onEdgeClick',
|
||||
};
|
||||
},
|
||||
// The responsing function for node:click defined in getEvents
|
||||
onClick(ev) {
|
||||
const self = this;
|
||||
const node = ev.item;
|
||||
const graph = self.graph;
|
||||
// The position where the mouse clicks
|
||||
const point = {x: ev.x, y: ev.y};
|
||||
const model = node.getModel();
|
||||
if (self.addingEdge && self.edge) {
|
||||
graph.updateItem(self.edge, {
|
||||
target: model.id,
|
||||
});
|
||||
// 打开编辑新建关系的信息弹窗
|
||||
vm.showAddEdge(self.edge._cfg.model);
|
||||
self.edge = null;
|
||||
self.addingEdge = false;
|
||||
} else {
|
||||
// Add anew edge, the end node is the current node user clicks
|
||||
self.edge = graph.addItem('edge', {
|
||||
source: model.id,
|
||||
target: model.id,
|
||||
});
|
||||
self.addingEdge = true;
|
||||
}
|
||||
},
|
||||
// The responsing function for mousemove defined in getEvents
|
||||
onMousemove(ev) {
|
||||
const self = this;
|
||||
// The current position the mouse clicks
|
||||
const point = {x: ev.x, y: ev.y};
|
||||
if (self.addingEdge && self.edge) {
|
||||
// Update the end node to the current node the mouse clicks
|
||||
self.graph.updateItem(self.edge, {
|
||||
target: point,
|
||||
});
|
||||
}
|
||||
},
|
||||
// The responsing function for edge:click defined in getEvents
|
||||
onEdgeClick(ev) {
|
||||
const self = this;
|
||||
const currentEdge = ev.item;
|
||||
if (self.addingEdge && self.edge === currentEdge) {
|
||||
self.graph.removeItem(self.edge);
|
||||
self.edge = null;
|
||||
self.addingEdge = false;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
var vm;
|
||||
var graph;
|
||||
var graphData;
|
||||
var _ = require('lodash');
|
||||
var nodeProps = {
|
||||
id: 'vid',
|
||||
label: 'properties.label',
|
||||
name: 'properties.tagName',
|
||||
labelName: 'properties.label'
|
||||
};
|
||||
var edgeProps = {
|
||||
source: 'srcId',
|
||||
target: 'dstId',
|
||||
name: 'properties.edgeName',
|
||||
label: 'properties.label',
|
||||
arrow: 'properties.arrow',
|
||||
labelName: 'properties.label'
|
||||
}
|
||||
// const subjectColors = ['#5F95FF', '#61DDAA', '#65789B', '#F6BD16', '#7262FD', '#78D3F8', '#9661BC', '#F6903D', '#008685', '#F08BB4'];
|
||||
// const colorSets = G6.Util.getColorSetsBySubjectColors(subjectColors, '#fff', 'default', '#777');
|
||||
export default {
|
||||
components: {
|
||||
'noumenon-modify': noumenonModify,
|
||||
'noumenon-edge-modify': noumenonEdgeModify,
|
||||
'tree-graph-info': treeGraphInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
qo: '',
|
||||
graphName: '',
|
||||
nodeCount: 0,
|
||||
edgeCount: 0,
|
||||
valueCount: 0,
|
||||
ontologyId: '',
|
||||
infoVisible: false, // 左侧信息栏显隐
|
||||
treeInfoVisible: false, // 右侧树形图谱
|
||||
clickNode: {id: '', name: ''},
|
||||
addNodeDialogVisible: false,
|
||||
addNodeCmd: {
|
||||
ontologyId: '',
|
||||
tagName: '',
|
||||
label: ''
|
||||
},
|
||||
arrowVisible: false, // 是否展示箭头方向
|
||||
createEdgeModelFlag: false, // 创建关系模式开关
|
||||
addEdgeDialogVisible: false,
|
||||
addEdgeCmd: {
|
||||
ontologyId: '',
|
||||
edgeName: '',
|
||||
label: '',
|
||||
source: '',
|
||||
target: '',
|
||||
arrow: false
|
||||
},
|
||||
selectObj: {
|
||||
type: '',
|
||||
value: {}
|
||||
},
|
||||
addNodeRules: {
|
||||
tagName: [
|
||||
{required: true, message: '请输入类名称', trigger: 'blur'},
|
||||
],
|
||||
},
|
||||
addEdgeRules: {
|
||||
edgeName: [
|
||||
{required: true, message: '请输入类名称', trigger: 'blur'},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
vm = this;
|
||||
vm.ontologyId = this.$route.query.id;
|
||||
vm.qo = {
|
||||
pageNo: this.$route.query.pageNo,
|
||||
name: this.$route.query.name
|
||||
};
|
||||
vm.graphName = this.$route.query.graphName;
|
||||
},
|
||||
mounted() {
|
||||
vm.initGraph();
|
||||
},
|
||||
methods: {
|
||||
queryCount() {
|
||||
request({
|
||||
url: `/nebula_model/countallbyontologyid/${vm.ontologyId}`,
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
vm.nodeCount = res.data.gns;
|
||||
vm.edgeCount = res.data.gxs;
|
||||
vm.valueCount = res.data.zsxs;
|
||||
});
|
||||
},
|
||||
queryTagData() { // 查询图空间内节点关系
|
||||
vm.queryCount(); // 更新统计信息
|
||||
request({
|
||||
url: `/nebula_model/findrelationbyontologyid/${vm.ontologyId}`,
|
||||
method: 'post',
|
||||
data: {
|
||||
// ontologyId: vm.ontologyId
|
||||
}
|
||||
}).then(res => {
|
||||
res.data.nodes.forEach(node => {
|
||||
Reflect.ownKeys(nodeProps).forEach(key => {
|
||||
node[key] = _.get(node, nodeProps[key], '');
|
||||
});
|
||||
});
|
||||
res.data.relations.forEach(edge => {
|
||||
Reflect.ownKeys(edgeProps).forEach(key => {
|
||||
edge[key] = _.get(edge, edgeProps[key], '');
|
||||
});
|
||||
// 是否指向自己
|
||||
edge.type = edge.srcId === edge.dstId ? 'loop' : '';
|
||||
// 是否显示箭头
|
||||
edge.style = {endArrow: edge.arrow};
|
||||
});
|
||||
graphData = {
|
||||
nodes: res.data.nodes,
|
||||
edges: res.data.relations
|
||||
};
|
||||
// 读取数据
|
||||
graph.data(graphData);
|
||||
// 渲染图
|
||||
graph.render();
|
||||
});
|
||||
},
|
||||
initGraph: function () {
|
||||
this.destroyGraph();
|
||||
let mountNodeDom = document.getElementById("mountNode");
|
||||
let _width = mountNodeDom.clientWidth, _height = mountNodeDom.clientHeight;
|
||||
// 创建 G6 图实例
|
||||
if (graph == undefined || graph == null) {
|
||||
graph = new G6.Graph(config({width: _width, height: _height, id: 'mountNode'}));
|
||||
|
||||
graph.on('aftercreateedge', (e) => {
|
||||
vm.showAddEdge(e.edge._cfg.model);
|
||||
});
|
||||
|
||||
graph.on('canvas:click', (e) => {
|
||||
vm.selectObj = {
|
||||
type: '',
|
||||
value: {}
|
||||
};
|
||||
vm.clearStates();
|
||||
vm.infoVisible = false;
|
||||
});
|
||||
|
||||
/*拖动节点-start*/
|
||||
// const forceLayout = graph.get('layoutController').layoutMethod;
|
||||
// graph.on('node:dragstart', function (e) {
|
||||
// graph.layout();
|
||||
// refreshDragedNodePosition(e);
|
||||
// });
|
||||
// graph.on('node:drag', function (e) {
|
||||
// if (forceLayout) {
|
||||
// forceLayout.execute();
|
||||
// }
|
||||
// refreshDragedNodePosition(e);
|
||||
// });
|
||||
// graph.on('node:dragend', function (e) {
|
||||
// e.item.get('model').fx = null;
|
||||
// e.item.get('model').fy = null;
|
||||
// });
|
||||
/*拖动节点-end*/
|
||||
|
||||
graph.on('edge:click', function (e) { // 点击边事件
|
||||
let edge = e.item._cfg.model;
|
||||
if (!edge.name) {
|
||||
return;
|
||||
}
|
||||
let fields = [];
|
||||
if (edge.properties && edge.properties.nebulafieldsnapshot) {
|
||||
fields = edge.properties.nebulafieldsnapshot;
|
||||
}
|
||||
vm.showEdgeModifyCom({
|
||||
edgeName: edge.name,
|
||||
label: edge.labelName,
|
||||
arrow: edge.arrow,
|
||||
source: edge.srcId,
|
||||
target: edge.dstId
|
||||
}, fields);
|
||||
graph.getEdges().forEach((edge) => {
|
||||
graph.clearItemStates(edge);
|
||||
});
|
||||
graph.getNodes().forEach((node) => {
|
||||
graph.clearItemStates(node);
|
||||
});
|
||||
graph.setItemState(e.item, 'yourStateName', true);
|
||||
|
||||
});
|
||||
|
||||
graph.on('node:click', (e) => {
|
||||
if (!event.shiftKey && !vm.createEdgeModelFlag) { // 按住shift属于新增关系，不需要触发点击节点事件
|
||||
let node = e.item._cfg.model;
|
||||
vm.showNodeModifyCom({
|
||||
id: node.id,
|
||||
tagName: node.name,
|
||||
label: node.labelName
|
||||
}, _.get(node, 'properties.nebulafieldsnapshot', []));
|
||||
vm.clearStates();
|
||||
graph.setItemState(e.item, 'yourStateName', true);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
vm.queryTagData();
|
||||
},
|
||||
destroyGraph() {
|
||||
try {
|
||||
if (graph != undefined && graph != null) {
|
||||
graph.clear();
|
||||
graph = null;
|
||||
document.getElementById("mountNode").innerHTML = "";
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
clearStates() { // 清空选中状态
|
||||
graph.getNodes().forEach((node) => {
|
||||
graph.clearItemStates(node);
|
||||
});
|
||||
graph.getEdges().forEach((edge) => {
|
||||
graph.clearItemStates(edge);
|
||||
});
|
||||
},
|
||||
changeCreateEdgeModel() { // 切换模式，默认和添加关系模式之间切换
|
||||
vm.createEdgeModelFlag = !vm.createEdgeModelFlag;
|
||||
if (vm.createEdgeModelFlag) {
|
||||
graph.setMode("addEdge");
|
||||
} else {
|
||||
graph.setMode("default");
|
||||
}
|
||||
},
|
||||
showAddNodeDialog() {
|
||||
vm.addNodeCmd = {
|
||||
ontologyId: vm.ontologyId,
|
||||
tagName: '',
|
||||
label: ''
|
||||
};
|
||||
vm.addNodeDialogVisible = true;
|
||||
},
|
||||
submitAddNode() {
|
||||
request({
|
||||
url: `/nebula_model/insertmodelvertex`,
|
||||
method: 'post',
|
||||
data: {
|
||||
ontologyId: vm.ontologyId,
|
||||
tagName: vm.addNodeCmd.tagName,
|
||||
label: vm.addNodeCmd.label
|
||||
}
|
||||
}).then(res => {
|
||||
graph.addItem('node', {
|
||||
id: res.data.vid,
|
||||
name: vm.addNodeCmd.tagName,
|
||||
label: vm.addNodeCmd.tagName,
|
||||
labelName: vm.addNodeCmd.label
|
||||
});
|
||||
graphData.nodes = graph.save().nodes;
|
||||
graph.layout();
|
||||
vm.$message.success("新增类成功");
|
||||
vm.addNodeDialogVisible = false;
|
||||
|
||||
vm.showNodeModifyCom(res.data.ob, []);
|
||||
});
|
||||
},
|
||||
showAddEdge(edge) {
|
||||
vm.addEdgeCmd = {
|
||||
ontologyId: vm.ontologyId,
|
||||
edgeName: '',
|
||||
label: '',
|
||||
arrow: false,
|
||||
source: edge.source,
|
||||
target: edge.target
|
||||
};
|
||||
vm.addEdgeDialogVisible = true;
|
||||
},
|
||||
handleAddEdgeDialogClose() {
|
||||
vm.queryTagData();
|
||||
},
|
||||
submitAddEdge() {
|
||||
vm.$refs['addEdgeForm'].validate((valid) => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
let edge = {
|
||||
srcId: vm.addEdgeCmd.source,
|
||||
ontologyId: vm.ontologyId,
|
||||
dstId: vm.addEdgeCmd.target,
|
||||
edgeName: vm.addEdgeCmd.edgeName,
|
||||
arrow: vm.addEdgeCmd.arrow,
|
||||
label: vm.addEdgeCmd.label
|
||||
};
|
||||
request({
|
||||
url: `/nebula_model/insertmodeledge`,
|
||||
method: 'post',
|
||||
data: edge
|
||||
}).then(res => {
|
||||
vm.queryTagData();
|
||||
vm.$message.success("新增关系成功");
|
||||
vm.addEdgeDialogVisible = false;
|
||||
|
||||
vm.showEdgeModifyCom(edge, []);
|
||||
});
|
||||
});
|
||||
},
|
||||
showTreeCom() { // 显示树形图谱窗口
|
||||
vm.treeInfoVisible = true;
|
||||
vm.$nextTick(() => {
|
||||
vm.$refs['treeGraphInfo'].queryTreeData(vm.ontologyId);
|
||||
});
|
||||
},
|
||||
showNodeModifyCom(node, fields) { // 显示节点编辑组件
|
||||
vm.infoVisible = true;
|
||||
vm.$nextTick(() => {
|
||||
vm.selectObj = {
|
||||
type: 'node',
|
||||
value: node
|
||||
};
|
||||
vm.$refs['noumenonModify'].updateValue(node.tagName, node.label, fields);
|
||||
});
|
||||
},
|
||||
showEdgeModifyCom(edge, fields) { // 显示关系编辑组件
|
||||
vm.infoVisible = true;
|
||||
vm.selectObj = {
|
||||
type: 'edge',
|
||||
value: edge
|
||||
};
|
||||
vm.$nextTick(() => {
|
||||
vm.$refs['noumenonEdgeModify'].updateValue(edge.edgeName, edge.label, edge.arrow, fields, vm.selectObj.value.source, vm.selectObj.value.target);
|
||||
});
|
||||
},
|
||||
backGraph() { // 返回
|
||||
if(vm.$refs['treeGraphInfo']) {
|
||||
vm.$refs['treeGraphInfo'].destroyTree();
|
||||
}
|
||||
vm.$router.push({path: "/graphModel", query: {pageNo: vm.qo.pageNo, name: vm.qo.name}})
|
||||
vm.$message.success("保存成功");
|
||||
},
|
||||
changeArrowVisible() { // 显隐箭头
|
||||
vm.arrowVisible = !vm.arrowVisible;
|
||||
vm.queryTagData();
|
||||
},
|
||||
removeNode() { // 删除节点
|
||||
if (vm.selectObj.type.length === 0) {
|
||||
vm.$message.warning("请先选中节点或关系");
|
||||
return;
|
||||
}
|
||||
this.$confirm('此操作将永久删除选中节点和关系, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
if (vm.selectObj.type === "node") {
|
||||
request({
|
||||
url: `/nebula_model/deletemodelvertex/${vm.selectObj.value.id}`,
|
||||
method: 'get',
|
||||
data: {
|
||||
// vid: vm.selectObj.value.id
|
||||
}
|
||||
}).then(res => {
|
||||
vm.$message.success("删除成功");
|
||||
vm.queryTagData();
|
||||
vm.infoVisible = false;
|
||||
});
|
||||
} else if (vm.selectObj.type === "edge") {
|
||||
request({
|
||||
url: `/nebula_model/deletemodeledge`,
|
||||
method: 'post',
|
||||
data: {
|
||||
srcId: vm.selectObj.value.source,
|
||||
dstId: vm.selectObj.value.target,
|
||||
}
|
||||
}).then(res => {
|
||||
vm.$message.success("删除成功");
|
||||
vm.queryTagData();
|
||||
vm.infoVisible = false;
|
||||
});
|
||||
}
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
submitUpdateNode(modifyCmd) { // 更新
|
||||
request({
|
||||
url: `/nebula_model/insertmodelvertex`,
|
||||
method: 'post',
|
||||
data: {
|
||||
vid: vm.selectObj.value.id,
|
||||
tagName: modifyCmd.tagName,
|
||||
label: modifyCmd.label,
|
||||
fields: modifyCmd.fields
|
||||
}
|
||||
}).then(res => {
|
||||
vm.queryTagData();
|
||||
vm.$message.success("保存成功");
|
||||
});
|
||||
},
|
||||
submitUpdateEdge(modifyCmd) {
|
||||
request({
|
||||
url: `/nebula_model/insertmodeledge`,
|
||||
method: 'post',
|
||||
data: {
|
||||
edgeName: modifyCmd.edgeName,
|
||||
label: modifyCmd.label,
|
||||
fields: modifyCmd.fields,
|
||||
arrow: modifyCmd.arrow,
|
||||
srcId: vm.selectObj.value.source,
|
||||
dstId: vm.selectObj.value.target,
|
||||
}
|
||||
}).then(res => {
|
||||
vm.queryTagData();
|
||||
vm.$message.success("保存成功");
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function refreshDragedNodePosition(e) {
|
||||
const model = e.item.get('model');
|
||||
model.fx = e.x;
|
||||
model.fy = e.y;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.graph-name-box {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 65px;
|
||||
width: 700px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.form-title {
|
||||
font-size: 16px;
|
||||
margin: 15px 0;
|
||||
|
||||
}
|
||||
|
||||
.add-attribute-box {
|
||||
margin-top: 10px;
|
||||
color: #409EFF;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.graph-info-box, .tree-graph-info {
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
top: 0px;
|
||||
overflow: hidden;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
z-index: 999;
|
||||
border-right: 1px solid rgba(52, 100, 224, 0.15);
|
||||
box-shadow: 0px 2px 21px 0px rgba(52, 100, 224, 0.15);
|
||||
}
|
||||
|
||||
.graph-info-box {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.tree-graph-info {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.graph-info-child {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.el-icon-d-arrow-left, .el-icon-d-arrow-right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.el-icon-d-arrow-left {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.el-icon-d-arrow-right {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.info-line-item {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.info-content > div {
|
||||
margin-bottom: 5px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu {
|
||||
/*这个样式不写，右键弹框会一直显示在画布的左下角*/
|
||||
position: absolute;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #f2f4f7;
|
||||
left: -99999px;
|
||||
top: -999999px;
|
||||
}
|
||||
|
||||
.menu div {
|
||||
list-style: none;
|
||||
padding: 5px 10px;
|
||||
color: black;
|
||||
border-bottom: 1px dashed #ffffff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu div:hover {
|
||||
color: #659bc5;
|
||||
background: #f3f6fa;
|
||||
}
|
||||
|
||||
.menu div:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
ul#menuBox li {
|
||||
cursor: pointer;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
ul#menuBox li:hover {
|
||||
color: #1c63e0;
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tips-box {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 50%;
|
||||
width: 300px;
|
||||
margin-left: -150px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
div.icon-box {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 75px;
|
||||
}
|
||||
|
||||
div.icon {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 40px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
div.icon i {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
div.icon-add i {
|
||||
background: url("../../assets/image/icon/bg-add.png") no-repeat center/contain;
|
||||
}
|
||||
|
||||
|
||||
div.icon-remove i {
|
||||
background: url("../../assets/image/icon/changyonggoupiaorenshanchu.png") no-repeat center/contain;
|
||||
}
|
||||
|
||||
|
||||
div.icon-save i {
|
||||
background: url("../../assets/image/icon/fanhui.png") no-repeat center/contain;
|
||||
}
|
||||
|
||||
div.icon-arrow i {
|
||||
background: url("../../assets/image/icon/arrowTop-fill.png") no-repeat center/contain;
|
||||
}
|
||||
|
||||
|
||||
div.icon-tree i {
|
||||
background: url("../../assets/image/icon/shuxingicon.png") no-repeat center/contain;
|
||||
}
|
||||
|
||||
div.icon-arrow.active i {
|
||||
background: url("../../assets/image/icon/arrowTop-fill-active.png") no-repeat center/contain;
|
||||
}
|
||||
|
||||
div.icon-arrow.active {
|
||||
box-shadow: 0px 0px 6px #979797;
|
||||
}
|
||||
|
||||
.node-box {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,327 +0,0 @@
|
||||
<template>
|
||||
<div class="node-box">
|
||||
<transition name="el-zoom-in-center">
|
||||
<div v-show="infoVisible" class="graph-info-box">
|
||||
<div class="form-title"></div>
|
||||
<el-form ref="relationForm" label-width="80px">
|
||||
<el-form-item label="*关系名称">
|
||||
<el-input v-model="relationCmd.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</transition>
|
||||
<i :class="infoVisible ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"
|
||||
@click="infoVisible = !infoVisible"></i>
|
||||
<!-- 为图谱准备一个具备大小（宽高）的Dom -->
|
||||
<div class="tree-container">
|
||||
<div class="icon icon-add" @click="showAddNodeDialog">
|
||||
<i title="新增节点"></i>
|
||||
</div>
|
||||
<div class="icon icon-remove">
|
||||
<i title="删除"></i>
|
||||
</div>
|
||||
<div class="icon icon-save">
|
||||
<i title="保存"></i>
|
||||
</div>
|
||||
<div id="mountNode" style="width: 100%; height: 1000px"></div>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="新增节点"
|
||||
:visible.sync="addNodeDialogVisible"
|
||||
width="40%">
|
||||
<el-form ref="addNodeForm" label-width="80px">
|
||||
<el-form-item label="节点名称">
|
||||
<el-input v-model="addNodeCmd.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="addNodeDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitAddNode">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
import { Graph } from '@antv/x6';
|
||||
|
||||
var vm;
|
||||
var graph;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodeNum: 0,
|
||||
linkNum: 0,
|
||||
infoVisible: false,
|
||||
clickNode: {id: '', name: ''},
|
||||
addNodeDialogVisible: false,
|
||||
addNodeCmd: {
|
||||
name: ''
|
||||
},
|
||||
relationCmd: {
|
||||
name: '',
|
||||
table: '',
|
||||
sourceId: '',
|
||||
targetId: '',
|
||||
edgeId: ''
|
||||
},
|
||||
nodeAttributes: [] // 节点属性
|
||||
}
|
||||
},
|
||||
created() {
|
||||
vm = this;
|
||||
},
|
||||
mounted() {
|
||||
const data = {
|
||||
// 节点
|
||||
nodes: [
|
||||
{
|
||||
id: 'node1', // String，可选，节点的唯一标识
|
||||
x: 40, // Number，必选，节点位置的 x 值
|
||||
y: 40, // Number，必选，节点位置的 y 值
|
||||
width: 80, // Number，可选，节点大小的 width 值
|
||||
height: 40, // Number，可选，节点大小的 height 值
|
||||
label: 'hello', // String，节点标签
|
||||
},
|
||||
{
|
||||
id: 'node2', // String，节点的唯一标识
|
||||
x: 160, // Number，必选，节点位置的 x 值
|
||||
y: 180, // Number，必选，节点位置的 y 值
|
||||
width: 80, // Number，可选，节点大小的 width 值
|
||||
height: 40, // Number，可选，节点大小的 height 值
|
||||
label: 'world', // String，节点标签
|
||||
},
|
||||
],
|
||||
// 边
|
||||
edges: [
|
||||
{
|
||||
source: 'node1', // String，必须，起始节点 id
|
||||
target: 'node2', // String，必须，目标节点 id
|
||||
},
|
||||
],
|
||||
};
|
||||
vm.initGraph(data);
|
||||
},
|
||||
methods: {
|
||||
initGraph: function (_data) {
|
||||
this.destroyGraph();
|
||||
let _width = document.getElementById("mountNode").clientWidth;
|
||||
let _height = document.getElementById("mountNode").clientHeight;
|
||||
graph = new Graph({
|
||||
container: document.getElementById('mountNode'),
|
||||
width: _width,
|
||||
height: _height,
|
||||
scroller: {
|
||||
enabled: true,
|
||||
pannable: true,
|
||||
pageVisible: false,
|
||||
pageBreak: false,
|
||||
},
|
||||
// mousewheel: {
|
||||
// enabled: true,
|
||||
// modifiers: ['ctrl', 'meta'],
|
||||
// },
|
||||
modes: {
|
||||
// Defualt mode
|
||||
default: ['drag-node',
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
enableOptimize: true, // enable the optimize to hide the shapes beside nodes' keyShape
|
||||
},
|
||||
{
|
||||
type: 'zoom-canvas',
|
||||
enableOptimize: true, // enable the optimize to hide the shapes beside nodes' keyShape
|
||||
},
|
||||
{
|
||||
type: 'create-edge',
|
||||
key: 'shift', // undefined by default, options: 'shift', 'control', 'ctrl', 'meta', 'alt'
|
||||
},
|
||||
]
|
||||
},
|
||||
});
|
||||
graph.fromJSON(_data);
|
||||
|
||||
},
|
||||
destroyGraph() {
|
||||
try {
|
||||
if(graph != undefined && graph != null) {
|
||||
graph.clear();
|
||||
graph = null;
|
||||
document.getElementById("mountNode").innerHTML = "";
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
clearStates() { // 清空选中状态
|
||||
graph.getNodes().forEach((node) => {
|
||||
graph.clearItemStates(node);
|
||||
});
|
||||
graph.getEdges().forEach((edge) => {
|
||||
graph.clearItemStates(edge);
|
||||
});
|
||||
},
|
||||
showAddNodeDialog() {
|
||||
vm.addNodeCmd = {
|
||||
name: ''
|
||||
};
|
||||
vm.addNodeDialogVisible = true;
|
||||
},
|
||||
submitAddNode() {
|
||||
graph.addNode({
|
||||
id: Math.ceil(Math.random()*10000).toString(),
|
||||
label: vm.addNodeCmd.name
|
||||
});
|
||||
vm.$message.success("新增节点成功");
|
||||
vm.addNodeDialogVisible = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function refreshDragedNodePosition(e) {
|
||||
const model = e.item.get('model');
|
||||
model.fx = e.x;
|
||||
model.fy = e.y;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.graph-info-box {
|
||||
position: absolute;
|
||||
left: 290px;
|
||||
width: 500px;
|
||||
top: 60px;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
padding: 15px 15px;
|
||||
z-index: 999;
|
||||
border-right: 1px solid rgba(52, 100, 224, 0.15);
|
||||
box-shadow: 0px 2px 21px 0px rgba(52, 100, 224, 0.15);
|
||||
}
|
||||
|
||||
.el-icon-d-arrow-left, .el-icon-d-arrow-right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.el-icon-d-arrow-left {
|
||||
left: 780px;
|
||||
}
|
||||
|
||||
.el-icon-d-arrow-right {
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.info-line-item {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.info-content > div {
|
||||
margin-bottom: 5px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu {
|
||||
/*这个样式不写，右键弹框会一直显示在画布的左下角*/
|
||||
position: absolute;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #f2f4f7;
|
||||
left: -99999px;
|
||||
top: -999999px;
|
||||
}
|
||||
|
||||
.menu div {
|
||||
list-style: none;
|
||||
padding: 5px 10px;
|
||||
color: black;
|
||||
border-bottom: 1px dashed #ffffff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu div:hover {
|
||||
color: #659bc5;
|
||||
background: #f3f6fa;
|
||||
}
|
||||
|
||||
.menu div:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
ul#menuBox li {
|
||||
cursor: pointer;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
ul#menuBox li:hover {
|
||||
color: #1c63e0;
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.icon {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 40px;
|
||||
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
div.icon i {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
div.icon-add {
|
||||
right: 75px;
|
||||
}
|
||||
|
||||
div.icon-add i {
|
||||
background: url("../../assets/image/icon/bg-add.png") no-repeat center/contain;
|
||||
}
|
||||
|
||||
div.icon-remove {
|
||||
right: 145px;
|
||||
}
|
||||
|
||||
div.icon-remove i {
|
||||
background: url("../../assets/image/icon/changyonggoupiaorenshanchu.png") no-repeat center/contain;
|
||||
}
|
||||
|
||||
div.icon-save {
|
||||
right: 215px;
|
||||
}
|
||||
|
||||
div.icon-save i {
|
||||
background: url("../../assets/image/icon/baocun.png") no-repeat center/contain;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="log-box" v-html="content"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import request from '@/utils/request2';
|
||||
|
||||
var _this;
|
||||
var socket;
|
||||
var sit;
|
||||
export default {
|
||||
name: "log",
|
||||
data() {
|
||||
return {
|
||||
modelId: '',
|
||||
type: '',
|
||||
content: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
if (sit) {
|
||||
clearInterval(sit);
|
||||
}
|
||||
_this.content = "";
|
||||
if (socket) {
|
||||
socket.close();
|
||||
}
|
||||
},
|
||||
init({modelId, type}) {
|
||||
_this.content = "";
|
||||
_this.modelId = modelId;
|
||||
_this.type = type;
|
||||
console.log(`当前modelId为${modelId},type为${type}`);
|
||||
socket = new WebSocket(`ws://47.103.128.32:10050/socket/file-tail?modelId=${modelId}&type=${type}`);
|
||||
//连接打开事件
|
||||
socket.onopen = function () {
|
||||
console.log("Socket 已打开");
|
||||
};
|
||||
//收到消息事件
|
||||
socket.onmessage = function (msg) {
|
||||
if (msg.data.indexOf('连接成功，sessionId=') != -1) {
|
||||
var sessionId = msg.data.slice(15);
|
||||
console.log(sessionId)
|
||||
} else {
|
||||
// console.log(msg);
|
||||
_this.content += '<p>' + msg.data + "</p>";
|
||||
_this.$nextTick(() => {
|
||||
document.getElementById("log-box").scrollTop = 100000;
|
||||
});
|
||||
}
|
||||
};
|
||||
//连接关闭事件
|
||||
socket.onclose = function () {
|
||||
console.log("Socket已关闭");
|
||||
};
|
||||
//发生了错误事件
|
||||
socket.onerror = function () {
|
||||
alert("Socket发生了错误");
|
||||
}
|
||||
|
||||
|
||||
//创建心跳，防止掉线
|
||||
sit = setInterval(() => {
|
||||
let op = {
|
||||
data: "heart",
|
||||
};
|
||||
sendJson(op);
|
||||
}, 5000);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function sendJson(data) {
|
||||
// 0 CONNECTING 连接尚未建立
|
||||
// 1 OPEN WebSocket的链接已经建立
|
||||
// 2 CLOSING 连接正在关闭
|
||||
// 3 CLOSED 连接已经关闭或不可用
|
||||
if (socket.readyState == 2 || socket.readyState == 3) {
|
||||
clearInterval(sit);
|
||||
sit = null;
|
||||
} else {
|
||||
socket.send(JSON.stringify(data));
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#log-box {
|
||||
height: 800px;
|
||||
overflow-y: auto;
|
||||
background-color: #c2c2c2;
|
||||
border-radius: 5px;
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
#log-box p {
|
||||
line-height: 30px;
|
||||
font-size: 16px;
|
||||
text-indent: 2em;
|
||||
color: #313131;
|
||||
}
|
||||
</style>
|
||||
@@ -1,256 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
辅助维修
|
||||
<el-image
|
||||
class="img-item"
|
||||
:src="coverImg"
|
||||
:preview-src-list="srcList">
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div class="search-input-box">
|
||||
<el-input
|
||||
class="search-input"
|
||||
placeholder="请输入内容"
|
||||
v-model="keyword">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
<el-button type="primary" style="margin-left: 30px" @click="queryByKeyword">检 索</el-button>
|
||||
</div>
|
||||
<div class="title-label">Top5</div>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="推荐案例" name="first">
|
||||
<el-table :data="list" style="width: 100%">
|
||||
<el-table-column type="index" width="50"></el-table-column>
|
||||
<el-table-column prop="number" label="案例编号"></el-table-column>
|
||||
<el-table-column prop="name" label="案例名称"></el-table-column>
|
||||
<el-table-column prop="keyContent" label="关键词"></el-table-column>
|
||||
<el-table-column prop="name" label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.native.prevent="showDetail(scope.row, 'faultCase')" type="text" size="small">
|
||||
查看说明
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="推荐维修" name="second">
|
||||
<el-table :data="repairList" style="width: 100%">
|
||||
<el-table-column type="index" width="50"></el-table-column>
|
||||
<el-table-column prop="title" label="标题"></el-table-column>
|
||||
<el-table-column prop="reason" label="原因">
|
||||
<template slot-scope="scope">
|
||||
<label>{{ scope.row.reason.substring(0, 30) + (scope.row.reason.length > 30 ? '...' : '') }}</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="influence" label="影响">
|
||||
<template slot-scope="scope">
|
||||
<label>{{
|
||||
scope.row.influence.substring(0, 30) + (scope.row.influence.length > 30 ? '...' : '')
|
||||
}}</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="program" label="程序">
|
||||
<template slot-scope="scope">
|
||||
<label>{{ scope.row.program.substring(0, 30) + (scope.row.program.length > 30 ? '...' : '') }}</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.native.prevent="showDetail(scope.row, 'repair')" type="text" size="small">
|
||||
查看说明
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="查看说明"
|
||||
:visible.sync="detailVisible"
|
||||
width="50%">
|
||||
<el-tabs>
|
||||
<el-tab-pane label="故障描述">
|
||||
{{ cmd.description }}
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="排故过程">
|
||||
{{ cmd.checkFaultProcess }}
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="故障分析">
|
||||
{{ cmd.faultAnalysis }}
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="故障总结">
|
||||
{{ cmd.faultSummary }}
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="经验教训">
|
||||
{{ cmd.experience }}
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="detailVisible = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="查看说明"
|
||||
:visible.sync="repairDetailVisible"
|
||||
width="50%">
|
||||
<el-tabs>
|
||||
<el-tab-pane label="标题">
|
||||
{{ cmd.title }}
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="原因">
|
||||
{{ cmd.reason }}
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="影响">
|
||||
{{ cmd.influence }}
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="程序">
|
||||
{{ cmd.program }}
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="repairDetailVisible = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request614';
|
||||
|
||||
import coverImg from "@/assets/image/icon/tupian.png";
|
||||
import aImg from "@/assets/image/614/5a.jpg";
|
||||
import bImg from "@/assets/image/614/5b.jpg";
|
||||
import cImg from "@/assets/image/614/5c.jpg";
|
||||
import dImg from "@/assets/image/614/5d.jpg";
|
||||
import eImg from "@/assets/image/614/5e.jpg";
|
||||
import fImg from "@/assets/image/614/5f.jpg";
|
||||
import gImg from "@/assets/image/614/5g.jpg";
|
||||
import hImg from "@/assets/image/614/5h.jpg";
|
||||
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
name: "auxiliaryMaintenance",
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
list: [],
|
||||
repairList: [],
|
||||
cmd: {},
|
||||
rateNum: "-",
|
||||
activeTab: 'first',
|
||||
detailVisible: false,
|
||||
repairDetailVisible: false,
|
||||
coverImg: coverImg,
|
||||
srcList: [
|
||||
aImg, bImg, cImg, dImg, eImg, fImg, gImg, hImg
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
},
|
||||
methods: {
|
||||
queryByKeyword() {
|
||||
if (_this.keyword.length === 0) {
|
||||
_this.$message.warning("请输入内容再进行检索");
|
||||
return false;
|
||||
}
|
||||
|
||||
let sum = 0;
|
||||
for (let charStr in _this.keyword) {
|
||||
sum += charStr.charCodeAt(0);
|
||||
}
|
||||
_this.rateNum = "9" + sum.toString().substring(0, 1) + "." + sum.toString().substring(1);
|
||||
_this.queryFaultCaseList();
|
||||
_this.queryRepairList();
|
||||
},
|
||||
queryFaultCaseList() {
|
||||
let formData = new FormData();
|
||||
formData.append("keyword", _this.keyword);
|
||||
request({
|
||||
url: '/fault_case/query_like_keyword',
|
||||
method: 'post',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
let list = res.data;
|
||||
let resList = [];
|
||||
// 优化排序
|
||||
for (let i = list.length - 1; i >= 0; i--) {
|
||||
let row = list[i];
|
||||
if (row.keyContent && row.keyContent.indexOf(_this.keyword) >= 0 && row.description && row.description.indexOf(_this.keyword) >= 0) {
|
||||
resList.unshift(row);
|
||||
} else {
|
||||
resList.push(row);
|
||||
}
|
||||
}
|
||||
_this.list = resList;
|
||||
_this.$message.success("检索成功");
|
||||
});
|
||||
},
|
||||
queryRepairList() {
|
||||
let formData = new FormData();
|
||||
formData.append("keyword", _this.keyword);
|
||||
request({
|
||||
url: '/repair/query_like_keyword',
|
||||
method: 'post',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
let list = res.data;
|
||||
let resList = [];
|
||||
// 优化排序
|
||||
for (let i = list.length - 1; i >= 0; i--) {
|
||||
let row = list[i];
|
||||
if (row.title && row.title.indexOf(_this.keyword) >= 0 && row.reason && row.reason.indexOf(_this.keyword) >= 0) {
|
||||
resList.unshift(row);
|
||||
} else {
|
||||
resList.push(row);
|
||||
}
|
||||
}
|
||||
_this.repairList = resList;
|
||||
});
|
||||
},
|
||||
showDetail(row, type) {
|
||||
_this.cmd = row;
|
||||
if (type === 'repair') {
|
||||
_this.repairDetailVisible = true;
|
||||
} else if (type === 'faultCase') {
|
||||
_this.detailVisible = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.img-item {
|
||||
width: 95px;
|
||||
height: 25px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
overflow-x: hidden;
|
||||
|
||||
.search-input-box {
|
||||
display: flex;
|
||||
width: 40%;
|
||||
margin-bottom: 1.5625vw;
|
||||
}
|
||||
|
||||
.title-label {
|
||||
margin: 20px 0;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,363 +0,0 @@
|
||||
<template>
|
||||
<div class="container-box">
|
||||
<!-- <div class="btn-box"></div>-->
|
||||
<div class="tool-box">
|
||||
<el-button size="small" type="primary" style="margin-bottom: 15px" @click="gotoInfoExtract">图谱管理</el-button>
|
||||
<el-image
|
||||
class="img-item"
|
||||
:src="coverImg"
|
||||
:preview-src-list="srcList">
|
||||
</el-image>
|
||||
</div>
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12">
|
||||
<div class="block series-box">
|
||||
<div class="block-label">实体数量</div>
|
||||
<div class="count-box">{{ count.nodeCount }}个</div>
|
||||
<!-- <div class="btn-box">管 理</div>-->
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="block commodity-box">
|
||||
<div class="block-label">三元组数量</div>
|
||||
<div class="count-box">{{ count.relationCount }}个</div>
|
||||
<!-- <div class="btn-box">管 理</div>-->
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>
|
||||
<el-button size="small" type="primary" @click="clearAll" style="float: left;margin-right: 15px">清空数据
|
||||
</el-button>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="#"
|
||||
:auto-upload="false"
|
||||
:on-change="handleFileChange"
|
||||
:limit="10"
|
||||
accept=".xls,.xlsx"
|
||||
:file-list="fileList">
|
||||
<el-button size="small" type="primary">导 入</el-button>
|
||||
<label slot="tip" class="el-upload__tip" style="margin-left: 25px">只能上传.xls/.xlsx文件</label>
|
||||
</el-upload>
|
||||
</div>
|
||||
<el-row :gutter="20" style="margin-top: 15px">
|
||||
<el-col :span="12">
|
||||
<div class="graph-box">
|
||||
<graph ref="graph"></graph>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-table :data="list" border style="width: 100%" height="500">
|
||||
<el-table-column prop="name" label="概念名称" width="130"></el-table-column>
|
||||
<el-table-column prop="properties" label="属性">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="tag in scope.row.properties" :key="tag" style="margin-right: 5px;margin-bottom: 5px">{{
|
||||
tag
|
||||
}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request614';
|
||||
import graph from "@/components/graph/Graph614";
|
||||
import coverImg from "@/assets/image/icon/tupian.png";
|
||||
import aImg from "@/assets/image/614/1a.jpg";
|
||||
import bImg from "@/assets/image/614/1b.jpg";
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
components: {
|
||||
'graph': graph,
|
||||
},
|
||||
name: "indexPage",
|
||||
data() {
|
||||
return {
|
||||
count: {
|
||||
nodeCount: 0,
|
||||
relationCount: 0
|
||||
},
|
||||
fileList: [],
|
||||
list: [
|
||||
{
|
||||
name: '军种',
|
||||
properties: ['编号', '名称']
|
||||
}, {
|
||||
name: '数控系统',
|
||||
properties: ['编号', '名称', '型号', '最新交付日期', '发动机', '状态', '工作总寿命', '总工作时间', '工作时间翻修期'
|
||||
, '翻修期累积时间', '日历翻修期', '下次翻修日期']
|
||||
}, {
|
||||
name: '发动机',
|
||||
properties: ['编号', '名称', '安装时间', '安装位置', '总工作时间', '总空中工作时间', '型号']
|
||||
}, {
|
||||
name: '故障信息',
|
||||
properties: ['编号', '名称', '故障件编号', '故障件型号', '故障件名称', '环境特点', '故障原因', '故障工作时间',
|
||||
'发生时间', '发现时机', '故障场所', '处理时间', '处理方式', '故障处理措施', '是否归零', '是否重复故障',
|
||||
'是否责任故障', '是否已处理', '故障现象', '排故进度']
|
||||
}, {
|
||||
name: '故障案例',
|
||||
properties: ['编号', '名称', '关键词', '排故进程', '故障分析', '故障总结', '经验教训']
|
||||
}, {
|
||||
name: '原飞机',
|
||||
properties: ['编号', '名称']
|
||||
}, {
|
||||
name: '部件',
|
||||
properties: ['编号', '名称', '型号', '编号码', '日期']
|
||||
}, {
|
||||
name: '地点',
|
||||
properties: ['编号', '名称']
|
||||
}, {
|
||||
name: '飞机',
|
||||
properties: ['编号', '名称']
|
||||
},
|
||||
],
|
||||
coverImg: coverImg,
|
||||
srcList: [
|
||||
aImg,
|
||||
bImg
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryCount();
|
||||
|
||||
_this.$refs['graph'].initGraph({
|
||||
nodes: [
|
||||
{
|
||||
id: "1",
|
||||
label: '军种',
|
||||
_label: 'armyType'
|
||||
}, {
|
||||
id: "2",
|
||||
label: '数控系统',
|
||||
_label: 'control'
|
||||
}, {
|
||||
id: "3",
|
||||
label: '发动机',
|
||||
_label: 'engine'
|
||||
}, {
|
||||
id: "4",
|
||||
label: '故障信息',
|
||||
_label: 'fault'
|
||||
}, {
|
||||
id: "5",
|
||||
label: '故障案例',
|
||||
_label: 'faultCase'
|
||||
}, {
|
||||
id: "6",
|
||||
label: '原飞机',
|
||||
_label: 'oriPlane'
|
||||
}, {
|
||||
id: "7",
|
||||
label: '部件',
|
||||
_label: 'part'
|
||||
}, {
|
||||
id: "8",
|
||||
label: '发生地',
|
||||
_label: 'place'
|
||||
}, {
|
||||
id: "9",
|
||||
label: '飞机',
|
||||
_label: 'plane'
|
||||
}
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
source: '3',
|
||||
target: '8',
|
||||
label: '所在地'
|
||||
}, {
|
||||
source: '3',
|
||||
target: '6',
|
||||
label: '原装配'
|
||||
}, {
|
||||
source: '3',
|
||||
target: '9',
|
||||
label: '现装配'
|
||||
}, {
|
||||
source: '3',
|
||||
target: '1',
|
||||
label: '隶属'
|
||||
}, {
|
||||
source: '3',
|
||||
target: '2',
|
||||
label: '数控于'
|
||||
}, {
|
||||
source: '4',
|
||||
target: '9',
|
||||
label: '故障飞机'
|
||||
}, {
|
||||
source: '4',
|
||||
target: '3',
|
||||
label: '故障发动机'
|
||||
}, {
|
||||
source: '4',
|
||||
target: '8',
|
||||
label: '故障发生地'
|
||||
}, {
|
||||
source: '4',
|
||||
target: '2',
|
||||
label: '故障控制系统'
|
||||
}, {
|
||||
source: '2',
|
||||
target: '7',
|
||||
label: '配套部件'
|
||||
}, {
|
||||
source: '2',
|
||||
target: '8',
|
||||
label: '所在地'
|
||||
}, {
|
||||
source: '5',
|
||||
target: '9',
|
||||
label: '故障案例飞机'
|
||||
}
|
||||
]
|
||||
}, true, null, true);
|
||||
},
|
||||
methods: {
|
||||
gotoInfoExtract() {
|
||||
this.$router.push("/614/infoExtract");
|
||||
},
|
||||
queryCount() {
|
||||
request({
|
||||
url: '/neo4j/get_count',
|
||||
method: 'post',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.count.nodeCount = res.data.nodeCount;
|
||||
_this.count.relationCount = res.data.relationCount;
|
||||
});
|
||||
},
|
||||
handleFileChange(file) {
|
||||
_this.fileList = [file];
|
||||
let formData = new FormData();
|
||||
formData.append("file", file.raw);
|
||||
request({
|
||||
url: '/neo4j/read_excel',
|
||||
method: 'put',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
_this.$message.success("导入成功");
|
||||
});
|
||||
},
|
||||
clearAll() {
|
||||
_this.$confirm('此操作将永久清空数据, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
request({
|
||||
url: '/neo4j/clear_all',
|
||||
method: 'post',
|
||||
}).then(res => {
|
||||
_this.$message.success("清空成功");
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tool-box {
|
||||
overflow: hidden;
|
||||
|
||||
.img-item {
|
||||
float: right;
|
||||
width: 95px;
|
||||
height: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-box {
|
||||
border: 1px solid #dcdddf;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box-card .el-card__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
width: 130px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
background-color: #4da8fc;
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.container-box {
|
||||
padding: 30px;
|
||||
|
||||
|
||||
.block {
|
||||
border: 1px solid rgb(231, 231, 231);
|
||||
padding: 25px 30px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
margin-bottom: 15px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.series-box, .commodity-box {
|
||||
color: #fff;
|
||||
|
||||
|
||||
.block-label {
|
||||
font-size: 25px;
|
||||
float: left;
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.count-box {
|
||||
font-size: 35px;
|
||||
float: right;
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.btn-box:hover {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
}
|
||||
|
||||
.series-box {
|
||||
background-color: rgb(108, 180, 246);
|
||||
|
||||
.btn-box {
|
||||
color: rgb(108, 180, 246);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.commodity-box {
|
||||
background-color: rgb(251, 174, 94);
|
||||
|
||||
.btn-box {
|
||||
color: rgb(251, 174, 94);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,252 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
信息汇聚
|
||||
<el-image
|
||||
class="img-item"
|
||||
:src="coverImg"
|
||||
:preview-src-list="srcList">
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div class="search-input-box">
|
||||
<el-input
|
||||
class="search-input"
|
||||
placeholder="请输入内容"
|
||||
v-model="keyword">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
<el-button type="primary" style="margin-left: 30px" @click="queryFaultGraph">检 索</el-button>
|
||||
</div>
|
||||
<div class="graph-box">
|
||||
<graph ref="graph"></graph>
|
||||
</div>
|
||||
</div>
|
||||
<el-drawer
|
||||
title="基础信息"
|
||||
:visible.sync="drawerVisible"
|
||||
direction="rtl">
|
||||
<div class="drawer-content">
|
||||
<el-descriptions :column="1" v-show="activeLabel === 'fault'">
|
||||
<el-descriptions-item label="故障名称">{{ nodeItem.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="环境特点">{{ nodeItem.enviChar }}</el-descriptions-item>
|
||||
<el-descriptions-item label="故障件编号">{{ nodeItem.partNumber }}</el-descriptions-item>
|
||||
<el-descriptions-item label="故障件型号">{{ nodeItem.partModel }}</el-descriptions-item>
|
||||
<el-descriptions-item label="故障件名称">{{ nodeItem.partName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="发生时间">{{ nodeItem.happenTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="故障场所">{{ nodeItem.faultPlace }}</el-descriptions-item>
|
||||
<el-descriptions-item label="处理时间">{{ nodeItem.handleTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="处理方式">{{ nodeItem.handleStyle }}</el-descriptions-item>
|
||||
<el-descriptions-item label="处理措施">{{ nodeItem.faultHandleMeasures }}</el-descriptions-item>
|
||||
<el-descriptions-item label="故障原因">{{ nodeItem.faultReason }}</el-descriptions-item>
|
||||
<el-descriptions-item label="故障现象">{{ nodeItem.faultPhenomenon }}</el-descriptions-item>
|
||||
<el-descriptions-item label="排故进度">{{ nodeItem.checkFaultProgress }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions :column="1" v-show="activeLabel === 'engine'">
|
||||
<el-descriptions-item label="编号">{{ nodeItem.number }}</el-descriptions-item>
|
||||
<el-descriptions-item label="名称">{{ nodeItem.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="安装时间">{{ nodeItem.installTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="安装位置">{{ nodeItem.position }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总工时间">{{ nodeItem.workTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总空中工作时间">{{ nodeItem.airWorkTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="型号">{{ nodeItem.model }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions :column="1" v-show="activeLabel === 'control'">
|
||||
<el-descriptions-item label="编号">{{ nodeItem.number }}</el-descriptions-item>
|
||||
<el-descriptions-item label="名称">{{ nodeItem.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="型号">{{ nodeItem.model }}</el-descriptions-item>
|
||||
<el-descriptions-item label="最新交付日期">{{ nodeItem.lastDeliverTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="发动机">{{ nodeItem.engine }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">{{ nodeItem.status }}</el-descriptions-item>
|
||||
<el-descriptions-item label="工作总寿命">{{ nodeItem.workLife }}</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="总工作时间">{{ nodeItem.workTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="工作时间翻修期">{{ nodeItem.renovate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="翻修期累积时间">{{ nodeItem.renovateTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="日历翻修期">{{ nodeItem.renovateCalendar }}</el-descriptions-item>
|
||||
<el-descriptions-item label="下次翻修日期">{{ nodeItem.nextRenovate }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions :column="1" v-show="activeLabel === 'part'">
|
||||
<el-descriptions-item label="编号">{{ nodeItem.number }}</el-descriptions-item>
|
||||
<el-descriptions-item label="名称">{{ nodeItem.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="型号">{{ nodeItem.model }}</el-descriptions-item>
|
||||
<el-descriptions-item label="编号码">{{ nodeItem.numberCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="出厂日期">{{ nodeItem.dateStr }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions :column="1" v-show="activeLabel === 'other'">
|
||||
<el-descriptions-item label="编号">{{ nodeItem.number }}</el-descriptions-item>
|
||||
<el-descriptions-item label="名称">{{ nodeItem.name }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request614';
|
||||
import graph from "@/components/graph/Graph614";
|
||||
|
||||
import coverImg from "@/assets/image/icon/tupian.png";
|
||||
import aImg from "@/assets/image/614/4a.jpg";
|
||||
import bImg from "@/assets/image/614/4b.jpg";
|
||||
import cImg from "@/assets/image/614/4c.jpg";
|
||||
import dImg from "@/assets/image/614/4d.jpg";
|
||||
import eImg from "@/assets/image/614/4e.jpg";
|
||||
import fImg from "@/assets/image/614/4f.jpg";
|
||||
import gImg from "@/assets/image/614/4g.jpg";
|
||||
import hImg from "@/assets/image/614/4h.jpg";
|
||||
import jImg from "@/assets/image/614/4j.jpg";
|
||||
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
components: {
|
||||
'graph': graph,
|
||||
},
|
||||
name: "infoConverge",
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
nodeItem: {},
|
||||
drawerVisible: false,
|
||||
activeLabel: '',
|
||||
coverImg: coverImg,
|
||||
srcList: [
|
||||
aImg, bImg, cImg, dImg, eImg, fImg, gImg, hImg, jImg
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
},
|
||||
methods: {
|
||||
queryFaultGraph() {
|
||||
if (_this.keyword.length === 0) {
|
||||
_this.$message.warning("请输入内容再进行检索");
|
||||
return false;
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append("keyword", _this.keyword);
|
||||
request({
|
||||
url: '/fault/query_for_neo4j',
|
||||
method: 'post',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
res.data.nodes.forEach(node => {
|
||||
node._label = node.label;
|
||||
node.label = node.properties.name;
|
||||
node.id = node.id.toString();
|
||||
});
|
||||
res.data.relations.forEach(edge => {
|
||||
delete edge.id;
|
||||
edge.label = edge.properties ? edge.properties.name : '';
|
||||
edge.source = edge.source.toString();
|
||||
edge.target = edge.target.toString();
|
||||
if (edge.source === edge.target) {
|
||||
edge.type = 'loop';
|
||||
} else {
|
||||
delete edge.type;
|
||||
}
|
||||
});
|
||||
|
||||
_this.$refs['graph'].initGraph({
|
||||
nodes: res.data.nodes,
|
||||
edges: res.data.relations
|
||||
}, true, _this.clickNode);
|
||||
_this.$message.success("检索成功");
|
||||
});
|
||||
},
|
||||
clickNode(param) {
|
||||
_this.activeLabel = param._label;
|
||||
if (param._label === "fault") {
|
||||
request({
|
||||
url: '/fault/query_unique',
|
||||
method: 'post',
|
||||
data: {
|
||||
EQS_number: param.number
|
||||
}
|
||||
}).then(res => {
|
||||
_this.nodeItem = res.data;
|
||||
_this.drawerVisible = true;
|
||||
});
|
||||
} else if (param._label === "engine") {
|
||||
request({
|
||||
url: '/engine/query_unique',
|
||||
method: 'post',
|
||||
data: {
|
||||
EQS_number: param.number
|
||||
}
|
||||
}).then(res => {
|
||||
_this.nodeItem = res.data;
|
||||
_this.drawerVisible = true;
|
||||
});
|
||||
} else if (param._label === "control") {
|
||||
request({
|
||||
url: '/control/query_unique',
|
||||
method: 'post',
|
||||
data: {
|
||||
EQS_number: param.number
|
||||
}
|
||||
}).then(res => {
|
||||
_this.nodeItem = res.data;
|
||||
_this.drawerVisible = true;
|
||||
});
|
||||
} else if (param._label === "part") {
|
||||
request({
|
||||
url: '/part/query_unique',
|
||||
method: 'post',
|
||||
data: {
|
||||
EQS_number: param.number
|
||||
}
|
||||
}).then(res => {
|
||||
_this.nodeItem = res.data;
|
||||
_this.drawerVisible = true;
|
||||
});
|
||||
} else {
|
||||
_this.activeLabel = 'other';
|
||||
_this.nodeItem = {
|
||||
number: param.number,
|
||||
name: param.label
|
||||
};
|
||||
_this.drawerVisible = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.img-item {
|
||||
width: 95px;
|
||||
height: 25px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 80px;
|
||||
}
|
||||
.menu-content {
|
||||
overflow-x: hidden;
|
||||
|
||||
.search-input-box {
|
||||
display: flex;
|
||||
width: 40%;
|
||||
margin-bottom: 1.5625vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
padding: 0 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.graph-box {
|
||||
border: 1px solid #dcdddf;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,265 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
知识抽取
|
||||
<el-tag
|
||||
class="tag-item"
|
||||
@click="handleTagClick(item)"
|
||||
v-for="item in tags"
|
||||
:key="item.label"
|
||||
:type="item.type"
|
||||
:effect="activeTag === item.label ? 'dark' : 'plain'">
|
||||
{{ item.name }}
|
||||
</el-tag>
|
||||
<el-image
|
||||
class="img-item"
|
||||
:src="coverImg"
|
||||
:preview-src-list="srcList">
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div class="graph-box">
|
||||
<graph ref="graph"></graph>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="title-label">实体(F1值：99.2%)</div>
|
||||
<el-table :data="nodeRecord.list" border style="width: 100%">
|
||||
<el-table-column prop="id" label="ID"></el-table-column>
|
||||
<el-table-column prop="label" label="标签" :formatter="labelFormatter"></el-table-column>
|
||||
<el-table-column prop="number" label="编号"></el-table-column>
|
||||
<el-table-column prop="properties.name" label="名称"></el-table-column>
|
||||
<el-table-column prop="flag" label="是否准确" width="80">
|
||||
<template slot-scope="scope">
|
||||
<label style="color: #00dc6b">√</label>
|
||||
<!-- <label style="color: #e02323" v-if="!scope.row.flag">×</label>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
:page-size="5"
|
||||
layout="prev, pager, next"
|
||||
@current-change="handleEntityCurrentChange"
|
||||
:current-page="nodeQo.pageNo"
|
||||
:total="nodeRecord.total">
|
||||
</el-pagination>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="title-label">三元组(F1值：98.3%)</div>
|
||||
<el-table :data="relationRecord.list" border style="width: 100%">
|
||||
<el-table-column prop="properties.sourceNumber" label="起始节点编号"></el-table-column>
|
||||
<el-table-column prop="properties.targetNumber" label="终止节点编号"></el-table-column>
|
||||
<el-table-column prop="properties.name" label="名称"></el-table-column>
|
||||
<el-table-column prop="name" label="是否准确" width="80">
|
||||
<template slot-scope="scope">
|
||||
<label style="color: #00dc6b">√</label>
|
||||
<!-- <label style="color: #e02323" v-if="!scope.row.flag">×</label>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:page-size="5"
|
||||
@current-change="handleTripletCurrentChange"
|
||||
:current-page="relationQo.pageNo"
|
||||
:total="relationRecord.total">
|
||||
</el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request614';
|
||||
import graph from "@/components/graph/Graph614";
|
||||
|
||||
import coverImg from "@/assets/image/icon/tupian.png";
|
||||
import aImg from "@/assets/image/614/2a.jpg";
|
||||
import bImg from "@/assets/image/614/2b.jpg";
|
||||
import cImg from "@/assets/image/614/2c.jpg";
|
||||
import dImg from "@/assets/image/614/2d.jpg";
|
||||
import fImg from "@/assets/image/614/2f.jpg";
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
components: {
|
||||
'graph': graph,
|
||||
},
|
||||
name: "infoExtract",
|
||||
data() {
|
||||
return {
|
||||
nodeQo: {
|
||||
pageNo: 1,
|
||||
pageSize: 5
|
||||
},
|
||||
relationQo: {
|
||||
pageNo: 1,
|
||||
pageSize: 5
|
||||
},
|
||||
nodeRecord: {
|
||||
list: [],
|
||||
total: 0
|
||||
},
|
||||
relationRecord: {
|
||||
list: [],
|
||||
total: 0
|
||||
},
|
||||
tags: [
|
||||
{
|
||||
name: '数控系统',
|
||||
label: 'control'
|
||||
}, {
|
||||
name: '发动机',
|
||||
label: 'engine'
|
||||
}, {
|
||||
name: '故障信息',
|
||||
label: 'fault'
|
||||
}
|
||||
],
|
||||
activeTag: '',
|
||||
legendList: {
|
||||
"armyType": {label: '军种', color: 'rgb(76,142,218)'},
|
||||
"control": {label: '控制系统', color: 'rgb(236,181,201)'},
|
||||
"engine": {label: '发动机', color: 'rgb(241,102,103)'},
|
||||
"fault": {label: '故障信息', color: 'rgb(141,204,147)'},
|
||||
"faultCase": {label: '故障案例', color: 'rgb(156,33,234)'},
|
||||
"oriPlane": {label: '原飞机', color: 'rgb(255,196,84)'},
|
||||
"part": {label: '部件', color: 'rgb(86,148,128)'},
|
||||
"place": {label: '发生地', color: 'rgb(217,200,174)'},
|
||||
"plane": {label: '飞机', color: 'rgb(87,199,227)'}
|
||||
},
|
||||
coverImg: coverImg,
|
||||
srcList: [
|
||||
aImg, bImg, cImg, dImg, fImg
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryGraphData();
|
||||
_this.queryNodePage();
|
||||
_this.queryRelationPage();
|
||||
},
|
||||
methods: {
|
||||
handleTagClick(item) {
|
||||
if (item.label !== _this.activeTag) {
|
||||
_this.activeTag = item.label;
|
||||
} else {
|
||||
_this.activeTag = '';
|
||||
}
|
||||
_this.queryGraphData();
|
||||
},
|
||||
queryGraphData() {
|
||||
let formData = new FormData();
|
||||
formData.append("label", _this.activeTag);
|
||||
request({
|
||||
url: '/neo4j/query_data/70',
|
||||
method: 'post',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
res.data.nodes.forEach(node => {
|
||||
node._label = node.label;
|
||||
node.label = node.properties.name;
|
||||
node.id = node.id.toString();
|
||||
});
|
||||
res.data.relations.forEach(edge => {
|
||||
delete edge.id;
|
||||
edge.source = edge.source.toString();
|
||||
edge.target = edge.target.toString();
|
||||
edge.label = edge.properties ? edge.properties.name : '';
|
||||
if (edge.source === edge.target) {
|
||||
edge.type = 'loop';
|
||||
} else {
|
||||
delete edge.type;
|
||||
}
|
||||
});
|
||||
_this.$refs['graph'].initGraph({
|
||||
nodes: res.data.nodes,
|
||||
edges: res.data.relations
|
||||
}, true);
|
||||
});
|
||||
},
|
||||
labelFormatter(row) {
|
||||
if (_this.legendList[row.label]) {
|
||||
return _this.legendList[row.label].label;
|
||||
} else {
|
||||
return '-'
|
||||
}
|
||||
},
|
||||
queryNodePage() {
|
||||
request({
|
||||
url: '/neo4j/query_node_page',
|
||||
method: 'post',
|
||||
data: _this.nodeQo
|
||||
}).then(res => {
|
||||
_this.nodeRecord.list = res.data.nodes;
|
||||
_this.nodeRecord.total = res.data.total;
|
||||
});
|
||||
},
|
||||
queryRelationPage() {
|
||||
request({
|
||||
url: '/neo4j/query_relation_page',
|
||||
method: 'post',
|
||||
data: _this.relationQo
|
||||
}).then(res => {
|
||||
_this.relationRecord.list = res.data.relations;
|
||||
_this.relationRecord.total = res.data.total;
|
||||
});
|
||||
},
|
||||
handleEntityCurrentChange(val) {
|
||||
_this.nodeQo.pageNo = val;
|
||||
_this.queryNodePage();
|
||||
},
|
||||
handleTripletCurrentChange(val) {
|
||||
_this.relationQo.pageNo = val;
|
||||
_this.queryRelationPage();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.img-item {
|
||||
width: 95px;
|
||||
height: 25px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
overflow-x: hidden;
|
||||
|
||||
.title-label {
|
||||
margin: 20px 0;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-box {
|
||||
border: 1px solid #dcdddf;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,161 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
链接预测
|
||||
<el-image
|
||||
class="img-item"
|
||||
:src="coverImg"
|
||||
:preview-src-list="srcList">
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div class="recommend-content">
|
||||
<div class="search-input-box">
|
||||
<el-input placeholder="请输入头实体内容" v-model="startKeyword" @change="handleStartKeywordChange"
|
||||
class="search-input" style="width: 160px;"></el-input>
|
||||
<el-select v-model="relationType" placeholder="请选择" style="width: 140px;">
|
||||
<el-option label="故障飞机" value="plane"></el-option>
|
||||
<el-option label="故障发动机" value="engine"></el-option>
|
||||
<el-option label="故障所在地" value="place"></el-option>
|
||||
<el-option label="故障控制系统" value="control"></el-option>
|
||||
</el-select>
|
||||
<el-input placeholder="请输入尾实体内容" v-model="endKeyword" @change="handleEndKeywordChange"
|
||||
class="search-input" style="width: 160px;"></el-input>
|
||||
<el-button type="primary" style="margin-left: 30px" @click="queryData">预 测</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-table-box">
|
||||
<el-table :data="list" border style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="80"></el-table-column>
|
||||
<el-table-column prop="label" label="标签" :formatter="labelFormatter"></el-table-column>
|
||||
<el-table-column prop="number" label="编号"></el-table-column>
|
||||
<el-table-column prop="properties.name" label="名称"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request614';
|
||||
import coverImg from "@/assets/image/icon/tupian.png";
|
||||
import aImg from "@/assets/image/614/3a.jpg";
|
||||
import bImg from "@/assets/image/614/3b.jpg";
|
||||
import cImg from "@/assets/image/614/3c.jpg";
|
||||
import dImg from "@/assets/image/614/3d.jpg";
|
||||
import eImg from "@/assets/image/614/3e.jpg";
|
||||
import fImg from "@/assets/image/614/3f.jpg";
|
||||
import gImg from "@/assets/image/614/3g.jpg";
|
||||
import hImg from "@/assets/image/614/3h.jpg";
|
||||
import iImg from "@/assets/image/614/3i.jpg";
|
||||
import jImg from "@/assets/image/614/3j.jpg";
|
||||
import kImg from "@/assets/image/614/3k.jpg";
|
||||
import lImg from "@/assets/image/614/3l.jpg";
|
||||
import mImg from "@/assets/image/614/3m.jpg";
|
||||
import nImg from "@/assets/image/614/3n.jpg";
|
||||
import oImg from "@/assets/image/614/3o.jpg";
|
||||
import pImg from "@/assets/image/614/3p.jpg";
|
||||
import qImg from "@/assets/image/614/3q.jpg";
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
name: "linkPrediction",
|
||||
data() {
|
||||
return {
|
||||
startKeyword: "",
|
||||
endKeyword: "",
|
||||
relationType: 'plane',
|
||||
list: [],
|
||||
legendList: {
|
||||
"armyType": {label: '军种', color: 'rgb(76,142,218)'},
|
||||
"control": {label: '控制系统', color: 'rgb(236,181,201)'},
|
||||
"engine": {label: '发动机', color: 'rgb(241,102,103)'},
|
||||
"fault": {label: '故障信息', color: 'rgb(141,204,147)'},
|
||||
"faultCase": {label: '故障案例', color: 'rgb(156,33,234)'},
|
||||
"oriPlane": {label: '原飞机', color: 'rgb(255,196,84)'},
|
||||
"part": {label: '部件', color: 'rgb(86,148,128)'},
|
||||
"place": {label: '发生地', color: 'rgb(217,200,174)'},
|
||||
"plane": {label: '飞机', color: 'rgb(87,199,227)'}
|
||||
},
|
||||
coverImg: coverImg,
|
||||
srcList: [
|
||||
aImg, bImg, cImg, dImg, eImg, fImg, gImg, hImg, iImg, jImg, kImg, lImg, mImg, nImg, oImg, pImg, qImg
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
},
|
||||
methods: {
|
||||
labelFormatter(row) {
|
||||
return _this.legendList[row.label].label;
|
||||
},
|
||||
handleStartKeywordChange() {
|
||||
_this.endKeyword = "";
|
||||
},
|
||||
handleEndKeywordChange() {
|
||||
_this.startKeyword = "";
|
||||
},
|
||||
queryData() {
|
||||
if (_this.startKeyword.length === 0 && _this.endKeyword.length === 0) {
|
||||
_this.$message.warning("请输入头或尾实体内容再进行预测");
|
||||
return false;
|
||||
}
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append("keyword", _this.startKeyword.length > _this.endKeyword.length ? _this.startKeyword : _this.endKeyword);
|
||||
formData.append("relationType", _this.relationType);
|
||||
if (_this.startKeyword.length > 0) {
|
||||
request({
|
||||
url: '/fault/query_link_node',
|
||||
method: 'post',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
_this.list = res.data;
|
||||
_this.$message.success("预测成功");
|
||||
});
|
||||
} else {
|
||||
request({
|
||||
url: '/fault/query_source_fault_node',
|
||||
method: 'post',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
_this.list = res.data;
|
||||
_this.$message.success("预测成功");
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.img-item {
|
||||
width: 95px;
|
||||
height: 25px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.recommend-content {
|
||||
margin: 0 auto;
|
||||
|
||||
.search-input-box {
|
||||
width: 55%;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.search-input input {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,340 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
风险预测
|
||||
<el-image
|
||||
class="img-item"
|
||||
:src="coverImg"
|
||||
:preview-src-list="srcList">
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div class="search-input-box">
|
||||
<el-input
|
||||
class="search-input"
|
||||
placeholder="请输入内容"
|
||||
v-model="keyword">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
<el-button type="primary" style="margin-left: 30px" @click="queryByKeyword">检 索</el-button>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="故障案例" name="first">
|
||||
<el-table :data="faultCaseList" style="width: 100%">
|
||||
<el-table-column type="index" width="50"></el-table-column>
|
||||
<el-table-column prop="number" label="案例编号"></el-table-column>
|
||||
<el-table-column prop="name" label="案例名称"></el-table-column>
|
||||
<el-table-column prop="keyContent" label="关键词"></el-table-column>
|
||||
<el-table-column prop="name" label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.native.prevent="showDetail(scope.row, 'faultCase')" type="text" size="small">
|
||||
查看说明
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="故障信息" name="third">
|
||||
<el-table :data="faultList" style="width: 100%">
|
||||
<el-table-column type="index" width="50"></el-table-column>
|
||||
<el-table-column prop="number" label="故障编号"></el-table-column>
|
||||
<el-table-column prop="name" label="故障名称"></el-table-column>
|
||||
<el-table-column prop="happenTime" label="发生时间"></el-table-column>
|
||||
<el-table-column prop="name" label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.native.prevent="showDetail(scope.row, 'fault')" type="text" size="small">
|
||||
查看说明
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="维修手册" name="second">
|
||||
<el-table :data="repairList" style="width: 100%">
|
||||
<el-table-column type="index" width="50"></el-table-column>
|
||||
<el-table-column prop="title" label="标题"></el-table-column>
|
||||
<el-table-column prop="reason" label="原因">
|
||||
<template slot-scope="scope">
|
||||
<label>{{ scope.row.reason.substring(0, 30) + (scope.row.reason.length > 30 ? '...' : '') }}</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="influence" label="影响">
|
||||
<template slot-scope="scope">
|
||||
<label>{{
|
||||
scope.row.influence.substring(0, 30) + (scope.row.influence.length > 30 ? '...' : '')
|
||||
}}</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="program" label="程序">
|
||||
<template slot-scope="scope">
|
||||
<label>{{
|
||||
scope.row.program.substring(0, 30) + (scope.row.program.length > 30 ? '...' : '')
|
||||
}}</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.native.prevent="showDetail(scope.row, 'repair')" type="text" size="small">
|
||||
查看说明
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="graph-box">
|
||||
<graph ref="graph"></graph>
|
||||
</div>
|
||||
<div class="result-label">
|
||||
<label>风险预测指标：{{ riskNum }};</label><br/>
|
||||
<label>风险预测原因：{{ riskLabel }};</label>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="查看说明"
|
||||
:visible.sync="detailVisible"
|
||||
width="50%">
|
||||
<el-tabs>
|
||||
<el-tab-pane label="故障描述">
|
||||
{{ cmd.description }}
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="排故过程">
|
||||
{{ cmd.checkFaultProcess }}
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="故障分析">
|
||||
{{ cmd.faultAnalysis }}
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="故障总结">
|
||||
{{ cmd.faultSummary }}
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="经验教训">
|
||||
{{ cmd.experience }}
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="detailVisible = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="查看说明"
|
||||
:visible.sync="repairDetailVisible"
|
||||
width="50%">
|
||||
<el-tabs>
|
||||
<el-tab-pane label="标题">
|
||||
{{ cmd.title }}
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="原因">
|
||||
{{ cmd.reason }}
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="影响">
|
||||
{{ cmd.influence }}
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="程序">
|
||||
{{ cmd.program }}
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="repairDetailVisible = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="查看说明"
|
||||
:visible.sync="faultDetailVisible"
|
||||
width="50%">
|
||||
<el-descriptions :column="2">
|
||||
<el-descriptions-item label="故障名称">{{ cmd.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="环境特点">{{ cmd.enviChar }}</el-descriptions-item>
|
||||
<el-descriptions-item label="故障件编号">{{ cmd.partNumber }}</el-descriptions-item>
|
||||
<el-descriptions-item label="故障件型号">{{ cmd.partModel }}</el-descriptions-item>
|
||||
<el-descriptions-item label="故障件名称">{{ cmd.partName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="发生时间">{{ cmd.happenTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="故障场所">{{ cmd.faultPlace }}</el-descriptions-item>
|
||||
<el-descriptions-item label="处理时间">{{ cmd.handleTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="处理方式">{{ cmd.handleStyle }}</el-descriptions-item>
|
||||
<el-descriptions-item label="处理措施">{{ cmd.faultHandleMeasures }}</el-descriptions-item>
|
||||
<el-descriptions-item label="故障原因">{{ cmd.faultReason }}</el-descriptions-item>
|
||||
<el-descriptions-item label="故障现象">{{ cmd.faultPhenomenon }}</el-descriptions-item>
|
||||
<el-descriptions-item label="排故进度">{{ cmd.checkFaultProgress }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="faultDetailVisible = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request614';
|
||||
import graph from "@/components/graph/Graph614";
|
||||
import coverImg from "@/assets/image/icon/tupian.png";
|
||||
import aImg from "@/assets/image/614/6a.jpg";
|
||||
import bImg from "@/assets/image/614/6b.jpg";
|
||||
import cImg from "@/assets/image/614/6c.jpg";
|
||||
import dImg from "@/assets/image/614/6d.jpg";
|
||||
import eImg from "@/assets/image/614/6e.jpg";
|
||||
import fImg from "@/assets/image/614/6f.jpg";
|
||||
import gImg from "@/assets/image/614/6g.jpg";
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
components: {
|
||||
'graph': graph,
|
||||
},
|
||||
name: "riskPrediction",
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
activeTab: 'first',
|
||||
faultCaseList: [],
|
||||
repairList: [],
|
||||
faultList: [],
|
||||
cmd: {},
|
||||
riskNum: 0,
|
||||
riskLabel: '',
|
||||
faultDetailVisible: false,
|
||||
detailVisible: false,
|
||||
repairDetailVisible: false,
|
||||
coverImg: coverImg,
|
||||
srcList: [
|
||||
aImg, bImg, cImg, dImg, eImg, fImg, gImg
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
},
|
||||
methods: {
|
||||
calcRisk(faultNum, repairNum) {// 计算风险
|
||||
_this.riskNum = (Math.log(faultNum + 1) / Math.log(faultNum + 2 * (repairNum + 1))).toFixed(3);
|
||||
if (_this.riskNum <= 0.7) {
|
||||
_this.riskLabel = "风险等级低，故障关联少";
|
||||
} else if (_this.riskNum <= 0.9 && _this.riskNum > 0.7) {
|
||||
_this.riskLabel = "风险等级中，有一定数量故障关联和维修方法";
|
||||
} else if (_this.riskNum > 0.9) {
|
||||
_this.riskLabel = "风险等级高，故障关联多，维修方法内容不足";
|
||||
}
|
||||
},
|
||||
queryByKeyword() {
|
||||
if (_this.keyword.length === 0) {
|
||||
_this.$message.warning("请输入内容再进行检索");
|
||||
return false;
|
||||
}
|
||||
|
||||
let sum = 0;
|
||||
for (let charStr in _this.keyword) {
|
||||
sum += charStr.charCodeAt(0);
|
||||
}
|
||||
_this.rateNum = "9" + sum.toString().substring(0, 1) + "." + sum.toString().substring(1);
|
||||
let formData = new FormData();
|
||||
formData.append("keyword", _this.keyword);
|
||||
|
||||
_this.queryFaultCaseListTogether(formData);
|
||||
_this.queryFaultGraph(formData);
|
||||
},
|
||||
queryFaultCaseListTogether(formData) {
|
||||
request({
|
||||
url: '/fault_case/query_like_keyword_together',
|
||||
method: 'post',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
let item = res.data;
|
||||
_this.faultCaseList = item.faultCaseList;
|
||||
_this.faultList = item.faultList;
|
||||
_this.repairList = item.repairList;
|
||||
|
||||
_this.calcRisk(_this.faultCaseList.length + _this.faultList.length, _this.repairList.length);
|
||||
_this.$message.success("检索成功");
|
||||
});
|
||||
},
|
||||
queryFaultGraph(formData) {
|
||||
request({
|
||||
url: '/fault_case/query_for_neo4j',
|
||||
method: 'post',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
res.data.nodes.forEach(node => {
|
||||
node._label = node.label;
|
||||
node.label = node.properties.name;
|
||||
node.id = node.id.toString();
|
||||
});
|
||||
res.data.relations.forEach(edge => {
|
||||
delete edge.id;
|
||||
edge.source = edge.source.toString();
|
||||
edge.target = edge.target.toString();
|
||||
edge.label = edge.properties ? edge.properties.name : '';
|
||||
if (edge.source === edge.target) {
|
||||
edge.type = 'loop';
|
||||
} else {
|
||||
delete edge.type;
|
||||
}
|
||||
});
|
||||
|
||||
_this.$refs['graph'].initGraph({
|
||||
nodes: res.data.nodes,
|
||||
edges: res.data.relations
|
||||
}, true);
|
||||
});
|
||||
},
|
||||
showDetail(row, type) {
|
||||
_this.cmd = row;
|
||||
if (type === 'repair') {
|
||||
_this.repairDetailVisible = true;
|
||||
} else if (type === 'faultCase') {
|
||||
_this.detailVisible = true;
|
||||
} else if (type === "fault") {
|
||||
_this.faultDetailVisible = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.img-item {
|
||||
width: 95px;
|
||||
height: 25px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 80px;
|
||||
}
|
||||
.result-label {
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
overflow-x: hidden;
|
||||
|
||||
.search-input-box {
|
||||
display: flex;
|
||||
width: 40%;
|
||||
margin-bottom: 1.5625vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
padding: 0 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.graph-box {
|
||||
border: 1px solid #dcdddf;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,355 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
算法发布
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div>
|
||||
<el-form :inline="true" :model="qo" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-input v-model="qo.LIKES_name" placeholder="请输入算法名称"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item>
|
||||
<el-input v-model="qo.LIKES_name" placeholder="请输入版本"></el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="qo.pageNo=1;queryData()">搜 索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div style="margin: 0px 0 20px 0">
|
||||
<el-button type="primary" @click="createRow()">发布算法</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-table :data="result.records" style="width: 100%" ref="table">
|
||||
<el-table-column type="index" label="行号" width="100"></el-table-column>
|
||||
<el-table-column prop="name" label="算法名称"></el-table-column>
|
||||
<!-- <el-table-column prop="version" label="版本"></el-table-column> -->
|
||||
<el-table-column prop="buildRemark" label="介绍"></el-table-column>
|
||||
<el-table-column prop="modifyTimeMillis" label="修改时间">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.modifyTimeMillis | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTimeMillis" label="创建时间">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.createTimeMillis | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.native.prevent="modifyRow(scope.row)" type="text" size="small">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click.native.prevent="removeRow(scope.row)" type="text" size="small">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</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>
|
||||
<el-dialog
|
||||
:title="dialogName"
|
||||
:visible.sync="cmdDialogVisible"
|
||||
width="40%">
|
||||
<div v-show="step == 1">
|
||||
<el-form ref="cmd" label-width="100px" :rules="rules" :model="cmd" v-loading="stepLoading1" element-loading-text="代码pull中...">
|
||||
<el-form-item label="算法名称" prop="name">
|
||||
<el-input v-model="cmd.name" placeholder="请输入算法名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="算法介绍" prop="buildRemark">
|
||||
<el-input type="textarea" v-model="cmd.buildRemark" placeholder="请输入算法介绍"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="代码仓库" prop="repositoryId" >
|
||||
<el-select v-model="cmd.repositoryId" placeholder="请选择代码仓库" @change="handleRepositoryChange">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in codeWarehouseList"
|
||||
:key="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库分支" prop="branchName">
|
||||
<el-select v-model="cmd.branchName" placeholder="请选择分支">
|
||||
<el-option :label="item" :value="item" v-for="(item,index) in branchList" :key="index"></el-option>
|
||||
</el-select>
|
||||
<!-- <el-input v-model="cmd.branchName" placeholder="请输入分支"></el-input>-->
|
||||
</el-form-item>
|
||||
<el-form-item label="依赖方式" prop="relyOnType">
|
||||
<el-radio-group v-model="cmd.relyOnType">
|
||||
<el-radio :label="1">克隆Conda环境</el-radio>
|
||||
<el-radio :label="2">文件安装</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="环境名称" prop="condaName" v-if="cmd.relyOnType==1">
|
||||
<el-input v-model="cmd.condaName" placeholder="请输入环境名称"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="标签(TAG)" prop="branchTagName">-->
|
||||
<!-- <el-input v-model="cmd.branchTagName" placeholder="请输入标签(TAG)"></el-input>-->
|
||||
<!-- <!– <el-select v-model="cmd.name" placeholder="请选择发布的标签，不选为最新提交">–>-->
|
||||
<!-- <!– <el-option label="" value=""></el-option>–>-->
|
||||
<!-- <!– </el-select>–>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="启动命令" prop="script">-->
|
||||
<!-- <el-input v-model="cmd.script" placeholder="请输入启动命令" type="textarea"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="日志文件" prop="logFileName">-->
|
||||
<!-- <el-input v-model="cmd.logFileName" placeholder="请输入日志文件名称或目录(相对目录)"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-show="step == 2">
|
||||
<el-form ref="cmd2" label-width="100px" :model="cmd">
|
||||
<div class="title-form-box">公共配置</div>
|
||||
<el-form-item :label="item.name" v-for="item in cmd2.publicPropert" :key="item.key">
|
||||
<el-input v-model="item.value" :placeholder="'请输入' + item.name"></el-input>
|
||||
</el-form-item>
|
||||
<div class="title-form-box">私有配置</div>
|
||||
<el-form-item :label="item.name" v-for="item in cmd2.privatePropert" :key="item.key">
|
||||
<el-input v-model="item.value" :placeholder="'请输入' + item.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-show="step == 3">
|
||||
<i class="el-icon-loading" v-show="stepPercent < 100"></i>
|
||||
<!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="stepPercent" v-show="stepPercent < 100"></el-progress>-->
|
||||
<label v-show="stepPercent >= 100">依赖校验成功！</label>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cmdDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="nextStep" v-show="step == 1" :disabled="stepLoading1">下一步</el-button>
|
||||
<el-button type="primary" @click="nextStep" v-show="step == 2">下一步</el-button>
|
||||
<el-button type="primary" @click="submitModify" v-show="step == 3" :disabled="stepPercent < 100">发布</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request2';
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
name: "codeWarehouse",
|
||||
data() {
|
||||
return {
|
||||
qo: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
LIKES_name: '',
|
||||
},
|
||||
result: {
|
||||
records: [],
|
||||
total: 0
|
||||
},
|
||||
codeWarehouseList: [],
|
||||
step: 1,
|
||||
stepPercent: 0,
|
||||
dialogName: '发布算法',
|
||||
cmdDialogVisible: false,
|
||||
cmd: {},
|
||||
cmd2: {},
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入算法名称'}
|
||||
],
|
||||
repositoryId: [
|
||||
{required: true, message: '请选择代码仓库'}
|
||||
],
|
||||
branchName: [
|
||||
{required: true, message: '请输入分支'}
|
||||
],
|
||||
branchTagName: [
|
||||
{required: true, message: '请输入标签(TAG)'}
|
||||
],
|
||||
logFileName: [
|
||||
{required: true, message: '请输入启动命令'}
|
||||
],
|
||||
script: [
|
||||
{required: true, message: '请输入日志文件'}
|
||||
],
|
||||
relyOnType: [
|
||||
{required: true, message: '请选择依赖方式'}
|
||||
],
|
||||
condaName: [
|
||||
{required: true, message: '请输入虚拟环境名称'}
|
||||
],
|
||||
},
|
||||
stepLoading1: false,
|
||||
branchList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryData();
|
||||
_this.queryCodeWarehouseList();
|
||||
},
|
||||
filters: {
|
||||
timeFilter(val) {
|
||||
if (val > 0) {
|
||||
let dt = new Date(val);
|
||||
let year = dt.getFullYear();
|
||||
let month = dt.getMonth() + 1;
|
||||
let date = dt.getDate();
|
||||
let hour = dt.getHours();
|
||||
let minute = dt.getMinutes();
|
||||
let second = dt.getSeconds();
|
||||
return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
|
||||
} else {
|
||||
return "-";
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRepositoryChange(id) {
|
||||
_this.queryBranchList(id);
|
||||
_this.cmd.branchName = "";
|
||||
},
|
||||
queryBranchList(id) {
|
||||
request({
|
||||
url: '/repository/branch-list',
|
||||
method: 'post',
|
||||
data: {repositoryId: id}
|
||||
}).then(res => {
|
||||
_this.branchList = res.list[0];
|
||||
});
|
||||
},
|
||||
queryCodeWarehouseList() {
|
||||
request({
|
||||
url: '/repository/list',
|
||||
method: 'post',
|
||||
data: {pageNo: 1, pageSize: 1000}
|
||||
}).then(res => {
|
||||
_this.codeWarehouseList = res.list;
|
||||
});
|
||||
},
|
||||
queryData() {
|
||||
request({
|
||||
url: '/algorithm/list',
|
||||
method: 'post',
|
||||
data: _this.qo
|
||||
}).then(res => {
|
||||
_this.result.records = res.list;
|
||||
console.log(res.list);
|
||||
_this.result.total = res.total;
|
||||
});
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
_this.qo.pageNo = val;
|
||||
_this.queryData();
|
||||
},
|
||||
removeRow(item) {
|
||||
_this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let id = item.id
|
||||
request({
|
||||
url: `/algorithm/delete/${id}`,
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
_this.$message.success("删除成功");
|
||||
_this.queryData();
|
||||
_this.queryOntologyList();
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
createRow() {
|
||||
_this.step = 1;
|
||||
_this.cmdDialogVisible = true;
|
||||
_this.stepLoading1 = false;
|
||||
_this.$nextTick(() => {
|
||||
_this.cmd = {
|
||||
name: '',
|
||||
repositoryId: '',
|
||||
branchName: '',
|
||||
branchTagName: '',
|
||||
logFileName: '',
|
||||
script: ''
|
||||
};
|
||||
_this.$refs.cmd.resetFields();
|
||||
});
|
||||
},
|
||||
modifyRow(item) {
|
||||
_this.cmd = JSON.parse(JSON.stringify(item));
|
||||
_this.cmd.modifyTimeMillis = null;
|
||||
_this.stepLoading1 = false;
|
||||
if (_this.cmd.repositoryId != null && _this.cmd.repositoryId.toString().length > 0) {
|
||||
_this.queryBranchList(_this.cmd.repositoryId);
|
||||
}
|
||||
_this.cmdDialogVisible = true;
|
||||
},
|
||||
nextStep() {
|
||||
if (_this.step == 1) {
|
||||
this.$refs.cmd.validate((valid) => {
|
||||
if (valid) {
|
||||
_this.stepLoading1 = true;
|
||||
request({
|
||||
url: '/algorithm/pull',
|
||||
method: 'post',
|
||||
data: _this.cmd
|
||||
}).then(res => {
|
||||
_this.stepLoading1 = false;
|
||||
_this.step = 2;
|
||||
_this.dialogName = "配置文件预览";
|
||||
_this.cmd2 = res.data;
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (_this.step == 2) {
|
||||
let id = _this.cmd2.id;
|
||||
_this.dialogName = "依赖下载中.........";
|
||||
_this.step = 3;
|
||||
request({
|
||||
url: `/algorithm/verification_rely/${id}`,
|
||||
method: 'get',
|
||||
data: _this.cmd
|
||||
}).then(res => {
|
||||
_this.stepPercent = 100;
|
||||
});
|
||||
// let si = setInterval(function() {
|
||||
// let percent = _this.stepPercent;
|
||||
// percent += 10;
|
||||
// if(percent >= 100) {
|
||||
// percent = 100;
|
||||
// clearInterval(si);
|
||||
// }
|
||||
//
|
||||
// }, 2000);
|
||||
}
|
||||
},
|
||||
submitModify() {
|
||||
let id = _this.cmd2.id;
|
||||
request({
|
||||
url: `/algorithm/release/${id}`,
|
||||
method: 'get',
|
||||
data: _this.cmd
|
||||
}).then(res => {
|
||||
_this.$message.success("发布成功");
|
||||
_this.queryData();
|
||||
_this.cmdDialogVisible = false;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.title-form-box {
|
||||
font-size: 16px;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,242 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
三元组高速抽取
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div style="margin: 0px 0 20px 0">
|
||||
<el-upload
|
||||
style="float: left;margin-right: 10px"
|
||||
class="upload-demo"
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
action="#"
|
||||
multiple
|
||||
:limit="3"
|
||||
:on-change="handleFileChange"
|
||||
:file-list="fileList">
|
||||
<el-button type="primary" title='上传高速抽取测试数据'>上传数据</el-button>
|
||||
</el-upload>
|
||||
<el-button type="primary" title='开始三元组的高速抽取' :disabled="!uploadFlag" @click="validateData">开始抽取
|
||||
</el-button>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-table :data="tableData" style="width: 100%" border class="text-table" id="text-table-id">
|
||||
<el-table-column type="index" label="行号" width="60"></el-table-column>
|
||||
<el-table-column prop="text" label="文本" width="200">
|
||||
<template slot-scope="scope" :title="scope.row.text">{{
|
||||
scope.row.text.substring(0, 120)
|
||||
}}{{ scope.row.text.length > 120 ? '...' : '' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="groupStrCut" label="三元组">
|
||||
<template slot-scope="scope">
|
||||
<div class="tag-item" v-for="(tag,index) in scope.row.sro_list" :key="index">
|
||||
{{ tag.object }}-{{ tag.relation }}-{{ tag.subject }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-descriptions class="margin-top desc2" :column="2" border>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">准确率：</template>
|
||||
<label>{{ correctRate }}%</label>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">耗时：</template>
|
||||
<div>{{ time }}s</div>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div class="graph-box">
|
||||
<graph ref="graph"></graph>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="label-result" v-show="resultFlag">每千条文本知识抽取耗时{{ qths }}秒</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
import graph from "@/components/graph/Graph";
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
components: {
|
||||
'graph': graph,
|
||||
},
|
||||
name: "algorithmSpeedVerification",
|
||||
data() {
|
||||
return {
|
||||
uploadFlag: false,
|
||||
correctRate: 0,
|
||||
time: 0,
|
||||
fileList: [],
|
||||
jsonObj: {},
|
||||
tableData: [],
|
||||
resultFlag: false,
|
||||
everyThousandTime: 0,
|
||||
rateAll: [],
|
||||
timeAll:[],
|
||||
qths:0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
},
|
||||
methods: {
|
||||
validateData() {
|
||||
_this.$message.info("开始验证");
|
||||
let pageNo = 1, pageSize = 5;
|
||||
let _index = 0;
|
||||
let _time = 0;
|
||||
// let timeSt = setInterval(function () {
|
||||
// _this.time = _time++ / 10;
|
||||
// }, 100);
|
||||
_this.tableData = [];
|
||||
let st = setInterval(function () {
|
||||
_this.correctRate = (parseFloat(_this.rateAll[_index]) * 100).toFixed(2);
|
||||
_this.time = _this.timeAll[_index];
|
||||
_index += 5;
|
||||
_this.tableData = _this.tableData.concat(_this.jsonObj.items.slice((pageNo - 1) * pageSize, pageNo * pageSize));
|
||||
_this.$nextTick(() => {
|
||||
var div = document.getElementById('text-table-id');
|
||||
div.scrollTop = div.scrollHeight;
|
||||
})
|
||||
|
||||
pageNo++;
|
||||
if (_index >= _this.jsonObj.items.length) {
|
||||
clearInterval(st);
|
||||
// clearInterval(timeSt);
|
||||
_this.startInitGraph();
|
||||
_this.$message.success("验证完毕");
|
||||
|
||||
_this.resultFlag = true;
|
||||
// _this.everyThousandTime = (_this.time / 1.2).toFixed(2);
|
||||
}
|
||||
}, 40);
|
||||
},
|
||||
handleFileChange(file) {
|
||||
_this.fileList = [file];
|
||||
_this.correctRate = 0;
|
||||
_this.time = 0;
|
||||
_this.resultFlag = false;
|
||||
_this.everyThousandTime = 0;
|
||||
_this.tableData = [];
|
||||
_this.$refs['graph'].initGraph({
|
||||
nodes: [],
|
||||
edges: []
|
||||
}, true, null, true);
|
||||
_this.queryData(file.raw);
|
||||
},
|
||||
queryData(fileItem) {
|
||||
let formData = new FormData();
|
||||
formData.append("file", fileItem);
|
||||
let _msg = _this.$message({
|
||||
message: '文件正在上传，请耐心等待',
|
||||
type: 'info',
|
||||
duration: 0
|
||||
});
|
||||
request({
|
||||
url: '/indicator/indicator10',
|
||||
method: 'put',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
_msg.close();
|
||||
_this.$message.success("上传成功");
|
||||
_this.rateAll = [];
|
||||
_this.timeAll = [];
|
||||
res.data.items.forEach(item => {
|
||||
_this.rateAll.push(item.precision);
|
||||
_this.timeAll.push(item.hshi)
|
||||
})
|
||||
_this.qths = res.data.qths
|
||||
/**
|
||||
* nodes:[],
|
||||
* relations: [],
|
||||
* items: []
|
||||
*/
|
||||
res.data.relations = res.data.relations.slice(0, 100);
|
||||
_this.jsonObj = res.data;
|
||||
_this.uploadFlag = true;
|
||||
});
|
||||
},
|
||||
startInitGraph() {
|
||||
let _nodes = [], _edges = [];
|
||||
let ids = [];
|
||||
_this.jsonObj.relations.forEach(edge => {
|
||||
ids.push(edge.srcId);
|
||||
ids.push(edge.dstId);
|
||||
_edges.push({
|
||||
source: edge.srcId,
|
||||
target: edge.dstId,
|
||||
label: edge.edgeName
|
||||
});
|
||||
});
|
||||
|
||||
_this.jsonObj.nodes.forEach(node => {
|
||||
if (ids.indexOf(node.vid) >= 0) {
|
||||
_nodes.push({
|
||||
label: node.properties.name,
|
||||
id: node.vid
|
||||
});
|
||||
}
|
||||
});
|
||||
_this.$refs['graph'].initGraph({
|
||||
nodes: _nodes,
|
||||
edges: _edges
|
||||
}, true, null, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.label-result {
|
||||
padding: 15px 0;
|
||||
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.tag-item {
|
||||
word-break: break-all;
|
||||
float: left;
|
||||
background-color: #ecf5ff;
|
||||
border-color: #d9ecff;
|
||||
padding: 0 5px;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 5px;
|
||||
margin: 0 4px 4px 0;
|
||||
max-width: 430px;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.result {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
font-size: 16px;
|
||||
color: #5c5c5c;
|
||||
}
|
||||
|
||||
.text-table {
|
||||
height: 600px;
|
||||
margin-top: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.graph-box {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 530px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@@ -1,232 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
代码仓库
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div>
|
||||
<el-form :inline="true" :model="qo" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-input v-model="qo.LIKES_name" placeholder="请输入仓库名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="qo.LIKES_name" placeholder="请输入仓库地址"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="qo.pageNo=1;queryData()">搜 索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div style="margin: 0px 0 20px 0">
|
||||
<el-button type="primary" @click="createRow()">新增</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-table :data="result.records" style="width: 100%" ref="table" >
|
||||
<el-table-column type="index" label="行号" width="100"></el-table-column>
|
||||
<el-table-column prop="name" label="算法仓库名称"></el-table-column>
|
||||
<el-table-column prop="gitUrl" label="仓库地址"></el-table-column>
|
||||
<el-table-column prop="modifyTimeMillis" label="修改时间">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.modifyTimeMillis | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTimeMillis" label="创建时间">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.createTimeMillis | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.native.prevent="modifyRow(scope.row)" type="text" size="small">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click.native.prevent="removeRow(scope.row)" type="text" size="small">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</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>
|
||||
<el-dialog
|
||||
:title="dialogName"
|
||||
:visible.sync="cmdDialogVisible"
|
||||
width="40%">
|
||||
<el-form ref="cmd" label-width="100px" :rules="rules" :model="cmd">
|
||||
<el-form-item label="算法名称" prop="name">
|
||||
<el-input v-model="cmd.name" placeholder="请输入算法名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库地址" prop="gitUrl">
|
||||
<el-input v-model="cmd.gitUrl" placeholder="请输入仓库地址"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="账号" prop="userName">
|
||||
<el-input v-model="cmd.userName" placeholder="请输入账号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="cmd.password" placeholder="请输入密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="cmd.remarks" placeholder="请输入描述" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cmdDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitModify">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request2';
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
name: "codeWarehouse",
|
||||
data() {
|
||||
return {
|
||||
qo: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
LIKES_name: '',
|
||||
},
|
||||
result: {
|
||||
records: [],
|
||||
total: 0
|
||||
},
|
||||
dialogName: '编辑',
|
||||
cmdDialogVisible: false,
|
||||
cmd: {},
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入算法名称'}
|
||||
],
|
||||
gitUrl: [
|
||||
{required: true, message: '请输入仓库地址'}
|
||||
],
|
||||
userName: [
|
||||
{required: true, message: '请输入账号'}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入密码'}
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryData();
|
||||
},
|
||||
filters: {
|
||||
timeFilter(val) {
|
||||
if (val > 0) {
|
||||
let dt = new Date(val);
|
||||
let year = dt.getFullYear();
|
||||
let month = dt.getMonth() + 1;
|
||||
let date = dt.getDate();
|
||||
let hour = dt.getHours();
|
||||
let minute = dt.getMinutes();
|
||||
let second = dt.getSeconds();
|
||||
return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
|
||||
} else {
|
||||
return "-";
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
request({
|
||||
url: '/repository/list',
|
||||
method: 'post',
|
||||
data: _this.qo
|
||||
}).then(res => {
|
||||
_this.result.records = res.list;
|
||||
_this.result.total = res.total;
|
||||
});
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
_this.qo.pageNo = val;
|
||||
_this.queryData();
|
||||
},
|
||||
removeRow(item) {
|
||||
_this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let id = item.id;
|
||||
request({
|
||||
url: `/repository/delete/${id}`,
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
_this.$message.success("删除成功");
|
||||
_this.queryData();
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
createRow() {
|
||||
_this.cmdDialogVisible = true;
|
||||
_this.$nextTick(() => {
|
||||
_this.dialogName = "新增";
|
||||
_this.cmd = {
|
||||
name: '',
|
||||
gitUrl: '',
|
||||
userName: '',
|
||||
password: '',
|
||||
remarks: ''
|
||||
};
|
||||
_this.$refs.cmd.resetFields();
|
||||
});
|
||||
},
|
||||
modifyRow(item) {
|
||||
_this.cmdDialogVisible = true;
|
||||
_this.$nextTick(() => {
|
||||
_this.dialogName = "编辑";
|
||||
_this.cmd = JSON.parse(JSON.stringify(item));
|
||||
_this.cmd.modifyTimeMillis = null;
|
||||
_this.$refs.cmd.resetFields();
|
||||
});
|
||||
},
|
||||
submitModify() {
|
||||
this.$refs.cmd.validate((valid) => {
|
||||
if (valid) {
|
||||
if (_this.cmd.id) {
|
||||
request({
|
||||
url: '/repository/update',
|
||||
method: 'post',
|
||||
data: _this.cmd
|
||||
}).then(res => {
|
||||
_this.$message.success("编辑成功");
|
||||
_this.queryData();
|
||||
_this.cmdDialogVisible = false;
|
||||
});
|
||||
} else { // 新建
|
||||
request({
|
||||
url: '/repository/save',
|
||||
method: 'post',
|
||||
data: _this.cmd
|
||||
}).then(res => {
|
||||
_this.$message.success("新增成功");
|
||||
_this.queryData();
|
||||
_this.cmdDialogVisible = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -1,357 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
离散知识补充
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div>
|
||||
<span>图谱选择：</span>
|
||||
<el-select v-model="activeSpace" placeholder="请选择要进行补充的图谱" @change="changeSpace">
|
||||
<el-option
|
||||
v-for="(item, index) in spaceList"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="index">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-upload
|
||||
style="display: inline-block;margin-left: 20px"
|
||||
class="upload-demo"
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
action="#"
|
||||
multiple
|
||||
:limit="3"
|
||||
:on-change="handleFileChange"
|
||||
:file-list="fileList">
|
||||
<el-button type="primary" title='上传离散知识文件'>上传数据</el-button>
|
||||
</el-upload>
|
||||
<el-button type="primary" style="margin-left: 20px" @click="showResult" :disabled="!uploadSuccess">执行补充</el-button>
|
||||
</div>
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="10">
|
||||
<el-descriptions class="margin-top" title="补充结果" :column="1" border>
|
||||
<el-descriptions-item label="补充时间">{{ resultCmd.time }}</el-descriptions-item>
|
||||
<el-descriptions-item label="目标图谱">{{ resultCmd.space }}</el-descriptions-item>
|
||||
<el-descriptions-item label="文件名">{{ resultCmd.fileName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="包含知识数量">{{ resultCmd.allCounts }}</el-descriptions-item>
|
||||
<el-descriptions-item label="成功知识占比">{{ resultCmd.cgzb }}</el-descriptions-item>
|
||||
<el-descriptions-item label="补充成功率">{{ resultCmd.cgl }}</el-descriptions-item>
|
||||
<el-descriptions-item label="重叠知识占比">{{ resultCmd.cdzb }}</el-descriptions-item>
|
||||
<el-descriptions-item label="重叠识别准确率">{{ resultCmd.cdl }}</el-descriptions-item>
|
||||
<el-descriptions-item label="冲突知识占比">{{ resultCmd.ctzb }}</el-descriptions-item>
|
||||
<el-descriptions-item label="冲突识别准确率">{{ resultCmd.ctl }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<el-descriptions class="margin-top" title="详细结果" :column="1" border>
|
||||
</el-descriptions>
|
||||
<el-table :data="resultList" style="width: 100%" height="500">
|
||||
<el-table-column prop="zyz" :label="tableTitle[0]"></el-table-column>
|
||||
<el-table-column prop="wyz" :label="tableTitle[1]"></el-table-column>
|
||||
<el-table-column prop="byz" :label="tableTitle[2]"></el-table-column>
|
||||
<el-table-column prop="bq" label="标签" width="100">
|
||||
<template slot-scope="scope">
|
||||
<label :style="{color:scope.row.bq=='成功'?'#67c23a':scope.row.bq=='冲突'?'#f56c6c':'#e6a23c'}">{{scope.row.bq}}</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bq" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<label :style="{color:scope.row.bq=='成功'?'#67c23a':scope.row.bq=='冲突'?'#f56c6c':'#e6a23c'}">{{scope.row.bq}}</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--
|
||||
<div class="menu-content-tab">
|
||||
<div>
|
||||
<div>手动添加</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>主语类型：</span>
|
||||
<el-select v-model="activeTag" placeholder="请选择主语类型">
|
||||
<el-option
|
||||
v-for="item in tagList"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div>
|
||||
<span>主语取值：</span>
|
||||
<el-input v-model="tagValue" placeholder="请输入主语取值"></el-input>
|
||||
</div>
|
||||
<div>
|
||||
<span>谓语类型：</span>
|
||||
<el-radio v-model="edgeType" label="1" @change="radioChange">关系属性</el-radio>
|
||||
<el-radio v-model="edgeType" label="2" @change="radioChange">数值属性</el-radio>
|
||||
</div>
|
||||
<div v-show="edgeType === '1'">
|
||||
<span>谓语取值：</span>
|
||||
<el-select v-model="activeEdge" placeholder="请选择谓语取值">
|
||||
<el-option
|
||||
v-for="item in edgeList"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div v-show="edgeType === '2'">
|
||||
<span>谓语取值：</span>
|
||||
<el-select v-model="activeEdge" placeholder="请选择谓语取值">
|
||||
<el-option
|
||||
v-for="item in tagField"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div>
|
||||
<span>宾语类型：</span>
|
||||
<el-select v-model="activeDataType" placeholder="请选择宾语类型">
|
||||
<el-option
|
||||
v-for="item in dataTypeList"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div>
|
||||
<span>宾语取值：</span>
|
||||
<el-input v-model="dataTypeValue" placeholder="请输入宾语取值"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-content2">
|
||||
<div style="margin: 0px 0 20px 0">
|
||||
<p>
|
||||
<span>补充时间：</span>
|
||||
<span>{{ resultCmd.time }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>目标图谱：</span>
|
||||
<span>{{ resultCmd.space }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>重叠识别准确率：</span>
|
||||
<span>{{ resultCmd.repeatRate }}%</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>冲突识别准确率：</span>
|
||||
<span>{{ resultCmd.conflictRate }}%</span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
import {formatTime} from '@/utils/common';
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
name: "dataRepeatRate",
|
||||
data() {
|
||||
return {
|
||||
spaceList: [],
|
||||
activeSpace: '',
|
||||
dataTypeList: [],
|
||||
activeDataType: '',
|
||||
dataTypeValue: '',
|
||||
tagList: [],
|
||||
activeTag: '',
|
||||
tagValue: '',
|
||||
edgeType: '1',
|
||||
tagField: [],
|
||||
edgeList: [],
|
||||
activeEdge: '',
|
||||
edgeValue: '',
|
||||
resultCmd1: {},
|
||||
resultCmd: {
|
||||
repeatRate: '0',
|
||||
conflictRate: '0',
|
||||
space: '',
|
||||
time: ''
|
||||
},
|
||||
list: [],
|
||||
resultList: [],
|
||||
ontologyList: [],
|
||||
AtlasSelection: '',
|
||||
fileList: [],
|
||||
edges: [],
|
||||
radio: "1",
|
||||
uploadSuccess: false,
|
||||
tableTitle:["头实体","关系","尾实体"]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryData();
|
||||
},
|
||||
methods: {
|
||||
radioChange() {
|
||||
_this.activeEdge = '';
|
||||
},
|
||||
queryData() {
|
||||
request({
|
||||
url: '/indicator/indicator3_1',
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
if (res.data.space.length > 0) {
|
||||
_this.activeSpace = 0;
|
||||
}
|
||||
|
||||
_this.spaceList = res.data.space;
|
||||
_this.dataTypeList = res.data.datatype;
|
||||
_this.tagList = res.data.tag;
|
||||
_this.tagField = res.data.tag_field;
|
||||
_this.edgeList = res.data.edge;
|
||||
});
|
||||
},
|
||||
changeSpace(){
|
||||
if(_this.spaceList[_this.activeSpace].name.indexOf("实例") != -1){
|
||||
_this.tableTitle = ["头实体","关系","尾实体"]
|
||||
}else{
|
||||
_this.tableTitle = ["概念","属性","概念"]
|
||||
}
|
||||
},
|
||||
handleFileChange(file) {
|
||||
_this.fileList = [file];
|
||||
let fileName = file.name;
|
||||
let activeSpace = _this.spaceList[_this.activeSpace];
|
||||
if (activeSpace.id !== fileName) {
|
||||
_this.$message.warning("上传文件与" + activeSpace.name + "不符");
|
||||
return false;
|
||||
}
|
||||
|
||||
_this.uploadFile(file);
|
||||
},
|
||||
showResult() {
|
||||
_this.$message.info("开始执行补充");
|
||||
setTimeout(() => {
|
||||
_this.resultCmd = _this.resultCmd1;
|
||||
_this.resultList = _this.list;
|
||||
_this.$message.success("补充成功");
|
||||
}, 1233);
|
||||
},
|
||||
uploadFile(fileItem) {
|
||||
_this.uploadSuccess = false;
|
||||
_this.$message.info("开始上传");
|
||||
let formData = new FormData();
|
||||
formData.append("file", fileItem.raw);
|
||||
request({
|
||||
url: '/indicator/indicator3',
|
||||
method: 'put',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
_this.resultCmd1 = res.data;
|
||||
_this.resultCmd1.space = _this.spaceList[_this.activeSpace].name;
|
||||
_this.resultCmd1.fileName = fileItem.name;
|
||||
_this.resultCmd1.time = formatTime(new Date());
|
||||
_this.list = res.data.items;
|
||||
_this.$message.success("上传成功");
|
||||
_this.uploadSuccess = true;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.result {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
font-size: 16px;
|
||||
color: #5c5c5c;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
//overflow: hidden;
|
||||
//display: flex;
|
||||
//justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu-content2 {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.menu-content-tab > div:nth-of-type(1) {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.menu-content-tab > div:nth-of-type(1) > div {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 1px solid #EBEEF5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0.20833vw 0.20833vw 0 0;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-size: 0.72917vw;
|
||||
}
|
||||
|
||||
.menu-content-tab > div:nth-of-type(1) > div:nth-of-type(2) {
|
||||
background: #409EFF;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
.menu-content-tab > div:nth-of-type(1) > div:nth-of-type(2) .el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu-content-tab > div:nth-of-type(1) > div:nth-of-type(2) button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu-content-tab > div:nth-of-type(2) {
|
||||
width: 80%;
|
||||
border: 1px solid #EBEEF5;
|
||||
box-sizing: border-box;
|
||||
border-top: none;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.menu-content-tab > div:nth-of-type(2) > div > .el-select, .menu-content-tab > div:nth-of-type(2) > div > .el-input {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.menu-content-tab > div:nth-of-type(2) > div {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.menu-content2 > div:nth-of-type(1) {
|
||||
font-size: 0.72917vw;
|
||||
}
|
||||
|
||||
.menu-content2 > div:nth-of-type(1) > p {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.menu-content2 > div:nth-of-type(1) > p > span:nth-of-type(1) {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,174 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
低资源场景知识抽取
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div style="margin: 0px 0 20px 0;overflow: hidden">
|
||||
<el-upload
|
||||
style="float: left;margin-right: 10px"
|
||||
class="upload-demo"
|
||||
action="#"
|
||||
multiple
|
||||
:auto-upload="false"
|
||||
:limit="3"
|
||||
:show-file-list="false"
|
||||
:on-change="handleFileChange"
|
||||
:file-list="fileList">
|
||||
<el-button type="primary" title='上传“低资源”场景测试数据'>上传数据</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="menu-table">
|
||||
<el-table :data="resultCmd.items" style="width: 60%" height="350">
|
||||
<el-table-column prop="text" align="center" label="文本"></el-table-column>
|
||||
<el-table-column prop="spo[0]" align="center" label="头实体"></el-table-column>
|
||||
<el-table-column prop="spo[1]" align="center" label="关系"></el-table-column>
|
||||
<el-table-column prop="spo[2]" align="center" label="尾实体"></el-table-column>
|
||||
</el-table>
|
||||
<div id="echart"></div>
|
||||
</div>
|
||||
<div style="margin: 20px 0 20px 0">
|
||||
<el-button type="primary" title='开始“低资源”场景知识抽取' @click="validateData">开始验证</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-table :data="resultCmd1.items" style="width: 100%" height="350">
|
||||
<el-table-column prop="text" align="center" label="文本"></el-table-column>
|
||||
<el-table-column prop="spo[0]" align="center" label="头实体"></el-table-column>
|
||||
<el-table-column prop="spo[1]" align="center" label="关系"></el-table-column>
|
||||
<el-table-column prop="spo[2]" align="center" label="尾实体"></el-table-column>
|
||||
<el-table-column align="center" label="预测结果">
|
||||
<template slot-scope="scope">
|
||||
<label
|
||||
:style="scope.row.ycspoflag?'':'color:red'">({{ scope.row.ycspo[0] }},{{ scope.row.ycspo[1] }},{{ scope.row.ycspo[2] }})</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="result" v-if="resultCmd1.zql ">“低资源”场景知识抽取结果： 准确率{{
|
||||
resultCmd1.zql
|
||||
}}，正确条数{{ resultCmd1.trueTotal }}，总条数{{ resultCmd1.total }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
name: "company",
|
||||
data() {
|
||||
return {
|
||||
fileList: [],
|
||||
resultCmd: {},
|
||||
resultCmd1: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryData();
|
||||
},
|
||||
methods: {
|
||||
handleFileChange(file) {
|
||||
_this.fileList = [file];
|
||||
_this.uploadFile(file.raw);
|
||||
},
|
||||
queryData() {
|
||||
request({
|
||||
url: '/indicator/indicator1_1',
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.resultCmd = res.data;
|
||||
_this.initEchart();
|
||||
_this.validateData();
|
||||
});
|
||||
},
|
||||
uploadFile(fileItem) {
|
||||
let formData = new FormData();
|
||||
formData.append("file", fileItem);
|
||||
request({
|
||||
url: '/indicator/indicator1',
|
||||
method: 'put',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
_this.resultCmd = res.data;
|
||||
_this.resultCmd1 = {};
|
||||
_this.initEchart();
|
||||
});
|
||||
},
|
||||
validateData() {
|
||||
_this.resultCmd1 = _this.resultCmd
|
||||
_this.resultCmd1.total = _this.resultCmd1.items.length;
|
||||
_this.resultCmd1.trueTotal = 0
|
||||
_this.resultCmd1.items.forEach(item => {
|
||||
if (item.ycspoflag) {
|
||||
_this.resultCmd1.trueTotal++;
|
||||
}
|
||||
})
|
||||
},
|
||||
initEchart() {
|
||||
var xAxis = [];
|
||||
var data = []
|
||||
for (var key in _this.resultCmd.relations) {
|
||||
xAxis.push(key);
|
||||
data.push(_this.resultCmd.relations[key])
|
||||
}
|
||||
|
||||
var chart = this.$echarts.init(document.getElementById("echart"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxis,
|
||||
axisLabel: {interval: 0, rotate: 30}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: data,
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.result {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
font-size: 16px;
|
||||
color: #5c5c5c;
|
||||
}
|
||||
|
||||
#echart {
|
||||
width: 40%;
|
||||
height: 350px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.menu-table {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu-table th div, .menu-table td div {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,585 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
数据集管理
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div>
|
||||
<el-form :inline="true" :model="qo" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-input v-model="qo.LIKES_name" placeholder="请输入任务名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="qo.pageNo=1;queryData()">搜 索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div style="margin: 0px 0 20px 0">
|
||||
<el-button type="primary" @click="createRow()">新建任务</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-table :data="result.records" style="width: 100%" ref="table" @expand-change="showDataSetListByTaskId">
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="scope">
|
||||
<el-row>
|
||||
<el-col :span="8" v-for="item in scope.row.tasks" :key="item.id">
|
||||
<el-form label-position="left" inline class="demo-table-expand" label-width="85px">
|
||||
<el-form-item label="数据集类型">
|
||||
<span>{{ item.taskTypeName }}</span>
|
||||
<span v-if="item.taskId == null">（暂无数据）</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="总记录数">
|
||||
<span>{{ item.icount }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="实体数量">
|
||||
<span>{{ item.ecount }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="关系数量">
|
||||
<span>{{ item.rcount }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作">
|
||||
<el-button type="text" size="small" @click="showImportDialog(item, scope.row)">
|
||||
导入
|
||||
</el-button>
|
||||
<el-button type="text" size="small" @click="showDataSetViewDialog(item, scope.row)"
|
||||
v-if="item.taskId != null">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button type="text" size="small" @click="markTxt(item, scope.row)"
|
||||
v-if="item.taskId != null">
|
||||
标注
|
||||
</el-button>
|
||||
<el-button type="text" size="small" @click="downloadFile(item, scope.row)"
|
||||
v-if="item.taskId != null">
|
||||
导出
|
||||
</el-button>
|
||||
<el-button type="text" size="small" @click="removeDataSet(item, scope.row)"
|
||||
v-if="item.taskId != null">
|
||||
删除
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column type="index" label="行号" width="100"></el-table-column>
|
||||
<el-table-column prop="name" label="任务名称"></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button title="将其他知识图谱本体三元组导入当前数据集中"
|
||||
@click.native.prevent="showImportNodeDialog(scope.row)"
|
||||
type="text" size="small">
|
||||
导入知识图谱本体
|
||||
</el-button>
|
||||
<el-button @click.native.prevent="removeRow(scope.row)" type="text" size="small">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</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>
|
||||
<el-dialog
|
||||
title="新建"
|
||||
:visible.sync="cmdDialogVisible"
|
||||
width="40%">
|
||||
<el-form ref="cmd" label-width="100px" :rules="rules" :model="cmd">
|
||||
<el-form-item label="任务名称" prop="name">
|
||||
<el-input v-model="cmd.name" placeholder="请输入任务名称"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="相关描述" prop="name">-->
|
||||
<!-- <el-input v-model="cmd.description" placeholder="请输入相关描述" type="textarea"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="验证集文件">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload2"
|
||||
action="#"
|
||||
:on-change="handleValidationFileChange"
|
||||
:auto-upload="false"
|
||||
accept=".txt"
|
||||
:limit="10"
|
||||
:file-list="fileList2">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">请选择一个格式为.txt的文本文件进行上传</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="训练集文件">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload3"
|
||||
action="#"
|
||||
:on-change="handleTrainingFileChange"
|
||||
:auto-upload="false"
|
||||
accept=".txt"
|
||||
:limit="10"
|
||||
:file-list="fileList3">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">请选择一个格式为.txt的文本文件进行上传</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cmdDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitModify">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="导入知识图谱本体"
|
||||
:visible.sync="importNodeDialogVisible"
|
||||
width="40%">
|
||||
<el-table :data="ontologyList" style="width: 100%">
|
||||
<el-table-column type="index" label="行号" width="100"></el-table-column>
|
||||
<el-table-column prop="name" label="模型名称"></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
||||
<el-table-column label="操作" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.native.prevent="submitImportNode(scope.row)" type="text" size="small"
|
||||
v-if="cmd.srcOntologyId != scope.row.id">
|
||||
导入
|
||||
</el-button>
|
||||
<label v-else>自身</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="importNodeDialogVisible = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="导入"
|
||||
:visible.sync="importDialogVisible"
|
||||
width="40%">
|
||||
<el-form ref="cmd" label-width="100px" :model="cmd">
|
||||
<el-form-item label="数据集类型" prop="name">
|
||||
<el-select v-model="cmd.taskType" disabled>
|
||||
<el-option :label="item.name" :value="item.code" v-for="item in taskTypeList" :key="item.code"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择文件" prop="name">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
action="#"
|
||||
:on-change="handleFileChange"
|
||||
:auto-upload="false"
|
||||
accept=".txt"
|
||||
:limit="10"
|
||||
:file-list="fileList">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">请选择一个格式为.txt的文本文件进行上传</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="importDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitImport">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="查看"
|
||||
:visible.sync="viewDialogVisible"
|
||||
width="60%">
|
||||
<div>
|
||||
<el-table :data="dataSetResult.records" style="width: 100%">
|
||||
<el-table-column type="index" label="行号" width="80"></el-table-column>
|
||||
<el-table-column prop="content" label="文本内容">
|
||||
<template slot-scope="scope">
|
||||
<label
|
||||
:title="scope.row.content">{{
|
||||
scope.row.content.length > 45 ? (scope.row.content.substring(0, 45) + '...') : scope.row.content
|
||||
}}</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.native.prevent="remarkText(scope.row, scope.$index)" type="text" size="small">
|
||||
标注
|
||||
</el-button>
|
||||
<el-button @click.native.prevent="removeDataSetView(scope.row)" type="text" size="small">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="page-box">
|
||||
<el-pagination background
|
||||
@current-change="handleDataSetCurrentChange"
|
||||
:current-page="dataSetQo.pageNo"
|
||||
:page-size="dataSetQo.pageSize"
|
||||
layout="total, prev, pager, next"
|
||||
:total="dataSetResult.total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="viewDialogVisible = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request, {getBaseUrl} from '@/utils/request';
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
name: "company",
|
||||
data() {
|
||||
return {
|
||||
qo: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
LIKES_name: '',
|
||||
},
|
||||
result: {
|
||||
records: [],
|
||||
total: 0
|
||||
},
|
||||
dataSetQo: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
taskId: '',
|
||||
taskType: ''
|
||||
},
|
||||
dataSetResult: {
|
||||
records: [],
|
||||
total: 0
|
||||
},
|
||||
ontologyList: [],
|
||||
taskTypeList: [{
|
||||
name: "测试集",
|
||||
code: 1,
|
||||
eName: "test"
|
||||
}, {
|
||||
name: "验证集",
|
||||
code: 2,
|
||||
eName: "validation"
|
||||
}, {
|
||||
name: "训练集",
|
||||
code: 3,
|
||||
eName: "training"
|
||||
}],
|
||||
dialogName: '编辑',
|
||||
cmdDialogVisible: false,
|
||||
viewDialogVisible: false,
|
||||
importDialogVisible: false,
|
||||
importNodeDialogVisible: false,
|
||||
cmd: {},
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入任务名称'}
|
||||
],
|
||||
ontologyId: [
|
||||
{required: true, message: '本体标签库'}
|
||||
],
|
||||
},
|
||||
fileList: [],
|
||||
fileList2: [],
|
||||
fileList3: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryOntologyList();
|
||||
_this.queryData();
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
request({
|
||||
url: '/remark_task/query_pages',
|
||||
method: 'post',
|
||||
data: _this.qo
|
||||
}).then(res => {
|
||||
_this.result.records = res.data.records;
|
||||
_this.result.total = res.data.total;
|
||||
if (res.data.records.length > 0) {
|
||||
_this.$nextTick(() => {
|
||||
_this.$refs['table'].toggleRowExpansion(res.data.records[0], true);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
_this.qo.pageNo = val;
|
||||
_this.queryData();
|
||||
},
|
||||
downloadFile(item, row) { // 导出
|
||||
window.open(getBaseUrl() + `/es_remark_task/export/${row.id}/${item.taskTypeCode}`);
|
||||
},
|
||||
showImportNodeDialog(item) { // 打开复制图模型的列表弹窗
|
||||
_this.queryOntologyList();
|
||||
_this.cmd = {
|
||||
srcOntologyId: item.ontologyId,
|
||||
dictOntologyId: ''
|
||||
};
|
||||
_this.importNodeDialogVisible = true;
|
||||
},
|
||||
submitImportNode(item) {
|
||||
_this.cmd.dictOntologyId = item.id;
|
||||
request({
|
||||
url: '/noumenon/copy_by_ontologyid',
|
||||
method: 'post',
|
||||
data: _this.cmd
|
||||
}).then(res => {
|
||||
_this.$message.success("导入成功");
|
||||
});
|
||||
},
|
||||
queryOntologyList() {
|
||||
request({
|
||||
url: '/ontology/query_list',
|
||||
method: 'post',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.ontologyList = res.data;
|
||||
});
|
||||
},
|
||||
removeRow(item) {
|
||||
_this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
request({
|
||||
url: '/remark_task/removeremarktask',
|
||||
method: 'post',
|
||||
data: {
|
||||
remarkId: item.id,
|
||||
ontologyId: item.ontologyId
|
||||
}
|
||||
}).then(res => {
|
||||
_this.$message.success("删除成功");
|
||||
_this.queryData();
|
||||
_this.queryOntologyList();
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
createRow() {
|
||||
_this.cmd = {
|
||||
name: '',
|
||||
};
|
||||
_this.cmdDialogVisible = true;
|
||||
},
|
||||
modifyRow(item) {
|
||||
_this.cmd = JSON.parse(JSON.stringify(item));
|
||||
_this.cmdDialogVisible = true;
|
||||
},
|
||||
showImportDialog(dataSet, task) {
|
||||
_this.cmd = {
|
||||
taskId: task.id,
|
||||
taskType: dataSet.taskTypeCode
|
||||
}
|
||||
_this.fileList = [];
|
||||
_this.importDialogVisible = true;
|
||||
},
|
||||
handleFileChange(file) {
|
||||
_this.$refs['upload'].clearFiles();
|
||||
_this.fileList = [file];
|
||||
},
|
||||
handleValidationFileChange(file) {
|
||||
_this.$refs['upload2'].clearFiles();
|
||||
_this.fileList2 = [file];
|
||||
},
|
||||
handleTrainingFileChange(file) {
|
||||
_this.$refs['upload3'].clearFiles();
|
||||
_this.fileList3 = [file];
|
||||
},
|
||||
submitModify() {
|
||||
this.$refs.cmd.validate((valid) => {
|
||||
if (valid) {
|
||||
let formData = new FormData();
|
||||
formData.append("name", _this.cmd.name);
|
||||
formData.append("validationFile", _this.fileList2[0].raw);
|
||||
formData.append("trainingFile", _this.fileList3[0].raw);
|
||||
|
||||
// if (_this.cmd.id) {
|
||||
// request({
|
||||
// url: '/remark_task/modify',
|
||||
// method: 'post',
|
||||
// data: _this.cmd
|
||||
// }).then(res => {
|
||||
// _this.$message.success("编辑成功");
|
||||
// _this.queryData();
|
||||
// _this.cmdDialogVisible = false;
|
||||
// });
|
||||
// } else { // 新建
|
||||
request({
|
||||
url: '/remark_task/create_with_file',
|
||||
method: 'post',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
_this.$message.success("添加成功");
|
||||
_this.queryData();
|
||||
_this.cmdDialogVisible = false;
|
||||
});
|
||||
// }
|
||||
}
|
||||
});
|
||||
},
|
||||
showDataSetListByTaskId(row, expanded) {
|
||||
if (row.tasks) {
|
||||
return;
|
||||
}
|
||||
request({
|
||||
url: '/es_remark_task/findesremarkinfosticdto/' + row.id,
|
||||
method: 'post',
|
||||
data: _this.qo
|
||||
}).then(res => {
|
||||
let tasks = [];
|
||||
for (let i = 0; i < 3; i++) {
|
||||
tasks.push({
|
||||
ecount: 0,
|
||||
icount: 0,
|
||||
rcount: 0,
|
||||
taskTypeName: _this.taskTypeList[i].name,
|
||||
taskTypeEName: _this.taskTypeList[i].eName,
|
||||
taskTypeCode: i + 1
|
||||
});
|
||||
}
|
||||
res.data.forEach(item => {
|
||||
let index = tasks.findIndex(row => {
|
||||
return row.taskTypeEName == item.type;
|
||||
});
|
||||
if (tasks[index]) {
|
||||
tasks[index].ecount = item.ecount;
|
||||
tasks[index].icount = item.icount;
|
||||
tasks[index].rcount = item.rcount;
|
||||
tasks[index].taskId = item.taskId;
|
||||
}
|
||||
});
|
||||
row.tasks = tasks;
|
||||
});
|
||||
},
|
||||
submitImport() {
|
||||
if (_this.fileList.length == 0) {
|
||||
_this.$message.warning("请选择一个文本文件进行上传");
|
||||
return;
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append("taskId", _this.cmd.taskId);
|
||||
formData.append("file", _this.fileList[0].raw);
|
||||
formData.append("taskType", _this.cmd.taskType);
|
||||
request({
|
||||
url: '/es_remark_task/upload_task',
|
||||
method: 'post',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
_this.$message.success("导入成功");
|
||||
_this.reloadDataSet(_this.cmd.taskId);
|
||||
_this.importDialogVisible = false;
|
||||
});
|
||||
},
|
||||
reloadDataSet(taskId) {
|
||||
let index = _this.result.records.findIndex(row => {
|
||||
return row.id == taskId;
|
||||
});
|
||||
_this.result.records[index].tasks = null;
|
||||
_this.showDataSetListByTaskId(_this.result.records[index]);
|
||||
},
|
||||
showDataSetViewDialog(dataSet, task) { // 打开查看弹窗，保存一些父级数据集信息
|
||||
_this.dataSetQo = {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
taskId: task.id,
|
||||
taskType: dataSet.taskTypeCode,
|
||||
ontologyId: task.ontologyId
|
||||
}
|
||||
_this.queryDataSetViewData();
|
||||
},
|
||||
queryDataSetViewData() {
|
||||
request({
|
||||
url: '/es_remark_task/findbytaskidandtasktype',
|
||||
method: 'post',
|
||||
data: _this.dataSetQo
|
||||
}).then(res => {
|
||||
_this.dataSetResult.records = res.data.content;
|
||||
_this.dataSetResult.total = res.data.totalElements;
|
||||
_this.viewDialogVisible = true;
|
||||
});
|
||||
},
|
||||
handleDataSetCurrentChange(val) {
|
||||
_this.dataSetQo.pageNo = val;
|
||||
_this.queryDataSetViewData();
|
||||
},
|
||||
removeDataSet(item, task) {
|
||||
_this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
request({
|
||||
url: '/es_remark_task/deletebyqo',
|
||||
method: 'post',
|
||||
data: {
|
||||
taskId: task.id,
|
||||
taskType: item.taskTypeCode
|
||||
}
|
||||
}).then(res => {
|
||||
_this.$message.success("删除成功");
|
||||
_this.reloadDataSet(task.id);
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
removeDataSetView(item) {
|
||||
_this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
request({
|
||||
url: '/es_remark_task/delete/' + item.id,
|
||||
method: 'post'
|
||||
}).then(res => {
|
||||
_this.$message.success("删除成功");
|
||||
_this.queryDataSetViewData();
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
markTxt(item, task) {
|
||||
this.$router.push({
|
||||
path: '/textTag',
|
||||
query: {taskId: task.id, taskTypeCode: item.taskTypeCode, ontologyId: task.ontologyId}
|
||||
});
|
||||
},
|
||||
remarkText(row, index) { // 跳转到标注页，根据序号
|
||||
let sort = (_this.dataSetQo.pageNo - 1) * _this.dataSetQo.pageSize + index + 1;
|
||||
this.$router.push({
|
||||
path: '/textTag',
|
||||
query: {sort: sort, taskId: _this.dataSetQo.taskId, taskTypeCode: _this.dataSetQo.taskType, ontologyId: _this.dataSetQo.ontologyId}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.demo-table-expand {
|
||||
font-size: 0;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.demo-table-expand label {
|
||||
width: 90px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
|
||||
.demo-table-expand .el-form-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
width: 80%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,515 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
知识图谱质量评估
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div>
|
||||
<el-form :inline="true" :model="qo" class="demo-form-inline">
|
||||
<el-form-item label="选择待评估图谱：">
|
||||
<el-select v-model="value" placeholder="选择待评估图谱" @change="handleSelectChange">
|
||||
<el-option
|
||||
v-for="item in spaceList"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="indicator5(1)">开始采样</el-button>
|
||||
<el-button type="primary" icon="el-icon-search" @click="indicator5(2)">开始质量评估</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-if="tableShow == 1">
|
||||
<div class="result1">评估结果:</div>
|
||||
<el-table :data="indicator5Data.zb1" style="width: 60%">
|
||||
<el-table-column prop="sign1" label="指标">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row[0] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sign2" label="采样后的知识图谱">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row[1] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sign3" label="原始的知识图谱">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row[2] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table :data="indicator5Data.zb2" style="width: 60%;margin-top: 40px">
|
||||
<el-table-column prop="sign1" label="指标">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row[0] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sign2" label="采样后的知识图谱">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row[1] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sign3" label="原始的知识图谱">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row[2] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="result1" style="margin-top: 20px" v-if="cai.length > 0">
|
||||
<!-- 使用采样数据集 预估评估误差{{indicator5Data.wc}}-->
|
||||
温馨小贴士：<br/><br/>
|
||||
{{ cai }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="tableShow == 2">
|
||||
<div class="ping-box" v-if="ping.length > 0">
|
||||
温馨小贴士：<br/><br/>
|
||||
{{ ping }}
|
||||
</div>
|
||||
<el-row :gutter="20" style="margin-top: 30px">
|
||||
<el-col :span="15">
|
||||
<p>知识图谱评估结果整体展示</p>
|
||||
<div id="echart"></div>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<div>
|
||||
<img :src="fileUrl+'/'+indicator5Data.rlt" style="width: 100%;margin-top: 30px" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin-top: 30px;overflow: hidden">
|
||||
<el-table :data="indicator5Data.tjxx" style="width: 100%" border :span-method="objectSpanMethod">
|
||||
<el-table-column prop="weidu" label="维度" align="center"></el-table-column>
|
||||
<el-table-column prop="csbs" label="标识符" align="center">
|
||||
<template slot-scope="scope">
|
||||
<label v-if="scope.row.csbs">{{ scope.row.csbs }}</label>
|
||||
<label :style="scope.row.zhibiao.indexOf('总得分') != -1?'font-weight: bold;':''"
|
||||
v-else>{{ scope.row.zhibiao }}</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="zhibiao" label="指标" align="center">
|
||||
<template slot-scope="scope">
|
||||
<label v-if="scope.row.zhibiao.indexOf('总得分') == -1">{{ scope.row.zhibiao }}</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="val" label="评估值" align="center"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!--<el-row :gutter="20" style="margin-top: 30px;overflow: hidden">-->
|
||||
<!--<div style="float: left;width: 30%">-->
|
||||
<!--<p>时效性维度</p>-->
|
||||
<!--<el-table :data="indicator5Data.arr1" style="width: 100%">-->
|
||||
<!--<el-table-column prop="sign1" label="时效性评估指标">-->
|
||||
<!--<template slot-scope="scope">-->
|
||||
<!--<span>{{scope.row.zhibiao}}</span>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
<!--<el-table-column prop="sign2" label="评估值">-->
|
||||
<!--<template slot-scope="scope">-->
|
||||
<!--<span>{{scope.row.val}}</span>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
<!--</el-table>-->
|
||||
<!--</div>-->
|
||||
<!--<div style="float: left;width: 30%;margin: 0 5%">-->
|
||||
<!--<p>语法有效性维度</p>-->
|
||||
<!--<el-table :data="indicator5Data.arr2" style="width: 100%">-->
|
||||
<!--<el-table-column prop="sign1" label="语法有效性评估指标">-->
|
||||
<!--<template slot-scope="scope">-->
|
||||
<!--<span>{{scope.row.zhibiao}}</span>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
<!--<el-table-column prop="sign2" label="评估值">-->
|
||||
<!--<template slot-scope="scope">-->
|
||||
<!--<span>{{scope.row.val}}</span>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
<!--</el-table>-->
|
||||
<!--</div>-->
|
||||
<!--<div style="float: left;width: 30%">-->
|
||||
<!--<p>一致性维度</p>-->
|
||||
<!--<el-table :data="indicator5Data.arr3" style="width: 100%">-->
|
||||
<!--<el-table-column prop="sign1" label="一致性评估指标">-->
|
||||
<!--<template slot-scope="scope">-->
|
||||
<!--<span>{{scope.row.zhibiao}}</span>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
<!--<el-table-column prop="sign2" label="评估值">-->
|
||||
<!--<template slot-scope="scope">-->
|
||||
<!--<span>{{scope.row.val}}</span>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
<!--</el-table>-->
|
||||
<!--</div>-->
|
||||
<!--</el-row>-->
|
||||
<!--<el-row :gutter="20" style="margin-top: 30px;overflow: hidden">-->
|
||||
<!--<div style="float: left;width: 30%">-->
|
||||
<!--<p>简洁性维度</p>-->
|
||||
<!--<el-table :data="indicator5Data.arr4" style="width: 100%">-->
|
||||
<!--<el-table-column prop="sign1" label="简洁性评估指标">-->
|
||||
<!--<template slot-scope="scope">-->
|
||||
<!--<span>{{scope.row.zhibiao}}</span>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
<!--<el-table-column prop="sign2" label="评估值">-->
|
||||
<!--<template slot-scope="scope">-->
|
||||
<!--<span>{{scope.row.val}}</span>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
<!--</el-table>-->
|
||||
<!--</div>-->
|
||||
<!--<div style="float: left;width: 30%;margin: 0 5%">-->
|
||||
<!--<p>完整性维度</p>-->
|
||||
<!--<el-table :data="indicator5Data.arr5" style="width: 100%">-->
|
||||
<!--<el-table-column prop="sign1" label="完整性评估指标">-->
|
||||
<!--<template slot-scope="scope">-->
|
||||
<!--<span>{{scope.row.zhibiao}}</span>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
<!--<el-table-column prop="sign2" label="评估值">-->
|
||||
<!--<template slot-scope="scope">-->
|
||||
<!--<span>{{scope.row.val}}</span>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
<!--</el-table>-->
|
||||
<!--</div>-->
|
||||
<!--</el-row>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request, {getFileUrl} from '@/utils/request';
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
name: "graphAssessment",
|
||||
data() {
|
||||
return {
|
||||
spaceList: [],
|
||||
fileUrl: getFileUrl(),
|
||||
value: '',
|
||||
qo: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
LIKES_name: '',
|
||||
EQI_sourceType: 1
|
||||
},
|
||||
result: {
|
||||
records: [],
|
||||
total: 1
|
||||
},
|
||||
indicator5Data: {},
|
||||
tableShow: '',
|
||||
spanArr: [],
|
||||
liArr: [],
|
||||
cai: '',
|
||||
ping: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryData();
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
request({
|
||||
url: '/indicator/indicator5_1',
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.spaceList = res.data;
|
||||
_this.value = _this.spaceList[0].name;
|
||||
_this.indicator5(1);
|
||||
});
|
||||
},
|
||||
handleSelectChange() {
|
||||
_this.cai = "";
|
||||
_this.ping = "";
|
||||
},
|
||||
indicator5(type) {
|
||||
_this.tableShow = type;
|
||||
request({
|
||||
url: '/indicator/indicator5/' + _this.value,
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
if (type === 1) {
|
||||
if (_this.value === "DBPedia") {
|
||||
_this.cai = "从原始DBPedia知识图谱中抽样了6,067,531条知识得到采样后的DBPedia知识图谱，评估工作量降低了99.6%。";
|
||||
} else if (_this.value === "WikiData") {
|
||||
_this.cai = "从原始WikiData知识图谱中抽样了1,771,981条知识得到采样后的WikiData知识图谱，评估工作量降低了90.9%。";
|
||||
} else {
|
||||
_this.cai = "";
|
||||
}
|
||||
} else if (type === 2) {
|
||||
if (_this.value === "DBPedia") {
|
||||
_this.ping = "对抽样后的DBPedia知识图谱进行评估，其知识准确率为94.6%，知识准确率评估误差为0.04%。";
|
||||
} else if (_this.value === "WikiData") {
|
||||
_this.ping = "对抽样后的WikiData知识图谱进行评估，其知识准确率为85.7%，知识准确率评估误差为0.07%。";
|
||||
} else {
|
||||
_this.ping = "";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let arr1 = [];
|
||||
let arr2 = [];
|
||||
let arr3 = [];
|
||||
let arr4 = [];
|
||||
let arr5 = [];
|
||||
res.data.tjxx.map(data1 => {
|
||||
if (data1.weidu == "时效性") {
|
||||
arr1.push(data1);
|
||||
} else if (data1.weidu == "语法有效性") {
|
||||
arr2.push(data1);
|
||||
} else if (data1.weidu == "一致性") {
|
||||
arr3.push(data1);
|
||||
} else if (data1.weidu == "简洁性") {
|
||||
arr4.push(data1);
|
||||
} else if (data1.weidu == "完整性") {
|
||||
arr5.push(data1);
|
||||
}
|
||||
})
|
||||
_this.indicator5Data = res.data;
|
||||
_this.indicator5Data.arr1 = arr1;
|
||||
_this.indicator5Data.arr2 = arr2;
|
||||
_this.indicator5Data.arr3 = arr3;
|
||||
_this.indicator5Data.arr4 = arr4;
|
||||
_this.indicator5Data.arr5 = arr5;
|
||||
_this.getSpanId(res.data.tjxx);
|
||||
if (type == 2) {
|
||||
_this.initEchart();
|
||||
}
|
||||
});
|
||||
},
|
||||
getSpanId(data) {
|
||||
this.spanArr = []
|
||||
this.liArr = []
|
||||
// data就是我们从后台拿到的数据
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (i === 0) {
|
||||
//spanArr 用于存放没一行记录的合并数
|
||||
this.spanArr.push(1);
|
||||
//pos是spanArr的索引
|
||||
this.pos = 0;
|
||||
} else {
|
||||
// 判断当前元素与上一个元素是否相同
|
||||
if (data[i].weidu === data[i - 1].weidu) {
|
||||
this.spanArr[this.pos] += 1;
|
||||
this.spanArr.push(0);
|
||||
} else {
|
||||
this.spanArr.push(1);
|
||||
this.pos = i;
|
||||
}
|
||||
}
|
||||
|
||||
if (data[i].zhibiao.indexOf('总得分') != -1) {
|
||||
this.liArr.push(i)
|
||||
}
|
||||
}
|
||||
console.log(this.liArr)
|
||||
},
|
||||
objectSpanMethod({row, column, rowIndex, columnIndex}) {
|
||||
if (columnIndex === 0) {
|
||||
|
||||
const _row = this.spanArr[rowIndex];
|
||||
//如果行号大于0 合并
|
||||
const _col = _row > 0 ? 1 : 0;
|
||||
// console.log(`rowspan:${_row} colspan:${_col}`);
|
||||
return {
|
||||
// [0,0] 表示这一行不显示，
|
||||
rowspan: _row,
|
||||
colspan: _col
|
||||
};
|
||||
}
|
||||
|
||||
if (this.liArr.indexOf(rowIndex) != -1) {
|
||||
if (columnIndex === 1) {
|
||||
return [1, 2];
|
||||
} else if (columnIndex === 2) {
|
||||
return [0, 0];
|
||||
}
|
||||
}
|
||||
},
|
||||
handleFileChange(file) {
|
||||
_this.fileList = [file];
|
||||
},
|
||||
// queryData() {
|
||||
//
|
||||
// if(_this.value == 1) {
|
||||
// _this.result.records = [ {
|
||||
// sign1: '93%',
|
||||
// sign2: '45%',
|
||||
// sign3: '81%',
|
||||
// }]
|
||||
// } else {
|
||||
// _this.result.records = [ {
|
||||
// sign1: '90%',
|
||||
// sign2: '40%',
|
||||
// sign3: '88%',
|
||||
// }]
|
||||
// }
|
||||
// },
|
||||
initEchart() {
|
||||
let chart = _this.$echarts.init(document.getElementById("echart"));
|
||||
let echartArr1 = [];
|
||||
let echartArr2 = [];
|
||||
let echartArr3 = [];
|
||||
let echartArr4 = [];
|
||||
if (_this.indicator5Data.ld1) {
|
||||
_this.indicator5Data.ld1.map(data => {
|
||||
echartArr1.push({text: data.name, max: 1});
|
||||
echartArr2.push(data.val);
|
||||
})
|
||||
}
|
||||
if (_this.indicator5Data.ld2) {
|
||||
_this.indicator5Data.ld2.map(data => {
|
||||
echartArr3.push({text: data.name});
|
||||
echartArr4.push(data.val);
|
||||
})
|
||||
}
|
||||
var option = {
|
||||
// color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
|
||||
// title: {
|
||||
// text: 'Customized Radar Chart'
|
||||
// },
|
||||
// legend: {},
|
||||
radar: [
|
||||
{
|
||||
indicator: echartArr3,
|
||||
center: ['75%', '50%'],
|
||||
radius: 120,
|
||||
startAngle: 90,
|
||||
splitNumber: 4,
|
||||
shape: 'circle',
|
||||
axisName: {
|
||||
formatter: '【{value}】',
|
||||
color: '#428BD4'
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
// color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
// color: 'rgba(211, 253, 250, 0.8)'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// color: 'rgba(211, 253, 250, 0.8)'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
indicator: echartArr1,
|
||||
center: ['25%', '50%'],
|
||||
radius: 120,
|
||||
axisName: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#666',
|
||||
borderRadius: 3,
|
||||
padding: [3, 5]
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'radar',
|
||||
emphasis: {
|
||||
lineStyle: {
|
||||
width: 4
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: echartArr4,
|
||||
name: 'Data A'
|
||||
},
|
||||
// {
|
||||
// value: [60, 5, 0.3, -100, 1500],
|
||||
// name: 'Data B',
|
||||
// // areaStyle: {
|
||||
// // color: 'rgba(255, 228, 52, 0.6)'
|
||||
// // }
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'radar',
|
||||
radarIndex: 1,
|
||||
data: [
|
||||
{
|
||||
value: echartArr2,
|
||||
name: 'Data C',
|
||||
// symbol: 'rect',
|
||||
// symbolSize: 12,
|
||||
// lineStyle: {
|
||||
// type: 'dashed'
|
||||
// },
|
||||
// label: {
|
||||
// show: true,
|
||||
// formatter: function (params) {
|
||||
// return params.value;
|
||||
// }
|
||||
// }
|
||||
},
|
||||
// {
|
||||
// value: [100, 93, 50, 90, 70, 60],
|
||||
// name: 'Data D',
|
||||
// // areaStyle: {
|
||||
// // color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
|
||||
// // {
|
||||
// // color: 'rgba(255, 145, 124, 0.1)',
|
||||
// // offset: 0
|
||||
// // },
|
||||
// // {
|
||||
// // color: 'rgba(255, 145, 124, 0.9)',
|
||||
// // offset: 1
|
||||
// // }
|
||||
// // ])
|
||||
// // }
|
||||
// }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.resize()
|
||||
chart.setOption(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ping-box {
|
||||
position: absolute;
|
||||
right: 200px;
|
||||
top: 25px;
|
||||
width: 650px;
|
||||
}
|
||||
|
||||
.result1 {
|
||||
text-align: left;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
color: #5c5c5c;
|
||||
}
|
||||
|
||||
#echart {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,133 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
武器装备维修保障知识抽取
|
||||
</div>
|
||||
<!--<div class="menu-content">-->
|
||||
<!--<div style="height: 40px">-->
|
||||
<!--<el-upload-->
|
||||
<!--ref="upload"-->
|
||||
<!--class="upload-btn"-->
|
||||
<!--:auto-upload="false"-->
|
||||
<!--action="#"-->
|
||||
<!--:on-change="handleFileChange"-->
|
||||
<!--:limit="2"-->
|
||||
<!--:show-file-list="false">-->
|
||||
<!--<el-button type="primary">导入测试文件</el-button>-->
|
||||
<!--</el-upload>-->
|
||||
<!--<el-button type="primary" style="margin-left: 20px">开始测试</el-button>-->
|
||||
<!--<el-button style="float: right">三元组F1</el-button>-->
|
||||
<!--<el-button style="float: right">实体F1</el-button>-->
|
||||
<!--</div>-->
|
||||
<!--<div style="margin-top: 30px;height: calc(100% - 80px)">-->
|
||||
<!--<el-table :data="questionData" style="width: 100%;">-->
|
||||
<!--<el-table-column prop="question" label="句子"></el-table-column>-->
|
||||
<!--<el-table-column prop="answer" label="实体"></el-table-column>-->
|
||||
<!--<el-table-column prop="index" label="三元组"></el-table-column>-->
|
||||
<!--</el-table>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<div class="menu-content">
|
||||
<div style="height: 40px">
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="keyword" style="width: 50%">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
<el-button type="primary" style="float: right">故障原因推荐Top5准确率</el-button>
|
||||
</div>
|
||||
<div style="margin-top: 30px;height: calc(100% - 80px)">
|
||||
<el-table :data="questionData" style="width: 100%;">
|
||||
<el-table-column prop="question" label="故障原因"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
name: "graphExhibition",
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
fileName: "",
|
||||
questionData: [{question: "问题1", answer: "答案1", index: 1},
|
||||
{question: "问题1", answer: "答案1", index: 1},
|
||||
{question: "问题1", answer: "答案1", index: 1},
|
||||
{question: "问题1", answer: "答案1", index: 1}
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleFileChange(item) {
|
||||
this.$refs.upload.clearFiles();
|
||||
let formData = new FormData();
|
||||
formData.append("file", item.raw);
|
||||
_this.fileName = item.raw.name;
|
||||
// request({
|
||||
// url: '/sys-file/create',
|
||||
// method: 'put',
|
||||
// data: formData
|
||||
// }).then(res => {
|
||||
// _this.$message.success("上传成功");
|
||||
// _this.queryData();
|
||||
// });
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.upload-btn {
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.text-box {
|
||||
border: 1px solid #dcdddf;
|
||||
width: calc(100% - 40px);
|
||||
height: 550px;
|
||||
overflow-y: auto;
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
line-height: 25px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.text-title {
|
||||
width: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left-box {
|
||||
width: 50%;
|
||||
float: left;
|
||||
|
||||
.text-box-item {
|
||||
width: calc(90% - 1px);
|
||||
padding-right: 10%;
|
||||
border-right: 1px solid #c1c2c4;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
width: 50%;
|
||||
float: right;
|
||||
|
||||
.text-box-item {
|
||||
width: 90%;
|
||||
padding-left: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,429 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
知识图谱实例导入
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div>
|
||||
<el-form :inline="true" :model="qo" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-input v-model="qo.LIKES_name" placeholder="请输入任务名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="qo.pageNo=1;queryData()">搜 索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div style="margin: 0px 0 20px 0">
|
||||
<el-button type="primary" @click="createRow()">创建任务</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-table :data="result.records" style="width: 100%" ref="table">
|
||||
<el-table-column type="index" label="行号" width="100"></el-table-column>
|
||||
<el-table-column prop="space" label="实例名称"></el-table-column>
|
||||
<el-table-column prop="name" label="任务名称"></el-table-column>
|
||||
<el-table-column prop="totle" label="文件个数"></el-table-column>
|
||||
<el-table-column prop="over" label="已导入个数"></el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.native.prevent="modifyRow(scope.row)" type="text" size="small">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click.native.prevent="showRow(scope.row)" type="text" size="small">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button @click.native.prevent="removeRow(scope.row)" type="text" size="small">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</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>
|
||||
<el-dialog
|
||||
:title="'查看-' + showTaskName"
|
||||
:visible.sync="showDialogVisible"
|
||||
width="60%">
|
||||
<!-- createTime: "2022-08-03 08:19:29"-->
|
||||
<!-- headerRow: null-->
|
||||
<!-- id: 1-->
|
||||
<!-- over: false-->
|
||||
<!-- originalFilename: "dn_graph_one_tag"-->
|
||||
<!-- path: "2022-08-03\\64e790821d872af8db27e781b6becc0e.xlsx"-->
|
||||
<!-- suffix: ".xlsx"-->
|
||||
<!-- taskId: 4-->
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="未导入" name="first">
|
||||
<el-table :data="cmd.records" style="width: 100%" ref="fileListTable"
|
||||
@selection-change="handleSelectionChange" default-expand-all>
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="scope">
|
||||
<el-form label-position="left" class="demo-table-expand">
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="scope.row.type" @change="val => {handleTypeChange(val, scope.row)}">
|
||||
<el-option label="TAG" value="TAG"></el-option>
|
||||
<el-option label="EDGE" value="EDGE"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="TAG名称" v-show="scope.row.type == 'TAG'">
|
||||
<el-select v-model="scope.row.name" placeholder="请选择TAG名称" @change="val => {handleTagNameChange(val, scope.row)}">
|
||||
<el-option :label="item.Name" :value="item.Name" v-for="item in tagList"
|
||||
:key="item.Name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="EDGE名称" v-show="scope.row.type == 'EDGE'">
|
||||
<el-select v-model="scope.row.name" placeholder="请选择EDGE名称" @change="val => {handleEdgeNameChange(val, scope.row)}">
|
||||
<el-option :label="item.Name" :value="item.Name" v-for="item in edgeList"
|
||||
:key="item.Name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<template v-show="scope.row.name">
|
||||
<el-form-item :label="field.field" v-for="field in scope.row.fieldList" :key="field.field">
|
||||
<el-select v-model="field.value" placeholder="请选择TAG名称">
|
||||
<el-option :label="row" :value="row" v-for="row in scope.row.headerRowList"
|
||||
:key="row"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column type="index" label="行号" width="80"></el-table-column>
|
||||
<el-table-column prop="originalFilename" label="源文件名称">
|
||||
<template slot-scope="scope">{{scope.row.originalFilename}}{{scope.row.suffix}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" ></el-table-column>
|
||||
<el-table-column prop="typename" label="名称" ></el-table-column>
|
||||
<!-- <el-table-column prop="path" label="路径" width="450"></el-table-column>-->
|
||||
<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="已导入" name="second">
|
||||
<el-table :data="cmd.records2" style="width: 100%" ref="fileListTable">
|
||||
<el-table-column type="index" label="行号" width="80"></el-table-column>
|
||||
<el-table-column prop="originalFilename" label="源文件名称"></el-table-column>
|
||||
<el-table-column prop="path" label="路径" width="450"></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="showDialogVisible = false">关 闭</el-button>
|
||||
<el-button type="primary" @click="importRow" v-show="activeTab == 'first'">导 入</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="创建任务"
|
||||
:visible.sync="createDialogVisible"
|
||||
width="40%">
|
||||
<el-form ref="createCmd" label-width="100px" :rules="rules" :model="cmd">
|
||||
<el-form-item label="实例名称" prop="space">
|
||||
<el-select v-model="cmd.space" placeholder="请选择实例名称">
|
||||
<el-option v-for="space in spaceList" :key="space.Name" :label="space.Name" :value="space.Name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务名称" prop="name">
|
||||
<el-input v-model="cmd.name" placeholder="请输入名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件选择" prop="file">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:auto-upload="false"
|
||||
accept=".xls,.xlsx"
|
||||
action="#"
|
||||
:limit="10"
|
||||
:on-change="handleFileChange"
|
||||
:file-list="fileList">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="createDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitCreate">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="编辑"
|
||||
:visible.sync="cmdDialogVisible"
|
||||
width="40%">
|
||||
<el-form ref="cmd" label-width="100px" :rules="rules" :model="cmd">
|
||||
<el-form-item label="实例名称">
|
||||
<el-input v-model="cmd.space" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务名称" prop="name">
|
||||
<el-input v-model="cmd.name" placeholder="请输入名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cmdDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitModify">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
name: "codeWarehouse",
|
||||
data() {
|
||||
return {
|
||||
qo: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
LIKES_name: '',
|
||||
},
|
||||
spaceList: [], // 实例列表
|
||||
result: {
|
||||
records: [],
|
||||
total: 0
|
||||
},
|
||||
showTaskName: '',
|
||||
createDialogVisible: false,
|
||||
cmdDialogVisible: false,
|
||||
showDialogVisible: false,
|
||||
cmd: {},
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入任务名称'}
|
||||
],
|
||||
space: [
|
||||
{required: true, message: '请选择实例名称'}
|
||||
]
|
||||
},
|
||||
fileList: [], // 创建任务导入的文件列表
|
||||
importSelection: [], // 选中的需要执行导入的文件
|
||||
activeTab: 'first',
|
||||
tagList: [], // 任务space下的所有tag
|
||||
edgeList: [], // 任务space下的所有edge
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryData();
|
||||
_this.querySpaceList();
|
||||
},
|
||||
methods: {
|
||||
querySpaceList() { // 查询实例列表
|
||||
request({
|
||||
url: '/nebula_operate/showspace',
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.spaceList = res.data;
|
||||
});
|
||||
},
|
||||
queryData() {
|
||||
request({
|
||||
url: '/graph-task/query_pages',
|
||||
method: 'post',
|
||||
data: _this.qo
|
||||
}).then(res => {
|
||||
res.data.records.forEach(item => {
|
||||
item.totle = item.totle || 0;
|
||||
item.over = item.over || 0;
|
||||
});
|
||||
_this.result.records = res.data.records;
|
||||
_this.result.total = res.data.total;
|
||||
});
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
_this.qo.pageNo = val;
|
||||
_this.queryData();
|
||||
},
|
||||
removeRow(item) {
|
||||
_this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
request({
|
||||
url: `/graph-task/remove/${item.id}`,
|
||||
method: 'post',
|
||||
}).then(res => {
|
||||
_this.$message.success("删除成功");
|
||||
_this.queryData();
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
createRow() {
|
||||
_this.createDialogVisible = true;
|
||||
_this.$nextTick(() => {
|
||||
_this.cmd = {
|
||||
"space": "",
|
||||
"name": "",
|
||||
"file": null
|
||||
};
|
||||
_this.fileList = [];
|
||||
_this.$refs.createCmd.resetFields();
|
||||
});
|
||||
},
|
||||
handleFileChange(file, fileList) {
|
||||
_this.cmd.file = file.raw;
|
||||
_this.fileList = [fileList.at(-1)];
|
||||
},
|
||||
modifyRow(item) {
|
||||
_this.cmdDialogVisible = true;
|
||||
_this.$nextTick(() => {
|
||||
_this.cmd = JSON.parse(JSON.stringify(item));
|
||||
_this.$refs.cmd.resetFields();
|
||||
});
|
||||
},
|
||||
submitCreate() {
|
||||
this.$refs.createCmd.validate((valid) => {
|
||||
if (valid) {
|
||||
let formData = new FormData();
|
||||
formData.append("file", _this.cmd.file);
|
||||
formData.append("name", _this.cmd.name);
|
||||
request({
|
||||
url: `/nebula_graph_import/createtask/${_this.cmd.space}`,
|
||||
method: 'put',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
_this.$message.success("创建成功");
|
||||
_this.queryData();
|
||||
_this.createDialogVisible = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
submitModify() {
|
||||
this.$refs.cmd.validate((valid) => {
|
||||
if (valid) {
|
||||
request({
|
||||
url: '/graph-task/modify',
|
||||
method: 'post',
|
||||
data: _this.cmd
|
||||
}).then(res => {
|
||||
_this.$message.success("编辑成功");
|
||||
_this.queryData();
|
||||
_this.cmdDialogVisible = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
showRow(item) { // 打开查看
|
||||
_this.showTaskName = item.name;
|
||||
_this.importSelection = [];
|
||||
request({
|
||||
url: `/nebula_graph_import/findtaskbyid/${item.id}`,
|
||||
method: 'get',
|
||||
data: _this.cmd
|
||||
}).then(res => {
|
||||
let _records = [], _records2 = [];
|
||||
_this.tagList = res.data.tags;
|
||||
_this.edgeList = res.data.edges;
|
||||
res.data.tfs.forEach(row => {
|
||||
if (row.over) {
|
||||
_records2.push(row);
|
||||
} else {
|
||||
row.headerRowList = JSON.parse(row.headerRow) || [];
|
||||
row.fieldList = [];
|
||||
row.type = row.type || "TAG"; // 默认TAG类型
|
||||
row.name = row.typename || "";
|
||||
if(row.name && row.type) {
|
||||
if(row.type === 'TAG') {
|
||||
_this.handleTagNameChange(row.typename, row);
|
||||
} else if(row.type === 'EDGE') {
|
||||
_this.handleEdgeNameChange(row.typename, row);
|
||||
}
|
||||
}
|
||||
_records.push(row);
|
||||
}
|
||||
});
|
||||
_this.cmd = {
|
||||
records: _records,
|
||||
records2: _records2
|
||||
};
|
||||
_this.showDialogVisible = true;
|
||||
});
|
||||
},
|
||||
handleTypeChange(val, row) {
|
||||
row.name = "";
|
||||
row.fieldList = [];
|
||||
},
|
||||
handleTagNameChange(val, row) {
|
||||
row.typename = val;
|
||||
let index = _this.tagList.findIndex(tag => {
|
||||
return tag.Name == val;
|
||||
});
|
||||
if(index >= 0) {
|
||||
row.fieldList = _this.resolveFieldList(_this.tagList[index].fields, row.headerRowList);
|
||||
}
|
||||
},
|
||||
handleEdgeNameChange(val, row) {
|
||||
row.typename = val;
|
||||
let index = _this.edgeList.findIndex(edge => {
|
||||
return edge.Name == val;
|
||||
});
|
||||
if(index >= 0) {
|
||||
row.fieldList = _this.resolveFieldList(_this.edgeList[index].fields, row.headerRowList);
|
||||
}
|
||||
},
|
||||
resolveFieldList(fieldList, headerRowList) { // solve fieldList, field.value auto assignment rowHeader's value
|
||||
fieldList.forEach(field => {
|
||||
if(headerRowList.indexOf(field.field) >= 0) {
|
||||
field.value = field.field;
|
||||
}
|
||||
});
|
||||
return fieldList;
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
_this.importSelection = val;
|
||||
},
|
||||
importRow() { // 执行批量导入，导入选择的
|
||||
if (_this.importSelection.length == 0) {
|
||||
_this.$message.warning("请选择文件再执行导入！");
|
||||
return;
|
||||
}
|
||||
let cmd = {
|
||||
taskId: _this.importSelection[0].taskId,
|
||||
taskFiles: []
|
||||
};
|
||||
_this.importSelection.forEach(item => {
|
||||
let _correspond = {};
|
||||
item.fieldList.forEach(field => {
|
||||
_correspond[field.field] = field.value;
|
||||
});
|
||||
cmd.taskFiles.push({
|
||||
taskFileId: item.id,
|
||||
type: item.type,
|
||||
name: item.name,
|
||||
correspond: _correspond
|
||||
});
|
||||
});
|
||||
console.log(cmd);
|
||||
request({
|
||||
url: '/nebula_graph_import/graphtaskexecute',
|
||||
method: 'post',
|
||||
data: cmd
|
||||
}).then(res => {
|
||||
_this.$message.success("导入成功");
|
||||
_this.queryData();
|
||||
_this.showDialogVisible = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -1,297 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
知识图谱推理
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<el-row :gutter="5" style="padding-bottom: 20px">
|
||||
<el-col :span="7">
|
||||
<div>
|
||||
<label>请选择知识图谱：</label>
|
||||
<el-select v-model="qo.select" placeholder="选择图谱">
|
||||
<el-option label="装备知识图谱" value="1"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div>
|
||||
<label>请选择文件：</label>
|
||||
<el-upload
|
||||
ref="upload1" 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>
|
||||
</el-col>
|
||||
<el-col :span="13">
|
||||
<el-button :type="items.length > 0 ?'primary':'info'" style="float:right;" @click="startReason">开始推理</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="12">
|
||||
<el-table :data="items" style="width: 100%" height="495" border>
|
||||
<el-table-column type="index" label="行号" width="70"></el-table-column>
|
||||
<el-table-column prop="qu" label="问题"></el-table-column>
|
||||
<el-table-column prop="an" label="正确答案"></el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="path-right-box">
|
||||
<div id="echart"></div>
|
||||
<div style="width: calc(100% - 30px);margin: 30px">
|
||||
<el-table :data="tableData" style="width: 100%;">
|
||||
<el-table-column prop="tl_len" label="推理路径长度"></el-table-column>
|
||||
<el-table-column prop="hits1" label="hits@1"></el-table-column>
|
||||
<el-table-column prop="hits2" label="hits@5"></el-table-column>
|
||||
<el-table-column prop="hits3" label="hits@10"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-descriptions class="margin-top" :column="1" border v-show="predictFlag">
|
||||
<el-descriptions-item label="问题">
|
||||
<el-select v-model="activeQuestionIndex" style="width: 100%" @change="handleQuestionSelect">
|
||||
<el-option v-for="(item,index) in items" :key="index" :value="index" :label="item.qu"></el-option>
|
||||
</el-select>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="正确答案">
|
||||
<label v-for="answer in predictAnswers" :key="answer">{{ answer }}</label>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="正确答案排序">
|
||||
{{ sort }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="正确答案推理路径" :span="2">
|
||||
<div class="graph-box">
|
||||
<graph ref="graph"></graph>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
import graph from "@/components/graph/Graph";
|
||||
|
||||
var _this;
|
||||
var chart = null;
|
||||
export default {
|
||||
components: {
|
||||
'graph': graph,
|
||||
},
|
||||
name: "graphPath",
|
||||
data() {
|
||||
return {
|
||||
qo: {
|
||||
select: "1",
|
||||
pageNo: 1,
|
||||
pageSize: 1
|
||||
},
|
||||
questions: [],
|
||||
answers: [],
|
||||
resultList: [],
|
||||
items: [],
|
||||
tableData: [],
|
||||
predictAnswers: [],
|
||||
activeQuestionIndex: null,
|
||||
predictFlag: false,
|
||||
sort: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
},
|
||||
methods: {
|
||||
handleFileChange(file) {
|
||||
this.$refs.upload1.clearFiles();
|
||||
_this.predictFlag = false;
|
||||
_this.predictAnswers = [];
|
||||
_this.sort = '';
|
||||
_this.items = [];
|
||||
_this.queryData(file.raw);
|
||||
},
|
||||
startReason() {
|
||||
if(_this.items.length <= 0){
|
||||
_this.$message.error("显示数据存在问题导致推理失败");
|
||||
return false;
|
||||
}
|
||||
_this.$message.info("开始推理");
|
||||
setTimeout(() => {
|
||||
_this.tableData = _this.resultList;
|
||||
_this.initRchart();
|
||||
_this.predictFlag = true;
|
||||
_this.$message.success("推理成功");
|
||||
}, 1520);
|
||||
},
|
||||
handleQuestionSelect(row) {
|
||||
_this.predictAnswers = [_this.items[_this.activeQuestionIndex].an];
|
||||
_this.sort = _this.items[_this.activeQuestionIndex].sort;
|
||||
_this.initGraph();
|
||||
},
|
||||
initGraph() {
|
||||
_this.$nextTick(() => {
|
||||
let cmd = {
|
||||
nodes: [],
|
||||
edges: []
|
||||
};
|
||||
_this.items[_this.activeQuestionIndex].model.nodes.forEach(node => {
|
||||
cmd.nodes.push({
|
||||
id: node.vid,
|
||||
label: node.properties.name,
|
||||
});
|
||||
});
|
||||
_this.items[_this.activeQuestionIndex].model.relations.forEach(edge => {
|
||||
cmd.edges.push({
|
||||
source: edge.srcId,
|
||||
target: edge.dstId,
|
||||
label: edge.edgeName
|
||||
});
|
||||
});
|
||||
|
||||
_this.$refs['graph'].initGraph(cmd, true, null, true);
|
||||
});
|
||||
},
|
||||
queryData(fileItem) {
|
||||
let formData = new FormData();
|
||||
formData.append("file", fileItem);
|
||||
request({
|
||||
url: '/indicator/indicator8',
|
||||
method: 'put',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
let _questions = [];
|
||||
let _answers = [];
|
||||
if(res.data && res.data.items){
|
||||
res.data.items.forEach(item => {
|
||||
_questions.push({
|
||||
text: item.qu
|
||||
});
|
||||
_answers.push({
|
||||
text: item.an
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
_this.questions = _questions;
|
||||
_this.answers = _answers;
|
||||
_this.items = res.data && res.data.items ? res.data.items : [];
|
||||
_this.resultList = res.data && res.data.tj_result ? res.data.tj_result : [];
|
||||
});
|
||||
},
|
||||
initRchart() {
|
||||
if (chart == null) {
|
||||
chart = this.$echarts.init(document.getElementById("echart"));
|
||||
}
|
||||
let hits1 = [], hits2 = [], hits3 = [];
|
||||
_this.resultList.forEach(item => {
|
||||
hits1.push(item.hits1);
|
||||
hits2.push(item.hits2);
|
||||
hits3.push(item.hits3);
|
||||
});
|
||||
console.log(hits1, hits2, hits3);
|
||||
var option = {
|
||||
legend: {},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['一跳', '二跳']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'hits@1',
|
||||
data: hits1,
|
||||
type: 'bar'
|
||||
}, {
|
||||
name: 'hits@5',
|
||||
type: 'bar',
|
||||
data: hits2,
|
||||
}, {
|
||||
name: 'hits@10',
|
||||
type: 'bar',
|
||||
data: hits3,
|
||||
},
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.file-content {
|
||||
border: 1px solid #dcdddf;
|
||||
border-radius: 3px;
|
||||
overflow-y: auto;
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
line-height: 25px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
width: calc(100% - 20px);
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.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 25px;
|
||||
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: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-box {
|
||||
flex: 1;
|
||||
height: 500px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,185 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
辅助维修决策
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div class="recommend-content">
|
||||
<div class="recommend-title">装备维修信息检索主界面</div>
|
||||
<div class="recommed-tab">
|
||||
<label :class="active == 0?'tab-active':''" @click="selectTab(0)">信息汇聚</label>
|
||||
<label :class="active == 1?'tab-active':''" @click="selectTab(1)">知识检索</label>
|
||||
<label :class="active == 2?'tab-active':''" @click="selectTab(2)">故障定位</label>
|
||||
<label :class="active == 3?'tab-active':''" @click="selectTab(3)">维修推荐</label>
|
||||
</div>
|
||||
<div style="display: flex;width: 100%;margin-bottom: 30px">
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="keyword" style="flex: 1">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
<el-button type="primary" style="margin-left: 30px">图谱一下</el-button>
|
||||
</div>
|
||||
<div v-if="active == 0">
|
||||
<div class="graph-box">
|
||||
<graph ref="graph"></graph>
|
||||
</div>
|
||||
<div style="margin-top: 15px;text-align: center">信息汇聚子图</div>
|
||||
</div>
|
||||
<div v-if="active == 1" class="search-box">
|
||||
<div class="search-box-item" style="flex: 1"></div>
|
||||
<div class="search-box-item" style="width: 300px;margin-left: 20px">
|
||||
{h1,r1,t1}
|
||||
{h2,r2,t2}
|
||||
{h3,r3,t3}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="active == 2">
|
||||
<div class="graph-table-title">故障定位描述</div>
|
||||
<div class="graph-table-content">
|
||||
发动机故障标志亮灯的原因有：<br>
|
||||
1、水温、曲轴位置、空气流量、进气温度、氧传感器等这些传感器受损，接触不良或信号<br>
|
||||
中断时，ECU就不能准确获得发动机的数据，此时会引起发动机故障灯亮；<br>
|
||||
2、发动机保养不良；<br>
|
||||
3、没有按要求添加汽油和机油，造成发动机磨损等。<br>
|
||||
根据查询的描
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="active == 3">
|
||||
<div class="graph-table-title">维修推荐</div>
|
||||
<div class="graph-table-content">
|
||||
发动机故障灯亮的维修方法是：<br>
|
||||
1、更换氧气传感器；2、更换三元催化器；3、紧固或更换油箱盖；4、更换恒温器；5、更
|
||||
换点火线圈；6、更换空气流量传感器；7、按期保养，跟据车辆保养卡的时间周期，按期
|
||||
进行保养。发动机的作用是：将汽油、柴油的热能通过在密封气缸内燃烧后膨胀气体，推动
|
||||
活塞做功转变为机械能。发动机的保养方法是：1、定期更换机油及滤芯；2、使用合适质
|
||||
量等级的润滑油；3、定期清理水箱；4、定期空气滤清器、机油滤清器及汽油滤清器；5、
|
||||
保持曲轴箱通风良好定期清洗；6、定期清洗燃油系统
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
import graph from "@/components/graph/Graph";
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
components: {
|
||||
'graph': graph,
|
||||
},
|
||||
name: "graphRecommend",
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
active: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
let cmd = {
|
||||
path: '/noumenon/query_relation_by_ontologyid',
|
||||
qo: {
|
||||
ontologyId: 2
|
||||
}
|
||||
};
|
||||
_this.$refs['graph'].initGraph({
|
||||
nodes: [
|
||||
{id: "1", name: "type1", label: "节点1"},
|
||||
{id: "2", name: "type1", label: "节点2"}
|
||||
],
|
||||
edges: [
|
||||
{source: "1", target: "2", name: "type2", label: "关系1"}
|
||||
]
|
||||
}, true);
|
||||
},
|
||||
methods: {
|
||||
selectTab(index) {
|
||||
_this.active = index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.recommend-content {
|
||||
width: 65%;
|
||||
margin: 40px auto 0 auto;
|
||||
|
||||
.recommend-title {
|
||||
font-size: 30px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.recommed-tab {
|
||||
margin-top: 50px;
|
||||
|
||||
label {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
display: inline-block;
|
||||
padding: 0px 20px;
|
||||
margin-right: 10px;
|
||||
border-left: 1px solid #dcdddf;
|
||||
border-right: 1px solid #dcdddf;
|
||||
border-top: 1px solid #dcdddf;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
color: #ffffff;
|
||||
border-color: #409eff;
|
||||
background-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-box {
|
||||
border: 1px solid #dcdddf;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
|
||||
.search-box-item {
|
||||
height: 450px;
|
||||
border: 1px solid #dcdddf;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-table-title {
|
||||
width: calc(100% - 42px);
|
||||
background: rgba(250, 250, 250, 1);
|
||||
border: 1px solid #dcdddf;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.graph-table-content {
|
||||
border-left: 1px solid #dcdddf;
|
||||
border-right: 1px solid #dcdddf;
|
||||
border-bottom: 1px solid #dcdddf;
|
||||
padding: 20px 20px;
|
||||
line-height: 25px;
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,279 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
知识图谱关联
|
||||
</div>
|
||||
<div class="menu-content" style="display: inline-block">
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="12">
|
||||
<div>
|
||||
<label>请选择知识图谱：</label>
|
||||
<el-select v-model="activeSpaceName" placeholder="选择图谱">
|
||||
<el-option :label="item.name" :value="item.name" v-for="item in spaceList"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-descriptions class="margin-top desc2" :column="2" border>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">实体数量：</template>
|
||||
<label>{{ activeSpace.nodes }}</label>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">关系数量：</template>
|
||||
<label>{{ activeSpace.relations }}</label>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-upload
|
||||
style="float: right;margin: 15px 0;"
|
||||
ref="upload"
|
||||
class="upload-btn"
|
||||
:auto-upload="false"
|
||||
action="#"
|
||||
:on-change="handleFileChange"
|
||||
:limit="2"
|
||||
:show-file-list="false">
|
||||
<el-button type="primary">上传待关联文本数据集</el-button>
|
||||
</el-upload>
|
||||
<el-table :data="items" border class="text-table" height="300">
|
||||
<el-table-column type="index" width="50" label="序号"></el-table-column>
|
||||
<el-table-column prop="text" label="文本"></el-table-column>
|
||||
<el-table-column prop="el1Str" label="实体" width="200"></el-table-column>
|
||||
</el-table>
|
||||
<el-button type="primary" style="float:right;margin: 15px 0;" @click="startPredict">知识图谱关联</el-button>
|
||||
|
||||
<el-table :data="tableData" border class="text-table" height="300" @row-click="handleTableDataRowClick">
|
||||
<el-table-column type="index" width="50" label="序号"></el-table-column>
|
||||
<el-table-column prop="text" label="文本"></el-table-column>
|
||||
<el-table-column prop="el1Str" label="实体" width="200"></el-table-column>
|
||||
<el-table-column prop="el2Str" label="链接结果" width="200"></el-table-column>
|
||||
</el-table>
|
||||
<div class="result-label">准确率：{{ rate }}</div>
|
||||
|
||||
<el-descriptions title="" direction="vertical" :column="2" border id="menuContent">
|
||||
<el-descriptions-item label="实体链接结果" :span="2">
|
||||
<div class="result-el2-box">
|
||||
<el-tag v-for="tag in tags" style="margin-right: 5px;">{{ tag }}</el-tag>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="模式关联结果" :span="1" labelClassName="handle-des">
|
||||
<div class="graph-box" id="graph1">
|
||||
<graph ref="graph"></graph>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="信息汇聚结果" :span="1" labelClassName="handle-des2">
|
||||
<div class="graph-box" id="graph2">
|
||||
<graph ref="graph2"></graph>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
import graph from "@/components/graph/Graph";
|
||||
|
||||
var menuContentWidth;
|
||||
var _this;
|
||||
export default {
|
||||
components: {
|
||||
'graph': graph,
|
||||
},
|
||||
name: "graphRelation",
|
||||
data() {
|
||||
return {
|
||||
spaceList: [],
|
||||
activeSpace: '',
|
||||
activeSpaceName: '',
|
||||
items: [],
|
||||
tableData: [],
|
||||
tags: [],
|
||||
rateLabel: '',
|
||||
rate: '0%'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryPrepareData();
|
||||
menuContentWidth = document.getElementById("menuContent").offsetWidth;
|
||||
},
|
||||
methods: {
|
||||
handleTableDataRowClick(row) {
|
||||
_this.tags = row.el2;
|
||||
_this.initGraphData(_this.resolveData(row.model1));
|
||||
_this.initGraphData2(_this.resolveData(row.model2));
|
||||
},
|
||||
queryPrepareData() {
|
||||
request({
|
||||
url: '/indicator/indicator7_1',
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
if (res.data.length > 0) {
|
||||
_this.activeSpace = res.data[0]
|
||||
_this.activeSpaceName = res.data[0].name;
|
||||
}
|
||||
_this.spaceList = res.data;
|
||||
});
|
||||
},
|
||||
handleFileChange(item) {
|
||||
this.$refs.upload.clearFiles();
|
||||
_this.uploadFile(item.raw);
|
||||
},
|
||||
uploadFile(fileItem) {
|
||||
let formData = new FormData();
|
||||
formData.append("file", fileItem);
|
||||
request({
|
||||
url: '/indicator/indicator7',
|
||||
method: 'put',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
res.data.items.forEach(item => {
|
||||
item.el1Str = item.el1.toString();
|
||||
item.el2Str = item.el2.toString();
|
||||
});
|
||||
_this.items = res.data.items;
|
||||
_this.rateLabel = res.data.zql;
|
||||
});
|
||||
},
|
||||
startPredict() {
|
||||
if (_this.items.length == 0) {
|
||||
_this.$message.warning("请先上传待关联文本数据集");
|
||||
return false;
|
||||
}
|
||||
_this.$message.info("知识图谱关联开始");
|
||||
setTimeout(() => {
|
||||
_this.tableData = _this.items;
|
||||
_this.rate = _this.rateLabel;
|
||||
_this.$message.success("知识图谱关联成功");
|
||||
}, 1560);
|
||||
},
|
||||
resolveData({nodes, relations}) {
|
||||
let cmd = {
|
||||
nodes: [],
|
||||
edges: []
|
||||
};
|
||||
nodes.forEach(node => {
|
||||
cmd.nodes.push({
|
||||
id: node.vid,
|
||||
label: node.properties.name
|
||||
});
|
||||
});
|
||||
relations.forEach(edge => {
|
||||
cmd.edges.push({
|
||||
label: edge.edgeName,
|
||||
source: edge.srcId,
|
||||
target: edge.dstId,
|
||||
});
|
||||
});
|
||||
return cmd;
|
||||
},
|
||||
initGraphData(cmd) {
|
||||
_this.$nextTick(() => {
|
||||
document.getElementById("graph1").style.width = menuContentWidth / 2 - 20 + "px";
|
||||
_this.$refs['graph'].initGraph(cmd, true, null, true);
|
||||
});
|
||||
|
||||
},
|
||||
initGraphData2(cmd) {
|
||||
_this.$nextTick(() => {
|
||||
document.getElementById("graph2").style.width = menuContentWidth / 2 - 20 + "px";
|
||||
_this.$refs['graph2'].initGraph(cmd, true, null, true);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.result-label {
|
||||
padding: 15px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bottom-title {
|
||||
padding-top: 25px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.tool-box {
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
display: inline-block;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
.text-table {
|
||||
margin-top: 20px;
|
||||
|
||||
.el-table th.is-leaf {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.el-table__header {
|
||||
th {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.text-box {
|
||||
border: 1px solid #dcdddf;
|
||||
width: calc(100% - 40px);
|
||||
height: 350px;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
line-height: 25px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.text-title {
|
||||
width: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left-box {
|
||||
width: 50%;
|
||||
float: left;
|
||||
|
||||
.text-box-item {
|
||||
width: calc(90% - 1px);
|
||||
padding-right: 10%;
|
||||
border-right: 1px solid #c1c2c4;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
width: 50%;
|
||||
float: right;
|
||||
|
||||
.text-box-item {
|
||||
width: 90%;
|
||||
padding-left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.graph-box {
|
||||
height: 400px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,243 +0,0 @@
|
||||
<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>
|
||||
@@ -1,266 +0,0 @@
|
||||
<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>
|
||||
|
||||
|
||||
@@ -1,216 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
知识检索和问答
|
||||
</div>
|
||||
<div class="menu-content" style="display: inline-block;display: flex">
|
||||
<div style="width:30%;min-width:500px;">
|
||||
<div>
|
||||
<el-form :inline="true" :model="qo" class="demo-form-inline">
|
||||
<el-form-item label="">
|
||||
<el-select v-model="value" style="width: 300px" placeholder="选择图谱名">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item>-->
|
||||
<!-- <el-button type="primary" style="margin-left: 14px">选择图谱</el-button>-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
</div>
|
||||
<div >
|
||||
<el-input v-model="fileName" readonly style="width: 300px" disabled></el-input>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
class="upload-btn"
|
||||
:auto-upload="false"
|
||||
action="#"
|
||||
:on-change="handleFileChange"
|
||||
:limit="2"
|
||||
:show-file-list="false">
|
||||
<el-button type="primary">导入测试文件</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" style="margin-left: 150px;margin-top: 100px" @click="queryData()">开始测试</el-button>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<!--<el-input v-model="resultStr" readonly style="width: 80%" disabled></el-input>-->
|
||||
<div v-if="resultStr">{{resultStr}}</div>
|
||||
<!-- <div class="right-box" style="padding-left: 5%;width: 45%">-->
|
||||
<!-- <el-input v-model="keyword" placeholder="检索或问答内容" style="width: 300px"></el-input>-->
|
||||
<!-- <el-button type="primary" style="margin-left: 20px">开始检索</el-button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div style="width:70%;height: calc(100% - 80px)">
|
||||
<div class="left-box" style="width: 100%">
|
||||
|
||||
<div style="width: 96%;">
|
||||
<el-table :data="questions" style="width: 100%;" @row-click="handleTableRowClick">
|
||||
<el-table-column prop="qu" label="问题"></el-table-column>
|
||||
<el-table-column prop="hxan" label="知识检索或问答结果（Top-5）">
|
||||
<template slot-scope="scope">
|
||||
<!-- {{scope.row.hxan}}-->
|
||||
<p v-for="items in scope.row.hxan" :style=" items == scope.row.an ? 'color: red' : ''">{{items}}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="an" label="正确答案"></el-table-column>
|
||||
<el-table-column prop="loc" label="正确答案位置序号"></el-table-column>
|
||||
</el-table>
|
||||
<div class="page-box">
|
||||
<el-pagination background
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="qo.pageNo"
|
||||
:page-size="qo.pageSize"
|
||||
layout="total, prev, pager, next"
|
||||
:total="questionsAll.length">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="right-box">-->
|
||||
<!-- <div style="width: 90%;margin-left: 10%">-->
|
||||
<!-- <el-table :data="answerData" style="width: 100%;">-->
|
||||
<!-- <el-table-column prop="result" label="检索结果">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <label :style=" scope.row.result == activeRow.qa.Answer ? 'color: red' : ''">{{ scope.row.result }}</label>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
name: "graphQuestion",
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{name: "装备知识图谱"},
|
||||
],
|
||||
value: '',
|
||||
keyword: "",
|
||||
fileName: "",
|
||||
resultStr: "",
|
||||
qo: {
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
file:"",
|
||||
questionsAll: [],
|
||||
questions: [],
|
||||
answerData: [],
|
||||
activeRow: {
|
||||
qa: {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleFileChange(file) {
|
||||
this.$refs.upload.clearFiles();
|
||||
_this.fileName = file.raw.name;
|
||||
_this.file = file.raw;
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
_this.qo.pageNo = val;
|
||||
_this.questions = _this.questionsAll.slice((_this.qo.pageNo - 1) * 10, _this.qo.pageNo * 10);
|
||||
},
|
||||
handleTableRowClick(row, column, event) {
|
||||
let _answerData = [];
|
||||
row.entity.forEach(item => {
|
||||
_answerData.push({
|
||||
result: item
|
||||
});
|
||||
});
|
||||
_this.activeRow = row;
|
||||
_this.answerData = _answerData;
|
||||
},
|
||||
queryData() {
|
||||
let formData = new FormData();
|
||||
formData.append("file", _this.file);
|
||||
request({
|
||||
url: '/indicator/indicator9/dn_graph_one',
|
||||
method: 'put',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
var trueTotal = 0;
|
||||
res.data.items.map(data1 => {
|
||||
data1.hxan = JSON.parse(data1.hxan);
|
||||
if(data1.hxan.indexOf(data1.an) != -1){
|
||||
trueTotal ++;
|
||||
}
|
||||
})
|
||||
|
||||
_this.resultStr = "知识检索或问答结果 Top-5 准确率：" + res.data.zql.toFixed(2) + "%，正确条数："+trueTotal+"，总条数："+res.data.items.length;
|
||||
_this.questionsAll = res.data.items;
|
||||
_this.handleCurrentChange(1);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.upload-btn {
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.text-box {
|
||||
border: 1px solid #dcdddf;
|
||||
width: calc(100% - 40px);
|
||||
height: 550px;
|
||||
overflow-y: auto;
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
line-height: 25px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.text-title {
|
||||
width: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left-box {
|
||||
width: 50%;
|
||||
float: left;
|
||||
|
||||
.text-box-item {
|
||||
width: calc(90% - 1px);
|
||||
padding-right: 10%;
|
||||
border-right: 1px solid #c1c2c4;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
width: 50%;
|
||||
float: right;
|
||||
|
||||
.text-box-item {
|
||||
width: 90%;
|
||||
padding-left: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,567 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
模型管理
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div>
|
||||
<el-form :inline="true" :model="qo" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-input v-model="qo.LIKES_name" placeholder="请输入模型名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="qo.LIKES_name" placeholder="请输入算法名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="qo.pageNo=1;queryData()">搜 索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div style="margin: 0px 0 20px 0">
|
||||
<el-button type="primary" @click="createRow()">新增模型</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-table :data="result.records" style="width: 100%" ref="table">
|
||||
<el-table-column type="index" label="行号" width="100"></el-table-column>
|
||||
<el-table-column prop="name" label="模型名称"></el-table-column>
|
||||
<el-table-column prop="algorithmId" label="算法名称" :formatter="algorithmIdFormatter"></el-table-column>
|
||||
<!-- <el-table-column prop="version" label="版本"></el-table-column> -->
|
||||
<el-table-column prop="status" label="训练状态" :formatter="statusFormatter"></el-table-column>
|
||||
<el-table-column prop="modifyTimeMillis" label="修改时间">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.modifyTimeMillis | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTimeMillis" label="创建时间">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.createTimeMillis | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="220">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.native.prevent="trainRow(scope.row)" type="text" size="small" v-if="scope.row.status != 8">
|
||||
训练
|
||||
</el-button>
|
||||
<el-button type="text" size="small" v-if="scope.row.status == 8" style="color: #ccc;cursor: default" title="训练中">
|
||||
训练
|
||||
</el-button>
|
||||
<el-button @click.native.prevent="modifyRow(scope.row)" type="text" size="small" v-if="scope.row.status == 1">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click.native.prevent="removeRow(scope.row)" type="text" size="small" >
|
||||
删除
|
||||
</el-button>
|
||||
<br>
|
||||
<el-button @click.native.prevent="showLogDialog(scope.row)" type="text" size="small" v-if="scope.row.status == 8 || scope.row.status == 9">
|
||||
日志
|
||||
</el-button>
|
||||
<el-button @click.native.prevent="updateStatus(scope.row, 'stop')" type="text" size="small" v-if="scope.row.status == 8">
|
||||
停止
|
||||
</el-button>
|
||||
<!-- <el-button @click.native.prevent="updateStatus(scope.row, 'start')" type="text" size="small">
|
||||
重启
|
||||
</el-button> -->
|
||||
<el-button @click.native.prevent="publishService(scope.row)" type="text" size="small" v-if="scope.row.status == 9">
|
||||
发布服务
|
||||
</el-button>
|
||||
<el-button @click.native.prevent="testRow(scope.row)" type="text" size="small" v-if="scope.row.status == 9">
|
||||
测试
|
||||
</el-button>
|
||||
<!-- <template v-show="scope.row.status == 0">
|
||||
|
||||
</template> -->
|
||||
</template>
|
||||
</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>
|
||||
<el-dialog
|
||||
:title="dialogName"
|
||||
:visible.sync="cmdDialogVisible"
|
||||
width="40%">
|
||||
<el-form ref="cmd" label-width="100px" :rules="rules" :model="cmd">
|
||||
<el-form-item label="模型名称" prop="name">
|
||||
<el-input v-model="cmd.name" placeholder="请输入模型名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="算法" prop="algorithmId">
|
||||
<el-select v-model="cmd.algorithmId" placeholder="请选择算法">
|
||||
<el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in algorithmList"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="数据集" prop="name">-->
|
||||
<!-- <el-select v-model="cmd.name" placeholder="请选择数据集">-->
|
||||
<!-- <el-option label="" value=""></el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="cmd.modelRemark" placeholder="请输入描述" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cmdDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitModify">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="训练模型"
|
||||
:visible.sync="trainCmdDialogVisible"
|
||||
width="75%">
|
||||
<el-form ref="cmd" label-width="120px" :rules="rules" :model="cmd" v-loading="trainLoading" element-loading-text="程序启动中" :inline="true">
|
||||
<div class="title-form-box">公共配置</div>
|
||||
<el-form-item :label="item.name" v-for="item in cmd.publicPropert" :key="item.key">
|
||||
<el-input v-model="item.value" :placeholder="'请输入' + item.name"></el-input>
|
||||
</el-form-item>
|
||||
<div class="title-form-box">私有配置</div>
|
||||
<el-form-item :label="item.name" v-for="item in cmd.privatePropert" :key="item.key">
|
||||
<el-input v-model="item.value" :placeholder="'请输入' + item.name" ></el-input>
|
||||
</el-form-item>
|
||||
<div class="title-form-box">资源选择</div>
|
||||
<el-form-item label="指定显卡" prop="gpuId">
|
||||
<el-select v-model="cmd.gpuId" placeholder="请选择显卡">
|
||||
<el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in cmd.gpuInfoList"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据集" prop="dataSetId1">
|
||||
<el-select v-model="cmd.dataSetId1" placeholder="请选择数据集">
|
||||
<el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in dataSetList"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="trainCmdDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :disabled="trainLoading" @click="submitTrain">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="发布服务"
|
||||
:visible.sync="serverCmdDialogVisible"
|
||||
width="75%">
|
||||
<el-form ref="cmd" label-width="120px" :rules="rules" :model="cmd">
|
||||
<el-form-item :label="item.name" v-for="item in cmd.privatePropert" :key="item.key">
|
||||
<el-input v-model="item.value" :placeholder="'请输入' + item.name" ></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="serverCmdDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitPublishService">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="测试"
|
||||
:visible.sync="testCmdDialogVisible"
|
||||
destroy-on-close
|
||||
@close="handleTestDialogClose"
|
||||
width="40%">
|
||||
<el-form ref="cmd" label-width="100px" :rules="rules" :model="cmd" v-loading="testLoading">
|
||||
<el-form-item label="测试类型" prop="testType">
|
||||
<el-select v-model="cmd.testType" placeholder="请选择测试类型">
|
||||
<el-option label="单文本测试" value="text"></el-option>
|
||||
<el-option label="数据集测试" value="database"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="单文本测试" prop="text" v-if="cmd.testType == 'text'">
|
||||
<el-input v-model="cmd.text" placeholder="请输入所要测试的单文本"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据集测试" prop="dataSetId" v-if="cmd.testType == 'database'">
|
||||
<el-select v-model="cmd.dataSetId" placeholder="请选择数据集">
|
||||
<el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in dataSetList"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="log-title-box">服务日志</div>
|
||||
<log ref="log-item2" v-if="testSuccess"></log>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="testCmdDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitTest" :disabled="testLoading">开始测试</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="日志"
|
||||
:visible.sync="logDialogVisible"
|
||||
destroy-on-close
|
||||
@close="handleLogDialogClose"
|
||||
width="60%">
|
||||
<log ref="log-item"></log>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request2';
|
||||
import request1, {getBaseUrl} from '@/utils/request';
|
||||
import log from '@/components/log/index';
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
name: "modelManage",
|
||||
components: {
|
||||
log
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
qo: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
LIKES_name: '',
|
||||
},
|
||||
result: {
|
||||
records: [],
|
||||
total: 0
|
||||
},
|
||||
algorithmList: [],
|
||||
dialogName: '编辑',
|
||||
cmdDialogVisible: false,
|
||||
trainCmdDialogVisible: false,
|
||||
serverCmdDialogVisible: false,
|
||||
cmd: {
|
||||
dataSetId: '',
|
||||
dataSetId1: ''
|
||||
},
|
||||
testSuccess: false,
|
||||
testLoading: false,
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入模型名称'}
|
||||
],
|
||||
algorithmId: [
|
||||
{required: true, message: '请选择算法'}
|
||||
],
|
||||
gpuId: [
|
||||
{required: true, message: '请选择显卡'}
|
||||
],
|
||||
testType: [
|
||||
{required: true, message: '请选择测试类型'}
|
||||
],
|
||||
text: [
|
||||
{required: true, message: '请输入所要测试的单文本'}
|
||||
],
|
||||
dataSetId: [
|
||||
{required: true, message: '请选择数据集'}
|
||||
],
|
||||
dataSetId1: [
|
||||
{required: true, message: '请选择数据集'}
|
||||
],
|
||||
},
|
||||
testCmdDialogVisible: false,
|
||||
dataSetList: [],
|
||||
logDialogVisible: false,
|
||||
statusList: {
|
||||
1: '保存状态',
|
||||
2: '开始',
|
||||
3: '运行中',
|
||||
4: '等待中',
|
||||
5: '结束',
|
||||
6: '发布失败',
|
||||
7: '取消',
|
||||
8: '训练中',
|
||||
9: '训练完成'
|
||||
},
|
||||
trainLoading: false,
|
||||
modelId: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryData();
|
||||
_this.queryAlgorithmList();
|
||||
_this.queryDataSetList();
|
||||
},
|
||||
filters: {
|
||||
timeFilter(val) {
|
||||
if (val > 0) {
|
||||
let dt = new Date(val);
|
||||
let year = dt.getFullYear();
|
||||
let month = dt.getMonth() + 1;
|
||||
let date = dt.getDate();
|
||||
let hour = dt.getHours();
|
||||
let minute = dt.getMinutes();
|
||||
let second = dt.getSeconds();
|
||||
return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
|
||||
} else {
|
||||
return "-";
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
algorithmIdFormatter(row) {
|
||||
let index = _this.algorithmList.findIndex(dataSet => {
|
||||
return row.algorithmId == dataSet.id;
|
||||
});
|
||||
return index >= 0 ? _this.algorithmList[index].name : '-';
|
||||
},
|
||||
statusFormatter(row) {
|
||||
return _this.statusList[row.status] || '-';
|
||||
},
|
||||
queryDataSetList() {
|
||||
request1({
|
||||
url: '/remark_task/query_list',
|
||||
method: 'post',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.dataSetList = res.data;
|
||||
});
|
||||
},
|
||||
showLogDialog(row) {
|
||||
_this.logDialogVisible = true;
|
||||
_this.$nextTick(() => {
|
||||
_this.$refs['log-item'].init({modelId: row.id, type: 'log_train'});
|
||||
});
|
||||
},
|
||||
handleLogDialogClose() {
|
||||
_this.$refs['log-item'].close();
|
||||
},
|
||||
handleTestDialogClose() {
|
||||
_this.$refs['log-item2'].close();
|
||||
},
|
||||
queryAlgorithmList() {
|
||||
request({
|
||||
url: '/algorithm/list',
|
||||
method: 'post',
|
||||
data: {pageNo: 1, pageSize: 1000}
|
||||
}).then(res => {
|
||||
_this.algorithmList = res.list;
|
||||
});
|
||||
},
|
||||
queryData() {
|
||||
request({
|
||||
url: '/model/list',
|
||||
method: 'post',
|
||||
data: _this.qo
|
||||
}).then(res => {
|
||||
_this.result.records = res.list;
|
||||
_this.result.total = res.total;
|
||||
});
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
_this.qo.pageNo = val;
|
||||
_this.queryData();
|
||||
},
|
||||
removeRow(item) {
|
||||
_this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
request({
|
||||
url: '/model/remove',
|
||||
method: 'post',
|
||||
data: {
|
||||
id: item.id,
|
||||
}
|
||||
}).then(res => {
|
||||
_this.$message.success("删除成功");
|
||||
_this.queryData();
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
createRow() {
|
||||
_this.cmdDialogVisible = true;
|
||||
_this.$nextTick(() => {
|
||||
_this.dialogName = "新增";
|
||||
_this.cmd = {
|
||||
name: '',
|
||||
algorithmId: '',
|
||||
modelRemark: ''
|
||||
};
|
||||
_this.$refs.cmd.resetFields();
|
||||
});
|
||||
},
|
||||
trainRow(item) {
|
||||
let id = item.id;
|
||||
request({
|
||||
url: `/model/editTrainParameter/${id}`,
|
||||
method: 'post',
|
||||
}).then(res => {
|
||||
_this.cmd = res.data;
|
||||
_this.cmd.dataSetId = "";
|
||||
_this.trainLoading = false;
|
||||
_this.trainCmdDialogVisible = true;
|
||||
});
|
||||
|
||||
},
|
||||
testRow(item) {
|
||||
_this.testSuccess = false;
|
||||
_this.testCmdDialogVisible = true;
|
||||
_this.$nextTick(() => {
|
||||
_this.cmd = {
|
||||
testType: '',
|
||||
text: '',
|
||||
dataSetId: '',
|
||||
modelId: item.id
|
||||
};
|
||||
_this.$refs.cmd.resetFields();
|
||||
});
|
||||
},
|
||||
modifyRow(item) {
|
||||
_this.cmdDialogVisible = true;
|
||||
_this.$nextTick(() => {
|
||||
_this.dialogName = "编辑";
|
||||
_this.cmd = JSON.parse(JSON.stringify(item));
|
||||
_this.cmd.modifyTimeMillis = null;
|
||||
_this.$refs.cmd.resetFields();
|
||||
});
|
||||
},
|
||||
submitModify() {
|
||||
this.$refs.cmd.validate((valid) => {
|
||||
if (valid) {
|
||||
request({
|
||||
url: '/model/save',
|
||||
method: 'post',
|
||||
data: _this.cmd
|
||||
}).then(res => {
|
||||
_this.$message.success("新增成功");
|
||||
_this.queryData();
|
||||
_this.cmdDialogVisible = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
submitTrain() { // 提交训练
|
||||
if(_this.trainLoading) {
|
||||
return
|
||||
}
|
||||
this.$refs.cmd.validate((valid) => {
|
||||
if (valid) {
|
||||
_this.trainLoading = true;
|
||||
_this.cmd.dataSetUrl = getBaseUrl() + "/es_remark_task/findbytaskidandtasktypeall/" + _this.cmd.dataSetId1 + "/";
|
||||
|
||||
request({
|
||||
url: '/model/startTrain',
|
||||
method: 'post',
|
||||
data: _this.cmd
|
||||
}).then(res => {
|
||||
_this.$message.success("训练成功");
|
||||
_this.trainLoading = false;
|
||||
_this.queryData();
|
||||
_this.trainCmdDialogVisible = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
submitTest() { // 提交测试
|
||||
this.$refs.cmd.validate((valid) => {
|
||||
if (valid) {
|
||||
_this.testLoading = true;
|
||||
if (_this.cmd.testType == 'text') {
|
||||
request({
|
||||
url: '/model/singleTextTest',
|
||||
method: 'post',
|
||||
data: _this.cmd
|
||||
}).then(res => {
|
||||
_this.$message.success("测试成功");
|
||||
_this.testSuccess = true;
|
||||
_this.$nextTick(() => {
|
||||
_this.$refs['log-item2'].init({modelId: _this.cmd.modelId, type: 'test_single'});
|
||||
_this.testLoading = false;
|
||||
});
|
||||
});
|
||||
} else if (_this.cmd.testType == 'database') {
|
||||
let _cmd = JSON.parse(JSON.stringify(_this.cmd))
|
||||
_cmd.dataSetId = getBaseUrl() + "/es_remark_task/findbytaskidandtasktypeall/" + _cmd.dataSetId + "/";
|
||||
console.log(_cmd);
|
||||
request({
|
||||
url: '/model/dataSetTest',
|
||||
method: 'post',
|
||||
data: _cmd
|
||||
}).then(res => {
|
||||
_this.$message.success("测试成功");
|
||||
_this.testSuccess = true;
|
||||
_this.$nextTick(() => {
|
||||
_this.$refs['log-item2'].init({modelId: _this.cmd.modelId, type: 'log_test'});
|
||||
_this.testLoading = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
updateStatus(item, action) { // 修改状态，重启start，停止stop
|
||||
let text = action === 'start' ? '重启' : '停止';
|
||||
_this.$confirm(`此操作将执行${text}操作, 是否继续?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
request({
|
||||
url: '/model/update/status',
|
||||
method: 'post',
|
||||
data: {
|
||||
modelId: item.id,
|
||||
action: action
|
||||
}
|
||||
}).then(res => {
|
||||
_this.$message.success(`${text}成功`);
|
||||
_this.queryData();
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
publishService(item) { // 发布服务
|
||||
let id = item.id;
|
||||
_this.modelId = id;
|
||||
request({
|
||||
url: `/model/getServerPropert/${id}`,
|
||||
method: 'post',
|
||||
}).then(res => {
|
||||
_this.cmd.privatePropert = res.data;
|
||||
_this.serverCmdDialogVisible = true;
|
||||
});
|
||||
},
|
||||
submitPublishService(item) { // 发布服务
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '服务发布中',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
request({
|
||||
url: '/model/publishService',
|
||||
method: 'post',
|
||||
data: {
|
||||
modelId: _this.modelId,
|
||||
serverPropert: _this.cmd.privatePropert
|
||||
}
|
||||
}).then(res => {
|
||||
_this.$message.success(`发布成功`);
|
||||
loading.close();
|
||||
_this.serverCmdDialogVisible = false;
|
||||
_this.queryData();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.log-title-box {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.log-box {
|
||||
background-color: #c2c2c2;
|
||||
border-radius: 3px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.title-form-box {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,284 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
节点管理
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div>
|
||||
<el-form :inline="true" :model="qo" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-input v-model="qo.LIKES_name" placeholder="请输入节点名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="qo.LIKES_name" placeholder="请输入节点地址"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="qo.pageNo=1;queryData()">搜 索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div style="margin: 0px 0 20px 0">
|
||||
<el-button type="primary" @click="createRow()">新增节点</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-table :data="result.records" style="width: 100%" ref="table">
|
||||
<el-table-column type="index" label="行号" width="100"></el-table-column>
|
||||
<el-table-column prop="name" label="节点名称"></el-table-column>
|
||||
<el-table-column label="节点地址">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.host }}:{{ scope.row.port }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="modifyTimeMillis" label="修改时间">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.modifyTimeMillis | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTimeMillis" label="创建时间">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.createTimeMillis | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.native.prevent="showXtermDialog(scope.row)" type="text" size="small">
|
||||
终端
|
||||
</el-button>
|
||||
<el-button @click.native.prevent="modifyRow(scope.row)" type="text" size="small">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click.native.prevent="removeRow(scope.row)" type="text" size="small">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</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>
|
||||
<el-dialog
|
||||
:title="dialogName"
|
||||
:visible.sync="cmdDialogVisible"
|
||||
width="40%">
|
||||
<el-form ref="cmd" label-width="100px" :rules="rules" :model="cmd">
|
||||
<el-form-item label="节点名称" prop="name">
|
||||
<el-input v-model="cmd.name" placeholder="请输入节点名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="节点IP" prop="host">
|
||||
<el-input v-model="cmd.host" placeholder="请输入节点IP"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="节点端口" prop="port">
|
||||
<el-input v-model="cmd.port" placeholder="请输入节点端口"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="SSH账号" prop="user">
|
||||
<el-input v-model="cmd.user" placeholder="请输入SSH账号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="SSH密码" prop="password">
|
||||
<el-input v-model="cmd.password" placeholder="请输入SSH密码"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="Host密码" prop="name">-->
|
||||
<!-- <el-input v-model="cmd.name" placeholder="请输入Host密码"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="数据目录" prop="dataPath">
|
||||
<el-input v-model="cmd.dataPath" placeholder="请输入数据目录"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="超时时间">-->
|
||||
<!-- <el-date-picker-->
|
||||
<!-- v-model="cmd.time"-->
|
||||
<!-- type="datetime"-->
|
||||
<!-- placeholder="请选择超时时间">-->
|
||||
<!-- </el-date-picker>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="描述">-->
|
||||
<!-- <el-input v-model="cmd.description" placeholder="请输入描述" type="textarea"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cmdDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitModify">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="终端"
|
||||
:visible.sync="xtermDialogVisible"
|
||||
destroy-on-close
|
||||
@close="handleXtermDialogClose"
|
||||
width="60%">
|
||||
<xterm ref="xterm-item"></xterm>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request2';
|
||||
import xterm from '@/components/xterm/index';
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
name: "codeWarehouse",
|
||||
components: {
|
||||
xterm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
qo: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
LIKES_name: '',
|
||||
},
|
||||
result: {
|
||||
records: [],
|
||||
total: 0
|
||||
},
|
||||
dialogName: '编辑',
|
||||
cmdDialogVisible: false,
|
||||
cmd: {},
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入节点名称'}
|
||||
],
|
||||
host: [
|
||||
{required: true, message: '请输入节点IP'}
|
||||
],
|
||||
port: [
|
||||
{required: true, message: '请输入节点端口'}
|
||||
],
|
||||
user: [
|
||||
{required: true, message: '请输入SSH账号'}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入SSH密码'}
|
||||
],
|
||||
},
|
||||
xtermDialogVisible: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryData();
|
||||
},
|
||||
filters: {
|
||||
timeFilter(val) {
|
||||
if (val > 0) {
|
||||
let dt = new Date(val);
|
||||
let year = dt.getFullYear();
|
||||
let month = dt.getMonth() + 1;
|
||||
let date = dt.getDate();
|
||||
let hour = dt.getHours();
|
||||
let minute = dt.getMinutes();
|
||||
let second = dt.getSeconds();
|
||||
return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
|
||||
} else {
|
||||
return "-";
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
request({
|
||||
url: '/server/node/list',
|
||||
method: 'post',
|
||||
data: _this.qo
|
||||
}).then(res => {
|
||||
_this.result.records = res.list;
|
||||
_this.result.total = res.total;
|
||||
});
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
_this.qo.pageNo = val;
|
||||
_this.queryData();
|
||||
},
|
||||
removeRow(item) {
|
||||
_this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let id = item.id;
|
||||
request({
|
||||
url: `/server/node/delete/${id}`,
|
||||
method: 'post',
|
||||
}).then(res => {
|
||||
_this.$message.success("删除成功");
|
||||
_this.queryData();
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
createRow() {
|
||||
_this.cmdDialogVisible = true;
|
||||
_this.$nextTick(() => {
|
||||
_this.dialogName = "新增";
|
||||
_this.cmd = {
|
||||
"charset": "",
|
||||
"dataPath": "",
|
||||
"fileDirs": "",
|
||||
"host": "",
|
||||
"name": "",
|
||||
"notAllowedCommand": "",
|
||||
"password": "",
|
||||
"port": "",
|
||||
"user": ""
|
||||
};
|
||||
_this.$refs.cmd.resetFields();
|
||||
});
|
||||
},
|
||||
modifyRow(item) {
|
||||
_this.cmdDialogVisible = true;
|
||||
_this.$nextTick(() => {
|
||||
_this.dialogName = "编辑";
|
||||
_this.cmd = JSON.parse(JSON.stringify(item));
|
||||
_this.cmd.modifyTimeMillis = null;
|
||||
_this.$refs.cmd.resetFields();
|
||||
});
|
||||
},
|
||||
showXtermDialog(row) {
|
||||
_this.xtermDialogVisible = true;
|
||||
_this.$nextTick(() => {
|
||||
_this.$refs['xterm-item'].init(row.id);
|
||||
});
|
||||
},
|
||||
handleXtermDialogClose() {
|
||||
_this.$refs['xterm-item'].close();
|
||||
},
|
||||
submitModify() {
|
||||
this.$refs.cmd.validate((valid) => {
|
||||
if (valid) {
|
||||
if (_this.cmd.id) {
|
||||
request({
|
||||
url: '/server/node/update',
|
||||
method: 'post',
|
||||
data: _this.cmd
|
||||
}).then(res => {
|
||||
_this.$message.success("编辑成功");
|
||||
_this.queryData();
|
||||
_this.cmdDialogVisible = false;
|
||||
});
|
||||
} else { // 新建
|
||||
request({
|
||||
url: '/server/node/save',
|
||||
method: 'post',
|
||||
data: _this.cmd
|
||||
}).then(res => {
|
||||
_this.$message.success("新增成功");
|
||||
_this.queryData();
|
||||
_this.cmdDialogVisible = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -1,385 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
装备维修本体构建
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="15">
|
||||
<el-descriptions class="margin-top" title="本体信息统计" :column="2" border style="position: relative">
|
||||
<template slot="extra">
|
||||
<el-select v-model="ontologyId" placeholder="请选择图谱" @change="handleSelectChange"
|
||||
style="position: absolute;left:120px;top:-10px;">
|
||||
<el-option
|
||||
v-for="item in ontologyList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">本体名称：</template>
|
||||
<label>{{ ontology.name }}</label>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">概念数量：</template>
|
||||
<label>{{ ontologyCount.conceptc }}</label>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">本体版本：</template>
|
||||
<label>1.0</label>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">对象属性数量：</template>
|
||||
<label>{{ newNum.relationc }}</label>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">本体描述：</template>
|
||||
<label>构建了关于{{ontology.name}}的本体，包括{{ontologyCount.conceptc}}个概念和{{newNum.fieldc+newNum.relationc}}个属性</label>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">值属性数量：</template>
|
||||
<label>{{ newNum.fieldc }}</label>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div class="graph-box1">
|
||||
<graph ref="graph"></graph>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-descriptions class="margin-top desc2" title="本体元素浏览" :column="2" border>
|
||||
</el-descriptions>
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="概念">
|
||||
<div class="tree-box">
|
||||
<el-tree :data="treeData" :props="defaultProps"
|
||||
@node-click="handlePopShow"
|
||||
:expand-on-click-node="false">
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="对象属性">
|
||||
<el-table :data="edgeData" style="width: 100%" class="right-table">
|
||||
<el-table-column type="index" label="行号" width="80"></el-table-column>
|
||||
<el-table-column prop="relation" label="属性名"></el-table-column>
|
||||
<el-table-column prop="srccount" label="起点概念数量"></el-table-column>
|
||||
<el-table-column prop="dstcount" label="终点概念数量"></el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="值属性">
|
||||
<el-table :data="valueData" style="width: 100%" class="right-table">
|
||||
<el-table-column type="index" label="行号" width="80"></el-table-column>
|
||||
<el-table-column prop="comment" label="属性名"></el-table-column>
|
||||
<el-table-column prop="count" label="所属概念数量"></el-table-column>
|
||||
<el-table-column prop="type" label="值类型"></el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
@close="handlePopHide"
|
||||
width="400">
|
||||
<el-descriptions class="margin-top" :column="2" border style="margin-bottom: 15px">
|
||||
<el-descriptions-item label="概念名">{{ infoCmd.tagName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="概念描述">{{ infoCmd.label }}</el-descriptions-item>
|
||||
<el-descriptions-item label="次级概念数量">{{ edgeFieldCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="值属性数量">{{ fieldCount.length }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-table
|
||||
:data="fieldCount"
|
||||
height="300"
|
||||
style="width: 100%">
|
||||
<el-table-column prop="field" label="属性名"></el-table-column>
|
||||
<el-table-column prop="comment" label="名称"></el-table-column>
|
||||
<el-table-column prop="type" label="类型"></el-table-column>
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
import {listToTree} from '@/utils/common';
|
||||
import graph from "@/components/graph/Graph";
|
||||
|
||||
var _ = require('lodash');
|
||||
var _this;
|
||||
export default {
|
||||
components: {
|
||||
'graph': graph,
|
||||
},
|
||||
name: "noumenonModelImport",
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
fileList: [],
|
||||
edgeCount: 0,
|
||||
vertexCount: 0,
|
||||
qo: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
LIKES_name: '',
|
||||
EQI_sourceType: 1
|
||||
},
|
||||
nodes: [],
|
||||
edges: [],
|
||||
treeData: [], // 概念树形
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
edgeData: [],
|
||||
valueData: [],
|
||||
nodeInfo: {},
|
||||
fieldCount: [],
|
||||
edgeFieldCount: 0,
|
||||
ontologyList: [],
|
||||
ontologyId: '',
|
||||
ontology: {},
|
||||
ontologyCount: {
|
||||
"conceptc": "0",
|
||||
"relationc": "0",
|
||||
"fieldc": "0"
|
||||
},
|
||||
infoCmd: {
|
||||
tagName: '',
|
||||
label: ''
|
||||
},
|
||||
newNum:{
|
||||
"relationc": 0,
|
||||
"fieldc": 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryOntology();
|
||||
},
|
||||
methods: {
|
||||
handlePopHide() {
|
||||
_this.fieldCount = [];
|
||||
_this.edgeFieldCount = 0;
|
||||
},
|
||||
handlePopShow(row) {
|
||||
// console.log(row);
|
||||
_this.dialogVisible = true;
|
||||
request({
|
||||
url: `/ontology-concept/countchildbyid/${row.id}`,
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.edgeFieldCount = res.data;
|
||||
});
|
||||
request({
|
||||
url: `/nebula_model/findnodebyid/${_this.ontologyId}/${row.ownId}`,
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.infoCmd.tagName = _.get(res.data, "properties.tagName", '');
|
||||
_this.infoCmd.label = _.get(res.data, "properties.label", '');
|
||||
// _this.fieldCount = _.get(res.data, "properties.nebulafieldsnapshot", '');
|
||||
});
|
||||
request({
|
||||
url: `/nebula_model/findnebulafieldwithparents/${row.ownId}`,
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.fieldCount = res.data;
|
||||
});
|
||||
},
|
||||
queryOntology() {
|
||||
request({
|
||||
url: `/ontology/query_list`,
|
||||
method: 'post',
|
||||
data: {EQI_sourceType: 1}
|
||||
}).then(res => {
|
||||
_this.ontologyList = res.data;
|
||||
if (_this.ontologyList.length > 0) {
|
||||
_this.handleSelectChange(_this.ontologyList[0].id);
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSelectChange(ontologyId) {
|
||||
_this.ontologyId = ontologyId;
|
||||
let index = _this.ontologyList.findIndex(row => {
|
||||
return row.id === ontologyId;
|
||||
});
|
||||
if(index >= 0) {
|
||||
_this.ontology = _this.ontologyList[index];
|
||||
_this.queryCount();
|
||||
_this.queryIndicator2();
|
||||
_this.queryVertexTree();
|
||||
_this.queryGroupVertexEdgeCount();
|
||||
_this.queryData();
|
||||
} else {
|
||||
_this.$message.warning("数据异常");
|
||||
}
|
||||
|
||||
},
|
||||
queryCount() {
|
||||
request({
|
||||
url: '/ontology-concept/countallbyontologyid/' + _this.ontologyId,
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.ontologyCount = res.data;
|
||||
});
|
||||
},
|
||||
queryGroupVertexEdgeCount() {
|
||||
request({
|
||||
url: '/nebula_model/groupcountvexbyedgebyontologyid/' + _this.ontologyId,
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.edgeData = res.data;
|
||||
request({
|
||||
url: '/indicator/indicator2_kcrelation',
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.edgeData = _this.edgeData.concat(res.data);
|
||||
_this.newNum.relationc = _this.edgeData.length;
|
||||
});
|
||||
});
|
||||
},
|
||||
queryIndicator2() {
|
||||
request({
|
||||
url: '/nebula_model/groupfieldbyontologyid/' + _this.ontologyId,
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.valueData = res.data;
|
||||
request({
|
||||
url: '/indicator/indicator2_kcvalues',
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.valueData = _this.valueData.concat(res.data);
|
||||
_this.newNum.fieldc = _this.valueData.length;
|
||||
});
|
||||
});
|
||||
// request({
|
||||
// url: '/indicator/indicator2',
|
||||
// method: 'get',
|
||||
// data: {}
|
||||
// }).then(res => {
|
||||
// _this.valueData = res.data;
|
||||
// });
|
||||
},
|
||||
queryVertexTree() {
|
||||
request({
|
||||
url: '/ontology-concept/query_list/' + _this.ontologyId,
|
||||
method: 'post',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.treeData = listToTree(res.data, 'ownId');
|
||||
});
|
||||
// request({
|
||||
// url: '/nebula_model/findtreebyontologyid/' + _this.ontologyId,
|
||||
// method: 'post',
|
||||
// data: {}
|
||||
// }).then(res => {
|
||||
// res.data.nodes.forEach(node => {
|
||||
// node.label = node.properties.label || "-";
|
||||
// node.fieldCount = node.properties.nebulafieldsnapshot ? node.properties.nebulafieldsnapshot.length : 0;
|
||||
// });
|
||||
// _this.treeData = tripletToTree({
|
||||
// nodes: res.data.nodes,
|
||||
// relations: res.data.relations,
|
||||
// idName: 'vid',
|
||||
// sourceName: 'srcId',
|
||||
// targetName: 'dstId'
|
||||
// });
|
||||
// });
|
||||
},
|
||||
queryEdgeCount() { // 概念数量
|
||||
request({
|
||||
url: '/nebula_model/countedgesbyontologyid/' + _this.ontologyId,
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.edgeCount = res.data;
|
||||
});
|
||||
},
|
||||
queryVertexCount() { // 值属性数量
|
||||
request({
|
||||
url: '/nebula_model/countvertexsbyontologyid/' + _this.ontologyId,
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.vertexCount = res.data;
|
||||
});
|
||||
},
|
||||
queryData(fileItem) {
|
||||
request({
|
||||
url: '/nebula_model/findrelationbyontologyid/' + _this.ontologyId,
|
||||
method: 'post',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
let cmd = {
|
||||
nodes: [],
|
||||
edges: []
|
||||
};
|
||||
res.data.nodes.forEach(node => {
|
||||
cmd.nodes.push({
|
||||
id: node.vid,
|
||||
label: node.properties.label
|
||||
});
|
||||
|
||||
});
|
||||
res.data.relations.forEach(edge => {
|
||||
cmd.edges.push({
|
||||
source: edge.srcId,
|
||||
target: edge.dstId,
|
||||
label: edge.properties.label
|
||||
});
|
||||
});
|
||||
_this.$refs['graph'].initGraph(cmd, true, null, true);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.desc2 {
|
||||
.el-descriptions__title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.result {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
font-size: 16px;
|
||||
color: #5c5c5c;
|
||||
}
|
||||
|
||||
.tree-box {
|
||||
height: 615px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.right-table {
|
||||
height: 615px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.graph-box1 {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,351 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
事理图谱构建
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="10">
|
||||
<el-table :data="fileList" style="width: 100%" class="right-table">
|
||||
<el-table-column prop="name" label="文件名"></el-table-column>
|
||||
<el-table-column prop="size" label="文件大小"></el-table-column>
|
||||
<el-table-column prop="time" label="上传时间" width="150"></el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" style="float: left;margin-right: 5px" @click="clearData">清空数据</el-button>
|
||||
<el-upload
|
||||
style="float: left"
|
||||
class="upload-demo"
|
||||
action="#"
|
||||
multiple
|
||||
:auto-upload="false"
|
||||
:limit="3"
|
||||
:show-file-list="false"
|
||||
:on-change="handleFileChange"
|
||||
:file-list="fileList">
|
||||
<el-button type="text">上传数据</el-button>
|
||||
</el-upload>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pie-box">
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="12">
|
||||
<div id="pie1" class="pie-item"></div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div id="pie2" class="pie-item"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-table :data="resultList" style="width: 100%">
|
||||
<el-table-column prop="trigger" label="事件触发词识别"></el-table-column>
|
||||
<el-table-column prop="event_type" label="事件分类"></el-table-column>
|
||||
<el-table-column prop="relation" label="事件元素角色识别"></el-table-column>
|
||||
<!-- <el-table-column label="操作">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <el-button type="text" style="float: left;margin-right: 5px">抽取</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="14" class="graph-pa">
|
||||
<div class="graph-box">
|
||||
<graph ref="graph"></graph>
|
||||
</div>
|
||||
<el-card class="box-card-2" v-show="nodeInfoVisible">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>事理图谱节点属性</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" @click="nodeInfoVisible = false">关闭</el-button>
|
||||
</div>
|
||||
<el-descriptions class="margin-top" :column="2" border style="margin-bottom: 15px">
|
||||
<el-descriptions-item>
|
||||
<template slot="label">事件类型</template>
|
||||
{{ nodeInfo._label }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">触发词</template>
|
||||
{{ nodeInfo.label }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-table :data="nodeInfo.arguments" border style="width: 100%">
|
||||
<el-table-column prop="text" label="事件论元" ></el-table-column>
|
||||
<el-table-column prop="role" label="论元角色" ></el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
import graph from "@/components/graph/Graph";
|
||||
import {formatTime} from "@/utils/common";
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
components: {
|
||||
'graph': graph,
|
||||
},
|
||||
name: "reasonGraph",
|
||||
data() {
|
||||
return {
|
||||
originText: '',
|
||||
fileList: [
|
||||
{
|
||||
name: '暂无文件',
|
||||
size: '0',
|
||||
time: '-'
|
||||
}
|
||||
],
|
||||
resultList: [
|
||||
// {
|
||||
// trigger: '',
|
||||
// event_type: '',
|
||||
// relation: ''
|
||||
// }
|
||||
],
|
||||
nodeArguments: {},
|
||||
nodes: [],
|
||||
edges: [],
|
||||
nodeInfo: {
|
||||
arguments: [],
|
||||
label: '',
|
||||
_label: ''
|
||||
},
|
||||
nodeInfoVisible: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryData();
|
||||
},
|
||||
methods: {
|
||||
initRchart1(data) {
|
||||
let _data = [];
|
||||
data.forEach(item => {
|
||||
_data.push({
|
||||
name: item.name,
|
||||
value: item.count
|
||||
});
|
||||
});
|
||||
var chart = this.$echarts.init(document.getElementById("pie1"));
|
||||
var option = {
|
||||
title: {
|
||||
text: '事件类型',
|
||||
left: 'center',
|
||||
top: 30
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '事件类型',
|
||||
type: 'pie',
|
||||
radius: '60%',
|
||||
data: _data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
},
|
||||
initRchart2(data) {
|
||||
let _data = [];
|
||||
data.forEach(item => {
|
||||
_data.push({
|
||||
name: item.name,
|
||||
value: item.count
|
||||
});
|
||||
});
|
||||
var chart = this.$echarts.init(document.getElementById("pie2"));
|
||||
var option = {
|
||||
title: {
|
||||
text: '事理关系',
|
||||
left: 'center',
|
||||
top: 30
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '事理关系',
|
||||
type: 'pie',
|
||||
radius: '60%',
|
||||
data: _data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
},
|
||||
handleFileChange(file) {
|
||||
if(file.name != 'event_graph.json'){
|
||||
_this.$message.warning("上传文件不正确");
|
||||
return false;
|
||||
}
|
||||
_this.fileList = [file];
|
||||
_this.uploadFile(file);
|
||||
},
|
||||
uploadFile(file) {
|
||||
console.log(file);
|
||||
let formData = new FormData();
|
||||
formData.append("file", file.raw);
|
||||
request({
|
||||
url: '/indicator/indicator6',
|
||||
method: 'put',
|
||||
data: formData
|
||||
}).then(res => {
|
||||
_this.fileList = [
|
||||
{
|
||||
name: file.name,
|
||||
size: file.size + "kb",
|
||||
time: formatTime(new Date())
|
||||
}
|
||||
];
|
||||
_this.initRchart1(res.data.listmap1);
|
||||
_this.initRchart2(res.data.listmap2);
|
||||
let _map3 = res.data.map3;
|
||||
_this.resultList = [
|
||||
{
|
||||
trigger: _map3.sjcfclb,
|
||||
event_type: _map3.sjfl,
|
||||
relation: _map3.sjyslb
|
||||
}
|
||||
];
|
||||
_this.nodes = res.data.nodes;
|
||||
_this.edges = res.data.relations;
|
||||
_this.initGraphData();
|
||||
});
|
||||
},
|
||||
queryData(){
|
||||
request({
|
||||
url: '/indicator/indicator6_1',
|
||||
method: 'get',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.initRchart1(res.data.listmap1);
|
||||
_this.initRchart2(res.data.listmap2);
|
||||
let _map3 = res.data.map3;
|
||||
_this.resultList = [
|
||||
{
|
||||
trigger: _map3.sjcfclb,
|
||||
event_type: _map3.sjfl,
|
||||
relation: _map3.sjyslb
|
||||
}
|
||||
];
|
||||
_this.nodes = res.data.nodes;
|
||||
_this.edges = res.data.relations;
|
||||
_this.initGraphData();
|
||||
});
|
||||
},
|
||||
clearData() {
|
||||
_this.fileList = [
|
||||
{
|
||||
name: '暂无文件',
|
||||
size: '0',
|
||||
time: '-'
|
||||
}
|
||||
];
|
||||
_this.initRchart1([]);
|
||||
_this.initRchart2([]);
|
||||
_this.resultList = [];
|
||||
_this.nodes = [];
|
||||
_this.edges = [];
|
||||
_this.initGraphData();
|
||||
},
|
||||
clickNode(node) {
|
||||
let _arguments = _this.nodeArguments[node.id];
|
||||
_this.nodeInfo = {
|
||||
arguments: _arguments,
|
||||
label: node.label,
|
||||
_label: node._label
|
||||
};
|
||||
_this.nodeInfoVisible = true;
|
||||
},
|
||||
initGraphData() {
|
||||
let cmd = {
|
||||
nodes: [],
|
||||
edges: []
|
||||
};
|
||||
let nodeArguments = {};
|
||||
_this.nodes.forEach(node => {
|
||||
cmd.nodes.push({
|
||||
id: node.vid,
|
||||
label: node.properties.name,
|
||||
_label: node.labels
|
||||
});
|
||||
nodeArguments[node.vid] = node.properties.arguments;
|
||||
});
|
||||
_this.nodeArguments = nodeArguments;
|
||||
_this.edges.forEach(edge => {
|
||||
cmd.edges.push({
|
||||
source: edge.dstId,
|
||||
target: edge.srcId,
|
||||
label: edge.edgeName
|
||||
});
|
||||
});
|
||||
_this.$refs['graph'].initGraph(cmd, true, _this.clickNode ,true);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.result {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
font-size: 16px;
|
||||
color: #5c5c5c;
|
||||
}
|
||||
|
||||
.pie-box {
|
||||
height: 490px;
|
||||
|
||||
.pie-item {
|
||||
height: 480px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-box {
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph-pa {
|
||||
position: relative;
|
||||
.box-card-2 {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
top: 15%;
|
||||
bottom: 15%;
|
||||
overflow-y: auto;
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,425 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="menu-title">
|
||||
服务管理
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<div>
|
||||
<el-form :inline="true" :model="qo" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-input v-model="qo.LIKES_name" placeholder="请输入服务名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="qo.LIKES_name" placeholder="请输入模型名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="qo.pageNo=1;queryData()">搜 索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-table :data="result.records" style="width: 100%" ref="table">
|
||||
<el-table-column type="index" label="序号" width="100"></el-table-column>
|
||||
<el-table-column prop="name" label="服务名称"></el-table-column>
|
||||
<el-table-column prop="algorithmId" label="算法名称" :formatter="algorithmIdFormatter"></el-table-column>
|
||||
<!-- <el-table-column prop="version" label="版本"></el-table-column> -->
|
||||
<el-table-column prop="status" label="服务状态" :formatter="statusFormatter"></el-table-column>
|
||||
<el-table-column prop="url" label="接口地址"></el-table-column>
|
||||
<el-table-column prop="modifyTimeMillis" label="修改时间">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.modifyTimeMillis | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTimeMillis" label="创建时间">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.createTimeMillis | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small"
|
||||
@click.native.prevent="updateStatus(scope.row, 'start')" v-if="scope.row.status != 3">
|
||||
启动
|
||||
</el-button>
|
||||
<el-button @click.native.prevent="detailRow(scope.row)" type="text" size="small">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button @click.native.prevent="updateStatus(scope.row, 'stop')" type="text" size="small" v-if="scope.row.status == 3">
|
||||
停止
|
||||
</el-button>
|
||||
</template>
|
||||
</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>
|
||||
<el-dialog
|
||||
title="服务详情"
|
||||
:visible.sync="cmdDialogVisible"
|
||||
@close="handleLogDialogClose"
|
||||
width="60%">
|
||||
<el-form ref="cmd" label-width="80px" :rules="rules" :model="cmd">
|
||||
<el-form-item label="请求地址" prop="address">
|
||||
<el-input placeholder="请输入请求地址" v-model="cmd.address"
|
||||
disabled
|
||||
class="input-with-select" @input="change($event)">
|
||||
<el-select v-model="cmd.requestType" slot="prepend" placeholder="请选择" style="width: 100px;">
|
||||
<el-option label="POST" value="post"></el-option>
|
||||
<el-option label="GET" value="get"></el-option>
|
||||
<el-option label="PUT" value="put"></el-option>
|
||||
</el-select>
|
||||
<el-button slot="append" icon="el-icon-s-promotion" @click="submitHttp">发 送</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数">
|
||||
<el-table
|
||||
:data="params"
|
||||
ref="paramsTable"
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="参数类型">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.type" placeholder="请选择参数类型" :disabled="scope.row.isDisabled">
|
||||
<el-option label="Int" value="int"></el-option>
|
||||
<el-option label="Long" value="long"></el-option>
|
||||
<el-option label="Double" value="double"></el-option>
|
||||
<el-option label="String" value="string"></el-option>
|
||||
<el-option label="Boolean" value="boolean"></el-option>
|
||||
<el-option label="Float" value="float"></el-option>
|
||||
<el-option label="Date" value="date"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="key"
|
||||
label="参数名">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.key" placeholder="请输入参数名" :disabled="scope.row.isDisabled"
|
||||
@change="(val) => handleParamKeyChange(scope.row, val)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="value"
|
||||
label="参数值">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="scope.row.index == 1">
|
||||
<el-select v-model="scope.row.value" placeholder="请选择数据集">
|
||||
<el-option :label="item.name" :value="item.id" :key="item.id"
|
||||
v-for="item in dataSetList"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-if="scope.row.index != 1">
|
||||
<template v-if="scope.row.type == 'boolean'">
|
||||
<el-select v-model="scope.row.value" placeholder="请选择参数值">
|
||||
<el-option label="True" value="true"></el-option>
|
||||
<el-option label="False" value="false"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-if="scope.row.type == 'date'">
|
||||
<el-date-picker
|
||||
v-model="scope.row.value"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
</template>
|
||||
<template v-if="scope.row.type != 'date' && scope.row.type != 'boolean'">
|
||||
<el-input v-model="scope.row.value" placeholder="请输入参数值"></el-input>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item label="响应示例">
|
||||
<vue-json-editor
|
||||
v-model="resultJson"
|
||||
:mode="'code'"
|
||||
lang="zh"
|
||||
:show-btns="false"
|
||||
@json-change="onJsonChange"
|
||||
@json-save="onJsonSave"
|
||||
@has-error="onError"></vue-json-editor>
|
||||
</el-form-item>
|
||||
<div class="log-title-box">服务日志</div>
|
||||
<!-- <div class="log-box"></div>-->
|
||||
<log ref="log-item"></log>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request2';
|
||||
import request3 from '@/utils/request3';
|
||||
import vueJsonEditor from 'vue-json-editor';
|
||||
import log from '@/components/log/index';
|
||||
import request1, {getBaseUrl} from "@/utils/request";
|
||||
|
||||
var _this;
|
||||
export default {
|
||||
name: "serviceManage",
|
||||
components: {
|
||||
vueJsonEditor,
|
||||
log
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
qo: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
LIKES_name: '',
|
||||
},
|
||||
result: {
|
||||
records: [],
|
||||
total: 0
|
||||
},
|
||||
cmdDialogVisible: false,
|
||||
cmd: {
|
||||
address: ''
|
||||
},
|
||||
params: [],
|
||||
paramsSelection: [],
|
||||
resultJson: {
|
||||
msg: 'success of test',
|
||||
},
|
||||
rules: {
|
||||
address: [
|
||||
{required: true, message: '请输入请求地址'}
|
||||
],
|
||||
},
|
||||
algorithmList: [],
|
||||
statusList: {
|
||||
1: '保存状态',
|
||||
2: '开始',
|
||||
3: '运行中',
|
||||
4: '等待中',
|
||||
5: '结束',
|
||||
6: '发布失败',
|
||||
7: '取消',
|
||||
8: '训练中',
|
||||
9: '训练完成',
|
||||
10: '停止'
|
||||
},
|
||||
dataSetList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this;
|
||||
_this.queryData();
|
||||
_this.queryAlgorithmList();
|
||||
_this.queryDataSetList();
|
||||
},
|
||||
|
||||
filters: {
|
||||
timeFilter(val) {
|
||||
if (val > 0) {
|
||||
let dt = new Date(val);
|
||||
let year = dt.getFullYear();
|
||||
let month = dt.getMonth() + 1;
|
||||
let date = dt.getDate();
|
||||
let hour = dt.getHours();
|
||||
let minute = dt.getMinutes();
|
||||
let second = dt.getSeconds();
|
||||
return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
|
||||
} else {
|
||||
return "-";
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
queryDataSetList() {
|
||||
request1({
|
||||
url: '/remark_task/query_list',
|
||||
method: 'post',
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.dataSetList = res.data;
|
||||
});
|
||||
},
|
||||
statusFormatter(row) {
|
||||
return _this.statusList[row.status] || '-';
|
||||
},
|
||||
algorithmIdFormatter(row) {
|
||||
let index = _this.algorithmList.findIndex(dataSet => {
|
||||
return row.algorithmId == dataSet.id;
|
||||
});
|
||||
return index >= 0 ? _this.algorithmList[index].name : '-';
|
||||
},
|
||||
queryAlgorithmList() {
|
||||
request({
|
||||
url: '/algorithm/list',
|
||||
method: 'post',
|
||||
data: {pageNo: 1, pageSize: 1000}
|
||||
}).then(res => {
|
||||
_this.algorithmList = res.list;
|
||||
});
|
||||
},
|
||||
// 数据改变是触发
|
||||
onJsonChange(value) {
|
||||
// console.log('value:', value)
|
||||
},
|
||||
// 点击保存时触发
|
||||
onJsonSave(value) {
|
||||
// console.log('value:', value)
|
||||
},
|
||||
onError(value) {
|
||||
// console.log('value:', value)
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
_this.paramsSelection = val;
|
||||
},
|
||||
handleParamKeyChange(row) {
|
||||
if (_this.params.length == row.index) {
|
||||
_this.params.push({
|
||||
index: _this.params.length + 1,
|
||||
type: 'string',
|
||||
key: '',
|
||||
value: ''
|
||||
});
|
||||
_this.$refs.paramsTable.toggleRowSelection(_this.params[_this.params.length - 1]);
|
||||
}
|
||||
},
|
||||
queryData() {
|
||||
request({
|
||||
url: '/model/serviceList',
|
||||
method: 'post',
|
||||
data: _this.qo
|
||||
}).then(res => {
|
||||
_this.result.records = res.list;
|
||||
_this.result.total = res.total;
|
||||
});
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
_this.qo.pageNo = val;
|
||||
_this.queryData();
|
||||
},
|
||||
handleLogDialogClose() {
|
||||
_this.$refs['log-item'].close();
|
||||
},
|
||||
detailRow(item) {
|
||||
_this.cmdDialogVisible = true;
|
||||
_this.$nextTick(() => {
|
||||
_this.$refs['log-item'].init({modelId: item.id, type: 'log_service'});
|
||||
_this.cmd = JSON.parse(JSON.stringify(item));
|
||||
if (!_this.cmd.requestType) {
|
||||
_this.cmd.requestType = "post";
|
||||
}
|
||||
_this.$refs.cmd.resetFields();
|
||||
_this.cmd.address = item.url;
|
||||
_this.params = [
|
||||
{
|
||||
index: 1,
|
||||
type: 'string',
|
||||
key: 'dataSetUrl',
|
||||
value: '',
|
||||
isDisabled: true
|
||||
}, {
|
||||
index: 2,
|
||||
type: 'string',
|
||||
key: '',
|
||||
value: ''
|
||||
}
|
||||
];
|
||||
_this.$nextTick(() => {
|
||||
_this.$refs.paramsTable.toggleRowSelection(_this.params[0]);
|
||||
_this.$refs.paramsTable.toggleRowSelection(_this.params[1]);
|
||||
});
|
||||
|
||||
});
|
||||
},
|
||||
change(e) {
|
||||
_this.$forceUpdate(e);
|
||||
},
|
||||
submitHttp() {
|
||||
let params = "";
|
||||
for (let i = 0; i < _this.paramsSelection.length; i++) {
|
||||
let pa = _this.paramsSelection[i];
|
||||
if (pa.key.toString().length > 0 && pa.value.toString().length > 0) {
|
||||
params += i == 0 ? '?' : '&';
|
||||
if (pa.isDisabled) {
|
||||
params += (pa.key + "=" + getBaseUrl() + "/es_remark_task/findbytaskidandtasktypeall/" + pa.value + "/1");
|
||||
} else {
|
||||
params += (pa.key + "=" + pa.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
request3({
|
||||
url: _this.cmd.address + params,
|
||||
method: _this.cmd.requestType,
|
||||
data: {}
|
||||
}).then(res => {
|
||||
_this.$message.success('发送成功');
|
||||
_this.resultJson = res;
|
||||
});
|
||||
// console.log(_this.cmd);
|
||||
},
|
||||
updateStatus(item, action) { // 修改状态，重启start，停止stop
|
||||
let text = action === 'start' ? '启动' : '停止';
|
||||
_this.$confirm(`此操作将执行${text}操作, 是否继续?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: text+'中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
|
||||
request({
|
||||
url: '/server/update/status',
|
||||
method: 'post',
|
||||
data: {
|
||||
modelId: item.id,
|
||||
action: action
|
||||
}
|
||||
}).then(res => {
|
||||
_this.$message.success(`${text}成功`);
|
||||
loading.close();
|
||||
_this.queryData();
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.jsoneditor-vue {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
|
||||
.jsoneditor-poweredBy {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.log-title-box {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.log-box {
|
||||
background-color: #c2c2c2;
|
||||
border-radius: 3px;
|
||||
min-height: 300px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,171 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="xterm"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import request from '@/utils/request2';
|
||||
import {Terminal} from '../../utils/xterm/lib/xterm.js' //注意路径
|
||||
|
||||
var _this;
|
||||
var commandKey = [];
|
||||
var term;
|
||||
var socket;
|
||||
var sit;
|
||||
export default {
|
||||
name: "xterm",
|
||||
data() {
|
||||
return {
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
// created() {
|
||||
// let arr = ['../../utils/xterm/lib/xterm.js',
|
||||
// '../../utils/xterm-addon/lib/xterm-addon-attach.js'];
|
||||
// arr.map((item) => {
|
||||
// let script = document.createElement('script');
|
||||
// script.type = 'text/javascript';
|
||||
// script.src = item;
|
||||
// document.getElementsByTagName('body')[0].appendChild(script);
|
||||
// });
|
||||
// },
|
||||
mounted() {
|
||||
_this = this;
|
||||
// _this.init();
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
if(sit) {
|
||||
clearInterval(sit);
|
||||
}
|
||||
if(socket) {
|
||||
socket.close();
|
||||
}
|
||||
},
|
||||
init(id) {
|
||||
_this.id = id;
|
||||
console.log(`当前节点ID为${id}`);
|
||||
socket = new WebSocket(`ws://47.103.128.32:10050/socket/ssh?id=${id}&nodeId=${id}&type=ssh`);
|
||||
//连接打开事件
|
||||
socket.onopen = function () {
|
||||
console.log("Socket 已打开");
|
||||
};
|
||||
//收到消息事件
|
||||
socket.onmessage = function (msg) {
|
||||
term.write(msg.data);//把接收的数据写到这个插件的屏幕上
|
||||
if (msg.data.indexOf('连接成功，sessionId=') != -1) {
|
||||
var sessionId = msg.data.slice(15);
|
||||
console.log(sessionId)
|
||||
} else {
|
||||
console.log("常规数据：" + msg.data);
|
||||
}
|
||||
};
|
||||
//连接关闭事件
|
||||
socket.onclose = function () {
|
||||
console.log("Socket已关闭");
|
||||
};
|
||||
//发生了错误事件
|
||||
socket.onerror = function () {
|
||||
alert("Socket发生了错误");
|
||||
}
|
||||
term = new Terminal({
|
||||
rendererType: "canvas", //渲染类型
|
||||
rows: parseInt(24), //行数
|
||||
cols: parseInt(100), // 不指定行数，自动回车后光标从下一行开始
|
||||
convertEol: true, //启用时，光标将设置为下一行的开头
|
||||
scrollback: 10, //终端中的回滚量
|
||||
disableStdin: false, //是否应禁用输入
|
||||
cursorStyle: "underline", //光标样式
|
||||
cursorBlink: true, //光标闪烁
|
||||
theme: {
|
||||
foreground: "yellow", //字体
|
||||
background: "#060101", //背景色
|
||||
cursor: "help" //设置光标
|
||||
}
|
||||
});
|
||||
// const attachAddon = new AttachAddon(socket);
|
||||
// term.loadAddon(attachAddon);
|
||||
term.open(document.getElementById("xterm"));
|
||||
// 支持输入与粘贴方法
|
||||
term.onData(function (key) {
|
||||
// console.log("|"+key+"|");
|
||||
// commandKey.push(key);
|
||||
// console.log(commandKey);
|
||||
// term.write(key);
|
||||
socket.send(key); //转换为字符串
|
||||
});
|
||||
|
||||
term.onLineFeed(function () {
|
||||
console.log("执行换行" + JSON.stringify(commandKey))
|
||||
});
|
||||
|
||||
term.onTitleChange(function (key) {
|
||||
console.log("onTitleChange:" + key);
|
||||
});
|
||||
|
||||
//创建心跳，防止掉线
|
||||
sit = setInterval(() => {
|
||||
let op = {
|
||||
data: "heart",
|
||||
};
|
||||
sendJson(op);
|
||||
}, 5000);
|
||||
|
||||
runFakeTerminal();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function sendJson(data) {
|
||||
// 0 CONNECTING 连接尚未建立
|
||||
// 1 OPEN WebSocket的链接已经建立
|
||||
// 2 CLOSING 连接正在关闭
|
||||
// 3 CLOSED 连接已经关闭或不可用
|
||||
if(socket.readyState == 2 || socket.readyState == 3) {
|
||||
clearInterval(sit);
|
||||
sit = null;
|
||||
} else {
|
||||
socket.send(JSON.stringify(data));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function runFakeTerminal() {
|
||||
if (term._initialized) {
|
||||
return;
|
||||
}
|
||||
term._initialized = true;
|
||||
term.prompt = () => {
|
||||
term.write('\r\n~$ ');
|
||||
};
|
||||
term.writeln('Welcome to xterm.js');
|
||||
prompt(term);
|
||||
term.onKey(e => {
|
||||
const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
|
||||
if (e.domEvent.keyCode === 13) {
|
||||
prompt(term);
|
||||
} else if (e.domEvent.keyCode === 8) {
|
||||
// Do not delete the prompt
|
||||
if (term._core.buffer.x > 2) {
|
||||
// term.write('\b \b')
|
||||
}
|
||||
} else if (printable) {
|
||||
// term.write(e.key);
|
||||
}
|
||||
console.log(commandKey);
|
||||
console.log("key::" + e.domEvent.keyCode);
|
||||
});
|
||||
}
|
||||
|
||||
function prompt(term) {
|
||||
// term.write('\r\n~$ ');
|
||||
// term.focus();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../utils/xterm/css/xterm.css';
|
||||
</style>
|
||||
Reference in New Issue
Block a user