Skip to content

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

暂存

上级 15c01871
显示空白字符变更
内嵌 并排
正在显示 包含 1951 行增加 和 985 行删除
src/components/button/button.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="button" @click="emit('click')" :class="{ activeButton: isActive }">
<slot name="default"></slot>
</div>
</template>
<script setup>
const props = defineProps({
isActive: {
type: Boolean,
default: false
}
});
const emit = defineEmits(["click"]);
</script>
<style lang="scss" scoped>
.button {
/* 复选标签 */
height: 28px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 1px solid rgb(230, 231, 232);
border-radius: 4px;
background-color: rgb(255, 255, 255);
color: rgb(59, 65, 75);
font-size: 16px;
font-weight: 400;
cursor: pointer;
padding-left: 8px;
padding-right: 8px;
}
.activeButton {
border: 1px solid rgb(10, 87, 166);
background: rgb(246, 250, 255);
color: rgb(10, 87, 166);
}
</style>
src/components/buttonList/buttonList.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="buttonList" :style="{ gap: gap + 'px' }">
<Button class="button" @click="setActiveIndex(item)" :is-active="isActive(item)" v-for="item in list" :key="item.id">
<slot name="item" :item="item">
{{ item.text }}
</slot>
</Button>
</div>
</template>
<script setup>
import { ref } from "vue";
import Button from "../button/button.vue";
const props = defineProps({
activeId: {
type: [Number, Array],
default: 0
},
gap: {
type: Number,
default: 8
},
multiple: {
type: Boolean,
default: false
},
list: {
type: Array,
default: function () {
return [];
}
}
});
const emit = defineEmits(["click"]);
const isActive = item => {
if (!props.multiple) {
return item.id === props.activeId;
} else {
return props.activeId.includes(item.id);
}
};
function setActiveIndex(item) {
if (!props.multiple) {
if (props.activeId === item.id) {
return;
}
emit("click", item.id);
} else {
let idList;
if (props.activeId.includes(item.id)) {
idList = props.activeId.filter(currentId => currentId !== item.id);
} else {
idList = props.activeId.concat(item.id);
}
emit("click", idList);
}
}
</script>
<style lang="scss" scoped>
.buttonList {
display: flex;
gap: 8px;
}
</style>
src/router/index.js
浏览文件 @ dfb2af28
......@@ -243,17 +243,6 @@ const routes = [
}
]
},
// 出口管制首页
{
path: "/exportControl",
name: "ExportControl",
component: ExportControl,
meta: {
title: "出口管制"
}
},
// 政令首页
{
path: "/decree",
......@@ -379,16 +368,51 @@ const routes = [
}
]
},
// 出口管制首页
{
path: "/exportControl",
name: "ExportControl",
component: ExportControl,
meta: {
title: "出口管制"
}
},
// 出口管制转移过来的页面
{
path: "/exportControl/analysis",
name: "analysis",
path: "/exportControlAnalysis",
name: "exportControlAnalysis",
component: () => import("@/views/exportControl/analysis/index.vue"),
redirect: "/exportControlAnalysis/overview",
meta: {
title: "分析页"
},
children: [
{
path: "overview",
name: "exportControlAnalysisOverview",
component: () => import("@/views/exportControl/analysis/content/overview.vue"),
meta: {
title: "制裁概况"
}
},
{
path: "deepDig",
name: "exportControlAnalysisDeepDig",
component: () => import("@/views/exportControl/analysis/content/deepDig.vue"),
meta: {
title: "深度挖掘"
}
},
{
path: "influence",
name: "exportControlAnalysisInfluence",
component: () => import("@/views/exportControl/analysis/content/influence.vue"),
meta: {
title: "影响分析"
}
},
]
},
{
path: "/exportControl/infoplatform",
name: "infoplatform",
......
src/views/exportControl/analysis/components/mapCharts.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="mapChartsWrap">
<Echarts :option="mapOption"></Echarts>
</div>
</template>
<script setup>
import Echarts from "@/components/Chart/index.vue";
import { getMapOption } from "../../utils/charts";
import { ref, onMounted, shallowRef } from "vue";
const mapOption = shallowRef({});
onMounted(() => {
mapOption.value = getMapOption();
});
</script>
<style lang="scss" scoped>
.mapChartsWrap {
width: 100%;
height: 100%;
}
</style>
src/views/exportControl/analysis/components/panel1.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="panel1Wrap">
<div class="row">
<CardCustom title="实体清单制裁强度" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel1"></div>
</CardCustom>
<CardCustom title="新增实体数量增长趋势" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel2"></div>
</CardCustom>
</div>
<div class="row">
<CardCustom title="实体清单更新频率" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel3"></div>
</CardCustom>
<CardCustom title="重点实体列表" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel4"></div>
</CardCustom>
</div>
</div>
</template>
<script setup>
import CardCustom from "../../components/CardCustom.vue";
</script>
<style lang="scss" scoped>
.panel1Wrap {
width: 1600px;
margin: 0px auto 0 auto;
padding-bottom: 20px;
}
.row {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 15px;
}
.subPanel1 {
height: 100%;
padding: 2px 24px 0 24px;
display: flex;
}
</style>
src/views/exportControl/analysis/components/panel2.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="panel2">panel2</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/views/exportControl/analysis/components/panel3.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="panel3">panel3</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/views/exportControl/analysis/components/panel4.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="panel4">panel4</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/views/exportControl/analysis/components/pieCharts.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="pieChartsWrap">
<div class="item">
<Echarts :option="pie1Option"></Echarts>
</div>
<div class="item">
<Echarts :option="pie2Option"></Echarts>
</div>
</div>
</template>
<script setup>
import Echarts from "@/components/Chart/index.vue";
import { getPieOption } from "../../utils/charts";
import { ref, onMounted, shallowRef } from "vue";
const pie1Option = shallowRef({});
const pie2Option = shallowRef({});
onMounted(() => {
pie1Option.value = getPieOption(
[
{ name: "能源领域", value: 30 },
{ name: "集成电路领域", value: 20 },
{ name: "人工智能领域", value: 12 },
{ name: "通信网络领域", value: 18 },
{ name: "量子科技领域", value: 10 },
{ name: "生物科技领域", value: 10 }
],
"领域分布"
);
pie2Option.value = getPieOption(
[
{ name: "能源领域", value: 30 },
{ name: "集成电路领域", value: 20 },
{ name: "人工智能领域", value: 12 },
{ name: "通信网络领域", value: 18 },
{ name: "量子科技领域", value: 10 },
{ name: "生物科技领域", value: 10 }
],
"类别分布"
);
});
</script>
<style lang="scss" scoped>
.pieChartsWrap {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 16px;
padding-top: 6px;
.item {
width: 460px;
height: 388px;
background-color: rgba(231, 243, 255, 0.5);
}
}
</style>
src/views/exportControl/analysis/content/deepDig.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="deepDig">
<div class="row">
<div class="panelButtonList">
<div
class="item"
:class="{ activeItem: activePanelId === item.id }"
v-for="item in panelListData"
:key="item.id"
@click="setActivePanelId(item.id)"
>
<div
class="line"
:class="{
lineActive: activePanelId === item.id,
lineUp: activePanelId !== item.id && item.isUp,
lineDown: activePanelId !== item.id && !item.isUp
}"
></div>
<div class="infoWrap">
<div
class="number"
:class="{
numberActive: activePanelId === item.id,
numberUp: activePanelId !== item.id && item.isUp,
numberDown: activePanelId !== item.id && !item.isUp
}"
>
{{ item.number }}
</div>
<div class="name">{{ item.name }}</div>
</div>
<div class="text">较上次{{ item.isUp ? "增加" : "减少" }}{{ item.ComparisonNumber }}个</div>
<div
class="icon"
:class="{
iconActiveUp: activePanelId === item.id && item.isUp,
iconActiveDown: activePanelId === item.id && !item.isUp,
iconUp: activePanelId !== item.id && item.isUp,
iconDown: activePanelId !== item.id && !item.isUp
}"
></div>
</div>
</div>
</div>
<div class="row">
<panel1 v-if="activePanelId === panelListData[0].id"></panel1>
<panel2 v-if="activePanelId === panelListData[1].id"></panel2>
<panel3 v-if="activePanelId === panelListData[2].id"></panel3>
<panel4 v-if="activePanelId === panelListData[3].id"></panel4>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import Panel1 from "../components/panel1.vue";
import Panel2 from "../components/panel2.vue";
import Panel3 from "../components/panel3.vue";
import Panel4 from "../components/panel4.vue";
const panelListData = [
{
id: 1,
name: "新增实体数量",
number: "37",
isUp: true,
ComparisonNumber: "31"
},
{
id: 2,
name: "上市企业数量",
number: "6",
isUp: true,
ComparisonNumber: "2"
},
{
id: 3,
name: "涉及领域数量",
number: "2",
isUp: false,
ComparisonNumber: "1"
},
{
id: 4,
name: "实体类别数量",
number: "4",
isUp: true,
ComparisonNumber: "1"
}
];
const activePanelId = ref(panelListData[0].id);
const setActivePanelId = id => {
activePanelId.value = id;
};
</script>
<style lang="scss" scoped>
.deepDig {
width: 1600px;
margin: 0px auto 0 auto;
padding-bottom: 20px;
}
.row {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 15px;
}
.panelButtonList {
display: flex;
justify-content: center;
gap: 16px;
.item {
width: 388px;
height: 80px;
border-radius: 4px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
cursor: pointer;
.line {
width: 4px;
height: 49px;
margin-right: 26px;
}
.lineActive {
background-color: rgba(255, 255, 255, 1);
}
.lineUp {
background-color: rgba(206, 79, 81, 1);
}
.lineDown {
background-color: rgba(33, 129, 57, 1);
}
.infoWrap {
flex: 1;
display: flex;
flex-direction: column;
.number {
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
.numberActive {
color: rgba(255, 255, 255, 1);
}
.numberUp {
color: rgba(206, 79, 81, 1);
}
.numberDown {
color: rgba(33, 129, 57, 1);
}
.name {
color: rgba(34, 41, 52, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.text {
color: rgba(34, 41, 52, 1);
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
.icon {
width: 32px;
height: 32px;
margin-right: 15px;
margin-left: 8px;
background-size: 100% 100%;
}
.iconActiveUp {
background-image: url("../../assets/images/activeUp.png");
}
.iconActiveDown {
background-image: url("../../assets/images/activeDown.png");
}
.iconUp {
background-image: url("../../assets/images/UnActiveUp.png");
}
.iconDown {
background-image: url("../../assets/images/UnActiveDown.png");
}
}
.activeItem {
background-color: rgba(5, 95, 194, 1);
.infoWrap {
.name {
color: rgba(255, 255, 255, 1);
}
}
.text {
color: rgba(255, 255, 255, 1);
}
}
}
</style>
src/views/exportControl/analysis/content/depthMine.vue deleted 100644 → 0
浏览文件 @ 15c01871
<template>
<div class="depth-mine-container">
<div class="depth-mine-left">
<div
@click="handleClick(index)"
:class="['depth-mine-left-item', activeLeftTab === index ? 'depth-mine-left-item-active' : '']"
v-for="(item, index) in data"
:key="index"
>
<div class="depth-mine-left-item-title">{{ item[0] }}</div>
<div class="depth-mine-left-item-desc">{{ item[1] }}</div>
</div>
</div>
<el-row :gutter="20">
<el-col :span="12">
<custom-container title="实体清单历次更新中外受影响情况对比" height="580px">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 8px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button>
</div>
</template> -->
<template #default>
<!-- <div ref="echartsRef" style="height: 425px; width: 100%"></div> -->
<ECharts :option="chartOption" autoresize :style="{ height: '425px' }" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text">
2024年以来,实体清单更新次数相对于2023年有所降低,但是本年度内呈上升趋势。
</span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="实体清单历次更新中外受影响情况对比" height="580px">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 8px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button>
</div>
</template> -->
<template #default>
<div class="content-box">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column type="index" label="序号" />
<el-table-column prop="date" label="更新日期" width="150" />
<el-table-column prop="entity" label="实体数/历史排名" width="150" />
<el-table-column prop="entityCN" label="中国实体数/历史排名" />
<el-table-column prop="proportion" label="中国占比/历史排名" />
</el-table>
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text"
>相对于近几次更新，中国新增受制裁的实体数量占比的排名都显著提高，美国制裁中国实体的强度显著提升。</span
>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<custom-container title="实体清单更新频率" height="505px">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 8px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button>
</div>
</template> -->
<template #default>
<div class="content-box">
<!-- <v-charts :option="option" autoresize :style="{ height: '326px' }" /> -->
<!-- <div ref="frequenceRef" style="height: 340px; width: 100%"></div> -->
<ECharts :option="frequenceOption" autoresize :style="{ height: '326px' }" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text">
2024年以来,实体清单更新次数相对于2023年有所降低,但是本年度内呈上升趋势。
</span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="重点实体列表" height="505px">
<!-- 顶部右侧自定义内容 -->
<template #header-right>
<div style="display: flex; gap: 8px">
<el-input
placeholder="请输入关键词，使用(、)作为分隔符."
:suffix-icon="Search"
clearable
style="width: 360px"
>
<!-- <template #append>
<el-icon><Search /></el-icon>
</template> -->
</el-input>
<!-- <el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button> -->
</div>
</template>
<template #default>
<div class="content-box">
<div class="content-box-list">
<div class="content-box-list-item" v-for="item in entityList" :key="item.entity">
<div class="content-box-list-item-title">{{ item.entity }}</div>
<div class="content-box-list-item-tag">
<el-tag
:type="TAGTYPE[Math.floor(Math.random() * 5)]"
v-for="tag in item.tags"
:key="tag"
>{{ tag }}</el-tag
>
</div>
</div>
</div>
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text"
>本次实体清单更新,科研院所占比相对较高。需要注意的是,中国科学技术大学、中国科学院物理研究所等国内重点科研机构被列入实体清单,此外还有中科星图以及中电科旗下的多家研究所被列入清单,可能会对相关行业产生显著影响。</span
>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// import * as echarts from "echarts";
import ECharts from "@/components/Chart/index.vue";
// import VCharts from "vue-echarts";
import { useEcharts } from "@/hooks/useEcharts";
// import echarts from "@/plugins/echarts";
import { Search } from "@element-plus/icons-vue";
import CustomContainer from "@/components/Container/index.vue";
import { TAGTYPE } from "@/common/constant.js";
const tableData = ref([
{
date: "2024年5月14日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2024年4月11日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2024年2月27日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2023年12月7日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2023年11月15日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: " 2024年3月5日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
}
]);
// 重点实体列表
const entityList = ref([
{
entity: "中国科学技术大学",
tags: ["双一流", "985", "关税政策"]
},
{
entity: "合肥量子信息科学国家实验室",
tags: ["中国上市企业"]
},
{
entity: "中国科学院物理研究所",
tags: ["科研院所"]
}
]);
const frequenceRef = ref(null);
const echartsRef = ref(null);
const frequenceOption = ref({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
top: 20,
right: 3,
bottom: 0,
left: 3,
containLabel: true
},
legend: {
data: [],
bottom: 0,
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 15,
textStyle: {
fontSize: 12,
color: "#222B45"
}
},
xAxis: {
type: "category",
data: [
"202301",
"202302",
"202303",
"202304",
"202305",
"202306",
"202307",
"202308",
"202309",
"202310",
"202311",
"202312"
],
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#889fcc"
}
},
yAxis: {
type: "value",
axisLine: { show: false },
axisTick: { show: false },
splitLine: {
lineStyle: {
color: "#EFF1F3",
width: 0.8
}
},
axisLabel: { color: "#889fcc" }
},
series: [
{
name: "aa",
type: "bar",
data: [3, 2, 3, 0, 2, 1, 3, 1, 0, 2, 3, 2],
barWidth: "15",
itemStyle: {
color: "#639dfa",
borderRadius: [4, 4, 0, 0]
}
}
// {
// name: "bbb",
// type: "bar",
// data: [6, 13, 10, 5, 12, 5],
// barWidth: "15",
// itemStyle: {
// color: "#639dfa",
// borderRadius: [4, 4, 0, 0]
// }
// }
]
});
const chartOption = ref({
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999"
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: false },
saveAsImage: { show: false }
}
},
legend: {
data: ["中国", "外国", "占比"]
},
xAxis: [
{
type: "category",
data: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021"],
axisPointer: {
type: "shadow"
}
}
],
yAxis: [
{
type: "value",
name: "量",
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: "{value}"
}
},
{
type: "value",
name: "占比",
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: "{value}"
}
}
],
series: [
{
name: "中国",
type: "bar",
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: "外国",
type: "bar",
tooltip: {
valueFormatter: function (value) {
return value + " ml";
}
},
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: "占比",
type: "line",
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
});
onMounted(() => {
// let frequenceChart = echarts.init(frequenceRef.value);
// let chart = echarts.init(echartsRef.value);
// useEcharts(frequenceChart, frequenceOption);
// useEcharts(chart, chartOption);
});
const data = ref([
["新增实体37个", "较上次多31个"],
["上市企业3家", "较上次多2家"],
["涉及领域2个", "较上次少1个"],
["实体类别3种", "较上次多2种"]
]);
const activeLeftTab = ref(0);
const handleClick = index => {
activeLeftTab.value = index;
};
</script>
<style scoped>
.depth-mine-container {
padding: 0 5% 0 150px;
position: relative;
}
.depth-mine-left {
position: absolute;
left: 0;
top: 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.depth-mine-left-item {
display: flex;
flex-direction: column;
gap: 4px;
cursor: pointer;
color: rgba(95, 101, 108, 1);
padding: 10px 16px;
border-radius: 10px;
}
.depth-mine-left-item-active {
color: #fff;
background-color: rgba(10, 87, 166, 1);
}
.depth-mine-left-item-title {
font-size: 16px;
font-weight: 400;
}
.content-box {
/* height: 90vh; */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content-box-list {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
.content-box-list-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.content-box-list-item-title {
font-size: 16px;
font-weight: 700;
color: rgba(10, 18, 30, 1);
}
.content-box-list-item-tag {
display: flex;
gap: 8px;
}
.content-box-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background-color: rgba(246, 251, 255, 1);
padding: 5px 15px;
}
.content-box-footer-text {
font-size: 16px;
font-weight: 400;
color: rgba(10, 87, 166, 1);
}
.footer-img-small {
width: 20px;
height: 20px;
}
.footer-img-large {
width: 24px;
height: 24px;
}
</style>
src/views/exportControl/analysis/content/overview.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="overviewContainer">
<div class="row">
<CardCustom title="实体清单发布机构" :style="{ width: '984px', height: '284px' }">
<div class="panel1">
<img :src="panel1.img" alt="" class="img" />
<div class="infoWrap">
<div class="item">
<div class="name">机构名称：</div>
<div class="doc">{{ panel1.mingcheng }}</div>
</div>
<div class="item">
<div class="name">相关措施：</div>
<div class="doc">{{ panel1.cuoshi }}</div>
</div>
<div class="item">
<div class="name">机构职责：</div>
<div class="doc zhize">{{ panel1.zhize }}</div>
</div>
</div>
</div>
</CardCustom>
<CardCustom title="重点人物" :style="{ width: '600px', height: '284px' }">
<div class="panel2">
<div class="item" v-for="(item, index) in panel2" :key="index">
<img :src="item.img" alt="" class="img" />
<div class="infoWrap">
<div class="name">{{ item.name }}</div>
<div class="enName">{{ item.enName }}</div>
<div class="party">{{ item.party }}</div>
</div>
</div>
</div>
</CardCustom>
</div>
<div class="row">
<CardCustom title="实体清单分布" :style="{ width: '984px', height: '520px' }">
<template #right>
<div class="panel3ButtonWrap">
<div
class="leftButton"
:class="{ activeButton: panel3ActiveIndex === 1 }"
@click="setPanel3ActiveIndex(1)"
>
领域类别分布
</div>
<div
class="rightButton"
:class="{ activeButton: panel3ActiveIndex === 2 }"
@click="setPanel3ActiveIndex(2)"
>
区域分布
</div>
</div>
<div class="panel3Jinbi"></div>
</template>
<div class="panel3">
<div class="chartWrap">
<PieCharts v-if="panel3ActiveIndex === 1"></PieCharts>
<MapCharts v-if="panel3ActiveIndex === 2"></MapCharts>
</div>
<div class="hintWrap">
<div class="icon1"></div>
<div class="title">本次制裁共新增83个实体，其中53个中国大陆实体、1个中国台湾实体。</div>
<div class="icon2Wrap">
<div class="icon2"></div>
</div>
</div>
</div>
</CardCustom>
<CardCustom title="制裁原因" :style="{ width: '600px', height: '520px' }">
<div class="panel4">
<div class="item" v-for="(item, index) in panel4" :key="index">
<div class="icon1">{{ index + 1 }}</div>
<div class="text">{{ item.text }}</div>
<div class="icon2"></div>
</div>
</div>
</CardCustom>
</div>
<div class="row">
<CardCustom title="实体清单列表" :style="{ width: '984px', height: '678px' }">
<template #right>
<el-checkbox v-model="panel5IsChecked" label="只看中国实体" size="large" :style="{ marginRight: '15px' }" />
<ButtonList
:list="panel5ButtonList"
:gap="8"
:active-id="panel5ButtonAcitveID"
@click="panel5SetButtonAcitveID"
:style="{ marginRight: '15px' }"
></ButtonList>
</template>
<div class="panel5">
<div class="hintWrap">
<div class="title">
共计
<span class="text1">112</span>
家，其中50%规则涉及
<span class="text2">604</span>
家
</div>
</div>
<div class="tableWrap">
<el-table
:data="panel5MockData"
class="sanction-table"
stripe
empty-text="暂无数据"
height="700px"
header-row-class-name="table-header"
row-class-name="table-row"
>
<el-table-column prop="name" label="实体清单" min-width="180">
<template #default="{ row }">
<div style="font-weight: 500" class="name">
<img :src="row.img" alt="" class="img" />
{{ row.name }}
</div>
</template>
</el-table-column>
<el-table-column prop="domains" label="涉及领域" width="100">
<template #default="{ row }">
<div class="domain-tags">
<el-tag v-for="tag in row.domains" :key="tag" :type="panel5TypeMap[tag]">{{
tag
}}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="address" label="上市地点" width="100" align="center">
<template #default="{ row }">
{{ row.address }}
</template>
</el-table-column>
<el-table-column prop="time" label="制裁时间" width="120" align="center">
<template #default="{ row }">
{{ row.time }}
</template>
</el-table-column>
<el-table-column prop="revenue" label="营收(亿元)" width="100" align="center">
<template #default="{ row }">
{{ row.revenue }}
</template>
</el-table-column>
<el-table-column prop="subCompany" label="50%规则子企业" min-width="140" align="left">
<template #default="{ row }">
<span class="subCompany">
{{ row.subCompany }}
</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</CardCustom>
<CardCustom title="美国前序相关制裁、前序相关事件列表" :style="{ width: '600px', height: '678px' }">
<div class="panel6">
<div class="item" v-for="(item, idx) in panel6" :key="item.title">
<div class="left">
<div class="icon"></div>
<div class="line"></div>
</div>
<div class="right">
<div class="date">{{ item.time }}</div>
<div class="title">{{ item.title }}</div>
<div class="desc">{{ item.desc }}</div>
</div>
</div>
<div class="more">
查看更多
<span class="moreIcon"></span>
</div>
</div>
</CardCustom>
</div>
</div>
</template>
<script setup>
import CardCustom from "../../components/CardCustom.vue";
import PieCharts from "../components/pieCharts.vue";
import MapCharts from "../components/mapCharts.vue";
import ButtonList from "@/components/buttonList/buttonList.vue";
import { onMounted, reactive, ref } from "vue";
import panel1_1 from "../../assets/images/panel1_1.png";
import panel2_1 from "../../assets/images/panel2_1.png";
import panel2_2 from "../../assets/images/panel2_2.png";
import panel2_3 from "../../assets/images/panel2_3.png";
import panel2_4 from "../../assets/images/panel2_4.png";
import panel5_1 from "../../assets/images/panel5_1.png";
import panel5_2 from "../../assets/images/panel5_2.png";
import panel5_3 from "../../assets/images/panel5_3.png";
import panel5_4 from "../../assets/images/panel5_4.png";
import panel5_5 from "../../assets/images/panel5_5.png";
import panel5_6 from "../../assets/images/panel5_6.png";
import panel5_7 from "../../assets/images/panel5_7.png";
import panel5_8 from "../../assets/images/panel5_8.png";
const panel1 = ref({
img: panel1_1,
mingcheng: "美国商务部工业与安全局",
cuoshi: "出口管制条例（EAR）、实体清单、商业管制清单（CCL）、232调查等",
zhize: "美国商务部工业与安全局（BIS）是美国商务部下属机构，核心职责围绕国家安全与战略技术管控展开，具体包括：以维护商业管制清单（CCL）和出口管制分类号（ECCN）的方式，对敏感货物及两用技术实施出口管制并确定许可要求；通过出口执行局（OEE）执行出口管制、反抵制等相关法律，对违规行为采取行政、刑事等处罚措施；在出口管制和战略贸易问题上与其他国家合作，参与并领导国际出口管制制度。"
});
const panel2 = ref([
{
name: "吉娜·雷蒙多",
enName: "Gina Raimondo",
party: "美国民主党",
img: panel2_1
},
{
name: "迈克・约翰逊",
enName: "Mike Johnson",
party: "美国共和党",
img: panel2_2
},
{
name: "艾伦·埃斯特韦斯",
enName: "Alan Estevez",
party: "美国民主党",
img: panel2_3
},
{
name: "凯・格兰杰",
enName: "Kay Granger",
party: "美国共和党",
img: panel2_4
}
]);
const panel3ActiveIndex = ref(1);
const setPanel3ActiveIndex = index => {
panel3ActiveIndex.value = index;
};
const panel4 = ref([
{
text: "获取美国产物项，以支持中国量子技术；"
},
{
text: "支持2023年2月飞越美国上空的高空气球；"
},
{
text: "获取获取美国原产的无人机物项供中国军方使用。"
},
{
text: "法案序言称“中国光伏、风电企业通过政府补贴倾销产品”"
},
{
text: "将中国定位为“通过强制技术转让获取先进制程的威胁”"
}
]);
const panel5ButtonList = [
{ id: 1, text: "新增实体" },
{ id: 2, text: "移除实体" }
];
const panel5ButtonAcitveID = ref(panel5ButtonList[0].id);
const panel5SetButtonAcitveID = id => {
panel5ButtonAcitveID.value = id;
};
const panel5IsChecked = ref(true);
const panel5TypeMap = {
人工智能: "danger",
通信网络: "warning",
航空航天: "success"
};
const panel5MockData = [
{
name: "科大讯飞股份有限公司",
domains: ["人工智能"],
address: "深圳",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "讯飞智元信息科技...等15家>",
img: panel5_1
},
{
name: "华为技术有限公司",
domains: ["通信网络"],
address: "--",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "海思半导体有限公...等15家>",
img: panel5_2
},
{
name: "中国航空工业集团",
domains: ["航空航天"],
address: "--",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "中航科技控股有限...等15家>",
img: panel5_3
},
{
name: "杭州海康威视有限公司",
domains: ["航空航天"],
address: "深圳",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "海云智能科技有限...等15家>",
img: panel5_4
},
{
name: "浪潮集团有限公司",
domains: ["人工智能"],
address: "--",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "浪潮商用机器有限...等15家>",
img: panel5_5
},
{
name: "中兴通讯股份有限公司",
domains: ["航空航天"],
address: "深圳",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "中融讯合通信设备...等15家>",
img: panel5_6
},
{
name: "大疆创新科技有限公司",
domains: ["人工智能"],
address: "--",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "大疆智能计算服务...等15家>",
img: panel5_7
},
{
name: "艾睿中国电子贸易有限公司",
domains: ["航空航天"],
address: "上海",
time: "2025年9月",
isUp: true,
revenue: "325",
subCompany: "讯飞智元信息科技...等15家>",
img: panel5_8
}
];
// 历次制裁过程
const panel6 = ref([
{
time: "2025-09-02",
title: "传感器和仪器仪表技术咨询委员会将于2024年5月9日召开部分闭门会议",
desc: "传感器与仪器仪表技术咨询委员会(以下简称“委员会”)将于美国东部夏令时间2024年5月9日星期四下午1:00至2:30召开会议。本次会议将通过微软团队(MS Teams)以线上形式举行。根据美国商务部第10-16号《部门组织》文件。"
},
{
time: "2025-04-17",
title: "美国对华加征关税至20%并扩大科技制裁",
desc: '美国以"芬太尼问题"为由提高对华关税至20%，恢复钢铁铝关税；同时推动《恢复贸易公平法案》，计划对中国商品征收100%关税。系统性打压中国高科技产业，关税措施实质为经济勒索。'
},
{
time: "2025-04-17",
title: "中美关税战升级至125%与反制措施",
desc: '美国将对华关税从34%提升至84%（总税率104%），中方同步对美商品加征同等税率，并暂停进口美国影片、限制留学合作。特朗普政府通过"基准关税+对等关税+额外加征"策略施压，引发全球供应链震荡。'
}
]);
</script>
<style lang="scss" scoped>
.overviewContainer {
width: 1600px;
margin: 0px auto 0 auto;
padding-bottom: 20px;
}
.row {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 15px;
}
.panel1 {
height: 100%;
padding: 2px 24px 0 24px;
display: flex;
.img {
width: 90px;
height: 90px;
margin-right: 16px;
}
.infoWrap {
flex: 1;
display: flex;
flex-direction: column;
gap: 19px;
.item {
display: flex;
.name {
flex-shrink: 0;
width: 100px;
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.doc {
flex: 1;
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.zhize {
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
.panel2 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
height: 100%;
overflow: auto;
align-content: flex-start;
gap: 16px;
padding: 0 23px 20px;
.item {
width: 268px;
height: 94px;
padding: 10px 16px;
background: rgba(231, 243, 255, 0.5);
display: flex;
align-items: center;
.img {
width: 70px;
height: 70px;
margin-right: 16px;
}
.infoWrap {
display: flex;
flex-direction: column;
flex: 1;
max-height: 100%;
gap: 3px;
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
.name {
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
}
}
}
.panel3 {
height: 100%;
display: flex;
flex-direction: column;
padding: 3px 24px 10px;
.chartWrap {
flex: 1;
}
.hintWrap {
height: 40px;
display: flex;
align-items: center;
padding: 0 12px;
border: 1px solid rgb(231, 241, 255);
border-radius: 4px;
background: rgb(246, 251, 255);
.icon1 {
width: 19px;
height: 20px;
background-image: url("../../assets//images/aiIcon.png");
background-size: 100% 100%;
}
.title {
color: var(--color-main-active);
font-size: 14px;
font-weight: 400;
line-height: 24px;
margin-left: 20px;
}
.icon2Wrap {
width: 24px;
height: 24px;
background-color: rgba(231, 243, 255, 1);
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
margin-left: auto;
.icon2 {
width: 12px;
height: 12px;
background-image: url("../../assets//images/rightIcon.png");
background-size: 100% 100%;
}
}
}
}
.panel3ButtonWrap {
flex: 1;
display: flex;
justify-content: center;
margin-right: 18px;
.leftButton {
width: 140px;
height: 34px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
border-radius: 40px 0 0 40px;
border: 2px solid rgba(5, 95, 194, 1);
border-right: none;
cursor: pointer;
}
.rightButton {
width: 140px;
height: 34px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
border-radius: 0px 40px 40px 0px;
border: 2px solid rgba(5, 95, 194, 1);
border-left: none;
cursor: pointer;
}
.activeButton {
background-color: rgba(5, 95, 194, 1);
color: #ffffff;
}
}
.panel3Jinbi {
width: 28px;
height: 28px;
background-image: url("../../assets/images/panel3_1.png");
background-size: 100% 100%;
margin-right: 4px;
cursor: pointer;
}
.panel4 {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
.item {
width: 552px;
height: 48px;
display: flex;
align-items: center;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 2px;
.icon1 {
width: 24px;
height: 24px;
border-radius: 12px;
background-color: rgba(231, 243, 255, 1);
display: flex;
justify-content: center;
align-items: center;
margin-left: 15px;
margin-right: 15px;
font-size: 12px;
color: rgb(5, 95, 194);
font-weight: 500;
}
.text {
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 400;
line-height: 30px;
flex: 1;
}
.icon2 {
width: 16px;
height: 16px;
background-image: url("../../assets/images/panel4_1.png");
background-size: 100% 100%;
margin-left: 15px;
margin-right: 15px;
}
}
}
.panel5 {
height: 100%;
display: flex;
flex-direction: column;
padding: 3px 24px 10px;
:deep(.table-header) {
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 700;
height: 64px;
}
:deep(.table-row) {
height: 60px;
font-size: 16px;
font-weight: 400;
}
.hintWrap {
height: 40px;
display: flex;
align-items: center;
padding: 0 12px;
border: 1px solid rgb(231, 241, 255);
border-radius: 4px;
background: rgb(246, 251, 255);
.title {
color: var(--color-main-active);
font-size: 14px;
font-weight: 400;
line-height: 24px;
.text1 {
color: rgb(206, 79, 81);
font-weight: 900;
}
.text2 {
color: rgb(255, 149, 77);
font-weight: 900;
}
}
}
.tableWrap {
flex: 1;
margin-top: 14px;
min-height: 0;
}
.name {
display: flex;
align-items: center;
.img {
width: 40px;
height: 40px;
margin-right: 6px;
margin-left: 6px;
}
}
.subCompany {
color: rgba(5, 95, 194, 1);
}
}
.panel6 {
height: 100%;
padding: 6px 45px 0 28px;
display: flex;
flex-direction: column;
align-items: center;
.item {
display: flex;
w
.left {
position: relative;
margin-right: 20px;
.icon {
position: absolute;
left: -5px;
top: 7px;
width: 10px;
height: 10px;
background-image: url("../../assets/images/panel6_1.png");
background-size: 100% 100%;
}
.line {
width: 1px;
background-color: rgba(174, 214, 255, 1);
height: 100%;
}
}
.right {
flex: 1;
display: flex;
flex-direction: column;
padding-bottom: 40px;
.date {
font-size: 16px;
font-weight: 700;
line-height: 24px;
color: rgba(5, 95, 194, 1);
}
.title {
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-top: 12px;
}
.desc {
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-top: 8px;
}
}
}
.more {
display: flex;
color: rgba(5, 95, 194, 1);
font-size: 14px;
font-weight: 400;
line-height: 22px;
align-items: center;
cursor: pointer;
.moreIcon {
width: 16px;
height: 16px;
background-image: url("../../assets/images/panel6_more.png");
margin-left: 3px;
background-size: 100% 100%;
margin-bottom: 2px;
}
}
}
</style>
src/views/exportControl/analysis/content/survey.vue deleted 100644 → 0
浏览文件 @ 15c01871
<template>
<div style="padding: 0 5%">
<el-row :gutter="20">
<el-col :span="13">
<custom-container title="实体清单发布机构">
<!-- 顶部右侧自定义内容 -->
<template #header-right>
<div style="display: flex; gap: 8px">
<!-- <el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input> -->
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button>
</div>
</template>
<!-- 中间内容自定义 -->
<template #default>
<div class="content-card">
<el-image class="content-img" :src="BISlogo" fit="fill" />
<div class="content-desc">
<div class="content-desc-item">
<div class="content-desc-title">机构名称：</div>
<div class="content-desc-content">美国商务部工业与安全局</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">相关措施：</div>
<div class="content-desc-content">出口管制条例（EAR）、实体清单、商业管制清单（CCL）、232调查等</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">法案类别：</div>
<div class="content-desc-content">公法（编号：Pub. L. No. 119-21）</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">机构职责：</div>
<div class="content-desc-content content-desc-content-long">
美国商务部工业与安全局是美国商务部的一个部门，主要负责管理和监督美国的出口管制和安全问题。通过确保有效的出口管制和条约合规体系，促进美国保持战略技术领导地位，从而推动美国国家安全、外教政策及经济目标的实现。
</div>
</div>
</div>
</div>
</template>
</custom-container>
<custom-container title="重点人物">
<!-- 中间内容自定义 -->
<template #default>
<div style="display: flex; gap: 20px">
<div class="renwu-card">
<el-image class="content-img-2" :src="Renwu1" fit="fill" />
<div class="content-desc">
<div class="content-desc-title">吉娜·雷蒙多</div>
<div class="content-desc-content content-desc-content-long">英文名：Gina Raimondo</div>
<div class="content-desc-content content-desc-content-long">党派：美国民主党</div>
</div>
</div>
<div class="renwu-card">
<el-image class="content-img-2" :src="Renwu2" fit="fill" />
<div class="content-desc">
<div class="content-desc-title">艾伦·埃斯特韦斯</div>
<div class="content-desc-content content-desc-content-long">英文名：Alan Estevez</div>
<div class="content-desc-content content-desc-content-long">党派：美国民主党</div>
</div>
</div>
</div>
</template>
</custom-container>
<custom-container title="制裁原因">
<!-- 中间内容自定义 -->
<template #default>
<div style="line-height: 25px; color: rgba(95, 101, 108, 1)">
<div>1.获取美国产物项，以支持中国量子技术；</div>
<div>2.支持2023年2月飞越美国上空的高空气球；</div>
<div>3.获取获取美国原产的无人机物项供中国军方使用。</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="11">
<custom-container title="本次制裁共新增83个实体，其中53个中国大陆实体、1个中国台湾实体。">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 12px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary" icon="Plus">新建项目</el-button>
</div>
</template> -->
<!-- 中间内容自定义 -->
<template #default>
<div class="content-vertical-card">
<el-button-group>
<el-button :icon="Document"> 整体情况</el-button>
<el-button type="primary" :icon="Postcard">
国内分布
<!-- <el-icon class="el-icon--right"><ArrowRight /></el-icon> -->
</el-button>
</el-button-group>
<el-image class="content-distribution-img" :src="Distribution" fit="fill" />
<div style="flex: 1; justify-content: flex-start; width: 100%">
<el-button-group>
<el-button>按类别</el-button>
<el-button type="primary">
按领域
<!-- <el-icon class="el-icon--right"><ArrowRight /></el-icon> -->
</el-button>
</el-button-group>
</div>
</div>
</template>
<!-- 底部自定义内容 -->
<!-- <template #footer>
<el-button>取消</el-button>
<el-button type="primary">保存更改</el-button>
</template> -->
</custom-container>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<custom-container title="美国前序相关制裁、前序相关事件列表">
<template #default>
<!-- <div class="example-card">
<h3>项目介绍</h3>
<p>这是一个示例项目，展示了如何使用自定义容器组件。该组件具有高度可定制性，可以适应各种业务场景的需求。</p>
</div>
<div class="example-card">
<h3>项目进度</h3>
<p>当前项目已完成75%，预计在下个月初完成所有开发任务并进入测试阶段。</p>
<el-progress :percentage="75" :stroke-width="16" />
</div> -->
<div class="time-line">
<div class="time-line-title">
<img class="time-line-dot" src="@/assets/images/dot.png" alt="" />
<span class="time-line-title-text">2025-9-25</span>
</div>
<div class="time-line-desc">
<div class="time-line-desc-title">传感器和仪器仪表技术咨询委员会将于2024年5月9日召开部分闭门会议</div>
<div class="time-line-desc-text">
传感器与仪器仪表技术咨询委员会(以下简称“委员会”)将于美国东部夏令时间2024年5月9日星期四下午1:00至2:30召开会议。本次会议将通过微软团队(MS
Teams)以线上形式举行。根据美国商务部第10-16号《部门组织》文件。
</div>
</div>
</div>
<div class="time-line">
<div class="time-line-title">
<img class="time-line-dot" src="@/assets/images/dot.png" alt="" />
<span class="time-line-title-text">2025-4-25</span>
</div>
<div class="time-line-desc">
<div class="time-line-desc-title">中美关税战升级至125%与反制措施</div>
<div class="time-line-desc-text">
美国将对华关税从34%提升至84%（总税率104%），中方同步对美商品加征同等税率，并暂停进口美国影片、限制留学合作。特朗普政府通过"基准关税+对等关税+额外加征"策略施压，引发全球供应链震荡。
</div>
</div>
</div>
<div class="time-line">
<div class="time-line-title">
<img class="time-line-dot" src="@/assets/images/dot.png" alt="" />
<span class="time-line-title-text">2025-4-17</span>
</div>
<div class="time-line-desc">
<div class="time-line-desc-title">美国对华加征关税至20%并扩大科技制裁议</div>
<div class="time-line-desc-text">
美国以"芬太尼问题"为由提高对华关税至20%，恢复钢铁铝关税；同时推动《恢复贸易公平法案》，计划对中国商品征收100%关税。系统性打压中国高科技产业，关税措施实质为经济勒索。
</div>
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
</div>
</template>
<script setup>
import CustomContainer from "@/components/Container/index.vue";
import BISlogo from "@/assets/images/BISlogo.png";
import Distribution from "@/assets/images/distribution.png";
import Renwu1 from "@/assets/images/renwu-1.png";
import Renwu2 from "@/assets/images/renwu-2.png";
import { Document } from "@element-plus/icons-vue";
import { Postcard } from "@element-plus/icons-vue";
</script>
<style scoped>
.content-card {
display: flex;
align-items: flex-start;
gap: 20px;
}
.content-vertical-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.renwu-card {
display: flex;
align-items: center;
gap: 20px;
width: 379px;
height: 148px;
background-color: rgba(234, 236, 238, 1);
padding-left: 10px;
}
.content-img {
width: 154px;
height: 154px;
flex-shrink: 0;
}
.content-img-2 {
width: 128px;
height: 128px;
flex-shrink: 0;
}
.content-distribution-img {
width: 627px;
height: 536px;
}
.content-desc {
display: flex;
flex-direction: column;
gap: 8px;
}
.content-desc-item {
display: flex;
gap: 4px;
}
.content-desc-title {
width: 100px;
flex-shrink: 0;
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
.content-desc-content {
color: rgba(10, 87, 166, 1);
font-size: 16px;
font-weight: 700;
}
.content-desc-content-long {
color: rgba(95, 101, 108, 1);
font-weight: 400;
}
.time-line {
display: flex;
gap: 20px;
align-items: flex-start;
padding-left: 10px;
margin-bottom: 20px;
}
.time-line-title {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.time-line-dot {
width: 10px;
height: 10px;
}
.time-line-title-text {
font-size: 14px;
font-weight: 700;
color: rgba(95, 101, 108, 1);
color: var(--base-color);
}
.time-line-desc-title {
font-size: 16px;
font-weight: 400;
color: var(--base-color);
margin-bottom: 5px;
}
.time-line-desc-text {
font-size: 14px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
}
.time-line-dot {
width: 8px;
height: 8px;
background-color: rgba(10, 87, 166, 1);
border-radius: 50%;
}
.example-card {
border: 1px solid #ebeef5;
border-radius: 6px;
padding: 16px;
margin-bottom: 16px;
background-color: #fafafa;
}
.example-card h3 {
color: #409eff;
margin-bottom: 8px;
}
.example-card p {
color: #606266;
line-height: 1.6;
}
</style>
src/views/exportControl/analysis/index.vue
浏览文件 @ dfb2af28
<template>
<div class="page-container">
<Header />
<!-- 导航标签区域 -->
<div class="nav-section">
<div class="tabs">
<div :class="['tab-item', { active: activeTab === '制裁概况' }]" @click="setActiveTab('制裁概况')">制裁概况</div>
<div :class="['tab-item', { active: activeTab === '深度挖掘' }]" @click="setActiveTab('深度挖掘')">深度挖掘</div>
<div :class="['tab-item', { active: activeTab === '影响分析' }]" @click="setActiveTab('影响分析')">影响分析</div>
</div>
<div class="action-buttons">
<el-button>法案原文</el-button>
<el-button type="primary">分析报告</el-button>
</div>
</div>
<!-- 内容区域 -->
<div class="content-section">
<!-- <div class="content-placeholder">
<el-icon><document /></el-icon>
<p>这里是制裁概况的内容区域</p>
<p>请选择上方标签查看不同分析内容</p>
</div> -->
<Survey v-if="activeTab === '制裁概况'" />
<DepthMine v-if="activeTab === '深度挖掘'" />
<ImpactAnalysis v-if="activeTab === '影响分析'" />
<div 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="left-absolute">
<el-image :src="Left1" alt="" />
<el-image :src="Left2" alt="" />
<el-image :src="Left3" alt="" />
<div class="info">
<div class="info-box1">{{ "实体清单新增内容" }}</div>
<div class="info-box2">
<div class="info-box2-item">{{ "2025-19508 (90 FR 48193)" }}</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月" }}</div>
<div class="name">{{ "美国商务部工业与安全局" }}</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 } from "vue";
import Header from "./header.vue";
import Survey from "./content/survey.vue";
import DepthMine from "./content/depthMine.vue";
import ImpactAnalysis from "./content/impactAnalysis.vue";
import Left1 from "@/assets/images/left-1.png";
import Left2 from "@/assets/images/left-2.png";
import Left3 from "@/assets/images/left-3.png";
const activeTab = ref("制裁概况");
const setActiveTab = tabName => {
activeTab.value = tabName;
import { ref, onMounted } from "vue";
import router from "@/router";
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";
const activeName = ref("分析报告");
const handleSwitchActiveName = name => {
activeName.value = name;
};
</script>
<style scoped lang="scss">
.page-container {
position: relative;
margin: 0px auto;
background-color: rgba(247, 248, 249, 1);
}
.nav-section {
display: flex;
justify-content: space-between;
align-items: center;
/* padding: 16px 24px; */
padding-left: 6%;
padding-right: 6%;
background-color: #fff;
border-bottom: 1px solid #ebeef5;
}
const curBill = ref("公法（2025年7月4日）");
.tabs {
display: flex;
gap: 0;
}
const billList = ref([
{
label: "公法（2025年7月4日）",
value: "公法（2025年7月4日）"
},
{
label: "公法（2025年7月2日）",
value: "公法（2025年7月2日）"
}
]);
.tab-item {
width: 120px;
height: 40px;
text-align: center;
line-height: 30px;
// padding: 12px 24px;
font-size: 18px;
color: #606266;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.3s;
box-sizing: border-box;
}
const mainHeaderBtnList = ref([
{
icon: icon1,
activeIcon: icon1Active,
name: "制裁概况",
path: "/exportControlAnalysis/overview"
},
{
icon: icon2,
activeIcon: icon2Active,
name: "深度挖掘",
path: "/exportControlAnalysis/deepDig"
},
{
icon: icon3,
activeIcon: icon3Active,
name: "影响分析",
path: "/exportControlAnalysis/influence"
}
]);
// .tab-item.active {
// color: #409eff;
// border-bottom-color: #409eff;
// background-color: rgba(64, 158, 255, 0.1);
// }
const activeTitle = ref("制裁概况");
.tab-item.active {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 30px;
border-bottom: 3px solid var(--color-main-active);
}
const handleClickMainHeaderBtn = item => {
activeTitle.value = item.name;
// window.sessionStorage.setItem('activeTitle', activeTitle.value)
router.push(item.path);
};
.tab-item:hover {
color: var(--color-main-active);
}
const activeNavIndex = ref(0);
.action-buttons {
display: flex;
gap: 12px;
}
const handleClickNav = (index, item) => {
activeNavIndex.value = index;
router.push(item.path);
};
.content-section {
padding: 24px;
min-height: 400px;
}
onMounted(() => {
// if (window.sessionStorage.getItem("activeTitle")) {
// activeTitle.value = window.sessionStorage.getItem("activeTitle");
// }
});
</script>
.content-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
color: #909399;
}
<style lang="scss" scoped>
.layout-container {
width: 1920px;
height: 1016px;
background: rgba(249, 250, 252, 1);
position: relative;
margin: 0 auto;
// .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;
.content-placeholder .el-icon {
font-size: 48px;
margin-bottom: 16px;
color: #dcdfe6;
}
// 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;
.content-placeholder p {
font-size: 16px;
margin-top: 8px;
}
// .nav-search {
// width: 22px;
// height: 22px;
// margin: 21px 0;
// }
@media (max-width: 768px) {
.bill-info {
flex-direction: column;
align-items: flex-start;
}
// .nav-message {
// width: 22px;
// height: 22px;
// margin: 21px 30px;
// }
.date-author {
align-items: flex-start;
margin-top: 12px;
// .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: 100%;
.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;
}
.nav-section {
flex-direction: column;
align-items: flex-start;
gap: 16px;
.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;
}
.tabs {
.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%;
overflow-x: auto;
height: 100%;
}
}
.left-absolute {
position: fixed;
}
.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: 160px;
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 {
overflow-x: hidden;
}
}
.layout-report-box {
position: absolute;
z-index: 9999;
top: 154px;
left: 0;
top: 60%;
// width: 48px;
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;
flex-direction: column;
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;
gap: 16px;
background-color: #fff;
border-radius: 10px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 16px 12px;
box-shadow: 0 0 15px 0 rgba(60, 87, 126, 0.2);
div {
width: 17px;
height: 18px;
.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>
src/views/exportControl/components/CardCustom.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<el-card class="card">
<div class="wrap">
<div class="header" :style="{ height: headerHeight }">
<div class="iconWrap"></div>
<div class="titleWrap">
{{ title }}
</div>
<div class="rightWrap">
<slot name="right"> </slot>
<div class="ButtonWrap">
<div class="button buttonXiazai"></div>
<div class="button buttonShoucang"></div>
</div>
</div>
</div>
<div class="body">
<slot name="default"> </slot>
</div>
</div>
</el-card>
</template>
<script setup>
import { Edit, Plus } from "@element-plus/icons-vue";
const emit = defineEmits(["moreClick"]);
defineProps({
titleBackgroundColor: {
type: String,
default: "red"
},
titleColor: {
type: String,
default: "#fff"
},
titleTextAlign: {
type: String,
default: "center"
},
lineColor: {
type: String,
default: "transparent"
},
title: {
type: String,
default: "风险信号"
},
iconWidth: {
type: String,
default: "60px"
},
headerHeight: {
type: String,
default: "56px"
}
});
function moreClick() {
emit("moreClick");
}
</script>
<style lang="scss" scoped>
.card {
position: relative;
:deep(.el-card__body) {
padding: 0;
height: 100%;
}
}
.wrap {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
height: 56px;
display: flex;
flex-direction: row;
align-items: center;
z-index: 1;
position: relative;
flex-shrink: 0;
padding-right: 12px;
}
.iconWrap {
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.titleWrap {
margin-left: 16px;
height: 16px;
line-height: 16px;
color: var(--color-main-active);
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.rightWrap {
display: flex;
justify-content: end;
align-items: center;
flex: 1;
}
.ButtonWrap {
display: flex;
align-items: center;
.button {
width: 28px;
height: 28px;
background-size: 100% 100%;
cursor: pointer;
}
.buttonXiazai {
background-image: url("../assets/images/xiazaiIcon.png");
margin-right: 4px;
}
.buttonShoucang {
background-image: url("../assets/images/shoucangIcon.png");
}
}
.body {
flex: 1;
min-height: 0;
}
</style>
src/views/exportControl/index.vue
浏览文件 @ dfb2af28
......@@ -674,7 +674,7 @@ const handleBackHome = () => {
const handleToDetail = () => {
router.push({
path: "/exportControl/analysis"
path: "/exportControlAnalysis"
});
};
......
浏览文件 @ dfb2af28
No preview for this file type
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论