刘宇琪 科技人物观点 概览页

src/views/technologyFigures/component/PersonTable.vue

@@ -20,7 +20,7 @@
               </div>
             </div>
           </div>
-          <div class="person-info">
+          <div class="person-info" @click="handleClickToCharacter(item.personId)">
             <div class="person-name">{{ item.name }}</div>
             <div class="person-position">{{ item.position }}</div>
           </div>
@@ -49,7 +49,8 @@
 import { ref,onMounted,defineProps,watch } from "vue";
 import personData from "../json/personData.json"; // 引入JSON数据
 import {getMainCharactersView } from "@/api/technologyFigures/technologyFigures";
-
+import { useCharacterNav } from "../utils/useCharacterNav";
+const { handleClickToCharacter } = useCharacterNav();
 const props = defineProps({
   persontypeid: {
     type: String,
@@ -86,7 +87,8 @@ const handlegetMainCharactersViewFn = async () => {
           position: item.positionTitle,
           tags: ["1", "2"],
           chinaRelatedCount: item.remarksCount,
-          mediaQuoteCount: item.remarksCount
+          mediaQuoteCount: item.remarksCount,
+          personId:item.personId
         }
         
       });

src/views/technologyFigures/component/SourceLibrary.vue

@@ -77,7 +77,7 @@ watch(
 const router = useRouter();
 
 const total = ref(0);
-const pageSize = ref(16);
+const pageSize = ref(20);
 const loading = ref(false);
 const abortController = ref(null);
 const currentPage = ref(1);
@@ -138,16 +138,17 @@ const handleCurrentChange = page => {
 // 跳转人物主页
 const handleClcikToCharacter = async id => {
 	const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList"));
-
+	
 	let type = 0;
 	let personTypeName = "";
 
 	const params = {
 		personId: id
 	};
+	
 	try {
 		const res = await getPersonSummaryInfo(params);
-		console.log("人物全局信息", res);
+		console.log("人物全局信息2", res);
 		if (res.code === 200 && res.data) {
 			const arr = personTypeList.filter(item => {
 				return item.typeId === res.data.personType;
@@ -158,13 +159,13 @@ const handleClcikToCharacter = async id => {
 				personTypeName = arr[0].typeName;
 				console.log("personTypeName", personTypeName);
 
-				if (personTypeName === "科技企业领袖") {
+				if (personTypeName === "科技企业领袖"||personTypeName ==='政府官员') {
 					type = 1;
 				} else if (personTypeName === "国会议员") {
 					type = 2;
 				} else if (personTypeName === "智库研究人员") {
 					type = 3;
-				} else {
+				}  else {
 					personTypeName = "";
 					ElMessage.warning("找不到当前人员的类型值！");
 					return;
@@ -205,10 +206,11 @@ const handlePageChange = p => {
 }
 
 .source-library-grid {
-	width: 1600px;
-	display: grid;
-	grid-template-columns: repeat(4, 1fr);
-	gap: 16px 16px;
+  width: 1600px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr); 
+  grid-template-rows: repeat(5, 1fr);    
+  gap: 16px 16px;
 }
 
 .source-library-card {

src/views/technologyFigures/component/speechStance.vue

@@ -3,16 +3,16 @@
   <div class="speech-stance-container">
     <div class="speech-stance-grid">
       <div v-for="(item, index) in PersonRelation" :key="index" class="speech-stance-card">
-        <div class="speech-stance-avatar-wrapper">
+        <div class="speech-stance-avatar-wrapper"  @click="handleClcikToCharacter(item.personId)">
           <img :src="item.personImage" alt="" class="speech-stance-avatar" />
         </div>
-        <div class="speech-stance-text-content">
+        <div class="speech-stance-text-content"  @click="handleClcikToCharacter(item.personId)">
           <div style="display: flex;      width: 683px;">
             <h3 class="speech-stance-name">{{ item.personName }}</h3>
             <p class="speech-stance-title">{{ item.positionTitle }}</p>
           </div>
 
-          <p class="speech-stance-content">{{ item.remarks }}</p>
+          <p class="speech-stance-content" :title="item.remarks">{{ item.remarks }}</p>
         </div>
        
       </div>
@@ -26,6 +26,9 @@ import { onMounted, ref,defineProps,watch } from "vue";
 import speechStance from '../json/speechStance.json';
 import {getPersonRelation} from "@/api/technologyFigures/technologyFigures"
 
+import {  getPersonSummaryInfo } from "@/api/technologyFigures/technologyFigures";
+import { useRouter } from "vue-router";
+const router = useRouter();
 const props = defineProps({
   fieldSelected: {
     type: String,
@@ -36,7 +39,59 @@ const props = defineProps({
       default: 0
     }
 });
-
+// 跳转人物主页
+const handleClcikToCharacter = async id => {
+	const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList"));
+ 
+	let type = 0;
+	let personTypeName = "";
+
+	const params = {
+		personId: id
+	};
+	try {
+		const res = await getPersonSummaryInfo(params);
+		console.log("人物全局信息", res);
+		if (res.code === 200 && res.data) {
+			const arr = personTypeList.filter(item => {
+				return item.typeId === res.data.personType;
+			});
+			console.log("arr", arr);
+
+			if (arr && arr.length > 0) {
+				personTypeName = arr[0].typeName;
+				console.log("personTypeName", personTypeName);
+
+				if (personTypeName === "科技企业领袖") {
+					type = 1;
+				} else if (personTypeName === "国会议员") {
+					type = 2;
+				} else if (personTypeName === "智库研究人员") {
+					type = 3;
+				} else {
+					personTypeName = "";
+					ElMessage.warning("找不到当前人员的类型值！");
+					return;
+				}
+				const route = router.resolve({
+					path: "/characterPage",
+					query: {
+						type: type, // type=1为科技企业领袖，2为国会议员，3为智库研究人员
+						personId: id
+					}
+				});
+				window.open(route.href, "_blank");
+			} else {
+				personTypeName = "";
+				ElMessage.warning("找不到当前人员的类型值！");
+				return;
+			}
+		} else {
+			ElMessage.warning("找不到当前人员的类型值！");
+			return;
+		}
+	} catch (error) {}
+};
 const aId = ref();
 const params = ref({});
 
@@ -149,11 +204,8 @@ onMounted(async () => {
   line-height: 30px;
   letter-spacing: 0px;
   text-align: left;
-  white-space: nowrap;
-  /* 禁止换行 */
-  overflow: hidden;
-  /* 隐藏溢出内容 */
-  text-overflow: ellipsis;
-  /* 溢出部分显示省略号 */
+  white-space: nowrap; 
+  overflow: hidden; 
+  text-overflow: ellipsis; 
 }
 </style>
\ No newline at end of file

src/views/technologyFigures/utils/useCharacterNav.js

+/**
+ * useCharacterNav - 人物跳转复用方法（Vue 3 Composable）
+ *
+ * 使用方式：
+ *   import { useCharacterNav } from "@/hooks/useCharacterNav";
+ *   const { handleClickToCharacter } = useCharacterNav();
+ *   handleClickToCharacter(personId);
+ */
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import {  getPersonSummaryInfo } from "@/api/technologyFigures/technologyFigures";
+
+// 人物类型名称 -> type 映射
+const PERSON_TYPE_MAP = {
+  "科技企业领袖": 1,
+  "国会议员": 2,
+  "智库研究人员": 3,
+};
+
+export function useCharacterNav() {
+  const router = useRouter();
+
+  /**
+   * 根据人物 ID 查询类型并跳转到人物详情页
+   * @param {string|number} id - 人物 ID
+   */
+  const handleClickToCharacter = async (id) => {
+    const personTypeList = JSON.parse(
+      window.sessionStorage.getItem("personTypeList") || "[]"
+    );
+
+    const params = { personId: id };
+    console.log('dsdsdwdwf',id)
+    try {
+      const res = await getPersonSummaryInfo(params);
+
+      if (res.code !== 200 || !res.data) {
+        ElMessage.warning("找不到当前人员的类型值！");
+        return;
+      }
+
+      const matched = personTypeList.find(
+        (item) => item.typeId === res.data.personType
+      );
+
+      if (!matched) {
+        ElMessage.warning("找不到当前人员的类型值！");
+        return;
+      }
+
+      const personTypeName = matched.typeName;
+      const type = PERSON_TYPE_MAP[personTypeName];
+
+      if (!type) {
+        ElMessage.warning("找不到当前人员的类型值！");
+        return;
+      }
+
+      const route = router.resolve({
+        path: "/characterPage",
+        query: { type, personId: id },
+      });
+      window.open(route.href, "_blank");
+    } catch (error) {
+      console.error("查询人物信息失败:", error);
+    }
+  };
+
+  return { handleClickToCharacter };
+}