Skip to content

R
risk-monitor
提交 27588a66 authored 作者: 胡卉清's avatar 胡卉清
浏览文件
操作

合并分支 'dev_hhq' 到 'master'

Dev hhq 查看合并请求 !41
上级 aae510aa eceee3ce
隐藏空白字符变更
内嵌 并排
正在显示 包含 327 行增加 和 114 行删除
src/views/gjOverView/component/MeansAnalysis.vue
浏览文件 @ 27588a66
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div class="divider"></div> <div class="divider"></div>
<div class="thematic-content"> <div class="thematic-content">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="../assets/icon1.png"></img>
<div class="item-header-text">科技博弈历程</div> <div class="item-header-text">科技博弈历程</div>
</div> </div>
......
src/views/gjOverView/component/ResourceAnalysis.vue
浏览文件 @ 27588a66
...@@ -13,8 +13,10 @@ ...@@ -13,8 +13,10 @@
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">科技人才对比分析</div> <div class="item-header-text">科技人才对比分析</div>
<div class="item-header-btn"> <div class="item-header-btn">
<img class="item-header-ibtn-con" src="@/assets/images/icon/header-btn.png"></img> <img class="item-header-btn-icon" src="@/assets/images/icon/header-btn.png"></img>
数据来源：美国某某发展基金会 <div style="">
数据来源：美国某某发展基金会
</div>
</div> </div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
...@@ -31,8 +33,10 @@ ...@@ -31,8 +33,10 @@
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">科研投入对比分析</div> <div class="item-header-text">科研投入对比分析</div>
<div class="item-header-btn"> <div class="item-header-btn">
<img class="item-header-ibtn-con" src="@/assets/images/icon/header-btn.png"></img> <img class="item-header-btn-icon" src="@/assets/images/icon/header-btn.png"></img>
数据来源：美国某某发展基金会 <div style="">
数据来源：美国某某发展基金会
</div>
</div> </div>
</div> </div>
...@@ -55,8 +59,10 @@ ...@@ -55,8 +59,10 @@
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">创新主体对比分析</div> <div class="item-header-text">创新主体对比分析</div>
<div class="item-header-btn"> <div class="item-header-btn">
<img class="item-header-icon" src="@/assets/images/icon/header-btn.png"></img> <img class="item-header-btn-icon" src="@/assets/images/icon/header-btn.png"></img>
数据来源：美国某某发展基金会 <div style="">
数据来源：美国某某发展基金会
</div>
</div> </div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
...@@ -73,21 +79,23 @@ ...@@ -73,21 +79,23 @@
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">科学数据对比分析</div> <div class="item-header-text">科学数据对比分析</div>
<div class="item-header-btn"> <div class="item-header-btn">
<img class="item-header-ibtn-con" src="@/assets/images/icon/header-btn.png"></img> <img class="item-header-btn-icon" src="@/assets/images/icon/header-btn.png"></img>
数据来源：美国某某发展基金会 <div style="">
数据来源：美国某某发展基金会
</div>
</div> </div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div style="display: flex;"> <div style="display: flex;">
<div style="display: flex;height: 320px;width: calc(50% - 40px) ;margin: 20px;" id="char7"> <div style="display: flex;height: 360px;width: 433px ; " id="char7">
</div> </div>
<div style="width: 50%;padding-top: 50px;"> <div style="width: 50%;padding-top: 34px;">
<div v-for="value in radar2Data" class="radar2Data-line"> <div v-for="value in radar2Data" class="radar2Data-line">
<div class="radar2Data-circle" :style="{ backgroundColor: value.color }"></div> <div class="radar2Data-circle" :style="{ backgroundColor: value.color }"></div>
<div style=" width: 40px;margin: 0 7px">{{ value.name }}</div> <div style=" margin: 0 5px;font-size: 16px;">{{ value.name }}</div>
<div style="width: calc(100% - 150px) ;padding: 10px;"> <el-progress :percentage="value.percent" <div style="width: 168px ; "> <el-progress :percentage="value.percent" :color="value.color"
:color="value.color" :show-text="false" /></div> :show-text="false" /></div>
<div style=" width: 70px;text-align: right;">{{ value.percent < 50 ? '低依赖' : value.percent < 80 <div style=" width: 70px;text-align: right;">{{ value.percent < 50 ? '低依赖' : value.percent < 80
? '中度依赖' : '高度依赖' }} </div> ? '中度依赖' : '高度依赖' }} </div>
</div> </div>
...@@ -312,7 +320,6 @@ onMounted(() => { ...@@ -312,7 +320,6 @@ onMounted(() => {
display: flex; display: flex;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
width: calc(100% - 210px);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
...@@ -322,10 +329,23 @@ onMounted(() => { ...@@ -322,10 +329,23 @@ onMounted(() => {
text-align: right; text-align: right;
} }
.item-header-ibtn-con { .item-header-btn-icon {
width: 16px; width: 14px;
height: 16px; height: 16px;
margin-top: 15px; margin-top: 15px;
margin-left: 270px;
margin-right: 4px;
}
.item-header-btn-text {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
} }
} }
...@@ -384,13 +404,17 @@ onMounted(() => { ...@@ -384,13 +404,17 @@ onMounted(() => {
width: 100%; width: 100%;
height: 30px; height: 30px;
margin-top: 18px; margin-top: 18px;
align-items: center;
/* 垂直居中 */
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-size: 16px;
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 22px;
letter-spacing: 0px; letter-spacing: 0px;
align-items: center; text-align: right;
/* 垂直居中 */
} }
...@@ -400,4 +424,9 @@ onMounted(() => { ...@@ -400,4 +424,9 @@ onMounted(() => {
height: 12px; height: 12px;
border-radius: 50%; border-radius: 50%;
} }
:deep(.el-progress-bar__outer) {
height: 8px !important;
}
</style> </style>
src/views/gjOverView/component/Timeline.vue
浏览文件 @ 27588a66
...@@ -20,13 +20,13 @@ ...@@ -20,13 +20,13 @@
</div> </div>
<!-- 卡片 --> <!-- 卡片 -->
<div class="card" :class="[cardPos(item), 'right-side']" :style="widthStyle()" <div class="card" :class="[cardPos(item), 'right-side']" @click="$emit('click-card', item)">
@click="$emit('click-card', item)">
<img :src="`/icon/${item.unit}.png`" class="icon"></img> <img :src="`/icon/${item.unit}.png`" class="icon"></img>
<div class="title">{{ item.time }}</div>
<div class="title" :style="{ <div class="title" :style="{
color: item.unit === '中国' ? ' #CF4F51' : '' color: item.unit === '中国' ? ' #CF4F51' : ''
}">{{ item.title }}</div> }">{{ item.title }}</div>
<div class="time">{{ item.time }}</div>
<div class="content">{{ item.content }}</div> <div class="content">{{ item.content }}</div>
</div> </div>
</div> </div>
...@@ -50,7 +50,15 @@ export default { ...@@ -50,7 +50,15 @@ export default {
}, },
/* 水平位置：按索引均匀分布 */ /* 水平位置：按索引均匀分布 */
leftStyle(i) { leftStyle(i) {
return { left: `${(i * 100) / (this.data.length - 1)}vw` }; // let pos = ``
// if (i === 0) {
// pos = 0
// } else {
// this.linePos(this.data[i - 1]) !== this.linePos(this.data[i]) ? pos = { left: `${(i * 270) - 125}px` } : pos = { left: `${(i * 270)}px` }
// }
return { left: `${(i * 270)}px` }
// return pos;
}, },
/* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */ /* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */
cardPos(item) { cardPos(item) {
...@@ -166,28 +174,30 @@ export default { ...@@ -166,28 +174,30 @@ export default {
.dot.up::after { .dot.up::after {
bottom: 100%; bottom: 100%;
height: 180px height: 240px
} }
.dot.down::after { .dot.down::after {
top: 100%; top: 100%;
height: 180px height: 240px
} }
.card { .card {
position: absolute; position: absolute;
height: 180px; /* 容器 28 */
width: 220px;
height: 176px;
padding: 8px 20px; padding: 8px 20px;
font-size: 14px; font-size: 14px;
cursor: pointer cursor: pointer
} }
.card.up { .card.up {
bottom: 20px bottom: 86px
} }
.card.down { .card.down {
top: 20px; top: 94px;
} }
...@@ -196,15 +206,39 @@ export default { ...@@ -196,15 +206,39 @@ export default {
} }
.title { .title {
/* 美国进一步收紧对华AI芯片出口限制 */
width: 220px;
color: #055fc2; color: #055fc2;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
line-height: 26px line-height: 26px;
margin-top: -25px;
margin-left: 10px;
}
.time {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
margin-left: 10px;
} }
.content { .content {
color: #5f656c; width: 220px;
height: 90px;
color: rgba(59, 65, 75, 1);
margin-left: 10px;
font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
line-height: 24px font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
} }
</style> </style>
\ No newline at end of file
src/views/gjOverView/index.vue
浏览文件 @ 27588a66
...@@ -46,13 +46,16 @@ ...@@ -46,13 +46,16 @@
</div> </div>
<div class="item-card-right"> <div class="item-card-right">
<div style="overflow: auto;height: 400px;"> <div style=" height: 400px;">
<div v-for="(item, index) in technologicalTrends.data" :key="index" style="height: 46px;"> <div v-for="(item, index) in technologicalTrends.data" :key="index" style="height: 46px;">
<div class="list-row"> <div class="list-row">
<div class="item-list-punblier">{{ item.tag1 }}</div> <div class="item-list-punblier">{{ item.tag1 }}</div>
<div class="item-list-content">{{ item.text }}</div> <div class="item-list-content">{{ item.text }}</div>
<div class="item-list-time">{{ item.time }}</div> <div class="item-list-time">{{ item.time }}</div>
<div class="item-list-punblier">{{ item.tag2 }}</div> <div class="item-list-punblier"
:style="{ color: item.tagColor, backgroundColor: item.tagBg, borderColor: item.color }">{{
item.tag2 }}
</div>
</div> </div>
<div class="item-header-divider" /> <div class="item-header-divider" />
</div> </div>
...@@ -66,7 +69,7 @@ ...@@ -66,7 +69,7 @@
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png" /> <img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png" />
<div class="item-header-text" style="background-color: #ce4f51">风险信号 <div class="num">{{ warningList.length <div class="item-header-text" style="background-color: #ce4f51">风险信号 <div class="num">{{ warningList.length
}}</div> }}</div>
</div> </div>
</div> </div>
...@@ -130,14 +133,70 @@ const technologicalTrends = ref({ ...@@ -130,14 +133,70 @@ const technologicalTrends = ref({
txt: '2025年9月14日，欧盟委员会宣布通过“地平线欧洲”2025年工作计划投入约73亿欧元的专项资金，增强欧洲的科研创新引擎和', txt: '2025年9月14日，欧盟委员会宣布通过“地平线欧洲”2025年工作计划投入约73亿欧元的专项资金，增强欧洲的科研创新引擎和',
}, },
data: [ data: [
{ tag1: '科研仪器', text: '欧盟投资73亿欧元推进数字化转型', time: '1小时前', tag2: '新能源' }, {
{ tag1: '创新主体', text: '美财政部发布拟议规则限制对华网...', time: '3小时前', tag2: '人工智能' }, "tag1": "科研仪器",
{ tag1: '科技人才', text: '美NIST发布《美国关键和新兴技术....', time: '昨天', tag2: '量子科技' }, "text": "欧盟投资73亿欧元推进数字化转型",
{ tag1: '创新主体', text: '美《开创未来先进计算生态系统:战...', time: '昨天', tag2: '人工智能' }, "time": "1小时前",
{ tag1: '科研仪器', text: '欧盟启动初代“数字地球”系统..', time: '昨天', tag2: '量子科技' }, "tag2": "新能源",
{ tag1: '科研仪器', text: '美NSF投建国家AI可编程云实验室网...', time: '昨天', tag2: '新能源' }, "tagColor": "rgba(250, 140, 22, 1)",
{ tag1: '科研仪器', text: '英启动全球顶尖科技人才引进计划瞄...', time: '昨天', tag2: '新能源' }, "tagBg": "rgba(255, 247, 230, 1)"
{ tag1: '科研仪器', text: '美国家科学基金会致力改进下一代无...', time: '昨天', tag2: '新能源' }, },
{
"tag1": "创新主体",
"text": "美财政部发布拟议规则限制对华网...",
"time": "3小时前",
"tag2": "人工智能",
"tagColor": "rgba(114, 46, 209, 1)",
"tagBg": "rgba(249, 240, 255, 1)"
},
{
"tag1": "科技人才",
"text": "美NIST发布《美国关键和新兴技术....",
"time": "昨天",
"tag2": "量子科技",
"tagColor": "rgba(206, 79, 81, 1)",
"tagBg": "rgba(255, 241, 240, 1)"
},
{
"tag1": "创新主体",
"text": "美《开创未来先进计算生态系统:战...",
"time": "昨天",
"tag2": "人工智能",
"tagColor": "rgba(114, 46, 209, 1)",
"tagBg": "rgba(249, 240, 255, 1)"
},
{
"tag1": "科研仪器",
"text": "欧盟启动初代“数字地球”系统..",
"time": "昨天",
"tag2": "量子科技",
"tagColor": "rgba(206, 79, 81, 1)",
"tagBg": "rgba(255, 241, 240, 1)"
},
{
"tag1": "科研仪器",
"text": "美NSF投建国家AI可编程云实验室网...",
"time": "昨天",
"tag2": "新能源",
"tagColor": "rgba(250, 140, 22, 1)",
"tagBg": "rgba(255, 247, 230, 1)"
},
{
"tag1": "科研仪器",
"text": "英启动全球顶尖科技人才引进计划瞄...",
"time": "昨天",
"tag2": "新能源",
"tagColor": "rgba(250, 140, 22, 1)",
"tagBg": "rgba(255, 247, 230, 1)"
},
{
"tag1": "科研仪器",
"text": "美国家科学基金会致力改进下一代无...",
"time": "昨天",
"tag2": "新能源",
"tagColor": "rgba(250, 140, 22, 1)",
"tagBg": "rgba(255, 247, 230, 1)"
}
], ],
}); });
...@@ -158,10 +217,16 @@ const handleToMoreRiskSignal = () => { ...@@ -158,10 +217,16 @@ const handleToMoreRiskSignal = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.content-main { .content-main {
width: 100%; // width: 100%;
height: 100%; // height: 100%;
overflow: hidden; // overflow: hidden;
font-family: Microsoft YaHei; // font-family: Microsoft YaHei;
width: 1920px;
margin: 0 auto;
background: url("./assets/bg.png");
background-repeat: no-repeat;
background-color: #fff;
background-size: contain;
} }
.content-title { .content-title {
...@@ -355,7 +420,7 @@ const handleToMoreRiskSignal = () => { ...@@ -355,7 +420,7 @@ const handleToMoreRiskSignal = () => {
.list-row { .list-row {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px 0; margin: 5px 0;
height: 40px; height: 40px;
...@@ -382,6 +447,7 @@ const handleToMoreRiskSignal = () => { ...@@ -382,6 +447,7 @@ const handleToMoreRiskSignal = () => {
.item-list-time { .item-list-time {
width: 68px; width: 68px;
text-align: right; text-align: right;
margin-right: 8px;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
} }
} }
......
src/views/gjOverView/js/barChart2.js
浏览文件 @ 27588a66
...@@ -31,14 +31,22 @@ const getColumnChart = (nameList, series1, series2, isPer) => { ...@@ -31,14 +31,22 @@ const getColumnChart = (nameList, series1, series2, isPer) => {
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { show: true, color: '#666' }, axisLabel: { show: true, color: '#666' },
splitLine: { show: true, lineStyle: { color: '#ebebeb' } } splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
},
}, },
series: [ series: [
{ {
name: '研究型大学', name: '研究型大学',
type: 'bar', type: 'bar',
data: series1, data: series1,
barWidth: 8, barWidth: 12,
barGap: '60%', // 同一类别内不同系列的间隔
barCategoryGap: "-60%",
label: { show: false }, label: { show: false },
itemStyle: { borderRadius: [8, 8, 0, 0], color: gradBlue } itemStyle: { borderRadius: [8, 8, 0, 0], color: gradBlue }
}, },
...@@ -46,7 +54,7 @@ const getColumnChart = (nameList, series1, series2, isPer) => { ...@@ -46,7 +54,7 @@ const getColumnChart = (nameList, series1, series2, isPer) => {
name: '科技企业', name: '科技企业',
type: 'bar', type: 'bar',
data: series2, data: series2,
barWidth: 8, barWidth: 12,
label: { show: false }, label: { show: false },
itemStyle: { borderRadius: [8, 8, 0, 0], color: gradCyan } itemStyle: { borderRadius: [8, 8, 0, 0], color: gradCyan }
}, },
...@@ -54,7 +62,7 @@ const getColumnChart = (nameList, series1, series2, isPer) => { ...@@ -54,7 +62,7 @@ const getColumnChart = (nameList, series1, series2, isPer) => {
name: '研究机构', name: '研究机构',
type: 'bar', type: 'bar',
data: series2, data: series2,
barWidth: 8, barWidth: 12,
label: { show: false }, label: { show: false },
itemStyle: { borderRadius: [8, 8, 0, 0], color: '#FFC63D' } itemStyle: { borderRadius: [8, 8, 0, 0], color: '#FFC63D' }
} }
......
src/views/gjOverView/js/multiLineChart2.js
浏览文件 @ 27588a66
...@@ -67,7 +67,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5) => { ...@@ -67,7 +67,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5) => {
return { return {
tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
grid: { top: '5%', right: '0%', bottom: '0%', left: '0%', containLabel: true }, grid: { top: '5%', right: '10%', bottom: '0%', left: '0%', containLabel: true },
xAxis: { type: 'category', boundaryGap: false, data: dataX }, xAxis: { type: 'category', boundaryGap: false, data: dataX },
yAxis: { yAxis: {
......
src/views/gjOverView/js/radarChart2.js
浏览文件 @ 27588a66
import * as echarts from "echarts"; import * as echarts from "echarts";
const colors = [
const getBarChart = (nameList, valueList, isPer) => { 'rgba(165, 42, 42, 1)', // 红色
'rgba(0, 0, 128, 1)', // 蓝色
'rgba(0, 128, 128, 1)', // 青色
'rgba(75, 0, 130, 1)', // 紫色
'rgba(255, 165, 0, 1)', // 橙色
'rgba(173, 216, 230, 1)' // 浅蓝色
];
const getRadarChart = () => {
const option = { const option = {
title: { text: '' },
tooltip: {},
radar: { radar: {
radius: '50%', // 关键：缩小整个雷达 radius: '50%',
center: ['50%', '45%'], // 可选：再往下挪一点，避免图例挤在一起 center: ['50%', '45%'],
indicator: [ indicator: [
{ name: '能源', max: 6500 }, { name: '能源领域', max: 100 },
{ name: '集成电路', max: 16000 }, { name: '集成电路', max: 100 },
{ name: '人工智能', max: 30000 }, { name: '生物科技', max: 100 },
{ name: '通信网络', max: 38000 }, { name: '人工智能', max: 100 },
{ name: '量子科技', max: 52000 }, { name: '通信网络', max: 100 },
{ name: '生物科技', max: 25000 } { name: '量子科技', max: 100 }
], ],
axisName: { axisName: {
formatter: '{value}', formatter: '{value}',
color: 'rgba(59, 65, 75, 1)', color: 'rgba(59, 65, 75, 1)',
fontSize: 14, fontSize: 16,
fontWeight: 400 fontWeight: 400
} }
}, },
series: [ series: [
{ {
name: 'Budget vs spending', name: '科技领域表现',
type: 'radar', type: 'radar',
symbol: 'none', symbol: 'none',
data: [ data: [
{ {
value: [4200, 3000, 20000, 35000, 50000, 18000], "value": [20, 95, 30, 85, 70, 60],
name: '中国', "name": "中国",
areaStyle: { color: 'rgba(10, 87, 166, 0.2)' } "areaStyle": { "color": "rgba(165, 42, 42, 0.2)" },
lineStyle: {
width: 1.5, // 设置线条宽度为2
color: 'rgba(165, 42, 42, 1)' // 设置线条颜色
}
}, },
{ {
value: [5000, 14000, 28000, 26000, 42000, 21000], "value": [90, 40, 85, 20, 60, 75],
name: '美国', "name": "美国",
areaStyle: { color: 'rgba(206, 79, 81, 0.2)' } "areaStyle": { "color": "rgba(0, 0, 128, 0.2)" },
lineStyle: {
width: 1.5, // 设置线条宽度为2
color: 'rgba(0, 0, 128, 1)' // 设置线条颜色
}
}, },
{ {
value: [4000, 14000, 18000, 21000, 32000, 10000], "value": [80, 68, 92, 82, 58, 88],
name: '欧盟', "name": "欧盟",
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' } "areaStyle": { "color": "rgba(0, 128, 128, 0.2)" },
lineStyle: {
width: 1.5, // 设置线条宽度为2
color: 'rgba(0, 128, 128, 1)' // 设置线条颜色
}
}, },
{ {
value: [4000, 14000, 18000, 21000, 32000, 10000], "value": [57, 81, 76, 91, 87, 67],
name: '英国', "name": "英国",
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' } "areaStyle": { "color": "rgba(75, 0, 130, 0.2)" },
lineStyle: {
width: 1.5, // 设置线条宽度为2
color: 'rgba(75, 0, 130, 1)' // 设置线条颜色
}
}, },
{ {
value: [4000, 14000, 18000, 21000, 32000, 10000], "value": [93, 59, 79, 89, 69, 83],
name: '日本', "name": "日本",
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' } "areaStyle": { "color": "rgba(255, 165, 0, 0.2)" },
lineStyle: {
width: 1.5, // 设置线条宽度为2
color: 'rgba(255, 165, 0, 1)' // 设置线条颜色
}
}, },
{ {
value: [4000, 14000, 18000, 21000, 32000, 10000], "value": [86, 56, 77, 94, 80, 66],
name: '韩国', "name": "韩国",
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' } "areaStyle": { "color": "rgba(173, 216, 230,0.2)" },
lineStyle: {
width: 1.5, // 设置线条宽度为2
color: 'rgba(173, 216, 230, 1)' // 设置线条颜色
}
} }
] ]
} }
] ]
} };
return option return option;
} };
export default getBarChart export default getRadarChart;
\ No newline at end of file \ No newline at end of file
src/views/technologyFigures/component/SourceLibrary.vue
浏览文件 @ 27588a66
...@@ -5,6 +5,12 @@ ...@@ -5,6 +5,12 @@
<div v-for="(item, index) in sourceLibraryData" :key="index" class="source-library-card"> <div v-for="(item, index) in sourceLibraryData" :key="index" class="source-library-card">
<div class="source-library-avatar-wrapper"> <div class="source-library-avatar-wrapper">
<img :src="item.avatar" alt="" class="source-library-avatar" /> <img :src="item.avatar" alt="" class="source-library-avatar" />
<div class="person-tags">
<div class="person-tag-bg" v-for="(tag, tIdx) in item.icon" :key="tIdx">
<img :src="'/public/icon/header-icon' + tag + '.png'" class="tag-icon" alt="tag" />
</div>
</div>
</div> </div>
<div class="source-library-text-content"> <div class="source-library-text-content">
<div style=" width: 240px;"> <div style=" width: 240px;">
...@@ -77,6 +83,28 @@ const handlePageChange = p => { ...@@ -77,6 +83,28 @@ const handlePageChange = p => {
margin-right: 18px; margin-right: 18px;
} }
.person-tags {
display: flex;
margin-top: -20px;
width: 42px;
padding-left: 28px;
text-align: center;
}
.person-tag-bg {
/* 椭圆 6 */
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
}
.tag-icon {
width: 24px;
height: 24px;
object-fit: contain;
}
.source-library-avatar { .source-library-avatar {
/* 椭圆 142 */ /* 椭圆 142 */
width: 88px; width: 88px;
...@@ -140,7 +168,7 @@ const handlePageChange = p => { ...@@ -140,7 +168,7 @@ const handlePageChange = p => {
} }
.page { .page {
width: 1221px; width: 1600px;
height: 40px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
......
src/views/technologyFigures/index.vue
浏览文件 @ 27588a66
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
<div class="box1-header"> <div class="box1-header">
<div class="box1-header-left"> <div class="box1-header-left">
<div class="icon"> <div class="icon">
<img src="./assets/images/box1-header-icon.png" alt="" /> <img src="./assets/images/TechnologyFigures-icon4.png" alt="" />
</div> </div>
<div class="title">{{ "人物新闻动态" }}</div> <div class="title">{{ "人物新闻动态" }}</div>
</div> </div>
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
<div class="box3-header"> <div class="box3-header">
<div class="box3-header-left"> <div class="box3-header-left">
<div class="box3-header-icon"> <div class="box3-header-icon">
<img src="./assets/images/header-news.png" alt="" /> <img src="./assets/images/TechnologyFigures-icon3.png" alt="" />
</div> </div>
<!-- <div class="box3-header-title">{{ "人物动向" }}</div> --> <!-- <div class="box3-header-title">{{ "人物动向" }}</div> -->
<div class="header-title" <div class="header-title"
...@@ -178,7 +178,7 @@ ...@@ -178,7 +178,7 @@
<div class="box5-header"> <div class="box5-header">
<div class="box5-header-left"> <div class="box5-header-left">
<div class="box5-header-icon"> <div class="box5-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" <img src="./assets/images/TechnologyFigures-icon1.png" alt=""
style="margin: 13px 21px 13px 21px; height: 22px" /> style="margin: 13px 21px 13px 21px; height: 22px" />
<div class="box5-header-title">{{ "科技人物观点词云" }}</div> <div class="box5-header-title">{{ "科技人物观点词云" }}</div>
</div> </div>
...@@ -200,7 +200,7 @@ ...@@ -200,7 +200,7 @@
<div class="box6"> <div class="box6">
<div class="box6-header" style="width: 790px"> <div class="box6-header" style="width: 790px">
<div class="header-icon"> <div class="header-icon">
<img src="./assets/images/box6-header-icon.png" alt="" /> <img src="./assets/images/box3-header-icon.png" alt="" />
</div> </div>
<div class="header-title" <div class="header-title"
style="display: flex; width: 740px; justify-content: space-between; align-items: center"> style="display: flex; width: 740px; justify-content: space-between; align-items: center">
...@@ -223,7 +223,7 @@ ...@@ -223,7 +223,7 @@
<div class="box7-header"> <div class="box7-header">
<div class="box7-header-left"> <div class="box7-header-left">
<div class="box7-header-icon"> <div class="box7-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" /> <img src="./assets/images/TechnologyFigures-icon2.png" alt="" />
</div> </div>
<div class="box7-header-title">{{ "科技人物类型" }}</div> <div class="box7-header-title">{{ "科技人物类型" }}</div>
</div> </div>
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
<div class="box8-header"> <div class="box8-header">
<div class="box8-header-left"> <div class="box8-header-left">
<div class="box8-header-icon"> <div class="box8-header-icon">
<img src="./assets/images/box6-header-icon.png" alt="" /> <img src="./assets/images/TechnologyFigures-icon2.png" alt="" />
</div> </div>
<div style="display: flex; width: 730px; justify-content: space-between; align-items: center"> <div style="display: flex; width: 730px; justify-content: space-between; align-items: center">
<div class="box8-header-title">{{ "主要人物涉华观点统计" }}</div> <div class="box8-header-title">{{ "主要人物涉华观点统计" }}</div>
...@@ -839,7 +839,7 @@ onMounted(() => { ...@@ -839,7 +839,7 @@ onMounted(() => {
line-height: 47px; line-height: 47px;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 16px;
font-weight: 400; font-weight: 400;
} }
} }
......
src/views/technologyFigures/json/source.json
浏览文件 @ 27588a66
...@@ -4,111 +4,127 @@ ...@@ -4,111 +4,127 @@
"title": "美国总统（2017-2021、2025-至今），共和党党员", "title": "美国总统（2017-2021、2025-至今），共和党党员",
"tag": "行政主管", "tag": "行政主管",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"] "colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"],
"icon": ["1"]
}, },
{ {
"name": "詹姆斯·戴维·万斯", "name": "詹姆斯·戴维·万斯",
"title": "美国副总统、参议院议长、共和党全国委员会财务主席", "title": "美国副总统、参议院议长、共和党全国委员会财务主席",
"tag": "行政主管", "tag": "行政主管",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"] "colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"],
"icon": []
}, },
{ {
"name": "黄仁勋", "name": "黄仁勋",
"title": "NVIDIA公司创始人兼首席执行官，美国工程院院士", "title": "NVIDIA公司创始人兼首席执行官，美国工程院院士",
"tag": "科技企业领袖", "tag": "科技企业领袖",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"] "colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"],
"icon": ["1"]
}, },
{ {
"name": "马尔科·鲁比奥", "name": "马尔科·鲁比奥",
"title": "美国国务卿，美国总统国家安全事务临时助理", "title": "美国国务卿，美国总统国家安全事务临时助理",
"tag": "行政主管", "tag": "行政主管",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"] "colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"],
"icon": []
}, },
{ {
"name": "埃隆·马斯克", "name": "埃隆·马斯克",
"title": "特斯拉创始人兼首席执行官、SpaceX、美国党创始人", "title": "特斯拉创始人兼首席执行官、SpaceX、美国党创始人",
"tag": "科技企业领袖", "tag": "科技企业领袖",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"] "colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"],
"icon": ["1"]
}, },
{ {
"name": "乔迪·阿灵顿", "name": "乔迪·阿灵顿",
"title": "共和党党员，美国国会众议院议员，预算委员会主席", "title": "共和党党员，美国国会众议院议员，预算委员会主席",
"tag": "国会议员", "tag": "国会议员",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"] "colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"],
"icon": []
}, },
{ {
"name": "霍华德·卢特尼克", "name": "霍华德·卢特尼克",
"title": "美国商务部长", "title": "美国商务部长",
"tag": "行政主管", "tag": "行政主管",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"] "colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"],
"icon": ["1"]
}, },
{ {
"name": "蒂姆·库克", "name": "蒂姆·库克",
"title": "苹果公司首席执行官，清华大学经济管理学院顾问委员会主席", "title": "苹果公司首席执行官，清华大学经济管理学院顾问委员会主席",
"tag": "科技企业领袖", "tag": "科技企业领袖",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"] "colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"],
"icon": []
}, },
{ {
"name": "朱棣文", "name": "朱棣文",
"title": "第12任美国能源部部长，主要研究领域为原子物理、激光科学", "title": "第12任美国能源部部长，主要研究领域为原子物理、激光科学",
"tag": "顶级科学家", "tag": "顶级科学家",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"] "colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"],
"icon": ["1"]
}, },
{ {
"name": "约翰·图恩", "name": "约翰·图恩",
"title": "共和党党员，美国国会众议院议员", "title": "共和党党员，美国国会众议院议员",
"tag": "国会议员", "tag": "国会议员",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"] "colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"],
"icon": []
}, },
{ {
"name": "珍妮弗·道德纳", "name": "珍妮弗·道德纳",
"title": "主要研究领域为RNA领域和基因编辑技术", "title": "主要研究领域为RNA领域和基因编辑技术",
"tag": "顶级科学家", "tag": "顶级科学家",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"] "colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"],
"icon": ["1"]
}, },
{ {
"name": "迈克·约翰逊", "name": "迈克·约翰逊",
"title": "美国众议院议长", "title": "美国众议院议长",
"tag": "国会议员", "tag": "国会议员",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"] "colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"],
"icon": []
}, },
{ {
"name": "亚当·史密斯", "name": "亚当·史密斯",
"title": "美国国会众议院议员，众议院军事委员会民主党领袖", "title": "美国国会众议院议员，众议院军事委员会民主党领袖",
"tag": "国会议员", "tag": "国会议员",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"] "colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"],
"icon": ["1"]
}, },
{ {
"name": "查尔斯·本内特", "name": "查尔斯·本内特",
"title": "美国国家科学院院士、美国物理学会院士，量子信息论主要创立者", "title": "美国国家科学院院士、美国物理学会院士，量子信息论主要创立者",
"tag": "顶级科学家", "tag": "顶级科学家",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"] "colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"],
"icon": []
}, },
{ {
"name": "桑达尔·皮查伊", "name": "桑达尔·皮查伊",
"title": "谷歌母公司Alphabet首席执行官", "title": "谷歌母公司Alphabet首席执行官",
"tag": "科技企业领袖", "tag": "科技企业领袖",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"] "colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"],
"icon": ["1"]
}, },
{ {
"name": "威康·汤姆逊", "name": "威康·汤姆逊",
"title": "美国国家科学院院士、美国物理学会院士，量子信息论主要创立者", "title": "美国国家科学院院士、美国物理学会院士，量子信息论主要创立者",
"tag": "顶级科学家", "tag": "顶级科学家",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"] "colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"],
"icon": []
} }
] ]
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论