Skip to content

R
risk-monitor
提交 69298145 authored 作者: 朱政's avatar 朱政
浏览文件
操作

Merge branch 'master' into zz-dev

上级 1fdae7fb e3816e87
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 127 行增加 和 301 行删除
src/views/ZMOverView/components/fourSuppress/components/addDomain/mockdata.json deleted 100644 → 0
浏览文件 @ 1fdae7fb
{
"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
src/views/ZMOverView/components/fourSuppress/index.vue
浏览文件 @ 69298145
......@@ -26,7 +26,7 @@
<script setup>
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";
// 组件引入
......@@ -104,12 +104,13 @@ const handleNavClick = name => {
}
&.active {
background-color: rgba(246, 250, 255, 1);
background-color: rgba(5, 95, 194, 1);
border: 1px solid rgba(174, 214, 255, 1);
border-radius: 10px;
span {
color: rgb(5, 95, 194);
// color: rgb(5, 95, 194);
color: #fff;
}
}
}
......
src/views/ZMOverView/index.vue
浏览文件 @ 69298145
......@@ -21,8 +21,13 @@
<!-- 美对华“四全”打压 -->
<div id="us-pressure" class="us-pressure-section">
<div class="data-select">
<div v-for="item in dateList" :key="item.type" class="date-item" :class="{ active: activeDate === item.type }"
@click="handleDateClick(item.type)">
<div
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="" /> -->
<span>{{ item.name }}</span>
</div>
......@@ -133,8 +138,6 @@ provide("activeDate", activeDate);
const handleDateClick = type => {
activeDate.value = type;
};
</script>
<style lang="scss" scoped>
......@@ -250,7 +253,8 @@ const handleDateClick = type => {
.home-top-bg {
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%;
position: absolute;
width: 100%;
......@@ -266,7 +270,7 @@ const handleDateClick = type => {
.data-select {
width: 108px;
height: 192px;
position: fixed;
position: absolute;
top: 149px;
left: 0;
background-color: rgba(255, 255, 255, 0.65);
......
src/views/overView/js/radarChart3.js
浏览文件 @ 69298145
import * as echarts from 'echarts';
import * as echarts from "echarts";
/**
* 计算雷达图最外圈半径（px）
......@@ -6,9 +6,9 @@ import * as echarts from 'echarts';
* @param {number} radarRadius 配置项里 radar.radius，默认 75%
*/
function getOuterRadius(dom, radarRadius = 75) {
// 容器短边的一半 * 百分比
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radarRadius / 100);
// 容器短边的一半 * 百分比
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radarRadius / 100);
}
/**
......@@ -19,95 +19,121 @@ function getOuterRadius(dom, radarRadius = 75) {
* @param {HTMLDivElement} dom 图表容器（用于计算半径，必须传）
*/
const getBarChart = (nameList, valueList, isPer, dom) => {
// 1. 基础雷达图配置
const option = {
title: { text: '' },
legend: {
show: false,
icon: 'circle',
orient: 'vertical',
right: 0,
top: 'center',
align: 'left',
data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入']
},
radar: {
shape: 'circle',
radius: '75%', // 雷达图本身占容器 75%
indicator: [
{ name: '研究人员总数', max: 6500 },
{ name: '每万人研究人员数', max: 16000 },
{ name: '每万研究人员研发经费投入额', max: 30000 },
{ name: '每万人研发经费投入额', max: 38000 },
{ name: '研发经费占GDP的比重', max: 52000 },
{ name: '研发经费投入总额', max: 25000 }
],
axisName: {
// 1. 富文本颜色
color: '#3B414B',
fontSize: 14,
fontWeight: 600,
// 1. 基础雷达图配置
const option = {
title: { text: "" },
legend: {
show: false,
icon: "circle",
orient: "vertical",
right: 0,
top: "center",
align: "left",
data: ["法案", "行政令", "科技智库", "出口管制", "投融资限制", "市场准入"]
},
radar: {
shape: "circle",
radius: "75%", // 雷达图本身占容器 75%
indicator: [
{ name: "研究人员总数", max: 6500 },
{ name: "每万人研究人员数", max: 16000 },
{ name: "每万研究人员研发经费投入额", max: 30000 },
{ name: "每万人研发经费投入额", max: 38000 },
{ name: "研发经费占GDP的比重", max: 52000 },
{ name: "研发经费投入总额", max: 25000 }
],
axisName: {
// 1. 富文本颜色
color: "#3B414B",
fontSize: 14,
fontWeight: 600,
// 2. 白色矩形背景
backgroundColor: '#fff', // 背景色
borderRadius: 4, // 圆角
padding: [4, 8], // 上下 4px，左右 8px
// 2. 白色矩形背景
backgroundColor: "#fff", // 背景色
borderRadius: 4, // 圆角
padding: [4, 8], // 上下 4px，左右 8px
// 3. 自动换两行（你原来的逻辑）
formatter: function (txt) {
const len = txt.length;
if (len <= 5) return txt;
const br = Math.ceil(len / 2);
return txt.substring(0, br) + '\n' + txt.substring(br);
}
},
splitLine: {
lineStyle: { color: 'rgba(200,200,200,.6)' }
},
splitArea: { show: false },
axisLine: { show: false }
},
series: [{
name: 'Budget vs spending',
type: 'radar',
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: [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)' } }
]
}]
};
// 3. 自动换两行（你原来的逻辑）
formatter: function (txt) {
const len = txt.length;
if (len <= 5) return txt;
const br = Math.ceil(len / 2);
return txt.substring(0, br) + "\n" + txt.substring(br);
}
},
splitLine: {
lineStyle: { color: "rgba(200,200,200,.6)" }
},
splitArea: { show: false },
axisLine: { show: false }
},
series: [
{
name: "Budget vs spending",
type: "radar",
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: [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）
const textRadius = getRadarTextRadius(dom, 75) + 30; // 75 与 radar.radius 保持一致
// 2. 计算文字所在圆半径（单位 px）
const textRadius = getRadarTextRadius(dom, 75) + 30; // 75 与 radar.radius 保持一致
// 3. 用“单圈描边”实现「粗线 + 文字在线上」
option.graphic = [{
type: 'circle',
shape: {
cx: dom.offsetWidth / 2,
cy: dom.offsetHeight / 2,
r: textRadius
},
style: {
stroke: '#EBECEE', // 线的颜色
lineWidth: 6, // 线的粗细（想要再粗就继续加大）
fill: 'transparent'
},
// z: 1000 // 保证压在最上层
}];
return option;
// 3. 用“单圈描边”实现「粗线 + 文字在线上」
option.graphic = [
{
type: "circle",
shape: {
cx: dom.offsetWidth / 2,
cy: dom.offsetHeight / 2,
r: textRadius
},
style: {
stroke: "#EBECEE", // 线的颜色
lineWidth: 6, // 线的粗细（想要再粗就继续加大）
fill: "transparent"
}
// z: 1000 // 保证压在最上层
}
];
return option;
};
// 1. 先准备一个“半径换算”小工具
function getRadarTextRadius(dom, radiusPercent = 75) {
// 雷达图中心永远在容器中心
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radiusPercent / 100);
// 雷达图中心永远在容器中心
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radiusPercent / 100);
}
export default getBarChart;
\ No newline at end of file
export default getBarChart;
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论