Skip to content

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

first commit

上级 46bcc87b
显示空白字符变更
内嵌 并排
正在显示 包含 8217 行增加 和 331 行删除
.prettierrc.js 0 → 100644
浏览文件 @ d48cb135
// @see: https://www.prettier.cn
module.exports = {
// 超过最大值换行
printWidth: 130,
// 缩进字节数
tabWidth: 4,
// 使用制表符而不是空格缩进行
useTabs: true,
// 结尾不用分号(true有，false没有)
semi: true,
// 使用单引号(true单双引号，false双引号)
singleQuote: false,
// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
quoteProps: "as-needed",
// 在对象，数组括号与文字之间加空格 "{ foo: bar }"
bracketSpacing: true,
// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
trailingComma: "none",
// 在JSX中使用单引号而不是双引号
jsxSingleQuote: false,
// (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 ,always：不省略括号
arrowParens: "avoid",
// 如果文件顶部已经有一个 doclock，这个选项将新建一行注释，并打上@format标记。
insertPragma: false,
// 指定要使用的解析器，不需要写文件开头的 @prettier
requirePragma: false,
// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
proseWrap: "preserve",
// 在html中空格是否是敏感的 "css" - 遵守CSS显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
htmlWhitespaceSensitivity: "css",
// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
endOfLine: "auto",
// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
rangeStart: 0,
rangeEnd: Infinity,
// Vue文件脚本和样式标签缩进
vueIndentScriptAndStyle: false
};
src/App.vue
浏览文件 @ d48cb135
......@@ -48,6 +48,10 @@
</div>
</nav>
</el-header>
<!-- 面包屑导航 -->
<Breadcrumb />
<el-main class="main-container">
<router-view />
</el-main>
......@@ -56,14 +60,15 @@
</template>
<script setup>
import { Monitor, House, User, Location, Document, Bell, Message, ArrowDown } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { Monitor, House, User, Location, Document, Bell, Message, ArrowDown } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import Breadcrumb from "@/components/BreadCrumb/index.vue";
const router = useRouter()
const router = useRouter();
const handleHomeCommand = (command) => {
router.push(command)
}
const handleHomeCommand = command => {
router.push(command);
};
</script>
<style>
......@@ -72,7 +77,8 @@ const handleHomeCommand = (command) => {
box-sizing: border-box;
}
html, body {
html,
body {
margin: 0;
padding: 0;
width: 100%;
......@@ -80,21 +86,24 @@ html, body {
}
body {
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
<style scoped>
#app {
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
width: 100%;
min-height: 100vh;
height: 100vh;
overflow-y: hidden;
}
/* 确保Element Plus容器组件占满宽度 */
.el-container {
width: 100%;
min-height: 100vh;
/* min-height: 100vh; */
height: 100%;
margin-bottom: 20px;
}
.navbar {
......@@ -154,7 +163,7 @@ body {
.nav-link:hover,
.nav-link.router-link-active {
background-color: #1459BB;
background-color: #1459bb;
color: #fff;
}
......
src/assets/images/logo.svg 0 → 100644
浏览文件 @ d48cb135
<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.0833333" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
</defs>
</svg>
src/assets/images/suotou.svg 0 → 100644
浏览文件 @ d48cb135
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1672991576281" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="722" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M486.4 609.28h51.2v138.24h-51.2zM371.2 453.12h-51.2v-102.4c0-102.4 81.92-184.32 184.32-184.32s184.32 81.92 184.32 184.32v61.44h-51.2v-61.44c0-74.24-58.88-133.12-133.12-133.12-74.24 0-133.12 58.88-133.12 133.12v102.4z" fill="#333333" p-id="723"></path><path d="M512 593.92m-48.64 0a48.64 48.64 0 1 0 97.28 0 48.64 48.64 0 1 0-97.28 0Z" fill="#333333" p-id="724"></path><path d="M724.48 893.44H299.52c-33.28 0-58.88-25.6-58.88-58.88v-332.8c0-33.28 25.6-58.88 58.88-58.88h422.4c33.28 0 58.88 25.6 58.88 58.88v332.8c2.56 33.28-25.6 58.88-56.32 58.88zM299.52 491.52c-5.12 0-7.68 2.56-7.68 7.68v332.8c0 5.12 2.56 7.68 7.68 7.68h422.4c5.12 0 7.68-2.56 7.68-7.68v-332.8c0-5.12-2.56-7.68-7.68-7.68H299.52z" fill="#333333" p-id="725"></path></svg>
\ No newline at end of file
src/common/constant.js 0 → 100644
浏览文件 @ d48cb135
export const TAGTYPE = ["primary", "success", "warning", "danger", "info"];
src/components/BreadCrumb/index.vue 0 → 100644
浏览文件 @ d48cb135
<template>
<div class="breadcrumb-container">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item
v-for="(item, index) in breadcrumbList"
:key="index"
:to="index < breadcrumbList.length - 1 ? { path: item.path } : undefined"
>
<span :class="{ 'last-item': index === breadcrumbList.length - 1, 'breadcrumb-link': true }">
{{ item.meta.title }}
</span>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
// 生成面包屑数据
const breadcrumbList = computed(() => {
const matched = route.matched.filter(item => item.meta && item.meta.title);
// 确保首页始终在第一位
const first = matched[0];
if (!first || first.path !== "/") {
matched.unshift({
path: "/",
meta: { title: "首页" }
});
}
return matched;
});
</script>
<style scoped>
.breadcrumb-container {
height: 64px;
padding: 12px 20px;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: #f5f7fa;
border-bottom: 1px solid #e4e7ed;
background-image: url("../../assets/images/title-bgc.png");
}
.last-item {
color: #fff;
font-size: 20px;
font-weight: 700;
}
.breadcrumb-link {
color: #fff;
font-size: 20px;
font-weight: 700;
}
:deep(.el-breadcrumb) {
font-size: 20px;
}
:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
color: #fff;
font-size: 20px;
font-weight: 700;
}
:deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
color: #fff;
font-size: 20px;
font-weight: 700;
}
</style>
src/components/Chart/index.vue 0 → 100644
浏览文件 @ d48cb135
<template>
<div ref="chartRef" :style="{ width, height }"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from "vue";
import * as echarts from "echarts";
// 定义组件props
const props = defineProps({
// 图表配置项
option: {
type: Object,
required: true
},
// 图表宽度
width: {
type: String,
default: "100%"
},
// 图表高度
height: {
type: String,
default: "400px"
},
// 图表主题
theme: {
type: String,
default: ""
},
// 是否显示加载动画
loading: {
type: Boolean,
default: false
},
// 自动调整大小
autoresize: {
type: Boolean,
default: true
}
});
// 定义可触发的事件
const emit = defineEmits(["chart-click", "chart-ready"]);
// 图表实例和容器引用
const chartRef = ref(null);
let chartInstance = null;
// 初始化图表
const initChart = () => {
if (!chartRef.value) return;
// 销毁现有实例
if (chartInstance) {
chartInstance.dispose();
}
// 创建新实例
chartInstance = echarts.init(chartRef.value, props.theme);
// 设置配置项
chartInstance.setOption(props.option);
// 绑定事件
chartInstance.on("click", params => {
emit("chart-click", params);
});
// 图表准备就绪
emit("chart-ready", chartInstance);
// 处理加载状态
if (props.loading) {
chartInstance.showLoading();
} else {
chartInstance.hideLoading();
}
};
// 调整图表大小
const resizeChart = () => {
if (chartInstance) {
chartInstance.resize();
}
};
// 监听选项变化
watch(
() => props.option,
newOption => {
if (chartInstance) {
chartInstance.setOption(newOption);
}
},
{ deep: true }
);
// 监听加载状态变化
watch(
() => props.loading,
loading => {
if (chartInstance) {
if (loading) {
chartInstance.showLoading();
} else {
chartInstance.hideLoading();
}
}
}
);
// 组件挂载
onMounted(() => {
nextTick(() => {
initChart();
// 如果启用自动调整大小，监听窗口变化
if (props.autoresize) {
window.addEventListener("resize", resizeChart);
}
});
});
// 组件卸载
onUnmounted(() => {
if (chartInstance) {
chartInstance.dispose();
chartInstance = null;
}
if (props.autoresize) {
window.removeEventListener("resize", resizeChart);
}
});
// 暴露方法给父组件
defineExpose({
getInstance: () => chartInstance,
resize: resizeChart
});
</script>
src/components/Container/index.vue 0 → 100644
浏览文件 @ d48cb135
<template>
<div class="custom-container" :style="{ height: height ? height : 'auto' }">
<!-- 顶部区域 -->
<div class="header-top">
<slot name="header-top"></slot>
</div>
<div class="container-header">
<div class="header-left">
<slot name="header-left">
<!-- <div class="blue-title-block"></div> -->
<el-image :src="titleIcon" class="header-icon" fit="contain" />
<div :class="headerTitleClasses">{{ title }}</div>
</slot>
</div>
<div class="header-right">
<slot name="header-right"></slot>
<!-- <img class="pushpin" src="@/assets/images/icon-pushpin.png" alt="" /> -->
</div>
</div>
<!-- 内容区域 -->
<div class="container-content">
<slot>
<div class="content-placeholder">
<el-icon><Document /></el-icon>
<div>这里是内容区域</div>
</div>
</slot>
</div>
<!-- 底部区域 -->
<div class="container-footer">
<slot name="footer">
<!-- <el-button>默认按钮</el-button> -->
</slot>
</div>
</div>
</template>
<script setup>
import { ref, computed } from "vue";
import { Document } from "@element-plus/icons-vue";
const props = defineProps({
title: {
type: String,
default: "容器标题"
},
height: {
type: String,
default: ""
},
titleIcon: {
type: String,
default: ""
},
titleType: {
type: String,
default: ""
}
});
const headerTitleClasses = computed(() => [
"header-title",
{
[`header-title-${props.titleType}`]: props.titleType
}
]);
</script>
<style scoped lang="scss">
.custom-container {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(60, 87, 126, 0.2);
overflow: hidden;
width: 100%;
margin-bottom: 15px;
position: relative;
}
.container-header {
display: flex;
justify-content: space-between;
align-items: center;
// padding: 10px 16px;
height: 48px;
padding: 0 16px;
border-bottom: 1px solid #ebeef5;
/* background-color: #f8fafc; */
padding-left: 0;
}
.header-left {
display: flex;
align-items: center;
padding-left: 14px;
}
.header-icon {
width: 20px;
height: 20px;
margin-right: 14px;
}
.blue-title-block {
width: 8px;
height: 16px;
background-color: var(--base-color);
/* border-radius: 3px; */
margin-right: 14px;
}
.header-title {
font-size: $base-font-size;
font-weight: 700;
/* color: rgba(10, 87, 166, 1); */
/* color: var(--base-color); */
color: $base-color;
line-height: 48px;
padding: 0 12px;
}
.header-title-primary {
background: $base-color;
color: white;
}
.header-title-danger {
background: red;
color: white;
}
.header-right {
display: flex;
align-items: center;
gap: 12px;
}
.pushpin {
width: 28px;
height: 28px;
}
.container-content {
padding: 24px;
/* min-height: 200px; */
padding-top: 10px;
height: 80%;
}
.content-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #909399;
font-size: 16px;
}
.content-placeholder .el-icon {
font-size: 48px;
margin-bottom: 16px;
color: #dcdfe6;
}
.container-footer {
/* padding: 16px 24px; */
background-color: #f8fafc;
/* border-top: 1px solid #ebeef5; */
display: flex;
justify-content: flex-end;
gap: 12px;
}
</style>
src/components/RiTable/example.vue 0 → 100644
浏览文件 @ d48cb135
<template>
<IntegratedTable
:columns="columns"
:data="tableData"
:pagination="pagination"
@page-change="handlePageChange"
@size-change="handleSizeChange"
>
<template #header>
<div class="table-header">
<div class="table-title">自定义标题</div>
<div class="table-actions">
<el-button type="primary" size="small">新增</el-button>
</div>
</div>
</template>
</IntegratedTable>
</template>
<script setup>
import IntegratedTable from './index.vue'
const columns = [
{
prop: 'name',
label: '姓名',
width: '150px'
},
{
prop: 'age',
label: '年龄',
width: '100px'
},
{
prop: 'address',
label: '地址',
width: '200px'
}
]
const tableData = [
{
name: '张三',
age: 25,
address: '北京市海淀区'
},
{
name: '李四',
age: 30,
address: '上海市浦东新区'
},
{
name: '王五',
age: 28,
address: '广州市天河区'
}
]
const pagination = {
total: 100,
currentPage: 1,
pageSize: 10
}
const handlePageChange = (page) => {
pagination.currentPage = page
}
const handleSizeChange = (size) => {
pagination.pageSize = size
}
</script>
src/components/RiTable/index.vue 0 → 100644
浏览文件 @ d48cb135
<template>
<div class="table-with-pagination">
<slot name="header" v-if="showHeader">
<div class="table-header">
<div class="table-title">数据列表</div>
</div>
</slot>
<div class="table-content">
<el-table :data="data" stripe style="width: 100%">
<el-table-column
v-for="col in columns"
:key="col.prop"
:prop="col.prop"
:label="col.label"
:width="col.width"
:align="col.align || 'left'"
>
<template #default="scope" v-if="col.formatter">
{{ col.formatter(scope.row[col.prop], scope.row) }}
</template>
</el-table-column>
</el-table>
</div>
<div class="integrated-pagination" v-if="pagination.total > 0">
<div class="pagination-info">
共 {{ pagination.total }} 条记录，第 {{ pagination.currentPage }} 页 / 共 {{ totalPages }} 页
</div>
<div class="custom-pagination">
<div class="page-size-selector">
<span>每页</span>
<el-select
:model-value="pagination.pageSize"
@update:model-value="handleSizeChange"
size="small"
style="width: 90px;"
>
<el-option label="10条" :value="10"></el-option>
<el-option label="20条" :value="20"></el-option>
<el-option label="50条" :value="50"></el-option>
<el-option label="100条" :value="100"></el-option>
</el-select>
</div>
<div class="page-jumper">
<span>跳至</span>
<el-input
v-model="jumpPage"
placeholder="页码"
size="small"
class="page-input"
@keyup.enter="jumpToPage"
></el-input>
<span>页</span>
<el-button size="small" @click="jumpToPage">确定</el-button>
</div>
<div class="page-buttons">
<button
class="page-btn"
:class="{ disabled: pagination.currentPage === 1 }"
@click="handlePageChange(pagination.currentPage - 1)"
>
上一页
</button>
<template v-for="page in totalPages" :key="page">
<button
v-if="
page === 1 ||
page === totalPages ||
(page >= pagination.currentPage - 2 && page <= pagination.currentPage + 2)
"
class="page-btn"
:class="{ active: page === pagination.currentPage }"
@click="handlePageChange(page)"
>
{{ page }}
</button>
<span
v-else-if="
(page === pagination.currentPage - 3 && pagination.currentPage > 4) ||
(page === pagination.currentPage + 3 && pagination.currentPage < totalPages - 3)
"
class="page-btn disabled"
>
...
</span>
</template>
<button
class="page-btn"
:class="{ disabled: pagination.currentPage === totalPages }"
@click="handlePageChange(pagination.currentPage + 1)"
>
下一页
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { computed, ref } from 'vue'
import { ElTable, ElTableColumn, ElButton, ElSelect, ElOption, ElInput } from 'element-plus'
export default {
name: 'IntegratedTable',
components: {
ElTable,
ElTableColumn,
ElButton,
ElSelect,
ElOption,
ElInput
},
props: {
columns: {
type: Array,
required: true
},
data: {
type: Array,
required: true
},
pagination: {
type: Object,
default: () => ({
currentPage: 1,
pageSize: 10,
total: 0
})
},
showHeader: {
type: Boolean,
default: true
}
},
emits: ['page-change', 'size-change'],
setup(props, { emit }) {
// 计算总页数
const totalPages = computed(() => {
return Math.ceil(props.pagination.total / props.pagination.pageSize)
})
// 处理页码变化
const handlePageChange = (page) => {
if (page < 1 || page > totalPages.value) return
emit('page-change', page)
}
// 处理每页大小变化
const handleSizeChange = (size) => {
emit('size-change', parseInt(size))
}
// 跳转到指定页
const jumpToPage = () => {
const page = parseInt(jumpPage.value)
if (page && page >= 1 && page <= totalPages.value) {
handlePageChange(page)
}
jumpPage.value = ''
}
const jumpPage = ref('')
return {
totalPages,
handlePageChange,
handleSizeChange,
jumpToPage,
jumpPage
}
}
}
</script>
<style scoped>
.table-with-pagination {
background: white;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.table-header {
padding: 16px 20px;
background: #f8f9fa;
border-bottom: 1px solid #ebeef5;
display: flex;
justify-content: space-between;
align-items: center;
}
.table-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
.table-content {
padding: 0 20px;
}
.integrated-pagination {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
background: #f8f9fa;
border-top: 1px solid #ebeef5;
}
.pagination-info {
font-size: 14px;
color: #606266;
}
.custom-pagination {
display: flex;
align-items: center;
gap: 10px;
}
.page-size-selector {
display: flex;
align-items: center;
gap: 8px;
}
.page-jumper {
display: flex;
align-items: center;
gap: 8px;
}
.page-input {
width: 60px;
}
.page-buttons {
display: flex;
gap: 5px;
}
.page-btn {
min-width: 32px;
height: 32px;
padding: 0 8px;
border: 1px solid #dcdfe6;
background: white;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.page-btn:hover {
background: #f5f7fa;
}
.page-btn.active {
background: #409eff;
color: white;
border-color: #409eff;
}
.page-btn.disabled {
color: #c0c4cc;
cursor: not-allowed;
background: #f5f7fa;
}
@media (max-width: 768px) {
.integrated-pagination {
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
.table-header {
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
}
</style>
src/hooks/useAuthButtons.js 0 → 100644
浏览文件 @ d48cb135
import { AuthStore } from "@/stores/modules/auth";
/**
* @description 页面按钮权限
* */
export const useAuthButtons = () => {
const authStore = AuthStore();
const authButtons = authStore.authButtonListGet || [];
let currentPageAuthButton = {};
authButtons.authButton.forEach(item => (currentPageAuthButton[item] = true));
return currentPageAuthButton;
};
src/hooks/useEcharts.js 0 → 100644
浏览文件 @ d48cb135
import { onActivated, onDeactivated, onBeforeUnmount } from "vue";
// import echarts from "@/plugins/echarts";
export const useEcharts = (myChart, options) => {
if (options && typeof options === "object") {
myChart.setOption(options);
}
const echartsResize = () => {
myChart && myChart.resize();
};
window.addEventListener("resize", echartsResize);
onActivated(() => {
window.addEventListener("resize", echartsResize);
});
onDeactivated(() => {
window.removeEventListener("resize", echartsResize);
});
onBeforeUnmount(() => {
window.removeEventListener("resize", echartsResize);
});
};
src/hooks/useTheme.js 0 → 100644
浏览文件 @ d48cb135
import { computed, onBeforeMount } from "vue";
import { getLightColor, getDarkColor } from "@/utils/tool";
import { GlobalStore } from "@/stores";
import { DEFAULT_PRIMARY } from "@/config/config";
import { ElMessage } from "element-plus";
import { setCssVar } from "@/utils/css";
export const useTheme = () => {
const globalStore = GlobalStore();
const themeConfig = computed(() => globalStore.themeConfig);
// 修改主题颜色
const changePrimary = val => {
if (!val) {
val = DEFAULT_PRIMARY;
ElMessage({ type: "success", message: `主题颜色已重置为 ${DEFAULT_PRIMARY}` });
}
globalStore.setThemeConfig({ ...themeConfig.value, primary: val });
document.documentElement.style.setProperty("--el-color-primary", themeConfig.value.primary);
document.documentElement.style.setProperty(
"--el-color-primary-dark-2",
themeConfig.value.isDark
? `${getLightColor(themeConfig.value.primary, 0.2)}`
: `${getDarkColor(themeConfig.value.primary, 0.3)}`
);
// 颜色加深或变浅
for (let i = 1; i <= 9; i++) {
document.documentElement.style.setProperty(
`--el-color-primary-light-${i}`,
themeConfig.value.isDark
? `${getDarkColor(themeConfig.value.primary, i / 10)}`
: `${getLightColor(themeConfig.value.primary, i / 10)}`
);
}
};
// 切换黑夜模式
const switchDark = () => {
const body = document.documentElement;
if (themeConfig.value.isDark) body.setAttribute("class", "dark");
else body.setAttribute("class", "");
changePrimary(themeConfig.value.primary);
};
onBeforeMount(() => {
changePrimary(themeConfig.value.primary);
});
// 初始化 theme 配置
const initTheme = () => {
switchDark();
changePrimary(themeConfig.value.primary);
setCssVar("--vda-theme-x", `${0}px`)
setCssVar("--vda-theme-y", `${0}px`)
setCssVar("--vda-theme-r", `${1372}px`)
const handler = () => {}
document.startViewTransition ? document.startViewTransition() : handler()
};
return {
changePrimary,
switchDark,
initTheme,
};
};
src/main.js
浏览文件 @ d48cb135
......@@ -6,6 +6,7 @@ import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import CardTitle from './components/CardTitle.vue'
import { withFallbackImage } from './utils'
// import './styles/var.scss'
const app = createApp(App)
......
src/plugins/echarts.js 0 → 100644
浏览文件 @ d48cb135
import * as echarts from "echarts/core";
import {
BarChart,
LineChart,
PieChart,
MapChart,
PictorialBarChart,
RadarChart,
ScatterChart,
LinesChart,
GraphChart
} from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
GridComponent,
PolarComponent,
AriaComponent,
ParallelComponent,
LegendComponent,
RadarComponent,
ToolboxComponent,
DataZoomComponent,
VisualMapComponent,
TimelineComponent,
CalendarComponent,
GraphicComponent
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
// 注册必须的组件
echarts.use([
LegendComponent,
TitleComponent,
TooltipComponent,
GridComponent,
PolarComponent,
AriaComponent,
ParallelComponent,
BarChart,
LineChart,
PieChart,
MapChart,
RadarChart,
PictorialBarChart,
RadarComponent,
ToolboxComponent,
DataZoomComponent,
VisualMapComponent,
TimelineComponent,
CalendarComponent,
GraphicComponent,
ScatterChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
LinesChart,
GraphChart
]);
// 导出
export default echarts;
src/plugins/element-icon.js 0 → 100644
浏览文件 @ d48cb135
import * as components from "@element-plus/icons-vue";
export default {
install: app => {
for (const key in components) {
const componentConfig = components[key];
app.component(componentConfig.name, componentConfig);
}
}
};
src/public/constant.js 0 → 100644
浏览文件 @ d48cb135
export const TAGTYPE = ["primary", "success", "warning", "danger", "info"];
src/router/index.js
浏览文件 @ d48cb135
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import ThinkTankDetail from '@/views/ThinkTankDetail/index.vue'
import ReportDetail from '@/views/ReportDetail/index.vue'
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";
import ThinkTankDetail from "@/views/ThinkTankDetail/index.vue";
import ReportDetail from "@/views/ReportDetail/index.vue";
// 法案相关组件
import BillHome from '@/views/billHome/index.vue'
import BillLayoutContainer from '@/views/billLayout/index.vue'
import BillLayout from '@/views/bill/index.vue'
import BillIntroduction from '@/views/bill/introdoction/index.vue'
import BillBackground from '@/views/bill/background/index.vue'
import BillTemplate from '@/views/bill/template/index.vue'
import BillHome from "@/views/billHome/index.vue";
import BillLayoutContainer from "@/views/billLayout/index.vue";
import BillLayout from "@/views/bill/index.vue";
import BillIntroduction from "@/views/bill/introdoction/index.vue";
import BillBackground from "@/views/bill/background/index.vue";
import BillTemplate from "@/views/bill/template/index.vue";
// 深度挖掘相关组件
import DeepDigLayout from '@/views/deepDig/index.vue'
import DeepDigProcessOverview from '@/views/deepDig/processOverview/index.vue'
import DeepDigProcessAnalysis from '@/views/deepDig/processAnalysis/index.vue'
import DeepDigProgressOverview from '@/views/deepDig/progressAnalysis/index.vue'
import DeepDigLayout from "@/views/deepDig/index.vue";
import DeepDigProcessOverview from "@/views/deepDig/processOverview/index.vue";
import DeepDigProcessAnalysis from "@/views/deepDig/processAnalysis/index.vue";
import DeepDigProgressOverview from "@/views/deepDig/progressAnalysis/index.vue";
// 影响分析相关组件
import InfluenceLayout from '@/views/influence/index.vue'
import InfluenceIndustry from '@/views/influence/industry/index.vue'
import InfluenceScientificResearch from '@/views/influence/scientificResearch/index.vue'
import InfluenceLayout from "@/views/influence/index.vue";
import InfluenceIndustry from "@/views/influence/industry/index.vue";
import InfluenceScientificResearch from "@/views/influence/scientificResearch/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 DecreeLayoutContainer from '@/views/decree/decreeLayout/index.vue'
import OverviewLayout from '@/views/decree/decreeLayout/overview/index.vue'
import DecreeIntroduction from '@/views/decree/decreeLayout/overview/introduction/index.vue'
import DecreeBackground from '@/views/decree/decreeLayout/overview/background/index.vue'
import DecreeDeepDig from '@/views/decree/decreeLayout/deepdig/index.vue'
import Decree from "@/views/decree/decreeHome/index.vue";
import DecreeLayoutContainer from "@/views/decree/decreeLayout/index.vue";
import OverviewLayout from "@/views/decree/decreeLayout/overview/index.vue";
import DecreeIntroduction from "@/views/decree/decreeLayout/overview/introduction/index.vue";
import DecreeBackground from "@/views/decree/decreeLayout/overview/background/index.vue";
import DecreeDeepDig from "@/views/decree/decreeLayout/deepdig/index.vue";
// 市场准入限制
import MarketAccessRestrictions from '@/views/marketAccessRestrictions/marketAccessHome/index.vue'
import MarketAccessLayout from '@/views/marketAccessRestrictions/marketAccessLayout/index.vue'
import MarketAccessOverview from '@/views/marketAccessRestrictions/marketAccessLayout/overview/index.vue'
import MarketAccessCase from '@/views/marketAccessRestrictions/marketAccessLayout/case/index.vue'
import MarketAccessRestrictions from "@/views/marketAccessRestrictions/marketAccessHome/index.vue";
import MarketAccessLayout from "@/views/marketAccessRestrictions/marketAccessLayout/index.vue";
import MarketAccessOverview from "@/views/marketAccessRestrictions/marketAccessLayout/overview/index.vue";
import MarketAccessCase from "@/views/marketAccessRestrictions/marketAccessLayout/case/index.vue";
const routes = [
// 智库系统的主要路由
{
path: '/',
name: 'Home',
path: "/",
name: "Home",
component: Home,
meta: {
title: '首页'
},
title: "首页"
}
},
{
path: '/about',
name: 'About',
path: "/about",
name: "About",
component: About,
meta: {
title: '关于我们'
title: "关于我们"
}
},
{
path: '/think-tank/:id',
name: 'ThinkTankDetail',
path: "/think-tank/:id",
name: "ThinkTankDetail",
component: ThinkTankDetail,
meta: {
title: '智库详情'
title: "智库详情"
}
},
{
path: '/report/:id',
name: 'ReportDetail',
path: "/report/:id",
name: "ReportDetail",
component: ReportDetail,
meta: {
title: '报告详情'
title: "报告详情"
}
},
// 法案系统路由
{
path: '/billHome',
name: 'BillHome',
path: "/billHome",
name: "BillHome",
component: BillHome,
meta: {
title: '法案首页'
},
title: "法案首页"
}
},
{
path: '/billLayout',
name: 'BillLayoutContainer',
path: "/billLayout",
name: "BillLayoutContainer",
component: BillLayoutContainer,
redirect: '/billLayout/bill',
redirect: "/billLayout/bill",
meta: {
title: '法案布局'
title: "法案布局"
},
children: [
// 法案分析路由
{
path: 'bill',
name: 'BillLayout',
path: "bill",
name: "BillLayout",
component: BillLayout,
redirect: '/billLayout/bill/introduction',
redirect: "/billLayout/bill/introduction",
meta: {
title: '法案分析'
title: "法案分析"
},
children: [
{
path: 'introduction',
name: 'BillIntroduction',
path: "introduction",
name: "BillIntroduction",
component: BillIntroduction,
meta: { title: '法案简介' }
meta: { title: "法案简介" }
},
{
path: 'background',
name: 'BillBackground',
path: "background",
name: "BillBackground",
component: BillBackground,
meta: { title: '法案背景' }
meta: { title: "法案背景" }
},
{
path: 'template',
name: 'BillTemplate',
path: "template",
name: "BillTemplate",
component: BillTemplate,
meta: { title: '内容概要' }
meta: { title: "内容概要" }
}
]
},
// 深度挖掘路由
{
path: 'deepDig',
name: 'DeepDigLayout',
path: "deepDig",
name: "DeepDigLayout",
component: DeepDigLayout,
redirect: '/billLayout/deepDig/processOverview',
redirect: "/billLayout/deepDig/processOverview",
meta: {
title: '深度挖掘'
title: "深度挖掘"
},
children: [
{
path: 'processOverview',
name: 'DeepDigProcessOverview',
path: "processOverview",
name: "DeepDigProcessOverview",
component: DeepDigProcessOverview,
meta: { title: '流程概要' }
meta: { title: "流程概要" }
},
{
path: 'processAnalysis',
name: 'DeepDigProcessAnalysis',
path: "processAnalysis",
name: "DeepDigProcessAnalysis",
component: DeepDigProcessAnalysis,
meta: { title: '流程分析' }
meta: { title: "流程分析" }
},
{
path: 'progressAnalysis',
name: 'DeepDigProgressAnalysis',
path: "progressAnalysis",
name: "DeepDigProgressAnalysis",
component: DeepDigProgressOverview,
meta: { title: '进程分析' }
},
meta: { title: "进程分析" }
}
]
},
// 影响分析路由
{
path: 'influence',
name: 'InfluenceLayout',
path: "influence",
name: "InfluenceLayout",
component: InfluenceLayout,
redirect: '/billLayout/influence/industry',
redirect: "/billLayout/influence/industry",
meta: {
title: '影响分析'
title: "影响分析"
},
children: [
{
path: 'industry',
name: 'InfluenceIndustry',
path: "industry",
name: "InfluenceIndustry",
component: InfluenceIndustry,
meta: { title: '对华产业影响' }
meta: { title: "对华产业影响" }
},
{
path: 'scientificResearch',
name: 'InfluenceScientificResearch',
path: "scientificResearch",
name: "InfluenceScientificResearch",
component: InfluenceScientificResearch,
meta: { title: '对华科研影响' }
meta: { title: "对华科研影响" }
}
]
}
......@@ -182,64 +182,64 @@ const routes = [
// 出口管制首页
{
path: '/exportControl',
name: 'ExportControl',
path: "/exportControl",
name: "ExportControl",
component: ExportControl,
meta: {
title: '出口管制'
},
title: "出口管制"
}
},
// 政令首页
{
path: '/decree',
name: 'Decree',
path: "/decree",
name: "Decree",
component: Decree,
meta: {
title: '政令'
},
title: "政令"
}
},
{
path: '/decreeLayout',
name: 'DecreeLayoutContainer',
path: "/decreeLayout",
name: "DecreeLayoutContainer",
component: DecreeLayoutContainer,
redirect: '/decreeLayout/overview',
redirect: "/decreeLayout/overview",
meta: {
title: '政令布局'
title: "政令布局"
},
children: [
{
path: 'overview',
name: 'OverviewLayout',
path: "overview",
name: "OverviewLayout",
component: OverviewLayout,
redirect: '/decreeLayout/overview/introduction',
redirect: "/decreeLayout/overview/introduction",
meta: {
title: '政令概况'
title: "政令概况"
},
children: [
{
path: 'introduction',
name: 'DecreeIntroduction',
path: "introduction",
name: "DecreeIntroduction",
component: DecreeIntroduction,
meta: { title: '政令简介' }
meta: { title: "政令简介" }
},
{
path: 'background',
name: 'DecreeBackground',
path: "background",
name: "DecreeBackground",
component: DecreeBackground,
meta: { title: '政令背景' }
},
meta: { title: "政令背景" }
}
]
},
// 深度挖掘路由
{
path: 'deepDig',
name: 'DeepDig',
path: "deepDig",
name: "DeepDig",
component: DecreeDeepDig,
meta: {
title: '深度挖掘'
},
},
title: "深度挖掘"
}
}
// // 影响分析路由
// {
// path: 'influence',
......@@ -269,54 +269,104 @@ const routes = [
// 市场准入限制首页
{
path: '/marketAccessRestrictions',
name: 'MarketAccessRestrictions',
path: "/marketAccessRestrictions",
name: "MarketAccessRestrictions",
component: MarketAccessRestrictions,
meta: {
title: '市场准入限制'
},
title: "市场准入限制"
}
},
{
path: '/marketAccessLayout',
name: 'MarketAccessLayout',
path: "/marketAccessLayout",
name: "MarketAccessLayout",
component: MarketAccessLayout,
redirect: '/marketAccessLayout/overview',
redirect: "/marketAccessLayout/overview",
meta: {
title: '市场准入限制布局'
title: "市场准入限制布局"
},
children: [
{
path: 'overview',
name: 'MarketAccessOverview',
path: "overview",
name: "MarketAccessOverview",
component: MarketAccessOverview,
meta: {
title: '调查概况'
},
title: "调查概况"
}
},
{
path: 'case',
name: 'MarketAccessCase',
path: "case",
name: "MarketAccessCase",
component: MarketAccessCase,
meta: {
title: '调查案件'
},
title: "调查案件"
}
}
]
},
]
,
// 转移过来的页面
{
path: "/analysis",
name: "analysis",
component: () => import("@/views/analysis/index.vue"),
meta: {
title: "分析页"
}
},
{
path: "/infoplatform",
name: "infoplatform",
component: () => import("@/views/infoPlatform/index.vue"),
meta: {
title: "信息平台"
}
},
{
path: "/rulelimit",
name: "rulelimit",
component: () => import("@/views/ruleLimit/index.vue"),
meta: {
title: "规则限制"
}
},
]
{
path: "/ruledetail",
name: "ruledetail",
component: () => import("@/views/ruleDetail/index.vue"),
meta: {
title: "规则详情"
}
},
{
path: "/researchfunding",
name: "researchfunding",
component: () => import("@/views/researchFunding/index.vue"),
meta: {
title: "科研资助"
}
},
{
path: "/decree",
name: "decree",
component: () => import("@/views/decree/index.vue"),
meta: {
title: "政令信息"
}
}
];
const router = createRouter({
history: createWebHistory(),
routes
})
});
// 路由守卫 - 设置页面标题
router.beforeEach((to, from, next) => {
if (to.meta.title) {
// document.title = `${to.meta.title} - Think Tank`
}
next()
})
next();
});
export default router
\ No newline at end of file
export default router;
src/styles/var.scss 0 → 100644
浏览文件 @ d48cb135
/* 全局 css 变量 */
$primary-color: var(--el-color-primary);
$base-color: rgba(10, 87, 166, 1);
$base-font-size: 16px;
// :root {
// --base-color: #{$base-color};
// }
src/views/analysis/content/depthMine.vue 0 → 100644
浏览文件 @ d48cb135
<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/analysis/content/impactAnalysis.vue 0 → 100644
浏览文件 @ d48cb135
<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/analysis/content/survey.vue 0 → 100644
浏览文件 @ d48cb135
<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/analysis/header.vue 0 → 100644
浏览文件 @ d48cb135
<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/analysis/index.vue 0 → 100644
浏览文件 @ d48cb135
<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 {
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: 2%;
padding-right: 2%; */
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/decree/content/depthMine.vue 0 → 100644
浏览文件 @ d48cb135
<template>
<el-row :gutter="20">
<el-col :span="24">
<custom-container title="政令时序及战略里程碑" height="510px">
<!-- 顶部右侧自定义内容 -->
<!-- <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-image :src="TimeLine" alt="" style="width: 100%; height: 306px" />
<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="24">
<custom-container title="相关政令关联分析" height="505px">
<template #default>
<div class="content-box">
<div class="content-tabs">
<div
:class="['content-tabs-item', activeTab === item.id ? 'contetn-tabs-item-active' : '']"
v-for="item in data"
:key="item.id"
@click="tabsClick(item.id)"
>
{{ item.name }}
<el-image :src="IconOpen" :style="{ width: '16px', height: '16px' }"></el-image>
</div>
</div>
<div class="content-tabs-pane">
<div class="content-tabs-pane-left">
<div class="content-tabs-pane-header">
<el-image :src="IconNews" :style="{ width: '20px', height: '20px' }"></el-image>
政令基本信息
</div>
<div class="content-tabs-pane-content">
<div class="content-tabs-pane-content-item">
<span class="content-tabs-pane-content-item-title">政令名称：</span>
<span>{{ currentContent.info.fullName }}</span>
</div>
<div class="content-tabs-pane-content-item">
<span class="content-tabs-pane-content-item-title">英文名称：</span>
<span>{{ currentContent.info.fullNameEn }}</span>
</div>
<div class="content-tabs-pane-content-item">
<span class="content-tabs-pane-content-item-title">相关领域：</span>
<!-- <span>{{ currentContent.info.fullName }}</span> -->
<el-tag v-for="item in currentContent.info.tags" :key="item" type="primary">{{ item }}</el-tag>
</div>
<div class="content-tabs-pane-content-item">
<span class="content-tabs-pane-content-item-title">签署时间：</span>
<span>{{ currentContent.info.time }}</span>
</div>
<div class="content-tabs-pane-content-item">
<span class="content-tabs-pane-content-item-title">签署总统：</span>
<span>{{ currentContent.info.president }}</span>
</div>
<div class="content-tabs-pane-content-item">
<span class="content-tabs-pane-content-item-title">政令编号：</span>
<span>{{ currentContent.info.orderNum }}</span>
</div>
<div class="content-tabs-pane-content-item">
<span class="content-tabs-pane-content-item-title">执行期限：</span>
<span>{{ currentContent.info.period }}</span>
</div>
</div>
</div>
<div class="content-tabs-pane-right">
<div class="content-tabs-pane-header">
<el-image :src="IconNews" :style="{ width: '20px', height: '20px' }"></el-image>
政令主要条款
</div>
<div class="content-tabs-pane-content">
<div class="content-tabs-pane-content-list">
<div class="content-tabs-pane-content-list-item" v-for="(item, index) in clause" :key="item.id">
<span class="content-tabs-pane-content-list-item-index">
{{ (currentPage - 1) * 5 + index + 1 }}
</span>
<span class="content-tabs-pane-content-list-item-content">
{{ item.content }}
</span>
</div>
</div>
</div>
<div class="content-tabs-pane-footer">
<el-pagination
v-model:current-page="currentPage"
:page-size="5"
size="small"
:total="currentContent.clause.length"
background
layout="total, prev, pager, next"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import CustomContainer from "@/components/Container/index.vue";
import { TAGTYPE } from "@/common/constant.js";
import TimeLine from "@/assets/images/time-line.png";
import IconOpen from "@/assets/images/icon-open.png";
import IconNews from "@/assets/images/icon-news.png";
import { data } from "./mock";
const activeTab = ref(11);
const currentContent = ref({});
const clause = ref([]);
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: ["科研院所"]
}
]);
let option = null;
onMounted(() => {
currentContent.value = data.filter(item => item.id === activeTab.value)[0];
clause.value = currentContent.value.clause.slice((currentPage.value - 1) * 5, currentPage.value * 5);
console.log("数据查看 =>", currentContent.value);
// 更新频率
option = {
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
legend: {
show: true,
bottom: -5,
icon: "circle",
itemWidth: 6,
itemHeight: 6,
textStyle: {
color: "#4E5969"
}
},
tooltip: {
show: true,
formatter(params) {
return `总计：${params.value}<br>${params.data.size}`;
}
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: true,
label: {
show: false,
position: "center"
},
data: [
{
value: 37,
name: "中国上市企业"
},
{
value: 4,
name: "科研院所"
}
]
}
]
};
});
const tabsClick = id => {
console.log(id);
activeTab.value = id;
currentContent.value = data.filter(e => e.id === id)[0];
currentPage.value = 1;
clause.value = currentContent.value.clause.slice((currentPage.value - 1) * 5, currentPage.value * 5);
};
const currentPage = ref(1);
const handleCurrentChange = val => {
currentPage.value = val;
clause.value = currentContent.value.clause.slice((val - 1) * 5, val * 5);
console.log(`当前页: ${val}`);
console.log(`当前页-shuju`, clause.value);
};
const handleSizeChange = val => {
console.log(val);
};
</script>
<style scoped>
.content-box {
/* height: 90vh; */
display: flex;
flex-direction: row;
justify-content: flex-start;
border: 1px solid rgba(234, 236, 238, 1);
overflow: hidden;
}
.content-tabs {
height: 100%;
padding-top: 2%;
width: 300px;
border-right: 1px solid rgba(234, 236, 238, 1);
}
.content-tabs-item {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(234, 236, 238, 1);
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
padding-left: 24px;
padding-right: 24px;
height: 36px;
cursor: pointer;
}
.contetn-tabs-item-active {
background-color: rgba(231, 243, 255, 1);
color: rgba(10, 87, 166, 1);
}
.content-tabs-pane {
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
flex: 1;
/* padding-top: 25px; */
padding-left: 20px;
background-color: rgba(246, 250, 255, 1);
}
.content-tabs-pane-left {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
width: 550px;
padding-top: 15px;
gap: 15px;
flex-shrink: 0;
}
.content-tabs-pane-right {
height: 375px;
padding-top: 15px;
padding-left: 20px;
border-left: 1px solid rgba(234, 236, 238, 1);
display: flex;
flex-direction: column;
justify-content: space-between;
padding-right: 15px;
flex-grow: 1;
}
.content-tabs-pane-header {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 700;
color: var(--base-color);
}
.content-tabs-pane-content {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: auto;
}
.content-tabs-pane-content-item {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 700;
color: var(--base-color);
}
.content-tabs-pane-content-item-title {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
.content-tabs-pane-content-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 15px;
}
.content-tabs-pane-content-list-item {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 5px 10px;
gap: 8px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 5px;
}
.content-tabs-pane-content-list-item-index {
height: 24px;
width: 24px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
/* font-weight: 700; */
border-radius: 50%;
color: var(--base-color);
background-color: rgba(231, 243, 255, 1);
}
.content-tabs-pane-content-list-item-content {
font-size: 16px;
font-weight: 400;
color: rgba(10, 18, 30, 1);
}
.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/decree/content/mock.js 0 → 100644
浏览文件 @ d48cb135
export const data = [
{
id: 11,
name: "拜登AI芯片出口管制",
info: {
fullName: "推动美国人工智能技术栈出口",
fullNameEn: "Ending Crime and Disorder on America’s Streets",
tags: ["人工智能", "出口管制", "半导体产业", "税收", "光伏产业"],
time: "2025年7月23日",
president: "唐纳德·约翰·特朗普(Donald John Trump)",
orderNum: "第14320号行政命令 (EO 14320)",
period: "签署后90天内建立机制并开始实施"
},
clause: [
{
id: 1,
content: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
},
{
id: 2,
content: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。'
},
{
id: 3,
content: '指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。'
},
{
id: 4,
content: "要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。"
},
{
id: 5,
content: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。'
},
{
id: 6,
content: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。'
}
]
},
{
id: 22,
name: "特朗普撤销拜登AI规则",
info: {
fullName: "推动美国人工智能技术栈出口",
fullNameEn: "推动美国人工智能技术栈出口",
tags: ["AI", "出口", "管制"],
time: "2025年7月23日",
president: "唐纳德·约翰·特朗普(Donald John Trump)",
orderNum: "第14320号行政命令 (EO 14320)",
period: "签署后90天内建立机制并开始实施"
},
clause: [
{
id: 1,
content: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
},
{
id: 2,
content: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。'
},
{
id: 3,
content: '指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。'
},
{
id: 4,
content: "要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。"
},
{
id: 5,
content: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。'
}
]
},
{
id: 33,
name: "美国AI行动计划",
info: {
fullName: "推动美国人工智能技术栈出口",
fullNameEn: "推动美国人工智能技术栈出口",
tags: ["AI", "出口", "管制"],
time: "2025年7月23日",
president: "唐纳德·约翰·特朗普(Donald John Trump)",
orderNum: "第14320号行政命令 (EO 14320)",
period: "签署后90天内建立机制并开始实施"
},
clause: [
{
id: 1,
content: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
},
{
id: 2,
content: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。'
},
{
id: 3,
content: '指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。'
},
{
id: 4,
content: "要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。"
},
{
id: 5,
content: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。'
}
]
},
{
id: 44,
name: "对中国AI芯片限制",
info: {
fullName: "推动美国人工智能技术栈出口",
fullNameEn: "推动美国人工智能技术栈出口",
tags: ["AI", "出口", "管制"],
time: "2025年7月23日",
president: "唐纳德·约翰·特朗普(Donald John Trump)",
orderNum: "第14320号行政命令 (EO 14320)",
period: "签署后90天内建立机制并开始实施"
},
clause: [
{
id: 1,
content: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
},
{
id: 2,
content: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。'
},
{
id: 3,
content: '指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。'
},
{
id: 4,
content: "要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。"
},
{
id: 5,
content: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。'
}
]
}
];
src/views/decree/content/survey.vue 0 → 100644
浏览文件 @ d48cb135
<template>
<el-row :gutter="20">
<el-col :span="16">
<custom-container title="实体清单发布机构" height="414px">
<!-- 顶部右侧自定义内容 -->
<!-- <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="DecreeInfoImg" fit="fill" />
<div class="content-desc" style="gap: 20px">
<div class="content-desc-item">
<div class="content-desc-title">政令全称：</div>
<div class="content-desc-content">
Further Modifying Reciprocal Tariff Rates to Reflect Ongoing Discussions with the People’s Republic of China
</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> -->
<el-tag type="primary">人工智能</el-tag>
<el-tag type="primary">出口管制</el-tag>
<el-tag type="primary">半导体</el-tag>
<el-tag type="primary">关税</el-tag>
<el-tag type="primary">光伏产业</el-tag>
</div>
<div class="content-desc-item">
<div class="content-desc-title">签署时间：</div>
<div class="content-desc-content">2025年7月23日</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">签署总统：</div>
<div class="content-desc-content">唐纳德·约翰·特朗普(Donald John Trump)</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">证明编号：</div>
<div class="content-desc-content content-desc-content-long">第14320号行政命令 (EO 14320)</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">执行期限：</div>
<div class="content-desc-content content-desc-content-long">签署后90天内建立机制并开始实施</div>
</div>
</div>
</div>
</template>
</custom-container>
<custom-container title="主要指令" height="415px">
<!-- 中间内容自定义 -->
<template #default>
<div class="content-vertical-card content-vertical-card-flex-start">
<div class="content-box">
<div class="content-box-content" v-for="(item, index) in mainInstructions" :key="index">
<span class="content-num">{{ index + 1 }}</span>
<span class="content-desc">{{ item }}</span>
</div>
</div>
<div class="content-box-footer">
<div>共5条指令</div>
<el-pagination size="small" background layout="prev, pager, next" :total="10" page-size="5" />
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="8">
<custom-container title="执行机构" height="845px">
<!-- 中间内容自定义 -->
<template #default>
<div class="content-vertical-card content-vertical-card-flex-start">
<el-space>
<el-button plain type="primary">商务部</el-button>
<el-button>国务院</el-button>
<el-button>科技政策办公室</el-button>
<el-button>国防部</el-button>
</el-space>
<div
style="
display: flex;
justify-content: space-between;
margin-top: 10px;
padding-bottom: 10px;
gap: 5px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
"
>
<el-image class="content-img-small" :src="DecreeOrg" fit="fill" />
<div class="content-desc">
<div class="content-desc-item">
<div class="content-desc-content">美国商务部</div>
<!-- <div class="content-desc-content">
Further Modifying Reciprocal Tariff Rates to Reflect Ongoing Discussions with the People’s Republic of China
</div> -->
</div>
<div class="content-desc-item">
<div class="content-desc-content-long">英文名：</div>
<div class="content-desc-content-long">United States Department of Commerce</div>
</div>
<div class="content-desc-item">
<div class="content-desc-content-long">成立时间：</div>
<div class="content-desc-content-long">1903年2月14日</div>
</div>
<div class="content-desc-item">
<div class="content-desc-content-long">主要职责：</div>
<div class="content-desc-content-long">国际贸易、进出口管制（R-TX-19）</div>
</div>
<div class="content-desc-item">
<div class="content-desc-content-long">总部地址：</div>
<div class="content-desc-content-long">华盛顿宪法大道1401号胡佛大楼</div>
</div>
<div class="content-desc-item">
<div class="content-desc-content-long">部长：</div>
<div class="content-desc-content content-desc-content-long">霍华德·卢特尼克</div>
</div>
<div class="content-desc-item">
<div class="content-desc-content-long">执行期限：</div>
<div class="content-desc-content content-desc-content-long">签署后90天内建立机制并开始实施</div>
</div>
</div>
</div>
<div class="content-time-line-box">
<div class="content-time-line-title">
<img class="time-line-img" src="@/assets/images/decree-date.png" alt="" />
<span class="time-line-title-text">机构动态</span>
</div>
<el-timeline style="max-width: 600px">
<el-timeline-item
placement="top"
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:hollow="activity.hollow"
:timestamp="activity.timestamp"
>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
</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>
</div>
</template>
<!-- 底部自定义内容 -->
<!-- <template #footer>
<el-button>取消</el-button>
<el-button type="primary">保存更改</el-button>
</template> -->
</custom-container>
</el-col>
</el-row>
</template>
<script setup>
import CustomContainer from "@/components/Container/index.vue";
import DecreeInfoImg from "@/assets/images/decree-info.png";
import DecreeOrg from "@/assets/images/decree-org.png";
// 主要指令数据
const mainInstructions = [
"获取美国产物项，以支持中国量子技术；",
"支持2023年2月飞越美国上空的高空气球；",
"获取美国原产的无人机物项供中国军方使用。",
"限制中国对美国商品的进口。",
"限制中国对美国商品的出口。"
];
// 机构动态
const activities = [
{
content: `推动《州责任联邦部署成本法案》,要求拒执行联邦移民法的州政府
支付相关军事部署费用,强化财政约束。`,
timestamp: "20258-07-31",
size: "large",
type: "primary",
hollow: true
},
{
content: `借OBBBA通过势头,在得州巩固军工、能源集团支持,为2026年连任
铺路,同时协调党内资源争夺关键摇摆选区。`,
timestamp: "2025-07-30",
type: "primary",
hollow: true
},
{
content: `众议院预算委员会主席乔迪·阿灵顿(得克萨斯州共和党人)周四上午在辩论时将此法案形容为“美国历史上最大的减税措施”。`,
timestamp: "2025-07-30",
type: "primary",
hollow: true
},
{
content: "特朗普力挺阿灵顿,白宫声明强调法案“美丽且必要”,双方矛盾凸显共和党内 商业资本与传统能源势力裂痕。",
timestamp: "2025-07-27",
type: "primary",
hollow: true
}
];
</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;
}
.content-vertical-card-flex-start {
align-items: flex-start;
}
.content-box {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}
.content-box-content {
width: 95%;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
border: 1px solid rgba(234, 236, 238, 1);
padding: 5px 10px;
height: 48px;
box-sizing: border-box;
}
.content-box-footer {
width: 95%;
display: flex;
justify-content: space-between;
align-items: center;
}
.content-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-box-footer {
display: flex;
justify-content: space-between;
}
.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: 235px;
height: 332px;
flex-shrink: 0;
}
.content-img-small {
width: 140px;
height: 140px;
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%;
}
.content-time-line-box {
margin-bottom: 10px;
}
.content-time-line-title {
display: flex;
align-items: center;
gap: 8px;
padding-left: 20px;
padding-bottom: 5px;
margin-bottom: 10px;
}
.time-line-img {
width: 16px;
height: 16px;
}
.time-line-title-text {
font-size: 14px;
font-weight: 700;
color: rgba(95, 101, 108, 1);
}
.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/decree/header.vue 0 → 100644
浏览文件 @ d48cb135
<template>
<div class="sanction-container">
<!-- 页面标题区域 -->
<div class="page-header">
<!-- <h1 class="main-title">制裁分析</h1> -->
<img class="page-header-img" src="@/assets/images/decree-national.png" alt="" />
<div class="bill-details">
<div class="main-title">EO 14320-促进美国人工智能技术栈的出口</div>
<div class="bill-name-en">总统行动 | 行政命令 | Ending Crime and Disorder on America’s Streets</div>
</div>
<div class="date-author">
<div class="date">2025年7月23日</div>
<div class="author">唐纳德·约翰·特朗普(Donald John Trump)）</div>
</div>
<!-- <div class="bill-info">
</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;
margin-top: 10px;
/* border-bottom: 1px solid #ebeef5; */
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
}
.page-header-img {
width: 64px;
height: 64px;
}
.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;
margin-right: auto;
}
.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/decree/index.vue 0 → 100644
浏览文件 @ d48cb135
<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 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/exportControl/index.vue
浏览文件 @ d48cb135
......@@ -2,22 +2,26 @@
<div class="home-wrapper">
<div class="home-main">
<div class="home-main-header">
<div class="home-main-header-top">
<!-- <div class="home-main-header-top">
<span>国家科技安全 </span>> <span>中美博弈概览 </span>>
<span style="color: #1459bb; font-weight: bold">出口管制 </span>
</div>
</div> -->
<div class="home-main-header-center">
<el-input
v-model="input"
style="width: 800px; height: 100%"
placeholder="搜索出口管制调查"
/>
<!-- <el-input v-model="input" style="width: 800px; height: 100%" placeholder="搜索出口管制调查" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
<div class="search-text">搜索</div>
</div>
</div> -->
<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">
......@@ -38,64 +42,108 @@
</div>
</div>
</div>
<div class="home-main-center">
<div class="center-top">
<el-row :gutter="20">
<el-col :span="16">
<custom-container titleType="primary" title="最新出口管制政策" :titleIcon="houseIcon" height="450px">
<template #header-right>
<el-button type="primary" link>
{{ "查看详情 >" }}
</el-button>
</template>
<template #default>
<div class="box1">
<div class="box1-left" @click="handleSwithCurBill('left')">
<div class="icon">
<img src="./assets/images/box1-left.png" alt="" />
<!-- <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" @click="handleSwithCurBill('right')">
<div class="icon">
<img src="./assets/images/box1-right.png" alt="" />
<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-header">
<div class="box1-header-left">
<div class="icon">
<img src="./assets/images/box1-header-icon.png" alt="" />
<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="title">{{ "调查进展" }}</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 class="box1-header-right" @click="handleClickToDetail()">
{{ "查看详情 >" }}
</div>
</div>
<div class="box1-main">
<div class="box1-main-top">
<div class="box1-main-top-left">
{{
"美国ITC发布对外国制造的半导体器件及其下游产品和组件的337部分终裁"
}}
</div>
<div class="box1-main-top-right">
<div class="num">{{ 337 }}</div>
<div class="tag">{{ "半导体" }}</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="box2">
<div class="box2-header">
<div class="icon">
<img src="./assets/images/box2-header-icon.png" alt="" />
<div class="box1-absolute-num">23家</div>
</div>
<div class="text">{{ "风险信号" }}</div>
<div class="num">{{ warningList.length }}</div>
<div class="more">{{ "更多 >" }}</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="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="item-left"
:class="{
itemLeftStatus1: item.status === '一般风险',
itemLeftStatus2: item.status === '重大风险',
itemLeftStatus2: item.status === '重大风险'
}"
>
{{ item.status }}
......@@ -107,7 +155,6 @@
<div class="time">{{ item.time }}</div>
</div>
</div>
</div>
<div class="box2-footer">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
......@@ -115,7 +162,273 @@
<div class="text">{{ "风险处理" }}</div>
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<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">
<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">
......@@ -146,16 +459,12 @@
<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="box4-main-item" v-for="(item, index) in billTrendList" :key="index">
<div
class="left"
:class="{
leftStatus2: index === 1,
leftStatus3: index === 2,
leftStatus3: index === 2
}"
>
{{ index < 3 ? index + 1 : "" }}
......@@ -181,11 +490,7 @@
</div>
</div>
<div class="select-box">
<el-select
v-model="releaseTime"
placeholder="选择发布时间"
style="width: 120px"
>
<el-select v-model="releaseTime" placeholder="选择发布时间" style="width: 120px">
<el-option
v-for="item in releaseTimeList"
:key="item.value"
......@@ -193,26 +498,10 @@
:value="item.value"
/>
</el-select>
<!-- <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" v-for="(bill, index) in curBillList" :key="index">
<div class="main-item-box1">
<img :src="bill.img" alt="" />
</div>
......@@ -222,15 +511,29 @@
<div class="main-item-box3">{{ bill.introductionDate }}</div>
</div>
</div>
</div>
</div> -->
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
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 CustomContainer from "@/components/Container/index.vue";
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 { getHotBills, getBillsByType, getHylyList } from "@/api/home";
......@@ -255,10 +558,56 @@ 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 billList = ref([]);
const curBillListIndex = ref(0);
const handleSwithCurBill = (name) => {
const searchKey = ref("");
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 handleSwithCurBill = name => {
if (name === "left") {
if (curBillListIndex.value === 0) {
curBillListIndex.value = billList.value.length - 1;
......@@ -275,6 +624,404 @@ const handleSwithCurBill = (name) => {
curBill.value = billList.value[curBillListIndex.value];
};
// 发布频度
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: "",
......@@ -282,7 +1029,7 @@ const curBill = ref({
dyqkList: [],
hylyList: [],
tarName: "",
introductionDate: "",
introductionDate: ""
});
const handleClickToDetail = () => {
......@@ -293,186 +1040,186 @@ const handleClickToDetail = () => {
const billTrendList = ref([
{
title: "限制与中国合作",
no: "H.R.2670",
no: "H.R.2670"
},
{
title: "限制中国获取技术",
no: "H.R.2471",
no: "H.R.2471"
},
{
title: "禁止在中国建设半导体产能",
no: "H.R.5895",
no: "H.R.5895"
},
{
title: "限制中国产燃油进口",
no: "S.870",
no: "S.870"
},
{
title: "禁止政府部门采购受控半导体或服务",
no: "H.R.6395",
no: "H.R.6395"
},
{
title: "禁止向部分中国实体提供资金",
no: "H.R.3935",
no: "H.R.3935"
},
{
title: "限制采购中国生产电池",
no: "H.R.7776",
no: "H.R.7776"
},
{
title: "重视新兴中国技术公司威胁",
no: "H.R.3935",
no: "H.R.3935"
},
{
title: "禁止卫星出口至中国",
no: "S.870",
no: "S.870"
},
{
title: "禁购华为设备",
no: "H.R.5895",
},
no: "H.R.5895"
}
]);
const warningList = ref([
{
title: "兰德智库发布2025中国年度科技报告",
time: "一天前",
status: "特别重大",
status: "特别重大"
},
{
title: "信息技术与创新基金会发布《中国正在迅速成...",
time: "一天前",
status: "特别重大",
status: "特别重大"
},
{
title: "首次提出“限制外国敏感实体获取补贴",
time: "一天前",
status: "重大风险",
status: "重大风险"
},
{
title: "将中国企业海外子公司、合资公司纳入受...",
time: "一天前",
status: "重大风险",
status: "重大风险"
},
{
title: "H.R.8333《生物安全法案》将华大基因等...",
time: "一天前",
status: "一般风险",
},
status: "一般风险"
}
]);
const timelineList = ref([
{
title: "成为公法 No: 119-21。",
time: "2025-07-04",
status: 1,
status: 1
},
{
title: "总统签署",
time: "2025-07-04",
status: 0,
status: 0
},
{
title: "提交总统",
time: "2025-07-03",
status: 0,
status: 0
},
{
title: "重新审议动议搁置案无异议通过。",
time: "2025-07-03 14:31",
status: 0,
status: 0
},
{
title: "关于‘众议院同意参议院修正案’...",
time: "2025-07-02 14:31",
status: 0,
},
status: 0
}
]);
const areaList = ref([
{
name: "跨境电商",
status: 2,
status: 2
},
{
name: "新能源产业",
status: 4,
status: 4
},
{
name: "半导体产业",
status: 1,
status: 1
},
{
name: "关税",
status: 3,
status: 3
},
{
name: "光伏产业",
status: 2,
},
status: 2
}
]);
const curBillList = ref([
{
billName: "大而美法案",
introductionDate: "2025年7月4日",
img: bill1,
img: bill1
},
{
billName: "GENIUS稳定币法案",
introductionDate: "2025年7月5日",
img: bill2,
img: bill2
},
{
billName: "美越贸易协议",
introductionDate: "2025年7月6日",
img: bill3,
img: bill3
},
{
billName: "美越贸易协议",
introductionDate: "2025年7月7日",
img: bill4,
img: bill4
},
{
billName: "汽车零部件25%关税实施规则",
introductionDate: "2025年7月10日",
img: bill5,
img: bill5
},
{
billName: "汽车零部件25%关税实施规则",
introductionDate: "2025年7月12日",
img: bill6,
img: bill6
},
{
billName: "小额豁免包裹政策调整",
introductionDate: "2025年7月14日",
img: bill7,
img: bill7
},
{
billName: "NIH预算否决案",
introductionDate: "2025年7月15日",
img: bill8,
img: bill8
},
{
billName: "得州国会选区重划法案",
introductionDate: "2025年7月17日",
img: bill9,
img: bill9
},
{
billName: "美越贸易协议",
introductionDate: "2025年7月24日",
img: bill10,
img: bill10
},
{
billName: "美越贸易协议",
introductionDate: "2025年8月4日",
img: bill11,
img: bill11
},
{
billName: "美越贸易协议",
introductionDate: "2025年8月8日",
img: bill12,
},
img: bill12
}
]);
const releaseTime = ref("近一年发布");
......@@ -480,24 +1227,24 @@ const releaseTime = ref("近一年发布");
const releaseTimeList = ref([
{
label: "近半年发布",
value: "近半年发布",
value: "近半年发布"
},
{
label: "近一年发布",
value: "近一年发布",
value: "近一年发布"
},
{
label: "近两年发布",
value: "近两年发布",
value: "近两年发布"
},
{
label: "近三年发布",
value: "近三年发布",
value: "近三年发布"
},
{
label: "近五年发布",
value: "近五年发布",
},
value: "近五年发布"
}
]);
const categoryList = ref([
......@@ -526,13 +1273,13 @@ const handleGetHylyList = async () => {
const obj = {
id: 0,
hylyid: "",
hylymc: "全部分类",
hylymc: "全部分类"
};
categoryList.value = [obj, ...categoryList.value];
} catch (error) {}
};
const handleClickCate = (cate) => {
const handleClickCate = cate => {
console.log(cate);
activeCate.value = cate.hylymc;
......@@ -545,32 +1292,32 @@ const navList = ref([
icon: headerIcon1,
activeIcno: headerIcon1,
name: "首页",
path: "/home",
path: "/home"
},
{
icon: headerIcon2,
activeIcno: headerIcon2,
name: "国家",
path: "/country",
path: "/country"
},
{
icon: headerIcon3,
activeIcno: headerIcon3,
name: "领域",
path: "/area",
path: "/area"
},
{
icon: headerIcon4,
activeIcno: headerIcon4,
name: "要素",
path: "/home",
path: "/home"
},
{
icon: headerIcon5,
activeIcno: headerIcon5,
name: "事件",
path: "/home",
},
path: "/home"
}
]);
const activeNavIndex = ref(0);
......@@ -602,18 +1349,18 @@ const chart1Data = ref({
"2025-05",
"2025-06",
"2025-07",
"2025-08",
"2025-08"
],
data: [
{
name: "提出法案",
value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172],
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],
},
],
value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44]
}
]
});
// 获取热门法案
......@@ -630,17 +1377,17 @@ const handleGetHotBills = async () => {
// 根据法案类型获取法案列表
const handleGetBillsByType = async () => {
const params = {
type: activeHylyId.value,
type: activeHylyId.value
};
try {
const res = await getBillsByType(params);
console.log("根据法案类型获取法案列表", res);
curBillList.value = res.data.map((item) => {
curBillList.value = res.data.map(item => {
return {
billId: item.billId,
billName: item.billName,
introductionDate: item.introductionDate,
img: bill1,
img: bill1
};
});
} catch (error) {}
......@@ -651,11 +1398,7 @@ onMounted(async () => {
await handleGetHotBills();
curBill.value = billList.value[0];
handleGetBillsByType();
let chart1 = getMultiLineChart(
chart1Data.value.title,
chart1Data.value.data[0].value,
chart1Data.value.data[1].value
);
let chart1 = getMultiLineChart(chart1Data.value.title, chart1Data.value.data[0].value, chart1Data.value.data[1].value);
setChart(chart1, "chart1");
});
</script>
......@@ -664,16 +1407,380 @@ onMounted(async () => {
:deep(.el-input__wrapper) {
box-shadow: none;
}
.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;
// 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);
......@@ -761,43 +1868,34 @@ onMounted(async () => {
display: flex;
gap: 20px;
.box1 {
width: 920px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: #fff;
box-sizing: border-box;
padding-left: 31px;
padding-right: 41px;
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%;
}
}
}
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 {
position: absolute;
right: 0;
top: 200px;
width: 24px;
height: 48px;
background: #e7f1ff;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
cursor: pointer;
.icon {
......
src/views/infoPlatform/index.vue 0 → 100644
浏览文件 @ d48cb135
<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="本次制裁共新增83个实体，其中53个中国大陆实体、1个中国台湾实体。">
<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 #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 #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 #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 #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 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-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/researchFunding/index.vue 0 → 100644
浏览文件 @ d48cb135
<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/researchFunding/mock.js 0 → 100644
浏览文件 @ d48cb135
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/ruleDetail/content/survey.vue 0 → 100644
浏览文件 @ d48cb135
<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/ruleDetail/header.vue 0 → 100644
浏览文件 @ d48cb135
<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/ruleDetail/index.vue 0 → 100644
浏览文件 @ d48cb135
<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/ruleLimit/index.vue 0 → 100644
浏览文件 @ d48cb135
<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>
vite.config.js
浏览文件 @ d48cb135
......@@ -20,6 +20,13 @@ export default defineConfig({
'@': resolve(__dirname, 'src'),
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/var.scss";`
}
}
},
server: {
port: 3000,
open: true,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论