bugfix

package-lock.json

@@ -29,6 +29,7 @@
         "markdown-it": "^14.1.0",
         "pdfjs-dist": "^5.5.207",
         "pinia": "^3.0.4",
+        "relation-graph-vue3": "^2.2.11",
         "vue": "^3.4.0",
         "vue-router": "^4.2.5"
       },
@@ -1208,9 +1209,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1231,9 +1229,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1254,9 +1249,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1277,9 +1269,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1300,9 +1289,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2764,6 +2750,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.0",
       "resolved": "https://registry.npmmirror.com/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
@@ -3161,6 +3156,15 @@
         "layout-base": "^1.0.0"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
@@ -4865,6 +4869,19 @@
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "license": "MIT"
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -6788,6 +6805,16 @@
       "resolved": "https://registry.npmmirror.com/regl/-/regl-1.7.0.tgz",
       "integrity": "sha512-bEAtp/qrtKucxXSJkD4ebopFZYP0q1+3Vb2WECWv/T8yQEgKxDxJ7ztO285tAMaYZVR6mM1GgI6CCn8FROtL1w=="
     },
+    "node_modules/relation-graph-vue3": {
+      "version": "2.2.11",
+      "resolved": "https://registry.npmmirror.com/relation-graph-vue3/-/relation-graph-vue3-2.2.11.tgz",
+      "integrity": "sha512-2WyomsAwbIMuYNrfZhzGV63OXDNea24pRX6zwW91a9qmoDyVWOBoWWE4lOK6DYMW6soz4pFgET+G6j9qQ4S/SA==",
+      "license": "MIT",
+      "dependencies": {
+        "html2canvas": "^1.4.1",
+        "screenfull": "^5.1.0"
+      }
+    },
     "node_modules/repeat-element": {
       "version": "1.1.4",
       "resolved": "https://registry.npmmirror.com/repeat-element/-/repeat-element-1.1.4.tgz",
@@ -7021,6 +7048,18 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/scule": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
@@ -7469,6 +7508,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/thenify/-/thenify-3.3.1.tgz",
@@ -7963,6 +8011,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "9.0.1",
       "resolved": "https://registry.npmmirror.com/uuid/-/uuid-9.0.1.tgz",

package.json

@@ -38,6 +38,7 @@
     "markdown-it": "^14.1.0",
     "pdfjs-dist": "^5.5.207",
     "pinia": "^3.0.4",
+    "relation-graph-vue3": "^2.2.11",
     "vue": "^3.4.0",
     "vue-router": "^4.2.5"
   },

src/api/aiAnalysis/index.js

@@ -196,7 +196,8 @@ export function getChartAnalysis(data, options = {}) {
 					},
 					body: JSON.stringify(data),
 					signal: abortController.signal,
-					openWhenHidden: true,
+				
+					openWhenHidden: false,
 					retryDelay: 1000,
 					maxRetries: 2,
 					onopen: response => {

src/api/thinkTank/overview.js

@@ -112,10 +112,11 @@ export function getThinkTankProjects(params) {
   })
 }
 //智库概览页国会听证会
-export function getThinkTankTestimonies() {
+export function getThinkTankTestimonies(params) {
   return request({
     method: 'GET',
     url: `/api/think-tank/testimonies`,
+    params
   })
 }
 //智库调查项目详情主页
@@ -142,6 +143,13 @@ export function getThinkTankProjectsByThinkTankId(params) {
     params: {
       pageNum: params.pageNum,
       pageSize: params.pageSize,
+      sortFun: params.sortFun,
+      sortField: params.sortField,
+      sortOrder: params.sortOrder,
+      domainIds: params.domainIds,
+      startDate: params.startDate,
+      endDate: params.endDate,
+      projectName: params.projectName,
     }
   })
 }
@@ -154,6 +162,11 @@ export function getThinkTankTestimoniesByThinkTankId(params) {
     params: {
       pageNum: params.pageNum,
       pageSize: params.pageSize,
+      
+      domainIds: params.domainIds,
+      startDate: params.startDate,
+      endDate: params.endDate,
+      title: params.title,
     }
   })
 }

src/components/base/GraphChart/graphChart.js

@@ -33,7 +33,7 @@ const getGraphChart = (nodes, links, layoutType) => {
         fontSize: 12
       }
     },
-    animation: true,
+    animation: false,
     animationDuration: 1000,
     animationEasing: 'cubicOut',
     series: [{

src/components/base/RelationCenterChart/index.vue

+<template>
+  <RelationGraph style="width: 100%; height: 100%;" ref="graphRef" :options="graphOptions" @node-click="onNodeClick"
+    @line-click="onLineClick" />
+</template>
+
+<script setup>
+import { defineComponent, ref, onMounted } from 'vue';
+import RelationGraph from 'relation-graph-vue3';
+// import type { RGJsonData, RGNode, RGLine, RGLink, RGUserEvent, RGOptions, RelationGraphComponent } from 'relation-graph-vue3';
+
+const graphRef = ref(null);
+const graphOptions = {
+  debug: true,
+  defaultNodeBorderWidth: 0,
+  defaultNodeColor: 'var(--color-primary-50)',
+  defaultNodeFontColor: 'var(--text-primary-80-color)',
+  allowSwitchLineShape: true,
+  allowSwitchJunctionPoint: true,
+  defaultLineShape: 1,
+  distance_coefficient: 1,
+  layouts: [
+    {
+      layoutName: 'center',
+      // 👇 关键参数：控制各层级之间的距离（值越大，连线越长，节点间距越大）
+      distance_coefficient: 1.8,  // 默认值通常是 1.0，可以调到 1.5-3.0
+      // 👇 层级间的垂直间距
+      levelDistance: 80,          // 单位：像素，默认约 80-100
+      // 👇 同一层级内节点之间的水平间距
+      nodeDistance: 100            // 单位：像素，默认约 100
+    }
+  ],
+  defaultJunctionPoint: 'border',
+  // defaultNodeWidth: 120,   // 全局默认节点宽度
+  // defaultNodeHeight: 120,   // 全局默认节点高度
+};
+
+
+const showGraph = async () => {
+  const __graph_json_data = props.graphData;
+  const graphInstance = graphRef.value?.getInstance();
+  if (graphInstance) {
+    await graphInstance.setJsonData(__graph_json_data);
+    await graphInstance.moveToCenter();
+    // await graphInstance.zoomToFit();
+    await graphInstance.setZoom(65);
+  }
+};
+
+const emit = defineEmits(['nodeClick', 'lineClick'])
+
+const onNodeClick = (nodeObject, $event) => {
+  console.log('onNodeClick:', nodeObject);
+  emit('nodeClick', nodeObject)
+};
+
+const onLineClick = (lineObject, linkObject, $event) => {
+  console.log('onLineClick:', lineObject);
+  emit('lineClick', lineObject)
+};
+
+const props = defineProps({
+  graphData: {
+    type: Object,
+    default: {
+      rootId: '2',
+      nodes: [
+        { id: '1', text: 'Node-1' },
+        { id: '2', text: 'Node-2' },
+        { id: '3', text: 'Node-3' },
+        { id: '4', text: 'Node-4' },
+        { id: '6', text: 'Node-6' },
+        { id: '7', text: 'Node-7' },
+        { id: '8', text: 'Node-8' },
+        { id: '9', text: 'Node-9' },
+        { id: '71', text: 'Node-71' },
+        { id: '72', text: 'Node-72' },
+        { id: '73', text: 'Node-73' },
+        { id: '81', text: 'Node-81' },
+        { id: '82', text: 'Node-82' },
+        { id: '83', text: 'Node-83' },
+        { id: '84', text: 'Node-84' },
+        { id: '85', text: 'Node-85' },
+        { id: '91', text: 'Node-91' },
+        { id: '92', text: 'Node-82' },
+        { id: '51', text: 'Node-51' },
+        { id: '52', text: 'Node-52' },
+        { id: '53', text: 'Node-53' },
+        { id: '54', text: 'Node-54' },
+        { id: '55', text: 'Node-55' },
+        { id: '5', text: 'Node-5' }
+      ],
+      lines: [
+        { from: '7', to: '71', text: 'Investment' },
+        { from: '7', to: '72', text: 'Investment' },
+        { from: '7', to: '73', text: 'Investment' },
+        { from: '8', to: '81', text: 'Investment' },
+        { from: '8', to: '82', text: 'Investment' },
+        { from: '8', to: '83', text: 'Investment' },
+        { from: '8', to: '84', text: 'Investment' },
+        { from: '8', to: '85', text: 'Investment' },
+        { from: '9', to: '91', text: 'Investment' },
+        { from: '9', to: '92', text: 'Investment' },
+        { from: '5', to: '51', text: 'Investment1' },
+        { from: '5', to: '52', text: 'Investment' },
+        { from: '5', to: '53', text: 'Investment3' },
+        { from: '5', to: '54', text: 'Investment4' },
+        { from: '5', to: '55', text: 'Investment' },
+        { from: '1', to: '2', text: 'Investment' },
+        { from: '3', to: '1', text: 'Executive' },
+        { from: '4', to: '2', text: 'Executive' },
+        { from: '6', to: '2', text: 'Executive' },
+        { from: '7', to: '2', text: 'Executive' },
+        { from: '8', to: '2', text: 'Executive' },
+        { from: '9', to: '2', text: 'Executive' },
+        { from: '1', to: '5', text: 'Investment' }
+      ]
+    }
+  }
+})
+
+onMounted(() => {
+  showGraph();
+});
+</script>
+
+<style scoped lang="scss"></style>

src/components/base/RelationForceChart/index.vue

+<template>
+	<RelationGraph
+		style="width: 100%; height: 100%"
+		ref="graphRef"
+		:options="graphOptions"
+		@node-click="onNodeClick"
+		@line-click="onLineClick"
+	>
+		<!-- 自定义节点插槽 - 这是官方推荐的方式 -->
+		<template #node="{ node }">
+			<div
+				class="custom-node"
+				:style="{
+					backgroundColor: node.color || 'var(--color-primary-50)'
+				}"
+			>
+				{{ console.log(node) }}
+				<!-- 在这里自由控制文字样式 -->
+				<div class="img" v-if="node.data.pic">
+					<img :src="node.data.pic" alt="" />
+				</div>
+				<span
+					class="text"
+					:style="{
+						color: node.fontColor || 'var(--text-primary-80-color)',
+						fontSize: node.customFontSize || '24px' // 可以从数据中读取
+					}"
+				>
+					{{ node.text }}
+				</span>
+			</div>
+		</template>
+	</RelationGraph>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import RelationGraph from "relation-graph-vue3";
+
+const props = defineProps({
+	graphData: {
+		type: Object,
+		default: {}
+	}
+});
+
+const graphRef = ref(null);
+
+const graphOptions = ref({
+	debug: false,
+	defaultNodeBorderWidth: 0,
+	allowSwitchLineShape: true,
+	allowSwitchJunctionPoint: true,
+	defaultNodeColor: "var(--color-primary-50)",
+	defaultNodeFontColor: "var(--text-primary-90-color)", // 默认文字颜色：深灰色
+	defaultLineShape: 1,
+	layout: {
+		layoutName: "force"
+	},
+	defaultJunctionPoint: "border"
+	// defaultNodeWidth:  150,   // 全局默认节点宽度
+	// defaultNodeHeight:  150,   // 全局默认节点高度
+});
+
+const showGraph = async () => {
+	const __graph_json_data = props.graphData;
+
+	const graphInstance = graphRef.value.getInstance();
+	if (graphInstance) {
+		await graphInstance.setJsonData(__graph_json_data);
+		await graphInstance.moveToCenter();
+		// await graphInstance.zoomToFit();
+		await graphInstance.setZoom(45);
+	}
+};
+
+const emit = defineEmits(["nodeClick", "lineClick"]);
+
+const onNodeClick = (nodeObject, $event) => {
+	console.log("onNodeClick:", nodeObject);
+	emit("nodeClick", nodeObject);
+};
+
+const onLineClick = (lineObject, linkObject, $event) => {
+	console.log("onLineClick:", lineObject);
+	emit("lineClick", lineObject);
+};
+
+onMounted(() => {
+	showGraph();
+});
+</script>
+
+<style lang="scss" scoped>
+.custom-node {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	padding: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+
+	.img {
+		position: absolute;
+		width: 50px;
+		height: 50px;
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.text {
+		font-weight: normal;
+		text-align: center;
+		word-break: break-word;
+		padding: 0 8px;
+		white-space: nowrap;
+		margin-top: 120px;
+		display: inline-block;
+	}
+}
+</style>

src/styles/components/RelationCenterChart/index.vue

+<template>
+  <el-row class="wrapper layout-grid-line">
+    <el-col :span="span">
+      <pre>
+        {{
+          `
+import RelationCenterChart from '@/components/base/RelationCenterChart/index.vue'
+  <RelationCenterChart :graph-data="graphData" />
+`
+        }}
+      </pre>
+      <div class="chart-box">
+        <RelationCenterChart @line-click="handleClickLine" @node-click="handleClickNode" :graph-data="graphData" />
+      </div>
+
+    </el-col>
+  </el-row>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import '@/styles/common.scss'
+import RelationCenterChart from '@/components/base/RelationCenterChart/index.vue'
+const span = 24
+
+import Img from '@/assets/icons/symbol.png'
+
+
+const graphData = ref({
+  rootId: 'a',
+  nodes: [
+    { id: 'a', text: '上海复龙鸿芯微系统技术有限公司', data: {
+				pic: Img,
+				name: "xxx图片"
+			} },
+    { id: 'b', text: 'b' },
+    { id: 'b1', text: 'b1' },
+    { id: 'b1-1', text: 'b1-1' },
+    { id: 'b1-2', text: 'b1-2' },
+    { id: 'b1-3', text: 'b1-3' },
+    { id: 'b1-4', text: 'b1-4' },
+    { id: 'b2', text: 'b2' },
+    { id: 'b2-1', text: 'b2-1' },
+    { id: 'b2-2', text: 'b2-2' },
+    { id: 'b2-3', text: 'b2-3' },
+    { id: 'b2-4', text: 'b2-4' },
+    { id: 'b3', text: 'b3' },
+    { id: 'b3-1', text: 'b3-1' },
+    { id: 'b3-2', text: 'b3-2' },
+    { id: 'b3-3', text: 'b3-3' },
+    { id: 'b3-4', text: 'b3-4' },
+    { id: 'b3-5', text: 'b3-5' },
+    { id: 'b4', text: 'b4' },
+    { id: 'b4-1', text: 'b4-1' },
+    { id: 'b4-2', text: 'b4-2' },
+    { id: 'b4-3', text: 'b4-3' },
+    { id: 'b4-4', text: 'b4-4' },
+    { id: 'b4-5', text: 'b4-5' },
+    { id: 'b4-6', text: 'b4-6' },
+    { id: 'b4-7', text: 'b4-7' },
+    { id: 'b4-8', text: 'b4-8' },
+    { id: 'b4-9', text: 'b4-9' },
+    { id: 'b5', text: 'b5' },
+    { id: 'b5-1', text: 'b5-1' },
+    { id: 'b5-2', text: 'b5-2' },
+    { id: 'b5-3', text: 'b5-3' },
+    { id: 'b5-4', text: 'b5-4' },
+    { id: 'b6', text: 'b6' },
+    { id: 'b6-1', text: 'b6-1' },
+    { id: 'b6-2', text: 'b6-2' },
+    { id: 'b6-3', text: 'b6-3' },
+    { id: 'b6-4', text: 'b6-4' },
+    { id: 'b6-5', text: 'b6-5' },
+    { id: 'c', text: 'c' },
+    { id: 'c1', text: 'c1' },
+    { id: 'c1-1', text: 'c1-1' },
+    { id: 'c1-2', text: 'c1-2' },
+    { id: 'c1-3', text: 'c1-3' },
+    { id: 'c1-4', text: 'c1-4' },
+    { id: 'c1-5', text: 'c1-5' },
+    { id: 'c1-6', text: 'c1-6' },
+    { id: 'c1-7', text: 'c1-7' },
+    { id: 'c2', text: 'c2' },
+    { id: 'c2-1', text: 'c2-1' },
+    { id: 'c2-2', text: 'c2-2' },
+    { id: 'c3', text: 'c3' },
+    { id: 'c3-1', text: 'c3-1' },
+    { id: 'c3-2', text: 'c3-2' },
+    { id: 'c3-3', text: 'c3-3' },
+    { id: 'd', text: 'd' },
+    { id: 'd1', text: 'd1' },
+    { id: 'd1-1', text: 'd1-1' },
+    { id: 'd1-2', text: 'd1-2' },
+    { id: 'd1-3', text: 'd1-3' },
+    { id: 'd1-4', text: 'd1-4' },
+    { id: 'd1-5', text: 'd1-5' },
+    { id: 'd1-6', text: 'd1-6' },
+    { id: 'd1-7', text: 'd1-7' },
+    { id: 'd1-8', text: 'd1-8' },
+    { id: 'd2', text: 'd2' },
+    { id: 'd2-1', text: 'd2-1' },
+    { id: 'd2-2', text: 'd2-2' },
+    { id: 'd3', text: 'd3' },
+    { id: 'd3-1', text: 'd3-1' },
+    { id: 'd3-2', text: 'd3-2' },
+    { id: 'd3-3', text: 'd3-3' },
+    { id: 'd3-4', text: 'd3-4' },
+    { id: 'd3-5', text: 'd3-5' },
+    { id: 'd4', text: 'd4' },
+    { id: 'd4-1', text: 'd4-1' },
+    { id: 'd4-2', text: 'd4-2' },
+    { id: 'd4-3', text: 'd4-3' },
+    { id: 'd4-4', text: 'd4-4' },
+    { id: 'e', text: 'e' },
+    { id: 'e1', text: 'e1' },
+    { id: 'e1-1', text: 'e1-1' },
+    { id: 'e1-2', text: 'e1-2' },
+    { id: 'e1-3', text: 'e1-3' },
+    { id: 'e1-4', text: 'e1-4' },
+    { id: 'e2', text: 'e2' },
+    { id: 'e2-1', text: 'e2-1' },
+    { id: 'e2-2', text: 'e2-2' },
+    { id: 'e2-3', text: 'e2-3' },
+    { id: 'e2-4', text: 'e2-4' },
+    { id: 'e2-5', text: 'e2-5' },
+    { id: 'e2-6', text: 'e2-6' },
+  ],
+  lines: [
+    { from: 'a', to: 'b', text: '控股', fontColor:'red', textOffset_y: -8, color: 'orange', lineWidth: 5 },
+    { from: 'b', to: 'b1' },
+    { from: 'b1', to: 'b1-1' },
+    { from: 'b1', to: 'b1-2' },
+    { from: 'b1', to: 'b1-3' },
+    { from: 'b1', to: 'b1-4' },
+    { from: 'b1', to: 'b1-5' },
+    { from: 'b1', to: 'b1-6' },
+    { from: 'b', to: 'b2' },
+    { from: 'b2', to: 'b2-1' },
+    { from: 'b2', to: 'b2-2' },
+    { from: 'b2', to: 'b2-3' },
+    { from: 'b2', to: 'b2-4' },
+    { from: 'b', to: 'b3' },
+    { from: 'b3', to: 'b3-1' },
+    { from: 'b3', to: 'b3-2' },
+    { from: 'b3', to: 'b3-3' },
+    { from: 'b3', to: 'b3-4' },
+    { from: 'b3', to: 'b3-5' },
+    { from: 'b', to: 'b4' },
+    { from: 'b4', to: 'b4-1' },
+    { from: 'b4', to: 'b4-2' },
+    { from: 'b4', to: 'b4-3' },
+    { from: 'b4', to: 'b4-4' },
+    { from: 'b4', to: 'b4-5' },
+    { from: 'b4', to: 'b4-6' },
+    { from: 'b4', to: 'b4-7' },
+    { from: 'b4', to: 'b4-8' },
+    { from: 'b4', to: 'b4-9' },
+    { from: 'b', to: 'b5' },
+    { from: 'b5', to: 'b5-1' },
+    { from: 'b5', to: 'b5-2' },
+    { from: 'b5', to: 'b5-3' },
+    { from: 'b5', to: 'b5-4' },
+    { from: 'b', to: 'b6' },
+    { from: 'b6', to: 'b6-1' },
+    { from: 'b6', to: 'b6-2' },
+    { from: 'b6', to: 'b6-3' },
+    { from: 'b6', to: 'b6-4' },
+    { from: 'b6', to: 'b6-5' },
+    { from: 'a', to: 'c' },
+    { from: 'c', to: 'c1' },
+    { from: 'c1', to: 'c1-1' },
+    { from: 'c1', to: 'c1-2' },
+    { from: 'c1', to: 'c1-3' },
+    { from: 'c1', to: 'c1-4' },
+    { from: 'c1', to: 'c1-5' },
+    { from: 'c1', to: 'c1-6' },
+    { from: 'c1', to: 'c1-7' },
+    { from: 'c', to: 'c2' },
+    { from: 'c2', to: 'c2-1' },
+    { from: 'c2', to: 'c2-2' },
+    { from: 'c', to: 'c3' },
+    { from: 'c3', to: 'c3-1' },
+    { from: 'c3', to: 'c3-2' },
+    { from: 'c3', to: 'c3-3' },
+    { from: 'a', to: 'd' },
+    { from: 'd', to: 'd1' },
+    { from: 'd1', to: 'd1-1' },
+    { from: 'd1', to: 'd1-2' },
+    { from: 'd1', to: 'd1-3' },
+    { from: 'd1', to: 'd1-4' },
+    { from: 'd1', to: 'd1-5' },
+    { from: 'd1', to: 'd1-6' },
+    { from: 'd1', to: 'd1-7' },
+    { from: 'd1', to: 'd1-8' },
+    { from: 'd', to: 'd2' },
+    { from: 'd2', to: 'd2-1' },
+    { from: 'd2', to: 'd2-2' },
+    { from: 'd', to: 'd3' },
+    { from: 'd3', to: 'd3-1' },
+    { from: 'd3', to: 'd3-2' },
+    { from: 'd3', to: 'd3-3' },
+    { from: 'd3', to: 'd3-4' },
+    { from: 'd3', to: 'd3-5' },
+    { from: 'd', to: 'd4' },
+    { from: 'd4', to: 'd4-1' },
+    { from: 'd4', to: 'd4-2' },
+    { from: 'd4', to: 'd4-3' },
+    { from: 'd4', to: 'd4-4' },
+    { from: 'a', to: 'e' },
+    { from: 'e', to: 'e1' },
+    { from: 'e1', to: 'e1-1' },
+    { from: 'e1', to: 'e1-2' },
+    { from: 'e1', to: 'e1-3' },
+    { from: 'e1', to: 'e1-4' },
+    { from: 'e', to: 'e2' },
+    { from: 'e2', to: 'e2-1' },
+    { from: 'e2', to: 'e2-2' },
+    { from: 'e2', to: 'e2-3' },
+    { from: 'e2', to: 'e2-4' },
+    { from: 'e2', to: 'e2-5' },
+    { from: 'e2', to: 'e2-6' },
+  ]
+})
+
+
+const handleClickNode = (value) => {
+	console.log('value', value);
+	alert('我点击了node-'+ value.text)
+}
+
+const handleClickLine = (value) => {
+	console.log('value', value);
+	alert('我点击了line-'+ value.text)
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+.chart-box {
+  width: 1600px;
+  height: 600px;
+}
+</style>
\ No newline at end of file

src/styles/components/RelationChart/index.vue

+<template>
+	<el-row class="wrapper layout-grid-line">
+		<el-col :span="span">
+			<pre>
+        {{
+          `
+import RelationChart from '@/components/base/RelationChart/index.vue'
+<div class="chart-box">
+  <RelationChart :is-vertical-chart="isVerticalChart" :graph-data="graphData" />
+</div>
+  `
+        }}
+      </pre>
+			<div class="tab-box">
+				<el-radio-group v-model="currentCase" size="large" @change="tabChange">
+					<el-radio-button label="水平关系图" />
+					<el-radio-button label="竖直关系图" />
+				</el-radio-group>
+			</div>
+			<div class="chart-box">
+				<RelationChart @line-click="handleClickLine" @node-click="handleClickNode" :is-vertical-chart="isVerticalChart" :graph-data="graphData" />
+			</div>
+		</el-col>
+	</el-row>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import "@/styles/common.scss";
+import RelationChart from "@/components/base/RelationChart/index.vue";
+const span = 24;
+
+const currentCase = ref("水平关系图");
+const isVerticalChart = ref(false);
+
+const tabChange = () => {
+	if (currentCase.value === "水平关系图") {
+		isVerticalChart.value = false;
+	} else {
+		isVerticalChart.value = true;
+	}
+};
+
+const graphData = ref({
+	rootId: "a",
+	nodes: [
+		{ id: "a", text: "a" },
+		{ id: "b", text: "b" },
+		{ id: "b1", text: "b1" },
+		{ id: "b1-1", text: "b1-1" },
+		{ id: "b1-2", text: "b1-2" },
+		{ id: "b1-3", text: "b1-3" },
+		{ id: "b1-4", text: "b1-4" },
+		{ id: "b1-5", text: "b1-5" },
+		{ id: "b1-6", text: "b1-6" },
+		{ id: "b2", text: "b2" },
+		{ id: "b2-1", text: "b2-1" },
+		{ id: "b2-2", text: "b2-2" },
+		{ id: "b2-3", text: "b2-3" },
+		{ id: "b2-4", text: "b2-4" },
+		{ id: "b3", text: "b3" },
+		{ id: "b3-1", text: "b3-1" },
+		{ id: "b3-2", text: "b3-2" },
+		{ id: "b3-3", text: "b3-3" },
+		{ id: "b3-4", text: "b3-4" },
+		{ id: "b3-5", text: "b3-5" },
+		{ id: "b3-6", text: "b3-6" },
+		{ id: "b3-7", text: "b3-7" },
+		{ id: "b4", text: "b4" },
+		{ id: "b4-1", text: "上海复龙鸿芯微系统技术有限公司" },
+		{ id: "b4-2", text: "b4-2" },
+		{ id: "b4-3", text: "b4-3" },
+		{ id: "b4-4", text: "b4-4" },
+		{ id: "b4-5", text: "b4-5" },
+		{ id: "b4-6", text: "b4-6" },
+		{ id: "b4-7", text: "b4-7" },
+		{ id: "b4-8", text: "b4-8" },
+		{ id: "b4-9", text: "b4-9" },
+		{ id: "b5", text: "b5" },
+		{ id: "b5-1", text: "b5-1" },
+		{ id: "b5-2", text: "b5-2" },
+		{ id: "b5-3", text: "b5-3" },
+		{ id: "b5-4", text: "b5-4" },
+		{ id: "b6", text: "b6" },
+		{ id: "b6-1", text: "b6-1" },
+		{ id: "b6-2", text: "b6-2" },
+		{ id: "b6-3", text: "b6-3" },
+		{ id: "b6-4", text: "b6-4" },
+		{ id: "b6-5", text: "b6-5" },
+		{ id: "c", text: "c" },
+		{ id: "c1", text: "c1" },
+		{ id: "c1-1", text: "c1-1" },
+		{ id: "c1-2", text: "c1-2" },
+		{ id: "c1-3", text: "c1-3" },
+		{ id: "c1-4", text: "c1-4" },
+		{ id: "c1-5", text: "c1-5" },
+		{ id: "c1-6", text: "c1-6" },
+		{ id: "c1-7", text: "c1-7" },
+		{ id: "c2", text: "c2" },
+		{ id: "c2-1", text: "c2-1" },
+		{ id: "c2-2", text: "c2-2" },
+		{ id: "c3", text: "c3" },
+		{ id: "c3-1", text: "c3-1" },
+		{ id: "c3-2", text: "c3-2" },
+		{ id: "c3-3", text: "c3-3" },
+		{ id: "d", text: "d" },
+		{ id: "d1", text: "d1" },
+		{ id: "d1-1", text: "d1-1" },
+		{ id: "d1-2", text: "d1-2" },
+		{ id: "d1-3", text: "d1-3" },
+		{ id: "d1-4", text: "d1-4" },
+		{ id: "d1-5", text: "d1-5" },
+		{ id: "d1-6", text: "d1-6" },
+		{ id: "d1-7", text: "d1-7" },
+		{ id: "d1-8", text: "d1-8" },
+		{ id: "d2", text: "d2" },
+		{ id: "d2-1", text: "d2-1" },
+		{ id: "d2-2", text: "d2-2" },
+		{ id: "d3", text: "d3" },
+		{ id: "d3-1", text: "d3-1" },
+		{ id: "d3-2", text: "d3-2" },
+		{ id: "d3-3", text: "d3-3" },
+		{ id: "d3-4", text: "d3-4" },
+		{ id: "d3-5", text: "d3-5" },
+		{ id: "d4", text: "d4" },
+		{ id: "d4-1", text: "d4-1" },
+		{ id: "d4-2", text: "d4-2" },
+		{ id: "d4-3", text: "d4-3" },
+		{ id: "d4-4", text: "d4-4" },
+		{ id: "d4-5", text: "d4-5" },
+		{ id: "d4-6", text: "d4-6" },
+		{ id: "e", text: "e" },
+		{ id: "e1", text: "上海复龙鸿芯微系统技术鸿芯微系统技术有限公司" },
+		{ id: "e1-1", text: "上海复龙鸿芯微系统技术鸿芯微系统技术有限公司" },
+		{ id: "e1-2", text: "e1-2" },
+		{ id: "e1-3", text: "e1-3" },
+		{ id: "e1-4", text: "e1-4" },
+		{ id: "e1-5", text: "e1-5" },
+		{ id: "e1-6", text: "e1-6" },
+		{ id: "e2", text: "e2" },
+		{ id: "e2-1", text: "e2-1" },
+		{ id: "e2-2", text: "e2-2" },
+		{ id: "e2-3", text: "e2-3" },
+		{ id: "e2-4", text: "e2-4" },
+		{ id: "e2-5", text: "e2-5" },
+		{ id: "e2-6", text: "e2-6" },
+		{ id: "e2-7", text: "e2-7" },
+		{ id: "e2-8", text: "e2-8" },
+		{ id: "e2-9", text: "e2-9" }
+	],
+	lines: [
+		{ from: "a", to: "b", text: '从属', fontColor: 'var(--color-orange-100)', color: 'orange', textOffset_x: -20, lineWidth: 5},
+		{ from: "b", to: "b1" },
+		{ from: "b1", to: "b1-1" },
+		{ from: "b1", to: "b1-2" },
+		{ from: "b1", to: "b1-3" },
+		{ from: "b1", to: "b1-4" },
+		{ from: "b1", to: "b1-5" },
+		{ from: "b1", to: "b1-6" },
+		{ from: "b", to: "b2" },
+		{ from: "b2", to: "b2-1" },
+		{ from: "b2", to: "b2-2" },
+		{ from: "b2", to: "b2-3" },
+		{ from: "b2", to: "b2-4" },
+		{ from: "b", to: "b3" },
+		{ from: "b3", to: "b3-1" },
+		{ from: "b3", to: "b3-2" },
+		{ from: "b3", to: "b3-3" },
+		{ from: "b3", to: "b3-4" },
+		{ from: "b3", to: "b3-5" },
+		{ from: "b3", to: "b3-6" },
+		{ from: "b3", to: "b3-7" },
+		{ from: "b", to: "b4" },
+		{ from: "b4", to: "b4-1" },
+		{ from: "b4", to: "b4-2" },
+		{ from: "b4", to: "b4-3" },
+		{ from: "b4", to: "b4-4" },
+		{ from: "b4", to: "b4-5" },
+		{ from: "b4", to: "b4-6" },
+		{ from: "b4", to: "b4-7" },
+		{ from: "b4", to: "b4-8" },
+		{ from: "b4", to: "b4-9" },
+		{ from: "b", to: "b5" },
+		{ from: "b5", to: "b5-1" },
+		{ from: "b5", to: "b5-2" },
+		{ from: "b5", to: "b5-3" },
+		{ from: "b5", to: "b5-4" },
+		{ from: "b", to: "b6" },
+		{ from: "b6", to: "b6-1" },
+		{ from: "b6", to: "b6-2" },
+		{ from: "b6", to: "b6-3" },
+		{ from: "b6", to: "b6-4" },
+		{ from: "b6", to: "b6-5" },
+		{ from: "a", to: "c" },
+		{ from: "c", to: "c1" },
+		{ from: "c1", to: "c1-1" },
+		{ from: "c1", to: "c1-2" },
+		{ from: "c1", to: "c1-3" },
+		{ from: "c1", to: "c1-4" },
+		{ from: "c1", to: "c1-5" },
+		{ from: "c1", to: "c1-6" },
+		{ from: "c1", to: "c1-7" },
+		{ from: "c", to: "c2" },
+		{ from: "c2", to: "c2-1" },
+		{ from: "c2", to: "c2-2" },
+		{ from: "c", to: "c3" },
+		{ from: "c3", to: "c3-1" },
+		{ from: "c3", to: "c3-2" },
+		{ from: "c3", to: "c3-3" },
+		{ from: "a", to: "d" },
+		{ from: "d", to: "d1" },
+		{ from: "d1", to: "d1-1" },
+		{ from: "d1", to: "d1-2" },
+		{ from: "d1", to: "d1-3" },
+		{ from: "d1", to: "d1-4" },
+		{ from: "d1", to: "d1-5" },
+		{ from: "d1", to: "d1-6" },
+		{ from: "d1", to: "d1-7" },
+		{ from: "d1", to: "d1-8" },
+		{ from: "d", to: "d2" },
+		{ from: "d2", to: "d2-1" },
+		{ from: "d2", to: "d2-2" },
+		{ from: "d", to: "d3" },
+		{ from: "d3", to: "d3-1" },
+		{ from: "d3", to: "d3-2" },
+		{ from: "d3", to: "d3-3" },
+		{ from: "d3", to: "d3-4" },
+		{ from: "d3", to: "d3-5" },
+		{ from: "d", to: "d4" },
+		{ from: "d4", to: "d4-1" },
+		{ from: "d4", to: "d4-2" },
+		{ from: "d4", to: "d4-3" },
+		{ from: "d4", to: "d4-4" },
+		{ from: "d4", to: "d4-5" },
+		{ from: "d4", to: "d4-6" },
+		{ from: "a", to: "e" },
+		{ from: "e", to: "e1" },
+		{ from: "e1", to: "e1-1" },
+		{ from: "e1", to: "e1-2" },
+		{ from: "e1", to: "e1-3" },
+		{ from: "e1", to: "e1-4" },
+		{ from: "e1", to: "e1-5" },
+		{ from: "e1", to: "e1-6" },
+		{ from: "e", to: "e2" },
+		{ from: "e2", to: "e2-1" },
+		{ from: "e2", to: "e2-2" },
+		{ from: "e2", to: "e2-3" },
+		{ from: "e2", to: "e2-4" },
+		{ from: "e2", to: "e2-5" },
+		{ from: "e2", to: "e2-6" },
+		{ from: "e2", to: "e2-7" },
+		{ from: "e2", to: "e2-8" },
+		{ from: "e2", to: "e2-9" }
+	]
+});
+
+const handleClickNode = (value) => {
+	console.log('value', value);
+	alert('我点击了node-'+ value.text)
+}
+
+const handleClickLine = (value) => {
+	console.log('value', value);
+	alert('我点击了line-'+ value.text)
+}
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.tab-box {
+	margin-top: 20px;
+	margin-left: 20px;
+}
+
+.chart-box {
+	width: 1600px;
+	height: 500px;
+}
+</style>
\ No newline at end of file

src/styles/components/RelationForceChart/index.vue

+<template>
+	<el-row class="wrapper layout-grid-line">
+		<el-col :span="span">
+			<pre>
+        {{
+          `
+import RelationForceChart from '@/components/base/RelationForceChart/index.vue'
+      <div class="chart-box">
+        <RelationForceChart :graph-data="graphData" />
+      </div>
+  `
+        }}
+      </pre>
+			<div class="chart-box">
+				<RelationForceChart @line-click="handleClickLine" @node-click="handleClickNode" :graph-data="graphData" />
+			</div>
+		</el-col>
+	</el-row>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import "@/styles/common.scss";
+import RelationForceChart from "@/components/base/RelationForceChart/index.vue";
+const span = 24;
+
+import Img from "@/assets/icons/symbol.png";
+
+const graphData = ref({
+	rootId: "a",
+	nodes: [
+		{
+			id: "a",
+			text: "root",
+			data: {
+				pic: Img,
+				name: "xxx图片"
+			}
+		},
+		{ id: "b", text: "b" },
+		{
+			id: "b1",
+			text: "上海复龙鸿芯微系统技术有限公司",
+			data: {
+				pic: Img,
+				name: "xxx图片"
+			}
+		},
+		{ id: "b1-1", text: "b1-1" },
+		{ id: "b1-2", text: "b1-2" },
+		{ id: "b1-3", text: "b1-3" },
+		{ id: "b1-4", text: "b1-4" },
+		{ id: "b1-5", text: "b1-5" },
+		{ id: "b1-6", text: "b1-6" },
+		{ id: "b2", text: "b2" },
+		{ id: "b2-1", text: "b2-1" },
+		{ id: "b2-2", text: "b2-2" },
+		{ id: "b2-3", text: "b2-3" },
+		{ id: "b2-4", text: "b2-4" },
+		{ id: "b3", text: "b3" },
+		{ id: "b3-1", text: "b3-1" },
+		{ id: "b3-2", text: "b3-2" },
+		{ id: "b3-3", text: "b3-3" },
+		{ id: "b3-4", text: "b3-4" },
+		{ id: "b3-5", text: "b3-5" },
+		{ id: "b3-6", text: "b3-6" },
+		{ id: "b3-7", text: "b3-7" },
+		{ id: "b4", text: "b4" },
+		{ id: "b4-1", text: "b4-1" },
+		{ id: "b4-2", text: "b4-2" },
+		{ id: "b4-3", text: "b4-3" },
+		{ id: "b4-4", text: "b4-4" },
+		{ id: "b4-5", text: "b4-5" },
+		{ id: "b4-6", text: "b4-6" },
+		{ id: "b4-7", text: "b4-7" },
+		{ id: "b4-8", text: "b4-8" },
+		{ id: "b4-9", text: "b4-9" },
+		{ id: "b5", text: "b5" },
+		{ id: "b5-1", text: "b5-1" },
+		{ id: "b5-2", text: "b5-2" },
+		{ id: "b5-3", text: "b5-3" },
+		{ id: "b5-4", text: "b5-4" },
+		{ id: "b6", text: "b6" },
+		{ id: "b6-1", text: "b6-1" },
+		{ id: "b6-2", text: "b6-2" },
+		{ id: "b6-3", text: "b6-3" },
+		{ id: "b6-4", text: "b6-4" },
+		{ id: "b6-5", text: "b6-5" },
+		{ id: "c", text: "c" },
+		{ id: "c1", text: "c1" },
+		{ id: "c1-1", text: "c1-1" },
+		{ id: "c1-2", text: "c1-2" },
+		{ id: "c1-3", text: "c1-3" },
+		{ id: "c1-4", text: "c1-4" },
+		{ id: "c1-5", text: "c1-5" },
+		{ id: "c1-6", text: "c1-6" },
+		{ id: "c1-7", text: "c1-7" },
+		{ id: "c2", text: "c2" },
+		{ id: "c2-1", text: "c2-1" },
+		{ id: "c2-2", text: "c2-2" },
+		{ id: "c3", text: "c3" },
+		{ id: "c3-1", text: "c3-1" },
+		{ id: "c3-2", text: "c3-2" },
+		{ id: "c3-3", text: "c3-3" },
+		{ id: "d", text: "d" },
+		{ id: "d1", text: "d1" },
+		{ id: "d1-1", text: "d1-1" },
+		{ id: "d1-2", text: "d1-2" },
+		{ id: "d1-3", text: "d1-3" },
+		{ id: "d1-4", text: "d1-4" },
+		{ id: "d1-5", text: "d1-5" },
+		{ id: "d1-6", text: "d1-6" },
+		{ id: "d1-7", text: "d1-7" },
+		{ id: "d1-8", text: "d1-8" },
+		{ id: "d2", text: "d2" },
+		{ id: "d2-1", text: "d2-1" },
+		{ id: "d2-2", text: "d2-2" },
+		{ id: "d3", text: "d3" },
+		{ id: "d3-1", text: "d3-1" },
+		{ id: "d3-2", text: "d3-2" },
+		{ id: "d3-3", text: "d3-3" },
+		{ id: "d3-4", text: "d3-4" },
+		{ id: "d3-5", text: "d3-5" },
+		{ id: "d4", text: "d4" },
+		{ id: "d4-1", text: "d4-1" },
+		{ id: "d4-2", text: "d4-2" },
+		{ id: "d4-3", text: "d4-3" },
+		{ id: "d4-4", text: "d4-4" },
+		{ id: "d4-5", text: "d4-5" },
+		{ id: "d4-6", text: "d4-6" },
+		{ id: "e", text: "e" },
+		{ id: "e1", text: "e1" },
+		{ id: "e1-1", text: "e1-1" },
+		{ id: "e1-2", text: "e1-2" },
+		{ id: "e1-3", text: "e1-3" },
+		{ id: "e1-4", text: "e1-4" },
+		{ id: "e1-5", text: "e1-5" },
+		{ id: "e1-6", text: "e1-6" },
+		{ id: "e2", text: "e2" },
+		{ id: "e2-1", text: "e2-1" },
+		{ id: "e2-2", text: "e2-2" },
+		{ id: "e2-3", text: "e2-3" },
+		{ id: "e2-4", text: "e2-4" },
+		{ id: "e2-5", text: "e2-5" },
+		{ id: "e2-6", text: "e2-6" },
+		{ id: "e2-7", text: "e2-7" },
+		{ id: "e2-8", text: "e2-8" },
+		{ id: "e2-9", text: "e2-9" }
+	],
+	lines: [
+		{ from: "a", to: "b", text:'控股', color: 'orange',fontColor:'red', lineWidth: 5, textOffset_y: -8, },
+		{ from: "b", to: "b1" },
+		{ from: "b1", to: "b1-1" },
+		{ from: "b1", to: "b1-2" },
+		{ from: "b1", to: "b1-3" },
+		{ from: "b1", to: "b1-4" },
+		{ from: "b1", to: "b1-5" },
+		{ from: "b1", to: "b1-6" },
+		{ from: "b", to: "b2" },
+		{ from: "b2", to: "b2-1" },
+		{ from: "b2", to: "b2-2" },
+		{ from: "b2", to: "b2-3" },
+		{ from: "b2", to: "b2-4" },
+		{ from: "b", to: "b3" },
+		{ from: "b3", to: "b3-1" },
+		{ from: "b3", to: "b3-2" },
+		{ from: "b3", to: "b3-3" },
+		{ from: "b3", to: "b3-4" },
+		{ from: "b3", to: "b3-5" },
+		{ from: "b3", to: "b3-6" },
+		{ from: "b3", to: "b3-7" },
+		{ from: "b", to: "b4" },
+		{ from: "b4", to: "b4-1" },
+		{ from: "b4", to: "b4-2" },
+		{ from: "b4", to: "b4-3" },
+		{ from: "b4", to: "b4-4" },
+		{ from: "b4", to: "b4-5" },
+		{ from: "b4", to: "b4-6" },
+		{ from: "b4", to: "b4-7" },
+		{ from: "b4", to: "b4-8" },
+		{ from: "b4", to: "b4-9" },
+		{ from: "b", to: "b5" },
+		{ from: "b5", to: "b5-1" },
+		{ from: "b5", to: "b5-2" },
+		{ from: "b5", to: "b5-3" },
+		{ from: "b5", to: "b5-4" },
+		{ from: "b", to: "b6" },
+		{ from: "b6", to: "b6-1" },
+		{ from: "b6", to: "b6-2" },
+		{ from: "b6", to: "b6-3" },
+		{ from: "b6", to: "b6-4" },
+		{ from: "b6", to: "b6-5" },
+		{ from: "a", to: "c" },
+		{ from: "c", to: "c1" },
+		{ from: "c1", to: "c1-1" },
+		{ from: "c1", to: "c1-2" },
+		{ from: "c1", to: "c1-3" },
+		{ from: "c1", to: "c1-4" },
+		{ from: "c1", to: "c1-5" },
+		{ from: "c1", to: "c1-6" },
+		{ from: "c1", to: "c1-7" },
+		{ from: "c", to: "c2" },
+		{ from: "c2", to: "c2-1" },
+		{ from: "c2", to: "c2-2" },
+		{ from: "c", to: "c3" },
+		{ from: "c3", to: "c3-1" },
+		{ from: "c3", to: "c3-2" },
+		{ from: "c3", to: "c3-3" },
+		{ from: "a", to: "d" },
+		{ from: "d", to: "d1" },
+		{ from: "d1", to: "d1-1" },
+		{ from: "d1", to: "d1-2" },
+		{ from: "d1", to: "d1-3" },
+		{ from: "d1", to: "d1-4" },
+		{ from: "d1", to: "d1-5" },
+		{ from: "d1", to: "d1-6" },
+		{ from: "d1", to: "d1-7" },
+		{ from: "d1", to: "d1-8" },
+		{ from: "d", to: "d2" },
+		{ from: "d2", to: "d2-1" },
+		{ from: "d2", to: "d2-2" },
+		{ from: "d", to: "d3" },
+		{ from: "d3", to: "d3-1" },
+		{ from: "d3", to: "d3-2" },
+		{ from: "d3", to: "d3-3" },
+		{ from: "d3", to: "d3-4" },
+		{ from: "d3", to: "d3-5" },
+		{ from: "d", to: "d4" },
+		{ from: "d4", to: "d4-1" },
+		{ from: "d4", to: "d4-2" },
+		{ from: "d4", to: "d4-3" },
+		{ from: "d4", to: "d4-4" },
+		{ from: "d4", to: "d4-5" },
+		{ from: "d4", to: "d4-6" },
+		{ from: "a", to: "e" },
+		{ from: "e", to: "e1" },
+		{ from: "e1", to: "e1-1" },
+		{ from: "e1", to: "e1-2" },
+		{ from: "e1", to: "e1-3" },
+		{ from: "e1", to: "e1-4" },
+		{ from: "e1", to: "e1-5" },
+		{ from: "e1", to: "e1-6" },
+		{ from: "e", to: "e2" },
+		{ from: "e2", to: "e2-1" },
+		{ from: "e2", to: "e2-2" },
+		{ from: "e2", to: "e2-3" },
+		{ from: "e2", to: "e2-4" },
+		{ from: "e2", to: "e2-5" },
+		{ from: "e2", to: "e2-6" },
+		{ from: "e2", to: "e2-7" },
+		{ from: "e2", to: "e2-8" },
+		{ from: "e2", to: "e2-9" }
+	]
+});
+
+
+const handleClickNode = (value) => {
+	console.log('value', value);
+	alert('我点击了node-'+ value.text)
+}
+
+const handleClickLine = (value) => {
+	console.log('value', value);
+	alert('我点击了line-'+ value.text)
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-box {
+	width: 1600px;
+	height: 600px;
+}
+</style>
\ No newline at end of file

src/styles/components/index.vue

@@ -61,6 +61,15 @@
                         <el-tab-pane label="词云图" lazy>
                             <WordCloudChart />
                         </el-tab-pane>
+                        <el-tab-pane label="关系图" lazy>
+                            <RelationChart />
+                        </el-tab-pane>
+                        <el-tab-pane label="中心关系图" lazy>
+                            <RelationCenterChart />
+                        </el-tab-pane>
+                        <el-tab-pane label="引力关系图" lazy>
+                            <RelationForceChart />
+                        </el-tab-pane>
                     </el-tabs>
                 </div>
             </el-space>
@@ -91,6 +100,9 @@ import NewsPage from './News/index.vue'
 import TimeTabPane from './TimeTabPane/index.vue'
 import AiInfo from './Ai/AiInfo/index.vue'
 import AiSummary from './Ai/AiSummary/index.vue'
+import RelationChart from './RelationChart/index.vue'
+import RelationCenterChart from './RelationCenterChart/index.vue'
+import RelationForceChart from './RelationForceChart/index.vue'
 </script>
 
 <style lang="scss" scoped>

src/views/bill/billHome/index.vue

@@ -24,7 +24,8 @@
 						</el-radio-group>
 					</div>
 					<div class="committee-cards-row">
-						<div v-for="item in committeeCardList" :key="item.id" class="committee-card">
+						<div v-for="item in committeeCardList" :key="item.id" class="committee-card"
+							@click="handleToDataLibrary(item)">
 							<div class="committee-card-icon">
 								<img :src="iconCommit" alt="委员会头像" />
 							</div>
@@ -1099,7 +1100,7 @@ const handleBox9Data = async () => {
 			{ label: "参议院通过", value: "参议院通过" },
 			{ label: "解决分歧", value: "分歧已解决" },
 			{ label: "完成立法", value: "完成立法" }
-]
+		]
 		const status = arr.filter(item => {
 			return item.value === box9LegislativeStatus.value
 		})[0].label
@@ -1375,6 +1376,22 @@ const handleResize = () => {
 	box9ChartInstance && box9ChartInstance.resize();
 };
 
+// 下钻至资源库
+const handleToDataLibrary = (item) => {
+
+	// console.log('item', item);
+	const selectParam = {
+		selectedOrg: item.name,
+		selectedCongress: item.chamber
+	}
+	const route = router.resolve({
+		path: "/dataLibrary/countryBill",
+		query: selectParam
+	});
+	window.open(route.href, "_blank");
+
+}
+
 onMounted(async () => {
 	window.addEventListener("resize", handleResize);
 	handleGetHylyList();
@@ -1787,6 +1804,10 @@ onUnmounted(() => {
 						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 						background: var(--bg-white-100);
 						box-sizing: border-box;
+						cursor: pointer;
+						&:hover{
+							background: var(--color-primary-2);
+						}
 
 						.committee-card-icon {
 							width: 54px;

src/views/comprehensiveSearch/searchResults/index.vue

@@ -324,6 +324,7 @@ const handleSearch = async () => {
 			}			
 			searchResults.value = res.data.records;
 			searchResults.value.forEach(item => {
+				item.titleText = item.originalTitle
 				item.originalTitle = highlightText(item.originalTitle, keyword.value);
 				item.originalDescription = highlightText(item.originalDescription, keyword.value);
 			});
@@ -393,7 +394,7 @@ const handleToPage = async item => {
 			}
 		} catch (error) {}
 	}
-	window.sessionStorage.setItem("curTabName", item.originalTitle);
+	window.sessionStorage.setItem("curTabName", item.titleText);
 	let curRoute;
 	switch (item.typeStr) {
 		case "法案":

src/views/coopRestriction/components/dataSub/index.vue

@@ -849,6 +849,9 @@ onBeforeUnmount(() => {
                 position: absolute;
                 right: 0;
                 bottom: 18px;
+                width: 74px;
+                height: 28px;
+                z-index: 2;
 
                 .btn-box {
                     width: 74px;
@@ -953,6 +956,9 @@ onBeforeUnmount(() => {
                 position: absolute;
                 right: 0;
                 bottom: 18px;
+                width: 74px;
+                height: 28px;
+                z-index: 2;
 
                 .btn-box {
                     width: 74px;

src/views/dataLibrary/bill/countryBill/index.vue

@@ -1033,7 +1033,7 @@ const initParam = () => {
   if (hasQuery) {
     selectedArea.value = route.query.domains ? route.query.domains : '全部领域'
 
-    if (Array.isArray(JSON.parse(route.query.selectedDate)) && JSON.parse(route.query.selectedDate).length) {
+    if (route.query.selectedDate && Array.isArray(JSON.parse(route.query.selectedDate)) && JSON.parse(route.query.selectedDate).length) {
       selectedDate.value = '自定义'
       customTime.value = JSON.parse(route.query.selectedDate)
     }

src/views/dataLibrary/decree/index.vue

@@ -722,15 +722,15 @@ const fetchTableData = async () => {
   const params = {
     page: currentPage.value,
     size: pageSize.value,
-    keyword: '',
+    // keyword: '',
     type: 2,  // type 1= 法案  2= 政令 3 =智库 4=智库报告 5=实体清单【制裁记录】 6= 人物 7= 机构 8=新闻 9= 社媒
     domains: selectedArea.value === '全部领域' ? null : [selectedArea.value],
     proposedDateStart: customTime.value[0]?customTime.value[0]:null,
     proposedDateEnd: customTime.value[1]?customTime.value[1]:null,
     organizationName: selectedIns.value === '全部机构' ? null : selectedIns.value,
     decreeType: selectedDecreeType.value === '全部类型' ? null : selectedDecreeType.value,
-    isInvolveCn: isInvolveCn.value ? 'Y' : 'N',
-    isTechRelated: isInvolveTechnology.value ? 'Y' : 'N',
+    isInvolveCn: isInvolveCn.value ? 'Y' : null,
+    isTechRelated: isInvolveTechnology.value ? 'Y' : null,
     sort: isSort.value ? 0 : 1     // 0 先按分数降序 后按时间降序  1 先按分数降序，再按时间升序
   }
   try {
@@ -794,15 +794,15 @@ const fetchAllData = async () => {
   const params = {
     page: 1,
     size: 9999,
-    keyword: '',
+    // keyword: '',
     type: 2,  // type 1= 法案  2= 政令 3 =智库 4=智库报告 5=实体清单【制裁记录】 6= 人物 7= 机构 8=新闻 9= 社媒
     domains: selectedArea.value === '全部领域' ? null : [selectedArea.value],
     proposedDateStart: customTime.value[0],
     proposedDateEnd: customTime.value[1],
     organizationName: selectedIns.value === '全部机构' ? null : selectedIns.value,
     decreeType: selectedDecreeType.value === '全部类型' ? null : selectedDecreeType.value,
-    isInvolveCn: isInvolveCn.value ? 'Y' : 'N',
-    isTechRelated: isInvolveTechnology.value ? 'Y' : 'N',
+    isInvolveCn: isInvolveCn.value ? 'Y' : null,
+    isTechRelated: isInvolveTechnology.value ? 'Y' : null,
     sort: isSort.value ? 0 : 1
   }
   try {
@@ -955,7 +955,7 @@ const initParam = () => {
   if (hasQuery) {
     selectedArea.value = route.query.domains ? route.query.domains : '全部领域'
 
-    if (Array.isArray(JSON.parse(route.query.selectedDate)) && JSON.parse(route.query.selectedDate).length) {
+    if (route.query.selectedDate && Array.isArray(JSON.parse(route.query.selectedDate)) && JSON.parse(route.query.selectedDate).length) {
       selectedDate.value = '自定义'
       customTime.value = JSON.parse(route.query.selectedDate)
     }

src/views/thinkTank/CongressHearingView/index.vue

@@ -83,23 +83,23 @@
                 <div class="text-box">
                   <div class="time">
                     <div class="time-title">发布时间:</div>
-                    <div class="time-content">{{ publishTime }}</div>
+                    <div class="time-content">{{ thinkInfo.testimonyDate }}</div>
                   </div>
                   <div class="topic">
-                    <div class="topic-title">报告主题:</div>
-                    <div class="topic-content">{{ reportTopic }}</div>
+                    <div class="topic-title">委员会:</div>
+                    <div class="topic-content">{{ thinkInfo.committeeZh }}</div>
                   </div>
                   <div class="author">
                     <div class="author-title">报告作者:</div>
                     <div class="author-content">
-                      <template v-if="Array.isArray(reportAuthors) && reportAuthors.length">
-                        <span v-if="reportAuthors.length === 1">
-                          {{ reportAuthors[0].name }}
+                      <template v-if="Array.isArray(thinkInfo.relatedPersons) && thinkInfo.relatedPersons.length">
+                        <span v-if="thinkInfo.relatedPersons.length === 1">
+                          {{ thinkInfo.relatedPersons[0].name }}
                         </span>
 
                         <!-- 多个作者：显示第一个 + 等 -->
                         <span v-else>
-                          {{ reportAuthors[0].name }}等{{ reportAuthors.length }}人
+                          {{ thinkInfo.relatedPersons[0].name }}等{{ thinkInfo.relatedPersons.length }}人
                         </span>
 
                       </template>
@@ -107,11 +107,11 @@
                   </div>
                 </div>
                 <div class="author-box">
-                  <div class="author-item" v-for="(author, idx) in reportAuthors" :key="idx"
-                    v-if="Array.isArray(reportAuthors) && reportAuthors.length"
+                  <div class="author-item" v-for="(author, idx) in thinkInfo.relatedPersons" :key="idx"
+                    v-if="Array.isArray(thinkInfo.relatedPersons) && thinkInfo.relatedPersons.length"
                     @click="handleClickReportAuthor(author)">
-                    <div class="image"><img :src="author.avatar ? author.avatar : DefaultIcon1" alt=""
-                        @error="() => { if (author.avatar) author.avatar = null; }" /></div>
+                    <div class="image"><img :src="author.avatarUrl ? author.avatarUrl : DefaultIcon1" alt=""
+                        @error="() => { if (author.avatarUrl) author.avatarUrl = null; }" /></div>
                     <div class="author-text">
                       <div class="author-name">{{ author.name }}</div>
 
@@ -932,7 +932,7 @@ onMounted(() => {
             flex-direction: column;
 
             .time {
-              height: 24px;
+              height: 30px;
               display: flex;
               gap: 4px;
 
@@ -942,7 +942,7 @@ onMounted(() => {
                 font-family: "Source Han Sans CN";
                 font-weight: 700;
                 font-size: 16px;
-                line-height: 24px;
+                line-height: 30px;
                 letter-spacing: 1px;
                 text-align: left;
                 color: rgb(59, 65, 75);
@@ -958,6 +958,7 @@ onMounted(() => {
                 letter-spacing: 0px;
                 text-align: left;
                 color: rgb(59, 65, 75);
+                margin-top: 3px;
               }
             }
 
@@ -972,7 +973,7 @@ onMounted(() => {
                 font-family: "Source Han Sans CN";
                 font-weight: 700;
                 font-size: 16px;
-                line-height: 24px;
+                line-height: 30px;
                 letter-spacing: 1px;
                 text-align: left;
                 color: rgb(59, 65, 75);
@@ -1004,7 +1005,7 @@ onMounted(() => {
                 font-family: "Source Han Sans CN";
                 font-weight: 700;
                 font-size: 16px;
-                line-height: 24px;
+                line-height: 30px;
                 letter-spacing: 1px;
                 text-align: left;
                 color: rgb(59, 65, 75);
@@ -1016,6 +1017,7 @@ onMounted(() => {
                 font-family: "Source Han Sans CN";
                 font-weight: 400;
                 font-size: 16px;
+                margin-top: 3px;
                 line-height: 24px;
                 letter-spacing: 0px;
                 text-align: left;

src/views/thinkTank/ThinkTankDetail/PolicyTracking/index.vue

@@ -2125,6 +2125,7 @@ onMounted(async () => {
 									height: 16px;
 									margin-top: 3px;
 									margin-left: 9px;
+									cursor: pointer;
 
 									img {
 										width: 100%;
@@ -2198,6 +2199,7 @@ onMounted(async () => {
 										height: 20px;
 										display: flex;
 										margin-top: 2px;
+										cursor: pointer;
 
 										.img {
 											width: 100%;

src/views/thinkTank/ThinkTankDetail/thinkDynamics/CongressHearing/index.vue

@@ -76,7 +76,7 @@
       <div class="card-box">
         <div class="card-content">
           <div v-for="(item, index) in hearingData" :key="item.id">
-            <div class="card-item" @click="handleToReportDetail(item)">
+            <div class="card-item">
 
               <img class="card-item-img" :src="item.coverImgUrl" alt="report image" />
               <div class="card-item-text">
@@ -88,7 +88,9 @@
                   <img src="../images/image open.png" alt="open icon" class="card-open-image"
                     @click.stop="handleToReportDetail(item)" />
                 </div>
-                <div class="card-item-category" v-if="item.category"> {{ item.category }}</div>
+                <div class="card-item-category">
+                  <AreaTag v-for="(val, idx) in item.category" :key="idx" :tagName="val" />
+                </div>
               </div>
 
             </div>
@@ -558,19 +560,12 @@ const handleToReportDetail = item => {
 
             .card-item-category {
 
-              padding: 1px 8px;
               box-sizing: border-box;
-              border: 1px solid rgb(231, 243, 255);
-              border-radius: 4px;
+
               display: inline-flex;
 
-              background-color: rgb(247, 248, 249);
-              color: rgba(132, 136, 142, 1);
-              font-family: Microsoft YaHei;
-              font-size: 14px;
-              font-weight: 400;
-              line-height: 20px;
-              letter-spacing: 0px;
+              gap: 8px;
+
               text-align: left;
               width: fit-content;
             }

src/views/thinkTank/ThinkTankDetail/thinkDynamics/index.vue

@@ -373,7 +373,7 @@ const mapTestimonyToHearingItem = (raw, index) => {
 			item.summary ||
 			item.subtitle ||
 			"",
-		category: item.category || item.domain || item.area || item.field || ""
+		category: item.category || item.domains || item.area || item.field || ""
 	};
 };
 
@@ -414,7 +414,12 @@ const handleGetThinkDynamicsReport = async (payload) => {
 			const res = await getThinkTankTestimoniesByThinkTankId({
 				thinkTankId,
 				pageNum: Math.max(0, (currentPage.value || 1)),
-				pageSize: 10
+				pageSize: 10,
+
+				domainIds,
+				startDate,
+				endDate,
+				title: keyword || undefined
 			});
 			if (res.code === 200 && res.data) {
 				const list = Array.isArray(res.data.content) ? res.data.content : Array.isArray(res.data) ? res.data : [];
@@ -432,7 +437,14 @@ const handleGetThinkDynamicsReport = async (payload) => {
 			const res = await getThinkTankProjectsByThinkTankId({
 				thinkTankId,
 				pageNum: currentPage.value,
-				pageSize: 12
+				pageSize: 12,
+				sortFun: sort.value === true,
+				sortField: "startDate",
+				sortOrder: sort.value === true ? "asc" : "desc",
+				domainIds,
+				startDate,
+				endDate,
+				projectName: keyword || undefined
 			});
 			if (res.code === 200 && res.data) {
 				curFooterProjectList.value = res.data.content || [];

src/views/thinkTank/components/HomeMainFooterMain.vue

@@ -210,6 +210,7 @@ const formatDate = (str) => {
         border-radius: 10px;
         box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
         background: rgba(255, 255, 255, 1);
+        cursor: pointer;
 
         .footer-card-top {
           width: 364px;

src/views/thinkTank/components/ThinkTankCongressHearingOverview.vue

@@ -60,18 +60,21 @@
         <div class="card-content">
           <div v-for="(item, index) in hearingData" :key="item.id ?? index">
             <div class="card-item">
-              <img class="card-item-img" :src=item.coverImgUrl alt="report image" />
+              <img class="card-item-img" :src="item.coverImgUrl" alt="report image" />
               <div class="card-item-text">
                 <div class="card-item-title">
                   {{ item.titleZh }}
                 </div>
                 <div class="card-item-time">
-                  {{ item.testimonyDate + ' · ' + item.committeeZh }}
+                  {{ item.testimonyDate + ' · ' + item.thinkTankName + ' · ' + item.committeeZh }}
                   <img src="../ThinkTankDetail/thinkDynamics/images/image open.png" alt="open icon"
                     class="card-open-image" @click="emit('report-click', item)" />
                 </div>
-                <div class="card-item-category" v-if="item.category">
-                  <AreaTag :key="`cat-${item.id}`" :tagName="item.category" />
+
+                <div class="card-item-category" v-if="item.domains">
+                  <div v-for="(value, index) in item.domains" :key="`domain-${index}`">
+                    <AreaTag :key="`cat-${item.id}`" :tagName="value" />
+                  </div>
                 </div>
               </div>
             </div>
@@ -111,17 +114,33 @@ import {
 const props = defineProps({
   researchTypeList: { type: Array, default: () => [] },
   researchTimeList: { type: Array, default: () => [] },
+  selectedAreaList: { type: Array, default: () => [] },
+  selectedPubTimeList: { type: Array, default: () => [] },
   hearingData: { type: Array, default: () => [] },
-  total: { type: Number, default: 0 }
+  total: { type: Number, default: 0 },
+  currentPage: { type: Number, default: 1 }
 });
 
-const emit = defineEmits(["report-click"]);
+const emit = defineEmits([
+  "update:selectedAreaList",
+  "update:selectedPubTimeList",
+  "filter-change",
+  "page-change",
+  "report-click"
+]);
 
 const pageSize = 10;
-const currentPage = ref(1);
 
-const selectedResearchIds = ref([RESOURCE_FILTER_ALL_AREA]);
-const selectedResearchTimeIds = ref([RESOURCE_FILTER_ALL_TIME]);
+const selectedResearchIds = computed(() => (
+  Array.isArray(props.selectedAreaList) && props.selectedAreaList.length
+    ? props.selectedAreaList
+    : [RESOURCE_FILTER_ALL_AREA]
+));
+const selectedResearchTimeIds = computed(() => (
+  Array.isArray(props.selectedPubTimeList) && props.selectedPubTimeList.length
+    ? props.selectedPubTimeList
+    : [RESOURCE_FILTER_ALL_TIME]
+));
 const selectedResearchHearingIds = ref([RESOURCE_FILTER_ALL_DEPT]);
 
 
@@ -131,13 +150,15 @@ const researchHearingList = ref([
 ]);
 
 const handleAreaGroupChange = (val) => {
-  selectedResearchIds.value = normalizeExclusiveAllOption(val, RESOURCE_FILTER_ALL_AREA);
-  currentPage.value = 1;
+  emit("update:selectedAreaList", normalizeExclusiveAllOption(val, RESOURCE_FILTER_ALL_AREA));
+  emit("page-change", 1);
+  emit("filter-change");
 };
 
 const handleTimeGroupChange = (val) => {
-  selectedResearchTimeIds.value = normalizeExclusiveAllOption(val, RESOURCE_FILTER_ALL_TIME);
-  currentPage.value = 1;
+  emit("update:selectedPubTimeList", normalizeExclusiveAllOption(val, RESOURCE_FILTER_ALL_TIME));
+  emit("page-change", 1);
+  emit("filter-change");
 };
 
 const handleDeptGroupChange = (val) => {
@@ -150,7 +171,8 @@ const handleDeptGroupChange = (val) => {
 
 
 const handlePageChange = page => {
-  currentPage.value = page;
+  emit("page-change", page);
+  emit("filter-change");
 };
 </script>
 
@@ -340,6 +362,7 @@ const handlePageChange = page => {
       height: 24px;
       display: flex;
 
+
     }
   }
 }

src/views/thinkTank/components/ThinkTankPolicyAdviceOverview.vue

@@ -370,6 +370,7 @@ const handleYearGroupChange = (val) => {
             height: 16px;
             margin-left: 9px;
             margin-top: 3px;
+            cursor: pointer;
 
             img {
               width: 100%;

src/views/thinkTank/index.vue

@@ -56,7 +56,7 @@
 					</div>
 				</div>
 				<div class="home-main-header-card-box">
-					<div class="card" v-for="(item, index) in sortedCardList" :key="index" @click="handleClick(item)">
+					<div class="card" v-for="(item, index) in sortedCardList" :key="index">
 						<div class="red-info" v-if="item.increaseReportNumber != 0 && item.increaseReportNumber != null">{{ "+" }}{{
 							item.increaseReportNumber }}</div>
 						<div class="card-header">
@@ -67,12 +67,12 @@
 								{{ "No." + (index + 1) }}
 							</div> -->
 							<div class="rank">
-								<div class=" number">{{ item.reportNumber }} {{ "篇报告" }}</div>
+								<div class=" number" @click="handleToDataLibrary(item)">{{ item.reportNumber }} {{ "篇报告" }}</div>
 
 							</div>
 						</div>
 						<div class="card-title">
-							<div class="title-left">{{ item.name }}</div>
+							<div class="title-left" @click="handleClick(item)">{{ item.name }}</div>
 
 							<div class="title-right">{{ item.country }}</div>
 						</div>
@@ -369,7 +369,9 @@
 
 					<ThinkTankCongressHearingOverview v-else-if="activeCate === '国会听证会'" :key="`congress-${resourceTabResetKey}`"
 						:hearing-data="hearingData" :research-type-list="areaList" :research-time-list="pubTimeList"
-						:total="projectTotal" @report-click="handleToHearingDetail" />
+						v-model:selectedAreaList="congressSelectedAreaList" v-model:selectedPubTimeList="congressSelectedPubTimeList"
+						:total="congressTotal" :current-page="congressCurrentPage" @filter-change="handleCongressFilterChange"
+						@page-change="handleCongressCurrentChange" @report-click="handleToHearingDetail" />
 
 					<ThinkTankPolicyAdviceOverview v-else :key="`policy-${resourceTabResetKey}`" :research-type-list="areaList"
 						:research-time-list="pubTimeList" :list="policyFooterList" :total="policyTotal"
@@ -386,7 +388,7 @@
 import RiskSignal from "@/components/base/riskSignal/index.vue";
 import NewsList from "@/components/base/newsList/index.vue";
 import MessageBubble from "@/components/base/messageBubble/index.vue"
-import { onMounted, ref, computed, reactive, nextTick } from "vue";
+import { onBeforeUnmount, onMounted, ref, computed, reactive, nextTick } from "vue";
 import scrollToTop from "@/utils/scrollToTop";
 import router from "@/router";
 import DivideHeader from "@/components/DivideHeader.vue";
@@ -507,6 +509,8 @@ const handleGetAllThinkTankList = async () => {
 		console.error("获取智库列表error", error);
 	}
 };
+
+let box1CarouselTimer = null;
 const routerTo = useRouter()
 
 // 跳转到全部智库页面
@@ -1822,6 +1826,22 @@ const surveyTotal = ref(0);
 //国会听证会总数
 const projectTotal = ref(0);
 
+// ===== 资源库-国会听证会：独立状态（不影响其它 tab）=====
+const congressSelectedAreaList = ref([RESOURCE_FILTER_ALL_AREA]);
+const congressSelectedPubTimeList = ref([RESOURCE_FILTER_ALL_TIME]);
+const congressCurrentPage = ref(1);
+const congressTotal = ref(0);
+
+const handleCongressFilterChange = () => {
+	congressCurrentPage.value = 1;
+	handleGetThinkTankHearings();
+};
+
+const handleCongressCurrentChange = (page) => {
+	congressCurrentPage.value = page;
+	handleGetThinkTankHearings();
+};
+
 const handleSurveyFilterChange = () => {
 	surveyCurrentPage.value = 1;
 	handleGetThinkTankSurvey();
@@ -1839,7 +1859,23 @@ const handleGetThinkTankSurvey = async () => {
 	);
 
 	try {
-		const res = await getThinkTankProjects();
+		const params = {
+			pageNum: surveyCurrentPage.value,
+			pageSize: 12,
+			sortField: "startDate",
+			sortOrder: surveySort.value === true ? "asc" : "desc",
+			domainIds: (() => {
+				const areas = stripAllAreaForRequest(surveySelectedAreaList.value);
+				const allAreaIds = (areaList.value || []).map((a) => a.id);
+				if (isSelectionCoveringAllOptions(areas, allAreaIds)) {
+					return "";
+				}
+				return arrayToString(areas);
+			})(),
+			startDate,
+			endDate
+		};
+		const res = await getThinkTankProjects(params);
 		if (res.code === 200 && res.data) {
 			surveyFooterList.value = res.data.content;
 			surveyTotal.value = res.data.totalElements;
@@ -1852,16 +1888,33 @@ const handleGetThinkTankSurvey = async () => {
 	}
 };
 const handleGetThinkTankHearings = async () => {
-
-
 	try {
-		const res = await getThinkTankTestimonies();
+		const { startDate, endDate } = getResourceLibraryReportDateRangeFromTimeSelection(
+			stripAllTimeForRequest(congressSelectedPubTimeList.value),
+			(pubTimeList.value || []).map((x) => x.id)
+		);
+		const params = {
+			pageNum: congressCurrentPage.value,
+			pageSize: 10,
+			sortFun: congressResourceSort.value === true,
+			domainIds: (() => {
+				const areas = stripAllAreaForRequest(congressSelectedAreaList.value);
+				const allAreaIds = (areaList.value || []).map((a) => a.id);
+				if (isSelectionCoveringAllOptions(areas, allAreaIds)) {
+					return "";
+				}
+				return arrayToString(areas);
+			})(),
+			startDate,
+			endDate
+		};
+		const res = await getThinkTankTestimonies(params);
 		if (res.code === 200 && res.data) {
 			hearingData.value = res.data.content;
-			projectTotal.value = res.data.totalElements;
+			congressTotal.value = res.data.totalElements;
 		} else {
 			hearingData.value = [];
-			projectTotal.value = 0;
+			congressTotal.value = 0;
 		}
 	} catch (error) {
 		console.error("获取调查项目 error", error);
@@ -2139,12 +2192,32 @@ const handleSearch = () => {
 	window.open(curRoute.href, "_blank");
 };
 
+// 下钻至数据资源库
+const handleToDataLibrary = (item) => {
+	if(!item.reportNumber) {
+		ElMessage.warning('当前智库没有相关报告！')
+		return
+	}
+	const selectParam = {
+		orgnizationName: item.name
+	}
+	const route = router.resolve({
+		path: "/dataLibrary/dataThinkTank",
+		query: selectParam
+	});
+	window.open(route.href, "_blank");
+}
+
 onMounted(async () => {
 	handleGetThinkTankList();
 	handleGetAllThinkTankList()
 	await getStatCountInfo();
 	// 定义一个定时器，每隔2秒轮播一次
-	setInterval(() => {
+	if (box1CarouselTimer) {
+		clearInterval(box1CarouselTimer);
+		box1CarouselTimer = null;
+	}
+	box1CarouselTimer = setInterval(() => {
 		// 索引加1
 		box1DataIndex.value++;
 		// 如果索引大于等于数组长度，重置为0，实现循环轮播
@@ -2167,6 +2240,13 @@ onMounted(async () => {
 	handleGetThinkTankReportNews();
 	handleGetThinkTankReportRemarks();
 });
+
+onBeforeUnmount(() => {
+	if (box1CarouselTimer) {
+		clearInterval(box1CarouselTimer);
+		box1CarouselTimer = null;
+	}
+});
 </script>
 
 <style lang="scss" scoped>
@@ -2543,6 +2623,11 @@ onMounted(async () => {
 								margin-top: 4px;
 								margin-left: 26px;
 								color: rgb(5, 95, 194);
+
+								&:hover {
+									font-weight: bold;
+									text-decoration: underline;
+								}
 							}
 						}
 
@@ -2567,6 +2652,12 @@ onMounted(async () => {
 							line-height: 24px;
 							letter-spacing: 1px;
 							text-align: left;
+
+							&:hover {
+								color: var(--color-primary-100);
+								font-weight: bold;
+								text-decoration: underline;
+							}
 						}
 
 						.title-right {
@@ -3611,6 +3702,9 @@ onMounted(async () => {
 							position: absolute;
 							right: 0;
 							bottom: 18px;
+							width: 74px;
+							height: 28px;
+							z-index: 2;
 
 							.btn-box {
 								width: 74px;
@@ -3750,6 +3844,9 @@ onMounted(async () => {
 							position: absolute;
 							right: 0;
 							bottom: 18px;
+							width: 74px;
+							height: 28px;
+							z-index: 2;
 
 							.btn-box {
 								width: 74px;
@@ -3926,6 +4023,9 @@ onMounted(async () => {
 							position: absolute;
 							right: 0;
 							bottom: 18px;
+							width: 74px;
+							height: 28px;
+							z-index: 2;
 
 							.btn-box {
 								width: 74px;