Skip to content

R
risk-monitor
提交 ea988bc3 authored 作者: yanpeng's avatar yanpeng
浏览文件
操作

finance

上级 7f063300
隐藏空白字符变更
内嵌 并排
正在显示 包含 8055 行增加 和 386 行删除
src/router/index.js
浏览文件 @ ea988bc3
import { createRouter, createWebHistory } from "vue-router"; import { createRouter, createWebHistory } from "vue-router";
//中美博弈概览 //中美博弈概览
import overView from '@/views/overView/index.vue' import overView from "@/views/overView/index.vue";
// 智库相关 // 智库相关
import thinkTank from "../views/thinkTank/index.vue"; import thinkTank from "../views/thinkTank/index.vue";
import ThinkTankDetail from "@/views/thinkTank/ThinkTankDetail/index.vue"; import ThinkTankDetail from "@/views/thinkTank/ThinkTankDetail/index.vue";
import ReportDetail from "@/views/thinkTank/ReportDetail/index.vue"; import ReportDetail from "@/views/thinkTank/ReportDetail/index.vue";
// 法案相关 // 法案相关
import BillHome from '@/views/bill/billHome/index.vue' import BillHome from "@/views/bill/billHome/index.vue";
import BillLayoutContainer from '@/views/bill/billLayout/index.vue' import BillLayoutContainer from "@/views/bill/billLayout/index.vue";
import BillLayout from '@/views/bill/index.vue' import BillLayout from "@/views/bill/index.vue";
import BillIntroduction from '@/views/bill/introdoction/index.vue' import BillIntroduction from "@/views/bill/introdoction/index.vue";
import BillBackground from '@/views/bill/background/index.vue' import BillBackground from "@/views/bill/background/index.vue";
import BillTemplate from '@/views/bill/template/index.vue' import BillTemplate from "@/views/bill/template/index.vue";
import BillDeepDigLayout from '@/views/bill/deepDig/index.vue' import BillDeepDigLayout from "@/views/bill/deepDig/index.vue";
import BillDeepDigProcessOverview from '@/views/bill/deepDig/processOverview/index.vue' import BillDeepDigProcessOverview from "@/views/bill/deepDig/processOverview/index.vue";
import BillDeepDigProcessAnalysis from '@/views/bill/deepDig/processAnalysis/index.vue' import BillDeepDigProcessAnalysis from "@/views/bill/deepDig/processAnalysis/index.vue";
import BillDeepDigPoliContribution from '@/views/bill/deepDig/poliContribution/index.vue' import BillDeepDigPoliContribution from "@/views/bill/deepDig/poliContribution/index.vue";
import BillInfluenceLayout from '@/views/bill/influence/index.vue' import BillInfluenceLayout from "@/views/bill/influence/index.vue";
import BillInfluenceIndustry from '@/views/bill/influence/industry/index.vue' import BillInfluenceIndustry from "@/views/bill/influence/industry/index.vue";
import BillInfluenceScientificResearch from '@/views/bill/influence/scientificResearch/index.vue' import BillInfluenceScientificResearch from "@/views/bill/influence/scientificResearch/index.vue";
import BillRelevantCircumstance from '@/views/bill/relevantCircumstance/index.vue' import BillRelevantCircumstance from "@/views/bill/relevantCircumstance/index.vue";
// 出口管制 // 出口管制
import ExportControl from "@/views/exportControl/index.vue"; import ExportControl from "@/views/exportControl/index.vue";
// 政令 // 政令
import Decree from '@/views/decree/decreeHome/index.vue' import Decree from "@/views/decree/decreeHome/index.vue";
import DecreeLayoutContainer from '@/views/decree/decreeLayout/index.vue' import DecreeLayoutContainer from "@/views/decree/decreeLayout/index.vue";
import DecreeOverviewLayout from '@/views/decree/decreeLayout/overview/index.vue' import DecreeOverviewLayout from "@/views/decree/decreeLayout/overview/index.vue";
import DecreeIntroduction from '@/views/decree/decreeLayout/overview/introduction/index.vue' import DecreeIntroduction from "@/views/decree/decreeLayout/overview/introduction/index.vue";
import DecreeBackground from '@/views/decree/decreeLayout/overview/background/index.vue' import DecreeBackground from "@/views/decree/decreeLayout/overview/background/index.vue";
import DecreeDeepDig from '@/views/decree/decreeLayout/deepdig/index.vue' import DecreeDeepDig from "@/views/decree/decreeLayout/deepdig/index.vue";
import DecreeInfluence from '@/views/decree/decreeLayout/influence/index.vue' import DecreeInfluence from "@/views/decree/decreeLayout/influence/index.vue";
// 市场准入限制 // 市场准入限制
import MarketAccessRestrictions from "@/views/marketAccessRestrictions/marketAccessHome/index.vue"; import MarketAccessRestrictions from "@/views/marketAccessRestrictions/marketAccessHome/index.vue";
...@@ -44,391 +44,398 @@ import MarketSingleCaseLayout from "@/views/marketAccessRestrictions/singleCaseL ...@@ -44,391 +44,398 @@ import MarketSingleCaseLayout from "@/views/marketAccessRestrictions/singleCaseL
import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue"; import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue";
import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue"; import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue";
// 投融资限制
import Finance from "@/views/finance/index.vue";
// 智能写报 // 智能写报
import WrittingAsstaint from '@/views/writtingAsstaint/index.vue' import WrittingAsstaint from "@/views/writtingAsstaint/index.vue";
// 门户 // 门户
import Portal1 from '@/views/portals/portal1/index.vue'; import Portal1 from "@/views/portals/portal1/index.vue";
import Portal2 from '@/views/portals/portal2/index.vue'; import Portal2 from "@/views/portals/portal2/index.vue";
const routes = [ const routes = [
// 智能写报 // 智能写报
{ {
path: "/writtingAsstaint", path: "/writtingAsstaint",
name: "writtingAsstaint", name: "writtingAsstaint",
component: WrittingAsstaint, component: WrittingAsstaint,
meta: { meta: {
title: "智能写报" title: "智能写报"
} }
}, },
{
path: '/',
redirect: '/billHome'
},
// 中美博弈概览页面路由
{
path: '/overView',
name: 'overView',
component: overView,
meta: {
title: '法案首页'
},
},
// 智库系统的主要路由
{
path: "/thinkTank",
name: "thinkTank",
component: thinkTank,
meta: {
title: "首页"
}
},
{
path: "/think-tank/:id",
name: "ThinkTankDetail",
component: ThinkTankDetail,
meta: {
title: "智库详情"
}
},
{
path: "/report/:id",
name: "ReportDetail",
component: ReportDetail,
meta: {
title: "报告详情"
}
},
// 法案系统路由
{
path: '/billHome',
name: 'BillHome',
component: BillHome,
meta: {
title: '法案首页'
},
},
{
path: '/billLayout',
name: 'BillLayoutContainer',
component: BillLayoutContainer,
redirect: '/billLayout/bill',
meta: {
title: '法案布局'
},
children: [
// 法案分析路由
{
path: 'bill',
name: 'BillLayout',
component: BillLayout,
redirect: '/billLayout/bill/introduction',
meta: {
title: '法案分析'
},
children: [
{
path: 'introduction',
name: 'BillIntroduction',
component: BillIntroduction,
meta: { title: '法案简介' }
},
{
path: 'background',
name: 'BillBackground',
component: BillBackground,
meta: { title: '法案背景' }
},
{
path: 'template',
name: 'BillTemplate',
component: BillTemplate,
meta: { title: '内容概要' }
}
]
},
// 深度挖掘路由
{
path: 'deepDig',
name: 'BillDeepDigLayout',
component: BillDeepDigLayout,
redirect: '/billLayout/deepDig/processOverview',
meta: {
title: '深度挖掘'
},
children: [
{
path: 'processOverview',
name: 'BillDeepDigProcessOverview',
component: BillDeepDigProcessOverview,
meta: { title: '流程概要' }
},
{
path: 'processAnalysis',
name: 'BillDeepDigProcessAnalysis',
component: BillDeepDigProcessAnalysis,
meta: { title: '流程分析' }
},
{
path: 'poliContribution',
name: 'BillDeepDigPoliContribution',
component: BillDeepDigPoliContribution,
meta: { title: '政治献金' }
},
]
},
// 影响分析路由
{
path: 'influence',
name: 'BillInfluenceLayout',
component: BillInfluenceLayout,
redirect: '/billLayout/influence/industry',
meta: {
title: '影响分析'
},
children: [
{
path: 'industry',
name: 'BillInfluenceIndustry',
component: BillInfluenceIndustry,
meta: { title: '对华产业影响' }
},
{
path: 'scientificResearch',
name: 'BillInfluenceScientificResearch',
component: BillInfluenceScientificResearch,
meta: { title: '对华科研影响' }
}
]
},
{
path: 'relevantCircumstance',
name: 'BillRelevantCircumstance',
component: BillRelevantCircumstance,
meta: {
title: '相关情况'
}
}
]
},
// 出口管制首页 {
{ path: "/",
path: "/exportControl", redirect: "/billHome"
name: "ExportControl", },
component: ExportControl,
meta: {
title: "出口管制"
}
},
// 政令首页 // 中美博弈概览页面路由
{ {
path: '/decree', path: "/overView",
name: 'Decree', name: "overView",
component: Decree, component: overView,
meta: { meta: {
title: '政令' title: "法案首页"
}, }
}, },
{
path: '/decreeLayout',
name: 'DecreeLayoutContainer',
component: DecreeLayoutContainer,
redirect: '/decreeLayout/overview',
meta: {
title: '政令布局'
},
children: [
{
path: 'overview',
name: 'DecreeOverviewLayout',
component: DecreeOverviewLayout,
redirect: '/decreeLayout/overview/introduction',
meta: {
title: '政令概况'
},
children: [
{
path: 'introduction',
name: 'DecreeIntroduction',
component: DecreeIntroduction,
meta: { title: '政令简介' }
},
{
path: 'background',
name: 'DecreeBackground',
component: DecreeBackground,
meta: { title: '政令背景' }
},
]
},
// 深度挖掘路由
{
path: 'deepDig',
name: 'DeepDig',
component: DecreeDeepDig,
meta: {
title: '深度挖掘'
},
},
// 影响分析路由
{
path: 'influence',
name: 'DecreeInfluence',
component: DecreeInfluence,
meta: {
title: '影响分析'
},
} // 智库系统的主要路由
] {
}, path: "/thinkTank",
name: "thinkTank",
component: thinkTank,
meta: {
title: "首页"
}
},
{
path: "/think-tank/:id",
name: "ThinkTankDetail",
component: ThinkTankDetail,
meta: {
title: "智库详情"
}
},
{
path: "/report/:id",
name: "ReportDetail",
component: ReportDetail,
meta: {
title: "报告详情"
}
},
// 市场准入限制首页 // 法案系统路由
{ {
path: '/marketAccessRestrictions', path: "/billHome",
name: 'MarketAccessRestrictions', name: "BillHome",
component: MarketAccessRestrictions, component: BillHome,
meta: { meta: {
title: '市场准入限制' title: "法案首页"
}, }
}, },
{ {
path: '/marketAccessLayout', path: "/billLayout",
name: 'MarketAccessLayout', name: "BillLayoutContainer",
component: MarketAccessLayout, component: BillLayoutContainer,
redirect: '/marketAccessLayout/overview', redirect: "/billLayout/bill",
meta: { meta: {
title: '市场准入限制布局' title: "法案布局"
}, },
children: [ children: [
{ // 法案分析路由
path: 'overview', {
name: 'MarketAccessOverview', path: "bill",
component: MarketAccessOverview, name: "BillLayout",
meta: { component: BillLayout,
title: '调查概况' redirect: "/billLayout/bill/introduction",
}, meta: {
}, title: "法案分析"
{ },
path: 'case', children: [
name: 'MarketAccessCase', {
component: MarketAccessCase, path: "introduction",
meta: { name: "BillIntroduction",
title: '调查案件' component: BillIntroduction,
}, meta: { title: "法案简介" }
}, },
{
path: "background",
name: "BillBackground",
component: BillBackground,
meta: { title: "法案背景" }
},
{
path: "template",
name: "BillTemplate",
component: BillTemplate,
meta: { title: "内容概要" }
}
]
},
// 深度挖掘路由
{
path: "deepDig",
name: "BillDeepDigLayout",
component: BillDeepDigLayout,
redirect: "/billLayout/deepDig/processOverview",
meta: {
title: "深度挖掘"
},
children: [
{
path: "processOverview",
name: "BillDeepDigProcessOverview",
component: BillDeepDigProcessOverview,
meta: { title: "流程概要" }
},
{
path: "processAnalysis",
name: "BillDeepDigProcessAnalysis",
component: BillDeepDigProcessAnalysis,
meta: { title: "流程分析" }
},
{
path: "poliContribution",
name: "BillDeepDigPoliContribution",
component: BillDeepDigPoliContribution,
meta: { title: "政治献金" }
}
]
},
// 影响分析路由
{
path: "influence",
name: "BillInfluenceLayout",
component: BillInfluenceLayout,
redirect: "/billLayout/influence/industry",
meta: {
title: "影响分析"
},
children: [
{
path: "industry",
name: "BillInfluenceIndustry",
component: BillInfluenceIndustry,
meta: { title: "对华产业影响" }
},
{
path: "scientificResearch",
name: "BillInfluenceScientificResearch",
component: BillInfluenceScientificResearch,
meta: { title: "对华科研影响" }
}
]
},
{
path: "relevantCircumstance",
name: "BillRelevantCircumstance",
component: BillRelevantCircumstance,
meta: {
title: "相关情况"
}
}
]
},
] // 出口管制首页
}, {
{ path: "/exportControl",
path: '/marketSingleCaseLayout', name: "ExportControl",
name: 'MarketSingleCaseLayout', component: ExportControl,
component: MarketSingleCaseLayout, meta: {
redirect: '/marketSingleCaseLayout/overview', title: "出口管制"
meta: { }
title: '单次调查案件布局' },
},
children: [
{
path: 'overview',
name: 'MarketSingleCaseOverview',
component: MarketSingleCaseOverview,
meta: {
title: '调查简介'
},
},
{
path: 'deepdig',
name: 'MarketSingleCaseDeepdig',
component: MarketSingleCaseDeepdig,
meta: {
title: '深度挖掘'
},
},
// 政令首页
{
path: "/decree",
name: "Decree",
component: Decree,
meta: {
title: "政令"
}
},
{
path: "/decreeLayout",
name: "DecreeLayoutContainer",
component: DecreeLayoutContainer,
redirect: "/decreeLayout/overview",
meta: {
title: "政令布局"
},
children: [
{
path: "overview",
name: "DecreeOverviewLayout",
component: DecreeOverviewLayout,
redirect: "/decreeLayout/overview/introduction",
meta: {
title: "政令概况"
},
children: [
{
path: "introduction",
name: "DecreeIntroduction",
component: DecreeIntroduction,
meta: { title: "政令简介" }
},
{
path: "background",
name: "DecreeBackground",
component: DecreeBackground,
meta: { title: "政令背景" }
}
]
},
// 深度挖掘路由
{
path: "deepDig",
name: "DeepDig",
component: DecreeDeepDig,
meta: {
title: "深度挖掘"
}
},
// 影响分析路由
{
path: "influence",
name: "DecreeInfluence",
component: DecreeInfluence,
meta: {
title: "影响分析"
}
}
]
},
] // 市场准入限制首页
}, {
path: "/marketAccessRestrictions",
name: "MarketAccessRestrictions",
component: MarketAccessRestrictions,
meta: {
title: "市场准入限制"
}
},
{
path: "/marketAccessLayout",
name: "MarketAccessLayout",
component: MarketAccessLayout,
redirect: "/marketAccessLayout/overview",
meta: {
title: "市场准入限制布局"
},
children: [
{
path: "overview",
name: "MarketAccessOverview",
component: MarketAccessOverview,
meta: {
title: "调查概况"
}
},
{
path: "case",
name: "MarketAccessCase",
component: MarketAccessCase,
meta: {
title: "调查案件"
}
}
]
},
{
path: "/marketSingleCaseLayout",
name: "MarketSingleCaseLayout",
component: MarketSingleCaseLayout,
redirect: "/marketSingleCaseLayout/overview",
meta: {
title: "单次调查案件布局"
},
children: [
{
path: "overview",
name: "MarketSingleCaseOverview",
component: MarketSingleCaseOverview,
meta: {
title: "调查简介"
}
},
{
path: "deepdig",
name: "MarketSingleCaseDeepdig",
component: MarketSingleCaseDeepdig,
meta: {
title: "深度挖掘"
}
}
]
},
// 出口管制转移过来的页面 // 出口管制转移过来的页面
{ {
path: "/exportControl/analysis", path: "/exportControl/analysis",
name: "analysis", name: "analysis",
component: () => import("@/views/exportControl/analysis/index.vue"), component: () => import("@/views/exportControl/analysis/index.vue"),
meta: { meta: {
title: "分析页" title: "分析页"
} }
}, },
{ {
path: "/exportControl/infoplatform", path: "/exportControl/infoplatform",
name: "infoplatform", name: "infoplatform",
component: () => import("@/views/exportControl/infoPlatform/index.vue"), component: () => import("@/views/exportControl/infoPlatform/index.vue"),
meta: { meta: {
title: "信息平台" title: "信息平台"
} }
}, },
{ {
path: "/exportControl/rulelimit", path: "/exportControl/rulelimit",
name: "rulelimit", name: "rulelimit",
component: () => import("@/views/exportControl/ruleLimit/index.vue"), component: () => import("@/views/exportControl/ruleLimit/index.vue"),
meta: { meta: {
title: "规则限制" title: "规则限制"
} }
}, },
{ {
path: "/exportControl/ruledetail", path: "/exportControl/ruledetail",
name: "ruledetail", name: "ruledetail",
component: () => import("@/views/exportControl/ruleDetail/index.vue"), component: () => import("@/views/exportControl/ruleDetail/index.vue"),
meta: { meta: {
title: "规则详情" title: "规则详情"
} }
}, },
{ {
path: "/exportControl/researchfunding", path: "/exportControl/researchfunding",
name: "researchfunding", name: "researchfunding",
component: () => import("@/views/exportControl/researchFunding/index.vue"), component: () => import("@/views/exportControl/researchFunding/index.vue"),
meta: { meta: {
title: "科研资助" title: "科研资助"
} }
}, },
// 门户路由放在这块 // 投融资限制
{ {
path: "/portal1", path: "/finance",
name: "portal1", name: "finance",
component: Portal1, component: Finance,
meta: { meta: {
title: "门户1" title: "投融资限制"
} }
}, },
{
path: "/portal2",
name: "portal2",
component: Portal2,
meta: {
title: "门户2"
}
},
// 门户路由放在这块
{
path: "/portal1",
name: "portal1",
component: Portal1,
meta: {
title: "门户1"
}
},
{
path: "/portal2",
name: "portal2",
component: Portal2,
meta: {
title: "门户2"
}
}
]; ];
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes routes
}); });
// 路由守卫 - 设置页面标题 // 路由守卫 - 设置页面标题
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
if (to.meta.title) { if (to.meta.title) {
// document.title = `${to.meta.title} - Think Tank` // document.title = `${to.meta.title} - Think Tank`
} }
next(); next();
}); });
export default router; export default router;
src/views/finance/analysis/content/depthMine.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div class="depth-mine-container">
<div class="depth-mine-left">
<div
@click="handleClick(index)"
:class="['depth-mine-left-item', activeLeftTab === index ? 'depth-mine-left-item-active' : '']"
v-for="(item, index) in data"
:key="index"
>
<div class="depth-mine-left-item-title">{{ item[0] }}</div>
<div class="depth-mine-left-item-desc">{{ item[1] }}</div>
</div>
</div>
<el-row :gutter="20">
<el-col :span="12">
<custom-container title="实体清单历次更新中外受影响情况对比" height="580px">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 8px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button>
</div>
</template> -->
<template #default>
<!-- <div ref="echartsRef" style="height: 425px; width: 100%"></div> -->
<ECharts :option="chartOption" autoresize :style="{ height: '425px' }" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text">
2024年以来,实体清单更新次数相对于2023年有所降低,但是本年度内呈上升趋势。
</span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="实体清单历次更新中外受影响情况对比" height="580px">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 8px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button>
</div>
</template> -->
<template #default>
<div class="content-box">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column type="index" label="序号" />
<el-table-column prop="date" label="更新日期" width="150" />
<el-table-column prop="entity" label="实体数/历史排名" width="150" />
<el-table-column prop="entityCN" label="中国实体数/历史排名" />
<el-table-column prop="proportion" label="中国占比/历史排名" />
</el-table>
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text"
>相对于近几次更新，中国新增受制裁的实体数量占比的排名都显著提高，美国制裁中国实体的强度显著提升。</span
>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<custom-container title="实体清单更新频率" height="505px">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 8px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button>
</div>
</template> -->
<template #default>
<div class="content-box">
<!-- <v-charts :option="option" autoresize :style="{ height: '326px' }" /> -->
<!-- <div ref="frequenceRef" style="height: 340px; width: 100%"></div> -->
<ECharts :option="frequenceOption" autoresize :style="{ height: '326px' }" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text">
2024年以来,实体清单更新次数相对于2023年有所降低,但是本年度内呈上升趋势。
</span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="重点实体列表" height="505px">
<!-- 顶部右侧自定义内容 -->
<template #header-right>
<div style="display: flex; gap: 8px">
<el-input
placeholder="请输入关键词，使用(、)作为分隔符."
:suffix-icon="Search"
clearable
style="width: 360px"
>
<!-- <template #append>
<el-icon><Search /></el-icon>
</template> -->
</el-input>
<!-- <el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button> -->
</div>
</template>
<template #default>
<div class="content-box">
<div class="content-box-list">
<div class="content-box-list-item" v-for="item in entityList" :key="item.entity">
<div class="content-box-list-item-title">{{ item.entity }}</div>
<div class="content-box-list-item-tag">
<el-tag
:type="TAGTYPE[Math.floor(Math.random() * 5)]"
v-for="tag in item.tags"
:key="tag"
>{{ tag }}</el-tag
>
</div>
</div>
</div>
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text"
>本次实体清单更新,科研院所占比相对较高。需要注意的是,中国科学技术大学、中国科学院物理研究所等国内重点科研机构被列入实体清单,此外还有中科星图以及中电科旗下的多家研究所被列入清单,可能会对相关行业产生显著影响。</span
>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// import * as echarts from "echarts";
import ECharts from "@/components/Chart/index.vue";
// import VCharts from "vue-echarts";
import { useEcharts } from "@/hooks/useEcharts";
// import echarts from "@/plugins/echarts";
import { Search } from "@element-plus/icons-vue";
import CustomContainer from "@/components/Container/index.vue";
import { TAGTYPE } from "@/common/constant.js";
const tableData = ref([
{
date: "2024年5月14日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2024年4月11日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2024年2月27日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2023年12月7日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2023年11月15日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: " 2024年3月5日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
}
]);
// 重点实体列表
const entityList = ref([
{
entity: "中国科学技术大学",
tags: ["双一流", "985", "关税政策"]
},
{
entity: "合肥量子信息科学国家实验室",
tags: ["中国上市企业"]
},
{
entity: "中国科学院物理研究所",
tags: ["科研院所"]
}
]);
const frequenceRef = ref(null);
const echartsRef = ref(null);
const frequenceOption = ref({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
top: 20,
right: 3,
bottom: 0,
left: 3,
containLabel: true
},
legend: {
data: [],
bottom: 0,
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 15,
textStyle: {
fontSize: 12,
color: "#222B45"
}
},
xAxis: {
type: "category",
data: [
"202301",
"202302",
"202303",
"202304",
"202305",
"202306",
"202307",
"202308",
"202309",
"202310",
"202311",
"202312"
],
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#889fcc"
}
},
yAxis: {
type: "value",
axisLine: { show: false },
axisTick: { show: false },
splitLine: {
lineStyle: {
color: "#EFF1F3",
width: 0.8
}
},
axisLabel: { color: "#889fcc" }
},
series: [
{
name: "aa",
type: "bar",
data: [3, 2, 3, 0, 2, 1, 3, 1, 0, 2, 3, 2],
barWidth: "15",
itemStyle: {
color: "#639dfa",
borderRadius: [4, 4, 0, 0]
}
}
// {
// name: "bbb",
// type: "bar",
// data: [6, 13, 10, 5, 12, 5],
// barWidth: "15",
// itemStyle: {
// color: "#639dfa",
// borderRadius: [4, 4, 0, 0]
// }
// }
]
});
const chartOption = ref({
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999"
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: false },
saveAsImage: { show: false }
}
},
legend: {
data: ["中国", "外国", "占比"]
},
xAxis: [
{
type: "category",
data: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021"],
axisPointer: {
type: "shadow"
}
}
],
yAxis: [
{
type: "value",
name: "量",
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: "{value}"
}
},
{
type: "value",
name: "占比",
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: "{value}"
}
}
],
series: [
{
name: "中国",
type: "bar",
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: "外国",
type: "bar",
tooltip: {
valueFormatter: function (value) {
return value + " ml";
}
},
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: "占比",
type: "line",
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
});
onMounted(() => {
// let frequenceChart = echarts.init(frequenceRef.value);
// let chart = echarts.init(echartsRef.value);
// useEcharts(frequenceChart, frequenceOption);
// useEcharts(chart, chartOption);
});
const data = ref([
["新增实体37个", "较上次多31个"],
["上市企业3家", "较上次多2家"],
["涉及领域2个", "较上次少1个"],
["实体类别3种", "较上次多2种"]
]);
const activeLeftTab = ref(0);
const handleClick = index => {
activeLeftTab.value = index;
};
</script>
<style scoped>
.depth-mine-container {
padding: 0 5% 0 150px;
position: relative;
}
.depth-mine-left {
position: absolute;
left: 0;
top: 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.depth-mine-left-item {
display: flex;
flex-direction: column;
gap: 4px;
cursor: pointer;
color: rgba(95, 101, 108, 1);
padding: 10px 16px;
border-radius: 10px;
}
.depth-mine-left-item-active {
color: #fff;
background-color: rgba(10, 87, 166, 1);
}
.depth-mine-left-item-title {
font-size: 16px;
font-weight: 400;
}
.content-box {
/* height: 90vh; */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content-box-list {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
.content-box-list-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.content-box-list-item-title {
font-size: 16px;
font-weight: 700;
color: rgba(10, 18, 30, 1);
}
.content-box-list-item-tag {
display: flex;
gap: 8px;
}
.content-box-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background-color: rgba(246, 251, 255, 1);
padding: 5px 15px;
}
.content-box-footer-text {
font-size: 16px;
font-weight: 400;
color: rgba(10, 87, 166, 1);
}
.footer-img-small {
width: 20px;
height: 20px;
}
.footer-img-large {
width: 24px;
height: 24px;
}
</style>
src/views/finance/analysis/content/impactAnalysis.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<el-row :gutter="20">
<el-col :span="6">
<custom-container title="新增科研机构列表" height="1040px">
<template #header-top>
<div class="content-top">
<el-radio-group v-model="impactType" size="small">
<el-radio-button label="产业影响" value="cy" />
<el-radio-button label="科研机构影响" value="ky" />
</el-radio-group>
</div>
</template>
<!-- 顶部右侧自定义内容 -->
<template #header-right>
<div style="display: flex; gap: 8px">
<!-- <el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button> -->
<el-select v-model="orgType" :options="orgTypeOptions" :props="props" placeholder="Select" style="width: 80px" />
</div>
</template>
<template #default>
<div class="content-box-header">
<div class="content-box-header-title">名称</div>
<div class="content-box-header-title">进口仪器数</div>
</div>
<div class="content-box-centent-list">
<div class="content-box-list-item" v-for="item in entityList" :key="item.entity">
<div class="content-box-list-item-title">{{ item.entity }}</div>
<div class="content-box-list-item-num">{{ item.num }}</div>
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="18">
<el-row :gutter="20">
<el-col :span="12">
<custom-container title="各类别仪器对美依赖情况" height="500px">
<template #default>
<div class="content-box">
<!-- <div ref="barRef" style="height: 340px; width: 100%"></div> -->
<ECharts :option="barOption" autoresize :style="{ height: '340px' }" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text">
受制裁实体中，医学科研仪器对美依赖程度最高，达到50%。此外，电子策略仪器、物理性能测试仪器、激光器、核仪器、计量仪器、分析仪器等也有较高的对美依赖度，本次制裁可能会对相关企业产生较大的影响。
</span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="仪器进口国可替代性分析" height="500px">
<template #default>
<div class="content-box">
<!-- <div ref="pieRef" style="height: 340px; width: 100%"></div> -->
<ECharts :option="pieOption" autoresize :style="{ height: '340px' }" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text">
近些年,受制裁实体的国产仪器数量整体上呈增加趋势,但是2023年,各类国产仪器的新增数量均有显著降低,需要加以关注。
</span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<custom-container title="仪器对美依赖度升高风险分析" height="500px">
<template #default>
<div class="content-box">
<ECharts :option="frequenceOption" autoresize :style="{ height: '340px' }" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text">
近些年,受制裁实体的国产仪器数量整体上呈增加趋势,但是2023年,各类国产仪器的新增数量均有显著降低,需要加以关注。
</span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="仪器国产化降低风险分析" height="500px">
<template #default>
<div class="content-box">
<ECharts :option="chartOption" autoresize :style="{ height: '340px' }" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text">
近些年,受制裁实体的国产仪器数量整体上呈增加趋势,但是2023年,各类国产仪器的新增数量均有显著降低,需要加以关注。
</span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// import * as echarts from "echarts";
import ECharts from "@/components/Chart/index.vue";
import { useEcharts } from "@/hooks/useEcharts";
import echarts from "@/plugins/echarts";
import { Search } from "@element-plus/icons-vue";
import CustomContainer from "@/components/Container/index.vue";
import { TAGTYPE } from "@/common/constant.js";
const impactType = ref("ky");
const orgTypeOptions = ref([
{
value: "1",
label: "对外依赖"
}
]);
const orgType = ref("1");
const tableData = ref([
{
date: "2024年5月14日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2024年4月11日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2024年2月27日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2023年12月7日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2023年11月15日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: " 2024年3月5日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
}
]);
// 重点实体列表
const entityList = ref([
{
img: "",
num: 1556,
entity: "中国科学技术大学",
tags: ["双一流", "985", "关税政策"]
},
{
img: "",
num: 313,
entity: "合肥量子信息科学国家实验室",
tags: ["中国上市企业"]
},
{
img: "",
num: 270,
entity: "中国科学院物理研究所",
tags: ["科研院所"]
}
]);
const frequenceRef = ref(null);
const echartsRef = ref(null);
const pieRef = ref(null);
const barRef = ref(null);
const barOption = ref({
title: {
text: ""
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
legend: {},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01]
},
yAxis: {
type: "category",
data: ["医学科学仪器", "电子策略仪器", "物理性能测试仪器", "激光器", "核仪器", "计量仪器", "分析仪器"]
},
series: [
{
name: "2011",
type: "bar",
data: [50, 47.8, 46.9, 45.0, 40.8, 35.0, 34.8]
}
]
});
const pieOption = {
tooltip: {
trigger: "item"
},
legend: {
top: "5%",
left: "center"
},
series: [
{
name: "Access From",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center"
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" }
]
}
]
};
const frequenceOption = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
top: 20,
right: 3,
bottom: 0,
left: 3,
containLabel: true
},
legend: {
data: [],
bottom: 0,
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 15,
textStyle: {
fontSize: 12,
color: "#222B45"
}
},
xAxis: {
type: "category",
data: [
"202301",
"202302",
"202303",
"202304",
"202305",
"202306",
"202307",
"202308",
"202309",
"202310",
"202311",
"202312"
],
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#889fcc"
}
},
yAxis: {
type: "value",
axisLine: { show: false },
axisTick: { show: false },
splitLine: {
lineStyle: {
color: "#EFF1F3",
width: 0.8
}
},
axisLabel: { color: "#889fcc" }
},
series: [
{
name: "aa",
type: "bar",
data: [3, 2, 3, 0, 2, 1, 3, 1, 0, 2, 3, 2],
barWidth: "15",
itemStyle: {
color: "#639dfa",
borderRadius: [4, 4, 0, 0]
}
}
// {
// name: "bbb",
// type: "bar",
// data: [6, 13, 10, 5, 12, 5],
// barWidth: "15",
// itemStyle: {
// color: "#639dfa",
// borderRadius: [4, 4, 0, 0]
// }
// }
]
};
const chartOption = {
title: {
text: ""
},
tooltip: {
trigger: "axis"
},
legend: {
data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"]
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
name: "Email",
type: "line",
stack: "Total",
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: "Union Ads",
type: "line",
stack: "Total",
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: "Video Ads",
type: "line",
stack: "Total",
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: "Direct",
type: "line",
stack: "Total",
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: "Search Engine",
type: "line",
stack: "Total",
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
onMounted(() => {
// let frequenceChart = echarts.init(frequenceRef.value);
// let chart = echarts.init(echartsRef.value);
// let pie = echarts.init(pieRef.value);
// let bar = echarts.init(barRef.value);
// useEcharts(frequenceChart, frequenceOption);
// useEcharts(chart, chartOption);
// useEcharts(pie, pieOption);
// useEcharts(bar, barOption);
});
</script>
<style scoped>
.content-top {
width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
}
.content-box {
/* height: 90vh; */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content-box-header {
height: 40px;
background-color: rgba(59, 65, 75, 1);
color: #fff;
font-size: 16px;
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
.content-box-list {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
.content-box-list-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 20px;
height: 35px;
line-height: 35px;
}
.content-box-list-item-title {
font-size: 16px;
/* font-weight: 700; */
color: rgba(10, 18, 30, 1);
}
.content-box-list-item-tag {
display: flex;
gap: 8px;
}
.content-box-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background-color: rgba(246, 251, 255, 1);
padding: 5px 15px;
}
.content-box-footer-text {
font-size: 16px;
font-weight: 400;
color: rgba(10, 87, 166, 1);
}
.footer-img-small {
width: 20px;
height: 20px;
}
.footer-img-large {
width: 24px;
height: 24px;
}
</style>
src/views/finance/analysis/content/survey.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div style="padding: 0 5%">
<el-row :gutter="20">
<el-col :span="13">
<custom-container title="实体清单发布机构">
<!-- 顶部右侧自定义内容 -->
<template #header-right>
<div style="display: flex; gap: 8px">
<!-- <el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input> -->
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button>
</div>
</template>
<!-- 中间内容自定义 -->
<template #default>
<div class="content-card">
<el-image class="content-img" :src="BISlogo" fit="fill" />
<div class="content-desc">
<div class="content-desc-item">
<div class="content-desc-title">机构名称：</div>
<div class="content-desc-content">美国商务部工业与安全局</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">相关措施：</div>
<div class="content-desc-content">出口管制条例（EAR）、实体清单、商业管制清单（CCL）、232调查等</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">法案类别：</div>
<div class="content-desc-content">公法（编号：Pub. L. No. 119-21）</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">机构职责：</div>
<div class="content-desc-content content-desc-content-long">
美国商务部工业与安全局是美国商务部的一个部门，主要负责管理和监督美国的出口管制和安全问题。通过确保有效的出口管制和条约合规体系，促进美国保持战略技术领导地位，从而推动美国国家安全、外教政策及经济目标的实现。
</div>
</div>
</div>
</div>
</template>
</custom-container>
<custom-container title="重点人物">
<!-- 中间内容自定义 -->
<template #default>
<div style="display: flex; gap: 20px">
<div class="renwu-card">
<el-image class="content-img-2" :src="Renwu1" fit="fill" />
<div class="content-desc">
<div class="content-desc-title">吉娜·雷蒙多</div>
<div class="content-desc-content content-desc-content-long">英文名：Gina Raimondo</div>
<div class="content-desc-content content-desc-content-long">党派：美国民主党</div>
</div>
</div>
<div class="renwu-card">
<el-image class="content-img-2" :src="Renwu2" fit="fill" />
<div class="content-desc">
<div class="content-desc-title">艾伦·埃斯特韦斯</div>
<div class="content-desc-content content-desc-content-long">英文名：Alan Estevez</div>
<div class="content-desc-content content-desc-content-long">党派：美国民主党</div>
</div>
</div>
</div>
</template>
</custom-container>
<custom-container title="制裁原因">
<!-- 中间内容自定义 -->
<template #default>
<div style="line-height: 25px; color: rgba(95, 101, 108, 1)">
<div>1.获取美国产物项，以支持中国量子技术；</div>
<div>2.支持2023年2月飞越美国上空的高空气球；</div>
<div>3.获取获取美国原产的无人机物项供中国军方使用。</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="11">
<custom-container title="本次制裁共新增83个实体，其中53个中国大陆实体、1个中国台湾实体。">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 12px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary" icon="Plus">新建项目</el-button>
</div>
</template> -->
<!-- 中间内容自定义 -->
<template #default>
<div class="content-vertical-card">
<el-button-group>
<el-button :icon="Document"> 整体情况</el-button>
<el-button type="primary" :icon="Postcard">
国内分布
<!-- <el-icon class="el-icon--right"><ArrowRight /></el-icon> -->
</el-button>
</el-button-group>
<el-image class="content-distribution-img" :src="Distribution" fit="fill" />
<div style="flex: 1; justify-content: flex-start; width: 100%">
<el-button-group>
<el-button>按类别</el-button>
<el-button type="primary">
按领域
<!-- <el-icon class="el-icon--right"><ArrowRight /></el-icon> -->
</el-button>
</el-button-group>
</div>
</div>
</template>
<!-- 底部自定义内容 -->
<!-- <template #footer>
<el-button>取消</el-button>
<el-button type="primary">保存更改</el-button>
</template> -->
</custom-container>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<custom-container title="美国前序相关制裁、前序相关事件列表">
<template #default>
<!-- <div class="example-card">
<h3>项目介绍</h3>
<p>这是一个示例项目，展示了如何使用自定义容器组件。该组件具有高度可定制性，可以适应各种业务场景的需求。</p>
</div>
<div class="example-card">
<h3>项目进度</h3>
<p>当前项目已完成75%，预计在下个月初完成所有开发任务并进入测试阶段。</p>
<el-progress :percentage="75" :stroke-width="16" />
</div> -->
<div class="time-line">
<div class="time-line-title">
<img class="time-line-dot" src="@/assets/images/dot.png" alt="" />
<span class="time-line-title-text">2025-9-25</span>
</div>
<div class="time-line-desc">
<div class="time-line-desc-title">传感器和仪器仪表技术咨询委员会将于2024年5月9日召开部分闭门会议</div>
<div class="time-line-desc-text">
传感器与仪器仪表技术咨询委员会(以下简称“委员会”)将于美国东部夏令时间2024年5月9日星期四下午1:00至2:30召开会议。本次会议将通过微软团队(MS
Teams)以线上形式举行。根据美国商务部第10-16号《部门组织》文件。
</div>
</div>
</div>
<div class="time-line">
<div class="time-line-title">
<img class="time-line-dot" src="@/assets/images/dot.png" alt="" />
<span class="time-line-title-text">2025-4-25</span>
</div>
<div class="time-line-desc">
<div class="time-line-desc-title">中美关税战升级至125%与反制措施</div>
<div class="time-line-desc-text">
美国将对华关税从34%提升至84%（总税率104%），中方同步对美商品加征同等税率，并暂停进口美国影片、限制留学合作。特朗普政府通过"基准关税+对等关税+额外加征"策略施压，引发全球供应链震荡。
</div>
</div>
</div>
<div class="time-line">
<div class="time-line-title">
<img class="time-line-dot" src="@/assets/images/dot.png" alt="" />
<span class="time-line-title-text">2025-4-17</span>
</div>
<div class="time-line-desc">
<div class="time-line-desc-title">美国对华加征关税至20%并扩大科技制裁议</div>
<div class="time-line-desc-text">
美国以"芬太尼问题"为由提高对华关税至20%，恢复钢铁铝关税；同时推动《恢复贸易公平法案》，计划对中国商品征收100%关税。系统性打压中国高科技产业，关税措施实质为经济勒索。
</div>
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
</div>
</template>
<script setup>
import CustomContainer from "@/components/Container/index.vue";
import BISlogo from "@/assets/images/BISlogo.png";
import Distribution from "@/assets/images/distribution.png";
import Renwu1 from "@/assets/images/renwu-1.png";
import Renwu2 from "@/assets/images/renwu-2.png";
import { Document } from "@element-plus/icons-vue";
import { Postcard } from "@element-plus/icons-vue";
</script>
<style scoped>
.content-card {
display: flex;
align-items: flex-start;
gap: 20px;
}
.content-vertical-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.renwu-card {
display: flex;
align-items: center;
gap: 20px;
width: 379px;
height: 148px;
background-color: rgba(234, 236, 238, 1);
padding-left: 10px;
}
.content-img {
width: 154px;
height: 154px;
flex-shrink: 0;
}
.content-img-2 {
width: 128px;
height: 128px;
flex-shrink: 0;
}
.content-distribution-img {
width: 627px;
height: 536px;
}
.content-desc {
display: flex;
flex-direction: column;
gap: 8px;
}
.content-desc-item {
display: flex;
gap: 4px;
}
.content-desc-title {
width: 100px;
flex-shrink: 0;
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
.content-desc-content {
color: rgba(10, 87, 166, 1);
font-size: 16px;
font-weight: 700;
}
.content-desc-content-long {
color: rgba(95, 101, 108, 1);
font-weight: 400;
}
.time-line {
display: flex;
gap: 20px;
align-items: flex-start;
padding-left: 10px;
margin-bottom: 20px;
}
.time-line-title {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.time-line-dot {
width: 10px;
height: 10px;
}
.time-line-title-text {
font-size: 14px;
font-weight: 700;
color: rgba(95, 101, 108, 1);
color: var(--base-color);
}
.time-line-desc-title {
font-size: 16px;
font-weight: 400;
color: var(--base-color);
margin-bottom: 5px;
}
.time-line-desc-text {
font-size: 14px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
}
.time-line-dot {
width: 8px;
height: 8px;
background-color: rgba(10, 87, 166, 1);
border-radius: 50%;
}
.example-card {
border: 1px solid #ebeef5;
border-radius: 6px;
padding: 16px;
margin-bottom: 16px;
background-color: #fafafa;
}
.example-card h3 {
color: #409eff;
margin-bottom: 8px;
}
.example-card p {
color: #606266;
line-height: 1.6;
}
</style>
src/views/finance/analysis/header.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div class="sanction-container">
<!-- 页面标题区域 -->
<div class="page-header">
<!-- <h1 class="main-title">制裁分析</h1> -->
<div class="bill-info">
<div class="bill-details">
<div class="main-title">制裁分析</div>
<div class="bill-name-en">第119届美国国会众议院第1号法案One Big Beautiful Bill Act</div>
</div>
<div class="date-author">
<div class="date">2025年7月</div>
<div class="author">乔迪·阿灵顿（Jodey Arrington）</div>
</div>
</div>
</div>
<!-- 导航标签区域 -->
<!-- <div class="nav-section">
<div class="tabs">
<div class="tab-item active">制裁概况</div>
<div class="tab-item">深度挖掘</div>
<div class="tab-item">影响分析</div>
</div>
<div class="action-buttons">
<el-button>法案原文</el-button>
<el-button type="primary">分析报告</el-button>
</div>
</div> -->
<!-- 内容区域 -->
<!-- <div class="content-section">
<div class="content-placeholder">
<el-icon><document /></el-icon>
<p>这里是制裁概况的内容区域</p>
<p>请选择上方标签查看不同分析内容</p>
</div>
</div> -->
</div>
</template>
<script setup></script>
<style scoped>
.sanction-container {
width: 100%;
/* max-width: 1200px; */
background-color: #fff;
/* border-radius: 8px; */
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
box-sizing: border-box;
padding-left: 5%;
padding-right: 5%;
}
.page-header {
padding: 24px;
padding-top: 0;
/* border-bottom: 1px solid #ebeef5; */
}
.main-title {
font-size: 20px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
/* color: var(--base-color); */
margin-bottom: 8px;
}
.bill-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
}
.bill-details {
flex: 1;
}
.bill-name {
font-size: 16px;
color: #606266;
margin-bottom: 4px;
}
.bill-name-en {
font-size: 14px;
color: #909399;
font-style: italic;
}
.date-author {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.date {
font-size: 14px;
color: #606266;
margin-bottom: 4px;
}
.author {
font-size: 14px;
color: #606266;
}
.nav-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
background-color: #f8fafc;
border-bottom: 1px solid #ebeef5;
}
.tabs {
display: flex;
gap: 0;
}
.tab-item {
padding: 12px 24px;
font-size: 14px;
color: #606266;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s;
}
.tab-item.active {
color: #409eff;
border-bottom-color: #409eff;
background-color: rgba(64, 158, 255, 0.1);
}
.tab-item:hover {
color: #409eff;
}
.action-buttons {
display: flex;
gap: 12px;
}
.content-section {
padding: 24px;
min-height: 400px;
}
.content-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
color: #909399;
}
.content-placeholder .el-icon {
font-size: 48px;
margin-bottom: 16px;
color: #dcdfe6;
}
.content-placeholder p {
font-size: 16px;
margin-top: 8px;
}
@media (max-width: 768px) {
.bill-info {
flex-direction: column;
align-items: flex-start;
}
.date-author {
align-items: flex-start;
margin-top: 12px;
}
.nav-section {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.tabs {
width: 100%;
overflow-x: auto;
}
}
</style>
src/views/finance/analysis/index.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div class="page-container">
<Header />
<!-- 导航标签区域 -->
<div class="nav-section">
<div class="tabs">
<div :class="['tab-item', { active: activeTab === '制裁概况' }]" @click="setActiveTab('制裁概况')">制裁概况</div>
<div :class="['tab-item', { active: activeTab === '深度挖掘' }]" @click="setActiveTab('深度挖掘')">深度挖掘</div>
<div :class="['tab-item', { active: activeTab === '影响分析' }]" @click="setActiveTab('影响分析')">影响分析</div>
</div>
<div class="action-buttons">
<el-button>法案原文</el-button>
<el-button type="primary">分析报告</el-button>
</div>
</div>
<!-- 内容区域 -->
<div class="content-section">
<!-- <div class="content-placeholder">
<el-icon><document /></el-icon>
<p>这里是制裁概况的内容区域</p>
<p>请选择上方标签查看不同分析内容</p>
</div> -->
<Survey v-if="activeTab === '制裁概况'" />
<DepthMine v-if="activeTab === '深度挖掘'" />
<ImpactAnalysis v-if="activeTab === '影响分析'" />
</div>
<div class="left-absolute">
<el-image :src="Left1" alt="" />
<el-image :src="Left2" alt="" />
<el-image :src="Left3" alt="" />
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import Header from "./header.vue";
import Survey from "./content/survey.vue";
import DepthMine from "./content/depthMine.vue";
import ImpactAnalysis from "./content/impactAnalysis.vue";
import Left1 from "@/assets/images/left-1.png";
import Left2 from "@/assets/images/left-2.png";
import Left3 from "@/assets/images/left-3.png";
const activeTab = ref("制裁概况");
const setActiveTab = tabName => {
activeTab.value = tabName;
};
</script>
<style scoped lang="scss">
.page-container {
position: relative;
margin: 0px auto;
background-color: rgba(247, 248, 249, 1);
}
.nav-section {
display: flex;
justify-content: space-between;
align-items: center;
/* padding: 16px 24px; */
padding-left: 6%;
padding-right: 6%;
background-color: #fff;
border-bottom: 1px solid #ebeef5;
}
.tabs {
display: flex;
gap: 0;
}
.tab-item {
width: 120px;
height: 40px;
text-align: center;
line-height: 30px;
// padding: 12px 24px;
font-size: 18px;
color: #606266;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.3s;
box-sizing: border-box;
}
// .tab-item.active {
// color: #409eff;
// border-bottom-color: #409eff;
// background-color: rgba(64, 158, 255, 0.1);
// }
.tab-item.active {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 30px;
border-bottom: 3px solid var(--color-main-active);
}
.tab-item:hover {
color: var(--color-main-active);
}
.action-buttons {
display: flex;
gap: 12px;
}
.content-section {
padding: 24px;
min-height: 400px;
}
.content-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
color: #909399;
}
.content-placeholder .el-icon {
font-size: 48px;
margin-bottom: 16px;
color: #dcdfe6;
}
.content-placeholder p {
font-size: 16px;
margin-top: 8px;
}
@media (max-width: 768px) {
.bill-info {
flex-direction: column;
align-items: flex-start;
}
.date-author {
align-items: flex-start;
margin-top: 12px;
}
.nav-section {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.tabs {
width: 100%;
overflow-x: auto;
}
}
.left-absolute {
position: fixed;
left: 0;
top: 60%;
// width: 48px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
background-color: #fff;
border-radius: 10px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 16px 12px;
box-shadow: 0 0 15px 0 rgba(60, 87, 126, 0.2);
div {
width: 17px;
height: 18px;
}
}
</style>
src/views/finance/components/dialog.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div class="message-bubble">
<div class="avatar-container">
<img :src="avatar" :alt="name" class="avatar" />
</div>
<div class="bubble-container">
<div class="bubble">
<div class="bubble-header">
<span class="name">{{ name }}</span>
<span class="meta">{{ time }} · {{ source }}</span>
</div>
<div class="bubble-content">
{{ content }}
</div>
<div class="triangle"></div>
</div>
</div>
</div>
</template>
<script setup>
defineProps({
avatar: {
type: String,
default: "https://via.placeholder.com/40x40/4A90E2/FFFFFF?text=T"
},
name: {
type: String,
default: "唐纳德·特朗普"
},
time: {
type: String,
default: "15:23"
},
source: {
type: String,
default: "发布于真实社交"
},
content: {
type: String,
default:
"埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。"
}
});
</script>
<style scoped>
.message-bubble {
display: flex;
max-width: 600px;
margin: 20px 0;
}
.avatar-container {
flex-shrink: 0;
margin-right: 12px;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.bubble-container {
flex: 1;
position: relative;
}
.bubble {
background-color: rgba(246, 250, 255, 1);
border-radius: 12px;
padding: 12px 16px;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.bubble-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.name {
font-weight: bold;
font-size: 14px;
color: #333;
}
.meta {
font-size: 12px;
color: #999;
}
.bubble-content {
font-size: 14px;
line-height: 1.5;
color: #333;
}
.triangle {
position: absolute;
left: -8px;
top: 15px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid rgba(246, 250, 255, 1);
}
/* 响应式设计 */
@media (max-width: 768px) {
.message-bubble {
max-width: 100%;
}
.bubble-header {
flex-direction: column;
align-items: flex-start;
}
.meta {
margin-top: 4px;
}
}
</style>
src/views/finance/components/info.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div class="info-card">
<div class="color-bar" :style="{ backgroundColor: color }"></div>
<div class="card-content">
<div class="title-section">
<div class="main-title">{{ title }}</div>
<div class="sub-title">{{ subtitle }}</div>
</div>
<div class="description">{{ description }}</div>
<div v-if="quantity > 0" class="quantity" :style="{ color: color }">{{ quantity }}个</div>
</div>
</div>
</template>
<script setup>
defineProps({
title: {
type: String,
default: "标题"
},
subtitle: {
type: String,
default: "Subtitle"
},
description: {
type: String,
default: "描述信息"
},
quantity: {
type: [Number, String],
default: 0
},
color: {
type: String,
default: "#409EFF"
}
});
</script>
<style scoped>
.info-card {
max-width: 388px;
min-width: 300px;
height: 150px;
border-radius: 12px;
background-color: white;
display: flex;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.info-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.color-bar {
width: 6px;
height: 120px;
flex-shrink: 0;
margin-top: 15px;
}
.card-content {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
position: relative;
}
.title-section {
margin-bottom: 12px;
}
.main-title {
font-size: 24px;
font-weight: 700;
color: #1f2937;
line-height: 1.2;
}
.sub-title {
font-size: 16px;
font-weight: 700;
line-height: 1.2;
color: #6b7280;
margin-top: 2px;
}
.description {
font-size: 16px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
line-height: 1.4;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.quantity {
position: absolute;
top: 20px;
right: 20px;
font-size: 32px;
font-weight: 700;
}
</style>
src/views/finance/components/link.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div :class="['clickable-card', { disabled: disabled }]" @click="handleClick">
<span class="card-text">{{ text }}</span>
<!-- <span class="arrow-icon">→</span> -->
<el-icon><ArrowRight /></el-icon>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
text: {
type: String,
default: "点击跳转"
},
link: {
type: String,
default: ""
},
target: {
type: String,
default: "_self"
},
disabled: {
type: Boolean,
default: false
}
});
const emit = defineEmits(["click"]);
const handleClick = () => {
if (props.disabled) return;
emit("click");
if (props.link) {
if (props.link.startsWith("http") || props.link.startsWith("//")) {
// 外部链接
window.open(props.link, props.target);
} else {
router.push(props.link);
console.log(`跳转到: ${props.link}`);
}
}
};
</script>
<style scoped>
.clickable-card {
width: 160px;
height: 48px;
border-radius: 32px;
border: 1px solid rgba(174, 214, 255, 1);
background-color: rgba(231, 243, 255, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
/* padding: 0 16px; */
cursor: pointer;
transition: all 0.3s ease;
color: rgba(5, 95, 194, 1);
font-size: 20px;
font-weight: 500;
box-sizing: border-box;
}
.clickable-card:hover {
background-color: rgba(231, 243, 255, 0.5);
box-shadow: 0 2px 8px rgba(5, 95, 194, 0.1);
transform: translateY(-2px);
}
.clickable-card:active {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(5, 95, 194, 0.1);
}
.clickable-card.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.clickable-card.disabled:hover {
background-color: white;
box-shadow: none;
transform: none;
}
.arrow-icon {
font-weight: bold;
font-size: 16px;
}
</style>
src/views/finance/components/news.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div class="news-list">
<div v-for="(item, index) in listData" :key="index" class="news-item" @click="handleItemClick(item)">
<div class="news-image">
<img :src="item.image" :alt="item.title" />
</div>
<div class="news-content">
<div class="news-header">
<div class="news-title">{{ item.title }}</div>
<div class="news-meta">
<span class="news-time">{{ item.time }}</span> ·
<span class="news-source">{{ item.source }}</span>
</div>
</div>
<div class="news-description">{{ item.description }}</div>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({
listData: {
type: Array,
default: () => [
{
image: "https://via.placeholder.com/72x48/4A90E2/FFFFFF?text=News",
title: "美国智库激辩人工智能监管路径",
time: "11-4",
source: "华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析指出..."
}
]
}
});
const emit = defineEmits(["item-click"]);
const handleItemClick = item => {
emit("item-click", item);
};
</script>
<style scoped>
.news-list {
width: 100%;
max-width: 800px;
}
.news-item {
display: flex;
padding: 10px 0;
align-items: center;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background-color 0.3s;
}
.news-item:hover {
background-color: #f9f9f9;
}
.news-item:last-child {
border-bottom: none;
}
.news-image {
width: 72px;
height: 48px;
flex-shrink: 0;
margin-right: 16px;
border-radius: 4px;
overflow: hidden;
}
.news-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-content {
flex: 1;
display: flex;
flex-direction: column;
}
.news-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.news-title {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
line-height: 24px;
flex: 1;
margin-right: 12px;
}
.news-meta {
display: flex;
align-items: center;
height: 24px;
line-height: 24px;
flex-shrink: 0;
font-size: 14px;
color: #999;
}
.news-time {
/* margin-bottom: 2px; */
}
.news-source {
/* color: #666; */
}
.news-description {
font-size: 16px;
color: rgba(59, 65, 75, 1);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
src/views/finance/components/title.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div class="custom-title">
<div class="color-block block1"></div>
<div class="color-block block2"></div>
<div class="title-text">{{ title }}</div>
<div class="color-line"></div>
</div>
</template>
<script setup>
defineProps({
title: {
type: String,
default: "最新动态"
}
});
</script>
<style scoped>
.custom-title {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 20px;
padding: 10px 15px;
}
.color-block {
background-color: rgba(174, 214, 255, 1);
height: 30px;
flex-shrink: 0;
}
.block1 {
width: 24px;
}
.block2 {
width: 8px;
margin-left: 10px;
}
.title-text {
font-size: 20px;
font-weight: bold;
margin-left: 20px;
white-space: nowrap;
}
.color-line {
background-color: rgba(174, 214, 255, 1);
height: 2px;
flex-grow: 1;
margin-left: 20px;
}
</style>
src/views/finance/index.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div class="home-wrapper">
<div class="home-header">
<span>国家科技安全 </span>> <span>中美博弈概览 </span>>
<span>出口管制 </span>
</div>
<div class="home-main">
<div class="home-main-header">
<div class="home-main-header-center">
<el-input
v-model="searchKey"
style="width: 100%; height: 48px"
size="large"
placeholder="搜索出口管制调查"
:suffix-icon="Search"
/>
</div>
<div class="home-main-header-footer">
<div class="home-main-header-footer-item">
<div class="item-top">142</div>
<div class="item-footer">实体清单</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">28</div>
<div class="item-footer">商业管制清单</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">326</div>
<div class="item-footer">关键和新型技术清单</div>
</div>
</div>
<div class="home-main-header-footer-link">
<ClickableCard text="最新动态" link="/billHome" target="_blank" />
<ClickableCard text="资讯要闻" link="/billHome" target="_blank" />
<ClickableCard text="数据总览" link="/billHome" target="_blank" />
<ClickableCard text="资源库" link="/billHome" target="_blank" />
</div>
<div class="home-main-header-footer-info">
<InfoCard
v-for="item in infoList"
:key="item.title"
:title="item.title"
:subtitle="item.subTitle"
:description="item.des"
:quantity="item.num"
:color="item.color"
/>
</div>
</div>
<el-row :gutter="20">
<CustomTitle title="资讯要闻" />
<el-col :span="12">
<custom-container title="新闻资讯" :titleIcon="newsIcon" height="450px">
<template #header-right>
<el-button type="primary" link @click="handleClick">
{{ "更多 +" }}
</el-button>
</template>
<template #default>
<div class="news-list">
<NewsList :list-data="customNewsData" />
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
<template #header-right>
<el-button type="primary" link>
{{ "更多 +" }}
</el-button>
</template>
<template #default>
<div class="dialog-list">
<!-- <MessageBubble
:avatar="customMessage.avatar"
:name="customMessage.name"
:time="customMessage.time"
:source="customMessage.source"
:content="customMessage.content"
/> -->
<MessageBubble
:avatar="trumpAvatar"
name="唐纳德·特朗普"
time="16:02"
source="发布于真实社交"
content="埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。"
/>
<MessageBubble
:avatar="elongAvatar"
name="埃隆·马斯克"
time="16:02"
source="发布于真实社交"
content="如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。"
/>
<MessageBubble
:avatar="elongAvatar"
name="埃隆·马斯克"
time="16:02"
source="发布于真实社交"
content="提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。"
/>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<CustomTitle title="最新动态" />
<el-col :span="16">
<custom-container titleType="primary" title="最新出口管制政策" :titleIcon="houseIcon" height="450px">
<template #header-right>
<el-button type="primary" @click="handleToDetail" link>
{{ "查看详情 >" }}
</el-button>
</template>
<template #default>
<div class="box1">
<!-- <el-image
:src="box1Image"
alt=""
style="width: 458px; height: 353px; object-fit: cover; flex-shrink: 0"
></el-image> -->
<!-- <div class="box1-right">
<div class="box1-right-title">关于进一步延长TikTok执法宽限期的行政令</div>
<div class="box1-right-tags">
<el-tag type="primary">互联网</el-tag>
<el-tag type="danger">人工智能</el-tag>
</div>
<div class="box1-right-content">
9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需向提供商发出无违规和无责任的信函，并强调执行该法的权力专属联邦司法部长，意在阻止各州或私人提起诉讼。
</div>
<div class="box1-right-footer">
<span class="box1-right-footer-time"> 2025年9月16日 </span>
<el-button type="primary" link>
美国白宫官方网站
<el-image
src="./assets/images/icon-open.png"
alt=""
style="width: 16px; height: 16px; margin-left: 4px"
></el-image>
</el-button>
</div>
</div> -->
<div class="box1-top">
<div class="box1-top-title">2025年9月12日——BIS《实体清单增列与修订条目》</div>
<div class="box1-top-content">
<div class="box1-top-content-item">
<span class="box1-top-content-item-title">· 发布机构：</span>
<span class="box1-top-content-item-content">美国商务部工业与安全局</span>
</div>
<div class="box1-top-content-item">
<span class="box1-top-content-item-title">· 生效日期：</span>
<span class="box1-top-content-item-content">2025年9月12日</span>
</div>
<div class="box1-top-content-item">
<span class="box1-top-content-item-title">· 涉及领域：</span>
<div
class="box1-top-content-item-tags"
v-for="item in ['航空航天', '人工智能', '集成电路']"
:key="item"
>
<el-tag
:type="
item === '航空航天' ? 'primary' : item === '人工智能' ? 'danger' : 'info'
"
>{{ item }}</el-tag
>
</div>
</div>
</div>
</div>
<div class="box1-bottom">
<div class="box1-bottom-title">· 涉及主要实体：</div>
<div class="box1-bottom-content">
<div class="box1-bottom-content-item" v-for="(item, index) in entityList" :key="index">
<el-image class="box1-bottom-content-item-img" :src="item.img" alt=""></el-image>
<div class="box1-bottom-content-item-txt">{{ item.name }}</div>
</div>
</div>
</div>
<div class="box1-absolute">
<div class="box1-absolute-des">
<el-icon><Warning color="rgba(206, 79, 81, 1)" /></el-icon>
<span>新增中国实体</span>
</div>
<div class="box1-absolute-num">23家</div>
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="8">
<custom-container titleType="danger" title="风险信号" :titleIcon="dangerIcon" height="450px">
<template #header-right>
<el-button type="primary" link>
{{ "更多 +" }}
</el-button>
</template>
<template #default>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="item-left"
:class="{
itemLeftStatus1: item.status === '一般风险',
itemLeftStatus2: item.status === '重大风险'
}"
>
{{ item.status }}
</div>
<div class="item-right">
<div class="text">
{{ item.title }}
</div>
<div class="time">{{ item.time }}</div>
</div>
</div>
<div class="box2-footer">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
</div>
<div class="text">{{ "风险处理" }}</div>
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<CustomTitle title="数据总览" />
<el-col :span="24">
<custom-container title="发布频度" :titleIcon="box3Icon" height="450px">
<template #default>
<div class="box3">
<div class="box3-content">
<div class="box3-content-title">实体清单发布频度</div>
<el-table :data="tableData1" stripe style="width: 100%">
<el-table-column prop="year" label="年份" width="100" />
<el-table-column label="发布次数" width="180">
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress
:percentage="scope.row.percent * 100"
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="重点领域" width="180">
<template #default="scope">
<div style="display: flex; align-items: center; gap: 5px">
<el-tag
v-for="tag in scope.row.tags"
:key="tag"
:type="
tag === '通信网络'
? 'primary'
: TAGTYPE[Math.floor(Math.random() * 5)]
"
>{{ tag }}</el-tag
>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="box3-content">
<div class="box3-content-title">商业管制清单(CCL)更新频度</div>
<el-table :data="tableData1" stripe style="width: 100%">
<el-table-column prop="year" label="年份" width="100" />
<el-table-column label="发布次数" width="180">
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress
:percentage="scope.row.percent * 100"
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="重点领域" width="180">
<template #default="scope">
<div style="display: flex; align-items: center; gap: 5px">
<el-tag
v-for="tag in scope.row.tags"
:key="tag"
:type="
tag === '通信网络'
? 'primary'
: TAGTYPE[Math.floor(Math.random() * 5)]
"
>{{ tag }}</el-tag
>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="box3-content">
<div class="box3-content-title">关键与新兴技术清单(CETs)</div>
<el-table :data="tableData1" stripe style="width: 100%">
<el-table-column prop="year" label="年份" width="100" />
<el-table-column label="发布次数" width="180">
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress
:percentage="scope.row.percent * 100"
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="重点领域" width="180">
<template #default="scope">
<div style="display: flex; align-items: center; gap: 5px">
<el-tag
v-for="tag in scope.row.tags"
:key="tag"
:type="
tag === '通信网络'
? 'primary'
: TAGTYPE[Math.floor(Math.random() * 5)]
"
>{{ tag }}</el-tag
>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row gutter="20">
<el-col :span="8">
<custom-container title="制裁领域分析" :titleIcon="radarIcon" height="450px">
<template #header-right>
<el-checkbox v-model="checked" label="50%规则" size="large" />
</template>
<template #default>
<EChart :option="radarOption" autoresize :style="{ height: '450px' }" />
</template>
</custom-container>
</el-col>
<el-col :span="16">
<custom-container title="制裁清单数量增长趋势" :titleIcon="qushiIcon" height="450px">
<template #header-right>
<el-checkbox v-model="checked" label="50%规则" size="large" />
</template>
<template #default>
<EChart :option="trendOption" autoresize :style="{ height: '400px' }" />
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<CustomTitle title="最新动态" />
<el-col :span="8">
<custom-container title="历次制裁过程" :titleIcon="listIcon" height="845px">
<template #default>
<div class="box4">
<div class="box4-item" v-for="(item, idx) in sanctionProcessList" :key="item.title">
<div class="box4-item-left">
<el-image :src="dotIcon" alt="图片" class="box4-item-left-icon" />
<div class="box4-item-left-line" v-if="idx + 1 != sanctionProcessList.length"></div>
</div>
<div class="box4-item-right">
<div class="box4-item-right-header">
<span class="box4-item-right-header-title">{{ item.title }}</span>
<span class="box4-item-right-header-desc">{{ item.desc }}</span>
</div>
<div class="box4-item-right-content">
{{ item.content }}
</div>
</div>
</div>
<div class="box4-footer">
<el-button type="primary" link :icon="DownRight"
>查看更多
<el-icon><DArrowRight /></el-icon>
</el-button>
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="16">
<custom-container title="制裁实体清单" :titleIcon="entityIcon" height="845px">
<template #header-right>
<div class="box5-header-right">共1329家实体</div>
</template>
<template #default>
<div class="box5">
<el-table
:data="paginatedData"
class="sanction-table"
stripe
empty-text="暂无数据"
height="700px"
header-row-class-name="table-header"
row-class-name="table-row"
>
<el-table-column prop="index" label="序号" width="80" align="center">
<template #default="scope">
{{ scope.$index + 1 + (currentPage - 1) * pageSize }}
</template>
</el-table-column>
<el-table-column prop="name" label="实体名称" min-width="200">
<template #default="scope">
<div style="font-weight: 500">{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column prop="domains" label="涉及领域" min-width="180">
<template #default="scope">
<div class="domain-tags">
<el-tag
v-for="tag in scope.row.domains"
:key="tag"
:type="tag === '通信网络' ? 'primary' : 'danger'"
>{{ tag }}</el-tag
>
</div>
</template>
</el-table-column>
<el-table-column prop="sanctionDate" label="制裁时间" width="120" align="center">
<template #default="scope">
{{ scope.row.sanctionDate }}
</template>
</el-table-column>
<el-table-column prop="strength" label="制裁强度" width="120" align="center">
<template #default="scope">
<div class="sanction-strength">
<div :class="['strength-bar', `strength-${scope.row.strength}`]"></div>
<span>{{ strengthLabels[scope.row.strength] }}</span>
</div>
</template>
</el-table-column>
<!-- <el-table-column prop="revenue" label="营收（亿元）" width="140" align="right">
<template #default="scope">
<span
:class="['revenue-cell', scope.row.revenue === '无营收数据' ? 'no-revenue' : '']"
>
{{ scope.row.revenue }}
</span>
</template>
</el-table-column> -->
<el-table-column prop="revenue" label="50%规则子企业" width="140" align="right">
<template #default="scope">
<span
:class="['revenue-cell', scope.row.revenue === '无营收数据' ? 'no-revenue' : '']"
>
{{ scope.row.revenue }}
</span>
</template>
</el-table-column>
</el-table>
<div class="table-footer">
<!-- <div class="pagination-info">
第{{ currentPage }}页，共{{ totalPages }}页
</div> -->
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="total"
:pager-count="5"
layout="prev, pager, next"
background
/>
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<!-- <div class="home-main-center">
<div class="center-footer">
<div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "涉华法案数量" }}</div>
</div>
<div class="box3-header-right">
<div class="right-box">
<div class="icon1"></div>
<div class="text">{{ "提出法案" }}</div>
</div>
<div class="right-box">
<div class="icon2"></div>
<div class="text">{{ "通过法案" }}</div>
</div>
</div>
</div>
<div class="box3-main" id="chart1"></div>
</div>
<div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/box4-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "法案趋势" }}</div>
</div>
<div class="box4-main">
<div class="box4-main-item" v-for="(item, index) in billTrendList" :key="index">
<div
class="left"
:class="{
leftStatus2: index === 1,
leftStatus3: index === 2
}"
>
{{ index < 3 ? index + 1 : "" }}
</div>
<div class="center">{{ item.title }}</div>
<div class="right">{{ item.no }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="home-main-footer">
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate.hylymc }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate.hylymc }}
</div>
</div>
<div class="select-box">
<el-select v-model="releaseTime" placeholder="选择发布时间" style="width: 120px">
<el-option
v-for="item in releaseTimeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<div class="home-main-footer-main">
<div class="main-item" v-for="(bill, index) in curBillList" :key="index">
<div class="main-item-box1">
<img :src="bill.img" alt="" />
</div>
<div class="main-item-box2">
{{ bill.billName }}
</div>
<div class="main-item-box3">{{ bill.introductionDate }}</div>
</div>
</div>
</div> -->
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import { DArrowRight, Warning, Search } from "@element-plus/icons-vue";
// import router from "@/router/index";
import EChart from "@/components/Chart/index.vue";
import { TAGTYPE } from "@/public/constant";
import { useRouter } from "vue-router";
const router = useRouter();
import CustomContainer from "@/components/Container/index.vue";
import ClickableCard from "./components/link.vue";
import InfoCard from "./components/info.vue";
import CustomTitle from "./components/title.vue";
import NewsList from "./components/news.vue";
import MessageBubble from "./components/dialog.vue";
import trumpAvatar from "@/assets/images/icon-trump.png";
import elongAvatar from "@/assets/images/icon-elong.png";
import newsIcon from "@/assets/images/icon-news.png";
import dialogIcon from "@/assets/images/icon-duihua.png";
import houseIcon from "@/assets/images/icon-house.png";
import dangerIcon from "./assets/images/box2-header-icon.png";
import box1Image from "./assets/images/box1-image.png";
import box3Icon from "./assets/images/box1-header-icon.png";
import radarIcon from "./assets/images/icon-radar.png";
import qushiIcon from "./assets/images/icon-qushi.png";
import listIcon from "./assets/images/icon-list.png";
import dotIcon from "./assets/images/info2-icon.png";
import entityIcon from "./assets/images/icon-entity.png";
import newsImg from "@/assets/images/news-img.png";
import { getHotBills, getBillsByType, getHylyList } from "@/api/home";
import headerIcon1 from "./assets/icons/header-icon1.png";
import headerIcon2 from "./assets/icons/header-icon2.png";
import headerIcon3 from "./assets/icons/header-icon3.png";
import headerIcon4 from "./assets/icons/header-icon4.png";
import headerIcon5 from "./assets/icons/header-icon5.png";
import getMultiLineChart from "./utils/multiLineChart";
import bill1 from "./assets/images/bill1.png";
import bill2 from "./assets/images/bill2.png";
import bill3 from "./assets/images/bill3.png";
import bill4 from "./assets/images/bill4.png";
import bill5 from "./assets/images/bill5.png";
import bill6 from "./assets/images/bill6.png";
import bill7 from "./assets/images/bill7.png";
import bill8 from "./assets/images/bill8.png";
import bill9 from "./assets/images/bill9.png";
import bill10 from "./assets/images/bill10.png";
import bill11 from "./assets/images/bill11.png";
import bill12 from "./assets/images/bill12.png";
import fudanIcon from "./assets/images/fudan.png";
import fukongIcon from "./assets/images/fukong.png";
import hualingIcon from "./assets/images/hualing.png";
import jimuxiIcon from "./assets/images/jimuxi.png";
import shenggongIcon from "./assets/images/shenggong.png";
import shoushiIcon from "./assets/images/shoushi.png";
import tianyiIcon from "./assets/images/tianyi.png";
import aircasIcon from "./assets/images/aircas.png";
const handleToDetail = () => {
router.push({
path: '/exportControl/analysis'
})
}
const billList = ref([]);
const curBillListIndex = ref(0);
const searchKey = ref("");
const infoList = ref([
{
title: "实体清单",
subTitle: "Entity List",
des: "美国商务部工业与安全局依据《出口管理条例》建立的出口管制机制",
num: 956,
color: "rgba(206, 79, 81, 1)"
},
{
title: "商业管制清单 ",
subTitle: "CCL",
des: "美国《出口管制条例》中列明受管制军民两用物项的清单",
num: 253,
color: "rgba(114, 46, 209, 1)"
},
{
title: "关键与新兴技术清单",
subTitle: "CETs",
des: "美国为维护其技术领导地位与国家安全而制定的18项优先发展技术清单",
num: 52,
color: "rgba(250, 140, 22, 1)"
},
{
title: "军事最终用户清单 ",
subTitle: "MEU",
des: "美国商务部制定的限制特定外国实体获取可能用于军事用途的美国技术的清单",
num: 0,
color: "rgba(132, 136, 142, 1)"
}
]);
const entityList = ref([
{
name: "北京复旦微电子技术有限公司",
img: fudanIcon
},
{
name: "北京福康微电子技术有限公司",
img: fukongIcon
},
{
name: "北京华岭微电子技术有限公司",
img: hualingIcon
},
{
name: "北京吉姆微芯科技有限公司",
img: jimuxiIcon
},
{
name: "北京盛工微电子技术有限公司",
img: shenggongIcon
},
{
name: "北京首时微电子技术有限公司",
img: shoushiIcon
},
{
name: "北京天易微电子技术有限公司",
img: tianyiIcon
},
{
name: "北京航空航天大学微电子技术研究院",
img: aircasIcon
}
]);
const customNewsData = ref([
{
image: newsImg,
title: "美国智库激辩人工智能监管路径",
time: "11-4",
source: "华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
},
{
image: newsImg,
title: "美国智库激辩人工智能监管路径",
time: "11-4",
source: "华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
},
{
image: newsImg,
title: "美国智库激辩人工智能监管路径",
time: "11-4",
source: "华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
},
{
image: newsImg,
title: "美国智库激辩人工智能监管路径",
time: "11-4",
source: "华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
},
{
image: newsImg,
title: "美国智库激辩人工智能监管路径",
time: "11-4",
source: "华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
}
]);
const handleSwithCurBill = name => {
if (name === "left") {
if (curBillListIndex.value === 0) {
curBillListIndex.value = billList.value.length - 1;
} else {
curBillListIndex.value--;
}
} else {
if (curBillListIndex.value === billList.value.length - 1) {
curBillListIndex.value = 0;
} else {
curBillListIndex.value++;
}
}
curBill.value = billList.value[curBillListIndex.value];
};
const handleClick = () => {
router.push({
path: "/analysis"
// query: {
// billId: curBill.value.billId
// }
});
};
// 发布频度
const tableData1 = ref([
{
year: "2025",
num: 5,
percent: 0.4,
tags: ["通信网络"]
},
{
year: "2024",
num: 12,
percent: 0.9,
tags: ["通信网络", "人工智能"]
},
{
year: "2023",
num: 2,
percent: 0.4,
tags: ["通信网络"]
},
{
year: "2022",
num: 6,
percent: 0.7,
tags: ["通信网络", "集成电路"]
},
{
year: "2021",
num: 7,
percent: 0.8,
tags: ["生物科技", "集成电路"]
}
]);
// 雷达图
const radarOption = ref({
title: {
text: ""
},
// grid: {
// top: 100
// },
legend: {
top: 0,
icon: "circle",
data: ["实体清单", "商业管制清单", "关键和新型技术清单"]
},
radar: {
// shape: 'circle',
indicator: [
{ name: "集成电路", max: 6500 },
{ name: "生物科技", max: 16000 },
{ name: "人工智能", max: 30000 },
{ name: "通信网络", max: 38000 },
{ name: "量子科技", max: 52000 },
{ name: "能源领域", max: 25000 }
],
axisName: {
formatter: "{value}",
color: "rgba(59, 65, 75, 1)",
fontSize: 16,
fontWeight: 700
}
},
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)"
}
}
]
}
]
});
// 趋势图
const trendOption = ref({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
top: 50
},
legend: {
// type: "scroll",
// show: true,
// orient: "horizontal",
icon: "circle",
data: ["量子科技", "人工智能", "通信网络", "集成电路", "生物科技", "能源领域"]
},
xAxis: {
type: "category",
data: ["2021", "2022", "2023", "2024", "2025"]
},
yAxis: {
type: "value"
},
series: [
{
name: "量子科技",
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(22, 119, 255, 1)" },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: "rgba(22, 119, 255, 0)" }
]),
borderRadius: [6, 6, 0, 0]
}
},
{
name: "人工智能",
data: [20, 230, 100, 100, 30, 210, 180],
type: "bar",
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(206, 79, 81, 1)" },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: "rgba(206, 79, 81, 0)" }
]),
borderRadius: [6, 6, 0, 0]
}
},
{
name: "通信网络",
data: [150, 100, 200, 130, 50, 190, 330],
type: "bar",
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(255, 197, 61, 1)" },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: "rgba(255, 197, 61, 0)" }
]),
borderRadius: [6, 6, 0, 0]
}
},
{
name: "集成电路",
data: [220, 100, 250, 180, 170, 100, 80],
type: "bar",
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(255, 204, 199, 1)" },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: "rgba(255, 204, 199, 0)" }
]),
borderRadius: [6, 6, 0, 0]
}
},
{
name: "生物科技",
data: [220, 300, 50, 180, 170, 210, 400],
type: "bar",
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(179, 127, 235, 1)" },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: "rgba(179, 127, 235, 0)" }
]),
borderRadius: [6, 6, 0, 0]
}
},
{
name: "能源领域",
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(127, 218, 235, 1)" },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: "rgba(127, 214, 235, 0)" }
]),
borderRadius: [6, 6, 0, 0]
}
}
]
});
// 历次制裁过程
const sanctionProcessList = ref([
{
title: "2025年3月—实体清单（BIS）",
desc: "54家中国实体",
content:
"2025年3月25日，美国商务部工业与安全局以从事有悖于美国国家安全和外交政策利益的活动为由，宣布将来自中国的54家实体新增至“实体清单”。"
},
{
title: "2025年1月—实体清单（BIS）",
desc: "25家中国实体",
content:
"2025年1月15日，美国商务部工业和安全局宣布更新《出口管理条例》（EAR），并发布两项最终规则，将25家中国企业及其相关实体列入实体清单。"
},
{
title: "2024年12月—商业管制清单（BIS）",
desc: "12家中国实体",
content:
"2024年12月20日，美国商务部工业与安全局以从事有悖于美国国家安全和外交政策利益的活动为由，宣布将来自中国的12家实体新增至“商业管制清单”。"
},
{
title: "2024年10月—商业管制清单（BIS）",
desc: "6家中国实体",
content: "2024年10月21日，美国商务部将6个中国实体加入其“实体清单”，同时将 1 个中国实体移出该清单。"
},
{
title: "2024年8月—商业管制清单（BIS）",
desc: "39家中国实体",
content: "2024年8月23日，美国商务部工业安全局发布公告，将多个外国实体加入其“实体清单”，其中包括39个中国实体。"
}
]);
// 进度条状态
const getStatus = _percent => {
const percent = _percent * 100;
if (percent >= 90) {
return "exception";
} else if (percent >= 50) {
return "warning";
} else {
return "success";
}
};
// 制裁实体
const currentPage = ref(1); // 默认显示第5页
const pageSize = ref(10);
const searchKeyword = ref("");
const strengthLabels = {
strong: "强",
medium: "中",
weak: "弱",
none: "无"
};
// 模拟数据
const mockData = [
{
name: "科大讯飞股份有限公司",
domains: ["人工智能"],
sanctionDate: "2025年9月",
strength: "strong",
revenue: "325"
},
{
name: "华为技术有限公司",
domains: ["通信网络", "集成电路"],
sanctionDate: "2025年9月",
strength: "medium",
revenue: "290"
},
{
name: "中国航空工业集团",
domains: ["航空航天"],
sanctionDate: "2025年9月",
strength: "medium",
revenue: "288"
},
{
name: "杭州海康威视数字技术股份有限公司",
domains: ["人工智能"],
sanctionDate: "2025年9月",
strength: "weak",
revenue: "203"
},
{
name: "浪潮集团有限公司",
domains: ["人工智能"],
sanctionDate: "2025年9月",
strength: "medium",
revenue: "195"
},
{
name: "中芯国际集成电路制造有限公司",
domains: ["集成电路"],
sanctionDate: "2025年9月",
strength: "medium",
revenue: "190"
},
{
name: "北京复旦微电子技术有限公司",
domains: ["集成电路"],
sanctionDate: "2025年9月",
strength: "medium",
revenue: "184"
},
{
name: "哈尔滨工业大学",
domains: ["人工智能", "集成电路"],
sanctionDate: "2025年9月",
strength: "medium",
revenue: "无营收数据"
},
{
name: "ZTE中兴",
domains: ["通信网络", "集成电路"],
sanctionDate: "2025年9月",
strength: "medium",
revenue: "154"
},
{
name: "中兴通讯股份有限公司",
domains: ["通信网络", "集成电路"],
sanctionDate: "2025年9月",
strength: "medium",
revenue: "117"
},
{
name: "大疆创新科技有限公司",
domains: ["航空航天"],
sanctionDate: "2025年9月",
strength: "medium",
revenue: "1"
}
];
// 生成更多数据以模拟1329家实体
const generateMoreData = () => {
const moreData = [];
const companySuffixes = ["有限公司", "集团", "股份有限公司", "技术有限公司", "研究所"];
const domainsList = [
["人工智能"],
["通信网络"],
["航空航天"],
["集成电路"],
["人工智能", "集成电路"],
["通信网络", "集成电路"],
["航空航天", "人工智能"]
];
const strengths = ["strong", "medium", "weak"];
for (let i = 0; i < 1318; i++) {
const nameSuffix = companySuffixes[Math.floor(Math.random() * companySuffixes.length)];
const companyName = `实体${i + 12}${nameSuffix}`;
const domains = domainsList[Math.floor(Math.random() * domainsList.length)];
const strength = strengths[Math.floor(Math.random() * strengths.length)];
const revenue = Math.floor(Math.random() * 400) + 1;
moreData.push({
name: companyName,
domains: domains,
sanctionDate: "2025年9月",
strength: strength,
revenue: revenue.toString()
});
}
return moreData;
};
const allData = [...mockData, ...generateMoreData()];
// 计算属性
const total = computed(() => allData.length);
const totalPages = computed(() => Math.ceil(total.value / pageSize.value));
const filteredData = computed(() => {
if (!searchKeyword.value) return allData;
const keyword = searchKeyword.value.toLowerCase();
return allData.filter(
item => item.name.toLowerCase().includes(keyword) || item.domains.some(domain => domain.toLowerCase().includes(keyword))
);
});
const paginatedData = computed(() => {
const start = (currentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
return filteredData.value.slice(start, end);
});
// 当前法案
const curBill = ref({
billName: "",
billId: 0,
dyqkList: [],
hylyList: [],
tarName: "",
introductionDate: ""
});
const handleClickToDetail = () => {
window.sessionStorage.setItem("billId", curBill.value.billId);
router.push("/billLayout");
};
const billTrendList = ref([
{
title: "限制与中国合作",
no: "H.R.2670"
},
{
title: "限制中国获取技术",
no: "H.R.2471"
},
{
title: "禁止在中国建设半导体产能",
no: "H.R.5895"
},
{
title: "限制中国产燃油进口",
no: "S.870"
},
{
title: "禁止政府部门采购受控半导体或服务",
no: "H.R.6395"
},
{
title: "禁止向部分中国实体提供资金",
no: "H.R.3935"
},
{
title: "限制采购中国生产电池",
no: "H.R.7776"
},
{
title: "重视新兴中国技术公司威胁",
no: "H.R.3935"
},
{
title: "禁止卫星出口至中国",
no: "S.870"
},
{
title: "禁购华为设备",
no: "H.R.5895"
}
]);
const warningList = ref([
{
title: "兰德智库发布2025中国年度科技报告",
time: "一天前",
status: "特别重大"
},
{
title: "信息技术与创新基金会发布《中国正在迅速成...",
time: "一天前",
status: "特别重大"
},
{
title: "首次提出“限制外国敏感实体获取补贴",
time: "一天前",
status: "重大风险"
},
{
title: "将中国企业海外子公司、合资公司纳入受...",
time: "一天前",
status: "重大风险"
},
{
title: "H.R.8333《生物安全法案》将华大基因等...",
time: "一天前",
status: "一般风险"
}
]);
const timelineList = ref([
{
title: "成为公法 No: 119-21。",
time: "2025-07-04",
status: 1
},
{
title: "总统签署",
time: "2025-07-04",
status: 0
},
{
title: "提交总统",
time: "2025-07-03",
status: 0
},
{
title: "重新审议动议搁置案无异议通过。",
time: "2025-07-03 14:31",
status: 0
},
{
title: "关于‘众议院同意参议院修正案’...",
time: "2025-07-02 14:31",
status: 0
}
]);
const areaList = ref([
{
name: "跨境电商",
status: 2
},
{
name: "新能源产业",
status: 4
},
{
name: "半导体产业",
status: 1
},
{
name: "关税",
status: 3
},
{
name: "光伏产业",
status: 2
}
]);
const curBillList = ref([
{
billName: "大而美法案",
introductionDate: "2025年7月4日",
img: bill1
},
{
billName: "GENIUS稳定币法案",
introductionDate: "2025年7月5日",
img: bill2
},
{
billName: "美越贸易协议",
introductionDate: "2025年7月6日",
img: bill3
},
{
billName: "美越贸易协议",
introductionDate: "2025年7月7日",
img: bill4
},
{
billName: "汽车零部件25%关税实施规则",
introductionDate: "2025年7月10日",
img: bill5
},
{
billName: "汽车零部件25%关税实施规则",
introductionDate: "2025年7月12日",
img: bill6
},
{
billName: "小额豁免包裹政策调整",
introductionDate: "2025年7月14日",
img: bill7
},
{
billName: "NIH预算否决案",
introductionDate: "2025年7月15日",
img: bill8
},
{
billName: "得州国会选区重划法案",
introductionDate: "2025年7月17日",
img: bill9
},
{
billName: "美越贸易协议",
introductionDate: "2025年7月24日",
img: bill10
},
{
billName: "美越贸易协议",
introductionDate: "2025年8月4日",
img: bill11
},
{
billName: "美越贸易协议",
introductionDate: "2025年8月8日",
img: bill12
}
]);
const releaseTime = ref("近一年发布");
const releaseTimeList = ref([
{
label: "近半年发布",
value: "近半年发布"
},
{
label: "近一年发布",
value: "近一年发布"
},
{
label: "近两年发布",
value: "近两年发布"
},
{
label: "近三年发布",
value: "近三年发布"
},
{
label: "近五年发布",
value: "近五年发布"
}
]);
const categoryList = ref([
// "全部分类",
// "生物科技",
// "集成电路",
// "通信网络",
// "量子科技",
// "新能源",
// "新一代信息技术",
// "海洋",
// "先进制造",
// "新材料",
// "航空航天",
]);
const activeCate = ref("全部分类");
const activeHylyId = ref("");
// 获取领域分类
const handleGetHylyList = async () => {
try {
const res = await getHylyList();
console.log("行业领域列表");
categoryList.value = res.data;
const obj = {
id: 0,
hylyid: "",
hylymc: "全部分类"
};
categoryList.value = [obj, ...categoryList.value];
} catch (error) {}
};
const handleClickCate = cate => {
console.log(cate);
activeCate.value = cate.hylymc;
activeHylyId.value = cate.hylyid;
handleGetBillsByType();
};
const navList = ref([
{
icon: headerIcon1,
activeIcno: headerIcon1,
name: "首页",
path: "/home"
},
{
icon: headerIcon2,
activeIcno: headerIcon2,
name: "国家",
path: "/country"
},
{
icon: headerIcon3,
activeIcno: headerIcon3,
name: "领域",
path: "/area"
},
{
icon: headerIcon4,
activeIcno: headerIcon4,
name: "要素",
path: "/home"
},
{
icon: headerIcon5,
activeIcno: headerIcon5,
name: "事件",
path: "/home"
}
]);
const activeNavIndex = ref(0);
const handleClickNav = (index, item) => {
activeNavIndex.value = index;
router.push(item.path);
};
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const chart1Data = ref({
title: [
"2024-09",
"2024-10",
"2024-11",
"2024-12",
"2025-01",
"2025-02",
"2025-03",
"2025-04",
"2025-05",
"2025-06",
"2025-07",
"2025-08"
],
data: [
{
name: "提出法案",
value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172]
},
{
name: "通过法案",
value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44]
}
]
});
// 获取热门法案
const handleGetHotBills = async () => {
try {
const res = await getHotBills();
console.log("热门法案", res);
billList.value = res.data;
} catch (error) {
console.error(error);
}
};
// 根据法案类型获取法案列表
const handleGetBillsByType = async () => {
const params = {
type: activeHylyId.value
};
try {
const res = await getBillsByType(params);
console.log("根据法案类型获取法案列表", res);
curBillList.value = res.data.map(item => {
return {
billId: item.billId,
billName: item.billName,
introductionDate: item.introductionDate,
img: bill1
};
});
} catch (error) {}
};
onMounted(async () => {
handleGetHylyList();
await handleGetHotBills();
curBill.value = billList.value[0];
handleGetBillsByType();
let chart1 = getMultiLineChart(chart1Data.value.title, chart1Data.value.data[0].value, chart1Data.value.data[1].value);
setChart(chart1, "chart1");
});
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper) {
box-shadow: none;
}
.home-header {
height: 64px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
line-height: 64px;
background: url("@/assets/images/nav-bg.png");
box-sizing: border-box;
padding-left: 160px;
}
.box1 {
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
.box1-absolute {
position: absolute;
width: 240px;
height: 89px;
top: 30px;
right: -24px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding-right: 50px;
box-sizing: border-box;
background: linear-gradient(to right, rgba(206, 79, 81, 0), rgba(206, 79, 81, 0.3));
&-des {
display: flex;
gap: 5px;
align-items: center;
font-size: 18px;
font-weight: 700;
color: rgba(206, 79, 81, 1);
}
&-num {
font-size: 32px;
font-weight: 700;
color: rgba(206, 79, 81, 1);
}
}
.box1-top {
// display: flex;
// flex-direction: column;
// gap: 10px;
padding-left: 30px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
&-title {
font-size: 20px;
font-weight: 700;
color: $base-color;
margin-top: 10px;
margin-bottom: 15px;
}
&-content {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
&-item {
display: flex;
gap: 5px;
&-title {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
}
}
}
.box1-bottom {
padding-left: 30px;
&-title {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
margin-bottom: 15px;
}
&-content {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: space-between;
padding-left: 10px;
&-item {
display: flex;
align-items: center;
justify-content: flex-start;
width: 48%; /* 留出2%的间距 */
// margin-bottom: 6px;
box-sizing: border-box;
gap: 10px;
&-img {
width: 24px;
height: 24px;
}
&-txt {
font-size: 16px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
}
}
}
}
.box1-right {
display: flex;
flex-direction: column;
gap: 10px;
.box1-right-title {
font-size: 20px;
font-weight: 700;
color: $base-color;
}
.box1-right-tags {
display: flex;
gap: 10px;
}
.box1-right-content {
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
.box1-right-footer {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
.box1-right-footer-time {
color: rgba(95, 101, 108, 1);
font-size: 14px;
font-weight: 400;
}
}
}
}
.box2-main {
// position: relative;
overflow-y: auto;
.box2-main-item {
// margin-left: 23px;
// height: 47px;
// width: 464px;
// display: flex;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
display: flex;
align-items: center;
width: 40px;
height: 40px;
padding: 5px;
border-radius: 100%;
background: rgba(255, 241, 240);
color: rgba(245, 34, 45, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
text-align: center;
flex-shrink: 0;
}
.item-right {
margin-left: 13px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
height: 47px;
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1);
.text {
font-family: Microsoft YaHei;
line-height: 47px;
width: 80%;
font-size: 16px;
font-weight: 400;
color: rgba(59, 65, 75, 1);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.time {
margin-left: 10px;
line-height: 47px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
}
}
.box2-footer {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 80%;
height: 42px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 6px;
background: rgba(22, 119, 255, 1);
margin: 0 auto;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.box3 {
display: flex;
justify-content: space-between;
align-items: flex-start;
.box3-content-title {
font-size: 18px;
font-weight: 700;
font-family: Microsoft YaHei;
width: 470px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(247, 248, 249, 1);
color: $base-color;
margin-bottom: 15px;
}
.box3-content {
.el-progress--line {
width: 82px;
}
}
}
.box4 {
.box4-item {
display: flex;
gap: 10px;
align-items: flex-start;
padding-bottom: 30px;
.box4-item-left {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 8px;
position: relative;
.box4-item-left-icon {
width: 10px;
height: 10px;
}
.box4-item-left-line {
width: 1px;
height: 145px;
position: absolute;
top: 15px;
border-left: 1px solid rgba(10, 87, 166, 0.3);
}
}
.box4-item-right {
display: flex;
flex-direction: column;
gap: 5px;
.box4-item-right-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
&-title {
font-size: 18px;
color: $base-color;
font-weight: 700;
}
&-desc {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
}
.box4-item-right-content {
margin-top: 10px;
font-size: 16px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
height: 70px;
line-height: 25px;
}
}
}
.box4-footer {
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -20px;
}
}
.box5 {
height: 115%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
:deep(.table-header) {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
:deep(.table-row) {
height: 64px;
}
.domain-tags {
display: flex;
gap: 8px;
}
.box5-header-right {
font-size: 16px;
font-weight: 700;
color: $base-color;
}
.table-footer {
margin-top: 20px;
}
.home-wrapper {
.home-main {
// width: 1400px;
padding: 0 5%;
margin: 0 auto;
background: url("./assets/images/background.png");
background-size: 100% 100%;
.home-main-header {
margin-top: 43px;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
.home-main-header-top {
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
margin-top: 43px;
}
.home-main-header-center {
margin-top: 13px;
width: 960px;
height: 48px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
.search {
position: absolute;
right: 1px;
top: 1px;
width: 120px;
height: 42px;
border-radius: 4px;
background: rgba(22, 119, 255, 1);
display: flex;
justify-content: center;
align-items: center;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-footer {
margin-top: 38px;
width: 700px;
height: 64px;
box-sizing: border-box;
padding: 0 108px;
display: flex;
justify-content: space-between;
.home-main-header-footer-item {
padding: 0 10px;
text-align: center;
.item-top {
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 36px;
font-weight: 700;
line-height: 22px;
}
.item-footer {
margin-top: 10px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
.home-main-header-footer-link,
.home-main-header-footer-info {
display: flex;
gap: 30px;
padding: 30px 0;
}
}
.home-main-center {
margin-top: 34px;
.center-top {
height: 450px;
display: flex;
gap: 20px;
.box1 {
display: flex;
gap: 10px;
position: relative;
// .box1-left {
// position: absolute;
// left: 0;
// top: 200px;
// width: 24px;
// height: 48px;
// background: #e7f1ff;
// display: flex;
// justify-content: center;
// align-items: center;
// cursor: pointer;
// .icon {
// width: 11px;
// height: 18px;
// img {
// width: 100%;
// height: 100%;
// }
// }
// }
.box1-right {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
cursor: pointer;
.icon {
width: 11px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
}
.box1-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
.box1-header-left {
display: flex;
.icon {
width: 18px;
height: 18px;
margin-top: 19px;
img {
width: 100%;
height: 100%;
}
}
.title {
height: 22px;
margin-left: 18px;
margin-top: 16px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
}
.box1-header-right {
margin-top: 19px;
height: 16px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 16px;
cursor: pointer;
}
}
.box1-main {
display: flex;
height: 354px;
margin-top: 22px;
.box1-main-top {
height: 68px;
display: flex;
justify-content: space-between;
.box1-main-top-left {
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.box1-main-top-right {
margin-left: 20px;
display: flex;
.num {
padding: 1px 8px;
height: 24px;
box-sizing: border-box;
border: 1px solid rgba(145, 202, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
}
.tag {
box-sizing: border-box;
border: 1px solid rgba(135, 232, 222, 1);
border-radius: 4px;
background: rgba(230, 255, 251, 1);
}
}
}
}
}
.box2 {
flex: 1;
padding-right: 20px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box2-header {
height: 54px;
display: flex;
.icon {
width: 24px;
height: 22px;
margin-left: 33px;
margin-top: 18px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 22px;
margin-top: 16px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
.num {
width: 24px;
height: 16px;
text-align: center;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 12px;
margin-left: 6px;
margin-top: 17px;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 100px;
background: rgba(255, 77, 79, 1);
}
.more {
margin-top: 19px;
margin-left: 256px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 16px;
}
}
.box2-main {
height: 282px;
overflow-y: auto;
.box2-main-item {
margin-left: 23px;
height: 47px;
width: 464px;
display: flex;
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
margin-top: 4px;
margin-left: 2px;
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 241, 240);
color: rgba(245, 34, 45, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
}
.item-right {
margin-left: 13px;
width: 408px;
height: 47px;
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
width: 348px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 47px;
}
.time {
margin-left: 10px;
line-height: 47px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
}
}
.box2-footer {
position: absolute;
left: 26px;
bottom: 20px;
width: 430px;
height: 42px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 6px;
background: rgba(22, 119, 255, 1);
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
}
.center-footer {
margin-top: 21px;
height: 450px;
display: flex;
.box3 {
width: 900px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 15px;
width: 13px;
height: 13px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 16px;
margin-left: 22px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
}
.box3-header-right {
display: flex;
justify-content: flex-end;
width: 178px;
height: 22px;
.right-box {
display: flex;
margin-top: 16px;
width: 89px;
height: 22px;
justify-content: flex-end;
.icon1 {
margin-top: 5px;
width: 12px;
height: 12px;
border-radius: 6px;
background: rgba(20, 89, 187, 1);
}
.icon2 {
margin-top: 5px;
width: 12px;
height: 12px;
border-radius: 6px;
background: rgba(250, 140, 22, 1);
}
.text {
margin-left: 5px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
}
.box3-main {
height: 397px;
}
}
.box4 {
margin-left: 20px;
width: 521px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box4-header {
width: 452px;
margin: 0 auto;
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.header-icon {
margin-top: 18px;
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 26px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
}
.box4-main {
width: 452px;
margin: 0 auto;
margin-top: 8px;
height: 360px;
overflow-y: auto;
.box4-main-item {
margin-top: 6px;
height: 30px;
display: flex;
.leftStatus3 {
color: rgba(255, 197, 61, 1) !important;
}
.leftStatus2 {
color: rgba(255, 169, 64, 1) !important;
}
.left {
width: 44px;
text-align: left;
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 30px;
color: rgba(206, 79, 81, 1);
}
.center {
width: 300px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
.right {
width: 108px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 30px;
text-align: right;
}
}
}
}
}
}
.home-main-footer {
// width: 100%;
height: 911px;
background: rgba(248, 249, 250, 1);
.home-main-footer-header {
margin-top: 37px;
margin-bottom: 36px;
// width: 1600px;
height: 42px;
// background: orange;
display: flex;
justify-content: space-between;
.btn-box {
width: 1300px;
display: flex;
justify-content: space-between;
.btn {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 42px;
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 0);
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
}
}
.btnActive {
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 1);
color: #fff;
&:hover {
color: #fff;
background: rgba(20, 89, 187, 1);
}
}
}
.select-box {
height: 42px;
box-sizing: border-box;
padding: 5px 0;
}
}
.home-main-footer-main {
width: 100%;
// background: orange;
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
// justify-content: center;
.main-item {
width: 240px;
height: 320px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: #fff;
margin-bottom: 24px;
margin-right: 25px;
.main-item-box1 {
margin-top: 20px;
margin-left: 45px;
width: 150px;
height: 200px;
box-sizing: border-box;
border: 1px solid rgba(240, 242, 244, 1);
img {
width: 100%;
height: 100%;
}
}
.main-item-box2 {
margin-top: 26px;
text-align: center;
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
}
.main-item-box3 {
text-align: center;
height: 30px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
}
}
}
</style>
src/views/finance/infoPlatform/index.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div class="page-container">
<div style="height: 30px; width: 960px; display: flex; justify-content: flex-start">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item>国家科技安全</el-breadcrumb-item>
<el-breadcrumb-item>中美博弈概览</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }"
><span style="font-weight: 700; color: rgba(6, 110, 217, 1)"
>美对华科技合作限制信息平台</span
></el-breadcrumb-item
>
</el-breadcrumb>
</div>
<el-input v-model="searchKey" style="max-width: 960px" placeholder="搜索政策关键词" class="input-with-select">
<template #append>
<el-button :icon="Search" size="large" type="primary">搜索</el-button>
</template>
</el-input>
<div class="page-data">
<div class="page-data-item" v-for="item in pageData" :key="item.desc">
<div class="page-data-item-num">
{{ item.num }}
</div>
<div class="page-data-item-desc">
{{ item.desc }}
</div>
</div>
</div>
<!-- 内容 -->
<div class="page-content">
<el-row :gutter="20">
<el-col :span="16">
<custom-container title="本次制裁共新增83个实体，其中53个中国大陆实体、1个中国台湾实体。" height="866px">
<template #header-left>
<div class="custom-container-header-left">
<img class="custom-container-icon" src="@/assets/images/icon-law.png" alt="" />
<span class="custom-container-title">最新限制动态</span>
</div>
</template>
<!-- 顶部右侧自定义内容 -->
<template #header-right>
<div style="display: flex; gap: 12px">
<el-button type="primary" link>查看详情 ></el-button>
</div>
</template>
<!-- 中间内容自定义 -->
<template #default>
<div class="content-card" v-for="item in limitData" :key="item.title">
<div class="content-card-date">{{ `${item.date} · ${item.importance}` }}</div>
<div class="content-card-title">
<div class="content-card-title-text">{{ item.title }}</div>
<!-- <div class="content-card-title-tag" v-for="tag in item.tag" :key="tag">{{ tag }}</div> -->
<el-tag :type="tagType[Math.floor(Math.random() * 5)]" v-for="tag in item.tag" :key="tag">{{
tag
}}</el-tag>
</div>
<div class="content-card-desc">{{ item.desc }}</div>
</div>
</template>
<!-- 底部自定义内容 -->
<!-- <template #footer>
<el-button>取消</el-button>
<el-button type="primary">保存更改</el-button>
</template> -->
</custom-container>
</el-col>
<el-col :span="8">
<custom-container title="风险信号" height="450px">
<template #header-left>
<div class="custom-container-header-left">
<img class="custom-container-icon" src="@/assets/images/icon-warning.png" alt="" />
<span class="custom-container-title">风险信号</span>
<span class="custom-container-count">5</span>
</div>
</template>
<!-- 顶部右侧自定义内容 -->
<template #header-right>
<div style="display: flex; gap: 12px">
<el-button type="primary" link>更多 ></el-button>
</div>
</template>
<!-- 中间内容自定义 -->
<template #default>
<div class="content-list-card" v-for="item in riskData" :key="item.title">
<el-tag :type="item.danger" size="small">{{ item.importance }}</el-tag>
<div class="content-list">
<div class="content-list-title">{{ item.title }}</div>
<div class="content-list-time">{{ item.date }}</div>
</div>
</div>
<div class="content-list-footer">
<el-button type="primary" size="default" style="width: 100%">
<img class="icon-mark" src="@/assets/images/icon-mark.png" alt="" />
风险处理
</el-button>
</div>
</template>
</custom-container>
<custom-container title="学术交流限制" height="400px">
<template #header-left>
<div class="custom-container-header-left">
<img class="custom-container-icon" src="@/assets/images/icon-hot.png" alt="" />
<span class="custom-container-title">学术交流限制</span>
</div>
</template>
<!-- 中间内容自定义 -->
<template #default>
<div class="content-list-card" v-for="item in academicData" :key="item.title">
<!-- <el-tag :type="item.danger" size="small">{{ item.importance }}</el-tag> -->
<div class="content-list-row">
<div class="content-card-title-text">{{ item.title }}</div>
<div class="content-card-desc">{{ item.desc }}</div>
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<custom-container title="政策禁令限制">
<template #header-left>
<div class="custom-container-header-left1">
<div class="icon"></div>
<div class="title">学术交流限制</div>
</div>
</template>
<template #default>
<div
class="content-list-item content-card-title-text-2"
v-for="item in policyBanData"
:key="item.title"
>
<!-- <el-tag :type="item.danger" size="small">{{ item.importance }}</el-tag> -->
<div class="content-card-title-text">{{ item.title }}</div>
<div class="content-card-desc">{{ item.desc }}</div>
<div class="content-card-tag-box">
<div class="content-card-tag-box-item">
<el-tag
:type="tagType[Math.floor(Math.random() * 5)]"
v-for="tag in item.tag"
:key="tag"
>{{ tag }}</el-tag
>
</div>
<el-button class="content-card-tag-btn" type="primary" link>查看全文 ></el-button>
</div>
</div>
<div class="content-card-footer">
<el-button type="primary" link>
查看详情 <img class="icon-mark" src="@/assets/images/icon-double-down.png" alt="" />
</el-button>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="近期时间线">
<template #header-left>
<div class="custom-container-header-left1">
<div class="icon"></div>
<div class="title">近期时间线</div>
</div>
</template>
<template #default>
<div style="text-align: center; width: 100%; margin-bottom: 20px">
<el-space>
<el-button plain type="primary">全部</el-button>
<el-button>半导体</el-button>
<el-button>人工智能</el-button>
<el-button>出口管制</el-button>
<el-button>学术交流</el-button>
<el-button>投资审查</el-button>
</el-space>
</div>
<div class="time-line" v-for="item in recentTimeline" :key="item.title">
<img class="time-line-dot" src="@/assets/images/dot.png" alt="" />
<div class="time-line-title">
<span class="time-line-title-text">{{ item.date }}</span>
<div class="time-line-desc">
<div class="time-line-desc-title">{{ item.title }}</div>
<div class="content-card-tag-box-item">
<el-tag
:type="tagType[Math.floor(Math.random() * 5)]"
v-for="tag in item.tag"
:key="tag"
>{{ tag }}</el-tag
>
</div>
</div>
</div>
</div>
<div class="content-card-footer">
<el-button type="primary" link>
查看详情 <img class="icon-mark" src="@/assets/images/icon-double-down.png" alt="" />
</el-button>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<custom-container title="科研项目合作情况">
<template #header-left>
<div class="custom-container-header-left1">
<div class="icon"></div>
<div class="title">科研项目合作情况</div>
</div>
</template>
<template #default>
<div
class="content-list-item content-card-title-text-2"
v-for="item in researchData"
:key="item.title"
>
<!-- <el-tag :type="item.danger" size="small">{{ item.importance }}</el-tag> -->
<div class="content-card-title-text">{{ item.title }}</div>
<div class="content-card-desc">{{ item.desc }}</div>
</div>
<div class="content-card-footer">
<el-button type="primary" link>
查看更多 <img class="icon-mark" src="@/assets/images/icon-double-down.png" alt="" />
</el-button>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="人才流动限制情况">
<template #header-left>
<div class="custom-container-header-left1">
<div class="icon"></div>
<div class="title">人才流动限制情况</div>
</div>
</template>
<template #default>
<div class="content-list-item content-card-title-text-2" v-for="item in talentData" :key="item.title">
<div class="content-card-title-text">{{ item.title }}</div>
<div class="content-card-desc">{{ item.desc }}</div>
</div>
<div class="content-card-footer">
<el-button type="primary" link>
查看更多 <img class="icon-mark" src="@/assets/images/icon-double-down.png" alt="" />
</el-button>
</div>
</template>
</custom-container>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ArrowRight } from "@element-plus/icons-vue";
import CustomContainer from "@/components/Container/index.vue";
const searchKey = ref("");
const pageData = ref([
{
num: 42,
desc: "生效政策禁令"
},
{
num: 128,
desc: "受限制实体"
},
{
num: 16,
desc: "受限制领域"
},
{
num: 7,
desc: "本月更新"
}
]);
// tag类型
const tagType = ["primary", "success", "info", "warning", "danger"];
// 限制动态数据
const limitData = ref([
{
date: "2025年9月2日",
importance: "紧急",
tag: ["半导体", "出口管制"],
title: "美国撤销多家芯片企业在华VEU授权",
desc: `美国最终用户审查委员会（ERC）宣布撤销英特尔、SK海力士和三星在中国工厂的"经验证最终用户"（VEU）授权，影响其在华芯片生产。新规定计划于10月2日《联邦公报》出版120天后正式生效:cite[3]:cite[4]。`
},
{
date: "2025年9月2日",
importance: "紧急",
tag: [" 半导体", "晶圆制造"],
title: "台积电南京厂VEU资格被撤销",
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。`
},
{
date: "2025年9月2日",
importance: "紧急",
tag: [" 半导体", "晶圆制造"],
title: "台积电南京厂VEU资格被撤销",
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。`
},
{
date: "2025年9月2日",
importance: "紧急",
tag: [" 报道题", "晶圆制造"],
title: "台积电南京厂VEU资格被撤销",
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。`
},
{
date: "2025年9月2日",
importance: "紧急",
tag: [" 报道题", "晶圆制造"],
title: "台积电南京厂VEU资格被撤销",
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。`
},
{
date: "2025年9月2日",
importance: "紧急",
tag: [" 报道题", "晶圆制造"],
title: "台积电南京厂VEU资格被撤销",
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。`
}
]);
// 风险
const riskType = ref(["特别重大", "重大风险", "一般风险"]);
const riskData = ref([
{
date: "一天前",
importance: "特别重大",
danger: "danger",
title: "美国大而美法案落地，总统签署通过"
},
{
date: "两天前",
importance: "重大风险",
danger: "warning",
title: "美大而美法案7月1日以51:50的票数通过..."
},
{
date: "三天前",
importance: "特别重大",
danger: "danger",
title: "首次提出“限制外国敏感实体获取补贴”"
},
{
date: "四天前",
importance: "一般风险",
danger: "success",
title: "将中国企业海外子公司、合资公司纳入受..."
},
{
date: "五天前",
importance: "一般风险",
danger: "success",
title: "H.R.8333《生物安全法案》将华大基因等..."
}
]);
// 学术交流限制
const academicData = ref([
{
title: "签证限制",
desc: "美国国务院已开始取消部分中国留学生的签证，针对STEM领域学生和研究人员加强审查。"
},
{
title: "合作项目终止",
desc: "密歇根大学终止了与上海交通大学的长期合作，佐治亚理工停止深圳学院运营。"
},
{
title: "数据访问限制",
desc: "美国国立卫生研究院（NIH）禁止中国、俄罗斯、伊朗等国的机构访问其受控数据。"
}
]);
// 政策禁令限制
const policyBanData = ref([
{
title: "《美国优先投资政策》总统备忘录",
desc: `2025年2月签署，限制美国资本投资中国"军民融合"战略相关产业，并审查甚至阻止中国对美关键领域的投资。备忘录扩大CFIUS的审查范围，要求将限制领域扩展到"医疗、农业、能源、原材料等战略行业"。`,
tag: ["投资审查", "国家暗安全"]
},
{
title: "《外国公司问责法》",
desc: `2025年2月签署，限制美国资本投资中国"军民融合"战略相关产业，并审查甚至阻止中国对美关键领域的投资。备忘录扩大CFIUS的审查范围，要求将限制领域扩展到"医疗、农业、能源、原材料等战略行业"。`,
tag: ["金融", "上市公司"]
}
]);
// 近期时间线
const recentTimeline = ref([
{
date: "2025-9-2",
tag: ["半导体", "出口管制"],
title: "撤销芯片企业VEU授权"
},
{
date: "2025-07-29",
tag: ["人工智能", "出口管制"],
title: "强化AI芯片出口限制"
},
{
date: "2025-05-08",
tag: ["半导体", "出口管制"],
title: "TikTok剥离期限再次延期"
}
// {
// date: "2025-04-02",
// tag: ["半导体", "出口管制"],
// title: "14117规则生效"
// }
]);
// 科研项目合作
const researchData = ref([
{
title: "合作范围缩小",
desc: "中美科技合作协定虽得以续签，但范围有所收窄，更强调透明性、互惠性和研究人员保护。"
},
{
title: "敏感领域合作遇冷",
desc: `在人工智能、量子计算等敏感技术领域，合作项目面临严格的"国家安全审查"。`
}
]);
// 人才流动限制
const talentData = ref([
{
title: "华人科学家离美趋势",
desc: "2010年至2021年间，有近1.25万名华裔科学家离开美国回到中国。"
},
{
title: "审查措施加强",
desc: `美国政府以"国家安全"为由，调查并限制华人科学家参与美国科研项目。`
}
]);
</script>
<style lang="scss" scoped>
.page-container {
display: flex;
flex-direction: column;
align-items: center;
/* height: 100vh; */
margin: 0px auto;
padding: 0px 120px;
padding-top: 40px;
/* background-color: rgba(234, 236, 238, 1); */
background: url("/assets/images/background.png");
}
.page-data {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
width: 960px;
gap: 80px;
}
.page-data-item {
display: flex;
flex-direction: column;
align-items: center;
}
.page-data-item-num {
font-size: 24px;
font-weight: 600;
color: var(--color-main-active);
}
.page-data-item-desc {
font-size: 12px;
color: rgba(95, 101, 108, 1);
}
.page-content {
margin-top: 20px;
width: 100%;
/* padding: 0px 20px; */
}
.custom-container-header-left1 {
display: flex;
margin-left: -15px;
height: 24px;
.icon {
width: 8px;
height: 16px;
background: var(--color-main-active);
margin-top: 4px;
border-radius: 0 2px 2px 0;
}
.title {
margin-left: 14px;
height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.custom-container-header-left {
display: flex;
align-items: center;
gap: 8px;
padding-left: 20px;
padding-bottom: 5px;
/* border-bottom: 1px solid rgba(234, 236, 238, 1); */
}
.custom-container-title {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
.custom-container-count {
text-align: center;
width: 24px;
height: 16px;
border-radius: 100px;
font-size: 12px;
background-color: rgba(255, 77, 79, 1);
color: #fff;
}
.custom-container-icon {
height: 18px;
width: 18px;
}
.content-card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 8px;
padding: 12px 20px;
background-color: rgba(247, 248, 249, 1);
border-radius: 8px;
margin-bottom: 14px;
}
.content-card-date {
font-size: 14px;
font-weight: 400;
color: rgba(10, 87, 166, 1);
}
.content-card-title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.content-card-title-text {
font-size: 16px;
font-weight: 700;
color: rgba(10, 18, 30, 1);
margin-right: auto;
}
.content-card-title-text-2 {
display: flex;
flex-direction: column;
gap: 11px;
padding: 10px;
margin-bottom: 10px;
border-radius: 4px;
/* box-shadow: 0 2px 8px rgba(60, 87, 126, 0.2); */
box-shadow: 0 0 15px 0 rgba(60, 87, 126, 0.2);
}
.content-card-tag-box {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.content-card-tag-box-item {
display: flex;
align-items: center;
gap: 6px;
}
.content-card-tag-btn {
margin-left: autp;
}
.content-card-title-tag {
font-size: 12px;
color: rgba(95, 101, 108, 1);
}
.content-card-desc {
font-size: 12px;
color: rgba(95, 101, 108, 1);
}
.content-list-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.content-list {
height: 40px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.content-list-row {
height: 60px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.content-list-title {
width: 80%;
font-size: 16px;
font-weight: 400;
color: rgba(59, 65, 75, 1);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.content-list-time {
font-size: 14px;
color: rgba(132, 136, 142, 1);
}
.content-list-footer {
width: 100%;
margin-top: 115px;
}
.icon-mark {
height: 12px;
width: 12px;
margin-right: 5px;
margin-left: 8px;
}
.content-card-footer {
display: flex;
width: 100%;
justify-content: center;
margin-top: 30px;
}
.time-line {
display: flex;
gap: 15px;
align-items: flex-start;
padding-left: 10px;
margin-bottom: 20px;
}
.time-line-title {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 8px;
width: 100%;
}
.time-line-dot {
width: 10px;
height: 10px;
margin-top: 5px;
}
.time-line-title-text {
font-size: 14px;
font-weight: 700;
color: rgba(95, 101, 108, 1);
color: var(--base-color);
}
.time-line-desc {
width: 100%;
display: flex;
justify-content: space-between;
}
.time-line-desc-title {
font-size: 16px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
margin-bottom: 5px;
}
.time-line-desc-text {
font-size: 14px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
}
.time-line-dot {
width: 8px;
height: 8px;
background-color: rgba(10, 87, 166, 1);
border-radius: 50%;
}
</style>
src/views/finance/researchFunding/index.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div class="page-container">
<div style="height: 30px; width: 960px; display: flex; justify-content: flex-start">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item>国家科技安全</el-breadcrumb-item>
<el-breadcrumb-item>中美博弈概览</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }">科研资助体系</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-input v-model="searchKey" style="max-width: 960px" placeholder="搜索政策关键词" class="input-with-select">
<template #append>
<el-button :icon="Search" size="large" type="primary">搜索</el-button>
</template>
</el-input>
<div class="page-data">
<div class="page-data-item" v-for="item in pageData" :key="item.desc">
<div class="page-data-item-num">
{{ item.num }}
</div>
<div class="page-data-item-desc">
{{ item.desc }}
</div>
</div>
</div>
<div class="page-content">
<el-row :gutter="20">
<el-col :span="16">
<custom-container title="美国对华规则限制动态" height="450px">
<template #header-left>
<div class="custom-container-header-left">
<img class="custom-container-icon" src="@/assets/images/icon-law.png" alt="" />
<span class="custom-container-title">美国联邦科研决策和资助体系</span>
</div>
</template>
<!-- 顶部右侧自定义内容 -->
<template #header-right>
<div style="display: flex; gap: 12px">
<el-button type="primary" link>查看详情 ></el-button>
</div>
</template>
<!-- 中间内容自定义 -->
<template #default>
<div ref="treeRef" style="height: 340px; width: 100%"></div>
</template>
</custom-container>
</el-col>
<el-col :span="8">
<custom-container title="风险信号" height="450px">
<template #header-left>
<div class="custom-container-header-left">
<img class="custom-container-icon" src="@/assets/images/icon-warning.png" alt="" />
<span class="custom-container-title">风险信号</span>
<span class="custom-container-count">5</span>
</div>
</template>
<!-- 顶部右侧自定义内容 -->
<template #header-right>
<div style="display: flex; gap: 12px">
<el-button type="primary" link>更多 ></el-button>
</div>
</template>
<!-- 中间内容自定义 -->
<template #default>
<div class="content-list-card" v-for="item in riskData" :key="item.title">
<el-tag :type="item.danger" size="small">{{ item.importance }}</el-tag>
<div class="content-list">
<div class="content-list-title">{{ item.title }}</div>
<div class="content-list-time">{{ item.date }}</div>
</div>
</div>
<div class="content-list-footer">
<el-button type="primary" size="default" style="width: 100%">
<img class="icon-mark" src="@/assets/images/icon-mark.png" alt="" />
风险处理
</el-button>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<custom-container title="科技领域重点布局" height="520px">
<!-- 顶部右侧自定义内容 -->
<template #header-right>
<div style="display: flex; gap: 12px">
<el-button type="primary" link>查看详情 ></el-button>
</div>
</template>
<!-- 中间内容自定义 -->
<template #default>
<div class="content-chart">
<div class="content-chart-radio">
<el-radio-group v-model="radio" size="small">
<el-radio label="1">人工智能</el-radio>
<el-radio label="2">量子技术</el-radio>
<el-radio label="2">半导体</el-radio>
<el-radio label="2">生物技术</el-radio>
<el-radio label="2">能源技术</el-radio>
</el-radio-group>
</div>
<div class="content-chart-wrapper">
<el-row :gutter="20">
<el-col :span="10">
<div ref="pieRef" style="height: 400px; width: 100%"></div>
<!-- <ECharts ref="pieRef" :option="pieOption" autoresize :style="{ height: '326px' }" /> -->
</el-col>
<el-col :span="14">
<div class="content-list-item" v-for="item in policyBanData" :key="item.title">
<div class="content-card-title-text-2">
<!-- <el-tag :type="item.danger" size="small">{{ item.importance }}</el-tag> -->
<div class="content-card-title-text">{{ item.title }}</div>
<div class="content-card-desc">{{ item.desc }}</div>
<div class="content-card-tag-box">
<div class="content-card-tag-box-item">
<el-tag :type="tagType[Math.floor(Math.random() * 5)]" v-for="tag in item.tag" :key="tag">{{
tag
}}</el-tag>
</div>
<!-- <el-button class="content-card-tag-btn" type="primary" link>查看全文 ></el-button> -->
</div>
</div>
<div class="content-list-item-money">
{{ item.money }}
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
</custom-container>
</el-row>
<el-row :gutter="20">
<el-image :src="BGC" style="height: 429px; width: 100%"></el-image>
</el-row>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ArrowRight } from "@element-plus/icons-vue";
import ECharts from "@/components/Chart/index.vue";
import CustomContainer from "@/components/Container/index.vue";
import { useEcharts } from "@/hooks/useEcharts";
import echarts from "@/plugins/echarts";
import { treeData } from "./mock";
import { TreeChart } from "echarts/charts"; // 树图组件
import BGC from "@/assets/images/bgc-mock.png";
// 导入必要的组件
import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
// 导入渲染器（Canvas或SVG）
import { CanvasRenderer } from "echarts/renderers";
// 2. 注册所有需要的组件
echarts.use([
TreeChart, // 树图图表
TitleComponent, // 标题组件
TooltipComponent, // 提示框组件
LegendComponent, // 图例组件
CanvasRenderer // 渲染器:cite[7]
]);
const searchKey = ref("");
const pageData = ref([
{
num: 310,
desc: "生效政策禁令"
},
{
num: 14433,
desc: "受限制实体"
},
{
num: 126,
desc: "受限制领域"
},
{
num: 16,
desc: "本月更新"
}
]);
const riskData = ref([
{
date: "一天前",
importance: "特别重大",
danger: "danger",
title: "美国大而美法案落地，总统签署通过"
},
{
date: "两天前",
importance: "重大风险",
danger: "warning",
title: "美大而美法案7月1日以51:50的票数通过..."
},
{
date: "三天前",
importance: "特别重大",
danger: "danger",
title: "首次提出“限制外国敏感实体获取补贴”"
},
{
date: "四天前",
importance: "一般风险",
danger: "success",
title: "将中国企业海外子公司、合资公司纳入受..."
},
{
date: "五天前",
importance: "一般风险",
danger: "success",
title: "H.R.8333《生物安全法案》将华大基因等..."
}
]);
const treeRef = ref(null);
const pieRef = ref(null);
const treeOption = {
tooltip: {
trigger: "item",
triggerOn: "mousemove"
},
series: [
{
type: "tree",
data: [treeData],
top: "1%",
left: "7%",
bottom: "1%",
right: "20%",
symbolSize: 7,
label: {
position: "left",
verticalAlign: "middle",
align: "right",
fontSize: 9
},
leaves: {
label: {
position: "right",
verticalAlign: "middle",
align: "left"
}
},
emphasis: {
focus: "descendant"
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
};
const pieOption = ref(null);
onMounted(() => {
const treeChart = echarts.init(treeRef.value);
const pieChart = echarts.init(pieRef.value);
// tree.setOption(treeOption);
pieOption.value = {
title: {
text: "",
left: "center",
textStyle: {
color: "#999",
fontWeight: "normal",
fontSize: 14
}
},
series: {
type: "pie",
radius: [70, 90],
top: -10 + "%",
// height: '33.33%',
left: "center",
width: 500,
itemStyle: {
borderColor: "#fff",
borderWidth: 1
},
label: {
alignTo: "edge",
// formatter: "{name|{b}}\n{time|{c} 小时}",
formatter: "{name|{b}}\n",
minMargin: 20,
edgeDistance: 0,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: "#999"
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < pieChart.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: [
{ name: "专家系统", value: 5.6 },
{ name: "机器人技术", value: 1 },
{ name: "自动驾驶", value: 0.8 },
{ name: "机器学习", value: 0.5 },
{ name: "自然语言处理", value: 0.5 },
{ name: "计算机视觉", value: 0.5 },
{ name: "其它", value: 3.8 }
]
}
};
console.log("树形结构数据 =>", treeOption, treeRef.value);
useEcharts(treeChart, treeOption);
useEcharts(pieChart, pieOption.value);
});
// tag类型
const tagType = ["primary", "success", "info", "warning", "danger"];
const policyBanData = ref([
{
title: "《美国优先投资政策》总统备忘录",
desc: `2025年2月签署，限制美国资本投资中国"军民融合"战略相关产业，并审查甚至阻止中国对美关键领域的投资。备忘录扩大CFIUS的审查范围，要求将限制领域扩展到"医疗、农业、能源、原材料等战略行业"。`,
tag: ["投资审查", "国家暗安全"],
money: "$125M"
},
{
title: "《外国公司问责法》",
desc: `2025年2月签署，限制美国资本投资中国"军民融合"战略相关产业，并审查甚至阻止中国对美关键领域的投资。备忘录扩大CFIUS的审查范围，要求将限制领域扩展到"医疗、农业、能源、原材料等战略行业"。`,
tag: ["金融", "上市公司"],
money: "$85M"
},
{
title: "《外国公司问责法》",
desc: `2025年2月签署，限制美国资本投资中国"军民融合"战略相关产业，并审查甚至阻止中国对美关键领域的投资。备忘录扩大CFIUS的审查范围，要求将限制领域扩展到"医疗、农业、能源、原材料等战略行业"。`,
tag: ["金融", "上市公司"],
money: "$69M"
}
]);
</script>
<style scoped>
.page-container {
display: flex;
flex-direction: column;
align-items: center;
/* height: 100vh; */
margin: 0px auto;
padding: 0px 120px;
padding-top: 40px;
background-color: rgba(234, 236, 238, 1);
}
.page-data {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
width: 960px;
gap: 80px;
}
.page-data-item {
display: flex;
flex-direction: column;
align-items: center;
}
.page-data-item-num {
font-size: 24px;
font-weight: 600;
color: var(--base-color);
}
.page-data-item-desc {
font-size: 12px;
color: rgba(95, 101, 108, 1);
}
.page-content {
margin-top: 20px;
width: 100%;
/* padding: 0px 20px; */
}
.content-chart-wrapper {
height: 550px;
}
.custom-container-header-left {
display: flex;
align-items: center;
gap: 8px;
padding-left: 20px;
padding-bottom: 5px;
/* border-bottom: 1px solid rgba(234, 236, 238, 1); */
}
.custom-container-title {
font-size: 16px;
font-weight: 600;
color: var(--base-color);
}
.custom-container-count {
text-align: center;
width: 24px;
height: 16px;
border-radius: 100px;
font-size: 12px;
background-color: rgba(255, 77, 79, 1);
color: #fff;
}
.custom-container-icon {
height: 18px;
width: 18px;
}
.content-list-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.content-list {
height: 40px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.content-list-row {
height: 60px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.content-list-title {
width: 80%;
font-size: 16px;
font-weight: 400;
color: rgba(59, 65, 75, 1);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.content-list-time {
font-size: 14px;
color: rgba(132, 136, 142, 1);
}
.content-list-footer {
width: 100%;
margin-top: 50px;
}
.icon-mark {
height: 12px;
width: 12px;
margin-right: 5px;
margin-left: 8px;
}
.content-list-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding: 10px;
margin-bottom: 10px;
border-radius: 4px;
/* box-shadow: 0 2px 8px rgba(60, 87, 126, 0.2); */
box-shadow: 0 0 15px 0 rgba(60, 87, 126, 0.2);
}
.content-list-item-money {
font-size: 20px;
font-weight: 700;
color: rgba(10, 87, 166, 1);
margin-left: 50px;
}
.content-card-title-text {
color: rgba(10, 87, 166, 1);
}
.content-card-desc {
font-size: 14px;
font-weight: 400;
color: rgba(132, 136, 142, 1);
}
.content-card-title-text-2 {
display: flex;
flex-direction: column;
gap: 11px;
}
.content-card-tag-box {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.content-card-tag-box-item {
display: flex;
align-items: center;
gap: 6px;
}
.content-card-tag-btn {
margin-left: autp;
}
.content-card-title-tag {
font-size: 12px;
color: rgba(95, 101, 108, 1);
}
</style>
src/views/finance/researchFunding/mock.js 0 → 100644
浏览文件 @ ea988bc3
export const treeData = {
name: "美国总统与国会",
children: [
{
name: "白宫科技政策办公室(OSTP)",
children: [
{
name: "国家科学技术委员会"
// children: [
// {
// name: "AgglomerativeCluster",
// value: 3938
// },
// {
// name: "CommunityStructure",
// value: 3812
// },
// {
// name: "HierarchicalCluster",
// value: 6714
// },
// {
// name: "MergeEdge",
// value: 743
// }
// ]
},
{
name: "总统科技顾问委员会"
// children: [
// {
// name: "BetweennessCentrality",
// value: 3534
// },
// {
// name: "LinkDistance",
// value: 5731
// },
// {
// name: "MaxFlowMinCut",
// value: 7840
// },
// {
// name: "ShortestPaths",
// value: 5914
// },
// {
// name: "SpanningTree",
// value: 3416
// }
// ]
}
// {
// name: "optimization",
// children: [
// {
// name: "AspectRatioBanker",
// value: 7074
// }
// ]
// }
]
},
{
name: "联邦资助机构",
children: [
{
name: "国防部(DOD)",
value: 17010
},
{
name: "国立卫生研究院(NIH)",
value: 5842
},
{
name: "国家科学基金会(NSF)"
// children: [
// {
// name: "ArrayInterpolator",
// value: 1983
// },
// {
// name: "ColorInterpolator",
// value: 2047
// },
// {
// name: "DateInterpolator",
// value: 1375
// },
// {
// name: "Interpolator",
// value: 8746
// },
// {
// name: "MatrixInterpolator",
// value: 2202
// },
// {
// name: "NumberInterpolator",
// value: 1382
// },
// {
// name: "ObjectInterpolator",
// value: 1629
// },
// {
// name: "PointInterpolator",
// value: 1675
// },
// {
// name: "RectangleInterpolator",
// value: 2042
// }
// ]
},
{
name: "能源部(DOE)",
value: 1041
},
{
name: "航空航天局(NASA)",
value: 5176
},
{
name: "农业部(USDA)",
value: 449
}
// {
// name: "Scheduler",
// value: 5593
// },
// {
// name: "Sequence",
// value: 5534
// },
// {
// name: "Transition",
// value: 9201
// },
// {
// name: "Transitioner",
// value: 19975
// },
// {
// name: "TransitionEvent",
// value: 1116
// },
// {
// name: "Tween",
// value: 6006
// }
]
}
]
};
src/views/finance/ruleDetail/content/survey.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<el-row :gutter="20">
<el-col :span="13">
<custom-container title="FCC简介">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 8px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button>
</div>
</template> -->
<!-- 中间内容自定义 -->
<template #default>
<div class="content-card">
<el-image class="content-img" :src="BISlogo" fit="fill" />
<div class="content-desc">
<div class="content-desc-item">
<div class="content-desc-title">机构名称：</div>
<div class="content-desc-content">美国联邦通信委员会(Federal Communications Commission，简称FCC)</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">成立年份：</div>
<div class="content-desc-content">1934年</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">机构职责：</div>
<div class="content-desc-content">监管通信业务，分配无线电频谱，制定通信标准，保护消费者权益</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">机构简介：</div>
<div class="content-desc-content content-desc-content-long">
美国联邦通信委员会(Federal Communications
Commission，简称FCC)，是美国负责监管州际和国际通信的独立政府机构。其管辖范围包括无线电、电视、有线、卫星和电缆等通信方式。
FCC认证是美国对电子产品的强制性认证，主要确保产品的电磁兼容性和无线电频率安全性，防止设备对通信网络造成干扰。
</div>
</div>
</div>
</div>
</template>
</custom-container>
<custom-container title="规则限制时间线">
<!-- 中间内容自定义 -->
<template #default>
<div style="gap: 20px">
<div class="rule-time-line-item">2023年2月 - FCC发布FCC-22-84认证规则更新文件，限制Covered List清单上的设备</div>
<div class="rule-time-line-item">
2025年5月22日 - FCC全票通过新规，禁止被认定对美国国家安全构成威胁的中国实验室参与测试电子设备
</div>
<div class="rule-time-line-item">2025年6月 - 新规具体实施细则公布，明确实验室审查标准</div>
<div class="rule-time-line-item">2025年9月8日 - 部分条款正式生效执行</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="11">
<custom-container title="限制原因与背景">
<template #default>
<div class="content-vertical-card">
<div class="content-vertical-card-title-box">
<img class="content-vertical-card-title-img" src="@/assets/images/icon-air.png" fit="fill" />
<span class="content-vertical-card-title">数据对比</span>
</div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="region" label="地区" width="180" />
<el-table-column prop="num" label="数量" width="180" />
<el-table-column prop="proportion" label="占比" />
</el-table>
<div class="content-vertical-card-declaration">
根据FCC认可数据库显示，FCC声称约75%销往美国的电子产品依赖中国实验室进行测试
</div>
</div>
<div class="content-vertical-card">
<div class="content-vertical-card-title-box">
<img class="content-vertical-card-title-img" src="@/assets/images/icon-compair.png" fit="fill" />
<span class="content-vertical-card-title">数据对比官方理由</span>
</div>
<div class="content-vertical-card-desc-text">FCC以"国家安全"为由，声称：</div>
<div class="content-vertical-card-desc-text">· 部分中国实验室与中国政府、军方或国有企业存在关联</div>
<div class="content-vertical-card-desc-text">· 可能成为"外国对手渗透美国通信基础设施的入口"</div>
<div class="content-vertical-card-desc-text">· 需要防止"不安全设备进入美国市场"</div>
<div class="content-vertical-card-desc-emphasize">
FCC审查后认为，部分获认可的实验室与中国政府存在"深层联系"，包括与国有企业或中国军方相关联的机构
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="16">
<custom-container title="美国主要技术委员会及限制规则">
<template #default>
<div class="content-list-item-box content-list-item-box-2">
<div
class="content-list-item content-card-title-text-2 content-card-title-text-4"
v-for="item in ruleList"
:key="item.title"
>
<div class="content-card-title-text">{{ item.title }}</div>
<div class="content-card-desc">{{ item.desc }}</div>
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="8">
<custom-container title="主要限制条款">
<template #default>
<div class="content-list-item-box content-list-item-box-2">
<div
class="content-list-item content-card-title-text-2 content-card-title-text-5"
v-for="item in limitList"
:key="item.href"
>
<el-link type="primary" underline="always">{{ item.href }}</el-link>
<el-button class="content-list-item-button" v-if="item.link" type="primary">官方链接</el-button>
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
</template>
<script setup>
import { ref } from "vue";
import CustomContainer from "@/components/Container/index.vue";
import BISlogo from "@/assets/images/BISlogo-FCC.png";
import Distribution from "@/assets/images/distribution.png";
// 限制条款
const ruleList = ref([
{
title: '禁止"受限实体"控制的实验室参与认证',
desc: `FCC将不再认可由"受限实体"拥有、控制或指导的测试实验室、认证机构和实验室认可机构。
"受限实体"包括FCC的"受限清单"（Covered List）上的公司，以及美国国防部的"中国军事企业清单"与商务部的"实体清单"上的企业。`
},
{
title: "所有权和控制权的界定",
desc: `任何"受限实体"直接或间接拥有10%或以上股权或投票权的实验室，将被视为"受控"实验室。
实验室必须在30天内向FCC提交声明，证明其不受"受限实体"控制，并报告任何持有5%或以上股权的实体。`
},
{
title: "撤销现有认可",
desc: `FCC将撤销任何被发现由"受限实体"控制的实验室的现有认可。
未能提供准确信息或提供虚假信息的实验室也将失去认可资格。`
},
{
title: "实验室可信度审查",
desc: `覆盖范围：75%的进口电子产品（如IoT设备、智能手机、无线摄像头、智能穿戴等）。
关键标准：实验室需通过FCC"可信度审查"，排除与中国军民融合体系、实体清单（Entity List）或国防部"中国军工企业清单"的关联:。`
}
]);
// 主要限制条款
const limitList = ref([
{
href: "FCC Amendments to Equipment Authorization Program",
link: true
},
{
href: "Federal Register Document (2023-02-06)",
link: false
},
{
href: " FCC Covered List",
link: true
}
]);
// 数据对比
const tableData = ref([
{
region: "中国",
num: "168家",
proportion: 10
},
{
region: "美国",
num: "111家",
proportion: 10
},
{
region: "中国台湾",
num: "114家",
proportion: 10
}
]);
</script>
<style scoped>
.content-card {
display: flex;
align-items: flex-start;
gap: 20px;
}
.content-vertical-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.renwu-card {
display: flex;
align-items: center;
gap: 20px;
width: 379px;
height: 148px;
background-color: rgba(234, 236, 238, 1);
padding-left: 10px;
}
.rule-time-line-item {
font-size: 16px;
font-weight: 400;
height: 20px;
padding-top: 5px;
padding-bottom: 5px;
color: rgba(95, 101, 108, 1);
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.content-img {
width: 154px;
height: 154px;
flex-shrink: 0;
}
.content-img-2 {
width: 128px;
height: 128px;
flex-shrink: 0;
}
.content-distribution-img {
width: 627px;
height: 536px;
}
.content-desc {
display: flex;
flex-direction: column;
gap: 8px;
}
.content-desc-item {
display: flex;
gap: 4px;
}
.content-desc-title {
width: 100px;
flex-shrink: 0;
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
.content-desc-content {
color: rgba(10, 87, 166, 1);
font-size: 16px;
font-weight: 700;
}
.content-desc-content-long {
color: rgba(95, 101, 108, 1);
font-weight: 400;
}
.time-line {
display: flex;
gap: 20px;
align-items: flex-start;
padding-left: 10px;
margin-bottom: 20px;
}
.time-line-title {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.time-line-dot {
width: 10px;
height: 10px;
}
.time-line-title-text {
font-size: 14px;
font-weight: 700;
color: rgba(95, 101, 108, 1);
color: var(--base-color);
}
.time-line-desc-title {
font-size: 16px;
font-weight: 400;
color: var(--base-color);
margin-bottom: 5px;
}
.time-line-desc-text {
font-size: 14px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
}
.time-line-dot {
width: 8px;
height: 8px;
background-color: rgba(10, 87, 166, 1);
border-radius: 50%;
}
.example-card {
border: 1px solid #ebeef5;
border-radius: 6px;
padding: 16px;
margin-bottom: 16px;
background-color: #fafafa;
}
.content-card-title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.content-card-title-text {
font-size: 16px;
font-weight: 700;
color: rgba(10, 18, 30, 1);
margin-right: auto;
}
.content-list-item-box {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.content-list-item-box-2 {
display: flex;
flex-wrap: wrap;
gap: 18px;
justify-content: center;
}
.content-card-title-text-2 {
display: flex;
flex-direction: column;
gap: 11px;
padding: 10px;
padding-left: 14px;
padding-right: 14px;
margin-bottom: 10px;
border-radius: 4px;
/* box-shadow: 0 2px 8px rgba(60, 87, 126, 0.2); */
box-shadow: 0 0 15px 0 rgba(60, 87, 126, 0.2);
}
.content-card-title-text-3 {
max-width: 45%;
gap: 19px;
}
.content-card-title-text-4 {
display: flex;
flex-wrap: wrap;
width: 45%;
gap: 10px;
}
.content-card-title-text-5 {
justify-content: flex-start;
width: 100%;
}
.content-list-item-button {
width: 80px;
height: 25px;
}
.content-card-desc {
font-size: 14px;
color: rgba(132, 136, 142, 1);
}
.content-vertical-card-title-box {
display: flex;
align-items: center;
gap: 8px;
}
.content-vertical-card-title-img {
width: 16px;
height: 13px;
}
.content-vertical-card-title {
font-size: 16px;
font-weight: 700;
color: rgba(95, 101, 108, 1);
}
.content-vertical-card-declaration {
/* width: 100%; */
/* height: 42px; */
line-height: 42px;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 15px;
font-size: 14px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
background-color: rgba(231, 243, 255, 1);
}
.content-vertical-card-desc-text {
padding-left: 10px;
font-size: 16px;
font-weight: 400;
color: rgba(132, 136, 142, 1);
}
.content-vertical-card-desc-emphasize {
line-height: 24px;
font-size: 16px;
font-weight: 700;
color: rgba(10, 87, 166, 1);
}
</style>
src/views/finance/ruleDetail/header.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div class="sanction-container">
<!-- 页面标题区域 -->
<div class="page-header">
<!-- <h1 class="main-title">制裁分析</h1> -->
<div class="bill-info">
<div class="bill-details">
<div class="main-title">FCC新规分析：限制中国实验室参与设备认证</div>
<div class="bill-name-en">全面解析美国联邦通信委员会(FCC)2025年新规对中国检测认证行业的影响</div>
</div>
<div class="date-author">
<div class="date">2025年7月</div>
<div class="author">乔迪·阿灵顿（Jodey Arrington）</div>
</div>
</div>
</div>
<!-- 导航标签区域 -->
<!-- <div class="nav-section">
<div class="tabs">
<div class="tab-item active">制裁概况</div>
<div class="tab-item">深度挖掘</div>
<div class="tab-item">影响分析</div>
</div>
<div class="action-buttons">
<el-button>法案原文</el-button>
<el-button type="primary">分析报告</el-button>
</div>
</div> -->
<!-- 内容区域 -->
<!-- <div class="content-section">
<div class="content-placeholder">
<el-icon><document /></el-icon>
<p>这里是制裁概况的内容区域</p>
<p>请选择上方标签查看不同分析内容</p>
</div>
</div> -->
</div>
</template>
<script setup>
const activeTab = ref("制裁概况");
const setActiveTab = tabName => {
activeTab.value = tabName;
};
</script>
<style scoped>
.sanction-container {
width: 100%;
/* max-width: 1200px; */
background-color: #fff;
/* border-radius: 8px; */
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
box-sizing: border-box;
padding-left: 5%;
padding-right: 5%;
}
.page-header {
padding: 24px;
padding-top: 0;
/* border-bottom: 1px solid #ebeef5; */
}
.main-title {
font-size: 20px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
/* color: var(--base-color); */
margin-bottom: 8px;
}
.bill-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
}
.bill-details {
flex: 1;
}
.bill-name {
font-size: 16px;
color: #606266;
margin-bottom: 4px;
}
.bill-name-en {
font-size: 14px;
color: #909399;
font-style: italic;
}
.date-author {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.date {
font-size: 14px;
color: #606266;
margin-bottom: 4px;
}
.author {
font-size: 14px;
color: #606266;
}
.nav-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
background-color: #f8fafc;
border-bottom: 1px solid #ebeef5;
}
.tabs {
display: flex;
gap: 0;
}
.tab-item {
padding: 12px 24px;
font-size: 14px;
color: #606266;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s;
}
.tab-item.active {
color: #409eff;
border-bottom-color: #409eff;
background-color: rgba(64, 158, 255, 0.1);
}
.tab-item:hover {
color: #409eff;
}
.action-buttons {
display: flex;
gap: 12px;
}
.content-section {
padding: 24px;
min-height: 400px;
}
.content-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
color: #909399;
}
.content-placeholder .el-icon {
font-size: 48px;
margin-bottom: 16px;
color: #dcdfe6;
}
.content-placeholder p {
font-size: 16px;
margin-top: 8px;
}
@media (max-width: 768px) {
.bill-info {
flex-direction: column;
align-items: flex-start;
}
.date-author {
align-items: flex-start;
margin-top: 12px;
}
.nav-section {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.tabs {
width: 100%;
overflow-x: auto;
}
}
</style>
src/views/finance/ruleDetail/index.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div class="page-container">
<Header />
<!-- 导航标签区域 -->
<div class="nav-section">
<div class="tabs">
<div :class="['tab-item', { active: activeTab === '简介概览' }]" @click="setActiveTab('简介概览')">制裁概况</div>
<div :class="['tab-item', { active: activeTab === '深度分析' }]" @click="setActiveTab('深度分析')">深度挖掘</div>
<div :class="['tab-item', { active: activeTab === '影响评估' }]" @click="setActiveTab('影响评估')">影响分析</div>
</div>
<div class="action-buttons">
<el-button>法案原文</el-button>
<el-button type="primary">分析报告</el-button>
</div>
</div>
<!-- 内容区域 -->
<div class="content-section">
<!-- <div class="content-placeholder">
<el-icon><document /></el-icon>
<p>这里是制裁概况的内容区域</p>
<p>请选择上方标签查看不同分析内容</p>
</div> -->
<Survey v-if="activeTab === '简介概览'" />
<!-- <DepthMine v-if="activeTab === '深度挖掘'" />
<ImpactAnalysis v-if="activeTab === '影响分析'" /> -->
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { Search, Plus } from "@element-plus/icons-vue";
import Header from "./header.vue";
import Survey from "./content/survey.vue";
// import DepthMine from "./content/depthMine.vue";
// import ImpactAnalysis from "./content/impactAnalysis.vue";
const activeTab = ref("简介概览");
const setActiveTab = tabName => {
activeTab.value = tabName;
};
</script>
<style scoped>
.page-container {
margin: 0px auto;
background-color: rgba(247, 248, 249, 1);
}
.nav-section {
display: flex;
justify-content: space-between;
align-items: center;
/* padding: 16px 24px; */
padding-left: 6%;
padding-right: 6%;
background-color: #fff;
border-bottom: 1px solid #ebeef5;
}
.tabs {
display: flex;
gap: 0;
}
.tab-item {
padding: 12px 24px;
font-size: 14px;
color: #606266;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s;
}
.tab-item.active {
color: #409eff;
border-bottom-color: #409eff;
background-color: rgba(64, 158, 255, 0.1);
}
.tab-item:hover {
color: #409eff;
}
.action-buttons {
display: flex;
gap: 12px;
}
.content-section {
padding: 24px;
padding-left: 6%;
padding-right: 6%;
min-height: 400px;
}
.content-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
color: #909399;
}
.content-placeholder .el-icon {
font-size: 48px;
margin-bottom: 16px;
color: #dcdfe6;
}
.content-placeholder p {
font-size: 16px;
margin-top: 8px;
}
@media (max-width: 768px) {
.bill-info {
flex-direction: column;
align-items: flex-start;
}
.date-author {
align-items: flex-start;
margin-top: 12px;
}
.nav-section {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.tabs {
width: 100%;
overflow-x: auto;
}
}
</style>
src/views/finance/ruleLimit/index.vue 0 → 100644
浏览文件 @ ea988bc3
<template>
<div class="page-container">
<div style="height: 30px; width: 960px; display: flex; justify-content: flex-start">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item>国家科技安全</el-breadcrumb-item>
<el-breadcrumb-item>中美博弈概览</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }">规则限制</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-input v-model="searchKey" style="max-width: 960px" placeholder="搜索政策关键词" class="input-with-select">
<template #append>
<el-button :icon="Search" size="large" type="primary">搜索</el-button>
</template>
</el-input>
<div class="page-data">
<div class="page-data-item" v-for="item in pageData" :key="item.desc">
<div class="page-data-item-num">
{{ item.num }}
</div>
<div class="page-data-item-desc">
{{ item.desc }}
</div>
</div>
</div>
<div class="page-content">
<el-row :gutter="20">
<el-col :span="16">
<custom-container title="美国对华规则限制动态">
<template #header-left>
<div class="custom-container-header-left">
<img class="custom-container-icon" src="@/assets/images/icon-law.png" alt="" />
<span class="custom-container-title">美国对华规则限制动态</span>
</div>
</template>
<!-- 顶部右侧自定义内容 -->
<template #header-right>
<div style="display: flex; gap: 12px">
<el-button type="primary" link>查看详情 ></el-button>
</div>
</template>
<!-- 中间内容自定义 -->
<template #default>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="date" label="更新日期" width="150" />
<el-table-column prop="org" label="机构/组织" width="150" />
<el-table-column prop="rule" label="规则/措施名称" />
<el-table-column prop="content" show-overflow-tooltip width="180" label="主要内容" />
<el-table-column prop="influence" label="影响领域" />
</el-table>
</template>
</custom-container>
</el-col>
<el-col :span="8">
<custom-container title="风险信号">
<template #header-left>
<div class="custom-container-header-left">
<img class="custom-container-icon" src="@/assets/images/icon-warning.png" alt="" />
<span class="custom-container-title">风险信号</span>
<span class="custom-container-count">5</span>
</div>
</template>
<!-- 顶部右侧自定义内容 -->
<template #header-right>
<div style="display: flex; gap: 12px">
<el-button type="primary" link>更多 ></el-button>
</div>
</template>
<!-- 中间内容自定义 -->
<template #default>
<div class="content-list-card" v-for="item in riskData" :key="item.title">
<el-tag :type="item.danger" size="small">{{ item.importance }}</el-tag>
<div class="content-list">
<div class="content-list-title">{{ item.title }}</div>
<div class="content-list-time">{{ item.date }}</div>
</div>
</div>
<div class="content-list-footer">
<el-button type="primary" size="default" style="width: 100%">
<img class="icon-mark" src="@/assets/images/icon-mark.png" alt="" />
风险处理
</el-button>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<custom-container title="美国成立的排华科技联盟">
<template #default>
<div class="content-list-item content-card-title-text-2" v-for="item in policyBanData" :key="item.title">
<div class="content-card-title-box">
<div class="content-card-title-text">{{ item.title }}</div>
<div class="content-card-title-remmber">{{ item.remember.join("、") }}</div>
</div>
<div class="content-card-desc">{{ item.desc }}</div>
<div class="content-card-tag-box">
<div class="content-card-tag-box-item">
<el-tag :type="tagType[Math.floor(Math.random() * 5)]" v-for="tag in item.tag" :key="tag">{{ tag }}</el-tag>
</div>
<!-- <el-button class="content-card-tag-btn" type="primary" link>查看全文 ></el-button> -->
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="受影响主要中国科技主体">
<template #default>
<div class="content-list-item-box">
<div
class="content-list-item content-card-title-text-2 content-card-title-text-3"
v-for="item in subjectListData"
:key="item.title"
>
<div class="content-card-title-text">{{ item.title }}</div>
<div class="content-card-desc">{{ item.desc }}</div>
<div class="content-card-tag-box">
<div class="content-card-tag-box-item">
<el-tag :type="tagType[Math.floor(Math.random() * 5)]" v-for="tag in item.tag" :key="tag">{{ tag }}</el-tag>
</div>
<!-- <el-button class="content-card-tag-btn" type="primary" link>查看全文 ></el-button> -->
</div>
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<custom-container title="美国主要技术委员会及限制规则">
<template #default>
<div class="content-list-item-box content-list-item-box-2">
<div
class="content-list-item content-card-title-text-2 content-card-title-text-4"
v-for="item in orgAndruleList"
:key="item.title"
>
<div class="content-card-title-text">{{ item.org }}</div>
<div class="content-card-desc">主要对华限制</div>
<div class="content-card-list-item" v-for="(subItem, idx) in item.rules" :key="subItem">
<div class="content-card-list-item-num">{{ idx + 1 }}</div>
<div class="content-card-list--item-desc">{{ subItem }}</div>
</div>
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ArrowRight } from "@element-plus/icons-vue";
import CustomContainer from "@/components/Container/index.vue";
const searchKey = ref("");
const pageData = ref([
{
num: 310,
desc: "生效政策禁令"
},
{
num: 14433,
desc: "受限制实体"
},
{
num: 126,
desc: "受限制领域"
},
{
num: 37,
desc: "本月更新"
}
]);
// 规则限制
const tableData = ref([
{
date: " 2024年5月14日",
org: "美国商务部",
rule: "AI芯片出口新规",
content: "进一步限制向中国出口高端AI芯片",
influence: "人工智能"
},
{
date: "2023年8月",
org: "美国财政部",
rule: "对华投资限制令",
content: "限制美企在华半导体、AI、量子技术领域投资",
influence: "认证体系"
},
{
date: "2023年7月",
org: "FCC",
rule: "设备授权新规",
content: " 限制中国测试实验室参与美国设备认证",
influence: "投资审查"
},
{
date: "2023年5月",
org: "美国商务部",
rule: "实体清单更新",
content: "新增36家中国科技公司至实体清单",
influence: "出口管制"
},
{
date: "2023年3月",
org: "美国国会",
rule: "CHIPS法案实施细则",
content: "限制获得补贴的企业在华投资先进半导体",
influence: "半导体"
},
{
date: " 2022年1月",
org: "美国商务部",
rule: "AI芯片出口新规",
content: "进一步限制向中国出口高端AI芯片",
influence: "人工智能"
}
]);
// tag类型
const tagType = ["primary", "success", "info", "warning", "danger"];
// 限制动态数据
const limitData = ref([
{
date: "2025年9月2日",
importance: "紧急",
tag: ["半导体", "出口管制"],
title: "美国撤销多家芯片企业在华VEU授权",
desc: `美国最终用户审查委员会（ERC）宣布撤销英特尔、SK海力士和三星在中国工厂的"经验证最终用户"（VEU）授权，影响其在华芯片生产。新规定计划于10月2日《联邦公报》出版120天后正式生效:cite[3]:cite[4]。`
},
{
date: "2025年9月2日",
importance: "紧急",
tag: [" 半导体", "晶圆制造"],
title: "台积电南京厂VEU资格被撤销",
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。`
},
{
date: "2025年9月2日",
importance: "紧急",
tag: [" 半导体", "晶圆制造"],
title: "台积电南京厂VEU资格被撤销",
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。`
},
{
date: "2025年9月2日",
importance: "紧急",
tag: [" 报道题", "晶圆制造"],
title: "台积电南京厂VEU资格被撤销",
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。`
},
{
date: "2025年9月2日",
importance: "紧急",
tag: [" 报道题", "晶圆制造"],
title: "台积电南京厂VEU资格被撤销",
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。`
},
{
date: "2025年9月2日",
importance: "紧急",
tag: [" 报道题", "晶圆制造"],
title: "台积电南京厂VEU资格被撤销",
desc: `台积电已收到美国政府通知，其南京工厂的"经验证最终用户"（VEU）资格将于2025年12月31日被撤销。此后，每一批运往南京工厂的受管制设备均需经过美国商务部逐案审批。`
}
]);
// 风险
const riskType = ref(["特别重大", "重大风险", "一般风险"]);
const riskData = ref([
{
date: "一天前",
importance: "特别重大",
danger: "danger",
title: "美国大而美法案落地，总统签署通过"
},
{
date: "两天前",
importance: "重大风险",
danger: "warning",
title: "美大而美法案7月1日以51:50的票数通过..."
},
{
date: "三天前",
importance: "特别重大",
danger: "danger",
title: "首次提出“限制外国敏感实体获取补贴”"
},
{
date: "四天前",
importance: "一般风险",
danger: "success",
title: "将中国企业海外子公司、合资公司纳入受..."
},
{
date: "五天前",
importance: "一般风险",
danger: "success",
title: "H.R.8333《生物安全法案》将华大基因等..."
}
]);
// 政策禁令限制
const policyBanData = ref([
{
title: "芯片四方联盟 (Chip 4)",
desc: `旨在建立半导体供应链安全机制，减少对中国依赖，协调出口管制政策。`,
tag: ["半导体", "供应链"],
remember: ["美国", "日本", "韩国", "台湾"]
},
{
title: "美欧贸易与技术委员会 (TTC)",
desc: `协调美欧在关键技术、数字政策、供应链安全等领域的立场，应对非市场行为。`,
tag: ["技术标准", "供应链"],
remember: ["美国", "欧盟"]
},
{
title: "Quad 关键技术工作组",
desc: `旨在建立半导体供应链安全机制，减少对中国依赖，协调出口管制政策。`,
tag: ["新兴技术", "供应链"],
remember: ["美国", "日本", "印度", "澳大利亚"]
},
{
title: "AUKUS 安全伙伴关系",
desc: `最初聚焦核潜艇技术，现已扩展至网络能力、人工智能、量子技术等高科技领域。`,
tag: ["国防科技", "量子技术"],
remember: ["美国", "英国", "澳大利亚"]
}
]);
// 政策禁令限制
const subjectListData = ref([
{
title: "华为技术有限公司",
desc: `旨在建立半导体供应链安全机制，减少对中国依赖，协调出口管制政策。`,
tag: ["5G", "半导体"]
},
{
title: "中芯国际 (SMIC)",
desc: `被列入实体清单，限制获取先进芯片制造设备，阻碍10nm及以下工艺发展。`,
tag: ["半导体制造", "芯片"]
},
{
title: "海康威视",
desc: `被列入投资黑名单，限制美资投资，限制获取美国AI芯片和技术。`,
tag: ["人工智能", "面部识别"]
},
{
title: "商汤科技",
desc: `最初聚焦核潜艇技术，现已扩展至网络能力、人工智能、量子技术等高科技领域。`,
tag: ["国防科技", "量子技术"]
},
{
title: "长江存储 (YMTC)",
desc: `被列入实体清单，限制获取半导体设备，阻碍NAND闪存技术发展。`,
tag: ["存储芯片", "半导体"]
},
{
title: "大疆创新 (DJI)",
desc: `被列入实体清单，限制技术获取，美国内政部停飞其无人机舰队。`,
tag: ["无人机", "航空科技"]
}
]);
// 政策禁令限制
const orgAndruleList = ref([
{
org: "联邦通信委员会 (FCC)",
rules: [
"《安全与可信通信网络法》禁止使用华为和中兴设备",
"撤销中国电信在美运营授权",
"限制中国测试实验室参与设备认证",
'将多家中国科技公司列入"威胁国家安全"清单'
]
},
{
org: "商务部工业和安全局 (BIS)",
rules: ["实体清单 - 限制技术出口", "军事最终用户清单 (MEU)", "外国直接产品规则 (FDPR)", "半导体制造设备出口管制"]
},
{
org: "外国投资委员会 (CFIUS)",
rules: ["FIRRMA法案扩大审查范围", "限制中国对美关键技术投资", "强制申报特定交易", "针对中国投资者的特别关注"]
},
{
org: "国务院",
rules: ["对中共党员及其直系亲属的签证限制", "STEM专业中国学生签证限制", "中国军民融合战略相关实体限制", "对华技术外交施压"]
}
]);
//
</script>
<style scoped>
.page-container {
display: flex;
flex-direction: column;
align-items: center;
/* height: 100vh; */
margin: 0px auto;
padding: 0px 120px;
padding-top: 40px;
background-color: rgba(234, 236, 238, 1);
}
.page-data {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
width: 960px;
gap: 80px;
}
.page-data-item {
display: flex;
flex-direction: column;
align-items: center;
}
.page-data-item-num {
font-size: 24px;
font-weight: 600;
color: var(--base-color);
}
.page-data-item-desc {
font-size: 12px;
color: rgba(95, 101, 108, 1);
}
.page-content {
margin-top: 20px;
width: 100%;
/* padding: 0px 20px; */
}
.custom-container-header-left {
display: flex;
align-items: center;
gap: 8px;
padding-left: 20px;
padding-bottom: 5px;
/* border-bottom: 1px solid rgba(234, 236, 238, 1); */
}
.custom-container-title {
font-size: 16px;
font-weight: 600;
color: var(--base-color);
}
.custom-container-count {
text-align: center;
width: 24px;
height: 16px;
border-radius: 100px;
font-size: 12px;
background-color: rgba(255, 77, 79, 1);
color: #fff;
}
.custom-container-icon {
height: 18px;
width: 18px;
}
.content-card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 8px;
padding: 12px 20px;
background-color: rgba(247, 248, 249, 1);
border-radius: 8px;
margin-bottom: 14px;
}
.content-card-date {
font-size: 14px;
font-weight: 400;
color: rgba(10, 87, 166, 1);
}
.content-card-title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.content-card-title-text {
font-size: 16px;
font-weight: 700;
color: rgba(10, 18, 30, 1);
margin-right: auto;
}
.content-list-item-box {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.content-list-item-box-2 {
display: flex;
flex-wrap: wrap;
gap: 18px;
justify-content: center;
}
.content-card-title-text-2 {
display: flex;
flex-direction: column;
gap: 11px;
padding: 10px;
padding-left: 14px;
padding-right: 14px;
margin-bottom: 10px;
border-radius: 4px;
/* box-shadow: 0 2px 8px rgba(60, 87, 126, 0.2); */
box-shadow: 0 0 15px 0 rgba(60, 87, 126, 0.2);
}
.content-card-title-text-3 {
max-width: 45%;
gap: 19px;
}
.content-card-title-text-4 {
display: flex;
flex-wrap: wrap;
width: 45%;
gap: 10px;
}
.content-card-list-item {
border-bottom: 1px solid rgba(234, 236, 238, 1);
padding-bottom: 5px;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.content-card-list-item-num {
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: 400;
border-radius: 50%;
background-color: rgba(231, 243, 255, 1);
color: rgba(10, 87, 166, 1);
}
.content-card-title-box {
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
}
.content-card-title-remmber {
font-size: 14px;
font-weight: 400;
color: rgba(132, 136, 142, 1);
}
.content-card-tag-box {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.content-card-tag-box-item {
display: flex;
align-items: center;
gap: 6px;
}
.content-card-tag-btn {
margin-left: autp;
}
.content-card-title-tag {
font-size: 12px;
color: rgba(95, 101, 108, 1);
}
.content-card-desc {
font-size: 12px;
color: rgba(95, 101, 108, 1);
}
.content-list-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.content-list {
height: 40px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.content-list-row {
height: 60px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.content-list-title {
width: 80%;
font-size: 16px;
font-weight: 400;
color: rgba(59, 65, 75, 1);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.content-list-time {
font-size: 14px;
color: rgba(132, 136, 142, 1);
}
.content-list-footer {
width: 100%;
margin-top: 44px;
}
.icon-mark {
height: 12px;
width: 12px;
margin-right: 5px;
margin-left: 8px;
}
.content-card-footer {
display: flex;
width: 100%;
justify-content: center;
margin-top: 30px;
}
</style>
src/views/finance/utils/multiLineChart.js 0 → 100644
浏览文件 @ ea988bc3
import * as echarts from 'echarts'
const getMultiLineChart = (dataX, dataY1, dataY2) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
data: ['提出法案', '通过法案'],
show: false
},
color: ['#1459bb', '#fa8c16'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '提出法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(22, 119, 255, 1)' // 起始颜色
}, {
offset: 1,
color: 'rgba(22, 119, 255, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
{
name: '通过法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 172, 77, 1)' // 起始颜色
}, {
offset: 1,
color: 'rgba(255, 172, 77, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY2
}
]
}
}
export default getMultiLineChart
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论