woka
/
kechengfuzhu
6
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity
Browse Source

图谱新增节点以及修改节点

zxm
zhangxiaomeng 1 year ago
parent
25c4a213b1
commit
72dbf817bc
8 changed files with 89 additions and 92 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      kcui/src/assets/defaultConfig.js
  2. BIN
      kcui/src/assets/img/circle1.png
  3. BIN
      kcui/src/assets/img/graphbg.png
  4. 10
      kcui/src/assets/js/graphvis.min.20241008.js
  5. 5
      kcui/src/components/Head.vue
  6. 159
      kcui/src/view/Graph.vue
  7. 2
      kcui/src/view/Mulu.vue
  8. 2
      kcui/src/view/SpInfoXq.vue

3
kcui/src/assets/defaultConfig.js
View File

@ -1,5 +1,6 @@
export const config = {
background:'40,47,183',
background:'255,255,255',
// background:'40,47,183',
node: { //节点的默认配置
label: { //标签配置
show: false, //是否显示

BIN
kcui/src/assets/img/circle1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
kcui/src/assets/img/graphbg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

10
kcui/src/assets/js/graphvis.min.20241008.js
View File

@ -4900,6 +4900,7 @@
ctx.beginPath();
ctx.rect(this.x, this.y, this.width, this.headerHeight);
ctx.closePath();
(ctx.fillStyle = `rgba(${this.headerColor},${this.headerAlpha})`),
ctx.fill();
var lineWidth = this.borderWidth;
@ -5087,13 +5088,15 @@
borderColor: null,
},
shape: "circle",
color: "30,160,255",
// color: "30,160,255,0.2",
color: "30,160,255,0.01",
borderColor: "20,20,20",
borderAlpha: 1,
borderAlpha: 10,
borderWidth: 0,
borderRadius: 0,
lineDash: [0],
alpha: 1,
alpha: 10,
size: 0,
width: 60,
height: 60,
@ -5433,6 +5436,7 @@
self.scene.add(node);
self.nodes.push(node);
nodeIdMapNode[n.id] = node;
});
var source, target, link;
(data.links || []).forEach(function (l) {

5
kcui/src/components/Head.vue
View File

@ -2,6 +2,8 @@
<div style="width: 100%;height: 8.8%;">
<img src="../assets/img/head.png" style="width: 100%;object-fit: contain;">
<div style="width: 5vw;height: 1.5vw;background-color: #0f75d5;text-align: center;font-size: 0.9vw;color: white;
line-height: 1.5vw;position: absolute;top: 2.5vw;right: 9vw;" @click="goMulu()">目录</div>
<div style="width: 5vw;height: 1.5vw;background-color: #0f75d5;text-align: center;font-size: 0.9vw;color: white;
line-height: 1.5vw;position: absolute;top: 2.5vw;right: 2.6vw;" @click="log()">退出登录</div>
</div>
@ -21,6 +23,9 @@ export default {
log(){
localStorage.clear();
this.$router.push('/')
},
goMulu(){
this.$router.push('/Mulu')
}
},
mounted() {

159
kcui/src/view/Graph.vue
View File

@ -1,6 +1,6 @@
<template>
<div style="width: 100%;height: 100%;">
<img style="width: 100%;height: 100%;position: absolute;z-index:-1;" src="../assets/img/twbg.png">
<img style="width: 100%;height: 100%;position: absolute;z-index:-1;" src="../assets/img/graphbg.png">
<headInfo></headInfo>
<!-- 这是内容界面 -->
<div class="content">
@ -38,7 +38,7 @@
</div>
<div class="rightContent">
<div style="color: white; margin:1vw 2vw 0vw 2vw;width: 100%;">
<div style="color: white; margin:3vw 2vw 0vw 2vw;width: 100%;">
<div style="width: 100%;display: flex;flex-direction: row;justify-content: space-around;">
<div style="width: 4vw;">关键字：</div>
@ -172,19 +172,19 @@
:on-remove="handleVideoRemove"
>
<div v-if="!videoFlag && showVideoPath" style="display: flex; flex-wrap: wrap; gap: 10px;">
<div v-for="(url, index) in showVideoPath.split(',')" :key="url"
style="position: relative; flex: 1 1 calc(33.333% - 20px); min-width: 200px; margin-bottom: 10px;">
<video :src="`${videoUpload.url2}${url}`" style="width:90%; height: auto;border-radius: 0.5vw;"
class="avatar video-avatar" controls>
您的浏览器不支持视频播放
</video>
<img
src="../assets/img/delete.png"
@click.stop="handleVideoRemove(videoFileList[index])"
style="width: 35px; height: 35px;position: absolute; top: 5px; left: 5px; cursor: pointer; z-index: 999;"
alt="删除"
/>
</div>
<!-- <div v-for="(url, index) in showVideoPath.split(',')" :key="url"-->
<!-- style="position: relative; flex: 1 1 calc(33.333% - 20px); min-width: 200px; margin-bottom: 10px;">-->
<video :src="showVideoPath" style="width:50%; height: auto;border-radius: 0.5vw;"
class="avatar video-avatar" controls>
您的浏览器不支持视频播放
</video>
<img
src="../assets/img/delete.png"
@click.stop="handleVideoRemove(videoFileList[0])"
style="width: 35px; height: 35px;position: absolute; top: 5px; left: 5px; cursor: pointer; z-index: 999;"
alt="删除"
/>
<!-- </div>-->
</div>
<el-progress :stroke-width="10" class="progressType" v-if="videoFlag"
type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
@ -217,8 +217,8 @@
title="修改分支内容"
:visible.sync="isModalVisible2"
append-to-body
top="2vw"
style="height: 70vw;"
top="1vh"
style="height: 55vw;"
custom-class="custom-dialog"
>
<el-form label-width="90px">
@ -236,10 +236,20 @@
<el-form-item label="节点名称">
<el-input v-model="editName"></el-input>
</el-form-item>
<el-form-item style="position: relative ;" label="节点内容" v-if="this.editType=='tw'">
<Editor v-model="this.editContent" style="height: 8vw;"></Editor>
<el-form-item style="position: relative ;margin-bottom: 5vw;" label="节点内容" v-if="this.editType=='tw'">
<Editor v-model="this.editContent" style="height: 6vw;"></Editor>
</el-form-item>
<el-form-item label="父级节点ID">
<el-input v-model="editParentId" disabled></el-input>
</el-form-item>
<el-form-item style="position: relative;margin-top: 5vw;" label="相关图片" v-if="this.editType=='tw'">
<el-form-item label="关系">
<el-input v-model="editRelation"
@input="editRelation = $event.target.value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')"></el-input>
</el-form-item>
<el-form-item label="层级">
<el-input-number v-model="editLeve" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item style="position: relative;" label="相关图片" v-if="this.editType=='tw'">
<el-upload
action="http://127.0.0.1:10031/fileUpdate/upload"
list-type="picture-card"
@ -271,9 +281,10 @@
>
<div v-if="!videoFlag && showVideoPath" style="display: flex; flex-wrap: wrap; gap: 10px;">
<div style="position: relative; flex: 1 1 calc(33.333% - 20px); min-width: 200px; margin-bottom: 10px;">
<div
style="position: relative; flex: 1 1 calc(33.333% - 20px); min-width: 200px; margin-bottom: 10px;">
<video :src="showVideoPath" style="width:90%; height: auto;border-radius: 0.5vw;"
<video :src="showVideoPath" style="width:50%; height: auto;border-radius: 0.5vw;"
class="avatar video-avatar" controls>
您的浏览器不支持视频播放
</video>
@ -293,16 +304,7 @@
</el-upload>
</el-form-item>
<el-form-item label="父级节点ID" >
<el-input v-model="editParentId" disabled></el-input>
</el-form-item>
<el-form-item label="关系">
<el-input v-model="editRelation"
@input="editRelation = $event.target.value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')"></el-input>
</el-form-item>
<el-form-item label="层级">
<el-input-number v-model="editLeve" controls-position="right" :min="1"></el-input-number>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="closeModal1">取 消</el-button>
@ -311,8 +313,6 @@
</el-dialog>
</div>
</div>
</div>
@ -326,7 +326,7 @@
import headInfo from '@/components/Head.vue';
import Foot from "@/components/Foot.vue";
import {editInfoGraph, getDocList, getInfo, getTwInfo} from "@/api/kcInfo";
import {getgraphInfo, test} from "@/api/login";
import {getgraphInfo} from "@/api/login";
import VisGraph from '@/assets/js/graphvis.min.20241008.js'
import LayoutFactory from '@/assets/js/graphvis.layout.min.js'
import {config} from '@/assets/defaultConfig.js'
@ -460,21 +460,17 @@ export default {
nodeInfo: {},
//修改
isModalVisible2:false,
fileList:[],
isModalVisible2: false,
fileList: [],
isUpload: 0,
editName:"",
editType:0,
editLeve:0,
editParentId:0,
editFileId:0,
editContent:0,
editRelation:"",
editName: "",
editType: 0,
editLeve: 0,
editParentId: 0,
editFileId: 0,
editContent: 0,
editRelation: "",
}
},
@ -692,25 +688,25 @@ export default {
}
getInfo(data).then((res) => {
console.log(res.data.data)
if(res.data.data.type==1){
if (res.data.data.type == 1) {
this.editType = "tw";
}
if(res.data.data.type==2){
if (res.data.data.type == 2) {
this.editType = "sp";
}
if(res.data.data.type==3){
if (res.data.data.type == 3) {
this.editType = "dh";
}
if(res.data.data.type==4){
if (res.data.data.type == 4) {
this.editType = "js";
}
this.editName = res.data.data.name;
this.editLeve = res.data.data.contentInfo;
this.editLeve = res.data.data.level;
this.editParentId = res.data.data.parentId;
this.editFileId = res.data.data.fileId;
this.editRelation = res.data.data.relation;
if(this.editType=='tw'){
if (this.editType == 'tw') {
this.editContent = res.data.data.contentInfo;
var imgs = res.data.data.imgList;
console.log(imgs)
@ -724,7 +720,7 @@ export default {
this.fileList.push(ii)
}
}
if(this.editType=='sp'){
if (this.editType == 'sp') {
console.log(res.data.data.spUrl)
this.videoFileList = [];
this.showVideoPath = "";
@ -738,16 +734,11 @@ export default {
});
},
async editSubmit() {
console.log("kjkjkkkjjkkjkj")
console.log(this.editType)
if (this.editType == 'tw') {
const content = this.editName.trim();
const value = this.editContent.trim();
const fileId = this.editFileId.trim();
const relation = this.editRelation.trim();
const content = this.editName
const value = this.editContent
const fileId = this.editFileId
const relation = this.editRelation
if (content) {
var urlStr = "";
@ -770,7 +761,7 @@ export default {
}
// 构造数据
const data = {
id:this.nodeInfo.docId,
id: this.nodeInfo.docId,
fileId: fileId,
name: content,
contentInfo: value,
@ -782,15 +773,16 @@ export default {
};
try {
editInfoGraph(data).then((res)=>{
editInfoGraph(data).then((res) => {
console.log(res);
this.isModalVisible2 = false;
})
// 刷新图谱
this.visGraph.drawData(this.graphData);
this.reLayout();
this.closeModal(); // 关闭模态框
this.isModalVisible = false;
// this.closeModal(); // 关闭模态框
} catch (error) {
console.error('Failed to add new branch:', error);
alert('Failed to add new branch. Please try again.');
@ -807,7 +799,7 @@ export default {
if (content) {
// 构造数据
const data = {
id:this.nodeInfo.docId,
id: this.nodeInfo.docId,
type: 2,
name: content,
relation: relation,
@ -817,14 +809,14 @@ export default {
};
try {
editInfoGraph(data).then((res)=>{
editInfoGraph(data).then((res) => {
console.log(res);
this.isModalVisible2 = false;
})
// 刷新图谱
this.visGraph.drawData(this.graphData);
this.reLayout();
this.closeModal(); // 关闭模态框
} catch (error) {
console.error('Failed to add new branch:', error);
alert('Failed to add new branch. Please try again.');
@ -835,7 +827,6 @@ export default {
},
//上传照片请
//照片墙
// 处理图片移除
@ -1081,25 +1072,21 @@ export default {
}
this.drawGraphData();
},
// color: '255,111,62',
getNodeStyle(group) {
const styles = [
{size: 450, color: '227,203,0', font: 'normal 70px Arial', fontColor: '255,255,255'},
{size: 350, width: 350, height: 300, color: '47,47,230', font: 'normal 68px Arial', fontColor: '255,255,255'},
{size: 300, width: 300, height: 250, color: '255,138,0', font: 'normal 50px Arial', fontColor: '255,255,255'},
{size: 250, width: 250, height: 250, color: '30,255,0', font: 'normal 40px Arial', fontColor: '0,0,0'},
{size: 200, width: 200, height: 200, color: '248,143,248', font: 'normal 32px Arial', fontColor: '255,255,255'},
{size: 150, width: 150, height: 150, color: '65,154,255', font: 'normal 30px Arial', fontColor: '255,255,255'},
{size: 120, width: 120, height: 120, color: '0,228,255', font: 'normal 28px Arial', fontColor: '0,0,0'}
{size: 450, width: 450, height: 450, color: '255,111,62', font: 'normal 68px Arial', fontColor: '255,255,255'},
{size: 350, width: 350, height: 350, color: '255,163,132', font: 'normal 68px Arial', fontColor: '255,255,255'},
{size: 300, width: 300, height: 300, color: '0,246,255', font: 'normal 50px Arial', fontColor: '0,0,0'},
{size: 250, width: 250, height: 250, color: '0,198,255', font: 'normal 40px Arial', fontColor: '0,0,0'},
{size: 200, width: 200, height: 200, color: '42,152,255', font: 'normal 32px Arial', fontColor: '255,255,255'},
{size: 150, width: 150, height: 150, color: '0,198,255', font: 'normal 30px Arial', fontColor: '0,0,0'},
{size: 130, width: 130, height: 130, color: '198,186,242', font: 'normal 28px Arial', fontColor: '0,0,0',strokeStyle:'198,186,242'}
];
return styles[group] || {};
},
testInfo() {
test().then((res) => {
console.log(res);
})
},
//视频相关
//视频
@ -1297,7 +1284,7 @@ export default {
margin-left: 2.6%;
margin-bottom: 5%;
border-radius: 1vw 1vw 1vw 1vw;
background-color: rgba(85, 174, 248, 0.22);
//background-color: rgba(85, 174, 248, 0.22);
}
.rightListContent {

2
kcui/src/view/Mulu.vue
View File

@ -33,7 +33,7 @@
</template>
<script>
import headInfo from "@/components/Head.vue";
import headInfo from "@/components/HeadMulu.vue";
import Foot from "@/components/Foot.vue";
export default {
// eslint-disable-next-line vue/multi-word-component-names

2
kcui/src/view/SpInfoXq.vue
View File

@ -14,7 +14,7 @@
<div class="muluBox">
<div class="muluList">
<div v-for="item in mulu" :key="item">
<div class="oneMuluXuan" v-if="item.name === '图文资源'">
<div class="oneMuluXuan" v-if="item.name === '视频资源'">
<img src="../assets/img/twCircle.png"
style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 7%;">
<div style="width: 55%;text-align: center;">

Write Preview
Loading…
Cancel
Save