|
|
@@ -1,11 +1,12 @@
|
|
|
<template>
|
|
|
- <el-dialog
|
|
|
- title="查看"
|
|
|
- :visible.sync="dialogVisible"
|
|
|
- width="700px"
|
|
|
- class="el-dialogClass"
|
|
|
- :before-close="handleClose"
|
|
|
- >
|
|
|
+ <el-dialog title="查看" :class="{ fullStyle: full }" :visible.sync="dialogVisible" width="700px" class="el-dialogClass"
|
|
|
+ :before-close="handleClose">
|
|
|
+ <div slot="title" class="header-title">
|
|
|
+ <div>查看</div>
|
|
|
+ <div class="full">
|
|
|
+ <img src="../../../../assets/fullScreen.png" alt="" @click="fullTools" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="container">
|
|
|
<div class="contentBox" v-loading="isLoading">
|
|
|
<div class="content rowCloumn">
|
|
|
@@ -39,7 +40,7 @@
|
|
|
</div>
|
|
|
<div class="nav">
|
|
|
<span :class="{ active: type == 1 }" @click="type = 1">切片</span>
|
|
|
- <!-- <span :class="{ active: type == 2 }" @click="type = 2">图谱</span> -->
|
|
|
+ <span :class="{ active: type == 2 }" @click="type = 2">图谱</span>
|
|
|
<span :class="{ active: type == 3 }" @click="type = 3">实体</span>
|
|
|
<span :class="{ active: type == 4 }" @click="type = 4">关系</span>
|
|
|
</div>
|
|
|
@@ -48,15 +49,8 @@
|
|
|
{{ item.text }}
|
|
|
</div>
|
|
|
<div class="noneData" v-if="!chunksArray.length">暂无获取切片数据</div>
|
|
|
- <el-pagination
|
|
|
- v-if="chunksArray.length > 0"
|
|
|
- style="margin-top: 10px"
|
|
|
- background
|
|
|
- layout="prev, pager, next"
|
|
|
- :page-size="limit"
|
|
|
- :total="total"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- >
|
|
|
+ <el-pagination v-if="chunksArray.length > 0" style="margin-top: 10px" background layout="prev, pager, next"
|
|
|
+ :page-size="limit" :total="total" @current-change="handleCurrentChange">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
<div class="chunkBox" v-show="type == 3" v-loading="entitiesLoading">
|
|
|
@@ -67,43 +61,26 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="noneData" v-if="!entitiesArray.length">暂无获取实体数据</div>
|
|
|
- <el-pagination
|
|
|
- v-if="entitiesArray.length > 0"
|
|
|
- style="margin-top: 10px"
|
|
|
- background
|
|
|
- layout="prev, pager, next"
|
|
|
- :page-size="limit2"
|
|
|
- :total="total2"
|
|
|
- @current-change="handleCurrentChange2"
|
|
|
- >
|
|
|
+ <el-pagination v-if="entitiesArray.length > 0" style="margin-top: 10px" background layout="prev, pager, next"
|
|
|
+ :page-size="limit2" :total="total2" @current-change="handleCurrentChange2">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
<div class="chunkBox" v-show="type == 4" v-loading="relationshipsLoading">
|
|
|
- <div
|
|
|
- class="chunks"
|
|
|
- v-for="(item, index) in relationshipsArray"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
+ <div class="chunks" v-for="(item, index) in relationshipsArray" :key="index">
|
|
|
<div class="chunksBox">
|
|
|
- <div><span class="title">关系：</span><span>{{ item.subject }} {{ item.predicate }} {{ item.object }}</span></div>
|
|
|
+ <div><span class="title">关系：</span><span>{{ item.subject }} {{ item.predicate }} {{ item.object }}</span>
|
|
|
+ </div>
|
|
|
<div><span class="title">描述：</span><span>{{ item.description }}</span></div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="noneData" v-if="!relationshipsArray.length">暂无获取关系数据</div>
|
|
|
- <el-pagination
|
|
|
- v-if="relationshipsArray.length > 0"
|
|
|
- style="margin-top: 10px"
|
|
|
- background
|
|
|
- layout="prev, pager, next"
|
|
|
- :page-size="limit3"
|
|
|
- :total="total3"
|
|
|
- @current-change="handleCurrentChange3"
|
|
|
- >
|
|
|
+ <el-pagination v-if="relationshipsArray.length > 0" style="margin-top: 10px" background
|
|
|
+ layout="prev, pager, next" :page-size="limit3" :total="total3" @current-change="handleCurrentChange3">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
- <div class="tuBox" v-show="type == 2">
|
|
|
- <div class="noneData">暂无获取图谱数据</div>
|
|
|
- <graph :Json="graphJson"></graph>
|
|
|
+ <div class="tuBox" v-show="type == 2" v-loading="graphLoading">
|
|
|
+ <div v-if="!Object.keys(graphJson).length" class="noneData">暂无获取图谱数据</div>
|
|
|
+ <graph v-if="Object.keys(graphJson).length" :Json="graphJson"></graph>
|
|
|
</div>
|
|
|
</div>
|
|
|
<span slot="footer">
|
|
|
@@ -140,12 +117,14 @@ export default {
|
|
|
page3: 1,
|
|
|
relationshipsArray: [],
|
|
|
relationshipsLoading: false,
|
|
|
- graphJson: {}
|
|
|
+ graphJson: {},
|
|
|
+ graphLoading: false,
|
|
|
+ full: false,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
getState() {
|
|
|
- return function(item) {
|
|
|
+ return function (item) {
|
|
|
if (item == "success") {
|
|
|
return "成功";
|
|
|
} else if (item == "failed") {
|
|
|
@@ -164,7 +143,7 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
getState2() {
|
|
|
- return function(item) {
|
|
|
+ return function (item) {
|
|
|
if (item == "success") {
|
|
|
return "成功";
|
|
|
} else if (item == "failed") {
|
|
|
@@ -330,49 +309,112 @@ export default {
|
|
|
lines
|
|
|
};
|
|
|
},
|
|
|
+ fullTools() {
|
|
|
+ this.full = !this.full
|
|
|
+ },
|
|
|
+ transformData(data) {
|
|
|
+ const nodes = [];
|
|
|
+ const lines = [];
|
|
|
+
|
|
|
+ // 构建节点
|
|
|
+ const nodeMap = new Map();
|
|
|
+
|
|
|
+ data.results.forEach(item => {
|
|
|
+ const subject = item.subject;
|
|
|
+ const object = item.object;
|
|
|
+
|
|
|
+ if (!nodeMap.has(subject)) {
|
|
|
+ nodeMap.set(subject, { id: subject, text: subject, data: {} });
|
|
|
+ nodes.push(nodeMap.get(subject));
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!nodeMap.has(object)) {
|
|
|
+ nodeMap.set(object, { id: object, text: object, data: {} });
|
|
|
+ nodes.push(nodeMap.get(object));
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加关系线
|
|
|
+ lines.push({
|
|
|
+ from: subject,
|
|
|
+ to: object
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ return {
|
|
|
+ rootId: (nodes.length > 0 ? nodes[0].id : 'root'),
|
|
|
+ nodes: nodes,
|
|
|
+ lines: lines
|
|
|
+ };
|
|
|
+ },
|
|
|
setGrapJson() {
|
|
|
- this.graphJson = {
|
|
|
- rootId: "a",
|
|
|
- nodes: [
|
|
|
- { id: "a", text: "Border color", borderColor: "yellow" },
|
|
|
- { id: "a1", text: "No border", borderColor: "yellow" },
|
|
|
- { id: "a2", text: "Plain", borderColor: "yellow" },
|
|
|
- { id: "a1-1", borderColor: "yellow" },
|
|
|
- { id: "b", text: "b", borderColor: "yellow" },
|
|
|
- { id: "c", text: "c", borderColor: "yellow" }
|
|
|
- ],
|
|
|
- lines: [
|
|
|
- { from: "a", to: "b" },
|
|
|
- { from: "a", to: "c" },
|
|
|
- { from: "a", to: "a1" },
|
|
|
- { from: "a1", to: "a1-1" },
|
|
|
- { from: "a", to: "a2" }
|
|
|
- ]
|
|
|
+ this.graphLoading = true;
|
|
|
+ let params = {
|
|
|
+ documentId: this.did,
|
|
|
+ limit: 100,
|
|
|
};
|
|
|
+ // 获取切片
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.fileApi + "getRelationships", [params])
|
|
|
+ .then(res => {
|
|
|
+ this.graphLoading = false;
|
|
|
+ console.log(res.data);
|
|
|
+ if (res.data.result.results.length) {
|
|
|
+ console.log(this.transformData(res.data.result));
|
|
|
+ this.graphJson = this.transformData(res.data.result)
|
|
|
+ }else {
|
|
|
+ this.graphJson = {}
|
|
|
+ }
|
|
|
+ // this.graphJson = {
|
|
|
+ // rootId: "a",
|
|
|
+ // nodes: [
|
|
|
+ // { id: "a", text: "Border color", borderColor: "yellow" },
|
|
|
+ // { id: "a1", text: "No border", borderColor: "yellow" },
|
|
|
+ // { id: "a2", text: "Plain", borderColor: "yellow" },
|
|
|
+ // { id: "a1-1", borderColor: "yellow" },
|
|
|
+ // { id: "b", text: "b", borderColor: "yellow" },
|
|
|
+ // { id: "c", text: "c", borderColor: "yellow" }
|
|
|
+ // ],
|
|
|
+ // lines: [
|
|
|
+ // { from: "a", to: "b" },
|
|
|
+ // { from: "a", to: "c" },
|
|
|
+ // { from: "a", to: "a1" },
|
|
|
+ // { from: "a1", to: "a1-1" },
|
|
|
+ // { from: "a", to: "a2" }
|
|
|
+ // ]
|
|
|
+ // };
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.graphLoading = false;
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.el-dialogClass >>> .el-dialog {
|
|
|
+.el-dialogClass>>>.el-dialog {
|
|
|
margin: 0 auto !important;
|
|
|
height: calc(100% - 100px);
|
|
|
transform: translateY(-50%);
|
|
|
top: 50%;
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
-.el-dialogClass >>> .el-dialog__header{
|
|
|
+
|
|
|
+.el-dialogClass>>>.el-dialog__header {
|
|
|
padding: 20px 30px 10px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
-.el-dialogClass >>> .el-dialog__body {
|
|
|
+
|
|
|
+.el-dialogClass>>>.el-dialog__body {
|
|
|
height: calc(100% - 70px - 55px);
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
box-sizing: border-box;
|
|
|
padding: 0 20px;
|
|
|
}
|
|
|
+
|
|
|
.container {
|
|
|
height: 100%;
|
|
|
padding: 0 10px;
|
|
|
@@ -383,6 +425,7 @@ export default {
|
|
|
.contentBox {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.rowCloumn {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
@@ -390,7 +433,8 @@ export default {
|
|
|
.rowCloumn .text {
|
|
|
margin-top: 8px;
|
|
|
}
|
|
|
-.contentBox > .content {
|
|
|
+
|
|
|
+.contentBox>.content {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
font-size: 15px;
|
|
|
@@ -399,10 +443,9 @@ export default {
|
|
|
border-bottom: 1px solid #f3f3f3;
|
|
|
}
|
|
|
|
|
|
-.contentBox > .content > .title {
|
|
|
-}
|
|
|
+.contentBox>.content>.title {}
|
|
|
|
|
|
-.contentBox > .content > .text {
|
|
|
+.contentBox>.content>.text {
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
|
|
|
@@ -419,7 +462,7 @@ export default {
|
|
|
color: #a3a3a3;
|
|
|
}
|
|
|
|
|
|
-.nav > span {
|
|
|
+.nav>span {
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -429,7 +472,7 @@ export default {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
-.nav > span.active {
|
|
|
+.nav>span.active {
|
|
|
background: #fff;
|
|
|
color: #000;
|
|
|
}
|
|
|
@@ -455,17 +498,41 @@ export default {
|
|
|
line-height: 20px;
|
|
|
}
|
|
|
|
|
|
-.chunks + .chunks {
|
|
|
+.chunks+.chunks {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
-.chunksBox{
|
|
|
+.chunksBox {}
|
|
|
|
|
|
-}
|
|
|
+.chunksBox>div {}
|
|
|
+
|
|
|
+.chunksBox>div>span {}
|
|
|
|
|
|
-.chunksBox > div{}
|
|
|
-.chunksBox > div > span{}
|
|
|
-.chunksBox > div > span.title{
|
|
|
+.chunksBox>div>span.title {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
+
|
|
|
+.fullStyle>>>.el-dialog,
|
|
|
+.fullStyle {
|
|
|
+ width: 100% !important;
|
|
|
+ max-width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ margin: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.header-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.header-title .full {
|
|
|
+ height: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.header-title .full img {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
</style>
|
