跳转

kcui/src/view/Graph.vue

@@ -2,6 +2,12 @@
   <div style="width: 100%;height: 100%;">
     <div style="width: 100%;height: 4vw;background-color: #42b983;">
       <div style="background-color: silver;width: 3vw;height: 2vw;line-height: 2vw;text-align: center;" @click="goBook">跳转1</div>
+      <div class="stText">关键字:</div>
+      <input class="stInput" placeholder="请输入关键字" v-model="keywords"/>
+      <div @click="getInfo"
+           style="width: 4vw;height: 2vw;margin-left:0.2vw;background-color: #0AB7FD;float: right;font-size: 1vw;line-height: 2vw;text-align: center;border-radius:2vw;margin-top: 0.1vw;">
+        查询
+      </div>
     </div>
     <div style="width: 100%;height: 80%;">
       <div class="gContainer">
@@ -9,35 +15,50 @@
       </div>
     </div>
 
-
-
-
     <!-- 弹窗 -->
-    <div v-if="isModalVisible" style="height: 5vw;width: 100%;"  class="modal-overlay" @click.self="closeModal">
-      <div class="modal-content">
-        <h3>请输入分支内容</h3>
-        <label for="fileId">fileId:</label>
-        <input type="text" id="fileId" v-model="newBranchFileId" />
-
-        <label for="txtName">节点名称:</label>
-        <input type="text" id="txtName" v-model="newBranchContent" />
-
-        <label for="TxtValue">节点内容:</label>
-        <textarea id="TxtValue" v-model="newBranchValue"></textarea>
-
-        <label for="parentId">父级节点ID:</label>
-        <input type="text" id="parentId" v-model="newBranchParentId" />
-
-        <label for="relation">关系:</label>
-        <input type="text" id="relation" v-model="newBranchRelation"
-               @input="newBranchRelation = $event.target.value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')" />
+    <el-dialog
+        :visible.sync="isModalVisible"
+        title="添加分支内容"
+        width="30%"
+        top="15vh"
+        append-to-body
+        custom-class="custom-dialog"
+    >
+      <el-form label-width="80px">
+        <el-form-item label="fileId">
+          <el-input v-model="newBranchFileId"></el-input>
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-select v-model="typeValue" placeholder="请选择类型">
+            <el-option label="图文" value="tw"></el-option>
+            <el-option label="视频" value="sp"></el-option>
+            <el-option label="动画" value="dh"></el-option>
+            <el-option label="计算模块" value="jsmk"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="节点名称">
+          <el-input v-model="newBranchContent"></el-input>
+        </el-form-item>
+        <el-form-item label="节点内容">
+          <el-input type="textarea" v-model="newBranchValue"></el-input>
+        </el-form-item>
+        <el-form-item label="父级节点ID">
+          <el-input v-model="newBranchParentId" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="关系">
+          <el-input v-model="newBranchRelation"
+                    @input="newBranchRelation = $event.target.value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')"></el-input>
+        </el-form-item>
+        <el-form-item label="层级">
+          <el-input-number v-model="newBranchLevel" controls-position="right" :min="1"></el-input-number>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeModal">取 消</el-button>
+        <el-button type="primary" @click="addNewBranch">提 交</el-button>
+      </span>
+    </el-dialog>
 
-        <label for="level">层级:</label>
-        <input type="number" id="level" v-model="newBranchLevel" />
-
-        <button @click="addNewBranch">提交</button>
-      </div>
-    </div>
   </div>
 
 </template>
@@ -46,15 +67,15 @@ import {getgraphInfo, test} 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'
-import {addNode} from "@/api/file";
+import {addNode, getFileIdByDocId} from "@/api/file";
 
 export default {
   // eslint-disable-next-line vue/multi-word-component-names
-  name: 'Graph',
+  name: 'Home',
   data() {
-    return{
-       infos:[],
-      demoData:{},
+    return {
+      infos: [],
+      demoData: {},
       graphData: {
         nodes: [],
         links: []
@@ -69,23 +90,46 @@ export default {
       newBranchFileId: '',
       newBranchLevel: null,
       newBranchParentId: '',
-      newBranchRelation:''
-
+      newBranchRelation: '',
+      typeValue: '',
+      keywords: '',
     }
   },
-  methods:{
-    goBook(){
-      this.$router.push({name:'Book',query: {id:'1'}})
+  methods: {
+    goBook() {
+      this.$router.push({name: 'Book', query: {id: '1'}})
     },
     onCreated(editor) {
       this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
     },
-    getInfo(){
-      var data = {}
-      getgraphInfo(data).then((res)=>{
-        this.zhengl(res.data);
+    // getInfo(){
+    //   var data = {}
+    //   getgraphInfo(data).then((res)=>{
+    //     this.zhengl(res.data);
+    //
+    //   })
+    // },
+    getInfo() {
+
+      this.data = undefined;
+      if (this.keywords != '' && this.keywords != undefined) {
+        this.visGraph.clearAll();
+        let params = {
+          nodename: this.keywords,
+        };
+        getgraphInfo(params).then((res) => {
+          this.zhengl(res.data);
+        })
+      } else {
+
+        let params = {};
+
+        getgraphInfo(params).then((res) => {
+          this.zhengl(res.data);
+        })
+      }
+
 
-      })
     },
     async drawGraphData() {
       this.graphData = this.demoData;
@@ -122,14 +166,27 @@ export default {
       };
       this.visGraph = new VisGraph(document.getElementById('graph-panel'), configWithEvents);
     },
-    showPopup(node) {
+    async showPopup(node) {
       console.log("o----------")
       console.log(node)
       this.selectedNode = node;
       this.newBranchParentId = node.properties.docId;
-      this.newBranchLevel = parseInt(node.properties.level)  + 1;
+      this.newBranchLevel = parseInt(node.properties.level) + 1;
+
+      try {
+        const response = await this.getFileIdByDocId({docId: node.properties.docId});
+        this.newBranchFileId = response.fileId;
+      } catch (error) {
+        console.error('Failed to fetch file ID:', error);
+        alert('无法获取文件ID，请稍后再试。');
+        return;
+      }
+
       this.isModalVisible = true; // 显示模态框
     },
+    getFileIdByDocId(data) {
+      return getFileIdByDocId(data);
+    },
     closeModal() {
       this.isModalVisible = false;
       this.newBranchContent = '';
@@ -160,7 +217,7 @@ export default {
           const newNode = {
             id: newNodeId,
             label: content,
-            properties: { name: content, docId: newNodeId, level: this.newBranchLevel },
+            properties: {name: content, docId: newNodeId, level: this.newBranchLevel},
             ...this.getNodeStyle(this.newBranchLevel) // 根据层级应用样式
           };
           const newLink = {
@@ -234,7 +291,7 @@ export default {
       var allOne = ""
 
       console.log(nodeList)
-      if(nodeList!=undefined){
+      if (nodeList != undefined) {
         allOne = nodeList[0].docId
         for (let a = 0; a < nodeList.length; a++) {
           const group = parseInt(nodeList[a].group, 10);
@@ -243,7 +300,7 @@ export default {
           nodes.push({
             id: nodeList[a].id,
             label: nodeList[a].name,
-            properties: { name: nodeList[a].name, docId: nodeList[a].docId, parent: allOne, leve: nodeList[a].group },
+            properties: {name: nodeList[a].name, docId: nodeList[a].docId, parent: allOne, leve: nodeList[a].group},
             ...style // 展开 style 对象以应用样式属性
           });
         }
@@ -252,7 +309,7 @@ export default {
       // var allOne = nodeList[0].docId
 
 
-      if(lineList!=undefined){
+      if (lineList != undefined) {
         for (let b = 0; b < lineList.length; b++) {
 
           var bbb = {name: lineList[b].relate}
@@ -276,34 +333,28 @@ export default {
     },
     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: 100, width: 100, height: 100, color: '0,228,255', font: 'normal 28px Arial', fontColor: '0,0,0' }
+        {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: 100, width: 100, height: 100, color: '0,228,255', font: 'normal 28px Arial', fontColor: '0,0,0'}
       ];
 
       return styles[group] || {};
     },
-    // doLogin(){
-    //   userLogin().then((res)=>{
-    //     console.log(res);
-    //     this.testInfo();
-    //     this.getInfo();
-    //   })
-    // },
     testInfo(){
       test().then((res)=>{
         console.log(res);
       })
     }
+
   },
-  mounted() {
-        this.testInfo();
-        this.getInfo();
 
+  mounted() {
+    this.testInfo();
+    this.getInfo();
   }
 }
 </script>