操作/知识图谱/bug修改

package.json

@@ -66,6 +66,7 @@
     "markdown-it": "^14.1.0",
     "markdown-it-highlightjs": "^4.2.0",
     "mavon-editor": "^2.9.1",
+    "neo4j-driver": "^5.28.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "ofd-xml-parser": "^0.0.2",
@@ -82,9 +83,11 @@
     "sm-crypto": "^0.3.2",
     "sortablejs": "1.8.4",
     "spark-md5": "^3.0.2",
+    "swiper": "^5.4.5",
     "v-viewer": "^1.6.4",
     "vkbeautify": "^0.99.3",
     "vue": "^2.6.14",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-count-to": "^1.0.13",
     "vue-cropper": "0.4.9",
     "vue-demi": "^0.14.7",

src/api/archivesManage/library.js

@@ -127,6 +127,14 @@ export function FetchOfflineTransferConfirm(data) {
   })
 }
 
+// 根据档案获得操作记录
+export function FetchArchivesOperateLog(params) {
+  return request({
+    url: 'api/control/getArchivesOperateLog' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
+
 export default {
   FetchInitContorlView,
   FetchPrintData,
@@ -142,5 +150,6 @@ export default {
   FetchArchivesReturnConfirm,
   FetchTransferConfirm,
   FetchOfflineTransferConfirm,
-  FetchHandBusinessFlowDetails
+  FetchHandBusinessFlowDetails,
+  FetchArchivesOperateLog
 }

src/neo4j.js

@@ -0,0 +1,48 @@
+import neo4j from 'neo4j-driver'
+
+const driver = neo4j.driver(
+  'bolt://192.168.99.107:7687',
+  neo4j.auth.basic('neo4j', 'ftzn83560792')
+)
+
+export async function getGraphData() {
+  const session = driver.session()
+  console.log('session', session)
+  try {
+    const result = await session.run('MATCH (n)-[r]->(m) RETURN n, r, m')
+    // const result = await session.run('MATCH (n)-[r]->(m) RETURN n, r, m LIMIT 25')
+
+    const nodes = []
+    const edges = []
+    console.log('result', result)
+    result.records.forEach(record => {
+      const sourceNode = record.get('n')
+      console.log('sourceNode', sourceNode)
+      const targetNode = record.get('m')
+      console.log('targetNode', targetNode)
+      const relationship = record.get('r')
+      console.log('relationship', relationship)
+
+      // 添加节点
+      if (!nodes.some(node => node.id === sourceNode.identity.low)) {
+        // nodes.push({ id: sourceNode.identity.low, label: sourceNode.labels[0] })
+        nodes.push({ id: sourceNode.identity.low, text: sourceNode.properties.title, type: sourceNode.labels[0] })
+      }
+      if (!nodes.some(node => node.id === targetNode.identity.low)) {
+        // nodes.push({ id: targetNode.identity.low, label: targetNode.labels[0] })
+        nodes.push({ id: targetNode.identity.low, text: targetNode.properties.title, type: targetNode.labels[0] })
+      }
+
+      // 添加边
+      edges.push({ from: sourceNode.identity.low, to: targetNode.identity.low, text: relationship.type })
+    })
+    console.log(nodes, edges)
+    return { nodes, edges }
+  } finally {
+    await session.close()
+  }
+}
+
+export function closeDriver() {
+  driver.close()
+}

src/views/AIAssistant/AIKeywords/index.vue

@@ -79,19 +79,25 @@
                     </div>
                   </template>
                 </el-table-column>
+                <el-table-column prop="file_status" label="是否解析" width="100" align="center">
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.file_status === 0" class="row-state row-physical ">未解析</span>
+                    <span v-else class="row-state row-binding state-active">已解析</span>
+                  </template>
+                </el-table-column>
                 <el-table-column prop="file_status" label="是否标注" width="100" align="center">
                   <template slot-scope="scope">
                     <span v-if="scope.row.file_status === 0" class="row-state row-physical ">未标注</span>
                     <span v-else class="row-state row-binding state-active">已标注</span>
                   </template>
                 </el-table-column>
-                <el-table-column prop="file_status" label="操作" align="center" width="80">
+                <!-- <el-table-column prop="file_status" label="操作" align="center" width="80">
                   <template slot-scope="scope">
                     <div class="handle-btn">
                       <el-button class="iconfont icon-huoqu" @click.stop="handlePickUp(scope.row)" />
                     </div>
                   </template>
-                </el-table-column>
+                </el-table-column> -->
               </el-table>
             </div>
             <div class="pickUp-right">
@@ -143,11 +149,78 @@
         </div>
       </div>
     </div>
+
+    <el-dialog class="aiFile-dialog" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :before-close="handleClose" :visible="aiFileVisible" title="文件内容">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <!-- <div class="ai-file-content" /> -->
+
+        <swiper
+          ref="mySwiper"
+          class="swiper-server"
+          :options="swiperOptionServer"
+          :auto-update="true"
+          :auto-destroy="true"
+          :delete-instance-on-destroy="true"
+          :cleanup-styles-on-destroy="true"
+        >
+          <swiper-slide class="swiper-slide-server">
+            <div class="aiImg">
+              <img src="@/assets/images/test/1.png">
+            </div>
+            <div class="aiText">
+              <div v-if="isTxtEditing">
+                <textarea ref="textareaRef" v-model="text" style="height: 620px; width: calc(100% - 20px); padding: 10px; border: 1px solid #545b65;  line-height: 26px; outline: none; resize: none;" @blur="toggleEdit(false)" />
+              </div>
+              <div v-else>
+                <p style=" height: 640px; overflow-y: scroll; line-height: 26px;" @click="toggleEdit(true)">{{ text }}</p>
+              </div>
+            </div>
+          </swiper-slide>
+          <swiper-slide class="swiper-slide-server">
+            <div class="aiImg">
+              <img src="~@/assets/images/test/2.png">
+            </div>
+            <div class="aiText">
+              dddd
+            </div>
+          </swiper-slide>
+          <swiper-slide class="swiper-slide-server">
+            <div class="aiImg">
+              <img src="~@/assets/images/test/3.png">
+            </div>
+            <div class="aiText">
+              dddd<br>
+            </div>
+          </swiper-slide>
+          <swiper-slide class="swiper-slide-server">
+            <div class="aiImg">
+              <img src="~@/assets/images/test/4.png">
+            </div>
+            <div class="aiText">
+              444
+            </div>
+          </swiper-slide>
+          <div slot="button-prev" class="swiper-button-prev" />
+          <div slot="button-next" class="swiper-button-next" />
+        </swiper>
+
+        <div slot="footer" class="dialog-footer">
+          <!-- :loading="crud.status.cu === 2"  -->
+          <el-button type="text" @click="aiFileVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitEditAi">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
 import crudCategory from '@/api/system/category/category'
 import CRUD, { presenter, header } from '@crud/crud'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+
 const data = [
   {
     'file_path': '/category//09A6ECD967BCC772DABB2F.txt',
@@ -303,7 +376,7 @@ const data = [
 
 export default {
   name: 'AIKeywords',
-  components: { },
+  components: { swiper, swiperSlide },
   cruds() {
     return [
       CRUD({
@@ -336,10 +409,24 @@ export default {
       reloadKey: 0,
       aiLoadingPick: false,
       currentRow: {},
-      selectedItems: []
+      selectedItems: [],
+      aiFileVisible: false,
+      swiperOptionServer: {
+        autoplay: false,
+        allowTouchMove: false,
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
+      },
+      text: '# 这是可编辑的多行文本\n第二行文本',
+      isTxtEditing: false
     }
   },
   computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper
+    }
   },
   created() {
     this.isEditing = this.keywords.map(() => false)
@@ -347,6 +434,15 @@ export default {
   mounted() {
   },
   methods: {
+    toggleEdit(editing) {
+      this.isTxtEditing = editing
+      if (editing) {
+        // 当进入编辑状态时，聚焦到文本域
+        this.$nextTick(() => {
+          this.$refs.textareaRef.focus()
+        })
+      }
+    },
     // 处理编辑图标点击事件
     handleEdit(index) {
       this.$set(this.isEditing, index, true)
@@ -505,6 +601,7 @@ export default {
     },
     // table
     clickRowHandler(row) {
+      this.aiFileVisible = true
       this.isPickUp = false
       this.$refs.table.clearSelection()
       this.$refs.table.toggleRowSelection(row)
@@ -518,8 +615,8 @@ export default {
         this.keywords = []
       }
     },
-    handlePickUp(row) {
-      this.currentRow = row
+    handlePickUp() {
+      // this.currentRow = row
       this.aiPickData = []
       this.isPickUp = true
       this.aiLoadingPick = true
@@ -556,6 +653,13 @@ export default {
           this.$set(this.tableData, rowIndex, { ...this.tableData[rowIndex], file_status: 1 })
         }
       }
+    },
+    submitEditAi() {
+      this.aiFileVisible = false
+      this.handlePickUp()
+    },
+    handleClose() {
+      this.aiFileVisible = false
     }
   }
 }
@@ -628,4 +732,37 @@ export default {
     top: -5px;
   }
 }
+
+.aiFile-dialog{
+  ::v-deep .el-dialog{
+    width: 1400px !important;
+  }
+  ::v-deep .swiper-server{
+    .swiper-slide-server{
+      display: flex;
+      justify-content: space-between;
+      height: 650px;
+      .aiImg{
+        width: 800px;
+        overflow: hidden;
+        overflow-y: scroll;
+        // border: 1px solid #000;
+        img{
+          display: block;
+          width: 100%;
+          // height: 100%;
+        }
+      }
+      .aiText{
+        flex: 1;
+        padding:0 10px;
+        // overflow: hidden;
+        // overflow-y: scroll;
+        // padding-left: 10px;
+        // border-left: 1px solid #000;
+      }
+    }
+  }
+}
+
 </style>

src/views/archivesManage/managementLibrary/juannei/index.vue

@@ -234,6 +234,7 @@ export default {
       this.arcId = row.id
       this.$nextTick(() => {
         this.$refs.archivesInfo.isHasFile = true
+        this.$refs.archivesInfo.isFourTest = true
         this.$refs.archivesInfo.detailTitle = '卷内详情'
         this.$refs.archivesInfo.archivesInfoVisible = true
         this.$refs.archivesInfo.archivesTabIndex = 0

src/views/archivesManage/managementLibrary/module/archivesInfo/index.vue

@@ -40,7 +40,7 @@
           </pre>
         </div>
         <FourTestInfo v-show="archivesTabIndex===3" ref="fourTestInfoRefs" />
-        <HandleInfo v-if="archivesTabIndex===4" />
+        <HandleInfo v-show="archivesTabIndex===4" ref="handleInfoRefs" />
         <ArchivesListModule v-show="archivesTabIndex===5" ref="archivesListModuleRef" :selected-category="selectedCategory" :is-title-type="isTitleType" :is-collect="isCollect" />
       </div>
     </div>
@@ -155,6 +155,10 @@ export default {
         console.log(this.$refs.fourTestInfoRefs)
         this.$refs.fourTestInfoRefs.currentArcId = this.arcId
         this.$refs.fourTestInfoRefs.getFourCheckRecord(this.arcId)
+      } else if (this.archivesTabIndex === 4) {
+        console.log(this.$refs.handleInfoRefs)
+        this.$refs.handleInfoRefs.currentArcId = this.arcId
+        this.$refs.handleInfoRefs.getArchivesOperateLog(this.arcId)
       } else if (this.archivesTabIndex === 5) {
         if (this.isTitleType === 2) {
           this.$refs.archivesListModuleRef.detailLevel = 2

src/views/archivesManage/managementLibrary/module/handleInfo/index.vue

@@ -1,19 +1,24 @@
 <template>
   <!--档案详情-操作记录-->
   <div class="fourTest-container">
-    <el-table :data="tableData" style="min-width: 100%" height="calc(100vh - 440px)">
-      <el-table-column prop="type" label="操作类型" min-width="60" />
-      <el-table-column prop="isAgree" label="处理意见" min-width="60" />
-      <el-table-column prop="admin" label="处理人" min-width="60" />
-      <el-table-column prop="createTime" label="处理时间" min-width="180">
+    <el-table class="archives-table" :data="tableData" style="min-width: 100%" height="calc(100vh - 440px)">
+      <el-table-column prop="operateType" label="操作类型" min-width="60" align="center">
         <template slot-scope="scope">
-          <div>{{ scope.row.createTime | parseTime }}</div>
+          <span class="row-state row-packing state-active">{{ getOperateTypeText(scope.row.operateType) }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="remark" label="备注" min-width="60" />
+      <el-table-column prop="opinion" label="处理意见" min-width="60" />
+      <el-table-column prop="update_by" label="处理人" min-width="60" />
+      <el-table-column prop="update_time" label="处理时间" min-width="180">
+        <template slot-scope="scope">
+          <div>{{ scope.row.update_time | parseTime }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="remarks" label="备注" min-width="60" />
     </el-table>
     <!--分页组件-->
     <el-pagination
+      v-if="tableData.length !== 0"
       :current-page="page.page"
       :total="page.total"
       :page-size="page.size"
@@ -26,35 +31,40 @@
 </template>
 
 <script>
-const data = [
-  {
-    'id': '005E76FEC5A2AAB368CA1F',
-    'admin': 'admin',
-    'type': '预归档新增',
-    'isAgree': '同意',
-    'createTime': 1660706815000,
-    'remark': ''
-  },
-  {
-    'id': '005E76FEC5A2AAB368CA1F2',
-    'admin': 'admin',
-    'type': '装盒',
-    'isAgree': '拒绝',
-    'createTime': 1660706815000,
-    'remark': ''
-  }
-]
+import { FetchArchivesOperateLog } from '@/api/archivesManage/library'
 export default {
   name: 'HandleInfo',
   components: { },
   mixins: [],
   data() {
     return {
-      tableData: [{}, {}],
+      currentArcId: null,
+      tableData: [],
       page: {
-        page: 1,
+        page: 0,
         size: 10,
         total: 0
+      },
+      operateTypeMap: {
+        1: '归档',
+        2: '退回',
+        3: '开放',
+        4: '销毁',
+        5: '赋权',
+        6: '在线',
+        7: '离线',
+        8: '新增',
+        9: '编辑',
+        10: '删除',
+        11: '装盒',
+        12: '拆盒',
+        13: '标签绑定',
+        14: '标签解绑',
+        15: '入库',
+        16: '出库',
+        17: '附件新增',
+        18: '附件删除',
+        19: '实体档案归还'
       }
     }
   },
@@ -62,15 +72,39 @@ export default {
 
   },
   mounted() {
-    this.tableData = data
   },
   methods: {
+    getArchivesOperateLog(arcId) {
+      // 1.归档 2.退回 3.开放 4.销毁 5.赋权 6.在线7.离线 8.新香增 9.编辑 10.删除 11.装盒 12.拆盒 13.标签绑定 14.标签解绑 15.入库 16.出库 17.附件新增 18.附件删除 19.实体档案归还
+      const params = {
+        'archivesId': arcId,
+        // 'operateType': null,
+        'page': this.page.page,
+        'size': this.page.size
+        // 'startTime': '',
+        // 'endTime': ''
+      }
+      FetchArchivesOperateLog(params).then(data => {
+        if (data.content && data.content.length !== 0) {
+          this.tableData = data.content
+          this.page.total = data.totalElements
+        } else {
+          this.tableData = []
+          this.page.total = 0
+        }
+      })
+    },
+    getOperateTypeText(type) {
+      return this.operateTypeMap[type] || '-'
+    },
     handleSizeChange(size) {
       this.page.size = size
-      this.page.page = 1
+      this.page.page = 0
+      this.getArchivesOperateLog(this.currentArcId)
     },
     handleCurrentPage(val) {
       this.page.page = val
+      this.getArchivesOperateLog(this.currentArcId)
     }
   }
 }

src/views/collectReorganizi/collectionLibrary/module/archivesInfo/index.vue

@@ -40,7 +40,7 @@
           </pre>
         </div>
         <FourTestInfo v-show="archivesTabIndex===3" ref="fourTestInfoRefs" />
-        <HandleInfo v-if="archivesTabIndex===4" />
+        <HandleInfo v-show="archivesTabIndex===4" ref="handleInfoRefs" />
         <ArchivesListModule v-show="archivesTabIndex===5" ref="archivesListModuleRef" :selected-category="selectedCategory" :is-title-type="isTitleType" :is-collect="isCollect" />
       </div>
     </div>
@@ -144,6 +144,10 @@ export default {
         console.log(this.$refs.fourTestInfoRefs)
         this.$refs.fourTestInfoRefs.currentArcId = this.arcId
         this.$refs.fourTestInfoRefs.getFourCheckRecord(this.arcId)
+      } else if (this.archivesTabIndex === 4) {
+        console.log(this.$refs.handleInfoRefs)
+        this.$refs.handleInfoRefs.currentArcId = this.arcId
+        this.$refs.handleInfoRefs.getArchivesOperateLog(this.arcId)
       } else if (this.archivesTabIndex === 5) {
         if (this.isTitleType === 2) {
           this.$refs.archivesListModuleRef.detailLevel = 2

src/views/collectReorganizi/collectionLibrary/module/handleInfo/index.vue

@@ -1,19 +1,24 @@
 <template>
   <!--档案详情-操作记录-->
   <div class="fourTest-container">
-    <el-table :data="tableData" style="min-width: 100%" height="calc(100vh - 440px)">
-      <el-table-column prop="type" label="操作类型" min-width="60" />
-      <el-table-column prop="isAgree" label="处理意见" min-width="60" />
-      <el-table-column prop="admin" label="处理人" min-width="60" />
-      <el-table-column prop="createTime" label="处理时间" min-width="180">
+    <el-table class="archives-table" :data="tableData" style="min-width: 100%" height="calc(100vh - 440px)">
+      <el-table-column prop="operateType" label="操作类型" min-width="60" align="center">
         <template slot-scope="scope">
-          <div>{{ scope.row.createTime | parseTime }}</div>
+          <span class="row-state row-packing state-active">{{ getOperateTypeText(scope.row.operateType) }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="remark" label="备注" min-width="60" />
+      <el-table-column prop="opinion" label="处理意见" min-width="60" />
+      <el-table-column prop="update_by" label="处理人" min-width="60" />
+      <el-table-column prop="update_time" label="处理时间" min-width="180">
+        <template slot-scope="scope">
+          <div>{{ scope.row.update_time | parseTime }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="remarks" label="备注" min-width="60" />
     </el-table>
     <!--分页组件-->
     <el-pagination
+      v-if="tableData.length !== 0"
       :current-page="page.page"
       :total="page.total"
       :page-size="page.size"
@@ -26,35 +31,40 @@
 </template>
 
 <script>
-const data = [
-  {
-    'id': '005E76FEC5A2AAB368CA1F',
-    'admin': 'admin',
-    'type': '预归档新增',
-    'isAgree': '同意',
-    'createTime': 1660706815000,
-    'remark': ''
-  },
-  {
-    'id': '005E76FEC5A2AAB368CA1F2',
-    'admin': 'admin',
-    'type': '装盒',
-    'isAgree': '拒绝',
-    'createTime': 1660706815000,
-    'remark': ''
-  }
-]
+import { FetchArchivesOperateLog } from '@/api/archivesManage/library'
 export default {
   name: 'HandleInfo',
   components: { },
   mixins: [],
   data() {
     return {
-      tableData: [{}, {}],
+      currentArcId: null,
+      tableData: [],
       page: {
-        page: 1,
+        page: 0,
         size: 10,
         total: 0
+      },
+      operateTypeMap: {
+        1: '归档',
+        2: '退回',
+        3: '开放',
+        4: '销毁',
+        5: '赋权',
+        6: '在线',
+        7: '离线',
+        8: '新增',
+        9: '编辑',
+        10: '删除',
+        11: '装盒',
+        12: '拆盒',
+        13: '标签绑定',
+        14: '标签解绑',
+        15: '入库',
+        16: '出库',
+        17: '附件新增',
+        18: '附件删除',
+        19: '实体档案归还'
       }
     }
   },
@@ -62,15 +72,39 @@ export default {
 
   },
   mounted() {
-    this.tableData = data
   },
   methods: {
+    getArchivesOperateLog(arcId) {
+      // 1.归档 2.退回 3.开放 4.销毁 5.赋权 6.在线7.离线 8.新香增 9.编辑 10.删除 11.装盒 12.拆盒 13.标签绑定 14.标签解绑 15.入库 16.出库 17.附件新增 18.附件删除 19.实体档案归还
+      const params = {
+        'archivesId': arcId,
+        // 'operateType': null,
+        'page': this.page.page,
+        'size': this.page.size
+        // 'startTime': '',
+        // 'endTime': ''
+      }
+      FetchArchivesOperateLog(params).then(data => {
+        if (data.content && data.content.length !== 0) {
+          this.tableData = data.content
+          this.page.total = data.totalElements
+        } else {
+          this.tableData = []
+          this.page.total = 0
+        }
+      })
+    },
+    getOperateTypeText(type) {
+      return this.operateTypeMap[type] || '-'
+    },
     handleSizeChange(size) {
       this.page.size = size
-      this.page.page = 1
+      this.page.page = 0
+      this.getArchivesOperateLog(this.currentArcId)
     },
     handleCurrentPage(val) {
       this.page.page = val
+      this.getArchivesOperateLog(this.currentArcId)
     }
   }
 }

src/views/components/echarts/graph.vue

@@ -1,7 +1,10 @@
 <template>
   <div>
+    <!-- <div id="graph-container">
+      <div v-if="isLoading">Loading data from Neo4j...</div>
+      <div v-if="errorMessage">{{ errorMessage }}</div>
+    </div> -->
     <div ref="myPage" class="my-graph" style="height: calc(100vh - 184px);">
-
       <RelationGraph
         ref="graphRef"
         :options="graphOptions"
@@ -23,15 +26,15 @@
           </div>
         </template>
       </RelationGraph>
-
     </div>
   </div>
 </template>
 
 <script>
+import { getGraphData } from '../../../neo4j.js'
 import RelationGraph from 'relation-graph'
 const graph_json_data = {
-  'rootId': '1',
+  // 'rootId': 1,
   'nodes': [
     { id: '1', text: '文书档案', force_weight: 10000, color: '#ec6941', borderColor: '#ff875e', width: 150, height: 150 },
 
@@ -103,22 +106,82 @@ export default {
         },
         // defaultJunctionPoint: 'border',
         defaultLineColor: 'rgba(0,0,0,0.8)'
-
-      }
+      },
+      isLoading: false,
+      errorMessage: '',
+      nodes: [],
+      edges: []
     }
   },
   mounted() {
-    this.showGraph()
+    // this.showGraph()
     this.resizeTimer = setInterval(async() => {
       // const graphInstance = this.$refs.graphRef.getInstance();
       // await graphInstance.zoomToFit();
     }, 3000)
+    this.fetchData()
   },
   beforeDestroy() {
-    console.log('beforeDestroy:clear timer')
     clearInterval(this.resizeTimer)
   },
   methods: {
+    async fetchData() {
+      this.isLoading = true
+      this.errorMessage = ''
+      try {
+        // 调用 getGraphData 函数获取数据
+        const { nodes, edges } = await getGraphData()
+        this.nodes = nodes
+        this.edges = edges
+        // 数据获取成功后调用渲染函数
+        // this.renderGraph()
+        this.allData.nodes = nodes.map(item => {
+          const newItem = { ...item }
+          if (item.type === 'CategoryClass') {
+            // newItem.color = '#ec6941'
+            // newItem.borderColor = '#ff875e'
+          } else if (item.type === 'Category') {
+            newItem.color = '#ec6941'
+            newItem.borderColor = '#ff875e'
+          }
+          return newItem
+        })
+
+        this.allData.lines = edges.map(item => {
+          return {
+            ...item,
+            from: String(item.from),
+            to: String(item.to)
+          }
+        })
+
+        console.log('this.allData', this.allData)
+        this.showGraph()
+      } catch (error) {
+        // 捕获并处理错误
+        this.errorMessage = `Error fetching data from Neo4j: ${error.message}`
+      } finally {
+        this.isLoading = false
+      }
+    },
+    renderGraph() {
+      try {
+        const container = document.getElementById('graph-container')
+        console.log('container', container)
+        if (!container) {
+          throw new Error('Graph container not found')
+        }
+        const graph = new RelationGraph(container, {
+          nodes: this.nodes,
+          edges: this.edges
+        })
+        console.lo('graph', graph)
+        // 调用渲染方法
+        graph.render()
+      } catch (error) {
+        this.errorMessage = `Error rendering graph: ${error.message}`
+      }
+    },
     async showGraph() {
       const graphInstance = this.$refs.graphRef.getInstance()
       await this.stopForceIfNeed()
@@ -142,6 +205,7 @@ export default {
     onNodeClick(nodeObject, $event) {
       console.log('onNodeClick:', nodeObject)
       const allChildIds = this.deepGeAlltChildIds(nodeObject)
+      console.log('allChildIds', allChildIds)
       const graphInstance = this.$refs.graphRef.getInstance()
       for (const node of graphInstance.getNodes()) {
         if (allChildIds.includes(node.id)) {
@@ -167,6 +231,8 @@ export default {
     deepGeAlltChildIds(node, ids = []) {
       if (ids.includes(node.id)) return
       ids.push(node.id)
+      // node.lot.childs
+      // node.targetNodes
       for (const cNode of node.lot.childs) {
         this.deepGeAlltChildIds(cNode, ids)
       }
@@ -195,7 +261,7 @@ export default {
     showNodeTips(nodeObject, $event) {
       this.currentNode = nodeObject
       const _base_position = this.$refs.graphRef.getInstance().options.fullscreen ? { x: 0, y: 0 } : this.$refs.myPage.getBoundingClientRect()
-      console.log('showNodeMenus:', this.$refs.graphRef.getInstance().options.fullscreen, $event.clientX, $event.clientY, _base_position)
+      // console.log('showNodeMenus:', this.$refs.graphRef.getInstance().options.fullscreen, $event.clientX, $event.clientY, _base_position)
       this.isShowNodeTipsPanel = true
       this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x + 10
       this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y + 10
@@ -226,14 +292,15 @@ export default {
   border-radius: 50%;
   cursor: pointer;
   height: 80px;
-  line-height: 80px;
+  // line-height: 80px;
   display: flex;
   place-items: center;
   justify-content: center;
   align-items: center;
 }
 .c-node-menu-item{
-  line-height: 30px;padding-left: 10px;cursor: pointer;color: #444444;font-size: 14px;border-top:#efefef solid 1px;
+  line-height: 30px;
+  padding-left: 10px;cursor: pointer;color: #444444;font-size: 14px;border-top:#efefef solid 1px;
 }
 .c-node-menu-item:hover{
   background-color: rgba(66,187,66,0.2);