Skip to content

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

出口管制详情ui完成

上级 360ea9fc
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 956 行增加 和 65 行删除
src/views/bill/billHome/index.vue
浏览文件 @ 29a8ab07
...@@ -626,7 +626,7 @@ const curBill = ref({ ...@@ -626,7 +626,7 @@ const curBill = ref({
// 查看详情 // 查看详情
const handleClickToDetail = () => { const handleClickToDetail = () => {
window.sessionStorage.setItem("billId", curBill.value.billId); // window.sessionStorage.setItem("billId", curBill.value.billId);
// router.push("/billLayout"); // router.push("/billLayout");
const route = router.resolve("/billLayout"); const route = router.resolve("/billLayout");
window.open(route.href, "_blank"); window.open(route.href, "_blank");
......
src/views/exportControl/analysis/components/hint.vue 0 → 100644
浏览文件 @ 29a8ab07
<template>
<div class="hintWrap">
<div class="icon1"></div>
<div class="title">{{text}}</div>
<div class="icon2Wrap">
<div class="icon2"></div>
</div>
</div>
</template>
<script setup>
defineProps({
text: {
type: String,
required: true
}
});
</script>
<style lang="scss" scoped>
.hintWrap {
display: flex;
align-items: center;
padding: 7px 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;
flex: 1;
}
.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: 20px;
.icon2 {
width: 12px;
height: 12px;
background-image: url("../../assets//images/rightIcon.png");
background-size: 100% 100%;
}
}
}
</style>
src/views/exportControl/analysis/components/influencePanel1.vue 0 → 100644
浏览文件 @ 29a8ab07
<template>
<div class="influencePanel1">
<CardCustom title="新增科研机构列表" :style="{ width: '420px', height: '860px' }">
<template #right>
<el-select :style="{ width: '120px', marginRight: '8px' }" size="mini" v-model="selectedId" placeholder="请选择">
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</template>
<div class="tableWrap">
<el-table
:data="panel5MockData"
class="sanction-table"
stripe
empty-text="暂无数据"
header-row-class-name="table-header"
row-class-name="table-row"
>
<el-table-column prop="index" label="序号" width="60">
<template #default="{ $index }">
<div class="index">{{ $index + 1 }}</div>
</template>
</el-table-column>
<el-table-column prop="name" label="名称" min-width="230">
<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="number" label="仪器进口数" width="110"></el-table-column>
</el-table>
</div>
</CardCustom>
<div class="right">
<div class="row">
<CardCustom title="各类别仪器对美依赖情况" :style="{ width: '642px', height: '422px' }">
<div class="subPanel1">
<div class="chartsWrap">
<Echarts :option="horizontalBarOptions" height="100%"></Echarts>
</div>
<Hint
text="受制裁实体中，医学科研仪器对美依赖程度最高，达到50%。此外，电子策略仪器、物理性能测试仪器、激光器、核仪器、计量仪器、分析仪器等也有较高的对美依赖度，本次制裁可能会对相关企业产生较大的影响。"
></Hint>
</div>
</CardCustom>
<CardCustom title="仪器进口国可替代性分析" :style="{ width: '642px', height: '422px' }">
<div class="subPanel2">
<div class="chartsWrap">
<Echarts :option="pieOptions2" height="100%"></Echarts>
</div>
<Hint
text="受制裁实体的仪器来源国主要为美国,但是德国、日本、英国等国也占有较大比重,后续可考虑将上述国家作为仪器进口来源替代国。"
></Hint>
</div>
</CardCustom>
</div>
<div class="row">
<CardCustom title="仪器对美依赖度升高风险分析" :style="{ width: '642px', height: '422px' }">
<div class="subPanel3">
<div class="chartsWrap">
<Echarts :option="multipleLineOptions1" height="100%"></Echarts>
</div>
<Hint
text="近年来，受制裁实体仪器的对美依赖度整体上有所降低，但工艺试验仪器和核仪器的对美依赖程度有抬头趋势，需要加以注意。"
></Hint>
</div>
</CardCustom>
<CardCustom title="仪器国产化降低风险分析" :style="{ width: '642px', height: '422px' }">
<div class="subPanel4">
<div class="chartsWrap">
<Echarts :option="multipleLineOptions2" height="100%"></Echarts>
</div>
<Hint
text="近些年,受制裁实体的国产仪器数量整体上呈增加趋势,但是2023年,各类国产仪器的新增数量均有显著降低,需要加以关注。"
></Hint>
</div>
</CardCustom>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, shallowReactive, shallowRef } from "vue";
import CardCustom from "../../components/CardCustom.vue";
import Echarts from "@/components/Chart/index.vue";
import Hint from "./hint.vue";
import college1 from "../../assets/images/college1.png";
import college2 from "../../assets/images/college2.png";
import college3 from "../../assets/images/college3.png";
import college4 from "../../assets/images/college4.png";
import college5 from "../../assets/images/college5.png";
import college6 from "../../assets/images/college6.png";
import college7 from "../../assets/images/college7.png";
import college8 from "../../assets/images/college8.png";
import college9 from "../../assets/images/college9.png";
import college10 from "../../assets/images/college10.png";
import college11 from "../../assets/images/college11.png";
import { getHorizontalBarChart1, getPieOption2, getMultipleLineChart } from "../../utils/charts";
const selectOptions = [
{
value: 1,
label: "对外依赖"
}
];
const selectedId = ref(selectOptions[0].value);
const indexMethod = index => {
return index + 1;
};
const panel5MockData = [
{
name: "科大讯飞股份有限公司",
number: "1556",
img: college1
},
{
name: "中国科学院物理研究所",
number: "1245",
img: college2
},
{
name: "清华大学",
number: "1032",
img: college3
},
{
name: "复旦大学",
number: "965",
img: college4
},
{
name: "中国水产科学研究院",
number: "910",
img: college5
},
{
name: "上海科技大学",
number: "898",
img: college6
},
{
name: "合肥物质科学研究院",
number: "823",
img: college7
},
{
name: "空天信息创新研究院",
number: "804",
img: college8
},
{
name: "北京航空航天大学",
number: "761",
img: college9
},
{
name: "苏州大学",
number: "752",
img: college10
},
{
name: "电子科技大学",
number: "703",
img: college11
}
];
const horizontalBarOptions = shallowRef({});
const pieOptions2 = shallowRef({});
const multipleLineOptions1 = shallowRef({});
const multipleLineOptions2 = shallowRef({});
onMounted(() => {
horizontalBarOptions.value = getHorizontalBarChart1(
["地球探测仪器", "计算机及其配套设备", "天文仪器", "分析仪器", "核仪器", "物理性能测试仪器", "医学科研仪器"],
[10, 10, 21, 25, 79, 95, 109],
false
);
pieOptions2.value = getPieOption2([
{ name: "美国", value: 27 },
{ name: "日本", value: 22 },
{ name: "德国", value: 18 },
{ name: "英国", value: 15 },
{ name: "韩国", value: 12 },
{ name: "荷兰", value: 8 },
{ name: "其他", value: 7 }
]);
multipleLineOptions1.value = getMultipleLineChart({
dates: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [
{ name: "电子测量仪器", value: [45, 35, 25, 20, 20, 14, 15, 15, 23, 21] },
{ name: "分析仪器", value: [35, 33, 24, 21, 22, 18, 13, 19, 21, 31] },
{ name: "工艺试验仪器", value: [32, 22, 12, 11, 14, 15, 17, 13, 12, 26] },
{ name: "核仪器", value: [48, 38, 28, 28, 28, 18, 18, 18, 28, 28] }
]
});
multipleLineOptions2.value = getMultipleLineChart({
dates: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [
{ name: "电子测量仪器", value: [45, 35, 25, 20, 20, 14, 15, 15, 23, 21] },
{ name: "分析仪器", value: [35, 33, 24, 21, 22, 18, 13, 19, 21, 31] },
{ name: "工艺试验仪器", value: [32, 22, 12, 11, 14, 15, 17, 13, 12, 26] },
{ name: "核仪器", value: [48, 38, 28, 28, 28, 18, 18, 18, 28, 28] }
]
});
});
</script>
<style lang="scss" scoped>
.influencePanel1 {
display: flex;
gap: 16px;
.tableWrap {
: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;
}
.index {
width: 24px;
height: 24px;
background-color: rgba(231, 243, 255, 1);
color: rgb(5, 95, 194);
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
margin: 0 auto;
}
.name {
display: flex;
align-items: center;
.img {
width: 40px;
height: 40px;
margin-right: 8px;
}
}
}
.right {
display: flex;
flex-direction: column;
gap: 16px;
}
.row {
display: flex;
gap: 16px;
}
}
.subPanel1,
.subPanel2,
.subPanel3,
.subPanel4 {
height: 100%;
display: flex;
flex-direction: column;
padding: 2px 18px 12px 18px;
.chartsWrap {
flex: 1;
}
}
</style>
src/views/exportControl/analysis/components/panel1.vue
浏览文件 @ 29a8ab07
...@@ -2,25 +2,160 @@ ...@@ -2,25 +2,160 @@
<div class="panel1Wrap"> <div class="panel1Wrap">
<div class="row"> <div class="row">
<CardCustom title="实体清单制裁强度" :style="{ width: '798px', height: '422px' }"> <CardCustom title="实体清单制裁强度" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel1"></div> <template #right>
<el-select
:style="{ width: '120px', marginRight: '8px' }"
size="mini"
v-model="value1"
placeholder="领域选择"
>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
<el-select
:style="{ width: '120px', marginRight: '18px' }"
size="mini"
v-model="value2"
placeholder="类型选择"
>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</template>
<div class="subPanel1">
<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
<Echarts :option="bar1Option" height="100%"></Echarts>
</div>
<Hint text="近几次新增受制裁实体中，中国实体占比提高，美方针对中国的出口管制风险显著增加。"></Hint>
</div>
</CardCustom> </CardCustom>
<CardCustom title="新增实体数量增长趋势" :style="{ width: '798px', height: '422px' }"> <CardCustom title="新增实体数量增长趋势" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel2"></div> <div class="subPanel2">
<div class="chartsWrap">
<Echarts :option="line1Option" height="100%"></Echarts>
</div>
<Hint
text="近年来美国对中国新增实体数量总体呈上升趋势，2018-2023 年 BIS 针对中国发布 “实体清单”
的频次逐年攀升，拜登政府时期新增实体数量已超越特朗普政府时期。"
></Hint>
</div>
</CardCustom> </CardCustom>
</div> </div>
<div class="row"> <div class="row">
<CardCustom title="实体清单更新频率" :style="{ width: '798px', height: '422px' }"> <CardCustom title="实体清单更新频率" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel3"></div> <div class="subPanel3">
<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
<Echarts :option="bar2Option" height="100%"></Echarts>
</div>
<Hint text="2024年以来,实体清单更新次数相对于2023年有所降低,但是本年度内呈上升趋势。"></Hint>
</div>
</CardCustom> </CardCustom>
<CardCustom title="重点实体列表" :style="{ width: '798px', height: '422px' }"> <CardCustom title="重点实体列表" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel4"></div> <template #right>
<el-input v-model="value3" placeholder="搜索" size="mini" :style="{ width: '300px', marginRight: '8px' }">
<template #suffix>
<i class="searchIcon"></i>
</template>
</el-input>
</template>
<div class="subPanel4">
<div class="listWrap">
<div class="item" v-for="(item, index) in subPanel4" :key="index">
<div class="name">{{ item.name }}</div>
<div class="tags">
<div
class="tagItem"
v-for="(item, index) in item.tags"
:key="index"
:class="`tagLevel${item.level}`"
>
{{ item.name }}
</div>
</div>
</div>
</div>
<Hint
text="本次实体清单更新,科研院所占比相对较高。需要注意的是,中国科学技术大学、中国科学院物理研究所等国内重点科研机构被列入实体清单,此外还有中科星图以及中电科旗下的多家研究所被列入清单,可能会对相关行业产生显著影响。"
></Hint>
</div>
</CardCustom> </CardCustom>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, shallowRef, onMounted } from "vue";
import CardCustom from "../../components/CardCustom.vue"; import CardCustom from "../../components/CardCustom.vue";
import { Search } from "@element-plus/icons-vue";
import Echarts from "@/components/Chart/index.vue";
import { getBarChart, getLineChart } from "../../utils/charts";
import Hint from "./hint.vue";
const options = [
{
value: "1",
label: "人工智能"
},
{
value: "2",
label: "航空航天"
}
];
const value1 = ref("");
const value2 = ref("");
const value3 = ref("");
const bar1Option = shallowRef({});
const bar2Option = shallowRef({});
const line1Option = shallowRef({});
const subPanel4 = ref([
{
name: "中国科学技术大学",
tags: [
{
name: "双一流",
level: 1
},
{
name: "985",
level: 2
},
{
name: "关税政策",
level: 3
}
]
},
{
name: "合肥量子信息科学国家实验室",
tags: [
{
name: "上市企业",
level: 2
}
]
},
{
name: "中国科学院物理研究所",
tags: [
{
name: "科研院所",
level: 4
}
]
}
]);
onMounted(() => {
bar1Option.value = getBarChart(
["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
[219, 228, 129, 159, 152, 157, 78, 34, 56, 78],
["rgba(255, 159, 22, 1)", "rgba(255, 159, 22, 0)"],
"制裁强度"
);
bar2Option.value = getBarChart(
["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
[39, 28, 49, 19, 22, 25, 78, 34, 56, 28],
["rgba(22, 119, 255, 1)", "rgba(22, 119, 255, 0)"],
"更新频率"
);
line1Option.value = getLineChart();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -35,9 +170,84 @@ import CardCustom from "../../components/CardCustom.vue"; ...@@ -35,9 +170,84 @@ import CardCustom from "../../components/CardCustom.vue";
gap: 16px; gap: 16px;
margin-top: 15px; margin-top: 15px;
} }
.subPanel1 { .subPanel1,
.subPanel2,
.subPanel3 {
height: 100%; height: 100%;
padding: 2px 24px 0 24px;
display: flex; display: flex;
flex-direction: column;
padding: 2px 18px 12px 18px;
.chartsWrap {
flex: 1;
}
}
.subPanel4 {
height: 100%;
display: flex;
flex-direction: column;
padding: 4px 20px 12px 20px;
.listWrap {
flex: 1;
min-height: 0;
overflow: auto;
.item {
height: 44px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.name {
flex: 1;
min-width: 0;
color: rgba(10, 18, 30, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-left: 20px;
white-space: nowrap;
overflow: hidden;
margin-right: 11px;
text-overflow: ellipsis;
}
.tags {
display: flex;
align-items: center;
gap: 8px;
.tagItem {
padding: 2px 8px;
font-size: 14px;
font-weight: 400;
line-height: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.tagLevel1 {
border: 1px solid rgba(255, 163, 158, 1);
background-color: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
.tagLevel2 {
border: 1px solid rgba(135, 232, 222, 1);
background-color: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
.tagLevel3 {
border: 1px solid rgba(255, 229, 143, 1);
background-color: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.tagLevel4 {
border: 1px solid rgba(33, 129, 57, 1);
background-color: rgba(33, 129, 57, 0.1);
color: rgba(33, 129, 57, 1);
}
}
}
}
}
.searchIcon {
width: 16px;
height: 16px;
background-image: url("../../assets/images/search.png");
background-size: 100% 100%;
} }
</style> </style>
src/views/exportControl/analysis/components/panel2.vue
浏览文件 @ 29a8ab07
<template> <template>
<div class="panel2">panel2</div> <div class="panel2Wrap">
<div class="row">
<CardCustom title="上市企业制裁强度" :style="{ width: '798px', height: '422px' }">
<div class="subPanel1">
<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
<Echarts :option="bar1Option" height="100%"></Echarts>
</div>
<Hint text="这些企业大多集中在半导体领域，美国制裁旨在限制中国先进半导体技术及相关制造能力。"></Hint>
</div>
</CardCustom>
<CardCustom title="上市企业融资变化情况" :style="{ width: '798px', height: '422px' }">
<div class="subPanel2">
<div class="chartsWrap">
<Echarts :option="line1Option" height="100%"></Echarts>
</div>
<Hint
text="最近 10 年中国上市企业融资情况呈现出先波动上升，在 2022 年达到峰值后，2023-2024 年又快速下滑的趋势。"
></Hint>
</div>
</CardCustom>
</div>
<div class="row">
<CardCustom title="上市企业市值变化情况" :style="{ width: '798px', height: '422px' }">
<div class="subPanel3">
<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
<Echarts :option="bar2Option" height="100%"></Echarts>
</div>
<Hint text="不仅对企业自身发展和市值产生了冲击，也反映了中美在经济、科技领域的博弈不断加剧。"></Hint>
</div>
</CardCustom>
<CardCustom title="重点上市企业列表" :style="{ width: '798px', height: '422px' }">
<template #right>
<el-input
v-model="value3"
placeholder="请输入关键词，使用(、)作为分隔符"
size="mini"
:style="{ width: '300px', marginRight: '8px' }"
>
<template #suffix>
<i class="searchIcon"></i>
</template>
</el-input>
</template>
<div class="subPanel4">
<div class="listWrap">
<div class="item" v-for="(item, index) in subPanel4" :key="index">
<div class="name">{{ item.name }}</div>
<div class="infoWrap">
<div class="shizhi">市值：{{ item.shizhi }}</div>
<div class="address">地址：{{ item.address }}</div>
<div class="hangye">行业：{{ item.hangye }}</div>
<div class="type">类型：{{ item.type }}</div>
<div class="detail">查看详情</div>
</div>
</div>
</div>
<Hint
text="本次实体清单更新,科研院所占比相对较高。需要注意的是,中国科学技术大学、中国科学院物理研究所等国内重点科研机构被列入实体清单,此外还有中科星图以及中电科旗下的多家研究所被列入清单,可能会对相关行业产生显著影响。"
></Hint>
</div>
</CardCustom>
</div>
</div>
</template> </template>
<script setup></script> <script setup>
import { ref, shallowRef, onMounted } from "vue";
import CardCustom from "../../components/CardCustom.vue";
import { Search } from "@element-plus/icons-vue";
import Echarts from "@/components/Chart/index.vue";
import { getBarChart, getLineChart } from "../../utils/charts";
import Hint from "./hint.vue";
const options = [
{
value: "1",
label: "人工智能"
},
{
value: "2",
label: "航空航天"
}
];
const value1 = ref("");
const value2 = ref("");
const value3 = ref("");
const bar1Option = shallowRef({});
const bar2Option = shallowRef({});
const line1Option = shallowRef({});
const subPanel4 = ref([
{
name: "中科星图有限公司",
shizhi: "278.47亿",
address: "北京",
hangye: "半导体",
type: "上市企业"
},
{
name: "中国科学院长春光学精密机械与物理研究所",
shizhi: "278.47亿",
address: "北京",
hangye: "半导体",
type: "研究院"
},
{
name: "中芯国际集成电路制造有限公司",
shizhi: "278.47亿",
address: "北京",
hangye: "半导体",
type: "上市企业"
}
]);
onMounted(() => {
bar1Option.value = getBarChart(
["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
[219, 228, 129, 159, 152, 157, 78, 34, 56, 78],
["rgba(22, 119, 255, 1)", "rgba(22, 119, 255, 0)"],
"制裁强度"
);
bar2Option.value = getBarChart(
["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
[39, 28, 49, 19, 22, 25, 78, 34, 56, 28],
["rgba(19, 188, 196, 1)", "rgba(19, 188, 196, 0)"],
"更新频率"
);
line1Option.value = getLineChart();
});
</script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.panel2Wrap {
width: 1600px;
margin: 0px auto 0 auto;
padding-bottom: 20px;
}
.row {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 15px;
}
.subPanel1,
.subPanel2,
.subPanel3 {
height: 100%;
display: flex;
flex-direction: column;
padding: 2px 18px 12px 18px;
.chartsWrap {
flex: 1;
}
}
.subPanel4 {
height: 100%;
display: flex;
flex-direction: column;
padding: 2px 20px 12px 20px;
.listWrap {
flex: 1;
min-height: 0;
overflow: auto;
display: flex;
flex-direction: column;
gap: 8px;
.item {
display: flex;
flex-direction: column;
border: 1px solid rgba(234, 236, 238, 1);
gap: 10px;
padding: 11px 20px;
flex-shrink: 0;
.name {
color: rgba(10, 18, 30, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.infoWrap {
display: flex;
color: rgba(132, 136, 142, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
.shizhi {
width: 180px;
flex-shrink: 0;
}
.address {
width: 130px;
flex-shrink: 0;
margin-right: 20px;
}
.hangye {
width: 130px;
flex-shrink: 0;
}
.type {
width: 130px;
flex-shrink: 0;
}
.detail {
margin-left: auto;
flex-shrink: 0;
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
}
}
}
.searchIcon {
width: 16px;
height: 16px;
background-image: url("../../assets/images/search.png");
background-size: 100% 100%;
}
</style>
src/views/exportControl/analysis/components/panel3.vue
浏览文件 @ 29a8ab07
<template> <template>
<div class="panel3">panel3</div> <div class="panel3Wrap">
<div class="row">
<CardCustom title="新增实体领域分布情况" :style="{ width: '798px', height: '422px' }">
<div class="subPanel1">
<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
<Echarts :option="pie1Option" height="100%"></Echarts>
</div>
<Hint text="美国对中国的制裁领域以半导体等高精尖领域企业。"></Hint>
</div>
</CardCustom>
<CardCustom title="量子科技领域历史制裁情况" :style="{ width: '798px', height: '422px' }">
<div class="subPanel2">
<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
<Echarts :option="line1Option" height="100%"></Echarts>
</div>
<Hint text="美国对中国量子科技领域制裁日益增加，对华制裁日益严峻。"></Hint>
</div>
</CardCustom>
</div>
<div class="row">
<CardCustom title="历次制裁涉及领域数" :style="{ width: '798px', height: '422px' }">
<div class="subPanel3">
<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
<Echarts :option="bar2Option" height="100%"></Echarts>
</div>
<Hint text="美国对中国制裁涉及领域数逐年增加，对华制裁日益严峻。"></Hint>
</div>
</CardCustom>
<CardCustom title="航空航天领域历史制裁情况" :style="{ width: '798px', height: '422px' }">
<div class="subPanel4">
<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
<Echarts :option="line2Option" height="100%"></Echarts>
</div>
<Hint text="美国对中国航空领域领域制裁日益增加，对华制裁日益严峻。"></Hint>
</div>
</CardCustom>
</div>
</div>
</template> </template>
<script setup></script> <script setup>
import { ref, shallowRef, onMounted } from "vue";
import CardCustom from "../../components/CardCustom.vue";
import { Search } from "@element-plus/icons-vue";
import Echarts from "@/components/Chart/index.vue";
import { getBarChart, getLineChart, getPieOption1 } from "../../utils/charts";
import Hint from "./hint.vue";
const pie1Option = shallowRef({});
const bar2Option = shallowRef({});
const line1Option = shallowRef({});
const line2Option = shallowRef({});
onMounted(() => {
pie1Option.value = getPieOption1(
[
{ name: "半导体与集成电路领域", value: 50 },
{ name: "生物技术与生命科学领域", value: 46 },
{ name: "航天遥感与量子技术领域", value: 12 },
{ name: "航空航天领域", value: 32 },
{ name: "人工智能领域", value: 31 },
{ name: "供应链与物流服务领域", value: 30 },
{ name: "工业软件领域", value: 24 }
]
);
bar2Option.value = getBarChart(
["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
[39, 28, 49, 19, 22, 25, 78, 34, 56, 28],
["rgba(19, 188, 196, 1)", "rgba(19, 188, 196, 0)"],
"更新频率"
);
line1Option.value = getLineChart("rgba(255, 149, 77, 1)");
line2Option.value = getLineChart("rgba(146, 84, 222, 1)");
});
</script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.panel3Wrap {
width: 1600px;
margin: 0px auto 0 auto;
padding-bottom: 20px;
}
.row {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 15px;
}
.subPanel1,
.subPanel2,
.subPanel3,
.subPanel4 {
height: 100%;
display: flex;
flex-direction: column;
padding: 2px 18px 12px 18px;
.chartsWrap {
flex: 1;
}
}
</style>
src/views/exportControl/analysis/components/panel4.vue
浏览文件 @ 29a8ab07
<template> <template>
<div class="panel4">panel4</div> <div class="panel4Wrap">
<div class="row">
<CardCustom title="新增实体领域分布情况" :style="{ width: '798px', height: '422px' }">
<div class="subPanel1">
<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
<Echarts :option="pie1Option" height="100%"></Echarts>
</div>
<Hint text="美国对中国的制裁领域以企业、科研院所为主。"></Hint>
</div>
</CardCustom>
<CardCustom title="科研院所类实体历史制裁情况" :style="{ width: '798px', height: '422px' }">
<div class="subPanel2">
<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
<Echarts :option="line1Option" height="100%"></Echarts>
</div>
<Hint text="美国对中国科研院所制裁逐年增加，对华制裁日益严峻。"></Hint>
</div>
</CardCustom>
</div>
<div class="row">
<CardCustom title="历次制裁涉及实体数" :style="{ width: '798px', height: '422px' }">
<div class="subPanel3">
<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
<Echarts :option="bar2Option" height="100%"></Echarts>
</div>
<Hint text="美国对中国制裁涉及领域数逐年增加，对华制裁日益严峻。"></Hint>
</div>
</CardCustom>
<CardCustom title="企业类实体历史制裁情况" :style="{ width: '798px', height: '422px' }">
<div class="subPanel4">
<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
<Echarts :option="line2Option" height="100%"></Echarts>
</div>
<Hint text="美国对中国企业制裁逐年增加，对华制裁日益严峻。"></Hint>
</div>
</CardCustom>
</div>
</div>
</template> </template>
<script setup></script> <script setup>
import { ref, shallowRef, onMounted } from "vue";
import CardCustom from "../../components/CardCustom.vue";
import { Search } from "@element-plus/icons-vue";
import Echarts from "@/components/Chart/index.vue";
import { getBarChart, getLineChart, getPieOption1 } from "../../utils/charts";
import Hint from "./hint.vue";
const pie1Option = shallowRef({});
const bar2Option = shallowRef({});
const line1Option = shallowRef({});
const line2Option = shallowRef({});
onMounted(() => {
pie1Option.value = getPieOption1(
[
{ name: "企业", value: 50 },
{ name: "科研院所", value: 40 },
{ name: "高校", value: 32 },
{ name: "政府官员", value: 30 },
{ name: "个人", value: 24},
]
);
bar2Option.value = getBarChart(
["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
[39, 28, 49, 19, 22, 25, 78, 34, 56, 28],
["rgba(19, 188, 196, 1)", "rgba(19, 188, 196, 0)"],
"更新频率"
);
line1Option.value = getLineChart("rgba(255, 149, 77, 1)");
line2Option.value = getLineChart("rgba(146, 84, 222, 1)");
});
</script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.panel4Wrap {
width: 1600px;
margin: 0px auto 0 auto;
padding-bottom: 20px;
}
.row {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 15px;
}
.subPanel1,
.subPanel2,
.subPanel3,
.subPanel4 {
height: 100%;
display: flex;
flex-direction: column;
padding: 2px 18px 12px 18px;
.chartsWrap {
flex: 1;
}
}
</style>
src/views/exportControl/analysis/content/deepDig.vue
浏览文件 @ 29a8ab07
<template> <template>
<div class="deepDig"> <div class="deepDigContainer">
<div class="row"> <div class="row">
<div class="panelButtonList"> <div class="panelButtonList">
<div <div
...@@ -95,7 +95,7 @@ const setActivePanelId = id => { ...@@ -95,7 +95,7 @@ const setActivePanelId = id => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.deepDig { .deepDigContainer {
width: 1600px; width: 1600px;
margin: 0px auto 0 auto; margin: 0px auto 0 auto;
padding-bottom: 20px; padding-bottom: 20px;
......
src/views/exportControl/analysis/content/overview.vue
浏览文件 @ 29a8ab07
...@@ -59,13 +59,7 @@ ...@@ -59,13 +59,7 @@
<PieCharts v-if="panel3ActiveIndex === 1"></PieCharts> <PieCharts v-if="panel3ActiveIndex === 1"></PieCharts>
<MapCharts v-if="panel3ActiveIndex === 2"></MapCharts> <MapCharts v-if="panel3ActiveIndex === 2"></MapCharts>
</div> </div>
<div class="hintWrap"> <Hint text="本次制裁共新增83个实体，其中53个中国大陆实体、1个中国台湾实体。"></Hint>
<div class="icon1"></div>
<div class="title">本次制裁共新增83个实体，其中53个中国大陆实体、1个中国台湾实体。</div>
<div class="icon2Wrap">
<div class="icon2"></div>
</div>
</div>
</div> </div>
</CardCustom> </CardCustom>
<CardCustom title="制裁原因" :style="{ width: '600px', height: '520px' }"> <CardCustom title="制裁原因" :style="{ width: '600px', height: '520px' }">
...@@ -106,7 +100,6 @@ ...@@ -106,7 +100,6 @@
class="sanction-table" class="sanction-table"
stripe stripe
empty-text="暂无数据" empty-text="暂无数据"
height="700px"
header-row-class-name="table-header" header-row-class-name="table-header"
row-class-name="table-row" row-class-name="table-row"
> >
...@@ -186,6 +179,8 @@ import CardCustom from "../../components/CardCustom.vue"; ...@@ -186,6 +179,8 @@ import CardCustom from "../../components/CardCustom.vue";
import PieCharts from "../components/pieCharts.vue"; import PieCharts from "../components/pieCharts.vue";
import MapCharts from "../components/mapCharts.vue"; import MapCharts from "../components/mapCharts.vue";
import ButtonList from "@/components/buttonList/buttonList.vue"; import ButtonList from "@/components/buttonList/buttonList.vue";
import Hint from "../components/hint.vue";
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref } from "vue";
import panel1_1 from "../../assets/images/panel1_1.png"; import panel1_1 from "../../assets/images/panel1_1.png";
import panel2_1 from "../../assets/images/panel2_1.png"; import panel2_1 from "../../assets/images/panel2_1.png";
...@@ -471,44 +466,6 @@ const panel6 = ref([ ...@@ -471,44 +466,6 @@ const panel6 = ref([
.chartWrap { .chartWrap {
flex: 1; 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 { .panel3ButtonWrap {
flex: 1; flex: 1;
...@@ -671,7 +628,6 @@ const panel6 = ref([ ...@@ -671,7 +628,6 @@ const panel6 = ref([
align-items: center; align-items: center;
.item { .item {
display: flex; display: flex;
w
.left { .left {
position: relative; position: relative;
margin-right: 20px; margin-right: 20px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论