提交 69298145 authored 作者: 朱政's avatar 朱政

Merge branch 'master' into zz-dev

{
"code": 200,
"message": "操作成功",
"success": true,
"data": [
{
"eventType": "行政令",
"eventName": "为了美国和委内瑞拉人民的利益保障委内瑞拉的石油收入",
"eventDesc": null,
"eventId": "248914",
"eventDomainList": [
{
"domainId": "1",
"domainName": "人工智能"
},
{
"domainId": "3",
"domainName": "新一代通信网络"
}
],
"eventOrgName": null,
"eventDate": "2026-01-10"
},
{
"eventType": "行政令",
"eventName": null,
"eventDesc": null,
"eventId": "248863",
"eventDomainList": [
{
"domainId": "8",
"domainName": "先进制造"
},
{
"domainId": "9",
"domainName": "新材料"
}
],
"eventOrgName": null,
"eventDate": "2026-01-09"
},
{
"eventType": "行政令",
"eventName": "使美国退出与美国利益相悖的国际组织、公约、条约",
"eventDesc": null,
"eventId": "249004",
"eventDomainList": [
{
"domainId": "2",
"domainName": "生物科技"
},
{
"domainId": "4",
"domainName": "量子科技"
},
{
"domainId": "5",
"domainName": "新能源"
},
{
"domainId": "3",
"domainName": "新一代通信网络"
}
],
"eventOrgName": null,
"eventDate": "2026-01-08"
},
{
"eventType": "行政令",
"eventName": "在国防合同中优先考虑作战人员",
"eventDesc": null,
"eventId": "248915",
"eventDomainList": [
{
"domainId": "99",
"domainName": "其他"
},
{
"domainId": "8",
"domainName": "先进制造"
},
{
"domainId": "10",
"domainName": "航空航天"
}
],
"eventOrgName": null,
"eventDate": "2026-01-08"
},
{
"eventType": "行政令",
"eventName": "大西洋高度洄游物种;商业性大西洋黑鼻鲨和娱乐性大西洋鲨鱼渔业管理措施的修订",
"eventDesc": "NMFS提议对商业和休闲大西洋鲨鱼渔业进行几项改革。具体来说,NMFS正在考虑取消大西洋地区黑鼻鲨管理边界,修改商业保留限额...",
"eventId": "163447",
"eventDomainList": [
{
"domainId": "14",
"domainName": "核"
},
{
"domainId": "7",
"domainName": "海洋"
}
],
"eventOrgName": null,
"eventDate": "2026-01-05"
},
{
"eventType": "行政令",
"eventName": "关于Hiefo Corporation收购Emcore Corporation部分资产",
"eventDesc": null,
"eventId": "248916",
"eventDomainList": [
{
"domainId": "3",
"domainName": "新一代通信网络"
},
{
"domainId": "8",
"domainName": "先进制造"
},
{
"domainId": "6",
"domainName": "集成电路"
}
],
"eventOrgName": null,
"eventDate": "2026-01-03"
},
{
"eventType": "行政令",
"eventName": "汽车贷款利息扣除",
"eventDesc": "本文件包含关于某些纳税人扣除高达10,000美元的合格乘用车贷款利息的拟议法规。本文件还包含关于新信息报告的拟议法规...",
"eventId": "163443",
"eventDomainList": [
{
"domainId": "13",
"domainName": "太空"
},
{
"domainId": "14",
"domainName": "核"
}
],
"eventOrgName": null,
"eventDate": "2026-01-02"
},
{
"eventType": "行政令",
"eventName": "品牌处方药费用法规的法定更新",
"eventDesc": "本文件建议修订有关对从事制造或进口某些品牌处方药业务的相关实体征收年费的法规。为了应对覆盖缺口折扣的替代...",
"eventId": "163444",
"eventDomainList": [
{
"domainId": "2",
"domainName": "生物科技"
},
{
"domainId": "3",
"domainName": "新一代通信网络"
}
],
"eventOrgName": null,
"eventDate": "2026-01-02"
},
{
"eventType": "337",
"eventName": "外国制造的半导体器件及其下游产品和组件",
"eventDesc": "美国ITC发布对外国制造的半导体器件及其下游产品和组件的337部分终裁",
"eventId": "111",
"eventDomainList": [
{
"domainId": "1",
"domainName": "人工智能"
},
{
"domainId": "5",
"domainName": "新能源"
}
],
"eventOrgName": "美国商务部",
"eventDate": "2026-01-01"
},
{
"eventType": "行政令",
"eventName": "美国东北部的渔业;大西洋冲浪蛤和海洋圆蛤渔业管理计划修正案21",
"eventDesc": "NMFS宣布,中大西洋渔业管理委员会已提交大西洋冲浪蛤和海洋圆蛤渔业管理计划第21号修正案,供商务部长审查和批准。我们正在征求意见...",
"eventId": "163426",
"eventDomainList": [
{
"domainId": "7",
"domainName": "海洋"
},
{
"domainId": "3",
"domainName": "新一代通信网络"
}
],
"eventOrgName": null,
"eventDate": "2025-12-29"
}
]
}
\ No newline at end of file
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import right from "./assets/right.png"; import right from "./assets/right-white.png";
import background from "./assets/background.png"; import background from "./assets/background.png";
// 组件引入 // 组件引入
...@@ -104,12 +104,13 @@ const handleNavClick = name => { ...@@ -104,12 +104,13 @@ const handleNavClick = name => {
} }
&.active { &.active {
background-color: rgba(246, 250, 255, 1); background-color: rgba(5, 95, 194, 1);
border: 1px solid rgba(174, 214, 255, 1); border: 1px solid rgba(174, 214, 255, 1);
border-radius: 10px; border-radius: 10px;
span { span {
color: rgb(5, 95, 194); // color: rgb(5, 95, 194);
color: #fff;
} }
} }
} }
......
...@@ -21,8 +21,13 @@ ...@@ -21,8 +21,13 @@
<!-- 美对华“四全”打压 --> <!-- 美对华“四全”打压 -->
<div id="us-pressure" class="us-pressure-section"> <div id="us-pressure" class="us-pressure-section">
<div class="data-select"> <div class="data-select">
<div v-for="item in dateList" :key="item.type" class="date-item" :class="{ active: activeDate === item.type }" <div
@click="handleDateClick(item.type)"> v-for="item in dateList"
:key="item.type"
class="date-item"
:class="{ active: activeDate === item.type }"
@click="handleDateClick(item.type)"
>
<!-- <img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" /> --> <!-- <img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" /> -->
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</div> </div>
...@@ -133,8 +138,6 @@ provide("activeDate", activeDate); ...@@ -133,8 +138,6 @@ provide("activeDate", activeDate);
const handleDateClick = type => { const handleDateClick = type => {
activeDate.value = type; activeDate.value = type;
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -250,7 +253,8 @@ const handleDateClick = type => { ...@@ -250,7 +253,8 @@ const handleDateClick = type => {
.home-top-bg { .home-top-bg {
background: background:
url("./assets/images/background.png"), linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%); url("./assets/images/background.png"),
linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -266,7 +270,7 @@ const handleDateClick = type => { ...@@ -266,7 +270,7 @@ const handleDateClick = type => {
.data-select { .data-select {
width: 108px; width: 108px;
height: 192px; height: 192px;
position: fixed; position: absolute;
top: 149px; top: 149px;
left: 0; left: 0;
background-color: rgba(255, 255, 255, 0.65); background-color: rgba(255, 255, 255, 0.65);
......
import * as echarts from 'echarts'; import * as echarts from "echarts";
/** /**
* 计算雷达图最外圈半径(px) * 计算雷达图最外圈半径(px)
...@@ -21,35 +21,35 @@ function getOuterRadius(dom, radarRadius = 75) { ...@@ -21,35 +21,35 @@ function getOuterRadius(dom, radarRadius = 75) {
const getBarChart = (nameList, valueList, isPer, dom) => { const getBarChart = (nameList, valueList, isPer, dom) => {
// 1. 基础雷达图配置 // 1. 基础雷达图配置
const option = { const option = {
title: { text: '' }, title: { text: "" },
legend: { legend: {
show: false, show: false,
icon: 'circle', icon: "circle",
orient: 'vertical', orient: "vertical",
right: 0, right: 0,
top: 'center', top: "center",
align: 'left', align: "left",
data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入'] data: ["法案", "行政令", "科技智库", "出口管制", "投融资限制", "市场准入"]
}, },
radar: { radar: {
shape: 'circle', shape: "circle",
radius: '75%', // 雷达图本身占容器 75% radius: "75%", // 雷达图本身占容器 75%
indicator: [ indicator: [
{ name: '研究人员总数', max: 6500 }, { name: "研究人员总数", max: 6500 },
{ name: '每万人研究人员数', max: 16000 }, { name: "每万人研究人员数", max: 16000 },
{ name: '每万研究人员研发经费投入额', max: 30000 }, { name: "每万研究人员研发经费投入额", max: 30000 },
{ name: '每万人研发经费投入额', max: 38000 }, { name: "每万人研发经费投入额", max: 38000 },
{ name: '研发经费占GDP的比重', max: 52000 }, { name: "研发经费占GDP的比重", max: 52000 },
{ name: '研发经费投入总额', max: 25000 } { name: "研发经费投入总额", max: 25000 }
], ],
axisName: { axisName: {
// 1. 富文本颜色 // 1. 富文本颜色
color: '#3B414B', color: "#3B414B",
fontSize: 14, fontSize: 14,
fontWeight: 600, fontWeight: 600,
// 2. 白色矩形背景 // 2. 白色矩形背景
backgroundColor: '#fff', // 背景色 backgroundColor: "#fff", // 背景色
borderRadius: 4, // 圆角 borderRadius: 4, // 圆角
padding: [4, 8], // 上下 4px,左右 8px padding: [4, 8], // 上下 4px,左右 8px
...@@ -58,52 +58,78 @@ const getBarChart = (nameList, valueList, isPer, dom) => { ...@@ -58,52 +58,78 @@ const getBarChart = (nameList, valueList, isPer, dom) => {
const len = txt.length; const len = txt.length;
if (len <= 5) return txt; if (len <= 5) return txt;
const br = Math.ceil(len / 2); const br = Math.ceil(len / 2);
return txt.substring(0, br) + '\n' + txt.substring(br); return txt.substring(0, br) + "\n" + txt.substring(br);
} }
}, },
splitLine: { splitLine: {
lineStyle: { color: 'rgba(200,200,200,.6)' } lineStyle: { color: "rgba(200,200,200,.6)" }
}, },
splitArea: { show: false }, splitArea: { show: false },
axisLine: { show: false } axisLine: { show: false }
}, },
series: [{ series: [
name: 'Budget vs spending', {
type: 'radar', name: "Budget vs spending",
type: "radar",
data: [ data: [
{ value: [4200, 3000, 20000, 35000, 50000, 18000], name: '法案', areaStyle: { color: 'rgba(10, 87, 166, 0.2)' } }, {
{ value: [5000, 14000, 28000, 26000, 42000, 21000], name: '行政令', areaStyle: { color: 'rgba(206, 79, 81, 0.2)' } }, value: [4200, 3000, 20000, 35000, 50000, 18000],
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '科技智库', areaStyle: { color: 'rgba(250, 140, 22, 0.2)' } }, name: "法案",
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '出口管制', areaStyle: { color: 'rgba(22, 180, 120, 0.2)' } }, areaStyle: { color: "rgba(10, 87, 166, 0.2)" }
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '投融资限制', areaStyle: { color: 'rgba(120, 100, 200, 0.2)' } }, },
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '市场准入', areaStyle: { color: 'rgba(255, 100, 150, 0.2)' } } {
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: "行政令",
areaStyle: { color: "rgba(206, 79, 81, 0.2)" }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "科技智库",
areaStyle: { color: "rgba(250, 140, 22, 0.2)" }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "出口管制",
areaStyle: { color: "rgba(22, 180, 120, 0.2)" }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "投融资限制",
areaStyle: { color: "rgba(120, 100, 200, 0.2)" }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "市场准入",
areaStyle: { color: "rgba(255, 100, 150, 0.2)" }
}
]
}
] ]
}]
}; };
// 2. 计算文字所在圆半径(单位 px) // 2. 计算文字所在圆半径(单位 px)
const textRadius = getRadarTextRadius(dom, 75) + 30; // 75 与 radar.radius 保持一致 const textRadius = getRadarTextRadius(dom, 75) + 30; // 75 与 radar.radius 保持一致
// 3. 用“单圈描边”实现「粗线 + 文字在线上」 // 3. 用“单圈描边”实现「粗线 + 文字在线上」
option.graphic = [{ option.graphic = [
type: 'circle', {
type: "circle",
shape: { shape: {
cx: dom.offsetWidth / 2, cx: dom.offsetWidth / 2,
cy: dom.offsetHeight / 2, cy: dom.offsetHeight / 2,
r: textRadius r: textRadius
}, },
style: { style: {
stroke: '#EBECEE', // 线的颜色 stroke: "#EBECEE", // 线的颜色
lineWidth: 6, // 线的粗细(想要再粗就继续加大) lineWidth: 6, // 线的粗细(想要再粗就继续加大)
fill: 'transparent' fill: "transparent"
}, }
// z: 1000 // 保证压在最上层 // z: 1000 // 保证压在最上层
}]; }
];
return option; return option;
}; };
// 1. 先准备一个“半径换算”小工具 // 1. 先准备一个“半径换算”小工具
function getRadarTextRadius(dom, radiusPercent = 75) { function getRadarTextRadius(dom, radiusPercent = 75) {
// 雷达图中心永远在容器中心 // 雷达图中心永远在容器中心
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论