Skip to content

R
risk-monitor
提交 46bcc87b authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

update

上级 6dcbeb07
显示空白字符变更
内嵌 并排
正在显示 包含 8811 行增加 和 5 行删除
src/App.vue
浏览文件 @ 46bcc87b
......@@ -18,6 +18,9 @@
<el-dropdown-menu>
<el-dropdown-item command="/">智库首页</el-dropdown-item>
<el-dropdown-item command="/billHome">法案首页</el-dropdown-item>
<el-dropdown-item command="/exportControl">出口管制</el-dropdown-item>
<el-dropdown-item command="/decree">政令</el-dropdown-item>
<el-dropdown-item command="/marketAccessRestrictions">市场准入限制</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
......@@ -192,7 +195,8 @@ body {
.el-main {
padding: 0;
min-height: calc(100vh - 60px);
height: calc(100vh - 60px);
background-color: rgba(246, 251, 255, 1);
overflow-y: auto;
}
</style>
\ No newline at end of file
src/router/index.js
浏览文件 @ 46bcc87b
......@@ -23,6 +23,22 @@ 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 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'
const routes = [
// 智库系统的主要路由
......@@ -163,6 +179,131 @@ const routes = [
}
]
},
// 出口管制首页
{
path: '/exportControl',
name: 'ExportControl',
component: ExportControl,
meta: {
title: '出口管制'
},
},
// 政令首页
{
path: '/decree',
name: 'Decree',
component: Decree,
meta: {
title: '政令'
},
},
{
path: '/decreeLayout',
name: 'DecreeLayoutContainer',
component: DecreeLayoutContainer,
redirect: '/decreeLayout/overview',
meta: {
title: '政令布局'
},
children: [
{
path: 'overview',
name: 'OverviewLayout',
component: OverviewLayout,
redirect: '/decreeLayout/overview/introduction',
meta: {
title: '政令概况'
},
children: [
{
path: 'introduction',
name: 'DecreeIntroduction',
component: DecreeIntroduction,
meta: { title: '政令简介' }
},
{
path: 'background',
name: 'DecreeBackground',
component: DecreeBackground,
meta: { title: '政令背景' }
},
]
},
// 深度挖掘路由
{
path: 'deepDig',
name: 'DeepDig',
component: DecreeDeepDig,
meta: {
title: '深度挖掘'
},
},
// // 影响分析路由
// {
// path: 'influence',
// name: 'InfluenceLayout',
// component: InfluenceLayout,
// redirect: '/billLayout/influence/industry',
// meta: {
// title: '影响分析'
// },
// children: [
// {
// path: 'industry',
// name: 'InfluenceIndustry',
// component: InfluenceIndustry,
// meta: { title: '对华产业影响' }
// },
// {
// path: 'scientificResearch',
// name: 'InfluenceScientificResearch',
// component: InfluenceScientificResearch,
// meta: { title: '对华科研影响' }
// }
// ]
// }
]
},
// 市场准入限制首页
{
path: '/marketAccessRestrictions',
name: 'MarketAccessRestrictions',
component: MarketAccessRestrictions,
meta: {
title: '市场准入限制'
},
},
{
path: '/marketAccessLayout',
name: 'MarketAccessLayout',
component: MarketAccessLayout,
redirect: '/marketAccessLayout/overview',
meta: {
title: '市场准入限制布局'
},
children: [
{
path: 'overview',
name: 'MarketAccessOverview',
component: MarketAccessOverview,
meta: {
title: '调查概况'
},
},
{
path: 'case',
name: 'MarketAccessCase',
component: MarketAccessCase,
meta: {
title: '调查案件'
},
},
]
},
]
const router = createRouter({
......
src/views/billHome/index.vue
浏览文件 @ 46bcc87b
......@@ -329,7 +329,7 @@
<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import router from "../../router/index";
import router from "@/router/index";
import { getHotBills, getBillsByType, getHylyList } from "@/api/home";
......
src/views/billLayout/index.vue
浏览文件 @ 46bcc87b
......@@ -134,7 +134,7 @@
<script setup>
import { ref, onMounted } from "vue";
import router from "../../router";
import router from "@/router";
import GJKJAQImg from "./assets/images/icon1.png";
import GJKJAQActiveImg from "./assets/images/icon1.png";
......
src/views/decree/decreeHome/WordCloudMap.vue 0 → 100644
浏览文件 @ 46bcc87b
<template>
<div>
<div class="echarts-wrap" ref="echartWord"></div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import "echarts-wordcloud";
const props = defineProps({
// 词云数据
data: {
type: Array,
required: true,
// 示例：
// [
// { name: 'Vue', value: 1000 },
// { name: 'ECharts', value: 618 },
// // ...
// ]
},
// 词云形状，可以是 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon' 等
shape: {
type: String,
default: "circle",
},
});
const echartWord = ref(null);
let myChart = null;
const initChart = () => {
if (echartWord.value) {
myChart = echarts.init(echartWord.value);
const option = {
grid: {
left: 5,
top: 5,
right: 5,
bottom: 5,
},
series: [
{
type: "wordCloud",
shape: props.shape,
// 其他形状你可以使用形状路径
// shape: 'circle', // 示例
// 或者自定义路径
gridSize: 20, // 网格大小，影响词间距。
sizeRange: [15, 25], // 定义词云中文字大小的范围
rotationRange: [0, 0],
rotationStep: 0,
drawOutOfBound: false, // 是否超出画布
// 字体
textStyle: {
// normal: {
// color: function () {
// return 'rgb(' + [
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160)
// ].join(',') + ')';
// }
// },
color: function () {
let colors = [
"rgba(189, 33, 33, 1)",
"rgba(232, 151, 21, 1)",
"rgba(220, 190, 68, 1)",
"rgba(96, 58, 186, 1)",
"rgba(32, 121, 69, 1)",
"rgba(22, 119, 255, 1)",
];
return colors[parseInt(Math.random() * colors.length)];
},
emphasis: {
shadowBlur: 5,
shadowColor: "#333",
},
},
// 设置词云数据
data: props.data,
},
],
};
myChart.setOption(option);
window.addEventListener("resize", myChart.resize);
}
};
onMounted(() => {
initChart();
});
onBeforeUnmount(() => {
if (myChart) {
window.removeEventListener("resize", myChart.resize);
myChart.dispose();
}
});
</script>
<style lang="scss" scoped>
.echarts-wrap {
// width: 100%;
width: 576px;
height: 215px;
}
</style>
src/views/decree/decreeHome/index.vue 0 → 100644
浏览文件 @ 46bcc87b
<template>
<div class="home-wrapper">
<div class="home-main">
<div class="home-main-header">
<div class="home-main-header-top">
<span>国家科技安全 </span>> <span>中美博弈概览 </span>>
<span>科技政令</span>
</div>
<div class="home-main-header-center">
<el-input
v-model="input"
style="width: 838px; 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>
<div class="home-main-header-footer">
<div class="home-main-header-footer-item">
<div class="item-top">3.8T</div>
<div class="item-footer">数据量</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">28</div>
<div class="item-footer">科技动向</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">326</div>
<div class="item-footer">总统政令</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">341</div>
<div class="item-footer">通过法案</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">285</div>
<div class="item-footer">分析报告</div>
</div>
</div>
</div>
<div class="home-main-center">
<div class="center-top">
<div class="box1">
<div class="box1-left">
<div class="icon">
<img src="./assets/images/box1-left.png" alt="" />
</div>
</div>
<div class="box1-right">
<div class="icon">
<img src="./assets/images/box1-right.png" alt="" />
</div>
</div>
<div class="box1-header">
<div class="box1-header-left">
<div class="icon">
<img src="./assets/images/box1-header-icon.png" alt="" />
</div>
<div class="title">{{ "最新科技政令" }}</div>
</div>
<div class="box1-header-right" @click="handleClickToDetail()">
{{ "查看详情 >" }}
</div>
</div>
<div class="box1-main">
<div class="box1-main-left">
<img src="./assets/images/img1.png" alt="" />
</div>
<div class="box1-main-right">
<div class="box1-main-right-title">
{{ "关于进一步延长TikTok执法宽限期的行政令" }}
</div>
<div class="box1-main-right-info">
<div
class="tag"
:class="{
tag1: tag.status == 1,
tag2: tag.status == 2,
tag3: tag.status == 3,
tag4: tag.status == 4,
}"
v-for="(tag, index) in tagList"
:key="index"
>
{{ tag.name }}
</div>
</div>
<div class="box1-main-right-center">
{{
`9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需向提供商发出无违规和无责任的信函，并强调执行该法的权力专属联邦司法部长，意在阻止各州或私人提起诉讼。
`
}}
</div>
<div class="box1-main-right-footer">
<div class="footer-left">{{ "2025年9月16日" }}</div>
<div class="footer-right">
<div class="footer-right-item1">
{{ "美国白宫官方网站" }}
</div>
<div class="footer-right-item2">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box2">
<div class="box2-header">
<div class="icon">
<img src="./assets/images/box2-header-icon.png" alt="" />
</div>
<div class="title">
<div class="text">{{ "风险信号" }}</div>
<div class="num">{{ warningList.length }}</div>
</div>
<div class="more">{{ "更多 >" }}</div>
</div>
<div class="box2-main">
<div
class="box2-main-item"
v-for="(item, index) in warningList"
:key="index"
>
<div
class="item-left"
:class="{
itemLeftStatus1: item.status === '一般风险',
itemLeftStatus2: item.status === '重大风险',
}"
>
{{ item.status }}
</div>
<div class="item-right">
<div class="text">
{{ item.title }}
</div>
<div class="time">{{ item.time }}</div>
</div>
</div>
</div>
<div class="box2-footer">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
</div>
<div class="text">{{ "风险处理" }}</div>
</div>
</div>
</div>
<div class="center-footer">
<div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "涉华政令数量" }}</div>
</div>
<div class="box3-header-right">
<div class="right-box rightBoxActive">
{{ "月度" }}
</div>
<div class="right-box">
{{ "年度" }}
</div>
</div>
</div>
<div class="box3-main" id="chart1"></div>
</div>
<div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/box4-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "关键内容" }}</div>
</div>
<div class="box4-main">
<WordCloudMap :data="wordCloudData" :shape="circle" />
</div>
</div>
</div>
</div>
<div class="home-main-footer">
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate }}
</div>
</div>
<div class="select-box">
<el-select
v-model="releaseTime"
placeholder="选择发布时间"
style="width: 120px"
>
<el-option
v-for="item in releaseTimeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<!-- <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="(decree, index) in curDecreeList"
:key="index"
>
<div class="main-item-left">
<div
class="left-box"
:class="{
type1: decree.status === 1,
type2: decree.status === 2,
type3: decree.status === 3,
}"
>
{{ decree.type }}
</div>
</div>
<div class="main-item-center">
<div class="main-item-center-box1">{{ decree.title }}</div>
<div class="main-item-center-box2">{{ decree.time }}</div>
</div>
<div class="main-item-right">
<div class="main-item-right-text">{{ "查看官网政令原文" }}</div>
<div class="main-item-right-icon">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import router from "@/router";
import WordCloudMap from "./WordCloudMap.vue";
import getMultiLineChart from "./utils/multiLineChart";
const tagList = ref([
{
name: "互联网",
status: 2,
},
{
name: "人工智能",
status: 4,
},
]);
const wordCloudData = [
{ name: "与马斯克公开冲突", value: 100 },
{ name: "传统能源", value: 5 },
{ name: "共和党财政鹰派", value: 77 },
{ name: "未实现赤字控制目标", value: 35 },
{ name: "得克萨斯州", value: 88 },
{ name: "选举压力", value: 57 },
{ name: "主张财政紧缩", value: 72 },
{ name: "财政保守", value: 18 },
{ name: "共和党", value: 34 },
{ name: "扩大军费", value: 16 },
{ name: "参议院多数党", value: 72 },
{ name: "地方利益捍卫者", value: 58 },
{ name: "众议院预算委员会", value: 24 },
{ name: "债务与赤字警告", value: 33 },
{ name: "抗议医疗补助条款", value: 47 },
{ name: "深红州", value: 32 },
{ name: "温和派选区", value: 62 },
{ name: "高压游说", value: 51 },
];
const handleClickToDetail = () => {
router.push("/decreeLayout");
};
const warningList = ref([
{
title: "关于对中华人民共和国合成阿片类药物供应链...",
time: "一天前",
status: "特别重大",
},
{
title: "关于调整汽车及汽车零部件进口的公告",
time: "一天前",
status: "特别重大",
},
{
title: "关于调整钢铁进口的公告",
time: "一天前",
status: "重大风险",
},
{
title: "关于使用互惠关税规范进口以纠正导致大规模...",
time: "一天前",
status: "重大风险",
},
{
title: "关于修订对中华人民共和国低价值进口商品适...",
time: "一天前",
status: "一般风险",
},
]);
const timelineList = ref([
{
title: "成为公法 No: 119-21。",
time: "2025-07-04",
status: 1,
},
{
title: "总统签署",
time: "2025-07-04",
status: 0,
},
{
title: "提交总统",
time: "2025-07-03",
status: 0,
},
{
title: "重新审议动议搁置案无异议通过。",
time: "2025-07-03 14:31",
status: 0,
},
{
title: "关于‘众议院同意参议院修正案’...",
time: "2025-07-02 14:31",
status: 0,
},
]);
const areaList = ref([
{
name: "跨境电商",
status: 2,
},
{
name: "新能源产业",
status: 4,
},
{
name: "半导体产业",
status: 1,
},
{
name: "关税",
status: 3,
},
{
name: "光伏产业",
status: 2,
},
]);
const curDecreeList = ref([
{
type: "总统政令",
status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
},
{
type: "总统政令",
status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
},
{
type: "总统政令",
status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
},
{
type: "总统政令",
status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
},
{
type: "总统政令",
status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
},
{
type: "总统政令",
status: 3,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
},
{
type: "总统政令",
status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
},
{
type: "总统政令",
status: 2,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
},
{
type: "总统政令",
status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
},
{
type: "总统政令",
status: 3,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
},
{
type: "总统政令",
status: 3,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
},
{
type: "总统政令",
status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
},
]);
const releaseTime = ref("近一年发布");
const releaseTimeList = ref([
{
label: "近半年发布",
value: "近半年发布",
},
{
label: "近一年发布",
value: "近一年发布",
},
{
label: "近两年发布",
value: "近两年发布",
},
{
label: "近三年发布",
value: "近三年发布",
},
{
label: "近五年发布",
value: "近五年发布",
},
]);
const categoryList = ref([
"全部分类",
"总统政令",
"提名与任命",
"总统备忘录",
"声明",
]);
const activeCate = ref("全部分类");
const activeHylyId = ref("");
// // 获取领域分类
// const handleGetHylyList = async () => {
// try {
// const res = await getHylyList();
// console.log("行业领域列表");
// categoryList.value = res.data;
// const obj = {
// id: 0,
// hylyid: "",
// hylymc: "全部分类",
// };
// categoryList.value = [obj, ...categoryList.value];
// } catch (error) {}
// };
const handleClickCate = (cate) => {
console.log(cate);
activeCate.value = cate.hylymc;
activeHylyId.value = cate.hylyid;
handleGetBillsByType();
};
const activeNavIndex = ref(0);
const handleClickNav = (index, item) => {
activeNavIndex.value = index;
router.push(item.path);
};
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const chart1Data = ref({
title: [
"2024-09",
"2024-10",
"2024-11",
"2024-12",
"2025-01",
"2025-02",
"2025-03",
"2025-04",
"2025-05",
"2025-06",
"2025-07",
"2025-08",
],
data: [
{
name: "提出法案",
value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172],
},
],
});
// 根据法案类型获取法案列表
// const handleGetBillsByType = async () => {
// const params = {
// type: activeHylyId.value,
// };
// try {
// const res = await getBillsByType(params);
// console.log("根据法案类型获取法案列表", res);
// curDecreeList.value = res.data.map((item) => {
// return {
// billId: item.billId,
// billName: item.billName,
// introductionDate: item.introductionDate,
// img: bill1,
// };
// });
// } catch (error) {}
// };
onMounted(async () => {
let chart1 = getMultiLineChart(
chart1Data.value.title,
chart1Data.value.data[0].value
);
setChart(chart1, "chart1");
});
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper) {
box-shadow: none;
}
.home-wrapper {
.home-main {
// width: 1400px;
width: 100%;
margin: 0 auto;
background: url("./assets/images/background.png");
background-size: 100% 100%;
.home-main-header {
display: flex;
flex-direction: column;
align-items: center;
// position: sticky;
// left: 0;
// top: 0;
// z-index: 9999;
.home-main-header-top {
width: 100%;
height: 64px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 64px;
background: url("./assets/images/header-bg.png");
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
color: #fff;
box-sizing: border-box;
padding-left: 160px;
}
.home-main-header-center {
margin-top: 13px;
width: 960px;
height: 48px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
.search {
position: absolute;
right: 1px;
top: 1px;
width: 120px;
height: 42px;
border-radius: 4px;
background: rgba(22, 119, 255, 1);
display: flex;
justify-content: center;
align-items: center;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-footer {
margin-top: 38px;
width: 960px;
height: 64px;
box-sizing: border-box;
padding: 0 108px;
display: flex;
justify-content: space-between;
.home-main-header-footer-item {
padding: 0 10px;
text-align: center;
.item-top {
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 36px;
font-weight: 700;
line-height: 22px;
}
.item-footer {
margin-top: 10px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
}
.home-main-center {
margin-top: 34px;
.center-top {
height: 450px;
display: flex;
justify-content: center;
gap: 20px;
.box1 {
width: 1064px;
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%;
}
}
}
.box1-right {
position: absolute;
right: 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-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
.box1-header-left {
display: flex;
.icon {
width: 18px;
height: 18px;
margin-top: 19px;
img {
width: 100%;
height: 100%;
}
}
.title {
width: 152px;
height: 53px;
margin-left: 18px;
color: #fff;
background: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 53px;
text-align: center;
}
}
.box1-header-right {
margin-top: 19px;
height: 16px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 16px;
cursor: pointer;
}
}
.box1-main {
display: flex;
height: 354px;
margin-top: 22px;
.box1-main-left {
width: 458px;
height: 353px;
img {
width: 100%;
height: 100%;
}
}
.box1-main-right {
margin-left: 28px;
flex: 1;
.box1-main-right-title {
height: 26px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.box1-main-right-info {
margin-top: 14px;
display: flex;
height: 24px;
.tag {
height: 24px;
line-height: 24px;
padding: 1px 8px;
box-sizing: border-box;
border-radius: 4px;
margin-right: 5px;
}
.tag1 {
}
.tag2 {
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.tag4 {
border: 1px solid rgba(255, 163, 158, 1);
color: rgba(245, 34, 45, 1);
background: rgba(255, 241, 240, 1);
}
}
.box1-main-right-center {
margin-top: 10px;
height: 200px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
.box1-main-right-footer {
margin-top: 50px;
height: 24px;
display: flex;
justify-content: space-between;
.footer-left {
height: 24px;
line-height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.footer-right {
display: flex;
.footer-right-item1 {
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.footer-right-item2 {
width: 16px;
height: 16px;
margin-top: 4px;
margin-left: 11px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
.box2 {
width: 521px;
padding-right: 20px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box2-header {
height: 54px;
display: flex;
.icon {
width: 24px;
height: 22px;
margin-left: 33px;
margin-top: 18px;
img {
width: 100%;
height: 100%;
}
}
.title {
display: flex;
width: 148px;
background: rgba(206, 79, 81, 1);
margin-left: 25px;
.text {
margin-left: 15px;
margin-top: 16px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
.num {
width: 24px;
height: 20px;
line-height: 20px;
text-align: center;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 12px;
margin-left: 15px;
margin-top: 18px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.3);
}
}
.more {
margin-top: 19px;
margin-left: 200px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 16px;
}
}
.box2-main {
height: 282px;
overflow-y: auto;
.box2-main-item {
margin-left: 23px;
height: 47px;
width: 464px;
display: flex;
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
margin-top: 4px;
margin-left: 2px;
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 241, 240);
color: rgba(245, 34, 45, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
}
.item-right {
margin-left: 13px;
width: 408px;
height: 47px;
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
width: 348px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 47px;
}
.time {
margin-left: 10px;
line-height: 47px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
}
}
.box2-footer {
position: absolute;
left: 40px;
bottom: 20px;
width: 430px;
height: 42px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 6px;
background: rgba(22, 119, 255, 1);
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
}
.center-footer {
margin-top: 21px;
height: 450px;
display: flex;
justify-content: center;
.box3 {
width: 1064px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 15px;
width: 13px;
height: 13px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 16px;
margin-left: 22px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
}
.box3-header-right {
display: flex;
justify-content: flex-end;
width: 178px;
height: 22px;
margin-top: 11px;
.right-box {
width: 48px;
height: 28px;
text-align: center;
line-height: 28px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
margin-left: 8px;
cursor: pointer;
}
.rightBoxActive {
color: rgba(10, 87, 166, 1);
border: 1px solid rgba(10, 87, 166, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
}
}
}
.box3-main {
height: 397px;
}
}
.box4 {
margin-left: 20px;
width: 521px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box4-header {
width: 452px;
margin: 0 auto;
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.header-icon {
margin-top: 18px;
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 26px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
}
.box4-main {
width: 452px;
margin-top: 8px;
height: 360px;
}
}
}
}
.home-main-footer {
// width: 100%;
height: 911px;
background: rgba(248, 249, 250, 1);
.home-main-footer-header {
width: 1600px;
height: 42px;
margin: 36px auto;
// background: orange;
display: flex;
justify-content: space-between;
.btn-box {
width: 1000px;
display: flex;
.btn {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 42px;
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 0);
margin-right: 20px;
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
}
}
.btnActive {
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 1);
color: #fff;
&:hover {
color: #fff;
background: rgba(20, 89, 187, 1);
}
}
}
.select-box {
margin-top: 10px;
height: 42px;
box-sizing: border-box;
padding: 5px 0;
}
}
.home-main-footer-main {
width: 1600px;
height: 687px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
margin: 0 auto;
box-sizing: border-box;
padding: 20px;
overflow-y: auto;
.main-item {
display: flex;
height: 84px;
border-top: 1px solid rgba(234, 236, 238, 1);
.main-item-left {
width: 105px;
.left-box {
margin-top: 17px;
height: 24px;
width: 95px;
text-align: center;
// color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 24px;
box-sizing: border-box;
border-radius: 4px;
// border: 1px solid rgba(186, 224, 255, 1);
// background: rgba(230, 244, 255, 1);
}
.type1 {
color: rgba(22, 119, 255, 1);
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
}
.type2 {
color: rgba(19, 168, 168, 1);
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
}
.type3 {
color: rgba(250, 140, 22, 1);
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
}
}
.main-item-center {
width: 1300px;
.main-item-center-box1 {
margin-top: 15px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.main-item-center-box2 {
margin-top: 4px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.main-item-right {
display: flex;
.main-item-right-text {
margin-top: 18px;
width: 128px;
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.main-item-right-icon {
margin-top: 22px;
margin-left: 9px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/decree/decreeHome/utils/multiLineChart.js 0 → 100644
浏览文件 @ 46bcc87b
import * as echarts from 'echarts'
const getMultiLineChart = (dataX, dataY1, dataY2) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
data: ['提出法案', '通过法案'],
show: false
},
color: ['#1459bb', '#fa8c16'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '提出法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(22, 119, 255, 1)' // 起始颜色
}, {
offset: 1,
color: 'rgba(22, 119, 255, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
{
name: '通过法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 172, 77, 1)' // 起始颜色
}, {
offset: 1,
color: 'rgba(255, 172, 77, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY2
}
]
}
}
export default getMultiLineChart
\ No newline at end of file
src/views/decree/decreeLayout/deepdig/index.vue 0 → 100644
浏览文件 @ 46bcc87b
<template>
<div class="wrap">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">政令时序及战略里程碑</div>
<div class="header-right">
<img src="./assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box1-main">
<div class="box1-line-box"></div>
<div
class="box1-item"
:class="{ box1ItemFooter: index % 2 }"
v-for="(item, index) in timeLineList"
:key="index"
>
<div class="point" :class="{ pointFooter: index % 2 }">
<img src="./assets/icons/box1-point.png" alt="" />
</div>
<div class="time" :class="{ timeFooter: index % 2 }">
{{ item.time }}
</div>
<div class="box1-item-header">
<div class="title">{{ item.title }}</div>
<div class="icon">
<img src="./assets/icons/box1-icon1.png" alt="" />
</div>
</div>
<div class="box1-item-content">
{{ item.content }}
</div>
</div>
</div>
<div class="box1-footer">
<div class="box1-footer-left">
<img src="./assets/icons/box1-icon2.png" alt="" />
</div>
<div class="box1-footer-center">
{{
"近两年美国AI领域核心政令与事件聚焦于安全治理与竞争领导权。拜登政府2023年10月签署首份AI行政令，强制要求强大AI系统进行安全测试并共享结果。2025年特朗普政府转向，签署《赢得竞赛：美国AI行动计划》，核心转为放松监管、加速创新与基础设施建设，并推动美国AI技术栈全球出口。其间，美国持续升级对华AI芯片出口管制，并积极介入全球AI安全治理议程"
}}
</div>
<div class="box1-footer-right">
<img src="./assets/icons/box1-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">相关政令关联分析</div>
<div class="header-right">
<img src="./assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box2-main">
<div class="left">
<div
class="left-item"
:class="{ leftItemActive: box2LeftActiveIndex === index }"
v-for="(item, index) in decreeList"
:key="index"
>
<div class="time">{{ item.time }}</div>
<div class="title">{{ item.title }}</div>
</div>
</div>
<div class="right">
<div class="info-box">
<div class="info-left">
<img :src="decreeList[box2LeftActiveIndex].img" alt="" />
</div>
<div class="info-right">
<div class="info-item">
<div class="item-left">{{ "政令全称：" }}</div>
<div class="item-right1">
<div class="item-right-text">
{{ decreeList[box2LeftActiveIndex].totalTitle }}
</div>
<div class="item-right-icon">
<img src="./assets/icons/open-icon.png" alt="" />
</div>
</div>
</div>
<div class="info-item">
<div class="item-left">{{ "英文全称：" }}</div>
<div class="item-right">
{{ decreeList[box2LeftActiveIndex].eTotalTitle }}
</div>
</div>
<div class="info-item">
<div class="item-left">{{ "签署时间：" }}</div>
<div class="item-right">
{{ decreeList[box2LeftActiveIndex].signTime }}
</div>
</div>
<div class="info-item">
<div class="item-left">{{ "签署总统：" }}</div>
<div class="item-right">
{{ decreeList[box2LeftActiveIndex].signPerson }}
</div>
</div>
</div>
</div>
<div class="list-box">
<div class="list-header">
<div class="icon">
<img src="./assets/icons/box2-list-header-icon.png" alt="" />
</div>
<div class="title">{{ "政令主要内容" }}</div>
</div>
<div class="list-main">
<div
class="list-item"
v-for="(val, idx) in decreeList[box2LeftActiveIndex].list"
:key="idx"
>
<div class="id">{{ idx + 1 }}</div>
<div class="title">{{ val.title }}</div>
<div class="open">
<img src="./assets/icons/open-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import box2InfoImg from "./assets/icons/box2-info.png";
const box1BtnActive = ref(1);
const timeLineList = ref([
{
time: "2025年1月",
title: "《AI扩散暂行最终规则》发布",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。",
},
{
time: "2025年5月",
title: "特朗普宣布撤销拜登AI规则",
content: "特朗普政府宣布撤销拜登AI规则，计划推出新规。",
},
{
time: "2025年7月23日",
title: "特朗普签署EO 14320",
content: "特朗普签署EO 14320，推动美国AI技术栈出口。",
},
{
time: "2025年7月31日",
title: "中国网信办约谈英伟达",
content:
"中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。",
},
{
time: "2025年8月",
title: "英伟达H20发放出口许可证",
content: "美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。",
},
]);
const decreeList = ref([
{
time: "2023",
title: "拜登人工智能政令",
img: box2InfoImg,
totalTitle: "关于安全、可靠和可信地开发和使用人工智能的行政命令",
eTotalTitle:
"Executive Order on the Safe, Secure, and Trustworthy Development and Use of Artificial Intelligence",
signTime: "2025年7月23日",
signPerson: "乔·拜登（Joe Biden）",
list: [
{
title:
"要求强大AI系统开发者与政府分享安全测试结果（“红队测试”）；制定生物合成筛查标准防范风险；建立AI生成内容鉴别标准",
},
{
title:
"优先支持隐私保护技术（PET）研发；评估各机构如何收集和使用商业信息；制定评估隐私保护技术有效性的指南。",
},
{
title:
"为解决算法歧视提供明确指导；确保刑事司法系统中AI使用的公平性；协调调查和起诉AI相关的民权侵犯行为。",
},
{
title:
"推动医疗保健领域负责任地使用AI；创造资源支持教育工作者部署AI教育工具。",
},
{
title:
"制定减轻AI对工人潜在危害的原则和最佳实践；编写AI对劳动力市场潜在影响的报告。",
},
{
title:
"通过“国家AI研究资源”（NAIRR）试点促进研究；为小型开发者和企业家提供技术援助和资源；简化相关领域高技能人才的签证流程。",
},
{
title: "扩大在AI领域的国际合作；与国际伙伴和标准组织加速制定AI标准。",
},
{
title:
"发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。",
},
],
},
{
time: "2023",
title: "拜登人工智能政令",
img: "",
totalTitle: "",
eTotalTitle: "",
signTime: "",
signPerson: "",
list: [],
},
{
time: "2025",
title: "特朗普撤销拜登AI规则",
img: "",
totalTitle: "",
eTotalTitle: "",
signTime: "",
signPerson: "",
list: [],
},
{
time: "2023",
title: "美国AI行动计划",
img: "",
totalTitle: "",
eTotalTitle: "",
signTime: "",
signPerson: "",
list: [],
},
{
time: "2024",
title: "对中国AI芯片限制",
img: "",
totalTitle: "",
eTotalTitle: "",
signTime: "",
signPerson: "",
list: [],
},
]);
const box2LeftActiveIndex = ref(0);
</script>
<style lang="scss" scoped>
.wrap {
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
}
}
}
.box1 {
margin: 27px auto 16px;
width: 1600px;
height: 492px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
margin-top: 17px;
margin-left: 22px;
width: 1556px;
height: 330px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
position: relative;
.box1-line-box {
position: absolute;
left: 0;
top: 135px;
height: 8px;
width: 1556px;
background: url("./assets/icons/line-bg.png") repeat;
}
.box1-item {
width: 315px;
height: 142px;
position: relative;
box-sizing: border-box;
padding-left: 20px;
margin-left: 10px;
border-left: 1px solid #0a57a6;
.box1-item-header {
display: flex;
width: 315px;
.title {
// width: 262px;
height: 26px;
}
.icon {
margin-left: 10px;
margin-top: 5px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
.box1-item-content {
width: 288px;
min-height: 48px;
max-height: 96px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.point {
position: absolute;
left: -11px;
bottom: -11px;
}
.pointFooter {
position: absolute;
left: -11px;
top: -11px;
}
.time {
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: absolute;
bottom: -36px;
left: 0;
}
.timeFooter {
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: absolute;
top: -36px;
left: 0;
}
}
.box1ItemFooter {
margin-top: 138px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
}
.box1-footer {
margin-left: 22px;
margin-top: 10px;
width: 1556px;
height: 64px;
box-sizing: border-box;
padding: 6px 12px;
display: flex;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.box1-footer-left {
width: 19px;
height: 20px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.box1-footer-center {
width: 1463px;
height: 48px;
display: flex;
flex-direction: row;
align-items: center;
margin-top: 2px;
margin-left: 15px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.box1-footer-right {
width: 24px;
height: 24px;
border-radius: 12px;
background: #e7f3ff;
margin-top: 14px;
margin-left: 13px;
img {
margin-left: 6px;
margin-top: 6px;
width: 12px;
height: 12px;
}
}
}
}
.box2 {
margin: 0 auto 10px;
width: 1600px;
height: 751px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
display: flex;
margin-top: 5px;
.left {
margin-left: 21px;
width: 300px;
.left-item {
width: 300px;
height: 64px;
border-radius: 4px;
display: flex;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
cursor: pointer;
&:hover {
background: rgba(246, 250, 255, 1);
}
.time {
width: 45px;
height: 24px;
line-height: 24px;
margin-left: 18px;
margin-top: 20px;
}
.title {
margin-left: 17px;
margin-top: 17px;
height: 30px;
// color: rgba(10, 87, 166, 1);
// font-family: Microsoft YaHei;
// font-size: 16px;
// font-weight: 700;
line-height: 30px;
}
}
.leftItemActive {
color: rgba(10, 87, 166, 1);
font-weight: 700;
background: rgba(246, 250, 255, 1);
&::after {
position: relative;
content: "";
width: 5px;
height: 48px;
background: rgba(10, 87, 166, 1);
right: -70px;
top: 8px;
}
}
}
.right {
margin-left: 36px;
.info-box {
margin-top: 25px;
margin-left: 28px;
width: 1180px;
height: 188px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
background: rgba(246, 250, 255, 1);
display: flex;
.info-left {
width: 97px;
height: 136px;
margin-top: 25px;
margin-left: 28px;
img {
width: 100%;
height: 100%;
}
}
.info-right {
margin-left: 35px;
margin-top: 22px;
.info-item {
display: flex;
height: 30px;
margin-bottom: 8px;
.item-left {
margin-top: 3px;
width: 100px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.item-right {
width: 899px;
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
.item-right1 {
display: flex;
.item-right-text {
height: 30px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
}
.item-right-icon {
margin-left: 13px;
margin-top: 7px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
.list-box {
margin-left: 36px;
.list-header {
display: flex;
height: 56px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
margin-top: 21px;
margin-left: 17px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.title {
margin-top: 16px;
margin-left: 16px;
height: 30px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
}
}
.list-main {
height: 400px;
overflow-x: hidden;
overflow-y: auto;
.list-item {
width: 1180px;
height: 54px;
box-sizing: border-box;
border-radius: 4px;
background: rgba(255, 255, 255, 1);
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
.id {
width: 24px;
height: 24px;
margin-left: 15px;
margin-top: 15px;
border-radius: 12px;
background: #e7f3ff;
text-align: center;
line-height: 24px;
color: #0a57a6;
}
.title {
margin-left: 13px;
margin-top: 12px;
height: 30px;
width: 1100px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
.open {
width: 16px;
height: 16px;
margin-top: 20px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/index.vue 0 → 100644
浏览文件 @ 46bcc87b
<template>
<div class="layout-container">
<!-- 导航菜单 -->
<div class="layout-main">
<div class="layout-main-header">
<div class="layout-main-header-left-box">
<div class="left-box-top">
<div class="icon">
<img src="./assets/images/USA-logo.png" alt="" />
</div>
<div class="info">
<div class="info-box1">{{ "EO 14320-推动美国人工智能技术栈的出口" }}</div>
<div class="info-box2">
<div class="info-box2-item">{{ '总统行动' }}</div>|
<div class="info-box2-item">{{ '行政命令' }}</div>|
<div class="info-box2-item">{{ 'Promoting the Export of the American AI Technology Stack' }}</div>
</div>
</div>
</div>
<div class="left-box-bottom">
<div
class="left-box-bottom-item"
:class="{ leftBoxBottomItemActive: activeTitle === item.name }"
v-for="(item, index) in mainHeaderBtnList"
:key="index"
@click="handleClickMainHeaderBtn(item)"
>
<div class="icon">
<img v-if="activeTitle === item.name" :src="item.activeIcon" alt="" />
<img v-else :src="item.icon" alt="" />
</div>
<div class="name" :class="{ nameActive: activeTitle === item.name }">
{{ item.name }}
</div>
</div>
</div>
</div>
<div class="layout-main-header-right-box">
<div class="right-box-top">
<div class="time">{{ "2025年7月23日" }}</div>
<div class="name">{{ "唐纳德·约翰·特朗普(Donald John Trump)" }}</div>
</div>
<div class="right-box-bottom">
<el-button
type="plain"
size="large"
icon="Search"
@click="handleSwitchActiveName('法案原文')"
>政令原文</el-button
>
<el-button type="primary" size="large" icon="EditPen"
>分析报告</el-button
>
</div>
</div>
</div>
<div class="layout-main-center">
<router-view />
</div>
</div>
<div class="layout-report-box" v-if="activeName === '法案原文'">
<div class="report-close" @click="handleSwitchActiveName('分析报告')">
<img src="./assets/images/report-close-icon.png" alt="" />
</div>
<div class="report-main">
<div class="report-header">
<div class="report-header-left">
<div class="text">法案版本：</div>
<div class="select-box">
<el-select
v-model="curBill"
placeholder="选择法案"
style="width: 240px"
>
<el-option
v-for="item in billList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<div class="report-header-right">
<div class="btn">
<div class="icon">
<img src="./assets/images/report-header-icon1.png" alt="" />
</div>
<div class="text">翻译</div>
</div>
<div class="btn">
<div class="icon">
<img src="./assets/images/report-header-icon2.png" alt="" />
</div>
<div class="text">下载</div>
</div>
<div class="btn">
<div class="icon">
<img src="./assets/images/report-header-icon3.png" alt="" />
</div>
<div class="text">对比</div>
</div>
<div class="btn">
<div class="icon">
<img src="./assets/images/report-header-icon4.png" alt="" />
</div>
<div class="text">查找</div>
</div>
</div>
</div>
<div class="report-content">
<div class="content-left">
<img src="./assets/images/report1.png" alt="" />
</div>
<div class="content-right">
<img src="./assets/images/report2.png" alt="" />
</div>
</div>
</div>
</div>
<div class="tool-box">
<div class="tool1">
<img src="./assets/icons/tool-icon1.png" alt="" />
</div>
<div class="tool2">
<img src="./assets/icons/tool-icon2.png" alt="" />
</div>
<div class="tool3">
<img src="./assets/icons/tool-icon3.png" alt="" />
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import router from "@/router";
import GJKJAQImg from "./assets/images/icon1.png";
import GJKJAQActiveImg from "./assets/images/icon1.png";
import KJLYImg from "./assets/images/icon2.png";
import KJLYActiveImg from "./assets/images/icon2.png";
import KJYSImg from "./assets/images/icon3.png";
import KJYSActiveImg from "./assets/images/icon3.png";
import ZDKJAQImg from "./assets/images/icon4.png";
import ZDKJAQActiveImg from "./assets/images/icon4.png";
import ZBTXImg from "./assets/images/icon5.png";
import ZBTXActiveImg from "./assets/images/icon5.png";
import ZJKImg from "./assets/images/icon6.png";
import ZJKActiveImg from "./assets/images/icon6.png";
import XTGLImg from "./assets/images/icon7.png";
import XTGLActiveImg from "./assets/images/icon7.png";
import search from "./assets/images/search.png";
import mail from "./assets/images/mail.png";
import icon1 from "./assets/icons/icon1.png";
import icon1Active from "./assets/icons/icon1_active.png";
import icon2 from "./assets/icons/icon2.png";
import icon2Active from "./assets/icons/icon2_active.png";
import icon3 from "./assets/icons/icon3.png";
import icon3Active from "./assets/icons/icon3_active.png";
import icon4 from "./assets/icons/icon4.png";
import icon4Active from "./assets/icons/icon4_active.png";
import headerIcon1 from "./assets/icons/header-icon1.png";
import headerIcon2 from "./assets/icons/header-icon2.png";
import headerIcon3 from "./assets/icons/header-icon3.png";
import headerIcon4 from "./assets/icons/header-icon4.png";
import headerIcon5 from "./assets/icons/header-icon5.png";
const activeName = ref("分析报告");
const handleSwitchActiveName = (name) => {
activeName.value = name;
};
const curBill = ref("公法（2025年7月4日）");
const billList = ref([
{
label: "公法（2025年7月4日）",
value: "公法（2025年7月4日）",
},
{
label: "公法（2025年7月2日）",
value: "公法（2025年7月2日）",
},
]);
const mainHeaderBtnList = ref([
{
icon: icon1,
activeIcon: icon1Active,
name: "政令概况",
path: "/decreeLayout/overview",
},
{
icon: icon2,
activeIcon: icon2Active,
name: "深度挖掘",
path: "/decreeLayout/deepDig",
},
{
icon: icon3,
activeIcon: icon3Active,
name: "影响分析",
// path: "/billLayout/influence",
}
]);
const activeTitle = ref('法案概况')
const handleClickMainHeaderBtn = (item) => {
activeTitle.value = item.name;
// window.sessionStorage.setItem('activeTitle', activeTitle.value)
router.push(item.path);
};
const activeNavIndex = ref(0);
const handleClickNav = (index, item) => {
activeNavIndex.value = index;
router.push(item.path);
};
onMounted(() => {
if(window.sessionStorage.getItem('activeTitle')) {
activeTitle.value = window.sessionStorage.getItem('activeTitle')
}
});
</script>
<style lang="scss" scoped>
.layout-container {
width: 1920px;
height: 1080px;
background: rgba(249, 250, 252, 1);
position: relative;
.layout-header {
width: 1920px;
height: 64px;
// background: #0a121e;
background: #fff;
// border-bottom: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
// margin-bottom: 13px;
display: flex;
position: relative;
z-index: 99;
.layout-header-left {
width: 480px;
display: flex;
.logo-box {
width: 36px;
height: 36px;
margin: 14px;
img {
width: 100%;
height: 100%;
border-radius: 6px;
}
}
.title-box {
height: 64px;
width: 350px;
margin: 0 5px;
color: #eee;
line-height: 64px;
font-size: 20px;
font-weight: bold;
color: rgba(10, 18, 30, 1);
font-family: Microsoft YaHei;
font-size: 22px;
font-weight: 700;
text-align: left;
}
}
.layout-header-center {
width: 700px;
display: flex;
justify-content: space-between;
margin-left: 200px;
.nav-item {
border-radius: 5px;
cursor: pointer;
display: flex;
&:hover {
background: rgba(255, 255, 255, 0.2);
}
.nav-icon-box {
width: 25px;
height: 25px;
margin: 22px 0 20px 5px;
.nav-icon {
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.nav-icon-active {
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
}
.name-box {
margin: 18px 5px;
height: 30px;
text-align: center;
line-height: 30px;
color: rgba(59, 65, 75, 1);
letter-spacing: 2px;
font-size: 18px;
}
// .nameActive {
// color: #ea9518;
// font-weight: bold;
// }
}
.navItemActive {
// background: #295dab;
// border-bottom: 4px solid #ea9518;
// &:hover {
// background: #295dab;
// border-bottom: 4px solid #ea9518;
// }
}
}
.layout-header-right {
flex: 1;
display: flex;
justify-content: flex-end;
.nav-search {
width: 22px;
height: 22px;
margin: 21px 0;
}
.nav-message {
width: 22px;
height: 22px;
margin: 21px 30px;
}
.nav-usr {
width: 110px;
display: flex;
height: 40px;
margin: 12px 5px 12px 0;
.usr-img {
margin-top: 4px;
height: 32px;
width: 32px;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
box-sizing: border-box;
padding: 4px;
// img {
// width: 100%;
// height: 100%;
// }
}
.usr-info {
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
margin-left: 10px;
}
}
}
}
.layout-main {
width: 100%;
height: calc(100% - 64px);
.layout-main-header {
height: 137px;
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: space-between;
.layout-main-header-left-box {
width: 800px;
margin-left: 160px;
margin-top: 13px;
.left-box-top {
height: 64px;
display: flex;
.icon {
width: 64px;
height: 64px;
}
.info {
margin-left: 9px;
.info-box1 {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 600;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
margin-top: 5px;
}
.info-box2 {
margin-top: 5px;
height: 22px;
line-height: 22px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
display: flex;
margin-left: -10px;
.info-box2-item{
padding: 0 10px;
}
}
}
}
.left-box-bottom {
display: flex;
height: 40px;
margin-top: 21px;
.left-box-bottom-item {
display: flex;
margin-right: 32px;
margin-top: 3px;
height: 35px;
cursor: pointer;
// &:hover{
// .name {
// color: rgba(22, 119, 255, 1);
// }
// }
.icon {
margin-top: 1px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.name {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
margin-left: 3px;
}
.nameActive {
color: rgba(20, 89, 187, 1);
font-weight: 700;
}
}
.leftBoxBottomItemActive {
border-bottom: 3px solid rgba(20, 89, 187, 1);
}
}
}
.layout-main-header-right-box {
width: 300px;
margin-right: 150px;
margin-top: 19px;
.right-box-top {
.time {
height: 24px;
line-height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: right;
}
.name {
height: 24px;
line-height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: right;
}
}
.right-box-bottom {
margin-top: 24px;
text-align: right;
}
}
}
.layout-main-center {
height: calc(100% - 137px);
overflow-y: auto;
overflow-x: hidden;
}
}
.layout-report-box {
position: absolute;
z-index: 9999;
top: 154px;
left: 0;
width: 100%;
height: 926px;
background: rgba(248, 249, 250, 1);
.report-close {
position: absolute;
top: 24px;
right: 178px;
width: 32px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.report-main {
width: 1600px;
height: 926px;
margin: 0 auto;
background: #fff;
box-sizing: border-box;
padding: 0 69px;
.report-header {
height: 77px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
.report-header-left {
display: flex;
.text {
margin-top: 32px;
width: 70px;
height: 14px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 14px;
}
.select-box {
margin-left: 8px;
margin-top: 23px;
}
}
.report-header-right {
display: flex;
margin-top: 24px;
.btn {
display: flex;
width: 88px;
height: 32px;
margin-left: 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
height: 32px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 32px;
}
}
}
}
.report-content {
display: flex;
margin-top: 35px;
.content-left {
width: 680px;
height: 786px;
// background: #eee;
// overflow-y: auto;
img {
width: 100%;
height: 100%;
}
}
.content-right {
margin-left: 89px;
width: 680px;
height: 786px;
// background: #eee;
// overflow-y: auto;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.tool-box {
position: fixed;
z-index: 10000;
bottom: 80px;
left: 0;
width: 48px;
height: 144px;
border-radius: 0px 10px 10px 0px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.tool1 {
width: 17px;
height: 18px;
margin-top: 17px;
margin-left: 16px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.tool2 {
width: 22px;
height: 20px;
margin-top: 26px;
margin-left: 14px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.tool3 {
width: 20px;
height: 20px;
margin-top: 25px;
margin-left: 15px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/overview/background/index.vue 0 → 100644
浏览文件 @ 46bcc87b
<template>
<div class="introduction-wrap">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">提出背景</div>
<div class="header-btn-box">
<div class="btn" @click="handleClickBox1Btn(1)">
<el-button type="primary" plain v-if="box1BtnActive === 1"
>涉华背景</el-button
>
<el-button type="info" plain v-else>涉华背景</el-button>
</div>
<div class="btn" @click="handleClickBox1Btn(2)">
<el-button type="primary" plain v-if="box1BtnActive === 2"
>全部背景</el-button
>
<el-button type="info" plain v-else>全部背景</el-button>
</div>
</div>
<div class="header-right">
<img src="../assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box1-main">
<div
class="box1-item"
v-for="(item, index) in backgroundList"
:key="index"
>
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.title }}</div>
<div class="open">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
</div>
<div class="box1-footer">
<div class="box1-footer-left">{{ "共计10条指令" }}</div>
<div class="box1-footer-right">
<el-pagination
:page-size="5"
background
layout="prev, pager, next"
:total="10"
/>
</div>
</div>
</div>
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">相关事件</div>
<div class="header-right">
<img src="../assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box2-main">
<div
class="box2-item"
v-for="(item, index) in relatedEvents"
:key="index"
>
<div class="item-left">
<img :src="item.image" alt="" />
</div>
<div class="item-center">
<div class="title">{{ item.title }}</div>
<div class="content">{{ item.content }}</div>
</div>
<div class="item-right">{{ item.time }}</div>
</div>
</div>
<div class="box2-footer">
<img src="./assets/images/more-icon.png" alt="" />
</div>
</div>
</div>
<div class="right">
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">法律依据</div>
<div class="header-right">
<img src="../assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(item, index) in laws" :key="index">
<div class="id">{{ index + 1 }}</div>
<div class="item-header">
<div class="name">{{ item.name }}</div>
<div class="info">{{ item.info }}</div>
</div>
<div class="item-content">{{ item.content }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Img1 from "./assets/images/box2-img1.png";
import Img2 from "./assets/images/box2-img2.png";
import Img3 from "./assets/images/box2-img3.png";
import Img4 from "./assets/images/box2-img4.png";
import Img5 from "./assets/images/box2-img5.png";
const box1BtnActive = ref(1);
const backgroundList = ref([
{
title:
"认为人工智能（AI）是一项将决定未来几十年经济增长、国家安全和全球竞争力的基础性技术",
},
{
title:
"要求美国不仅必须在开发通用和前沿AI能力方面领先，还必须确保美国的人工智能技术、标准和治理模式在全球范围内被采用",
},
{
title: "要求加强与盟友的关系并确保我们持续的技术主导地位",
},
{
title:
"计划通过支持美国原产人工智能技术的全球部署，以维护和扩大美国在人工智能领域的领导地位",
},
{
title: "目的为减少国际社会对由中国开发的人工智能技术的依赖",
},
]);
const relatedEvents = ref([
{
image: Img1,
title: "中美AI模型性能差距迅速缩小",
content:
"斯坦福大学《2025年人工智能指数报告》显示，中美顶尖AI模型在MMLU（大规模多任务语言理解）等主流基准测试中的性能...",
time: "2025-08-30",
},
{
image: Img2,
title: "中国模型以更低成本实现高性能",
content:
"2025年1月，中国公司深度求索（DeepSeek）发布高性能AI推理模型R1，以其极低的训练成本和媲美顶级模型的推理能力受...",
time: "2025-05-16",
},
{
image: Img3,
title: "美国发布《赢得AI竞赛：美国AI行动计划》​",
content:
"特朗普政府发布该计划，核心包括加速创新​（解除监管）、建设AI基础设施​（加速数据中心审批、保障能源供应）和引领国际...",
time: "2025-07-23",
},
{
image: Img4,
title: "中国深入推进“人工智能+”行动",
content:
"中国国务院常务会议审议通过《关于深入实施“人工智能+”行动的意见》，大力推进AI在各领域的规模化商业化应用和和深...",
time: "2025-07-31",
},
{
image: Img5,
title: "美国对华AI芯片出口管制持续升级",
content:
"美国商务部宣布撤销拜登时期的《AI扩散规则》，要求全球使用美国技术的芯片厂商停止向中国出口AI芯片，直接影响英伟达...",
time: "2025-05-20",
},
]);
const laws = ref([
{
name: "《美国法典》",
info: "第3编第301条",
content:
"允许总统通过行政命令（Executive Order）​​ 或其它书面形式授权行政部门或机构的负责人​（如国务卿、财政部长等）代行本属于总统的法定职能（由国会立法授予总统的职能）。",
},
{
name: "《出口管制改革法案》",
info: "",
content:
"该法案授权政府出于国家安全和外交政策目的对特定技术、商品和软件的出口进行管制。确保AI技术不流向“对手国家”是其题中应有之义。",
},
{
name: "《国际紧急经济权力法》",
info: "",
content:
"授予总统在应对“不寻常且极其严重的威胁”时，监管商业和金融交易的广泛权力，包括实施出口管制。这在以往的贸易和科技管制中常被引用。",
},
{
name: "《2019年通过外交捍卫美国商业法》",
info: "第708(c)(3)条",
content:
"授权小企业管理局局长和OSTP主任任命其各自行政部门和机构的高级官员担任EDAG成员。",
},
{
name: "《关于安全、可靠和可信地开发和使用人工智能的行政命令》",
info: "",
content:
"要求强大AI系统的开发者与政府共享安全测试结果，并为AI安全、隐私保护、公平权利及创新竞争等方面制定标准。",
},
]);
</script>
<style lang="scss" scoped>
.introduction-wrap {
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
}
}
}
.left {
width: 1150px;
.box1 {
margin-top: 16px;
width: 1150px;
height: 414px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
margin-left: 22px;
height: 280px;
.box1-item {
width: 1101px;
height: 48px;
margin-bottom: 8px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 2px;
background: rgba(255, 255, 255, 1);
display: flex;
.id {
margin-top: 12px;
margin-left: 15px;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 12px;
background: #e7f3ff;
color: #0a57a6;
}
.title {
width: 1000px;
line-height: 48px;
margin-left: 13px;
}
.open {
width: 16px;
height: 16px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box1-footer {
margin: 20px 22px;
display: flex;
justify-content: space-between;
.box1-footer-left {
height: 20px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
}
}
.box2 {
margin-top: 16px;
width: 1150px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
margin-top: 3px;
margin-left: 31px;
height: 310px;
width: 1090px;
.box2-item {
display: flex;
height: 60px;
margin-bottom: 2px;
.item-left {
width: 64px;
height: 48px;
border-radius: 2px;
img {
width: 100%;
height: 100%;
}
}
.item-center {
width: 892px;
margin-left: 14px;
.title {
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
margin-top: -5px;
}
.content {
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
.item-right {
margin-top: 19px;
margin-left: 30px;
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
.box2-footer {
margin: 5px auto 0;
width: 108px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
.right {
margin-left: 16px;
.box3 {
margin-top: 16px;
width: 576px;
height: 845px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
margin-top: 9px;
width: 520px;
height: 720px;
overflow-y: auto;
.box3-item {
margin-bottom: 24px;
position: relative;
.id {
width: 24px;
height: 24px;
position: absolute;
left: 28px;
top: 1px;
z-index: 99;
text-align: center;
line-height: 24px;
margin-top: 5px;
border-radius: 12px;
background: #e7f3ff;
color: #0a57a6;
}
.item-header {
width: 460px;
height: 35px;
display: flex;
justify-content: space-between;
margin-left: 60px;
.name {
max-width: 460px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 24px;
margin-top: 5px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.info {
text-align: right;
margin-left: 10px;
height: 24px;
margin-top: 5px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.item-content {
margin-left: 66px;
border-top: 1px solid rgba(234, 236, 238, 1);
padding-top: 3px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/overview/index.vue 0 → 100644
浏览文件 @ 46bcc87b
<template>
<div class="decree-overview-wrap">
<div class="left">
<div
class="sider-btn"
:class="{ siderBtnActive: siderBtnActive === item.name }"
@click="handleClickLeftSiderBtn(item)"
v-for="(item, index) in siderList"
:key="index"
>
<div class="btn-text">{{ item.name }}</div>
<div class="btn-icon">
<el-icon v-if="siderBtnActive === item.name" color="#fff"
><CaretRight
/></el-icon>
</div>
</div>
</div>
<div class="main">
<router-view />
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import router from '@/router'
const siderList = ref([
{
name: "政令简介",
path: "/decreeLayout/overview/introduction",
},
{
name: "政令背景",
path: "/decreeLayout/overview/background",
},
]);
const siderBtnActive = ref("政令简介");
const handleClickLeftSiderBtn = (item) => {
siderBtnActive.value = item.name
router.push(item.path)
}
</script>
<style lang="scss" scoped>
.decree-overview-wrap {
width: 1920px;
height: 100%;
overflow: hidden;
background: rgba(247, 248, 249, 1);
display: flex;
.left {
width: 160px;
padding-top: 16px;
.sider-btn {
margin-top: 20px;
margin-left: 23px;
width: 112px;
height: 32px;
display: flex;
line-height: 32px;
border-radius: 16px;
cursor: pointer;
.btn-text {
width: 82px;
height: 32px;
line-height: 32px;
text-align: left;
box-sizing: border-box;
padding-left: 24px;
font-size: 14px;
font-family: Microsoft YaHei;
color: rgba(95, 101, 108, 1);
}
.btn-icon {
width: 22px;
padding-top: 2px;
}
}
.siderBtnActive {
background: rgba(10, 87, 166, 1);
.btn-text {
color: #fff !important;
}
}
}
.main{
width: 1760px;
height: 901px;
}
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/overview/introduction/index.vue 0 → 100644
浏览文件 @ 46bcc87b
<template>
<div class="introduction-wrap">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">基本信息</div>
<div class="header-right">
<img src="../assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box1-main">
<div class="box1-main-left">
<img src="./assets/images/box1-img.png" alt="" />
</div>
<div class="box1-main-right">
<div class="item">
<div class="item-left">{{ "政令全称：" }}</div>
<div class="item-right">{{ "推动美国人工智能技术栈出口" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "英文全称：" }}</div>
<div class="item-right text">
{{ "Promoting the Export of the American AI Technology Stack" }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "相关领域：" }}</div>
<div class="item-right tag-box">
<div class="tag" v-for="(area, index) in areaList" :key="index">
{{ area }}
</div>
</div>
</div>
<div class="item">
<div class="item-left">{{ "签署时间：" }}</div>
<div class="item-right text">{{ "2025年7月23日" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "签署总统：" }}</div>
<div class="item-right text">
{{ "唐纳德·约翰·特朗普(Donald John Trump)" }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "政令编号：" }}</div>
<div class="item-right text">
{{ "第14320号行政命令 (EO 14320)" }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "执行期限：" }}</div>
<div class="item-right text">
{{ "签署后90天内建立机制并开始实施" }}
</div>
</div>
</div>
</div>
</div>
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">主要指令</div>
<div class="header-right">
<img src="../assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box2-main">
<div
class="box2-item"
v-for="(item, index) in majorList"
:key="index"
>
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.title }}</div>
<div class="open">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
</div>
<div class="box2-footer">
<div class="box2-footer-left">{{ "共计10条指令" }}</div>
<div class="box2-footer-right">
<el-pagination
:page-size="5"
background
layout="prev, pager, next"
:total="10"
/>
</div>
</div>
</div>
</div>
<div class="right">
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">立法背景</div>
<div class="header-btn-box">
<div class="btn" @click="handleClickBox1Btn(1)">
<el-button type="primary" plain v-if="box1BtnActive === 1"
>商务部</el-button
>
<el-button type="info" plain v-else>商务部</el-button>
</div>
<div class="btn" @click="handleClickBox1Btn(2)">
<el-button type="primary" plain v-if="box1BtnActive === 2"
>经济外交行动组</el-button
>
<el-button type="info" plain v-else>经济外交行动组</el-button>
</div>
</div>
<div class="header-right">
<img src="../assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box3-top">
<div class="box3-top-left">
<img src="./assets/images/box3-img.png" alt="" />
</div>
<div class="box3-top-right">
<div class="box3-top-right-header">
<div class="header-left">{{ "美国商务部" }}</div>
<div class="header-right">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
<div class="box3-top-right-main">
<div class="main-item">
<div class="item-left">{{ "英文名:" }}</div>
<div class="item-right">
{{ "United States Department of Commerce" }}
</div>
</div>
<div class="main-item">
<div class="item-left">{{ "成立时间:" }}</div>
<div class="item-right">{{ "1903年2月14日" }}</div>
</div>
<div class="main-item">
<div class="item-left">{{ "主要职责:" }}</div>
<div class="item-right">
{{ "国际贸易、进出口管制（R-TX-19）" }}
</div>
</div>
<div class="main-item">
<div class="item-left">{{ "总部地址:" }}</div>
<div class="item-right">
{{ "华盛顿宪法大道1401号胡佛大楼" }}
</div>
</div>
<div class="main-item">
<div class="item-left">{{ "部长:" }}</div>
<div class="item-right">{{ "霍华德·卢特尼克" }}</div>
</div>
</div>
</div>
</div>
<div class="box3-bottom">
<div class="box3-bottom-header">
<div class="header-icon">
<img src="./assets/images/box3-bottom-header-icon.png" alt="">
</div>
<div class="header-title">{{ '机构动态' }}</div>
</div>
<div class="box3-bottom-main">
<el-timeline style="max-width: 500px">
<el-timeline-item
:timestamp="item.time"
placement="top"
v-for="(item, index) in eventList"
:key="index"
>
<div class="timeline-content">
{{ item.content }}
</div>
</el-timeline-item>
</el-timeline>
</div>
<div class="box3-bottom-footer">
<img src="./assets/images/more-icon.png" alt="">
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const box1BtnActive = ref(1);
const areaList = ref([
"人工智能",
"出口管制",
"半导体产业",
"关税",
"光伏产业",
]);
const majorList = ref([
{
title: '要求商务部在90天内建立"全栈式"美国AI出口机制。',
},
{
title: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。',
},
{
title:
'指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。',
},
{
title:
"要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。",
},
{
title: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。',
},
]);
// 人物动态
const eventList = ref([
{
time: '2025-07-31',
content: '美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。'
},
{
time: '2025-07-25',
content: '美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。'
},
{
time: '2025-07-21',
content: '美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口'
},
{
time: '2025-07-12',
content: '美商务部发起第三次反倾销和反补贴日落复审调查。'
}
]);
</script>
<style lang="scss" scoped>
.introduction-wrap {
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
}
}
}
.left {
width: 1150px;
.box1 {
margin-top: 16px;
width: 1150px;
height: 414px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
display: flex;
.box1-main-left {
width: 235px;
height: 332px;
margin-left: 42px;
img {
width: 100%;
height: 100%;
}
}
.box1-main-right {
margin-left: 40px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
.item {
height: 30px;
display: flex;
margin-bottom: 17px;
.item-left {
width: 100px;
}
.tag-box {
display: flex;
.tag {
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
// line-height: 20px;
box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
padding: 1px 8px;
margin-right: 8px;
}
}
.text {
font-weight: normal !important;
}
}
}
}
}
.box2 {
margin-top: 16px;
width: 1150px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
margin-left: 22px;
height: 280px;
.box2-item {
width: 1101px;
height: 48px;
margin-bottom: 8px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 2px;
background: rgba(255, 255, 255, 1);
display: flex;
&:nth-child(2n-1) {
background: rgba(247, 248, 249, 1);
}
.id {
margin-top: 12px;
margin-left: 15px;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 12px;
background: #e7f3ff;
color: #0a57a6;
}
.title {
width: 1000px;
line-height: 48px;
margin-left: 13px;
}
.open {
width: 16px;
height: 16px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box2-footer {
margin: 20px 22px;
display: flex;
justify-content: space-between;
.box2-footer-left {
height: 20px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
}
}
}
.right {
margin-left: 16px;
.box3 {
margin-top: 16px;
width: 576px;
height: 845px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-top {
display: flex;
margin-top: 10px;
height: 261px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.box3-top-left {
width: 120px;
height: 120px;
margin-left: 27px;
img {
width: 100%;
height: 100%;
}
}
.box3-top-right {
margin-left: 30px;
.box3-top-right-header {
display: flex;
height: 26px;
.header-left {
width: 325px;
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.header-right {
margin-left: 9px;
margin-top: 5px;
width: 16px;
height: 16px;
cursor: pointer;
img{
width: 100%;
height: 100%;
}
}
}
.box3-top-right-main {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-top: 4px;
.main-item {
display: flex;
margin-top: 12px;
.item-left{
height: 24px;
width: 80px;
}
.item-right{
width: 291px;
}
}
}
}
}
.box3-bottom {
.box3-bottom-header {
height: 59px;
display: flex;
.header-icon{
margin-left: 22px;
margin-top: 27px;
width: 16px;
height: 16px;
img{
width: 100%;
height: 100%;
}
}
.header-title{
margin-left: 12px;
margin-top: 23px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.box3-bottom-main{
height: 410px;
}
.box3-bottom-footer{
width: 108px;
height: 32px;
margin: 5px auto;
cursor: pointer;
img{
width: 100%;
height: 100%;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/utils/clock.js 0 → 100644
浏览文件 @ 46bcc87b
function getFormattedDateTime(includeTime = false) {
const date = new Date();
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const weekday = weekdays[date.getDay()];
let result = `${year}年${month}月${day}日 ${weekday}`;
if (includeTime) {
const pad = n => n.toString().padStart(2, '0');
result += ` ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
}
return result;
}
export default getFormattedDateTime
\ No newline at end of file
src/views/deepDig/index.vue
浏览文件 @ 46bcc87b
......@@ -24,7 +24,7 @@
<script setup>
import { onMounted, ref } from "vue";
import router from "../../router";
import router from "@/router";
const siderBtnList = ref([
{
......
src/views/exportControl/index.vue 0 → 100644
浏览文件 @ 46bcc87b
<template>
<div class="home-wrapper">
<div class="home-main">
<div class="home-main-header">
<div class="home-main-header-top">
<span>国家科技安全 </span>> <span>中美博弈概览 </span>>
<span style="color: #1459bb; font-weight: bold">出口管制 </span>
</div>
<div class="home-main-header-center">
<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>
<div class="home-main-header-footer">
<div class="home-main-header-footer-item">
<div class="item-top">142</div>
<div class="item-footer">总调查案件数</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">28</div>
<div class="item-footer">调查中案件数</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">326</div>
<div class="item-footer">涉及中企</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">38%</div>
<div class="item-footer">胜诉/和解率</div>
</div>
</div>
</div>
<div class="home-main-center">
<div class="center-top">
<div class="box1">
<div class="box1-left" @click="handleSwithCurBill('left')">
<div class="icon">
<img src="./assets/images/box1-left.png" alt="" />
</div>
</div>
<div class="box1-right" @click="handleSwithCurBill('right')">
<div class="icon">
<img src="./assets/images/box1-right.png" alt="" />
</div>
</div>
<div class="box1-header">
<div class="box1-header-left">
<div class="icon">
<img src="./assets/images/box1-header-icon.png" alt="" />
</div>
<div class="title">{{ "调查进展" }}</div>
</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>
</div>
</div>
</div>
<div class="box2">
<div class="box2-header">
<div class="icon">
<img src="./assets/images/box2-header-icon.png" alt="" />
</div>
<div class="text">{{ "风险信号" }}</div>
<div class="num">{{ warningList.length }}</div>
<div class="more">{{ "更多 >" }}</div>
</div>
<div class="box2-main">
<div
class="box2-main-item"
v-for="(item, index) in warningList"
:key="index"
>
<div
class="item-left"
:class="{
itemLeftStatus1: item.status === '一般风险',
itemLeftStatus2: item.status === '重大风险',
}"
>
{{ item.status }}
</div>
<div class="item-right">
<div class="text">
{{ item.title }}
</div>
<div class="time">{{ item.time }}</div>
</div>
</div>
</div>
<div class="box2-footer">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
</div>
<div class="text">{{ "风险处理" }}</div>
</div>
</div>
</div>
<div class="center-footer">
<div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "涉华法案数量" }}</div>
</div>
<div class="box3-header-right">
<div class="right-box">
<div class="icon1"></div>
<div class="text">{{ "提出法案" }}</div>
</div>
<div class="right-box">
<div class="icon2"></div>
<div class="text">{{ "通过法案" }}</div>
</div>
</div>
</div>
<div class="box3-main" id="chart1"></div>
</div>
<div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/box4-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "法案趋势" }}</div>
</div>
<div class="box4-main">
<div
class="box4-main-item"
v-for="(item, index) in billTrendList"
:key="index"
>
<div
class="left"
:class="{
leftStatus2: index === 1,
leftStatus3: index === 2,
}"
>
{{ index < 3 ? index + 1 : "" }}
</div>
<div class="center">{{ item.title }}</div>
<div class="right">{{ item.no }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="home-main-footer">
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate.hylymc }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate.hylymc }}
</div>
</div>
<div class="select-box">
<el-select
v-model="releaseTime"
placeholder="选择发布时间"
style="width: 120px"
>
<el-option
v-for="item in releaseTimeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<!-- <el-select
v-model="releaseTime"
placeholder="选择发布时间"
style="width: 120px"
>
<el-option
v-for="item in releaseTimeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> -->
</div>
</div>
<div class="home-main-footer-main">
<div
class="main-item"
v-for="(bill, index) in curBillList"
:key="index"
>
<div class="main-item-box1">
<img :src="bill.img" alt="" />
</div>
<div class="main-item-box2">
{{ bill.billName }}
</div>
<div class="main-item-box3">{{ bill.introductionDate }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import router from "@/router/index";
import { getHotBills, getBillsByType, getHylyList } from "@/api/home";
import headerIcon1 from "./assets/icons/header-icon1.png";
import headerIcon2 from "./assets/icons/header-icon2.png";
import headerIcon3 from "./assets/icons/header-icon3.png";
import headerIcon4 from "./assets/icons/header-icon4.png";
import headerIcon5 from "./assets/icons/header-icon5.png";
import getMultiLineChart from "./utils/multiLineChart";
import bill1 from "./assets/images/bill1.png";
import bill2 from "./assets/images/bill2.png";
import bill3 from "./assets/images/bill3.png";
import bill4 from "./assets/images/bill4.png";
import bill5 from "./assets/images/bill5.png";
import bill6 from "./assets/images/bill6.png";
import bill7 from "./assets/images/bill7.png";
import bill8 from "./assets/images/bill8.png";
import bill9 from "./assets/images/bill9.png";
import bill10 from "./assets/images/bill10.png";
import bill11 from "./assets/images/bill11.png";
import bill12 from "./assets/images/bill12.png";
const billList = ref([]);
const curBillListIndex = ref(0);
const handleSwithCurBill = (name) => {
if (name === "left") {
if (curBillListIndex.value === 0) {
curBillListIndex.value = billList.value.length - 1;
} else {
curBillListIndex.value--;
}
} else {
if (curBillListIndex.value === billList.value.length - 1) {
curBillListIndex.value = 0;
} else {
curBillListIndex.value++;
}
}
curBill.value = billList.value[curBillListIndex.value];
};
// 当前法案
const curBill = ref({
billName: "",
billId: 0,
dyqkList: [],
hylyList: [],
tarName: "",
introductionDate: "",
});
const handleClickToDetail = () => {
window.sessionStorage.setItem("billId", curBill.value.billId);
router.push("/billLayout");
};
const billTrendList = ref([
{
title: "限制与中国合作",
no: "H.R.2670",
},
{
title: "限制中国获取技术",
no: "H.R.2471",
},
{
title: "禁止在中国建设半导体产能",
no: "H.R.5895",
},
{
title: "限制中国产燃油进口",
no: "S.870",
},
{
title: "禁止政府部门采购受控半导体或服务",
no: "H.R.6395",
},
{
title: "禁止向部分中国实体提供资金",
no: "H.R.3935",
},
{
title: "限制采购中国生产电池",
no: "H.R.7776",
},
{
title: "重视新兴中国技术公司威胁",
no: "H.R.3935",
},
{
title: "禁止卫星出口至中国",
no: "S.870",
},
{
title: "禁购华为设备",
no: "H.R.5895",
},
]);
const warningList = ref([
{
title: "兰德智库发布2025中国年度科技报告",
time: "一天前",
status: "特别重大",
},
{
title: "信息技术与创新基金会发布《中国正在迅速成...",
time: "一天前",
status: "特别重大",
},
{
title: "首次提出“限制外国敏感实体获取补贴",
time: "一天前",
status: "重大风险",
},
{
title: "将中国企业海外子公司、合资公司纳入受...",
time: "一天前",
status: "重大风险",
},
{
title: "H.R.8333《生物安全法案》将华大基因等...",
time: "一天前",
status: "一般风险",
},
]);
const timelineList = ref([
{
title: "成为公法 No: 119-21。",
time: "2025-07-04",
status: 1,
},
{
title: "总统签署",
time: "2025-07-04",
status: 0,
},
{
title: "提交总统",
time: "2025-07-03",
status: 0,
},
{
title: "重新审议动议搁置案无异议通过。",
time: "2025-07-03 14:31",
status: 0,
},
{
title: "关于‘众议院同意参议院修正案’...",
time: "2025-07-02 14:31",
status: 0,
},
]);
const areaList = ref([
{
name: "跨境电商",
status: 2,
},
{
name: "新能源产业",
status: 4,
},
{
name: "半导体产业",
status: 1,
},
{
name: "关税",
status: 3,
},
{
name: "光伏产业",
status: 2,
},
]);
const curBillList = ref([
{
billName: "大而美法案",
introductionDate: "2025年7月4日",
img: bill1,
},
{
billName: "GENIUS稳定币法案",
introductionDate: "2025年7月5日",
img: bill2,
},
{
billName: "美越贸易协议",
introductionDate: "2025年7月6日",
img: bill3,
},
{
billName: "美越贸易协议",
introductionDate: "2025年7月7日",
img: bill4,
},
{
billName: "汽车零部件25%关税实施规则",
introductionDate: "2025年7月10日",
img: bill5,
},
{
billName: "汽车零部件25%关税实施规则",
introductionDate: "2025年7月12日",
img: bill6,
},
{
billName: "小额豁免包裹政策调整",
introductionDate: "2025年7月14日",
img: bill7,
},
{
billName: "NIH预算否决案",
introductionDate: "2025年7月15日",
img: bill8,
},
{
billName: "得州国会选区重划法案",
introductionDate: "2025年7月17日",
img: bill9,
},
{
billName: "美越贸易协议",
introductionDate: "2025年7月24日",
img: bill10,
},
{
billName: "美越贸易协议",
introductionDate: "2025年8月4日",
img: bill11,
},
{
billName: "美越贸易协议",
introductionDate: "2025年8月8日",
img: bill12,
},
]);
const releaseTime = ref("近一年发布");
const releaseTimeList = ref([
{
label: "近半年发布",
value: "近半年发布",
},
{
label: "近一年发布",
value: "近一年发布",
},
{
label: "近两年发布",
value: "近两年发布",
},
{
label: "近三年发布",
value: "近三年发布",
},
{
label: "近五年发布",
value: "近五年发布",
},
]);
const categoryList = ref([
// "全部分类",
// "生物科技",
// "集成电路",
// "通信网络",
// "量子科技",
// "新能源",
// "新一代信息技术",
// "海洋",
// "先进制造",
// "新材料",
// "航空航天",
]);
const activeCate = ref("全部分类");
const activeHylyId = ref("");
// 获取领域分类
const handleGetHylyList = async () => {
try {
const res = await getHylyList();
console.log("行业领域列表");
categoryList.value = res.data;
const obj = {
id: 0,
hylyid: "",
hylymc: "全部分类",
};
categoryList.value = [obj, ...categoryList.value];
} catch (error) {}
};
const handleClickCate = (cate) => {
console.log(cate);
activeCate.value = cate.hylymc;
activeHylyId.value = cate.hylyid;
handleGetBillsByType();
};
const navList = ref([
{
icon: headerIcon1,
activeIcno: headerIcon1,
name: "首页",
path: "/home",
},
{
icon: headerIcon2,
activeIcno: headerIcon2,
name: "国家",
path: "/country",
},
{
icon: headerIcon3,
activeIcno: headerIcon3,
name: "领域",
path: "/area",
},
{
icon: headerIcon4,
activeIcno: headerIcon4,
name: "要素",
path: "/home",
},
{
icon: headerIcon5,
activeIcno: headerIcon5,
name: "事件",
path: "/home",
},
]);
const activeNavIndex = ref(0);
const handleClickNav = (index, item) => {
activeNavIndex.value = index;
router.push(item.path);
};
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const chart1Data = ref({
title: [
"2024-09",
"2024-10",
"2024-11",
"2024-12",
"2025-01",
"2025-02",
"2025-03",
"2025-04",
"2025-05",
"2025-06",
"2025-07",
"2025-08",
],
data: [
{
name: "提出法案",
value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172],
},
{
name: "通过法案",
value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44],
},
],
});
// 获取热门法案
const handleGetHotBills = async () => {
try {
const res = await getHotBills();
console.log("热门法案", res);
billList.value = res.data;
} catch (error) {
console.error(error);
}
};
// 根据法案类型获取法案列表
const handleGetBillsByType = async () => {
const params = {
type: activeHylyId.value,
};
try {
const res = await getBillsByType(params);
console.log("根据法案类型获取法案列表", res);
curBillList.value = res.data.map((item) => {
return {
billId: item.billId,
billName: item.billName,
introductionDate: item.introductionDate,
img: bill1,
};
});
} catch (error) {}
};
onMounted(async () => {
handleGetHylyList();
await handleGetHotBills();
curBill.value = billList.value[0];
handleGetBillsByType();
let chart1 = getMultiLineChart(
chart1Data.value.title,
chart1Data.value.data[0].value,
chart1Data.value.data[1].value
);
setChart(chart1, "chart1");
});
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper) {
box-shadow: none;
}
.home-wrapper {
.home-main {
width: 1400px;
margin: 0 auto;
background: url("./assets/images/background.png");
background-size: 100% 100%;
.home-main-header {
display: flex;
flex-direction: column;
align-items: center;
.home-main-header-top {
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
margin-top: 43px;
}
.home-main-header-center {
margin-top: 13px;
width: 960px;
height: 48px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
.search {
position: absolute;
right: 1px;
top: 1px;
width: 120px;
height: 42px;
border-radius: 4px;
background: rgba(22, 119, 255, 1);
display: flex;
justify-content: center;
align-items: center;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-footer {
margin-top: 38px;
width: 960px;
height: 64px;
box-sizing: border-box;
padding: 0 108px;
display: flex;
justify-content: space-between;
.home-main-header-footer-item {
padding: 0 10px;
text-align: center;
.item-top {
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 36px;
font-weight: 700;
line-height: 22px;
}
.item-footer {
margin-top: 10px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
}
.home-main-center {
margin-top: 34px;
.center-top {
height: 450px;
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%;
}
}
}
.box1-right {
position: absolute;
right: 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-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
.box1-header-left {
display: flex;
.icon {
width: 18px;
height: 18px;
margin-top: 19px;
img {
width: 100%;
height: 100%;
}
}
.title {
height: 22px;
margin-left: 18px;
margin-top: 16px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
}
.box1-header-right {
margin-top: 19px;
height: 16px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 16px;
cursor: pointer;
}
}
.box1-main {
display: flex;
height: 354px;
margin-top: 22px;
.box1-main-top {
height: 68px;
display: flex;
justify-content: space-between;
.box1-main-top-left {
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.box1-main-top-right {
margin-left: 20px;
display: flex;
.num {
padding: 1px 8px;
height: 24px;
box-sizing: border-box;
border: 1px solid rgba(145, 202, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
}
.tag {
box-sizing: border-box;
border: 1px solid rgba(135, 232, 222, 1);
border-radius: 4px;
background: rgba(230, 255, 251, 1);
}
}
}
}
}
.box2 {
flex: 1;
padding-right: 20px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box2-header {
height: 54px;
display: flex;
.icon {
width: 24px;
height: 22px;
margin-left: 33px;
margin-top: 18px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 22px;
margin-top: 16px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
.num {
width: 24px;
height: 16px;
text-align: center;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 12px;
margin-left: 6px;
margin-top: 17px;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 100px;
background: rgba(255, 77, 79, 1);
}
.more {
margin-top: 19px;
margin-left: 256px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 16px;
}
}
.box2-main {
height: 282px;
overflow-y: auto;
.box2-main-item {
margin-left: 23px;
height: 47px;
width: 464px;
display: flex;
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
margin-top: 4px;
margin-left: 2px;
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 241, 240);
color: rgba(245, 34, 45, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
}
.item-right {
margin-left: 13px;
width: 408px;
height: 47px;
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
width: 348px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 47px;
}
.time {
margin-left: 10px;
line-height: 47px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
}
}
.box2-footer {
position: absolute;
left: 26px;
bottom: 20px;
width: 430px;
height: 42px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 6px;
background: rgba(22, 119, 255, 1);
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
}
.center-footer {
margin-top: 21px;
height: 450px;
display: flex;
.box3 {
width: 900px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 15px;
width: 13px;
height: 13px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 16px;
margin-left: 22px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
}
.box3-header-right {
display: flex;
justify-content: flex-end;
width: 178px;
height: 22px;
.right-box {
display: flex;
margin-top: 16px;
width: 89px;
height: 22px;
justify-content: flex-end;
.icon1 {
margin-top: 5px;
width: 12px;
height: 12px;
border-radius: 6px;
background: rgba(20, 89, 187, 1);
}
.icon2 {
margin-top: 5px;
width: 12px;
height: 12px;
border-radius: 6px;
background: rgba(250, 140, 22, 1);
}
.text {
margin-left: 5px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
}
.box3-main {
height: 397px;
}
}
.box4 {
margin-left: 20px;
width: 521px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box4-header {
width: 452px;
margin: 0 auto;
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.header-icon {
margin-top: 18px;
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 26px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
}
.box4-main {
width: 452px;
margin: 0 auto;
margin-top: 8px;
height: 360px;
overflow-y: auto;
.box4-main-item {
margin-top: 6px;
height: 30px;
display: flex;
.leftStatus3 {
color: rgba(255, 197, 61, 1) !important;
}
.leftStatus2 {
color: rgba(255, 169, 64, 1) !important;
}
.left {
width: 44px;
text-align: left;
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 30px;
color: rgba(206, 79, 81, 1);
}
.center {
width: 300px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
.right {
width: 108px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 30px;
text-align: right;
}
}
}
}
}
}
.home-main-footer {
// width: 100%;
height: 911px;
background: rgba(248, 249, 250, 1);
.home-main-footer-header {
margin-top: 37px;
margin-bottom: 36px;
// width: 1600px;
height: 42px;
// background: orange;
display: flex;
justify-content: space-between;
.btn-box {
width: 1300px;
display: flex;
justify-content: space-between;
.btn {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 42px;
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 0);
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
}
}
.btnActive {
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 1);
color: #fff;
&:hover {
color: #fff;
background: rgba(20, 89, 187, 1);
}
}
}
.select-box {
height: 42px;
box-sizing: border-box;
padding: 5px 0;
}
}
.home-main-footer-main {
width: 100%;
// background: orange;
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
// justify-content: center;
.main-item {
width: 240px;
height: 320px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: #fff;
margin-bottom: 24px;
margin-right: 25px;
.main-item-box1 {
margin-top: 20px;
margin-left: 45px;
width: 150px;
height: 200px;
box-sizing: border-box;
border: 1px solid rgba(240, 242, 244, 1);
img {
width: 100%;
height: 100%;
}
}
.main-item-box2 {
margin-top: 26px;
text-align: center;
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
}
.main-item-box3 {
text-align: center;
height: 30px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/exportControl/utils/multiLineChart.js 0 → 100644
浏览文件 @ 46bcc87b
import * as echarts from 'echarts'
const getMultiLineChart = (dataX, dataY1, dataY2) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
data: ['提出法案', '通过法案'],
show: false
},
color: ['#1459bb', '#fa8c16'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '提出法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(22, 119, 255, 1)' // 起始颜色
}, {
offset: 1,
color: 'rgba(22, 119, 255, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
{
name: '通过法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 172, 77, 1)' // 起始颜色
}, {
offset: 1,
color: 'rgba(255, 172, 77, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY2
}
]
}
}
export default getMultiLineChart
\ No newline at end of file
src/views/influence/index.vue
浏览文件 @ 46bcc87b
......@@ -24,7 +24,7 @@
<script setup>
import { onMounted, ref } from "vue";
import router from "../../router";
import router from "@/router";
const siderBtnList = ref([
{
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue 0 → 100644
浏览文件 @ 46bcc87b
<template>
<div class="home-wrapper">
<div class="home-main">
<div class="home-main-header">
<div class="home-main-header-top">
<span>国家科技安全 </span>> <span>中美博弈概览 </span>>
<span>市场准入限制</span>
</div>
<div class="home-main-header-center">
<el-input
v-model="input"
style="width: 838px; 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>
<div class="home-main-header-footer">
<div class="home-main-header-footer-item">
<div class="item-top">142</div>
<div class="item-footer">总调查案件数</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">28</div>
<div class="item-footer">调查中案件数</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">326</div>
<div class="item-footer">涉及中企</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">38%</div>
<div class="item-footer">胜诉/和解率</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">285</div>
<div class="item-footer">分析报告</div>
</div>
</div>
</div>
<div class="home-main-center">
<div class="center-top">
<div class="box1">
<div class="box1-left">
<img src="./assets/images/box1-left.png" alt="" />
</div>
<div class="box1-right">
<img src="./assets/images/box1-right.png" alt="" />
</div>
<div class="box1-header">
<div class="box1-header-left">
<div class="icon">
<img src="./assets/images/box1-header-icon.png" alt="" />
</div>
<div class="title">{{ "调查进展" }}</div>
</div>
<div class="box1-header-right" @click="handleClickToDetail()">
{{ "查看详情 >" }}
</div>
</div>
<div class="box1-main">
<div class="box1-main-header">
<div class="header-left">
{{
"美国ITC发布对外国制造的半导体器件及其下游产品和组件的337部分终裁"
}}
</div>
<div class="header-right">
<div class="tag1">{{ "337" }}</div>
<div class="tag2">{{ "半导体" }}</div>
</div>
</div>
<div class="info-box">
<div class="info-header">
<div class="icon"></div>
<div class="time">{{ "2025-08-15" }}</div>
<div class="title">{{ "部分终裁" }}</div>
</div>
<div class="info-content">
{{
"对本案行政法官于2025年7月31日作出的初裁（No.36）不予复审，即基于申请方撤回，终止本案对美国注册专利号9,093,473第4项申诉的调查。"
}}
</div>
</div>
<div class="list-box">
<div class="list-item">
<div class="icon"></div>
<div class="list-left">{{ "调查案号：" }}</div>
<div class="list-right">{{ "337-TA-1443" }}</div>
</div>
<div class="list-item">
<div class="icon"></div>
<div class="list-left">{{ "涉及产品：" }}</div>
<div class="list-right">
{{
"对美出口、在美进口及销售的特定外国制造的半导体器件及其下游产品和组件（Certain Foreign-Fabricated ..."
}}
</div>
</div>
<div class="list-item">
<div class="icon"></div>
<div class="list-left">{{ "原告：" }}</div>
<div class="list-right">
{{
"爱尔兰Longitude Licensing Ltd.、爱尔兰Marlin Semiconductor Limited"
}}
</div>
</div>
<div class="list-item">
<div class="icon"></div>
<div class="list-left">{{ "被告：" }}</div>
<div class="list-right">
{{
"中国台湾地区Taiwan Semiconductor Manufacturing Company Limited of Taiwan、美国Apple Inc. of ...."
}}
</div>
</div>
<div class="list-item">
<div class="icon"></div>
<div class="list-left">{{ "涉案专利" }}</div>
<div class="list-right">
{{ "美国注册专利号7745847、9093473、9147747、9184292" }}
</div>
</div>
</div>
</div>
</div>
<div class="box2">
<div class="box2-header">
<div class="icon">
<img src="./assets/images/box2-header-icon.png" alt="" />
</div>
<div class="title">
<div class="text">{{ "风险信号" }}</div>
<div class="num">{{ warningList.length }}</div>
</div>
<div class="more">{{ "更多 >" }}</div>
</div>
<div class="box2-main">
<div
class="box2-main-item"
v-for="(item, index) in warningList"
:key="index"
>
<div
class="item-left"
:class="{
itemLeftStatus1: item.status === '一般风险',
itemLeftStatus2: item.status === '重大风险',
}"
>
{{ item.status }}
</div>
<div class="item-right">
<div class="text">
{{ item.title }}
</div>
<div class="time">{{ item.time }}</div>
</div>
</div>
</div>
<div class="box2-footer">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
</div>
<div class="text">{{ "风险处理" }}</div>
</div>
</div>
</div>
<div class="center-center">
<div class="center-center-box1">
<div class="header">
<div class="header-left">{{ "301调查" }}</div>
<div class="header-right">{{ "52项" }}</div>
</div>
<div class="content-box">
<div class="item">{{ "可能措施: 加征关税、限制进口" }}</div>
<div class="item">
{{ '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"' }}
</div>
</div>
</div>
<div class="center-center-box2">
<div class="header">
<div class="header-left">{{ "232调查" }}</div>
<div class="header-right">{{ "3项" }}</div>
</div>
<div class="content-box">
<div class="item">{{ "可能措施: 加征关税、限制进口" }}</div>
<div class="item">
{{
"依据《1962年贸易扩展法》第232条评估进口产品对国家安全影响"
}}
</div>
</div>
</div>
<div class="center-center-box3">
<div class="header">
<div class="header-left">{{ "337调查" }}</div>
<div class="header-right">{{ "87项" }}</div>
</div>
<div class="content-box">
<div class="item">{{ "可能措施: 排除令、禁止令" }}</div>
<div class="item">
{{ "依据《1930年关税法》第337条针对知识产权侵权行为" }}
</div>
</div>
</div>
</div>
<div class="center-footer">
<div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "调查数量" }}</div>
</div>
<div class="box3-header-right">
<div class="right-box rightBoxActive">
{{ "按年度" }}
</div>
<div class="right-box">
{{ "按月度" }}
</div>
</div>
</div>
<div class="box3-main" id="chart1"></div>
</div>
<div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/box4-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "涉及领域" }}</div>
<div class="box4-header-right">
<el-select
v-model="curAreaYear"
placeholder="选择发布时间"
style="width: 120px"
>
<el-option
v-for="item in areaYearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<div class="box4-main" id="chart2"></div>
</div>
</div>
</div>
<div class="home-main-footer">
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate }}
</div>
</div>
<div class="select-box">
<el-select
v-model="releaseTime"
placeholder="选择发布时间"
style="width: 120px"
>
<el-option
v-for="item in releaseTimeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<!-- <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="left">
<div class="left-box1">
<div class="left-box1-header">
<div class="icon"></div>
<div class="title">{{ "发布时间" }}</div>
</div>
<div class="left-box1-main">
<div
class="time-label"
v-for="(item, index) in surveyYearList"
:key="index"
>
<el-checkbox
v-model="item.selected"
:label="item.name"
size="large"
/>
</div>
</div>
</div>
<div class="left-box2">
<div class="left-box2-header">
<div class="icon"></div>
<div class="title">{{ "涉及领域" }}</div>
</div>
<div class="left-box2-main">
<div
class="area-label"
v-for="(item, index) in surveyAreaList"
:key="index"
>
<el-checkbox
v-model="item.selected"
:label="item.name"
size="large"
/>
</div>
</div>
</div>
</div>
<div class="right">
<div class="right-header">
<div class="header-item1">{{ "调查名称" }}</div>
<div class="header-item2">{{ "调查案号" }}</div>
<div class="header-item3">{{ "涉及领域" }}</div>
<div class="header-item4">{{ "案件状态" }}</div>
<div class="header-item5">{{ "发布日期" }}</div>
</div>
<div class="right-main">
<div class="item" v-for="(val, idx) in surveyInfoList" :key="idx">
<div class="item-box1">
<div
class="name"
:class="{
name1: val.name === '301',
name2: val.name === '337',
name3: val.name === '232',
}"
>
{{ val.name }}
</div>
<div class="title">{{ val.title }}</div>
</div>
<div class="item-box2">{{ val.num }}</div>
<div class="item-box3">{{ val.area }}</div>
<div class="item-box4">{{ val.status }}</div>
<div class="item-box5">{{ val.releaseDate }}</div>
</div>
</div>
<div class="right-footer">
<div class="footer-left">
{{ "共105项调查" }}
</div>
<div class="footer-right">
<el-pagination
background
layout="prev, pager, next"
:total="105"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import router from "@/router";
import getMultiLineChart from "./utils/multiLineChart";
import getPieChart from "./utils/piechart";
const handleClickToDetail = () => {
router.push("/marketAccessLayout");
};
// 风险信号
const warningList = ref([
{
title: "关于对中华人民共和国合成阿片类药物供应链...",
time: "一天前",
status: "特别重大",
},
{
title: "关于调整汽车及汽车零部件进口的公告",
time: "一天前",
status: "特别重大",
},
{
title: "关于调整钢铁进口的公告",
time: "一天前",
status: "重大风险",
},
{
title: "关于使用互惠关税规范进口以纠正导致大规模...",
time: "一天前",
status: "重大风险",
},
{
title: "关于修订对中华人民共和国低价值进口商品适...",
time: "一天前",
status: "一般风险",
},
]);
const releaseTime = ref("近一年发布");
const releaseTimeList = ref([
{
label: "近半年发布",
value: "近半年发布",
},
{
label: "近一年发布",
value: "近一年发布",
},
{
label: "近两年发布",
value: "近两年发布",
},
{
label: "近三年发布",
value: "近三年发布",
},
{
label: "近五年发布",
value: "近五年发布",
},
]);
const categoryList = ref(["全部调查", "301调查", "232调查", "337调查"]);
const activeCate = ref("全部调查");
const activeHylyId = ref("");
const handleClickCate = (cate) => {
console.log(cate);
activeCate.value = cate.hylymc;
activeHylyId.value = cate.hylyid;
handleGetBillsByType();
};
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const chart1Data = ref({
title: [
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2022",
"2023",
"2024",
"2025",
],
data: [
{
name: "337调查",
value: [73, 32, 42, 48, 38, 49, 63, 75, 70, 86, 95, 87],
},
{
name: "301调查",
value: [8, 3, 2, 8, 9, 10, 12, 18, 16, 18, 20, 22],
},
{
name: "232调查",
value: [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 2, 3],
},
],
});
// 涉及领域
const curAreaYearList = ref([
{
name: "半导体",
value: 50,
},
{
name: "电子设备",
value: 46,
},
{
name: "显示技术",
value: 40,
},
{
name: "新能源",
value: 32,
},
{
name: "通信设备",
value: 31,
},
{
name: "汽车",
value: 30,
},
{
name: "其他",
value: 24,
},
]);
const chart2ColorList = ref([
"#4096FF",
"#FFA39E",
"#ADC6FF",
"#FFC069",
"#B5F5EC",
"#B37FEB",
"#D6E4FF",
]);
const areaYearList = ref([
{
label: "2025",
value: "2025",
},
{
label: "2024",
value: "2024",
},
{
label: "2023",
value: "2023",
},
{
label: "2022",
value: "2022",
},
{
label: "2021",
value: "2021",
},
{
label: "2020",
value: "2020",
},
]);
const curAreaYear = ref("2025");
const surveyYearList = ref([
{
name: "全部时间",
selected: false,
},
{
name: "2025年",
selected: false,
},
{
name: "2024年",
selected: false,
},
{
name: "2023年",
selected: false,
},
{
name: "2022年",
selected: false,
},
{
name: "2021年",
selected: false,
},
]);
const surveyAreaList = ref([
{
name: "人工智能",
selected: false,
},
{
name: "半导体/芯片",
selected: false,
},
{
name: "电子设备",
selected: false,
},
{
name: "显示技术",
selected: false,
},
{
name: "新能源",
selected: false,
},
{
name: "通信设备",
selected: false,
},
]);
const surveyInfoList = ref([
{
name: "301",
title: "某些车辆远程信息处理、车队管理以及基于视频的安全系统、设备和组件",
num: "337-TA-1393",
area: "半导体",
status: "正在调查",
releaseDate: "2025年9月1日",
},
{
name: "337",
title: "某些蒸发器设备,其中使用的墨盒及其组件(II)",
num: "337-TA-1392",
area: "制造业",
status: "正在调查",
releaseDate: "2025年8月15日",
},
{
name: "301",
title: "某些Topcon太阳能电池,模块,面板,组件及其组件和包含相同产品",
num: "337-TA-1422和337-TA-1425(合并)",
area: "半导体",
status: "正在调查",
releaseDate: "2025年8月10日",
},
{
name: "337",
title: "某些光伏干线总线电缆组件及其组件",
num: "337-TA-1438",
area: "光伏",
status: "正在调查",
releaseDate: "2025年7月29日",
},
{
name: "337",
title: "某些外国制造的半导体器件、包含相同产品及其组件的组件",
num: "337-TA-1443",
area: "半导体",
status: "正在调查",
releaseDate: "2025年7月18日",
},
{
name: "301",
title: "某些车辆远程信息处理、车队管理以及基于视频的安全系统、设备及其组件",
num: "337-TA-1441",
area: "半导体",
status: "终止调查",
releaseDate: "2025年7月1日",
},
{
name: "337",
title: "某些包含相同功能的无线前端模块和设备",
num: "337-TA-1435",
area: "半导体",
status: "正在调查",
releaseDate: "2025年6月14日",
},
{
name: "337",
title:
"用于液晶显示器的某些玻璃基板,含有相同产品的产品以及制造相同方法的玻璃基板",
num: "337-TA-1433",
area: "显示技术",
status: "正在调查",
releaseDate: "2025年6月5日",
},
{
name: "337",
title: "某些Topcon太阳能电池,模块,面板,组件及其组件和包含相同产品",
num: "337-TA-1422和337-TA-1425(合并)",
area: "光伏",
status: "终止调查",
releaseDate: "2025年8月10日",
},
{
name: "232",
title: "某些蒸发器设备,其中使用的墨盒及其组件(II)",
num: "337-TA-1392",
area: "制造业",
status: "终止调查",
releaseDate: "2025年8月15日",
},
]);
onMounted(async () => {
let chart1 = getMultiLineChart(
chart1Data.value.title,
chart1Data.value.data[0].value,
chart1Data.value.data[1].value,
chart1Data.value.data[2].value
);
setChart(chart1, "chart1");
let chart2 = getPieChart(curAreaYearList.value, chart2ColorList.value);
setChart(chart2, "chart2");
});
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper) {
box-shadow: none;
}
.home-wrapper {
.home-main {
// width: 1400px;
width: 100%;
margin: 0 auto;
background: url("./assets/images/background.png");
background-size: 100% 100%;
.home-main-header {
display: flex;
flex-direction: column;
align-items: center;
// position: sticky;
// left: 0;
// top: 0;
// z-index: 9999;
.home-main-header-top {
box-sizing: border-box;
width: 100%;
height: 64px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 64px;
background: url("./assets/images/header-bg.png");
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
color: #fff;
padding-left: 160px;
}
.home-main-header-center {
margin-top: 13px;
width: 960px;
height: 48px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
.search {
position: absolute;
right: 1px;
top: 1px;
width: 120px;
height: 42px;
border-radius: 4px;
background: rgba(22, 119, 255, 1);
display: flex;
justify-content: center;
align-items: center;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-footer {
margin-top: 38px;
width: 960px;
height: 64px;
box-sizing: border-box;
padding: 0 108px;
display: flex;
justify-content: space-between;
.home-main-header-footer-item {
padding: 0 10px;
text-align: center;
.item-top {
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 36px;
font-weight: 700;
line-height: 22px;
}
.item-footer {
margin-top: 10px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
}
.home-main-center {
margin-top: 34px;
.center-top {
height: 450px;
display: flex;
justify-content: center;
gap: 20px;
.box1 {
width: 1064px;
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: 220px;
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.box1-right {
position: absolute;
right: 0;
top: 220px;
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.box1-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
.box1-header-left {
display: flex;
.icon {
width: 18px;
height: 18px;
margin-top: 19px;
img {
width: 100%;
height: 100%;
}
}
.title {
width: 152px;
height: 53px;
margin-left: 18px;
color: #fff;
background: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 53px;
text-align: center;
}
}
.box1-header-right {
margin-top: 19px;
height: 16px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 16px;
cursor: pointer;
}
}
.box1-main {
width: 1064px;
height: 354px;
margin-top: 22px;
.box1-main-header {
width: 990px;
height: 54px;
display: flex;
justify-content: space-between;
.header-left {
padding-left: 22px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.header-right {
display: flex;
width: 200px;
justify-content: flex-end;
.tag1 {
height: 24px;
line-height: 24px;
padding: 0 8px;
box-sizing: border-box;
color: rgba(10, 87, 166, 1);
border: 1px solid rgba(145, 202, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
}
.tag2 {
margin-left: 8px;
height: 24px;
line-height: 24px;
padding: 0 8px;
box-sizing: border-box;
color: rgba(19, 168, 168, 1);
border: 1px solid rgba(135, 232, 222, 1);
border-radius: 4px;
background: rgba(230, 255, 251, 1);
}
}
}
.info-box {
margin-left: 6px;
width: 989px;
height: 108px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.info-header {
height: 38px;
display: flex;
.icon {
width: 4px;
height: 4px;
border-radius: 2px;
background: rgba(59, 65, 75, 1);
margin-left: 24px;
margin-top: 20px;
}
.time {
width: 98px;
height: 24px;
margin-top: 10px;
margin-left: 12px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.title {
margin-left: 11px;
margin-top: 10px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.info-content {
width: 909px;
height: 60px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
margin-left: 41px;
margin-top: 4px;
}
}
.list-box {
margin-top: 18px;
margin-left: 28px;
width: 940px;
height: 185px;
.list-item {
height: 37px;
display: flex;
.icon {
width: 4px;
height: 4px;
border-radius: 2px;
background: rgba(59, 65, 75, 1);
margin-top: 16px;
}
.list-left {
margin-left: 18px;
line-height: 37px;
width: 100px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
.list-right {
line-height: 37px;
margin-left: 17px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
}
}
}
}
.box2 {
width: 521px;
padding-right: 20px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box2-header {
height: 54px;
display: flex;
.icon {
width: 24px;
height: 22px;
margin-left: 33px;
margin-top: 18px;
img {
width: 100%;
height: 100%;
}
}
.title {
display: flex;
width: 148px;
background: rgba(206, 79, 81, 1);
margin-left: 25px;
.text {
margin-left: 15px;
margin-top: 16px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
.num {
width: 24px;
height: 20px;
line-height: 20px;
text-align: center;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 12px;
margin-left: 15px;
margin-top: 18px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.3);
}
}
.more {
margin-top: 19px;
margin-left: 200px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 16px;
cursor: pointer;
}
}
.box2-main {
height: 282px;
overflow-y: auto;
.box2-main-item {
margin-left: 23px;
height: 47px;
width: 464px;
display: flex;
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
margin-top: 4px;
margin-left: 2px;
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 241, 240);
color: rgba(245, 34, 45, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
}
.item-right {
margin-left: 13px;
width: 408px;
height: 47px;
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
width: 348px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 47px;
}
.time {
margin-left: 10px;
line-height: 47px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
}
}
.box2-footer {
position: absolute;
left: 40px;
bottom: 20px;
width: 430px;
height: 42px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 6px;
background: rgba(22, 119, 255, 1);
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
}
.center-center {
width: 1600px;
margin: 24px auto;
height: 142px;
margin-top: 24px;
display: flex;
justify-content: space-between;
.center-center-box1 {
width: 520px;
height: 142px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
position: relative;
&::before {
content: "";
position: absolute;
z-index: 99;
left: 0;
top: 15px;
width: 4px;
height: 111px;
background: rgba(250, 140, 22, 1);
}
.header {
height: 56px;
display: flex;
justify-content: space-between;
.header-left {
margin-left: 30px;
margin-top: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.header-right {
margin-top: 28px;
margin-right: 35px;
height: 24px;
color: rgba(250, 140, 22, 1);
font-family: Microsoft YaHei;
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
}
.content-box {
margin-left: 30px;
.item {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-top: 8px;
}
}
}
.center-center-box2 {
width: 520px;
height: 142px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
position: relative;
&::before {
content: "";
position: absolute;
z-index: 99;
left: 0;
top: 15px;
width: 4px;
height: 111px;
background: rgba(114, 46, 209, 1);
}
.header {
height: 56px;
display: flex;
justify-content: space-between;
.header-left {
margin-left: 30px;
margin-top: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.header-right {
margin-top: 28px;
margin-right: 35px;
height: 24px;
color: rgba(114, 46, 209, 1);
font-family: Microsoft YaHei;
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
}
.content-box {
margin-left: 30px;
.item {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-top: 8px;
}
}
}
.center-center-box3 {
width: 520px;
height: 142px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
position: relative;
&::before {
content: "";
position: absolute;
z-index: 99;
left: 0;
top: 15px;
width: 4px;
height: 111px;
background: rgba(10, 87, 166, 1);
}
.header {
height: 56px;
display: flex;
justify-content: space-between;
.header-left {
margin-left: 30px;
margin-top: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.header-right {
margin-top: 28px;
margin-right: 35px;
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
}
.content-box {
margin-left: 30px;
.item {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-top: 8px;
}
}
}
}
.center-footer {
margin-top: 21px;
height: 450px;
display: flex;
justify-content: center;
.box3 {
width: 1064px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 15px;
width: 13px;
height: 13px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 16px;
margin-left: 22px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
}
.box3-header-right {
display: flex;
justify-content: flex-end;
width: 178px;
height: 22px;
margin-top: 11px;
.right-box {
height: 28px;
padding: 0 8px;
text-align: center;
line-height: 28px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
margin-left: 8px;
cursor: pointer;
}
.rightBoxActive {
color: rgba(10, 87, 166, 1);
border: 1px solid rgba(10, 87, 166, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
}
}
}
.box3-main {
height: 397px;
}
}
.box4 {
margin-left: 20px;
width: 521px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box4-header {
width: 452px;
margin: 0 auto;
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
position: relative;
.header-icon {
margin-top: 18px;
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 26px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
.box4-header-right {
position: absolute;
right: 0;
top: 10px;
}
}
.box4-main {
width: 452px;
height: 360px;
margin: 8px auto;
}
}
}
}
.home-main-footer {
// width: 100%;
height: 1059px;
background: rgba(248, 249, 250, 1);
.home-main-footer-header {
width: 1600px;
height: 42px;
margin: 36px auto;
// background: orange;
display: flex;
justify-content: space-between;
.btn-box {
width: 1000px;
display: flex;
.btn {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 42px;
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 0);
margin-right: 20px;
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
}
}
.btnActive {
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 1);
color: #fff;
&:hover {
color: #fff;
background: rgba(20, 89, 187, 1);
}
}
}
.select-box {
height: 42px;
box-sizing: border-box;
padding: 5px 0;
}
}
.home-main-footer-main {
width: 1600px;
margin-bottom: 20px;
height: 985px;
// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
// background: rgba(255, 255, 255, 1);
margin: 0 auto;
box-sizing: border-box;
// padding: 20px;
display: flex;
.left {
width: 300px;
height: 560px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.left-box1 {
margin-top: 17px;
height: 260px;
.left-box1-header {
display: flex;
.icon {
width: 8px;
height: 16px;
margin-top: 4px;
border-radius: 2px 2px 0 0;
background: rgba(10, 87, 166, 1);
}
.title {
height: 2px;
margin-left: 17px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.left-box1-main {
margin-top: 10px;
.time-label {
height: 35px;
margin-left: 25px;
}
}
}
.left-box2 {
margin-top: 17px;
height: 260px;
.left-box2-header {
display: flex;
.icon {
width: 8px;
height: 16px;
margin-top: 4px;
border-radius: 2px 2px 0 0;
background: rgba(10, 87, 166, 1);
}
.title {
height: 2px;
margin-left: 17px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.left-box2-main {
margin-top: 10px;
.area-label {
height: 35px;
margin-left: 25px;
}
}
}
}
.right {
margin-left: 16px;
width: 1284px;
height: 899px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.right-header {
height: 54px;
background: rgba(59, 65, 75, 1);
display: flex;
.header-item1 {
width: 500px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 80px;
box-sizing: border-box;
}
.header-item2 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item3 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item4 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item5 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
}
.right-main {
height: 780px;
// background: orange;
.item {
display: flex;
padding: 16px 0;
// height: 56px;
&:nth-child(2n) {
background: rgba(247, 248, 249, 1);
}
.item-box1 {
width: 500px;
display: flex;
.name {
height: 22px;
padding: 0 8px;
box-sizing: border-box;
border-radius: 4px;
margin-left: 32px;
margin-top: 10px;
// display: flex;
// align-items: center;
}
.name1 {
color: rgba(250, 140, 22, 1);
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
}
.name2 {
color: rgba(10, 87, 166, 1);
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
}
.name3 {
color: rgba(114, 46, 209, 1);
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
}
.title {
margin-left: 12px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
display: flex;
align-items: center;
}
}
.item-box2 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box3 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box4 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box5 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
}
}
.right-footer {
display: flex;
// height: 60px;
// background: orange;
justify-content: space-between;
.footer-left {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin-left: 24px;
margin-top: 6px;
}
.footer-right {
margin-right: 24px;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessHome/utils/multiLineChart.js 0 → 100644
浏览文件 @ 46bcc87b
import * as echarts from 'echarts'
const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
// data: ['提出法案', '通过法案'],
show: false
},
color: ['#0A57A6', '#FA8C16','#722ED1'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '337调查',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(10, 87, 166, 0.7)' // 起始颜色
}, {
offset: 1,
color: 'rgba(10, 87, 166, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
{
name: '301调查',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 172, 77, 0.7)' // 起始颜色
}, {
offset: 1,
color: 'rgba(255, 172, 77, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY2
},
{
name: '232调查',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(114, 46, 209, 0.7)' // 起始颜色
}, {
offset: 1,
color: 'rgba(114, 46, 209, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY3
}
]
}
}
export default getMultiLineChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessHome/utils/piechart.js 0 → 100644
浏览文件 @ 46bcc87b
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [70, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 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: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/case/index.vue 0 → 100644
浏览文件 @ 46bcc87b
<template>
<div class="case-wrapper">
<div class="wrapper-header">
<div class="search-box">
<el-input
v-model="searchText"
style="width: 300px; height: 32px"
placeholder="搜索调查案件"
@keyup.enter="handleSearch"
>
<template #append
><el-button @click="handleSearch"
><el-icon><Search color="#84888E" /></el-icon></el-button
></template>
</el-input>
</div>
<div class="select-box">
<el-select
v-model="releaseTime"
placeholder="选择发布时间"
style="width: 120px"
>
<el-option
v-for="item in releaseTimeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<div class="wrapper-main">
<div class="left">
<div class="left-box1">
<div class="left-box1-header">
<div class="icon"></div>
<div class="title">{{ "发布时间" }}</div>
</div>
<div class="left-box1-main">
<div class="time-label">
<el-checkbox
v-model="allYear.selected"
:label="allYear.name"
size="large"
/>
</div>
<div
class="time-label"
v-for="(item, index) in surveyYearList"
:key="index"
>
<el-checkbox
v-model="item.selected"
:label="item.name"
size="large"
/>
</div>
</div>
</div>
<div class="left-box2">
<div class="left-box2-header">
<div class="icon"></div>
<div class="title">{{ "涉及领域" }}</div>
</div>
<div class="left-box2-main">
<div
class="area-label"
v-for="(item, index) in surveyAreaList"
:key="index"
>
<el-checkbox
v-model="item.selected"
:label="item.name"
size="large"
/>
</div>
</div>
</div>
</div>
<div class="right">
<div class="right-header">
<div class="header-item1">{{ "调查名称" }}</div>
<div class="header-item2">{{ "调查案号" }}</div>
<div class="header-item3">{{ "涉及领域" }}</div>
<div class="header-item4">{{ "案件状态" }}</div>
<div class="header-item5">{{ "发布日期" }}</div>
</div>
<div class="right-main">
<div
class="case-item"
v-for="(val, idx) in curSurveyInfoList"
:key="idx"
>
<div class="item-box1">
<div
class="name"
:class="{
name1: val.name === '301',
name2: val.name === '337',
name3: val.name === '232',
}"
>
{{ val.name }}
</div>
<div class="title">{{ val.title }}</div>
</div>
<div class="item-box2">{{ val.num }}</div>
<div class="item-box3">{{ val.area }}</div>
<div class="item-box4">{{ val.status }}</div>
<div class="item-box5">{{ val.releaseDate }}</div>
</div>
</div>
<div class="right-footer">
<div class="footer-left">
{{ "共105项调查" }}
</div>
<div class="footer-right">
<el-pagination background layout="prev, pager, next" :total="105" />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
const releaseTime = ref("近一年发布");
const releaseTimeList = ref([
{
label: "近半年发布",
value: "近半年发布",
},
{
label: "近一年发布",
value: "近一年发布",
},
{
label: "近两年发布",
value: "近两年发布",
},
{
label: "近三年发布",
value: "近三年发布",
},
{
label: "近五年发布",
value: "近五年发布",
},
]);
const allYear = {
name: "全部时间",
selected: true,
};
const surveyYearList = ref([
{
name: "2025年",
selected: false,
},
{
name: "2024年",
selected: false,
},
{
name: "2023年",
selected: false,
},
{
name: "2022年",
selected: false,
},
{
name: "2021年",
selected: false,
},
]);
const surveyAreaList = ref([
{
name: "人工智能",
selected: false,
},
{
name: "半导体/芯片",
selected: false,
},
{
name: "电子设备",
selected: false,
},
{
name: "显示技术",
selected: false,
},
{
name: "新能源",
selected: false,
},
{
name: "通信设备",
selected: false,
},
]);
const surveyInfoList = ref([
{
name: "301",
title: "某些车辆远程信息处理、车队管理以及基于视频的安全系统、设备和组件",
num: "337-TA-1393",
area: "半导体",
status: "正在调查",
releaseDate: "2025年9月1日",
},
{
name: "337",
title: "某些蒸发器设备,其中使用的墨盒及其组件(II)",
num: "337-TA-1392",
area: "制造业",
status: "正在调查",
releaseDate: "2025年8月15日",
},
{
name: "301",
title: "某些Topcon太阳能电池,模块,面板,组件及其组件和包含相同产品",
num: "337-TA-1422和337-TA-1425(合并)",
area: "半导体",
status: "正在调查",
releaseDate: "2025年8月10日",
},
{
name: "337",
title: "某些光伏干线总线电缆组件及其组件",
num: "337-TA-1438",
area: "光伏",
status: "正在调查",
releaseDate: "2024年7月29日",
},
{
name: "337",
title: "某些外国制造的半导体器件、包含相同产品及其组件的组件",
num: "337-TA-1443",
area: "半导体",
status: "正在调查",
releaseDate: "2024年7月18日",
},
{
name: "301",
title: "某些车辆远程信息处理、车队管理以及基于视频的安全系统、设备及其组件",
num: "337-TA-1441",
area: "半导体",
status: "终止调查",
releaseDate: "2023年7月1日",
},
{
name: "337",
title: "某些包含相同功能的无线前端模块和设备",
num: "337-TA-1435",
area: "半导体",
status: "正在调查",
releaseDate: "2022年6月14日",
},
{
name: "337",
title:
"用于液晶显示器的某些玻璃基板,含有相同产品的产品以及制造相同方法的玻璃基板",
num: "337-TA-1433",
area: "显示技术",
status: "正在调查",
releaseDate: "2022年6月5日",
},
// {
// name: "337",
// title: "某些Topcon太阳能电池,模块,面板,组件及其组件和包含相同产品",
// num: "337-TA-1422和337-TA-1425(合并)",
// area: "光伏",
// status: "终止调查",
// releaseDate: "2025年8月10日",
// },
// {
// name: "232",
// title: "某些蒸发器设备,其中使用的墨盒及其组件(II)",
// num: "337-TA-1392",
// area: "制造业",
// status: "终止调查",
// releaseDate: "2025年8月15日",
// },
]);
const curSurveyInfoList = ref([]);
const searchText = ref("");
const handleSearch = () => {
curSurveyInfoList.value = surveyInfoList.value.filter((item) => {
return item.title.indexOf(searchText.value) > -1;
});
};
watch(
() => surveyYearList.value,
(val) => {
const selectedArr = val
.filter((item) => {
return item.selected;
})
.map((item) => item.name);
let arr = [];
selectedArr.forEach((item) => {
let arr1 = surveyInfoList.value.filter((vall) => {
return vall.releaseDate.indexOf(item) > -1;
});
arr = [...arr, ...arr1];
});
curSurveyInfoList.value = arr;
},
{
deep: true,
}
);
watch(
() => surveyAreaList.value,
(val) => {
const selectedArr = val
.filter((item) => {
return item.selected;
})
.map((item) => item.name);
let arr = [];
selectedArr.forEach((item) => {
let arr1 = surveyInfoList.value.filter((vall) => {
return vall.area.indexOf(item) > -1 || item.indexOf(vall.area) > -1;
});
arr = [...arr, ...arr1];
});
curSurveyInfoList.value = arr;
},
{
deep: true,
}
);
onMounted(() => {
curSurveyInfoList.value = surveyInfoList.value;
});
</script>
<style lang="scss" scoped>
.case-wrapper {
width: 100%;
height: 100%;
overflow-y: auto;
.wrapper-header {
width: 1600px;
height: 32px;
margin: 16px auto;
display: flex;
justify-content: space-between;
.search-box {
width: 300px;
display: flex;
}
.select-box {
height: 32px;
box-sizing: border-box;
}
}
.wrapper-main {
width: 1600px;
// height: 935px;
height: 800px;
margin: 0 auto;
box-sizing: border-box;
display: flex;
.left {
width: 300px;
height: 560px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.left-box1 {
margin-top: 17px;
height: 260px;
.left-box1-header {
display: flex;
.icon {
width: 8px;
height: 16px;
margin-top: 4px;
border-radius: 2px 2px 0 0;
background: rgba(10, 87, 166, 1);
}
.title {
height: 2px;
margin-left: 17px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.left-box1-main {
margin-top: 10px;
.time-label {
height: 35px;
margin-left: 25px;
}
}
}
.left-box2 {
margin-top: 17px;
height: 260px;
.left-box2-header {
display: flex;
.icon {
width: 8px;
height: 16px;
margin-top: 4px;
border-radius: 2px 2px 0 0;
background: rgba(10, 87, 166, 1);
}
.title {
height: 2px;
margin-left: 17px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.left-box2-main {
margin-top: 10px;
.area-label {
height: 35px;
margin-left: 25px;
}
}
}
}
.right {
margin-left: 16px;
width: 1284px;
// height: 896px;
height: 780px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.right-header {
height: 54px;
background: rgba(59, 65, 75, 1);
display: flex;
.header-item1 {
width: 500px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 80px;
box-sizing: border-box;
}
.header-item2 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item3 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item4 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item5 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
}
.right-main {
height: 680px;
overflow-y: auto;
.case-item {
display: flex;
padding: 16px 0;
// height: 56px;
&:nth-child(2n) {
background: rgba(247, 248, 249, 1);
}
.item-box1 {
width: 500px;
display: flex;
.name {
height: 22px;
padding: 0 8px;
box-sizing: border-box;
border-radius: 4px;
margin-left: 32px;
margin-top: 10px;
// display: flex;
// align-items: center;
}
.name1 {
color: rgba(250, 140, 22, 1);
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
}
.name2 {
color: rgba(10, 87, 166, 1);
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
}
.name3 {
color: rgba(114, 46, 209, 1);
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
}
.title {
margin-left: 12px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
display: flex;
align-items: center;
}
}
.item-box2 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box3 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box4 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box5 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
}
}
.right-footer {
display: flex;
// height: 60px;
// background: orange;
justify-content: space-between;
.footer-left {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin-left: 24px;
margin-top: 6px;
}
.footer-right {
margin-right: 24px;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/index.vue 0 → 100644
浏览文件 @ 46bcc87b
<template>
<div class="wrap">
<div class="header">
<div class="header-top">
<div class="left">
<div class="icon">
<img src="./assets/images/img1.png" alt="" />
</div>
<div class="info">
<div class="title">{{ "337调查" }}</div>
<div class="content">
{{ '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"' }}
</div>
</div>
</div>
<div class="right">
<div class="icon">
<img src="./assets/images/button-icon.png" alt="" />
</div>
<div class="text">{{ "查看官网" }}</div>
</div>
</div>
<div class="header-footer">
<div
class="btn-item"
:class="{ btnItemActive: activeBtnName === item.name }"
v-for="(item, index) in btnList"
:key="index"
@click="handleClickBtn(item)"
>
<div class="icon">
<img
:src="item.acitveIcon"
alt=""
v-if="activeBtnName === item.name"
/>
<img :src="item.icon" alt="" v-else />
</div>
<div
class="text"
:class="{ textActive: activeBtnName === item.name }"
>
{{ item.name }}
</div>
</div>
</div>
</div>
<div class="main">
<router-view />
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import router from "@/router/index";
import icon1 from "./assets/images/icon1.png";
import icon1Active from "./assets/images/icon1_active.png";
import icon2 from "./assets/images/icon2.png";
import icon2Active from "./assets/images/icon2_active.png";
const btnList = ref([
{
name: "调查概况",
icon: icon1,
acitveIcon: icon1Active,
path: "/marketAccessLayout/overview",
},
{
name: "调查案件",
icon: icon2,
acitveIcon: icon2Active,
path: "/marketAccessLayout/case",
},
]);
const activeBtnName = ref("调查概况");
const handleClickBtn = (item) => {
activeBtnName.value = item.name;
router.push(item.path);
};
</script>
<style lang="scss" scoped>
.wrap {
width: 1920px;
height: 1016px;
.header {
width: 1920px;
height: 148px;
box-sizing: border-box;
border-bottom: 1px solid rgba(230, 231, 232, 1);
background: rgba(255, 255, 255, 1);
.header-top {
display: flex;
height: 100px;
justify-content: space-between;
.left {
margin-left: 160px;
margin-top: 24px;
display: flex;
.icon {
width: 54px;
height: 54px;
img {
width: 100%;
height: 100%;
}
}
.info {
margin-left: 14px;
margin-top: -1px;
.title {
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.content {
margin-top: 1px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.right {
margin-top: 24px;
margin-right: 160px;
width: 120px;
height: 36px;
border-radius: 6px;
background: rgba(22, 119, 255, 1);
display: flex;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
margin-left: 16px;
margin-top: 10px;
position: relative;
z-index: 99;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
margin-top: 7px;
height: 22px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.header-footer {
height: 48px;
margin-left: 160px;
display: flex;
.btn-item {
display: flex;
width: 92px;
margin-right: 30px;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 2px;
margin-top: 12px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
.textActive {
color: rgba(10, 87, 166, 1);
font-weight: 700;
}
}
.btnItemActive {
border-bottom: 3px solid rgba(10, 87, 166, 1);
}
}
}
.main {
width: 1920px;
height: 868px;
background: #f7f8f9;
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/index.vue 0 → 100644
浏览文件 @ 46bcc87b
<template>
<div class="wrap">
<div class="top">
<div class="item">
<div class="item-left-box">
<div class="item-left1">{{ "总调查案件数" }}</div>
<div class="item-left2">{{ "1980-2025" }}</div>
</div>
<div class="item-right">{{ "452项" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "仍在调查中的案件" }}</div>
<div class="item-right">{{ "28项" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "涉及中企数量" }}</div>
<div class="item-right">{{ "326家" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "胜诉/和解率" }}</div>
<div class="item-right">{{ "38%" }}</div>
</div>
</div>
<div class="center">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">美国对华337调查年度趋势</div>
<div class="header-right">
<img src="../assets/images/header-icon.png" alt="" />
</div>
</div>
<div class="box1-main" id="chart1"></div>
</div>
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查案件领域分布</div>
<div class="header-right">
<img src="../assets/images/header-icon.png" alt="" />
</div>
</div>
<div class="box2-main" id="chart2"></div>
</div>
</div>
<div class="footer">
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">中国公司受调查情况</div>
<div class="header-btn-box">
<div
class="btn"
:class="{ btnActive: btnActiveName === '调查次数' }"
@click="handleClickBox3Btn('调查次数')"
>
调查次数
</div>
<div
class="btn"
:class="{ btnActive: btnActiveName === '注册地分布' }"
@click="handleClickBox3Btn('注册地分布')"
>
注册地分布
</div>
</div>
<div class="header-right">
<img src="../assets/images/header-icon.png" alt="" />
</div>
</div>
<div class="box3-main" id="chart3"></div>
</div>
<div class="box4">
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查结果分布</div>
<div class="header-right">
<img src="../assets/images/header-icon.png" alt="" />
</div>
</div>
<div class="box4-main" id="chart4"></div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const btnActiveName = ref("调查次数");
const handleClickBox3Btn = (name) => {
btnActiveName.value = name;
};
const chart1Data = ref({
title: [
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2022",
"2023",
"2024",
"2025",
],
data: [
{
name: "提出法案",
value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172],
},
],
});
const chart2Data = ref([
{ name: "半导体", value: 50 },
{ name: "电子设备", value: 46 },
{ name: "显示技术", value: 40 },
{ name: "新能源", value: 32 },
{ name: "通信设备", value: 31 },
{ name: "汽车", value: 31 },
{ name: "轻工业制造", value: 30 },
{ name: "其他", value: 24 },
]);
const chart2ColorList = ref([
"#69B1FF",
"#FFC069",
"#87E8DE",
"#597EF7",
"#D6E4FF",
"#FF7875",
"#B37FEB",
"#FFA39E",
]);
const chart3Data = ref({
name: [
"华为技术有限公司",
"大疆创新科技有限公司",
"TCL科技集团股份有限公司",
"中兴通讯股份有限公司",
"联想集团",
"比亚迪集团",
"宁德时代新能源科技股份有限公司",
"晶科智能科技有限公司",
],
value: [42, 35, 28, 19, 15, 12, 11, 8],
});
const chart4Data = ref([
{ name: "和解/同意令", value: 50 },
{ name: "裁定不侵权", value: 46 },
{ name: "裁定侵权", value: 40 },
{ name: "申诉方撤诉", value: 31 },
{ name: "其他", value: 24 },
]);
const chart4ColorList = ref([
"#69B1FF",
"#FFC069",
"#87E8DE",
"#D6E4FF",
"#FFA39E",
]);
onMounted(() => {
let chart1 = getMultiLineChart(
chart1Data.value.title,
chart1Data.value.data[0].value
);
setChart(chart1, "chart1");
let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
setChart(chart2, "chart2");
let chart3 = getBarChart(chart3Data.value.name, chart3Data.value.value);
setChart(chart3, "chart3");
let chart4 = getPieChart(chart4Data.value, chart4ColorList.value);
setChart(chart4, "chart4");
});
</script>
<style lang="scss" scoped>
.wrap {
width: 100%;
height: 100%;
overflow: hidden;
.top {
display: flex;
justify-content: space-between;
margin: 16px 160px;
.item {
width: 388px;
height: 80px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
position: relative;
display: flex;
justify-content: space-between;
&::before {
position: absolute;
content: "";
width: 4px;
height: 49px;
background: rgba(10, 87, 166, 1);
left: 0;
top: 15px;
}
.item-left {
margin-left: 30px;
margin-top: 25px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.item-right {
margin-top: 28px;
margin-right: 35px;
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
.item-left-box {
margin-left: 30px;
.item-left1 {
margin-top: 13px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.item-left2 {
height: 2px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
}
}
}
.center {
display: flex;
justify-content: space-between;
margin: 0 160px;
.box1 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
height: 300px;
}
}
.box2 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
height: 300px;
// width: 752px;
box-sizing: border-box;
padding: 0 20px;
}
}
}
.footer {
margin: 16px 160px;
display: flex;
justify-content: space-between;
.box3 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
height: 300px;
}
}
.box4 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box4-main {
height: 300px;
box-sizing: border-box;
padding: 0 20px;
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/utils/barChart.js 0 → 100644
浏览文件 @ 46bcc87b
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: [610, 0],
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(255,255,255,0)'
},
{
offset: 1,
color: '#1778ff'
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/utils/multiLineChart.js 0 → 100644
浏览文件 @ 46bcc87b
import * as echarts from 'echarts'
const getMultiLineChart = (dataX, dataY1, dataY2) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
data: ['提出法案', '通过法案'],
show: false
},
color: ['#1459bb', '#fa8c16'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '提出法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(22, 119, 255, 0.5)' // 起始颜色
}, {
offset: 1,
color: 'rgba(22, 119, 255, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
// {
// name: '通过法案',
// type: 'line',
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(255, 172, 77, 1)' // 起始颜色
// }, {
// offset: 1,
// color: 'rgba(255, 172, 77, 0)' // 结束颜色
// }])
// },
// emphasis: {
// focus: 'series'
// },
// data: dataY2
// }
]
}
}
export default getMultiLineChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/utils/piechart.js 0 → 100644
浏览文件 @ 46bcc87b
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [80, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}} {time|{c} 项 {d}%}\n',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 12,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论