Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
R
risk-monitor
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
蔡建
risk-monitor
Commits
84abdc2b
提交
84abdc2b
authored
12月 26, 2025
作者:
Vicky
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
人物页面接口
上级
a6dd260f
隐藏空白字符变更
内嵌
并排
正在显示
3 个修改的文件
包含
390 行增加
和
55 行删除
+390
-55
index.vue
...ts/techLeader/components/characterRelationships/index.vue
+97
-2
index.vue
src/views/characterPage/components/techLeader/index.vue
+290
-52
index.vue
src/views/characterPage/index.vue
+3
-1
没有找到文件。
src/views/characterPage/components/techLeader/components/characterRelationships/index.vue
浏览文件 @
84abdc2b
...
@@ -21,6 +21,7 @@
...
@@ -21,6 +21,7 @@
<
script
setup
>
<
script
setup
>
import
{
ref
,
onMounted
,
onBeforeUnmount
,
watch
}
from
"vue"
;
import
{
ref
,
onMounted
,
onBeforeUnmount
,
watch
}
from
"vue"
;
import
*
as
echarts
from
"echarts"
;
import
*
as
echarts
from
"echarts"
;
import
{
getCharacterGlobalInfo
,
getCharacterRelation
}
from
"@/api/characterPage/characterPage.js"
;
import
Center
from
"./assets/img1.png"
;
import
Center
from
"./assets/img1.png"
;
import
P1
from
"./assets/img2.png"
;
import
P1
from
"./assets/img2.png"
;
import
P2
from
"./assets/img3.png"
;
import
P2
from
"./assets/img3.png"
;
...
@@ -35,8 +36,10 @@ import P10 from "./assets/img11.png";
...
@@ -35,8 +36,10 @@ import P10 from "./assets/img11.png";
import
P11
from
"./assets/img12.png"
;
import
P11
from
"./assets/img12.png"
;
import
PS
from
"./assets/img13.png"
;
import
PS
from
"./assets/img13.png"
;
const
list
=
ref
([
"圆形布局"
,
"力导向布局"
,
"树形布局"
]);
// 人物全局信息
const
activeIndex
=
ref
(
"圆形布局"
);
const
characterInfo
=
ref
({});
// 人物关系
const
CharacterRelation
=
ref
({});
const
nodes
=
[
const
nodes
=
[
{
{
...
@@ -75,6 +78,98 @@ const nodes = [
...
@@ -75,6 +78,98 @@ const nodes = [
{
id
:
"n3"
,
name
:
"格温・肖特韦尔"
,
category
:
1
,
symbolSize
:
80
,
symbol
:
`image://
${
P3
}
`
,
r
:
80
}
{
id
:
"n3"
,
name
:
"格温・肖特韦尔"
,
category
:
1
,
symbolSize
:
80
,
symbol
:
`image://
${
P3
}
`
,
r
:
80
}
];
];
const
getCharacterGlobalInfoFn
=
async
()
=>
{
const
params
=
{
personId
:
window
.
sessionStorage
.
getItem
(
"personId"
)
||
"Y000064"
};
try
{
const
res
=
await
getCharacterGlobalInfo
(
params
);
if
(
res
.
code
===
200
)
{
console
.
log
(
"人物全局信息"
,
res
);
if
(
res
.
data
)
{
characterInfo
.
value
=
res
.
data
;
}
}
const
res1
=
await
getCharacterRelation
(
params
);
if
(
res1
.
code
===
200
)
{
console
.
log
(
"人物关系"
,
res1
);
if
(
res1
.
data
)
{
CharacterRelation
.
value
=
res1
.
data
;
}
}
nodes
=
[
{
id
:
"c"
,
name
:
characterInfo
.
value
.
name
,
category
:
0
,
symbolSize
:
80
,
symbol
:
`image://
${
characterInfo
.
value
.
imageUrl
}
`
,
label
:
{
show
:
true
,
position
:
"bottom"
,
formatter
:
"{n|埃隆·马斯克}"
,
rich
:
{
n
:
{
color
:
"rgba(5,95,194,1)"
,
fontSize
:
24
,
fontWeight
:
700
,
fontFamily
:
"Microsoft YaHei"
,
lineHeight
:
36
}
}
}
},
// 从三点钟方向顺时针排序
{
id
:
"n11"
,
name
:
"贾斯汀・马斯克"
,
category
:
1
,
symbolSize
:
80
,
symbol
:
`image://
${
P11
}
`
},
{
id
:
"n7"
,
name
:
"杰弗里·凯斯勒"
,
category
:
1
,
symbolSize
:
80
,
symbol
:
`image://
${
P7
}
`
,
r
:
80
},
{
id
:
"n6"
,
name
:
"斯科特·贝森特"
,
category
:
1
,
symbolSize
:
80
,
symbol
:
`image://
${
P6
}
`
},
{
id
:
"n9"
,
name
:
"道格·伯格姆"
,
category
:
1
,
symbolSize
:
80
,
symbol
:
`image://
${
P9
}
`
},
{
id
:
"n12"
,
name
:
"史蒂夫・尤尔韦松"
,
category
:
1
,
symbolSize
:
80
,
symbol
:
`image://
${
PS
}
`
},
{
id
:
"n5"
,
name
:
"拉里・埃里森"
,
category
:
1
,
symbolSize
:
80
,
symbol
:
`image://
${
P5
}
`
,
r
:
80
},
{
id
:
"n8"
,
name
:
"马尔科·卢比奥"
,
category
:
1
,
symbolSize
:
80
,
symbol
:
`image://
${
P8
}
`
},
{
id
:
"n10"
,
name
:
"艾拉・埃伦普里斯"
,
category
:
1
,
symbolSize
:
80
,
symbol
:
`image://
${
P10
}
`
,
r
:
80
},
{
id
:
"n2"
,
name
:
"詹姆斯・默多克"
,
category
:
1
,
symbolSize
:
80
,
symbol
:
`image://
${
P2
}
`
},
{
id
:
"n1"
,
name
:
"唐纳德・特朗普"
,
category
:
1
,
symbolSize
:
80
,
symbol
:
`image://
${
P1
}
`
},
{
id
:
"n4"
,
name
:
"金博尔・马斯克"
,
category
:
1
,
symbolSize
:
80
,
symbol
:
`image://
${
P4
}
`
},
{
id
:
"n3"
,
name
:
"格温・肖特韦尔"
,
category
:
1
,
symbolSize
:
80
,
symbol
:
`image://
${
P3
}
`
,
r
:
80
}
];
}
catch
(
error
){
}
};
const
getCharacterRelationFn
=
async
()
=>
{
const
params
=
{
personId
:
window
.
sessionStorage
.
getItem
(
"personId"
)
||
"Y000064"
};
try
{
const
res
=
await
getCharacterRelation
(
params
);
if
(
res
.
code
===
200
)
{
console
.
log
(
"人物关系"
,
res
);
if
(
res
.
data
)
{
CharacterRelation
.
value
=
res
.
data
;
}
}
}
catch
(
error
){
}
};
onMounted
(()
=>
{
getCharacterRelationFn
();
getCharacterGlobalInfoFn
();
});
const
list
=
ref
([
"圆形布局"
,
"力导向布局"
,
"树形布局"
]);
const
activeIndex
=
ref
(
"圆形布局"
);
const
links
=
[
const
links
=
[
{
source
:
"n11"
,
target
:
"c"
,
label
:
{
show
:
true
,
formatter
:
"第一任妻子"
}
},
{
source
:
"n11"
,
target
:
"c"
,
label
:
{
show
:
true
,
formatter
:
"第一任妻子"
}
},
{
source
:
"n7"
,
target
:
"c"
,
label
:
{
show
:
true
,
formatter
:
"风险投资家"
}
},
{
source
:
"n7"
,
target
:
"c"
,
label
:
{
show
:
true
,
formatter
:
"风险投资家"
}
},
...
...
src/views/characterPage/components/techLeader/index.vue
浏览文件 @
84abdc2b
...
@@ -3,30 +3,32 @@
...
@@ -3,30 +3,32 @@
<!-- 科技领袖人物基础 -->
<!-- 科技领袖人物基础 -->
<div
class=
"header"
>
<div
class=
"header"
>
<div
class=
"avatar"
>
<div
class=
"avatar"
>
<img
:src=
"musk.avatar"
alt=
""
/>
<!--
<img
:src=
"characterInfo.imageUrl"
alt=
""
/>
-->
<el-avatar
:size=
"160"
shape=
"circle"
:src=
"characterInfo.imageUrl"
/>
</div>
</div>
<div
class=
"info"
>
<div
class=
"info"
>
<!--
<div
class=
"name"
>
-->
<!--
<div
class=
"name"
>
-->
<p
class=
"name-cn"
>
{{
musk
.
nameCn
}}
</p>
<p
class=
"name-cn"
>
{{
characterInfo
.
name
}}
</p>
<p
class=
"name-en"
>
{{
musk
.
nameEn
}}
</p>
<p
class=
"name-en"
>
{{
characterInfo
.
ename
}}
</p>
<!--
</div>
-->
<!--
</div>
-->
<div
class=
"introduction"
>
<div
class=
"introduction"
>
<p>
{{
musk
.
introduc
tion
}}
</p>
<p>
{{
characterInfo
.
descrip
tion
}}
</p>
</div>
</div>
<div
class=
"domain"
>
<div
class=
"domain"
>
<p
<p
v-for=
"item in
musk.domain
"
v-for=
"item in
characterInfo.industryList
"
:key=
"item"
:key=
"item"
class=
"cl1"
:class=
"
{
:class=
"
{
cl1: item
=== '电动汽车
',
cl1: item
.status === '1
',
cl2: item
=== '太空探索
',
cl2: item
.status === '2
',
cl3: item
=== '可再生资源
',
cl3: item
.status === '3
',
cl4: item
=== '人工智能
',
cl4: item
.status === '4
',
cl5: item
=== '脑机接口
',
cl5: item
.status === '5
',
cl6: item
=== '超级高铁
'
cl6: item
.status === '6
'
}"
}"
>
>
{{
item
}}
{{
item
.
industryName
}}
</p>
</p>
</div>
</div>
</div>
</div>
...
@@ -76,7 +78,7 @@
...
@@ -76,7 +78,7 @@
<div
class=
"title"
>
<div
class=
"title"
>
<div
class=
"box"
></div>
<div
class=
"box"
></div>
<div
class=
"text"
>
最新动态
</div>
<div
class=
"text"
>
最新动态
</div>
<div
class=
"input"
><input
type=
"checkbox"
checked
/>
只看涉华动态
</div>
<div
class=
"input"
><input
type=
"checkbox"
v-model=
"isChecked"
@
change=
"handleChange"
/>
只看涉华动态
</div>
<div
class=
"btn"
>
<div
class=
"btn"
>
<img
src=
"./assets/下载按钮.png"
alt=
""
/>
<img
src=
"./assets/下载按钮.png"
alt=
""
/>
<img
src=
"./assets/收藏按钮.png"
alt=
""
/>
<img
src=
"./assets/收藏按钮.png"
alt=
""
/>
...
@@ -84,30 +86,34 @@
...
@@ -84,30 +86,34 @@
</div>
</div>
<!-- 主要内容 -->
<!-- 主要内容 -->
<div
class=
"main"
>
<div
class=
"main"
>
<div
v-for=
"item in
newList
"
:key=
"item"
class=
"main-item"
>
<div
v-for=
"item in
CharacterLatestDynamic
"
:key=
"item"
class=
"main-item"
>
<div
class=
"time"
>
<div
class=
"time"
>
<div
class=
"year"
>
{{
item
.
time
.
split
(
"
年
"
)[
0
]
}}
</div>
<div
class=
"year"
>
{{
item
.
time
.
split
(
"
-
"
)[
0
]
}}
</div>
<div
class=
"date"
>
{{
item
.
time
.
split
(
"
年"
)[
1
]
}}
</div>
<div
class=
"date"
>
{{
item
.
time
.
split
(
"
-"
)[
1
]
+
"月"
+
item
.
time
.
split
(
"-"
)[
2
]
+
"日"
}}
</div>
</div>
</div>
<div
class=
"image"
>
<div
class=
"image"
>
<img
src=
"./assets/type1.png"
alt=
""
v-if=
"item.
type === 1
"
/><img
<img
src=
"./assets/type1.png"
alt=
""
v-if=
"item.
remarks === true
"
/><img
src=
"./assets/type2.png"
src=
"./assets/type2.png"
alt=
""
alt=
""
v-else
v-else
/>
/>
</div>
</div>
<div
class=
"content"
>
<div
class=
"content"
>
<div
:class=
"
{ 'content-type1': item.type === 1, 'content-type2': item.type === 2 }">
<div
:class=
"
{ 'content-type1': item.remarks === true, 'content-type2': item.remarks === false }">
<p
:class=
"
{ 'content-title1': item.type === 1, 'content-title2': item.type === 2 }">
<p
v-if=
"item.remarks === true"
class=
"content-title1"
>
{{
item
.
content
}}
</p>
<p
v-else
class=
"content-title2"
>
{{
item
.
title
}}
{{
item
.
title
}}
</p>
</p>
<p
class=
"content-title-en"
>
{{
item
.
titleEn
}}
</p>
<p
v-if=
"item.remarks === true"
class=
"content-title-en"
>
{{
item
.
econtent
}}
</p>
</div>
</div>
<p
class=
"content-contentcontent"
>
{{
item
.
content
}}
</p>
<p
v-if=
"item.remarks === false"
class=
"content-contentcontent"
>
{{
item
.
content
}}
</p>
<div
class=
"content-tag"
>
<div
class=
"content-tag"
>
<div>
<div>
<span
<span
v-for=
"tag in item.
pie
"
v-for=
"tag in item.
industryList
"
:key=
"tag"
:key=
"tag"
class=
"tag"
class=
"tag"
:class=
"
{
:class=
"
{
...
@@ -120,20 +126,21 @@
...
@@ -120,20 +126,21 @@
>
{{
tag
}}
</span
>
{{
tag
}}
</span
>
>
</div>
</div>
<div
class=
"origin"
>
来源:
{{
item
.
or
igin
}}
</div>
<div
class=
"origin"
>
来源:
{{
item
.
or
gName
}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"line-test"
></div>
<div
class=
"line-test"
></div>
</div>
</div>
<div
class=
"pagination"
>
<div
class=
"pagination"
>
<div
class=
"total"
>
共153项动态
</div>
<div
class=
"total"
>
{{
`共${total
}
项动态`
}}
<
/div
>
<
el
-
pagination
<
el
-
pagination
@
current
-
change
=
"handleCurrentChange"
:
page
-
size
=
"pageSize"
:
current
-
page
=
"currentPage"
background
background
layout
=
"prev, pager, next"
layout
=
"prev, pager, next"
:page-count=
"10"
:
total
=
"total"
:pager-count=
"5"
v-model:current-page=
"currentPage"
class
=
"custom-pagination"
class
=
"custom-pagination"
/>
/>
<
/div
>
<
/div
>
...
@@ -153,41 +160,41 @@
...
@@ -153,41 +160,41 @@
<
div
class
=
"baseInfo"
>
<
div
class
=
"baseInfo"
>
<
div
class
=
"baseInfo-item"
>
<
div
class
=
"baseInfo-item"
>
<
div
class
=
"baseInfo-item-title"
>
出生日期:
<
/div
>
<
div
class
=
"baseInfo-item-title"
>
出生日期:
<
/div
>
<div
class=
"baseInfo-item-content"
>
1971年6月28日
</div>
<
div
class
=
"baseInfo-item-content"
>
{{
characterBasicInfo
.
birthday
}}
<
/div
>
<
/div
>
<
/div
>
<
div
class
=
"baseInfo-item"
>
<
div
class
=
"baseInfo-item"
>
<
div
class
=
"baseInfo-item-title"
>
国籍:
<
/div
>
<
div
class
=
"baseInfo-item-title"
>
国籍:
<
/div
>
<div
class=
"baseInfo-item-content"
>
南非、加拿大、美国
</div>
<
div
class
=
"baseInfo-item-content"
>
{{
characterBasicInfo
.
country
}}
<
/div
>
<
/div
>
<
/div
>
<
div
class
=
"baseInfo-item"
>
<
div
class
=
"baseInfo-item"
>
<
div
class
=
"baseInfo-item-title"
>
教育背景:
<
/div
>
<
div
class
=
"baseInfo-item-title"
>
教育背景:
<
/div
>
<div
class=
"baseInfo-item-content"
>
宾夕法尼亚大学(经济学、物理学)
</div>
<
div
class
=
"baseInfo-item-content"
v
-
for
=
"value in characterBasicInfo.educationList"
>
{{
value
.
school
+
"("
+
value
.
major
+
")"
}}
<
/div
>
<
/div
>
<
/div
>
<
div
class
=
"baseInfo-item"
>
<
div
class
=
"baseInfo-item"
>
<
div
class
=
"baseInfo-item-title"
>
净资产:
<
/div
>
<
div
class
=
"baseInfo-item-title"
>
净资产:
<
/div
>
<div
class=
"baseInfo-item-content"
>
约2000亿美元(2023年)
</div>
<
div
class
=
"baseInfo-item-content"
>
{{
characterBasicInfo
.
assets
}}
<
/div
>
<
/div
>
<
/div
>
<
div
class
=
"baseInfo-item"
>
<
div
class
=
"baseInfo-item"
>
<
div
class
=
"baseInfo-item-title"
>
职业:
<
/div
>
<
div
class
=
"baseInfo-item-title"
>
职业:
<
/div
>
<div
class=
"baseInfo-item-content"
>
企业家、工程师、发明家
</div>
<
div
class
=
"baseInfo-item-content"
>
{{
characterBasicInfo
.
positionTitle
}}
<
/div
>
<
/div
>
<
/div
>
<
div
class
=
"baseInfo-item"
>
<
div
class
=
"baseInfo-item"
>
<
div
class
=
"baseInfo-item-title"
>
婚姻状况:
<
/div
>
<
div
class
=
"baseInfo-item-title"
>
婚姻状况:
<
/div
>
<div
class=
"baseInfo-item-content"
>
曾多次结婚,有多个子女
</div>
<
div
class
=
"baseInfo-item-content"
>
{{
characterBasicInfo
.
marital
}}
<
/div
>
<
/div
>
<
/div
>
<
div
class
=
"baseInfo-item"
>
<
div
class
=
"baseInfo-item"
>
<
div
class
=
"baseInfo-item-title"
>
出生地:
<
/div
>
<
div
class
=
"baseInfo-item-title"
>
出生地:
<
/div
>
<div
class=
"baseInfo-item-content"
>
南非比勒陀利亚
</div>
<
div
class
=
"baseInfo-item-content"
>
{{
characterBasicInfo
.
birthPlace
}}
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
class
=
"company"
>
<
div
class
=
"company"
>
<
div
class
=
"company-title"
>
知名企业
<
/div
>
<
div
class
=
"company-title"
>
知名企业
<
/div
>
<
div
class
=
"company-content"
>
<
div
class
=
"company-content"
>
<div
v-for=
"item in c
ompany
List"
:key=
"item"
class=
"company-item"
>
<
div
v
-
for
=
"item in c
haracterBasicInfo.organization
List"
:
key
=
"item"
class
=
"company-item"
>
<img
:src=
"item.
logo
"
alt=
""
/>
<
img
:
src
=
"item.
imageUrl?item.imageUrl:DefaultIcon2
"
alt
=
""
/>
<
div
>
<
div
>
<div
class=
"company-cn"
>
{{
item
.
cn
}}
</div>
<
div
class
=
"company-cn"
>
{{
item
.
name
}}
<
/div
>
<div
class=
"company-name"
>
{{
item
.
name
}}
</div>
<
div
class
=
"company-name"
>
{{
item
.
e
name
}}
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
...
@@ -204,10 +211,10 @@
...
@@ -204,10 +211,10 @@
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
class
=
"content-main"
>
<
div
class
=
"content-main"
>
<div
v-for=
"item in
resumeList"
:key=
"item.id
"
class=
"content-item"
>
<
div
v
-
for
=
"item in
CharacterResume
"
class
=
"content-item"
>
<
img
src
=
"./assets/icon01.png"
alt
=
""
class
=
"image01"
/>
<
img
src
=
"./assets/icon01.png"
alt
=
""
class
=
"image01"
/>
<div
class=
"content-item-time"
>
{{
item
.
time
}}
</div>
<
div
class
=
"content-item-time"
>
{{
item
.
startTime
+
'-'
+
item
.
endTime
}}
<
/div
>
<div
class=
"content-item-title"
>
{{
item
.
title
}}
</div>
<
div
class
=
"content-item-title"
>
{{
item
.
orgName
+
'|'
+
item
.
jobName
}}
<
/div
>
<
div
class
=
"content-item-content"
>
{{
item
.
content
}}
<
/div
>
<
div
class
=
"content-item-content"
>
{{
item
.
content
}}
<
/div
>
<
div
class
=
"content-item-door"
v
-
if
=
"item.door"
>
<
div
class
=
"content-item-door"
v
-
if
=
"item.door"
>
<
img
src
=
"./assets/icon02.png"
alt
=
""
/>
<
img
src
=
"./assets/icon02.png"
alt
=
""
/>
...
@@ -238,12 +245,13 @@
...
@@ -238,12 +245,13 @@
<
/template
>
<
/template
>
<
div
class
=
"viewpoint-body"
>
<
div
class
=
"viewpoint-body"
>
<
div
class
=
"viewpoint-body-title"
>
#人工智能
<
/div
>
<
div
class
=
"viewpoint-body-title"
>
#人工智能
<
/div
>
<div
v-for=
"item in dialogData"
:key=
"item.id"
class=
"viewpoint-item"
>
<
div
v
-
for
=
"item in CharacterFieldView"
class
=
"viewpoint-item"
>
<img
:src=
"item.img"
alt=
""
/>
<!--
<
img
:
src
=
"item.imageUrl ? getProxyUrl(item.imageUrl) : DefaultIcon1"
alt
=
""
/>
-->
<
el
-
avatar
:
size
=
"42"
shape
=
"circle"
:
src
=
"item.imageUrl ? getProxyUrl(item.imageUrl) : DefaultIcon1"
class
=
"viewpoint-item-img"
/>
<
div
class
=
"viewpoint-item-content"
>
<
div
class
=
"viewpoint-item-content"
>
<
div
class
=
"viewpoint-item-name"
>
{{
item
.
name
}}
<
/div
>
<
div
class
=
"viewpoint-item-name"
>
{{
item
.
name
}}
<
/div
>
<div
class=
"viewpoint-item-desc"
>
{{ item.
content
}}
</div>
<
div
class
=
"viewpoint-item-desc"
>
{{
item
.
remarks
}}
<
/div
>
<div
class=
"viewpoint-item-job"
>
{{ item.job }}
</div>
<
div
class
=
"viewpoint-item-job"
>
{{
item
.
job
Name
}}
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
...
@@ -252,9 +260,15 @@
...
@@ -252,9 +260,15 @@
<
/template
>
<
/template
>
<
script
setup
>
<
script
setup
>
import
{
ref
}
from
"vue"
;
import
{
ref
,
onMounted
}
from
"vue"
;
import
CharacterRelationships
from
"./components/characterRelationships/index.vue"
;
import
CharacterRelationships
from
"./components/characterRelationships/index.vue"
;
import
RelevantSituation
from
"./components/relevantSituation/index.vue"
;
import
RelevantSituation
from
"./components/relevantSituation/index.vue"
;
import
{
getCharacterGlobalInfo
,
getCharacterBasicInfo
,
getCharacterView
,
getCharacterLatestDynamic
,
getCharacterResume
,
getCharacterFieldView
}
from
"@/api/characterPage/characterPage.js"
;
import
Musk
from
"./assets/Musk.png"
;
import
Musk
from
"./assets/Musk.png"
;
import
spaceX
from
"./assets/spaceX.png"
;
import
spaceX
from
"./assets/spaceX.png"
;
...
@@ -267,6 +281,22 @@ import img3 from "./assets/img3.png";
...
@@ -267,6 +281,22 @@ import img3 from "./assets/img3.png";
import
img4
from
"./assets/img4.png"
;
import
img4
from
"./assets/img4.png"
;
import
img5
from
"./assets/img5.png"
;
import
img5
from
"./assets/img5.png"
;
import
DefaultIcon1
from
'@/assets/icons/default-icon1.png'
import
DefaultIcon2
from
'@/assets/icons/default-icon2.png'
// 处理图片代理
const
getProxyUrl
=
(
url
)
=>
{
if
(
!
url
)
return
""
;
const
urlStr
=
String
(
url
);
// 排除非 http 开头(相对路径)、已经是代理链接、或者是本地链接
if
(
!
urlStr
.
startsWith
(
'http'
)
||
urlStr
.
includes
(
'images.weserv.nl'
)
||
urlStr
.
includes
(
'localhost'
)
||
urlStr
.
includes
(
'127.0.0.1'
))
{
return
url
;
}
// 移除协议头 http:// 或 https://
const
cleanUrl
=
urlStr
.
replace
(
/^https
?
:
\/\/
/i
,
''
);
return
`https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)
}
`
;
}
;
const
wordCloudData
=
ref
([
const
wordCloudData
=
ref
([
[
[
...
@@ -316,13 +346,193 @@ const musk = ref({
...
@@ -316,13 +346,193 @@ const musk = ref({
nameEn
:
"Elon Reeve Musk"
,
nameEn
:
"Elon Reeve Musk"
,
introduction
:
"南非裔美籍企业家与工程师,SpaceX 与 X(原推特)创始人,特斯拉 CEO,推动商业航天、电动汽车与卫星互联网变革。"
,
introduction
:
"南非裔美籍企业家与工程师,SpaceX 与 X(原推特)创始人,特斯拉 CEO,推动商业航天、电动汽车与卫星互联网变革。"
,
domain
:
[
"电动汽车"
,
"太空探索"
,
"可再生资源"
,
"人工智能"
,
"脑机接口"
,
"超级高铁"
],
domain
:
[
"电动汽车"
,
"太空探索"
,
"可再生资源"
,
"人工智能"
,
"脑机接口"
,
"超级高铁"
],
avatar
:
Musk
imageUrl
:
Musk
}
);
}
);
// 获取人物全局信息
const
characterInfo
=
ref
({
}
);
const
getCharacterGlobalInfoFn
=
async
()
=>
{
const
params
=
{
personId
:
window
.
sessionStorage
.
getItem
(
"personId"
)
||
"Y000064"
}
;
try
{
const
res
=
await
getCharacterGlobalInfo
(
params
);
if
(
res
.
code
===
200
)
{
console
.
log
(
"人物全局信息"
,
res
);
if
(
res
.
data
)
{
characterInfo
.
value
=
res
.
data
;
}
}
}
catch
(
error
){
}
}
;
// 获取人物基本信息
const
characterBasicInfo
=
ref
({
}
);
const
getCharacterBasicInfoFn
=
async
()
=>
{
const
params
=
{
personId
:
window
.
sessionStorage
.
getItem
(
"personId"
)
||
"Y000064"
}
;
try
{
const
res
=
await
getCharacterBasicInfo
(
params
);
if
(
res
.
code
===
200
)
{
console
.
log
(
"人物基本信息"
,
res
);
if
(
res
.
data
)
{
characterBasicInfo
.
value
=
res
.
data
;
}
}
}
catch
(
error
)
{
console
.
error
(
error
);
}
}
;
// 获取人物观点
const
characterView
=
ref
({
}
);
const
getCharacterViewFn
=
async
()
=>
{
const
params
=
{
personId
:
window
.
sessionStorage
.
getItem
(
"personId"
)
||
"Y000064"
,
year
:
numActive
.
value
||
2025
}
;
try
{
const
res
=
await
getCharacterView
(
params
);
if
(
res
.
code
===
200
)
{
console
.
log
(
"人物观点"
,
res
);
if
(
res
.
data
)
{
characterView
.
value
=
res
.
data
;
}
}
}
catch
(
error
){
}
}
;
// 获取领域观点
const
CharacterFieldView
=
ref
({
}
);
const
getCharacterFieldViewFn
=
async
()
=>
{
const
params
=
{
areaId
:
window
.
sessionStorage
.
getItem
(
"areaId"
)
||
"20"
,
}
;
try
{
const
res
=
await
getCharacterFieldView
(
params
);
if
(
res
.
code
===
200
)
{
console
.
log
(
"领域观点"
,
res
);
if
(
res
.
data
)
{
CharacterFieldView
.
value
=
res
.
data
;
}
}
}
catch
(
error
){
}
}
;
//是否涉华
const
isChecked
=
ref
(
false
);
const
related
=
ref
(
'N'
);
const
handleChange
=
event
=>
{
if
(
isChecked
.
value
){
related
.
value
=
'Y'
;
}
else
{
related
.
value
=
'N'
;
}
getCharacterLatestDynamicFn
();
console
.
log
(
related
.
value
);
}
;
const
currentPage
=
ref
(
1
);
// 处理页码改变事件
const
handleCurrentChange
=
page
=>
{
currentPage
.
value
=
page
;
getCharacterLatestDynamicFn
();
}
;
// 获取最新动态
const
CharacterLatestDynamic
=
ref
({
}
);
const
total
=
ref
(
0
);
const
pageSize
=
ref
(
7
);
const
loading
=
ref
(
false
);
const
abortController
=
ref
(
null
);
const
getCharacterLatestDynamicFn
=
async
()
=>
{
// 取消上一次未完成的请求
if
(
abortController
.
value
)
{
abortController
.
value
.
abort
();
}
// 创建新的 AbortController
abortController
.
value
=
new
AbortController
();
loading
.
value
=
true
;
const
params
=
{
personId
:
window
.
sessionStorage
.
getItem
(
"personId"
)
||
"Y000064"
,
cRelated
:
related
.
value
,
currentPage
:
currentPage
.
value
-
1
,
pageSize
:
pageSize
.
value
}
;
try
{
const
res
=
await
getCharacterLatestDynamic
(
params
,
abortController
.
value
.
signal
);
console
.
log
(
"最新动态"
,
res
);
if
(
res
.
code
===
200
)
{
if
(
res
.
data
&&
res
.
data
.
content
)
{
CharacterLatestDynamic
.
value
=
res
.
data
.
content
.
map
(
item
=>
({
title
:
item
.
title
,
content
:
item
.
content
,
econtent
:
item
.
econtent
,
time
:
item
.
time
,
industryList
:
item
.
industryList
||
[
"人工智能"
],
orgName
:
item
.
orgName
,
remarks
:
item
.
remarks
}
));
total
.
value
=
res
.
data
.
totalElements
;
}
else
{
CharacterLatestDynamic
.
value
=
[];
total
.
value
=
0
;
}
}
else
{
CharacterLatestDynamic
.
value
=
[];
total
.
value
=
0
;
}
loading
.
value
=
false
;
}
catch
(
error
)
{
if
(
error
.
name
!==
"AbortError"
)
{
console
.
error
(
error
);
loading
.
value
=
false
;
}
}
}
;
//获取职业履历
const
CharacterResume
=
ref
({
}
);
const
getCharacterResumeFn
=
async
()
=>
{
const
params
=
{
personId
:
window
.
sessionStorage
.
getItem
(
"personId"
)
||
"Y000064"
}
;
try
{
const
res
=
await
getCharacterResume
(
params
);
if
(
res
.
code
===
200
)
{
console
.
log
(
"人物职业履历"
,
res
);
if
(
res
.
data
)
{
CharacterResume
.
value
=
res
.
data
;
}
}
}
catch
(
error
){
}
}
;
const
info
=
ref
([
"人物详情"
,
"人物关系"
,
"相关情况"
]);
const
info
=
ref
([
"人物详情"
,
"人物关系"
,
"相关情况"
]);
const
infoActive
=
ref
(
"人物详情"
);
const
infoActive
=
ref
(
"人物详情"
);
const
num
=
ref
([
"2025"
,
"2024"
,
"2023"
,
"2022"
,
"2021"
,
"2020"
]);
const
num
=
ref
([
"2025"
,
"2024"
,
"2023"
,
"2022"
,
"2021"
,
"2020"
]);
const
numActive
=
ref
(
"2025"
);
const
numActive
=
ref
(
"2025"
);
const
currentPage
=
ref
(
5
);
const
dialogVisible
=
ref
(
false
);
const
dialogVisible
=
ref
(
false
);
const
handleClickTag
=
tag
=>
{
const
handleClickTag
=
tag
=>
{
dialogVisible
.
value
=
true
;
dialogVisible
.
value
=
true
;
...
@@ -501,6 +711,17 @@ const dialogData = ref([
...
@@ -501,6 +711,17 @@ const dialogData = ref([
job
:
"斯坦福大学教授"
job
:
"斯坦福大学教授"
}
}
]);
]);
onMounted
(()
=>
{
getCharacterGlobalInfoFn
();
getCharacterBasicInfoFn
();
getCharacterViewFn
();
getCharacterLatestDynamicFn
();
getCharacterResumeFn
();
getCharacterFieldViewFn
();
}
);
<
/script
>
<
/script
>
<
style
lang
=
"scss"
scoped
>
<
style
lang
=
"scss"
scoped
>
...
@@ -875,6 +1096,11 @@ const dialogData = ref([
...
@@ -875,6 +1096,11 @@ const dialogData = ref([
}
}
}
}
.
content
-
contentcontent
{
.
content
-
contentcontent
{
display
:
-
webkit
-
box
;
-
webkit
-
box
-
orient
:
vertical
;
-
webkit
-
line
-
clamp
:
3
;
overflow
:
hidden
;
text
-
overflow
:
ellipsis
;
font
-
size
:
16
px
;
font
-
size
:
16
px
;
font
-
weight
:
400
;
font
-
weight
:
400
;
font
-
family
:
"Microsoft YaHei"
;
font
-
family
:
"Microsoft YaHei"
;
...
@@ -1101,8 +1327,9 @@ const dialogData = ref([
...
@@ -1101,8 +1327,9 @@ const dialogData = ref([
height
:
114
px
;
height
:
114
px
;
display
:
flex
;
display
:
flex
;
flex
-
wrap
:
wrap
;
flex
-
wrap
:
wrap
;
overflow
-
y
:
scroll
;
.
company
-
item
{
.
company
-
item
{
width
:
18
5
px
;
width
:
18
0
px
;
height
:
49
px
;
height
:
49
px
;
margin
-
bottom
:
16
px
;
margin
-
bottom
:
16
px
;
display
:
flex
;
display
:
flex
;
...
@@ -1114,18 +1341,26 @@ const dialogData = ref([
...
@@ -1114,18 +1341,26 @@ const dialogData = ref([
margin
-
right
:
8
px
;
margin
-
right
:
8
px
;
}
}
.
company
-
cn
{
.
company
-
cn
{
width
:
130
px
;
font
-
size
:
16
px
;
font
-
size
:
16
px
;
font
-
weight
:
700
;
font
-
weight
:
700
;
font
-
family
:
"Microsoft YaHei"
;
font
-
family
:
"Microsoft YaHei"
;
line
-
height
:
24
px
;
line
-
height
:
24
px
;
color
:
rgb
(
59
,
65
,
75
);
color
:
rgb
(
59
,
65
,
75
);
white
-
space
:
nowrap
;
overflow
:
hidden
;
text
-
overflow
:
ellipsis
;
}
}
.
company
-
name
{
.
company
-
name
{
width
:
130
px
;
font
-
size
:
16
px
;
font
-
size
:
16
px
;
font
-
weight
:
400
;
font
-
weight
:
400
;
font
-
family
:
"Microsoft YaHei"
;
font
-
family
:
"Microsoft YaHei"
;
line
-
height
:
24
px
;
line
-
height
:
24
px
;
color
:
rgb
(
95
,
101
,
108
);
color
:
rgb
(
95
,
101
,
108
);
white
-
space
:
nowrap
;
overflow
:
hidden
;
text
-
overflow
:
ellipsis
;
}
}
}
}
.
company
-
item
:
nth
-
child
(
2
n
-
1
)
{
.
company
-
item
:
nth
-
child
(
2
n
-
1
)
{
...
@@ -1198,6 +1433,7 @@ const dialogData = ref([
...
@@ -1198,6 +1433,7 @@ const dialogData = ref([
left
:
-
26
px
;
left
:
-
26
px
;
}
}
.
content
-
item
-
time
{
.
content
-
item
-
time
{
font
-
size
:
16
px
;
font
-
size
:
16
px
;
font
-
weight
:
700
;
font
-
weight
:
700
;
font
-
family
:
"Microsoft YaHei"
;
font
-
family
:
"Microsoft YaHei"
;
...
@@ -1305,10 +1541,12 @@ const dialogData = ref([
...
@@ -1305,10 +1541,12 @@ const dialogData = ref([
margin
-
bottom
:
12
px
;
margin
-
bottom
:
12
px
;
position
:
relative
;
position
:
relative
;
padding
-
left
:
48
px
;
padding
-
left
:
48
px
;
img
{
.
viewpoint
-
item
-
img
{
position
:
absolute
;
position
:
absolute
;
top
:
-20px
;
top
:
0
;
left
:
-20px
;
left
:
-
10
px
;
width
:
42
px
;
height
:
42
px
;
}
}
.
viewpoint
-
item
-
content
{
.
viewpoint
-
item
-
content
{
width
:
665
px
;
width
:
665
px
;
...
...
src/views/characterPage/index.vue
浏览文件 @
84abdc2b
...
@@ -4,7 +4,7 @@
...
@@ -4,7 +4,7 @@
<!-- 主要内容 -->
<!-- 主要内容 -->
<div
class=
"main"
>
<div
class=
"main"
>
<!-- 科技领袖 -->
<!-- 科技领袖 -->
<tech-leader
v-if=
"type == 1"
/>
<tech-leader
v-if=
"type == 1"
/>
<!-- 国会议员 -->
<!-- 国会议员 -->
<member-of-congress
v-if=
"type == 2"
/>
<member-of-congress
v-if=
"type == 2"
/>
<!-- 智库研究人员 -->
<!-- 智库研究人员 -->
...
@@ -23,6 +23,8 @@ import ThinkTankPerson from './components/thinkTankPerson/index.vue';
...
@@ -23,6 +23,8 @@ import ThinkTankPerson from './components/thinkTankPerson/index.vue';
// 获取路由参数,1为科技领袖,2为国会议员,3为智库研究人员
// 获取路由参数,1为科技领袖,2为国会议员,3为智库研究人员
const
route
=
useRoute
();
const
route
=
useRoute
();
const
type
=
ref
(
route
.
query
.
type
||
1
);
const
type
=
ref
(
route
.
query
.
type
||
1
);
</
script
>
</
script
>
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论