关系图谱

src/views/web/archive/index.vue

@@ -53,32 +53,33 @@
             <div class="archive-list-block-title">
               <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>关系图谱
             </div>
-            <div class="archive-list-block-page">
-              <RelationChart/>
+            <div class="archive-list-block-page" v-loading="state.chartData.loading">
+              <RelationChart :data="state.chartData.data" @chartPage="onChartPage"/>
+            </div>
+          </div>
+          <div class="archive-list-block" v-if="state.chartTable.chartId">
+            <div class="archive-list-block-title">
+              <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>
+              {{ themeConfigCpt.chart.nodes.filter(v => v.id == state.chartTable.chartId)?.[0]?.name }}
+            </div>
+            <div class="archive-list-block-page" v-loading="state.chartTable.loading">
+              <CusTable
+                :page-num="state.chartTable.page.pageNum"
+                :page-size="state.chartTable.page.pageSize"
+                :total="state.chartTable.result.total"
+                :data="state.chartTable.result.data"
+                :table-head="state.chartTable.tableHead"
+                @handlePage="onPageChart"
+              >
+              </CusTable>
             </div>
           </div>
-<!--          <div class="archive-list-block">-->
-<!--            <div class="archive-list-block-title">-->
-<!--              <SvgIcon class="flag" name="flag_1" color="var(&#45;&#45;cus-main-color)"/>人员证件信息-->
-<!--            </div>-->
-<!--            <div class="archive-list-block-page">-->
-<!--              <CusTable-->
-<!--                :page-num="state.query.page.pageNum"-->
-<!--                :page-size="state.query.page.pageSize"-->
-<!--                :total="state.query.result.total"-->
-<!--                :data="state.query.result.data"-->
-<!--                :table-head="state.query.tableHead"-->
-<!--                @handlePage="onPage"-->
-<!--              >-->
-<!--              </CusTable>-->
-<!--            </div>-->
-<!--          </div>-->
         </template>
         <template v-else>
           <div class="archive-list-block">
             <div class="archive-list-block-title">
               <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>
-              {{ themeConfigCpt.tabs.get(state.activeTab).indexName }}
+              {{ themeConfigCpt.tabs.get(state.activeTab)?.indexName }}
             </div>
             <div class="archive-list-block-page" v-loading="state.tabTable.loading">
               <CusTable
@@ -111,7 +112,7 @@ const ThemeStore = useThemeStore()
 const route = useRoute()
 const {proxy} = getCurrentInstance()
 const state: any = reactive({
-  activeTab: '首页',
+  activeTab: '',
   tabTable: {
     loading: false,
     page: {
@@ -125,6 +126,7 @@ const state: any = reactive({
     },
   },
   chartTable: {
+    chartId: '',
     loading: false,
     page: {
       pageNum: 1,
@@ -136,10 +138,19 @@ const state: any = reactive({
       data: []
     },
   },
+  chartData: {
+    loading: false,
+    data: {
+      nodes: [],
+      edges: []
+    }
+  },
   ws: {
     instance: null,
     getMain: () => {},
     tabPage: () => {},
+    getChart: () => {},
+    chartPage: () => {},
     loading: null,
     loadingTimer: null
   },
@@ -201,16 +212,22 @@ const themeConfigCpt = computed(() => {
       }
       res.chart.nodes.unshift({
         id: String(v.id),
-        num: v.weight,
+        weight: v.weight,
+        num: 0,
         name: v.indexNameShort,
-        indexTableName: v.indexTableName
+        indexTableName: v.indexTableName,
+        searchParam: getSearchParam(v),
+        tableHead: getTableHead(v)
       })
     } else if (v.relateIndexId) {
       res.chart.nodes.push({
         id: String(v.id),
-        num: v.weight,
+        weight: v.weight,
+        num: 0,
         name: v.indexNameShort,
-        indexTableName: v.indexTableName
+        indexTableName: v.indexTableName,
+        searchParam: getSearchParam(v),
+        tableHead: getTableHead(v)
       })
       res.chart.edges.push({source: String(v.relateIndexId), target: String(v.id)})
     } else {
@@ -232,6 +249,29 @@ const onPage = (pageNum, pageSize) => {
   }
   state.ws.tabPage()
 }
+const onPageChart = (pageNum, pageSize) => {
+  state.chartTable.page = {
+    pageNum: pageNum,
+    pageSize: pageSize
+  }
+  state.ws.chartPage()
+}
+const onChartPage = (id) => {
+  state.chartTable = {
+    chartId: id,
+    loading: false,
+    page: {
+      pageNum: 1,
+      pageSize: 10
+    },
+    tableHead: themeConfigCpt.value.chart.nodes.filter(v => v.id == id)?.[0]?.tableHead,
+    result: {
+      total: 0,
+      data: []
+    },
+  }
+  state.ws.chartPage()
+}
 const initTheme = () => {
   const loading = ElLoading.service({
     lock: true,
@@ -250,7 +290,8 @@ const initTheme = () => {
 }
 watch(() => state.activeTab, (n) => {
   if (n === '首页') {
-
+    state.chartTable.chartId = ''
+    state.ws.getChart()
   } else {
     state.tabTable = {
       loading: false,
@@ -272,6 +313,8 @@ const initWS = () => {
   let sessionId = ''
   let lastTabParams = ''
   let lastMainParams = ''
+  let lastChartParams = ''
+  let lastChartPageParams = ''
   const loading = ElLoading.service({
     lock: true,
     text: '搜索服务连接中……',
@@ -344,6 +387,68 @@ const initWS = () => {
       state.tabTable.loading = true
       ws.send(lastTabParams)
     }
+    state.ws.getChart = () => {
+      // 如果有的话，终止上一次请求
+      if (lastChartParams) {
+        const p = JSON.parse(lastChartParams)
+        p.flag = 'stop'
+        ws.send(JSON.stringify(p))
+        lastChartParams = ''
+      }
+      const params = {
+        pageNumber: state.tabTable.page.pageNum,
+        pageSize: state.tabTable.page.pageSize,
+        type: 'count-fix',
+        sessionId: sessionId,
+        timestamp: new Date().getTime(),
+        flag: 'run',
+        builder:[
+          {
+            tagCode: '',
+            datas:[
+              {
+                typeCode: '',
+                datas: themeConfigCpt.value.chart.nodes.map(v => v.searchParam)
+              }
+            ]
+          }
+        ]
+      }
+      lastChartParams = JSON.stringify(params)
+      state.chartData.loading = true
+      ws.send(lastChartParams)
+    }
+    state.ws.chartPage = () => {
+      // 如果有的话，终止上一次请求
+      if (lastChartPageParams) {
+        const p = JSON.parse(lastChartPageParams)
+        p.flag = 'stop'
+        ws.send(JSON.stringify(p))
+        lastChartPageParams = ''
+      }
+      const params = {
+        pageNumber: state.chartTable.page.pageNum,
+        pageSize: state.chartTable.page.pageSize,
+        type: 'list-fix',
+        sessionId: sessionId,
+        timestamp: new Date().getTime(),
+        flag: 'run',
+        builder:[
+          {
+            tagCode: '',
+            datas:[
+              {
+                typeCode: '',
+                datas: [themeConfigCpt.value.chart.nodes.filter(v => v.id == state.chartTable.chartId)[0].searchParam]
+              }
+            ]
+          }
+        ],
+      }
+      lastChartPageParams = JSON.stringify(params)
+      state.chartTable.loading = true
+      ws.send(lastChartPageParams)
+    }
   }
   ws.onmessage = (e) => {
     try {
@@ -352,6 +457,7 @@ const initWS = () => {
         sessionId = json.sessionId
         // 左侧
         state.ws.getMain()
+        state.activeTab = '首页'
       } else {
         switch (json.type) {
           case 'list-fix': {
@@ -374,6 +480,34 @@ const initWS = () => {
                 lastTabParams = ''
               }
             }
+            if (lastChartPageParams) {
+              const pChartPage = JSON.parse(lastChartPageParams)
+              // 返回为最新批次的
+              if (json.timestamp == pChartPage.timestamp) {
+                state.chartTable.result.data = json.datas
+                state.chartTable.result.total = json.records
+                state.chartTable.loading = false
+                lastChartPageParams = ''
+              }
+            }
+          } break
+          case 'count-fix': {
+            if (lastChartParams) {
+              const pChart = JSON.parse(lastChartParams)
+              // 返回为最新批次的
+              if (json.timestamp == pChart.timestamp) {
+                const obj = {
+                  edges: [...themeConfigCpt.value.chart.edges],
+                  nodes: themeConfigCpt.value.chart.nodes.map(v => {
+                    v.num = json.datas.filter(s => s.indexCode === v.indexTableName)?.[0].data || 0
+                    return v
+                  })
+                }
+                state.chartData.data = obj
+                state.chartData.loading = false
+                lastChartParams = ''
+              }
+            }
           } break
         }
       }

src/views/web/archive/relation-chart.vue

@@ -5,11 +5,14 @@
 </template>
 
 <script setup lang="ts">
-import {getCurrentInstance, onMounted, reactive} from "vue";
+import {getCurrentInstance, onMounted, reactive, watch} from "vue";
 import {Graph} from "@antv/g6";
-import {randomNum} from "@/utils/util";
 
+const emit = defineEmits(['chartPage'])
 const {proxy} = getCurrentInstance()
+const props = defineProps({
+  data: {}
+})
 const state: any = reactive({})
 const setNodes = (data) => {
   data.nodes.forEach(v => {
@@ -29,114 +32,104 @@ const setEdges = (data) => {
   })
 }
 const initChart = () => {
-  const data = {
-    nodes: [
-      {id: '1', num: 100, ss: 'asdasd'},
-      {id: '2', num: 90, ss: 'asdasd'},
-      {id: '3', num: 80, ss: 'asdasd'},
-      {id: '4', num: 90, ss: 'asdasd'},
-      {id: '5', num: 80, ss: 'asdasd'},
-    ],
-    edges: [
-      {source: '1', target: '3'},
-      {source: '2', target: '4'},
-      {source: '1', target: '5'},
-      {source: '2', target: '3'},
-      {source: '1', target: '4'},
-    ]
-  }
-  setNodes(data)
-  setEdges(data)
-  const mainColor = getComputedStyle(document.documentElement).getPropertyValue('--cus-main-color')
-  const mainColorHex2 = getComputedStyle(document.documentElement).getPropertyValue('--cus-main-color-hex-2')
-  const graph = new Graph({
-    container: 'container',
-    data,
-    // autoResize: true,
-    autoFit: 'view',
-    behaviors: ['drag-canvas', 'drag-element', 'zoom-canvas', {
-      type: 'click-select',
-      degree: 1,
-      enable: (event) => event.targetType === "node",
-    }],
-    layout: {
-      type: 'radial',
-      focusNode: '3',
-      linkDistance: 200,
-      preventOverlap: true,
-      unitRadius: 200,
-      maxPreventOverlapIteration: 100,
-      strictRadial: false
-    },
-    node: {
-      style: {
-        // circle
-        size: (v) => v.num,
-        fill: 'transparent',
-        lineWidth: 2,
-        stroke: mainColor,
-        // label
-        label: true,
-        labelPlacement: 'bottom',
-        labelText: (v) => '节点_' + v.id,
-        labelFill: '#ffffff',
-        labelPadding: [4, 10],
-        labelBackground: true,
-        labelBackgroundFill: mainColor,
-        labelBackgroundRadius: 2,
-        labelFontSize: 14,
-        labelOffsetY: 6,
-        // badge
-        badgeFontSize: 12,
-        badgePadding: [2, 4, 0, 4],
-        badgeBackgroundFill: mainColor,
-        halo: false,
-        haloLineDash: 0,
-        haloLineWidth: 12,
-        haloStrokeOpacity: 0.25,
+  if (props.data?.nodes?.length > 0) {
+    const data = JSON.parse(JSON.stringify(props.data))
+    setNodes(data)
+    setEdges(data)
+    const mainColor = getComputedStyle(document.documentElement).getPropertyValue('--cus-main-color')
+    const mainColorHex2 = getComputedStyle(document.documentElement).getPropertyValue('--cus-main-color-hex-2')
+    const graph = new Graph({
+      container: 'container',
+      data,
+      // autoResize: true,
+      autoFit: 'view',
+      behaviors: ['drag-canvas', 'drag-element', 'zoom-canvas', {
+        type: 'click-select',
+        degree: 1,
+        enable: (event) => event.targetType === "node",
+      }],
+      layout: {
+        type: 'radial',
+        focusNode: '3',
+        linkDistance: 200,
+        preventOverlap: true,
+        unitRadius: 200,
+        maxPreventOverlapIteration: 100,
+        strictRadial: false
       },
-      state: {
-        selected: {
-          lineWidth: 4,
+      node: {
+        style: {
+          // circle
+          size: (v) => v.weight,
+          fill: 'transparent',
+          lineWidth: 2,
           stroke: mainColor,
+          // label
+          label: true,
+          labelPlacement: 'bottom',
+          labelText: (v) => v.name,
+          labelFill: '#ffffff',
+          labelPadding: [4, 10],
+          labelBackground: true,
+          labelBackgroundFill: mainColor,
+          labelBackgroundRadius: 2,
           labelFontSize: 14,
-          labelFontWeight: 'normal',
+          labelOffsetY: 6,
+          // badge
+          badgeFontSize: 12,
+          badgePadding: [2, 4, 0, 4],
+          badgeBackgroundFill: mainColor,
+          halo: false,
+          haloLineDash: 0,
+          haloLineWidth: 12,
+          haloStrokeOpacity: 0.25,
+        },
+        state: {
+          selected: {
+            lineWidth: 4,
+            stroke: mainColor,
+            labelFontSize: 14,
+            labelFontWeight: 'normal',
+          }
         }
-      }
-    },
-    edge: {
-      style: {
-        endArrow: true,
-        endArrowType: 'triangle',
-        endArrowSize: 8,
-        stroke: mainColor,
-        labelAutoRotate: false,
-        labelFill: '#ffffff',
-        labelPadding: [2, 4, 0, 4],
-        labelBackground: true,
-        labelBackgroundFill: mainColor,
-        labelBackgroundRadius: 20,
-        labelFontSize: 12,
-        halo: true,
-        haloLineDash: 4,
-        haloLineWidth: 2,
       },
-      state: {
-        selected: {
+      edge: {
+        style: {
+          endArrow: true,
+          endArrowType: 'triangle',
+          endArrowSize: 8,
+          stroke: mainColor,
+          labelAutoRotate: false,
+          labelFill: '#ffffff',
+          labelPadding: [2, 4, 0, 4],
+          labelBackground: true,
+          labelBackgroundFill: mainColor,
+          labelBackgroundRadius: 20,
           labelFontSize: 12,
-          labelFontWeight: 'normal'
+          halo: true,
+          haloLineDash: 4,
+          haloLineWidth: 2,
+        },
+        state: {
+          selected: {
+            labelFontSize: 12,
+            labelFontWeight: 'normal'
+          }
         }
-      }
-    },
-  } as any);
-  graph.render();
-  graph.on('node:click', (e) => {
-    console.log(e)
-  })
+      },
+    } as any);
+    graph.render();
+    graph.on('node:click', (e) => {
+      emit('chartPage', e.target.id)
+    })
+  }
 }
-onMounted(() => {
+watch(() => props.data, () => {
   initChart()
 })
+// onMounted(() => {
+//   initChart()
+// })
 </script>
 
 <style lang="scss" scoped>