Skip to content

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

出口管制详情ui完成

上级 360ea9fc
隐藏空白字符变更
内嵌 并排
正在显示 包含 3025 行增加 和 550 行删除
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/fishbone.vue 0 → 100644
浏览文件 @ 29a8ab07
<template>
<div class="fishbone">
<div class="main-line"></div>
<div class="top-bone">
<div class="left-bone">
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
</div>
<div class="right-bone">
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
</div>
</div>
<div class="top-bone1">
<div class="left-bone">
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
</div>
<div class="right-bone">
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
</div>
</div>
<div class="top-bone2">
<div class="left-bone">
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
</div>
<div class="right-bone">
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
</div>
</div>
<div class="bottom-bone">
<div class="left-bone">
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
</div>
<div class="right-bone">
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
</div>
</div>
<div class="bottom-bone1">
<div class="left-bone">
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
</div>
<div class="right-bone">
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
</div>
</div>
<div class="bottom-bone2">
<div class="left-bone">
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
<div class="left-bone-item">
<div class="icon">
<img src="../../assets/images/company-logo1.png" alt="" />
</div>
<div class="text">{{ "商汤科技" }}</div>
<div class="line"></div>
</div>
</div>
<div class="right-bone">
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
<div class="right-bone-item">
<div class="line"></div>
<div class="text">{{ "华为" }}</div>
<div class="icon">
<img src="../../assets/images/company-logo2.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.fishbone {
position: relative;
width: 100%;
height: 100%;
margin-top: 40px;
.main-line {
position: absolute;
top: 280px;
right: 0;
width: 888px;
height: 3px;
background: rgba(174, 208, 255, 1);
}
}
.top-bone {
position: absolute;
top: 20px;
right: 200px;
width: 3px;
height: 260px;
background: #90caf9;
transform: skew(30deg);
z-index: 1;
.left-bone {
color: #777;
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 260px;
// background: orange;
.left-bone-item {
transform: skew(-30deg);
height: 35px;
margin-bottom: 5px;
margin-top: 15px;
// background: #fff;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 7px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 4px;
height: 35px;
line-height: 35px;
}
.line {
margin-left: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
}
}
.right-bone {
color: #777;
position: absolute;
top: 0;
right: -150px;
width: 150px;
height: 260px;
// background: pink;
.right-bone-item {
transform: skew(-30deg);
height: 35px;
margin-bottom: 15px;
margin-top: 5px;
display: flex;
justify-content: flex-start;
.line {
margin-right: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
.text {
margin-right: 4px;
height: 35px;
line-height: 35px;
}
.icon {
margin-top: 7px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.top-bone1 {
position: absolute;
top: 20px;
right: 500px;
width: 3px;
height: 260px;
background: #90caf9;
transform: skew(30deg);
z-index: 1;
.left-bone {
color: #777;
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 260px;
// background: orange;
.left-bone-item {
transform: skew(-30deg);
height: 35px;
margin-bottom: 5px;
margin-top: 15px;
// background: #fff;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 7px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 4px;
height: 35px;
line-height: 35px;
}
.line {
margin-left: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
}
}
.right-bone {
color: #777;
position: absolute;
top: 0;
right: -150px;
width: 150px;
height: 260px;
// background: pink;
.right-bone-item {
transform: skew(-30deg);
height: 35px;
margin-bottom: 15px;
margin-top: 5px;
display: flex;
justify-content: flex-start;
.line {
margin-right: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
.text {
margin-right: 4px;
height: 35px;
line-height: 35px;
}
.icon {
margin-top: 7px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.top-bone2 {
position: absolute;
top: 20px;
right: 800px;
width: 3px;
height: 260px;
background: #90caf9;
transform: skew(30deg);
z-index: 1;
.left-bone {
color: #777;
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 260px;
// background: orange;
.left-bone-item {
transform: skew(-30deg);
height: 35px;
margin-bottom: 5px;
margin-top: 15px;
// background: #fff;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 7px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 4px;
height: 35px;
line-height: 35px;
}
.line {
margin-left: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
}
}
.right-bone {
color: #777;
position: absolute;
top: 0;
right: -150px;
width: 150px;
height: 260px;
// background: pink;
.right-bone-item {
transform: skew(-30deg);
height: 35px;
margin-bottom: 15px;
margin-top: 5px;
display: flex;
justify-content: flex-start;
.line {
margin-right: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
.text {
margin-right: 4px;
height: 35px;
line-height: 35px;
}
.icon {
margin-top: 7px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.bottom-bone {
position: absolute;
top: 280px;
right: 360px;
width: 3px;
height: 260px;
background: #90caf9;
transform: skew(-30deg);
z-index: 1;
.left-bone {
color: #777;
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 260px;
// background: orange;
.left-bone-item {
transform: skew(30deg);
height: 35px;
margin-bottom: 5px;
margin-top: 15px;
// background: #fff;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 7px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 4px;
height: 35px;
line-height: 35px;
}
.line {
margin-left: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
}
}
.right-bone {
color: #777;
position: absolute;
top: 0;
right: -150px;
width: 150px;
height: 260px;
// background: pink;
.right-bone-item {
transform: skew(30deg);
height: 35px;
margin-bottom: 15px;
margin-top: 5px;
display: flex;
justify-content: flex-start;
.line {
margin-right: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
.text {
margin-right: 4px;
height: 35px;
line-height: 35px;
}
.icon {
margin-top: 7px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.bottom-bone1 {
position: absolute;
top: 280px;
right: 660px;
width: 3px;
height: 260px;
background: #90caf9;
transform: skew(-30deg);
z-index: 1;
.left-bone {
color: #777;
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 260px;
// background: orange;
.left-bone-item {
transform: skew(30deg);
height: 35px;
margin-bottom: 5px;
margin-top: 15px;
// background: #fff;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 7px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 4px;
height: 35px;
line-height: 35px;
}
.line {
margin-left: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
}
}
.right-bone {
color: #777;
position: absolute;
top: 0;
right: -150px;
width: 150px;
height: 260px;
// background: pink;
.right-bone-item {
transform: skew(30deg);
height: 35px;
margin-bottom: 15px;
margin-top: 5px;
display: flex;
justify-content: flex-start;
.line {
margin-right: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
.text {
margin-right: 4px;
height: 35px;
line-height: 35px;
}
.icon {
margin-top: 7px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.bottom-bone2 {
position: absolute;
top: 280px;
right: 960px;
width: 3px;
height: 260px;
background: #90caf9;
transform: skew(-30deg);
z-index: 1;
.left-bone {
color: #777;
position: absolute;
top: 0;
left: -150px;
width: 150px;
height: 260px;
// background: orange;
.left-bone-item {
transform: skew(30deg);
height: 35px;
margin-bottom: 5px;
margin-top: 15px;
// background: #fff;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 7px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 4px;
height: 35px;
line-height: 35px;
}
.line {
margin-left: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
}
}
.right-bone {
color: #777;
position: absolute;
top: 0;
right: -150px;
width: 150px;
height: 260px;
// background: pink;
.right-bone-item {
transform: skew(30deg);
height: 35px;
margin-bottom: 15px;
margin-top: 5px;
display: flex;
justify-content: flex-start;
.line {
margin-right: 7px;
margin-top: 16px;
width: 30px;
height: 2px;
background: rgba(174, 208, 255, 1);
}
.text {
margin-right: 4px;
height: 35px;
line-height: 35px;
}
.icon {
margin-top: 7px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
</style>
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/influencePanel2.vue 0 → 100644
浏览文件 @ 29a8ab07
<template>
<div class="influencePanel2">
<CardCustom title="涉及行业" :style="{ width: '480px', height: '860px' }">
<div class="subPanel1">
<div class="chartsWrap">
<Echarts :option="horizontalBarOptions" height="100%"></Echarts>
</div>
<div class="buttonWrap">
<ButtonList :list="buttonList" :active-id="activeButtonId" @click="setActiveButtonId"></ButtonList>
</div>
<div class="listWrap">
<div class="item" v-for="(item, index) in listData" :key="index">
<div class="index" :class="{ isTopTen: index < 10 }">{{ index + 1 }}</div>
<div class="name">{{ item.name }}</div>
<div class="icon" :class="{ iconUp: item.isUp, iconDown: !item.isUp }"></div>
</div>
</div>
</div>
</CardCustom>
<CardCustom title="产业链分析" :style="{ width: '1240px', height: '860px' }">
<div class="subPanel2">
<Hint
text="法案核心意图在于通过税收优惠吸引制造业回流美国​，并在关键科技领域对中国进行遏制，限制中国获取先进技术、资本和市场渠道，从而延缓中国科技产业的发展速度。给半导体、新能源、人工智能等相关科技行业带来不小的短期压力。"
></Hint>
<div class="chartsWrap">
<div class="right-main-content">
<div class="right-main-content-main">
<Fishbone />
</div>
<div class="right-main-content-footer">
<div class="footer-item1">
<div class="footer-item1-bottom">
<div class="icon">
<img src="../../assets/images/warning.png" alt="" />
</div>
<div class="text">
{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
</div>
</div>
<div class="footer-item1-top">{{ "基础支撑" }}</div>
</div>
<div class="footer-item2">
<div class="footer-item2-bottom">
<div class="icon">
<img src="../../assets/images/warning.png" alt="" />
</div>
<div class="text">
{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
</div>
</div>
<div class="footer-item2-top">{{ "软件算法" }}</div>
</div>
<div class="footer-item3">
<div class="footer-item3-bottom">
<div class="icon">
<img src="../../assets/images/warning.png" alt="" />
</div>
<div class="text">
{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
</div>
</div>
<div class="footer-item3-top">{{ "行业应用" }}</div>
</div>
</div>
</div>
</div>
</div>
</CardCustom>
</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 ButtonList from "@/components/buttonList/buttonList.vue";
import Fishbone from "./fishbone.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 { getHorizontalBarChart2 } from "../../utils/charts";
const buttonList = [
{ id: 1, text: "新能源" },
{ id: 2, text: "半导体" },
{ id: 3, text: "跨境电商" },
{ id: 4, text: "金融业" },
{ id: 5, text: "军工" },
{ id: 6, text: "贸易" }
];
const activeButtonId = ref(buttonList[0].id);
const setActiveButtonId = id => {
activeButtonId.value = id;
};
const listData = [
{
name: "宁德时代新能源科技股份有限公司",
isUp: false
},
{
name: "比亚迪股份有限公司",
isUp: false
},
{
name: "隆基绿能科技股份有限公司",
isUp: false
},
{
name: "晶科能源控股有限公司",
isUp: false
},
{
name: "厦门海辰储能科技股份有限公司",
isUp: false
},
{
name: "国轩高科股份有限公司",
isUp: true
},
{
name: "远景科技集团",
isUp: false
},
{
name: "惠州亿纬锂能股份有限公司",
isUp: false
},
{
name: "天合光能股份有限公司",
isUp: false
},
{
name: "晶澳太阳能科技股份有限公司",
isUp: true
},
{
name: "通威股份有限公司",
isUp: true
},
{
name: "北京海博思创科技股份有限公司",
isUp: true
},
{
name: "上海派能能源科技股份有限公司",
isUp: false
}
];
const horizontalBarOptions = shallowRef({});
onMounted(() => {
horizontalBarOptions.value = getHorizontalBarChart2(
["贸易", "军工", "金融业", "跨境电商", "半导体", "新能源"],
[10, 21, 25, 79, 95, 109],
false
);
});
</script>
<style lang="scss" scoped>
.influencePanel2 {
display: flex;
gap: 16px;
}
.subPanel2 {
height: 100%;
display: flex;
flex-direction: column;
padding: 17px 18px 12px 18px;
.chartsWrap {
flex: 1;
.right-main-content {
height: 100%;
display: flex;
flex-direction: column;
.right-main-content-main {
flex: 1;
}
.right-main-content-footer {
height: 84px;
margin-left: 14px;
margin-top: 16px;
// background: orange;
display: flex;
.footer-item1 {
width: 408px;
.footer-item1-top {
position: relative;
z-index: 3;
height: 28px;
text-align: center;
line-height: 28px;
background: url("../../assets/images/bg3.png");
background-size: 100% 100%;
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 28px;
margin-top: 15px;
}
.footer-item1-bottom {
display: flex;
justify-content: center;
.icon {
margin-top: 9px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-top: 7px;
margin-left: 8px;
height: 22px;
color: rgba(206, 79, 81, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
.footer-item2 {
margin-left: -8px;
width: 408px;
.footer-item2-top {
position: relative;
z-index: 2;
height: 28px;
text-align: center;
line-height: 28px;
background: url("../../assets/images/bg2.png");
background-size: 100% 100%;
color: rgba(19, 168, 168, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 28px;
margin-top: 15px;
}
.footer-item2-bottom {
display: flex;
justify-content: center;
.icon {
margin-top: 9px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-top: 7px;
margin-left: 8px;
height: 22px;
color: rgba(206, 79, 81, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
.footer-item3 {
margin-left: -8px;
width: 408px;
.footer-item3-top {
position: relative;
z-index: 1;
height: 28px;
text-align: center;
line-height: 28px;
background: url("../../assets/images/bg1.png");
background-size: 100% 100%;
color: rgba(146, 84, 222, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 28px;
margin-top: 15px;
}
.footer-item3-bottom {
display: flex;
justify-content: center;
.icon {
margin-top: 9px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-top: 7px;
margin-left: 8px;
height: 22px;
color: rgba(206, 79, 81, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
}
// background: orange;
}
}
}
.subPanel1 {
padding: 0 17px;
height: 100%;
display: flex;
flex-direction: column;
.chartsWrap {
height: 200px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
background: rgba(247, 248, 249, 1);
}
.buttonWrap {
margin-top: 12px;
margin-bottom: 8px;
}
.listWrap {
flex: 1;
min-height: 0;
overflow: auto;
display: flex;
flex-direction: column;
.item {
display: flex;
align-items: center;
height: 42px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
overflow: hidden;
.index {
width: 24px;
height: 24px;
border-radius: 12px;
color: rgb(5, 95, 194);
font-size: 14px;
font-weight: 400;
display: flex;
justify-content: center;
align-items: center;
margin-left: 12px;
margin-right: 10px;
flex-shrink: 0;
}
.isTopTen {
background-color: rgba(231, 243, 255, 1);
}
.name {
color: rgb(59, 65, 75);
font-size: 16px;
font-weight: 400;
line-height: 24px;
height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.icon {
width: 8px;
height: 6px;
background-size: 100% 100%;
margin-left: 10px;
flex-shrink: 0;
}
.iconUp {
background-image: url("../../assets/images/iconUp.png");
}
.iconDown {
background-image: url("../../assets/images/iconDown.png");
}
}
}
}
</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/influence.vue
浏览文件 @ 29a8ab07
<template> <template>
<el-row :gutter="20"> <div class="influenceContainer">
<el-col :span="6"> <div class="row">
<custom-container title="新增科研机构列表" height="1040px"> <div class="buttonWrap">
<template #header-top> <div
<div class="content-top"> class="buttonItem"
<el-radio-group v-model="impactType" size="small"> :class="{ activeButtonItem: activeButtonId == item.id }"
<el-radio-button label="产业影响" value="cy" /> v-for="item in buttonList"
<el-radio-button label="科研机构影响" value="ky" /> :key="item.id"
</el-radio-group> @click="setActiveButtonId(item.id)"
</div> >
</template> {{ item.text }}
<!-- 顶部右侧自定义内容 --> <div class="icon"></div>
<template #header-right> </div>
<div style="display: flex; gap: 8px"> </div>
<!-- <el-input placeholder="搜索项目..." clearable style="width: 200px"> <div class="panelWrap">
<template #prefix> <InfluencePanel1 v-if="activeButtonId === 1"></InfluencePanel1>
<el-icon><Search /></el-icon> <InfluencePanel2 v-if="activeButtonId === 2"></InfluencePanel2>
</template> </div>
</el-input> </div>
<el-button type="primary">涉华背景</el-button> </div>
<el-button>全部背景</el-button> -->
<el-select v-model="orgType" :options="orgTypeOptions" :props="props" placeholder="Select" style="width: 80px" />
</div>
</template>
<template #default>
<div class="content-box-header">
<div class="content-box-header-title">名称</div>
<div class="content-box-header-title">进口仪器数</div>
</div>
<div class="content-box-centent-list">
<div class="content-box-list-item" v-for="item in entityList" :key="item.entity">
<div class="content-box-list-item-title">{{ item.entity }}</div>
<div class="content-box-list-item-num">{{ item.num }}</div>
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="18">
<el-row :gutter="20">
<el-col :span="12">
<custom-container title="各类别仪器对美依赖情况" height="500px">
<template #default>
<div class="content-box">
<!-- <div ref="barRef" style="height: 340px; width: 100%"></div> -->
<ECharts :option="barOption" autoresize :style="{ height: '340px' }" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text">
受制裁实体中，医学科研仪器对美依赖程度最高，达到50%。此外，电子策略仪器、物理性能测试仪器、激光器、核仪器、计量仪器、分析仪器等也有较高的对美依赖度，本次制裁可能会对相关企业产生较大的影响。
</span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="仪器进口国可替代性分析" height="500px">
<template #default>
<div class="content-box">
<!-- <div ref="pieRef" style="height: 340px; width: 100%"></div> -->
<ECharts :option="pieOption" autoresize :style="{ height: '340px' }" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text">
近些年,受制裁实体的国产仪器数量整体上呈增加趋势,但是2023年,各类国产仪器的新增数量均有显著降低,需要加以关注。
</span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<custom-container title="仪器对美依赖度升高风险分析" height="500px">
<template #default>
<div class="content-box">
<ECharts :option="frequenceOption" autoresize :style="{ height: '340px' }" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text">
近些年,受制裁实体的国产仪器数量整体上呈增加趋势,但是2023年,各类国产仪器的新增数量均有显著降低,需要加以关注。
</span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="仪器国产化降低风险分析" height="500px">
<template #default>
<div class="content-box">
<ECharts :option="chartOption" autoresize :style="{ height: '340px' }" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text">
近些年,受制裁实体的国产仪器数量整体上呈增加趋势,但是2023年,各类国产仪器的新增数量均有显著降低,需要加以关注。
</span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
</el-col>
</el-row>
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref } from "vue"; import { ref } from "vue";
// import * as echarts from "echarts"; import InfluencePanel1 from "../components/influencePanel1.vue";
import ECharts from "@/components/Chart/index.vue"; import InfluencePanel2 from "../components/influencePanel2.vue";
import { useEcharts } from "@/hooks/useEcharts"; const buttonList = [
import echarts from "@/plugins/echarts";
import { Search } from "@element-plus/icons-vue";
import CustomContainer from "@/components/Container/index.vue";
import { TAGTYPE } from "@/common/constant.js";
const impactType = ref("ky");
const orgTypeOptions = ref([
{
value: "1",
label: "对外依赖"
}
]);
const orgType = ref("1");
const tableData = ref([
{
date: "2024年5月14日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2024年4月11日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2024年2月27日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{ {
date: "2023年12月7日", id: 1,
entity: "37/24", text: "对华科研影响"
entityCN: "37/4",
proportion: "100%/1"
}, },
{ {
date: "2023年11月15日", id: 2,
entity: "37/24", text: "对华产业影响"
entityCN: "37/4",
proportion: "100%/1"
},
{
date: " 2024年3月5日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
} }
]); ];
const activeButtonId = ref(buttonList[0].id);
// 重点实体列表 const setActiveButtonId = id => {
const entityList = ref([ activeButtonId.value = id;
{
img: "",
num: 1556,
entity: "中国科学技术大学",
tags: ["双一流", "985", "关税政策"]
},
{
img: "",
num: 313,
entity: "合肥量子信息科学国家实验室",
tags: ["中国上市企业"]
},
{
img: "",
num: 270,
entity: "中国科学院物理研究所",
tags: ["科研院所"]
}
]);
const frequenceRef = ref(null);
const echartsRef = ref(null);
const pieRef = ref(null);
const barRef = ref(null);
const barOption = ref({
title: {
text: ""
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
legend: {},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01]
},
yAxis: {
type: "category",
data: ["医学科学仪器", "电子策略仪器", "物理性能测试仪器", "激光器", "核仪器", "计量仪器", "分析仪器"]
},
series: [
{
name: "2011",
type: "bar",
data: [50, 47.8, 46.9, 45.0, 40.8, 35.0, 34.8]
}
]
});
const pieOption = {
tooltip: {
trigger: "item"
},
legend: {
top: "5%",
left: "center"
},
series: [
{
name: "Access From",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center"
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" }
]
}
]
}; };
const frequenceOption = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
top: 20,
right: 3,
bottom: 0,
left: 3,
containLabel: true
},
legend: {
data: [],
bottom: 0,
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 15,
textStyle: {
fontSize: 12,
color: "#222B45"
}
},
xAxis: {
type: "category",
data: [
"202301",
"202302",
"202303",
"202304",
"202305",
"202306",
"202307",
"202308",
"202309",
"202310",
"202311",
"202312"
],
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#889fcc"
}
},
yAxis: {
type: "value",
axisLine: { show: false },
axisTick: { show: false },
splitLine: {
lineStyle: {
color: "#EFF1F3",
width: 0.8
}
},
axisLabel: { color: "#889fcc" }
},
series: [
{
name: "aa",
type: "bar",
data: [3, 2, 3, 0, 2, 1, 3, 1, 0, 2, 3, 2],
barWidth: "15",
itemStyle: {
color: "#639dfa",
borderRadius: [4, 4, 0, 0]
}
}
// {
// name: "bbb",
// type: "bar",
// data: [6, 13, 10, 5, 12, 5],
// barWidth: "15",
// itemStyle: {
// color: "#639dfa",
// borderRadius: [4, 4, 0, 0]
// }
// }
]
};
const chartOption = {
title: {
text: ""
},
tooltip: {
trigger: "axis"
},
legend: {
data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"]
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
name: "Email",
type: "line",
stack: "Total",
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: "Union Ads",
type: "line",
stack: "Total",
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: "Video Ads",
type: "line",
stack: "Total",
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: "Direct",
type: "line",
stack: "Total",
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: "Search Engine",
type: "line",
stack: "Total",
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
onMounted(() => {
// let frequenceChart = echarts.init(frequenceRef.value);
// let chart = echarts.init(echartsRef.value);
// let pie = echarts.init(pieRef.value);
// let bar = echarts.init(barRef.value);
// useEcharts(frequenceChart, frequenceOption);
// useEcharts(chart, chartOption);
// useEcharts(pie, pieOption);
// useEcharts(bar, barOption);
});
</script> </script>
<style scoped> <style lang="scss" scoped>
.content-top { .influenceContainer {
width: 100%; width: 1920px;
display: flex; margin: 0px auto 0 auto;
justify-content: center; padding-bottom: 20px;
margin-top: 20px;
} }
.content-box { .row {
/* height: 90vh; */
display: flex; display: flex;
flex-direction: column; flex-direction: row;
justify-content: space-between; margin-top: 15px;
} }
.content-box-header { .buttonWrap {
height: 40px;
background-color: rgba(59, 65, 75, 1);
color: #fff;
font-size: 16px;
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
.content-box-list {
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; width: 160px;
}
.content-box-list-item {
display: flex;
justify-content: space-between;
align-items: center; align-items: center;
gap: 8px; gap: 15px;
padding-bottom: 5px; .buttonItem {
padding-left: 10px; width: 152px;
padding-right: 20px; height: 40px;
height: 35px; display: flex;
line-height: 35px; justify-content: center;
} align-items: center;
.content-box-list-item-title { color: rgba(95, 101, 108, 1);
font-size: 16px; font-size: 16px;
/* font-weight: 700; */ font-weight: 400;
color: rgba(10, 18, 30, 1); border-radius: 20px;
} cursor: pointer;
.content-box-list-item-tag { .icon {
display: flex; width: 8px;
gap: 8px; height: 8px;
} margin-left: 5px;
.content-box-footer { background-image: url("../../assets/images/whiteRriangle.png");
display: flex; background-size: 100% 100%;
align-items: center; }
justify-content: space-between; }
gap: 12px; .activeButtonItem {
background-color: rgba(246, 251, 255, 1); color: rgba(255, 255, 255, 1);
padding: 5px 15px; background-color: rgba(5, 95, 194, 1);
} }
.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 { .panelWrap {
width: 24px; flex: 1;
height: 24px;
} }
</style> </style>
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;
......
src/views/exportControl/utils/charts.js
浏览文件 @ 29a8ab07
...@@ -59,6 +59,129 @@ export function getPieOption(data, title) { ...@@ -59,6 +59,129 @@ export function getPieOption(data, title) {
} }
return option return option
} }
export function getPieOption1(data, title) {
let option = {
color: ["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"],
title: {
text: title,
top: 10,
left: 10,
textStyle: {
color: "rgba(59, 65, 75, 1)",
fontSize: 16,
fontWeight: 700
}
},
series: [
{
type: 'pie',
radius: [70, 110],
height: '100%',
center: ['50%', '50%'],
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{b}\n{two|{c}家 {d}%}',
fontSize: 17.6,
fontWeight: 700,
minMargin: 5,
edgeDistance: 10,
lineHeight: 23,
rich: {
two: {
fontSize: 15,
color: ' rgba(95, 101, 108, 1)',
}
}
},
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 function getPieOption2(data, title) {
let option = {
color: ["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"],
title: {
text: title,
top: 10,
left: 10,
textStyle: {
color: "rgba(59, 65, 75, 1)",
fontSize: 16,
fontWeight: 700
}
},
legend: {
icon: 'rect',
top: 'center',
right: '40',
orient: 'vertical',
itemWidth: 30,
itemHeight: 20,
borderRadius: 2,
formatter: function (name) {
// 获取系列数据，假设第一个系列为饼图
let seriesData = option.series[0].data; // [citation:8]
// 也可以考虑使用 this.getSeries()[0].data [citation:8]
let currentValue;
// 计算数据总和并查找当前图例名对应的数值
seriesData.forEach(item => {
if (item.name === name) {
currentValue = item.value;
}
});
return ` ${name} ${currentValue} %`
},
itemGap: 10,
textStyle: {
color: 'rgba(59, 65, 75 ,0.8)',
fontSize: 18,
fontWeight: 500
},
},
series: [
{
type: 'pie',
radius: [70, 120],
height: '100%',
center: ['33%', '50%'],
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
scale: false,
},
label: {
show: false,
},
data: data
}]
}
return option
}
export function getMapOption() { export function getMapOption() {
echarts.registerMap('china', chinaJson); echarts.registerMap('china', chinaJson);
let data = [{ let data = [{
...@@ -213,7 +336,7 @@ export function getMapOption() { ...@@ -213,7 +336,7 @@ export function getMapOption() {
tooltip: { tooltip: {
show: false show: false
}, },
geo: { geo: {
map: 'china', map: 'china',
roam: true, roam: true,
...@@ -386,4 +509,464 @@ export function getMapOption() { ...@@ -386,4 +509,464 @@ export function getMapOption() {
}; };
return option return option
}
export const getBarChart = (nameList, valueList, color = ['rgba(255, 159, 22, 1)', 'rgba(255, 159, 22, 0)'], name) => {
const option = {
tooltip: {
trigger: "axis",
formatter: function (params) {
let result = params[0].name + '<br/>';
params.forEach(function (item, index) {
// 自定义颜色数组
const customColors = [color[0]];
const dotColor = customColors[index % customColors.length]; // 循环取色
// 创建彩色圆点图标
const dot = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${dotColor};"></span>`;
result += dot + `${item.seriesName}: ${item.value}<br/>`;
});
return result;
}
},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
axisLine: {
lineStyle: {
width: 1,
color: "rgba(231, 243, 255, 1)"
}
},
axisTick:
{ show: false },
type: "category",
boundaryGap: [100, 100],
axisLabel: {
color: "rgba(95, 101, 108, 1)",
// fontSize: 22,
// fontWeight: 400
},
data: nameList
},
yAxis: {
type: "value",
axisLine: {
lineStyle: {
type: "dashed"
}
},
axisLabel: {
color: "rgba(95, 101, 108, 1)",
// fontSize: 22,
// fontWeight: 400
},
splitNumber: 8,
splitLine: {
lineStyle: {
width: 1,
type: "dashed",
color: "rgba(231, 243, 255, 1)"
},
}
},
series: [{
name: name,
type: 'bar',
data: valueList,
barWidth: 12,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: color[1]
},
{
offset: 1,
color: color[0]
}
]);
},
barBorderRadius: 10,
}
}]
}
return option
}
export const getLineChart = (color = 'rgba(146, 84, 222, 1)') => {
const option = {
title: {
text: ""
},
tooltip: {
trigger: "axis",
formatter: function (params) {
let result = params[0].name + '<br/>';
params.forEach(function (item, index) {
// 自定义颜色数组
const customColors = [color];
const dotColor = customColors[index % customColors.length]; // 循环取色
// 创建彩色圆点图标
const dot = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${dotColor};"></span>`;
result += dot + `${item.seriesName}: ${item.value}<br/>`;
});
return result;
}
},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
xAxis: {
axisLine: {
lineStyle: {
width: 1,
color: "rgba(231, 243, 255, 1)"
}
},
axisTick:
{ show: false },
type: "category",
boundaryGap: [100, 100],
axisLabel: {
color: "rgba(95, 101, 108, 1)",
// fontSize: 22,
// fontWeight: 400
},
data: ["2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"]
},
yAxis: {
type: "value",
axisLine: {
lineStyle: {
type: "dashed"
}
},
axisLabel: {
color: "rgba(95, 101, 108, 1)",
// fontSize: 22,
// fontWeight: 400
},
splitNumber: 8,
splitLine: {
lineStyle: {
width: 1,
type: "dashed",
color: "rgba(231, 243, 255, 1)"
},
}
},
series: [
{
name: "增长趋势",
type: "line",
symbolSize: 8,
symbol: 'circle',
itemStyle: {
color: "#ffffff",
borderColor: color,
borderWidth: 3
},
lineStyle: {
color: color,
},
data: [3, 6, 4, 7, 9, 6, 5, 6, 6]
}
]
};
return option;
}
export const getHorizontalBarChart1 = (nameList, valueList, isPer) => {
const colorList = ['#ce4f51', '#1778ff']
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
color: ['#ce4f51', '#1778ff'],
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.map((item, index) => {
return {
value: item,
label: {
textStyle: {
color: index < 4 ? '#1778ff' : '#ce4f51'
}
}
};
}),
label: {
show: true,
position: [450, -2],
formatter: function (params) {
return isPer ? params.value + '%' : params.value
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
if (params.dataIndex < 4) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(22, 119, 255, 0)'
},
{
offset: 1,
color: colorList[1]
}
]);
} else {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(206, 79, 81, 0)'
},
{
offset: 1,
color: colorList[0]
}
]);
}
},
barBorderRadius: 4,
}
}]
}
return option
}
export const getHorizontalBarChart2 = (nameList, valueList, isPer) => {
const colorList = [
['rgba(64, 150, 255, 1)', 'rgba(64, 150, 255, 0)'],
['rgba(255, 120, 117, 1)', 'rgba(255, 120, 117, 0)'],
['rgba(89, 126, 247, 1)', 'rgba(89, 126, 247, 0)'],
['rgba(54, 207, 201, 1)', 'rgba(54, 207, 201, 0)'],
['rgba(255, 197, 61, 1)', 'rgba(255, 197, 61, 0)'],
['rgba(179, 127, 235, 1)', 'rgba(179, 127, 235, 0)']
]
console.log(colorList)
const option = {
tooltip: {},
grid: {
top: '6%',
right: '6%',
bottom: '0',
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.map((item, index) => {
return {
value: item,
label: {
textStyle: {
color: colorList[index][0]
}
}
};
}),
label: {
show: true,
position: [340, -2],
formatter: function (params) {
return isPer ? params.value + '%' : params.value
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
console.log('params', params)
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: colorList[params.dataIndex][1]
},
{
offset: 1,
color: colorList[params.dataIndex][0]
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export const getMultipleLineChart = (obj) => {
const color = ['rgba(19, 168, 168, 1)', 'rgba(146, 84, 222, 1)', 'rgba(250, 140, 22, 1)', 'rgba(206, 79, 81, 1)']
const option = {
title: {
text: ""
},
tooltip: {
trigger: "axis",
formatter: function (params) {
let result = params[0].name + '<br/>';
params.forEach(function (item, index) {
// 自定义颜色数组
const customColors = color;
const dotColor = customColors[index % customColors.length]; // 循环取色
// 创建彩色圆点图标
const dot = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${dotColor};"></span>`;
result += dot + `${item.seriesName}: ${item.value}<br/>`;
});
return result;
}
},
grid: {
top: '12%',
right: '3%',
bottom: '3%',
left: '1%',
containLabel: true
},
legend: {
right: "5%",
icon: "circle",
itemWidth: 15,
textStyle: {
color: "rgba(0, 0, 0, 0.8)",
fontSize: 14,
fontWeight: 400
},
itemGap: 17,
data: obj.data.map((item, index) => {
return { name: item.name, itemStyle: { color: color[index] } }
})
},
xAxis: {
axisLine: {
lineStyle: {
width: 1,
color: "rgba(231, 243, 255, 1)"
}
},
axisTick:
{ show: false },
type: "category",
boundaryGap: [100, 100],
axisLabel: {
color: "rgba(95, 101, 108, 1)",
// fontSize: 22,
// fontWeight: 400
},
data: obj.dates
},
yAxis: {
type: "value",
axisLine: {
lineStyle: {
type: "dashed"
}
},
axisLabel: {
color: "rgba(95, 101, 108, 1)",
// fontSize: 22,
// fontWeight: 400
},
splitNumber: 8,
splitLine: {
lineStyle: {
width: 1,
type: "dashed",
color: "rgba(231, 243, 255, 1)"
},
}
},
series: obj.data.map((item, index) => {
return {
name: item.name,
type: "line",
symbolSize: 6,
symbol: 'circle',
itemStyle: {
color: "#ffffff",
borderColor: color[index],
borderWidth: 2
},
lineStyle: {
width: 1,
color: color[index],
},
data: item.value
}
})
};
return option;
} }
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论