Skip to content

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

新增232调查

上级 bfcfe1ed
显示空白字符变更
内嵌 并排
正在显示 包含 5122 行增加 和 1923 行删除
src/views/decree/decreeHome/index.vue
浏览文件 @ 7ab5fe3e
......@@ -173,7 +173,6 @@
<div class="text">{{ "风险信号" }}</div>
<div class="num">{{ warningList.length }}</div>
</div>
<div class="more">{{ "更多 +" }}</div>
</div>
<div class="box2-main">
<div
......
src/views/exportControl/index.vue
浏览文件 @ 7ab5fe3e
......@@ -63,7 +63,7 @@
<el-col :span="16">
<custom-container titleType="primary" title="最新出口管制政策" :titleIcon="houseIcon" height="450px">
<template #header-right>
<el-button type="primary" @click="handleToDetail" link>
<el-button type="primary" link>
{{ "查看详情 >" }}
</el-button>
</template>
......@@ -147,15 +147,14 @@
</el-col>
<el-col :span="8">
<custom-container titleType="danger" title="风险信号" :headerNum="5" :titleIcon="dangerIcon" height="450px">
<template #header-right>
<el-button type="primary" link>
{{ "更多 +" }}
</el-button>
</template>
<template #default>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="box2-main-item"
v-for="(item, index) in warningList"
:key="index"
@click="handleToDetail"
>
<div
class="item-left"
:class="{
......@@ -618,7 +617,6 @@ const infoList = ref([
num: 253,
// color: "rgba(114, 46, 209, 1)"
color: "rgba(132, 136, 142, 1)"
},
{
title: "关键与新兴技术清单",
......@@ -627,7 +625,6 @@ const infoList = ref([
num: 52,
// color: "rgba(250, 140, 22, 1)"
color: "rgba(132, 136, 142, 1)"
},
{
title: "军事最终用户清单 ",
......@@ -1136,72 +1133,29 @@ const curBill = ref({
introductionDate: ""
});
const billTrendList = ref([
{
title: "限制与中国合作",
no: "H.R.2670"
},
{
title: "限制中国获取技术",
no: "H.R.2471"
},
{
title: "禁止在中国建设半导体产能",
no: "H.R.5895"
},
{
title: "限制中国产燃油进口",
no: "S.870"
},
{
title: "禁止政府部门采购受控半导体或服务",
no: "H.R.6395"
},
{
title: "禁止向部分中国实体提供资金",
no: "H.R.3935"
},
{
title: "限制采购中国生产电池",
no: "H.R.7776"
},
{
title: "重视新兴中国技术公司威胁",
no: "H.R.3935"
},
{
title: "禁止卫星出口至中国",
no: "S.870"
},
{
title: "禁购华为设备",
no: "H.R.5895"
}
]);
const warningList = ref([
{
title: "兰德智库发布2025中国年度科技报告",
title: "关于对中华人民共和国合成阿片类药物供应链...",
time: "一天前",
status: "特别重大"
},
{
title: "信息技术与创新基金会发布《中国正在迅速成...",
title: "关于调整汽车及汽车零部件进口的公告",
time: "一天前",
status: "特别重大"
},
{
title: "首次提出“限制外国敏感实体获取补贴",
title: "关于调整钢铁进口的公告",
time: "一天前",
status: "重大风险"
},
{
title: "将中国企业海外子公司、合资公司纳入受...",
title: "关于使用互惠关税规范进口以纠正导致大规模...",
time: "一天前",
status: "重大风险"
},
{
title: "H.R.8333《生物安全法案》将华大基因等...",
title: "关于修订对中华人民共和国低价值进口商品适...",
time: "一天前",
status: "一般风险"
}
......@@ -1419,7 +1373,6 @@ const navList = ref([
}
]);
const chart1Data = ref({
title: [
"2024-09",
......@@ -1657,18 +1610,19 @@ onMounted(async () => {
}
.box2-main {
// position: relative;
height: 320px;
overflow-y: auto;
.box2-main-item {
// margin-left: 23px;
// height: 47px;
// width: 464px;
// display: flex;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
box-sizing: border-box;
padding-right: 3px;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
......@@ -1702,12 +1656,10 @@ onMounted(async () => {
align-items: center;
gap: 8px;
height: 47px;
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1);
.text {
font-family: Microsoft YaHei;
line-height: 47px;
width: 80%;
font-size: 16px;
font-weight: 400;
......@@ -1732,7 +1684,7 @@ onMounted(async () => {
left: 0;
right: 0;
bottom: 20px;
width: 80%;
width: 461px;
height: 42px;
display: flex;
flex-direction: row;
......@@ -1754,7 +1706,7 @@ onMounted(async () => {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
......
src/views/finance/index.vue
浏览文件 @ 7ab5fe3e
......@@ -60,40 +60,13 @@
<el-col :span="16">
<custom-container titleType="primary" title="最新出口管制政策" :titleIcon="houseIcon" height="450px">
<template #header-right>
<el-button type="primary" @click="handleToDetail" link>
<el-button type="primary" link>
{{ "查看详情 >" }}
</el-button>
</template>
<template #default>
<div class="box1">
<!-- <el-image
:src="box1Image"
alt=""
style="width: 458px; height: 353px; object-fit: cover; flex-shrink: 0"
></el-image> -->
<!-- <div class="box1-right">
<div class="box1-right-title">关于进一步延长TikTok执法宽限期的行政令</div>
<div class="box1-right-tags">
<el-tag type="primary">互联网</el-tag>
<el-tag type="danger">人工智能</el-tag>
</div>
<div class="box1-right-content">
9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需向提供商发出无违规和无责任的信函，并强调执行该法的权力专属联邦司法部长，意在阻止各州或私人提起诉讼。
</div>
<div class="box1-right-footer">
<span class="box1-right-footer-time"> 2025年9月16日 </span>
<el-button type="primary" link>
美国白宫官方网站
<el-image
src="./assets/images/icon-open.png"
alt=""
style="width: 16px; height: 16px; margin-left: 4px"
></el-image>
</el-button>
</div>
</div> -->
<div class="box1-top">
<div class="box1-top-title">2025年9月12日——BIS《实体清单增列与修订条目》</div>
<div class="box1-top-content">
......@@ -144,15 +117,14 @@
</el-col>
<el-col :span="8">
<custom-container titleType="danger" title="风险信号" :titleIcon="dangerIcon" height="450px">
<template #header-right>
<el-button type="primary" link>
{{ "更多 +" }}
</el-button>
</template>
<template #default>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="box2-main-item"
v-for="(item, index) in warningList"
:key="index"
@click="handleToDetail"
>
<div
class="item-left"
:class="{
......@@ -169,11 +141,11 @@
<div class="time">{{ item.time }}</div>
</div>
</div>
<div class="box2-footer">
<div class="box2-footer" @click="handleToMoreRiskSignal">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
</div>
<div class="text">{{ "风险处理" }}</div>
<div class="text">{{ "查看更多" }}</div>
</div>
</div>
</template>
......@@ -185,7 +157,7 @@
<el-col :span="12">
<custom-container title="新闻资讯" :titleIcon="newsIcon" height="450px">
<template #header-right>
<el-button type="primary" link @click="handleClick">
<el-button type="primary" link @click="handleToMoreNews">
{{ "更多 +" }}
</el-button>
</template>
......@@ -683,11 +655,24 @@ const handleBackHome = () => {
};
const handleToDetail = () => {
router.push({
path: "/exportControl/analysis"
});
// const route = router.resolve("/exportControl/analysis");
// window.open(route.href, "_blank");
};
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
};
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
const billList = ref([]);
const curBillListIndex = ref(0);
......@@ -826,15 +811,6 @@ const handleSwithCurBill = name => {
curBill.value = billList.value[curBillListIndex.value];
};
const handleClick = () => {
router.push({
path: "/analysis"
// query: {
// billId: curBill.value.billId
// }
});
};
// 发布频度
const tableData1 = ref([
{
......@@ -1779,18 +1755,19 @@ onMounted(async () => {
}
.box2-main {
// position: relative;
height: 320px;
overflow-y: auto;
.box2-main-item {
// margin-left: 23px;
// height: 47px;
// width: 464px;
// display: flex;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
box-sizing: border-box;
padding-right: 3px;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
......@@ -1824,12 +1801,10 @@ onMounted(async () => {
align-items: center;
gap: 8px;
height: 47px;
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1);
.text {
font-family: Microsoft YaHei;
line-height: 47px;
width: 80%;
font-size: 16px;
font-weight: 400;
......@@ -1854,14 +1829,14 @@ onMounted(async () => {
left: 0;
right: 0;
bottom: 20px;
width: 80%;
width: 461px;
height: 42px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 6px;
background: rgba(22, 119, 255, 1);
background: var(--color-main-active);
margin: 0 auto;
cursor: pointer;
.icon {
......@@ -1876,7 +1851,7 @@ onMounted(async () => {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ 7ab5fe3e
......@@ -61,7 +61,7 @@
</div>
</div>
<div class="home-main-header-card-box">
<div class="home-main-header-card-box-box1 card">
<div class="home-main-header-card-box-box1 card" @click="handleClickToDetail('301')">
<div class="header">
<div class="header-left">{{ "301调查" }}</div>
<div class="header-right">{{ "52项" }}</div>
......@@ -73,7 +73,7 @@
</div>
</div>
</div>
<div class="home-main-header-card-box-box2 card">
<div class="home-main-header-card-box-box2 card" @click="handleClickToDetail('232')">
<div class="header">
<div class="header-left">{{ "232调查" }}</div>
<div class="header-right">{{ "3项" }}</div>
......@@ -85,7 +85,7 @@
</div>
</div>
</div>
<div class="home-main-header-card-box-box3 card">
<div class="home-main-header-card-box-box3 card" @click="handleClickToDetail('337')">
<div class="header">
<div class="header-left">{{ "337调查" }}</div>
<div class="header-right">{{ "87项" }}</div>
......@@ -116,7 +116,7 @@
</div>
<div class="title">{{ "调查进展" }}</div>
</div>
<div class="box1-header-right" @click="handleClickToDetail()">
<div class="box1-header-right">
{{ "查看详情 >" }}
</div>
</div>
......@@ -192,7 +192,6 @@
<div class="text">{{ "风险信号" }}</div>
<div class="num">{{ warningList.length }}</div>
</div>
<div class="more">{{ "更多 >" }}</div>
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
......@@ -213,7 +212,7 @@
</div>
</div>
</div>
<div class="box2-footer">
<div class="box2-footer" @click="handleToMoreRiskSignal">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
</div>
......@@ -230,7 +229,7 @@
<img src="./assets/images/header-news.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more">{{ "更多 +" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
</div>
<div class="box3-main">
......@@ -448,8 +447,14 @@ const handleBackHome = () => {
});
};
const handleClickToDetail = () => {
router.push("/marketAccessLayout");
const handleClickToDetail = (id) => {
const route = router.resolve({
path: "/marketAccessLayout",
query: {
id: id
}
});
window.open(route.href, "_blank");
};
// 风险信号
......@@ -801,7 +806,17 @@ const messageList = ref([
}
]);
// 获取热门法案
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
};
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
onMounted(async () => {
let chart1 = getMultiLineChart(
......@@ -1447,6 +1462,10 @@ onMounted(async () => {
height: 47px;
width: 464px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
......
src/views/marketAccessRestrictions/marketAccessLayout/case/index.vue
浏览文件 @ 7ab5fe3e
......@@ -127,6 +127,8 @@
<script setup>
import { ref, onMounted, watch } from "vue";
import router from '@/router'
import { useRoute } from "vue-router";
const route = useRoute();
const releaseTime = ref("近一年发布");
......@@ -350,7 +352,14 @@ watch(
);
const handleToSingleCase = (item) => {
router.push('/marketSingleCaseLayout/overview')
// router.push('/marketSingleCaseLayout/overview')
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: route.query.id
}
});
window.open(curRoute.href, "_blank");
}
onMounted(() => {
......
src/views/marketAccessRestrictions/marketAccessLayout/index.vue
浏览文件 @ 7ab5fe3e
......@@ -4,12 +4,12 @@
<div class="header-top">
<div class="left">
<div class="icon">
<img src="./assets/images/img1.png" alt="" />
<img :src="curSurvey.image" alt="" />
</div>
<div class="info">
<div class="title">{{ "337调查" }}</div>
<div class="title">{{ curSurvey.title }}</div>
<div class="content">
{{ '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"' }}
{{ curSurvey.desc }}
</div>
</div>
</div>
......@@ -29,17 +29,10 @@
@click="handleClickBtn(item)"
>
<div class="icon">
<img
:src="item.acitveIcon"
alt=""
v-if="activeBtnName === item.name"
/>
<img :src="item.acitveIcon" alt="" v-if="activeBtnName === item.name" />
<img :src="item.icon" alt="" v-else />
</div>
<div
class="text"
:class="{ textActive: activeBtnName === item.name }"
>
<div class="text" :class="{ textActive: activeBtnName === item.name }">
{{ item.name }}
</div>
</div>
......@@ -58,28 +51,63 @@ import icon1 from "./assets/images/icon1.png";
import icon1Active from "./assets/images/icon1_active.png";
import icon2 from "./assets/images/icon2.png";
import icon2Active from "./assets/images/icon2_active.png";
import Img337 from "./assets/images/337.png";
import Img232 from "./assets/images/232.png";
import { useRoute } from "vue-router";
const route = useRoute();
const btnList = ref([
{
name: "调查概况",
icon: icon1,
acitveIcon: icon1Active,
path: "/marketAccessLayout/overview",
path: "/marketAccessLayout/overview"
},
{
name: "调查案件",
icon: icon2,
acitveIcon: icon2Active,
path: "/marketAccessLayout/case",
path: "/marketAccessLayout/case"
}
]);
const surveyList = ref([
{
title: "337调查",
desc: '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"',
image: Img337
},
{
title: "232调查",
desc: "依据《1962年贸易扩展法》第232条款，授权美国商务部对“特定进口产品是否威胁或损害美国国家安全”而开展的全面调查。",
image: Img232
}
]);
const curSurvey = ref({
title: "337调查",
desc: '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"',
image: Img337
});
const activeBtnName = ref("调查概况");
const handleClickBtn = (item) => {
const handleClickBtn = item => {
activeBtnName.value = item.name;
router.push(item.path);
router.push({
path: item.path,
query: {
id: route.query.id
}
});
};
onMounted(() => {
if (route.query.id === "232") {
curSurvey.value = surveyList.value[1];
}
});
</script>
<style lang="scss" scoped>
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/232/index.vue 0 → 100644
浏览文件 @ 7ab5fe3e
<template>
<div class="wrap">
<div class="top">
<div class="item">
<div class="item-left-box">
<div class="item-left1">{{ "总调查案件数" }}</div>
<div class="item-left2">{{ "1980-2025" }}</div>
</div>
<div class="item-right">{{ "452项" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "仍在调查中的案件" }}</div>
<div class="item-right">{{ "28项" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "涉及中企数量" }}</div>
<div class="item-right">{{ "326家" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "胜诉/和解率" }}</div>
<div class="item-right">{{ "38%" }}</div>
</div>
</div>
<div class="center">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">232调查数量年度变化趋势</div>
<div class="header-btn-box">
<div
class="btn"
:class="{ btnActive: btnActiveName === '发起调查' }"
@click="handleClickBox1Btn('发起调查')"
>
{{ "发起调查" }}
</div>
<div
class="btn"
:class="{ btnActive: btnActiveName === '结束调查' }"
@click="handleClickBox1Btn('结束调查')"
>
{{ "结束调查" }}
</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main" id="chart1"></div>
</div>
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查案件领域分布</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main" id="chart2"></div>
</div>
</div>
<div class="footer">
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">关税税率</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box3-main" id="chart3"></div>
</div>
<div class="box4">
<div class="box-header">
<div class="header-left"></div>
<div class="title">被调查国家分布</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box4-main" id="chart4"></div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import ChinaJson from "../../assets/json/China.json";
import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
import getMapChart from "./utils/mapChart";
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const btnActiveName = ref("发起调查");
const handleClickBox1Btn = name => {
btnActiveName.value = name;
};
const chart1Data = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [
{
name: "提出法案",
value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172]
}
]
});
const chart2Data = ref([
{ name: "半导体", value: 50 },
{ name: "电子设备", value: 46 },
{ name: "显示技术", value: 40 },
{ name: "新能源", value: 32 },
{ name: "通信设备", value: 31 },
{ name: "汽车", value: 31 },
{ name: "轻工业制造", value: 30 },
{ name: "其他", value: 24 }
]);
const chart2ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#597EF7", "#D6E4FF", "#FF7875", "#B37FEB", "#FFA39E"]);
const chart3Data = ref([
{ name: "税率25%+", value: 50 },
{ name: "税率11%-25%", value: 46 },
{ name: "税率1%-10%", value: 22 },
{ name: "税率0%", value: 10 },
]
);
const chart3ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#FFA39E"]);
const chart4Data = ref([
{ name: "加拿大", value: 50 },
{ name: "欧盟", value: 46 },
{ name: "韩国", value: 40 },
{ name: "日本", value: 31 },
{ name: "中国", value: 24 },
]);
const chart4ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#D6E4FF", "#FFA39E"]);
onMounted(() => {
let chart1 = getMultiLineChart(chart1Data.value.title, chart1Data.value.data[0].value);
setChart(chart1, "chart1");
let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
setChart(chart2, "chart2");
let chart3 = getPieChart(chart3Data.value, chart3ColorList.value);
setChart(chart3, "chart3");
let chart4 = getPieChart(chart4Data.value, chart4ColorList.value);
setChart(chart4, "chart4");
});
</script>
<style lang="scss" scoped>
.wrap {
width: 100%;
height: 100%;
overflow: hidden;
.top {
display: flex;
justify-content: space-between;
margin: 16px 160px;
.item {
width: 388px;
height: 80px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
position: relative;
display: flex;
justify-content: space-between;
&::before {
position: absolute;
content: "";
width: 4px;
height: 49px;
background: rgba(10, 87, 166, 1);
left: 0;
top: 15px;
}
.item-left {
margin-left: 30px;
margin-top: 25px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.item-right {
margin-top: 28px;
margin-right: 35px;
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
.item-left-box {
margin-left: 30px;
.item-left1 {
margin-top: 13px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.item-left2 {
height: 2px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 120px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.center {
display: flex;
justify-content: space-between;
margin: 0 160px;
.box1 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
height: 300px;
}
}
.box2 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
height: 300px;
// width: 752px;
box-sizing: border-box;
padding: 0 20px;
}
}
}
.footer {
margin: 16px 160px;
display: flex;
justify-content: space-between;
.box3 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
height: 300px;
}
.box3-main1 {
height: 300px;
display: flex;
.box3-main1-left {
width: 380px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
.box3-main1-left-item {
display: flex;
height: 36px;
margin-left: 20px;
.box3-main1-left-item-left {
width: 24px;
height: 24px;
border-radius: 12px;
margin-left: 12px;
margin-top: 6px;
background: #e7f3ff;
color: #0a57a6;
text-align: center;
line-height: 24px;
}
.box3-main1-left-item-center {
height: 36px;
line-height: 36px;
width: 220px;
margin-left: 12px;
}
.box3-main1-left-item-right {
width: 80px;
box-sizing: border-box;
padding-right: 10px;
text-align: right;
}
}
}
.box3-main1-right {
width: 390px;
height: 300px;
}
}
}
.box4 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box4-main {
height: 300px;
box-sizing: border-box;
padding: 0 20px;
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/232/utils/barChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: [610, 0],
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(255,255,255,0)'
},
{
offset: 1,
color: '#1778ff'
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/232/utils/mapChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from 'echarts'
import chinaJson from '../../../assets/json/China.json'
const getMapChart = (mapData) => {
echarts.registerMap('china', chinaJson);
// 定义颜色范围
const colorRanges = [
{ range: [0, 4], color: '#8ECFC9', label: '0-4' },
{ range: [5, 9], color: '#FFBE7A', label: '5-9' },
{ range: [10, 19], color: '#FA7F6F', label: '10-19' },
{ range: [20, 30], color: '#AA6FC9', label: '20-30' }
];
const getColorByValue = (value, colorRanges) => {
const range = colorRanges.find(range =>
value >= range.range[0] && value <= range.range[1]
);
return range ? range.color : '#CCCCCC';
}
const option = {
title: {
// text: '全国数据分布图',
// subtext: '数据范围颜色标识',
left: 'center',
textStyle: {
fontSize: 18,
color: '#333'
}
},
tooltip: {
trigger: 'item',
formatter: (params) => {
if (params.componentType === 'series') {
if (params.seriesType === 'scatter') {
return `${params.data.name}<br/>数值: ${params.data.value[2]}`;
} else {
return `${params.name}<br/>数值: ${params.value[2] || 0}`;
}
}
return params.name;
}
},
visualMap: {
type: 'piecewise',
pieces: colorRanges.map(range => ({
min: range.range[0],
max: range.range[1],
label: range.label,
color: range.color
})),
left: 'right',
top: 'bottom',
textStyle: {
color: '#000',
fontSize: 12
},
itemWidth: 20,
itemHeight: 14
},
geo: {
map: 'china',
roam: true,
zoom: 1.2,
label: {
emphasis: {
show: true,
color: '#fff'
}
},
itemStyle: {
areaColor: '#F9FAFC',
borderColor: '#E7F1FF',
borderWidth: 1
},
emphasis: {
itemStyle: {
areaColor: '#ffd700'
},
label: {
show: true,
color: '#fff',
fontSize: 12
}
}
},
series: [
// 地图系列 - 用于省份高亮
{
name: '数据分布',
type: 'map',
map: 'china',
geoIndex: 0,
data: mapData.map(item => ({
name: item.name,
value: item.value,
itemStyle: {
// color: getColorByValue(item.value, colorRanges),
areaColor: '#E7F1FF'
}
})),
emphasis: {
itemStyle: {
areaColor: '#ffd700',
borderColor: '#333',
borderWidth: 2
},
label: {
show: true,
fontSize: 14,
fontWeight: 'bold',
color: '#333'
}
}
},
// 散点系列 - 用于显示圆点数字标记
{
name: '数据标记',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'circle',
symbolSize: (val) => {
// 根据数值大小调整圆点大小
const size = Math.max(20, val[2] * 2);
return Math.min(size, 30);
},
// symbolSize: 30,
label: {
show: true,
formatter: (params) => {
return params.data.value[2];
},
position: 'inside',
color: '#fff',
fontSize: 12,
fontWeight: 'bold'
},
itemStyle: {
color: (params) => {
return getColorByValue(params.data.value, colorRanges);
},
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
data: mapData.map(item => ({
name: item.name,
value: [item.coord[0], item.coord[1], item.value],
itemStyle: {
color: getColorByValue(item.value, colorRanges)
}
})),
emphasis: {
label: {
show: true,
fontSize: 14,
fontWeight: 'bold'
},
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
}
}
]
};
return option
}
export default getMapChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/232/utils/multiLineChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from 'echarts'
const getMultiLineChart = (dataX, dataY1, dataY2) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
data: ['提出法案', '通过法案'],
show: false
},
color: ['#1459bb', '#fa8c16'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '提出法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(22, 119, 255, 0.5)' // 起始颜色
}, {
offset: 1,
color: 'rgba(22, 119, 255, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
// {
// name: '通过法案',
// type: 'line',
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(255, 172, 77, 1)' // 起始颜色
// }, {
// offset: 1,
// color: 'rgba(255, 172, 77, 0)' // 结束颜色
// }])
// },
// emphasis: {
// focus: 'series'
// },
// data: dataY2
// }
]
}
}
export default getMultiLineChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/232/utils/piechart.js 0 → 100644
浏览文件 @ 7ab5fe3e
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [80, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}} {time|{c} 项 {d}%}\n',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 12,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/index.vue 0 → 100644
浏览文件 @ 7ab5fe3e
<template>
<div class="wrap">
<div class="top">
<div class="item">
<div class="item-left-box">
<div class="item-left1">{{ "总调查案件数" }}</div>
<div class="item-left2">{{ "1980-2025" }}</div>
</div>
<div class="item-right">{{ "452项" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "仍在调查中的案件" }}</div>
<div class="item-right">{{ "28项" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "涉及中企数量" }}</div>
<div class="item-right">{{ "326家" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "胜诉/和解率" }}</div>
<div class="item-right">{{ "38%" }}</div>
</div>
</div>
<div class="center">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">美国对华337调查年度趋势</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main" id="chart1"></div>
</div>
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查案件领域分布</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main" id="chart2"></div>
</div>
</div>
<div class="footer">
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">中国公司受调查情况</div>
<div class="header-btn-box">
<div
class="btn"
:class="{ btnActive: btnActiveName === '调查次数' }"
@click="handleClickBox3Btn('调查次数')"
>
调查次数
</div>
<div
class="btn"
:class="{ btnActive: btnActiveName === '注册地分布' }"
@click="handleClickBox3Btn('注册地分布')"
>
注册地分布
</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div v-show="btnActiveName === '调查次数'" class="box3-main" id="chart3"></div>
<div v-show="btnActiveName === '注册地分布'" class="box3-main1">
<div class="box3-main1-left">
<div class="box3-main1-left-item" v-for="(item, index) in mapData" :key="index">
<div class="box3-main1-left-item-left">{{ index + 1 }}</div>
<div class="box3-main1-left-item-center">{{ item.name }}</div>
<div class="box3-main1-left-item-right">
{{ item.value + "次" }}
</div>
</div>
</div>
<div class="box3-main1-right" id="chartMap"></div>
</div>
</div>
<div class="box4">
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查结果分布</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box4-main" id="chart4"></div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import ChinaJson from "../../assets/json/China.json";
import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
import getMapChart from "./utils/mapChart";
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const btnActiveName = ref("注册地分布");
const handleClickBox3Btn = name => {
btnActiveName.value = name;
if (name === "调查次数") {
nextTick(() => {
let chart3 = getBarChart(chart3Data.value.name, chart3Data.value.value);
setChart(chart3, "chart3");
});
} else {
nextTick(() => {
let chartMap = getMapChart(mapData.value);
setChart(chartMap, "chartMap");
});
}
};
const chart1Data = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [
{
name: "提出法案",
value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172]
}
]
});
const chart2Data = ref([
{ name: "半导体", value: 50 },
{ name: "电子设备", value: 46 },
{ name: "显示技术", value: 40 },
{ name: "新能源", value: 32 },
{ name: "通信设备", value: 31 },
{ name: "汽车", value: 31 },
{ name: "轻工业制造", value: 30 },
{ name: "其他", value: 24 }
]);
const chart2ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#597EF7", "#D6E4FF", "#FF7875", "#B37FEB", "#FFA39E"]);
const chart3Data = ref({
name: [
"华为技术有限公司",
"大疆创新科技有限公司",
"TCL科技集团股份有限公司",
"中兴通讯股份有限公司",
"联想集团",
"比亚迪集团",
"宁德时代新能源科技股份有限公司",
"晶科智能科技有限公司"
],
value: [42, 35, 28, 19, 15, 12, 11, 8]
});
const mapData = ref([
{ name: "北京", value: 10, coord: [116.46, 39.92] },
{ name: "上海", value: 9, coord: [121.48, 31.22] },
{ name: "广东", value: 15, coord: [113.23, 23.16] },
{ name: "江苏", value: 30, coord: [118.78, 32.04] },
{ name: "浙江", value: 20, coord: [120.19, 30.26] },
{ name: "四川", value: 4, coord: [104.06, 30.67] },
{ name: "陕西", value: 1, coord: [108.95, 34.27] },
{ name: "辽宁", value: 3, coord: [123.38, 41.8] }
// { name: "湖北", value: 2, coord: [114.31, 30.52] },
// { name: "山东", value: 12, coord: [117.0, 36.65] },
]);
const chart4Data = ref([
{ name: "和解/同意令", value: 50 },
{ name: "裁定不侵权", value: 46 },
{ name: "裁定侵权", value: 40 },
{ name: "申诉方撤诉", value: 31 },
{ name: "其他", value: 24 }
]);
const chart4ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#D6E4FF", "#FFA39E"]);
onMounted(() => {
let chart1 = getMultiLineChart(chart1Data.value.title, chart1Data.value.data[0].value);
setChart(chart1, "chart1");
let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
setChart(chart2, "chart2");
let chart3 = getBarChart(chart3Data.value.name, chart3Data.value.value);
setChart(chart3, "chart3");
let chartMap = getMapChart(mapData.value);
setChart(chartMap, "chartMap");
let chart4 = getPieChart(chart4Data.value, chart4ColorList.value);
setChart(chart4, "chart4");
});
</script>
<style lang="scss" scoped>
.wrap {
width: 100%;
height: 100%;
overflow: hidden;
.top {
display: flex;
justify-content: space-between;
margin: 16px 160px;
.item {
width: 388px;
height: 80px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
position: relative;
display: flex;
justify-content: space-between;
&::before {
position: absolute;
content: "";
width: 4px;
height: 49px;
background: rgba(10, 87, 166, 1);
left: 0;
top: 15px;
}
.item-left {
margin-left: 30px;
margin-top: 25px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.item-right {
margin-top: 28px;
margin-right: 35px;
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
.item-left-box {
margin-left: 30px;
.item-left1 {
margin-top: 13px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.item-left2 {
height: 2px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 120px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.center {
display: flex;
justify-content: space-between;
margin: 0 160px;
.box1 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
height: 300px;
}
}
.box2 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
height: 300px;
// width: 752px;
box-sizing: border-box;
padding: 0 20px;
}
}
}
.footer {
margin: 16px 160px;
display: flex;
justify-content: space-between;
.box3 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
height: 300px;
}
.box3-main1 {
height: 300px;
display: flex;
.box3-main1-left {
width: 380px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
.box3-main1-left-item {
display: flex;
height: 36px;
margin-left: 20px;
.box3-main1-left-item-left {
width: 24px;
height: 24px;
border-radius: 12px;
margin-left: 12px;
margin-top: 6px;
background: #e7f3ff;
color: #0a57a6;
text-align: center;
line-height: 24px;
}
.box3-main1-left-item-center {
height: 36px;
line-height: 36px;
width: 220px;
margin-left: 12px;
}
.box3-main1-left-item-right {
width: 80px;
box-sizing: border-box;
padding-right: 10px;
text-align: right;
}
}
}
.box3-main1-right {
width: 390px;
height: 300px;
}
}
}
.box4 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box4-main {
height: 300px;
box-sizing: border-box;
padding: 0 20px;
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/barChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: [610, 0],
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(255,255,255,0)'
},
{
offset: 1,
color: '#1778ff'
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/mapChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from 'echarts'
import chinaJson from '../../../assets/json/China.json'
const getMapChart = (mapData) => {
echarts.registerMap('china', chinaJson);
// 定义颜色范围
const colorRanges = [
{ range: [0, 4], color: '#8ECFC9', label: '0-4' },
{ range: [5, 9], color: '#FFBE7A', label: '5-9' },
{ range: [10, 19], color: '#FA7F6F', label: '10-19' },
{ range: [20, 30], color: '#AA6FC9', label: '20-30' }
];
const getColorByValue = (value, colorRanges) => {
const range = colorRanges.find(range =>
value >= range.range[0] && value <= range.range[1]
);
return range ? range.color : '#CCCCCC';
}
const option = {
title: {
// text: '全国数据分布图',
// subtext: '数据范围颜色标识',
left: 'center',
textStyle: {
fontSize: 18,
color: '#333'
}
},
tooltip: {
trigger: 'item',
formatter: (params) => {
if (params.componentType === 'series') {
if (params.seriesType === 'scatter') {
return `${params.data.name}<br/>数值: ${params.data.value[2]}`;
} else {
return `${params.name}<br/>数值: ${params.value[2] || 0}`;
}
}
return params.name;
}
},
visualMap: {
type: 'piecewise',
pieces: colorRanges.map(range => ({
min: range.range[0],
max: range.range[1],
label: range.label,
color: range.color
})),
left: 'right',
top: 'bottom',
textStyle: {
color: '#000',
fontSize: 12
},
itemWidth: 20,
itemHeight: 14
},
geo: {
map: 'china',
roam: true,
zoom: 1.2,
label: {
emphasis: {
show: true,
color: '#fff'
}
},
itemStyle: {
areaColor: '#F9FAFC',
borderColor: '#E7F1FF',
borderWidth: 1
},
emphasis: {
itemStyle: {
areaColor: '#ffd700'
},
label: {
show: true,
color: '#fff',
fontSize: 12
}
}
},
series: [
// 地图系列 - 用于省份高亮
{
name: '数据分布',
type: 'map',
map: 'china',
geoIndex: 0,
data: mapData.map(item => ({
name: item.name,
value: item.value,
itemStyle: {
// color: getColorByValue(item.value, colorRanges),
areaColor: '#E7F1FF'
}
})),
emphasis: {
itemStyle: {
areaColor: '#ffd700',
borderColor: '#333',
borderWidth: 2
},
label: {
show: true,
fontSize: 14,
fontWeight: 'bold',
color: '#333'
}
}
},
// 散点系列 - 用于显示圆点数字标记
{
name: '数据标记',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'circle',
symbolSize: (val) => {
// 根据数值大小调整圆点大小
const size = Math.max(20, val[2] * 2);
return Math.min(size, 30);
},
// symbolSize: 30,
label: {
show: true,
formatter: (params) => {
return params.data.value[2];
},
position: 'inside',
color: '#fff',
fontSize: 12,
fontWeight: 'bold'
},
itemStyle: {
color: (params) => {
return getColorByValue(params.data.value, colorRanges);
},
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
data: mapData.map(item => ({
name: item.name,
value: [item.coord[0], item.coord[1], item.value],
itemStyle: {
color: getColorByValue(item.value, colorRanges)
}
})),
emphasis: {
label: {
show: true,
fontSize: 14,
fontWeight: 'bold'
},
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
}
}
]
};
return option
}
export default getMapChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/multiLineChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from 'echarts'
const getMultiLineChart = (dataX, dataY1, dataY2) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
data: ['提出法案', '通过法案'],
show: false
},
color: ['#1459bb', '#fa8c16'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '提出法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(22, 119, 255, 0.5)' // 起始颜色
}, {
offset: 1,
color: 'rgba(22, 119, 255, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
// {
// name: '通过法案',
// type: 'line',
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(255, 172, 77, 1)' // 起始颜色
// }, {
// offset: 1,
// color: 'rgba(255, 172, 77, 0)' // 结束颜色
// }])
// },
// emphasis: {
// focus: 'series'
// },
// data: dataY2
// }
]
}
}
export default getMultiLineChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/piechart.js 0 → 100644
浏览文件 @ 7ab5fe3e
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [80, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}} {time|{c} 项 {d}%}\n',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 12,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/index.vue
浏览文件 @ 7ab5fe3e
<template>
<div class="wrap">
<div class="top">
<div class="item">
<div class="item-left-box">
<div class="item-left1">{{ "总调查案件数" }}</div>
<div class="item-left2">{{ "1980-2025" }}</div>
</div>
<div class="item-right">{{ "452项" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "仍在调查中的案件" }}</div>
<div class="item-right">{{ "28项" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "涉及中企数量" }}</div>
<div class="item-right">{{ "326家" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "胜诉/和解率" }}</div>
<div class="item-right">{{ "38%" }}</div>
</div>
</div>
<div class="center">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">美国对华337调查年度趋势</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main" id="chart1"></div>
</div>
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查案件领域分布</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main" id="chart2"></div>
</div>
</div>
<div class="footer">
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">中国公司受调查情况</div>
<div class="header-btn-box">
<div
class="btn"
:class="{ btnActive: btnActiveName === '调查次数' }"
@click="handleClickBox3Btn('调查次数')"
>
调查次数
</div>
<div
class="btn"
:class="{ btnActive: btnActiveName === '注册地分布' }"
@click="handleClickBox3Btn('注册地分布')"
>
注册地分布
</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div v-show="btnActiveName === '调查次数'" class="box3-main" id="chart3"></div>
<div v-show="btnActiveName === '注册地分布'" class="box3-main1">
<div class="box3-main1-left">
<div class="box3-main1-left-item" v-for="(item, index) in mapData" :key="index">
<div class="box3-main1-left-item-left">{{ index + 1 }}</div>
<div class="box3-main1-left-item-center">{{ item.name }}</div>
<div class="box3-main1-left-item-right">
{{ item.value + "次" }}
</div>
</div>
</div>
<div class="box3-main1-right" id="chartMap"></div>
</div>
</div>
<div class="box4">
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查结果分布</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box4-main" id="chart4"></div>
</div>
</div>
<div class="overview-wrap">
<Discussion1 v-if="showDiscussion ==='337'"></Discussion1>
<Discussion2 v-else-if="showDiscussion ==='232'"></Discussion2>
</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import ChinaJson from "../assets/json/China.json";
import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
import getMapChart from "./utils/mapChart";
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const btnActiveName = ref("注册地分布");
const handleClickBox3Btn = name => {
btnActiveName.value = name;
if (name === "调查次数") {
nextTick(() => {
let chart3 = getBarChart(chart3Data.value.name, chart3Data.value.value);
setChart(chart3, "chart3");
});
} else {
nextTick(() => {
let chartMap = getMapChart(mapData.value);
setChart(chartMap, "chartMap");
});
}
};
const chart1Data = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [
{
name: "提出法案",
value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172]
}
]
});
const chart2Data = ref([
{ name: "半导体", value: 50 },
{ name: "电子设备", value: 46 },
{ name: "显示技术", value: 40 },
{ name: "新能源", value: 32 },
{ name: "通信设备", value: 31 },
{ name: "汽车", value: 31 },
{ name: "轻工业制造", value: 30 },
{ name: "其他", value: 24 }
]);
const chart2ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#597EF7", "#D6E4FF", "#FF7875", "#B37FEB", "#FFA39E"]);
const chart3Data = ref({
name: [
"华为技术有限公司",
"大疆创新科技有限公司",
"TCL科技集团股份有限公司",
"中兴通讯股份有限公司",
"联想集团",
"比亚迪集团",
"宁德时代新能源科技股份有限公司",
"晶科智能科技有限公司"
],
value: [42, 35, 28, 19, 15, 12, 11, 8]
});
<script setup>
import { ref, onMounted, computed } from "vue";
import Discussion1 from './337/index.vue'
import Discussion2 from './232/index.vue'
import { useRoute } from "vue-router";
const mapData = ref([
{ name: "北京", value: 10, coord: [116.46, 39.92] },
{ name: "上海", value: 9, coord: [121.48, 31.22] },
{ name: "广东", value: 15, coord: [113.23, 23.16] },
{ name: "江苏", value: 30, coord: [118.78, 32.04] },
{ name: "浙江", value: 20, coord: [120.19, 30.26] },
{ name: "四川", value: 4, coord: [104.06, 30.67] },
{ name: "陕西", value: 1, coord: [108.95, 34.27] },
{ name: "辽宁", value: 3, coord: [123.38, 41.8] }
// { name: "湖北", value: 2, coord: [114.31, 30.52] },
// { name: "山东", value: 12, coord: [117.0, 36.65] },
]);
const route = useRoute()
console.log('route',route.query.id)
const chart4Data = ref([
{ name: "和解/同意令", value: 50 },
{ name: "裁定不侵权", value: 46 },
{ name: "裁定侵权", value: 40 },
{ name: "申诉方撤诉", value: 31 },
{ name: "其他", value: 24 }
]);
const chart4ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#D6E4FF", "#FFA39E"]);
const showDiscussion = ref('')
onMounted(() => {
let chart1 = getMultiLineChart(chart1Data.value.title, chart1Data.value.data[0].value);
setChart(chart1, "chart1");
let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
setChart(chart2, "chart2");
let chart3 = getBarChart(chart3Data.value.name, chart3Data.value.value);
setChart(chart3, "chart3");
showDiscussion.value = route.query.id
})
let chartMap = getMapChart(mapData.value);
setChart(chartMap, "chartMap");
let chart4 = getPieChart(chart4Data.value, chart4ColorList.value);
setChart(chart4, "chart4");
});
</script>
<style lang="scss" scoped>
.wrap {
width: 100%;
height: 100%;
overflow: hidden;
.top {
display: flex;
justify-content: space-between;
margin: 16px 160px;
.item {
width: 388px;
height: 80px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
position: relative;
display: flex;
justify-content: space-between;
&::before {
position: absolute;
content: "";
width: 4px;
height: 49px;
background: rgba(10, 87, 166, 1);
left: 0;
top: 15px;
}
.item-left {
margin-left: 30px;
margin-top: 25px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.item-right {
margin-top: 28px;
margin-right: 35px;
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
.item-left-box {
margin-left: 30px;
.item-left1 {
margin-top: 13px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.item-left2 {
height: 2px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 120px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
.overview-wrap {
width: 100%;
height: 100%;
}
}
}
}
.center {
display: flex;
justify-content: space-between;
margin: 0 160px;
.box1 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
height: 300px;
}
}
.box2 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
height: 300px;
// width: 752px;
box-sizing: border-box;
padding: 0 20px;
}
}
}
.footer {
margin: 16px 160px;
display: flex;
justify-content: space-between;
.box3 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
height: 300px;
}
.box3-main1 {
height: 300px;
display: flex;
.box3-main1-left {
width: 380px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
.box3-main1-left-item {
display: flex;
height: 36px;
margin-left: 20px;
.box3-main1-left-item-left {
width: 24px;
height: 24px;
border-radius: 12px;
margin-left: 12px;
margin-top: 6px;
background: #e7f3ff;
color: #0a57a6;
text-align: center;
line-height: 24px;
}
.box3-main1-left-item-center {
height: 36px;
line-height: 36px;
width: 220px;
margin-left: 12px;
}
.box3-main1-left-item-right {
width: 80px;
box-sizing: border-box;
padding-right: 10px;
text-align: right;
}
}
}
.box3-main1-right {
width: 390px;
height: 300px;
}
}
}
.box4 {
width: 792px;
height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box4-main {
height: 300px;
box-sizing: border-box;
padding: 0 20px;
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/232/index.vue 0 → 100644
浏览文件 @ 7ab5fe3e
<template>
<div class="wrapper">
<div class="box1 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">行业背景</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main">
<div class="box1-main-item" v-for="(bg, index) in bgList" :key="index">
<div class="id">{{ index + 1 + "." }}</div>
<div class="title">{{ bg.title }}</div>
</div>
</div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{
`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
}}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
<div class="box2 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">市场需求</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(demand, index) in demandList" :key="index">
<div class="box2-main-item-header">
<div class="header-left">
{{ demand.title }}
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/images/icon-open.png" alt="" />
</div>
<div class="text">{{ "跳转原文" }}</div>
</div>
</div>
<div class="box2-main-item-content">
<div class="content-item" v-for="(val, idx) in demand.data" :key="idx">
<div class="id">{{ idx + 1 + "." }}</div>
<div class="title">{{ val.title }}</div>
</div>
</div>
</div>
</div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{
`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
}}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
<div class="box3 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">国内外供应情况</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box3-main">
<div class="box3-main-item" v-for="(supply, index) in supplyList" :key="index">
<div class="box3-main-item-header">
<div class="header-left">
{{ supply.title }}
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/images/icon-open.png" alt="" />
</div>
<div class="text">{{ "跳转原文" }}</div>
</div>
</div>
<div class="box3-main-item-content">
<div class="content-item" v-for="(val, idx) in supply.data" :key="idx">
<div class="id">{{ idx + 1 + "." }}</div>
<div class="title">{{ val.title }}</div>
</div>
</div>
</div>
</div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{
`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
}}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
<div class="box4 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">未来产业格局</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box4-main">
<div class="box4-main-item" v-for="(item, index) in box4List" :key="index">
<div class="box4-main-item-header">
<div class="header-left">
{{ item.title }}
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/images/icon-open.png" alt="" />
</div>
<div class="text">{{ "跳转原文" }}</div>
</div>
</div>
<div class="box4-main-item-content">
<div class="content-item" v-for="(val, idx) in item.data" :key="idx">
<div class="id">{{ idx + 1 + "." }}</div>
<div class="title">{{ val.title }}</div>
</div>
</div>
</div>
</div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{
`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
}}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
<div class="box5 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查建议</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box5-main">
<div class="box5-main-item" v-for="(suggestion, index) in suggestionList" :key="index">
<div class="box5-main-item-header">{{ suggestion.title }}</div>
<div class="box5-main-item-content">
<div class="content-item" v-for="(val, idx) in suggestion.data" :key="idx">
<div class="content-item-title">{{ idx + 1 + "." + val.title }}</div>
<div class="content-item-info">
<div class="desc">{{ val.info.desc }}</div>
<div class="info-bill" v-if="val.info.bill">
<div class="info-bill-box">
<div class="info-bill-left">{{ "法案" }}</div>
<div class="info-bill-center">{{ val.info.bill }}</div>
<div class="info-bill-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{
`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
}}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const bgList = ref([
{
title: "钒被美国内政部列入《2018 年关键矿产清单》（依据第 13817 号行政命令），需满足 “对经济与国家安全至关重要、供应链易受中断、无供应将致重大后果” 三大标准，是国防（军事装备钛合金）、关键基础设施（高强度低合金钢材）及化工、储能领域的必需物资（P1-411 至 P1-423、P1-441 至 P1-451）。"
},
{
title: "全球钒生产分三类：原生生产（采矿）、联合生产（炼钢副产品，占全球 2019 年总产量 71%）、二次生产（废料回收）；美国以二次生产为主（占全球二次产量 1/3，约全球总产 4%），原生生产仅能源燃料公司（Energy Fuels）1 家，2019 年复产但产量不足全球 1%（P1-206 至 P1-208、P1-224 至 P1-227）。"
},
{
title: "美国钒产业高度集中，2019 年仅 3 家企业（AMG Vanadium、U.S. Vanadium、Energy Fuels）从事生产，AMG Vanadium 是国内最大钒铁生产商，U.S. Vanadium 专注高纯度五氧化二钒，Gladieux Metals Recycling 因设施改造处于闲置状态（P1-230 至 P1-232、P1-246 至 P1-248、P1-252 至 P1-254）。"
},
{
title: "美国对钒进口实施贸易管控：自 1995 年起对中国、南非、俄罗斯等国钒铁征收反倾销税（中国全国统一税率 66.71%、南非 116%），2018 年后对华加征 301 条款关税（10%-25%）；同时通过《确保关键矿产安全可靠供应的联邦战略》，与加拿大、澳大利亚签订关键矿产合作协议（P1-369 至 P1-371、P1-401 至 P1-406、P1-693 至 P1-712）。"
},
{
title: "美国钒生产依赖进口原料：二次生产所需废催化剂、灰渣等 80% 来自海外（2019 年含钒废料进口 90% 来自加拿大），仅 Energy Fuels 使用 100% 本土原料，2016 年以来其产量占国内需求的 1.4%（P1-493 至 P1-495、P1-503、P1-682 至 P1-683）。"
}
]);
const demandList = ref([
{
title: "（一）美国市场需求",
data: [
{
title: "2016-2019 年美国钒表观消费量年均 8590 吨（含钒量），国内产量仅 340 万千克 / 年，进口依赖度超 80%（年均进口 780 万千克）（P1-481、P1-661）。"
},
{
title: "钢铁产业是最大需求领域，占总需求 90%（2019 年约 7731 吨含钒量），用于高强度低合金（HSLA）钢（抗震钢筋、桥梁）、工具钢（机械加工），其中国防用钢占钢铁需求 3%，对应钒需求 230 吨 / 年（P1-279 至 P1-283、P1-438、P1-443）。"
},
{
title: "钛产业占总需求 5%（约 430 吨 / 年），90% 用于航空航天领域（商用 55%、军用 10%），是 Ti-6Al-4V 合金核心成分（成本占比 12%-14%），2020 年受新冠疫情冲击，航空航天需求下滑致钛产业钒需求骤减（P1-291 至 P1-293、P1-437、P1-738 至 P1-739）。"
},
{
title: "非冶金领域占总需求 5%（约 430 吨 / 年），包括化工催化剂（硫酸生产，硫酸为工业基础原料）、储能（钒液流电池，当前占比不足 1%，2027 年增速预计 13%-42%）（P1-299 至 P1-306、P1-450、P1-746）。"
},
{
title: "2020 年新冠疫情对美国钒需求冲击显著：钢铁产量同比降 18%，航空航天领域钛需求锐减，钒液流电池等新兴需求未形成规模支撑（P1-732 至 P1-733、P1-738 至 P1-739）。"
}
]
},
{
title: "（二）国际市场需求",
data: [
{
title: "全球钒需求以钢铁产业为主（占比 90%-93%），中国是最大消费国（占全球需求 50%-60%），其钢铁产业（尤其是钢筋）钒用量直接影响全球市场（P1-279、P1-321、P1-716 至 P1-717）。"
},
{
title: "国际航空航天领域钛合金用钒需求稳定，占全球钒总需求 3%-5%，集中于波音、空客供应链，2020 年受疫情冲击需求下滑，长期随航空业复苏有望恢复年均 2%-3% 增长（P1-291 至 P1-293、P1-738 至 P1-739）。"
},
{
title: "钒液流电池是全球钒需求新增长点：当前占比不足 1%，Roskill 预测 2027 年增速 13%/ 年，Bushveld Minerals 预测 42%/ 年，若成本降至 100 美元 /kWh，2030 年或占全球消费 10%-15%（P1-305 至 P1-306、P1-746）。"
},
{
title: "化工领域（硫酸生产催化剂）是全球钒需求的稳定补充，硫酸消费量被视为 “国家工业发展指标”，支撑钒在非冶金领域的基础需求（P1-299 至 P1-302）。"
}
]
}
]);
const supplyList = ref([
{
title: "（一）美国供应情况",
data: [
{
title: "原生供应：仅 Energy Fuels 具备产能，2019 年生产 460 吨含钒量（五氧化二钒）后因价格低迷停产；矿山资源含 660 万千克可采钒量，需价格回升至 10 美元 / 磅以上才具备复产动力（P1-208 至 P1-210、P1-213、P1-588 至 P1-589）。"
},
{
title: "二次供应：AMG Vanadium（俄亥俄州）2016-2019 年钒铁年均产量 [数据缺失]，2021 年新工厂投产后产能翻倍至 5500 吨 / 年（含钒量）；U.S. Vanadium（阿肯色州）是国内唯一高纯度五氧化二钒生产商；Gladieux（得克萨斯州）改造完成后将恢复普通级五氧化二钒生产，预计 2021 年后投产（P1-230 至 P1-232、P1-238 至 P1-240、P1-246 至 P1-248、P1-252 至 P1-254）。"
},
{
title: "潜在产能：内华达州 Gibellini 项目（2023 年投产，年产能 2400 吨含钒量）、Carlin 项目（16 年周期总产能 4600 万千克含钒量），需钒价达 7.76 美元 / 磅盈亏平衡线才具备经济性（P1-214 至 P1-217、P1-218 至 P1-219、P1-751 至 P1-752）。"
},
{
title: "原料依赖：二次生产所需废催化剂、五氧化二钒等原料 80% 进口，2019 年含钒废料进口 90% 来自加拿大，仅 Energy Fuels 使用 100% 本土原料，供应链自主性不足（P1-493 至 P1-495、P1-503、P1-682 至 P1-683）。"
}
]
},
{
title: "（二）国际供应情况",
data: [
{
title: "全球产能集中：2019 年全球钒产量 10.3 万吨（矿山 7.3 万吨 + 二次 3 万吨），生产集中于 4 国 —— 中国（55%，约 5.6 万吨）、俄罗斯（18%，约 1.8 万吨）、南非（8%，约 0.8 万吨）、巴西（7%，约 0.7 万吨），中国通过钢铁联合生产（占全球联合产量 71%）主导供应（P1-208、P1-224、P1-321、P1-724）。"
},
{
title: "贸易流向特征：中国虽产量高，但国内钢铁需求大，出口仅占全球 15%；欧盟（占全球出口 27%）、南非（13%）、巴西（13%）是主要出口方；美国进口来源前三位为加拿大（钒铁 43%）、奥地利（25%）、南非（钒氧化物 10%），2019 年进口额 4.78 亿美元（P1-346、P1-350、P1-354、P1-481）。"
},
{
title: "成本竞争格局：中国、俄罗斯联合生产现金成本低于 8 美元 / 磅，哈萨克斯坦新项目宣称 “全球最低成本”；美国原生生产需 10-13 美元 / 磅才盈利，二次生产依赖回收费用（AMG Vanadium 回收收益覆盖 80% 运营成本），整体竞争力弱于新兴市场（P1-588 至 P1-589、P1-724、P1-729）。"
},
{
title: "新增产能规划：加拿大（BlackRock Metals 项目 2021 年投产，年产能 4000 吨）、澳大利亚（Windimurra mine 等 5 个项目处于后期勘探，预计 2021 年后投产）、哈萨克斯坦（Balasausqandiq 项目计划 2023 年产能 1.3 万吨），若全部投产可使全球矿山产量接近翻倍（P1-322 至 P1-323、P1-324 至 P1-331、P1-338 至 P1-339、P1-724）。"
}
]
}
]);
const box4List = ref([
{
title: "（一）美国未来产业格局",
data: [
{
title: "短期（2021-2023 年）：AMG Vanadium 新工厂、Gladieux 改造项目投产后，钒铁自给率预计从 [数据缺失] 提升至 50% 以上，普通级五氧化二钒进口依赖度从 100% 降至 60% 以下；Gibellini 项目 2023 年投产将新增原生产能，进口依赖度进一步降低（P1-238 至 P1-240、P1-252 至 P1-254、P1-218 至 P1-219、P1-664 至 P1-669）。"
},
{
title: "中长期（2024-2030 年）：若 Gibellini、Carlin 项目满产，美国原生钒产能可达 4800 吨 / 年（占国内需求 50% 以上），叠加二次产能扩张，进口依赖度或降至 50% 以下，供应链自主性显著提升（P1-214 至 P1-217、P1-218 至 P1-219、P1-774）。"
},
{
title: "政策驱动方向：美国或推进 “国防储备扩大”（建议储备 4800 吨含钒量五氧化二钒）、“回收促进”（回收税收优惠、EPA 监管优化），同时深化与加拿大、澳大利亚的关键矿产合作，分散供应风险（P1-780 至 P1-793、P1-794 至 P1-800、P1-693 至 P1-712）。"
},
{
title: "产业风险挑战：全球新增产能（哈萨克斯坦、加拿大、澳大利亚）或压低价格至 5-7 美元 / 磅，抑制美国原生产能投产；二次生产仍依赖进口原料，供应链风险未完全消除；若钒价长期低迷，部分规划产能可能推迟或取消（P1-724、P1-751 至 P1-755、P1-776）。"
}
]
},
{
title: "（二）国际产业格局",
data: [
{
title: "需求趋势：全球钢铁需求增速趋缓（预计年增 1.4% 至 2035 年），但高强度钢、工具钢占比提升支撑钒用量；储能需求成核心增长点，若钒液流电池成本达标，2030 年或占全球消费 10%-15%；国防、化工需求保持稳定（P1-734、P1-746、P1-299 至 P1-302）。"
},
{
title: "供应格局：中国仍将主导全球钒供应，但加拿大、澳大利亚、哈萨克斯坦新增产能将分流市场份额，全球供应集中度或从 2019 年的 88%（中、俄、南非、巴西）降至 2030 年的 75% 左右（P1-321、P1-322 至 P1-331、P1-338 至 P1-339、P1-724）。"
},
{
title: "价格影响因素：短期受全球新增产能释放影响，钒价或维持 5-8 美元 / 磅低位；中长期若储能需求爆发，或推动价格回升至 10-12 美元 / 磅，触发美国、澳大利亚等国原生产能投产（P1-588 至 P1-589、P1-724、P1-746）。"
},
{
title: "贸易与政策：全球关键矿产竞争加剧，美国、欧盟等或进一步强化对钒等关键矿产的供应链管控，推动与盟友的合作协议；中国政策（如钢铁标准、环保管控）仍将是影响全球钒市场的重要变量（P1-693 至 P1-712、P1-716 至 P1-717）。"
}
]
}
]);
const suggestionList = ref([
{
title: "（一）与盟友及合作伙伴合作",
data: [
{
title: "美国盟友的脆弱性",
info: {
desc: "美国盟友和合作伙伴的国家安全对美国国家安全至关重要，而两者都因盟友在钕铁硼磁体价值链对中国的依赖而受到削弱。"
}
},
{
title: "关键矿物多边合作",
info: {
desc: "共同的脆弱性凸显了当前关于关键矿物的多边及双边合作的价值，这些合作有助于推动美国及其盟友摆脱对潜在对手和国家安全威胁来源的依赖。"
}
}
]
},
{
title: "（二）强化国内供应",
data: [
{
title: "设立稀土税收抵免",
info: {
desc: "商务部建议政府支持《稀土磁体制造生产税收抵免法案》（H.R. 5033）或类似立法的通过。除稀土磁体税收抵免外，商务部还建议政府支持为可替代钕铁硼磁体的非稀土磁体，以及碳酸稀土、氧化物、金属、合金等上游稀土产品设立税收抵免。",
bill: "2024《稀土磁体制造生产税收抵免法案》"
}
},
{
title: "为国内制造提供额外支持",
info: {
desc: "商务部建议政府支持通过立法行动（如 “供应链韧性计划”）分配额外资金，以发展有韧性的供应链。此类计划的额外资金应支持对钕铁硼磁体价值链所有环节国内制造的投资。",
bill: "2024《两党基础设施法》"
}
}
]
}
]);
onMounted(() => {});
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
height: 100%;
overflow-y: auto;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 16px;
height: 24px;
line-height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 116px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box-footer {
margin: 24px auto 0;
width: 1568px;
height: 64px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
display: flex;
align-items: center;
gap: 13px;
padding: 0 12px;
.box-footer-left {
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.box-footer-center {
width: 939px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.box-footer-right {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
}
.box {
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
margin: 16px auto;
}
.box1 {
width: 1600px;
height: 588px;
.box1-main {
height: 425px;
margin-top: 2px;
overflow: hidden;
overflow-y: auto;
}
.box1-main-item {
margin: 0 auto;
width: 1552px;
padding: 12px 23px 12px 44px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
display: flex;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.id {
width: 18px;
}
.title {
flex: 1;
}
}
}
.box2 {
width: 1600px;
height: 921px;
.box2-main {
height: 760px;
width: 1552px;
margin: 2px auto 0;
.box2-main-item {
width: 1552px;
.box2-main-item-header {
height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
background: rgba(247, 248, 249, 1);
.header-left {
margin-left: 12px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.header-right {
margin-right: 22px;
display: flex;
gap: 5px;
justify-content: flex-end;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 14px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
letter-spacing: 0px;
text-align: justify;
}
}
}
.box2-main-item-content {
.content-item {
box-sizing: border-box;
padding: 12px 23px 12px 44px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
display: flex;
.id {
width: 18px;
}
.text {
flex: 1;
}
}
}
}
}
}
.box3 {
width: 1600px;
height: 957px;
.box3-main {
height: 795px;
width: 1552px;
margin: 2px auto 0;
.box3-main-item {
width: 1552px;
.box3-main-item-header {
height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
background: rgba(247, 248, 249, 1);
.header-left {
margin-left: 12px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.header-right {
margin-right: 22px;
display: flex;
gap: 5px;
justify-content: flex-end;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 14px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
letter-spacing: 0px;
text-align: justify;
}
}
}
.box3-main-item-content {
.content-item {
box-sizing: border-box;
padding: 12px 23px 12px 44px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
display: flex;
.id {
width: 18px;
}
.text {
flex: 1;
}
}
}
}
}
}
.box4 {
width: 1600px;
height: 954px;
.box4-main {
height: 795px;
width: 1552px;
margin: 2px auto 0;
.box4-main-item {
width: 1552px;
.box4-main-item-header {
height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
background: rgba(247, 248, 249, 1);
.header-left {
margin-left: 12px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.header-right {
margin-right: 22px;
display: flex;
gap: 5px;
justify-content: flex-end;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 14px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
letter-spacing: 0px;
text-align: justify;
}
}
}
.box4-main-item-content {
.content-item {
box-sizing: border-box;
padding: 12px 23px 12px 44px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
display: flex;
.id {
width: 18px;
}
.text {
flex: 1;
}
}
}
}
}
}
.box5 {
width: 1600px;
height: 813px;
.box5-main {
height: 650px;
width: 1552px;
margin: 0 auto;
margin-top: 2px;
.box5-main-item {
.box5-main-item-header {
width: 1552px;
height: 48px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
background: rgba(247, 248, 249, 1);
line-height: 48px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
letter-spacing: 0px;
text-align: justify;
padding-left: 12px;
}
.box5-main-item-content {
margin-bottom: 10px;
.content-item {
.content-item-title {
padding: 12px 23px 12px 44px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
}
.content-item-info {
padding: 12px 23px 12px 44px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.desc {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
padding-left: 15px;
}
.info-bill {
border-radius: 4px;
display: inline-block;
background: rgba(246, 250, 255, 1);
.info-bill-box {
display: flex;
margin-top: 4px;
height: 32px;
border-radius: 4px;
background: rgba(246, 250, 255, 1);
gap: 16px;
align-items: center;
padding: 0 8px;
.info-bill-left {
height: 22px;
padding: 0 4px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.info-bill-center {
height: 24px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.info-bill-right {
width: 20px;
height: 20px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/232/utils/barChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLine: {
show: false
},
show: true
},
xAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: false,
position: 'top',
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 12,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: 'rgba(22, 119, 255, 0)'
},
{
offset: 1,
color: 'rgba(22, 119, 255, 1)'
}
]);
},
barBorderRadius: 6,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/232/utils/barChart1.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from "echarts";
const getBarChart1 = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
data: nameList,
inverse: true,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: [610, 0],
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(22, 119, 255, 0)'
},
{
offset: 1,
color: 'rgba(22, 119, 255, 1)'
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart1
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/232/utils/pieChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [80, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 项 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 12,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/337/index.vue 0 → 100644
浏览文件 @ 7ab5fe3e
<template>
<div class="wrapper">
<div class="top">
<div class="box1 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">同领域调查案件数量</div>
<div class="header-btn-box">
<div class="btn btnActive">{{ "半导体" }}</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main" id="chart1"></div>
<div class="box1-footer">
<div class="icon1">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">
{{
"近年来美对华半导体337调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。"
}}
</div>
<div class="icon2">
<img src="./assets/images/icon2.png" alt="" />
</div>
</div>
</div>
<div class="box2 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">同领域调查涉及公司</div>
<div class="header-btn-box">
<div class="btn btnActive">{{ "半导体" }}</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main" id="chart2"></div>
<div class="box2-footer">
<div class="icon1">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">
{{
"主要集中在存储、芯片设计及通信领域，如长江存储、长鑫存储、华为、中兴等"
}}
</div>
<div class="icon2">
<img src="./assets/images/icon2.png" alt="" />
</div>
</div>
</div>
</div>
<div class="footer">
<div class="box3 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">关联企业</div>
<div class="header-btn-box">
<div
class="btn"
:class="{ btnActive: item.isActive }"
v-for="(item, index) in box3BtnList"
:key="index"
@click="handleClickBox3Btn(index)"
>
{{ item.name }}
</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box3-main">
<div id="chart3"></div>
<div id="chart4"></div>
</div>
<div class="box3-footer">
<div class="icon1">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">
{{
"近年来美对华半导体337调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。"
}}
</div>
<div class="icon2">
<img src="./assets/images/icon2.png" alt="" />
</div>
</div>
</div>
<div class="box4 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">和解可能性分析</div>
<div class="header-btn-box">
<div class="btn btnActive">{{ "半导体" }}</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box4-main">
<div id="chart5"></div>
<div class="box4-info-box">
<div class="item" v-for="(item, index) in infoList" :key="index">
<div class="item-left"></div>
<div class="item-right">
<div class="title">{{ item.title }}</div>
<div class="content">{{ item.content }}</div>
</div>
</div>
</div>
</div>
<div class="box4-footer">
<div class="icon1">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">
{{
"近年来美对华半导体337调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。"
}}
</div>
<div class="icon2">
<img src="./assets/images/icon2.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import getBarChart from "./utils/barChart";
import getBarChart1 from "./utils/barChart1";
import getPieChart from "./utils/pieChart";
const box3BtnList = ref([
{
name: "全部",
isActive: true,
},
{
name: "一加",
isActive: false,
},
{
name: "联想",
isActive: false,
},
{
name: "TCL",
isActive: false,
},
{
name: "其他",
isActive: false,
},
]);
const handleClickBox3Btn = (index) => {
box3BtnList.value.forEach((item) => {
item.isActive = false;
});
box3BtnList.value[index].isActive = true;
};
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const chart1Data = ref({
title: [
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2022",
"2023",
"2024",
"2025",
],
data: [32, 32, 41, 33, 29, 31, 16, 31, 37, 31, 27, 27],
});
const chart2Data = ref({
title: [
"华为技术有限公司",
"大疆创新科技有限公司",
"TCL科技集团股份有限公司",
"中兴通讯股份有限公司",
"联想集团",
"比亚迪集团",
"宁德时代新能源科技股份有限公司",
"长江存储科技有限公司",
],
data: [42, 35, 28, 19, 15, 12, 11, 8],
});
const chart3Data = ref([
{
name: "子公司",
value: 7,
},
{
name: "关联公司",
value: 7,
},
{
name: "合作伙伴",
value: 6,
},
{
name: "其他",
value: 4,
},
]);
const colorList1 = ref(["#4096FF", "#FFA39E", "#D6E4FF", "#FFC069"]);
const colorList2 = ref(["#69B1FF", "#FFC069", "#87E8DE", "#D6E4FF", "#FFA39E"]);
const chart4Data = ref([
{
name: "中国香港",
value: 7,
},
{
name: "美国",
value: 7,
},
{
name: "芬兰",
value: 6,
},
{
name: "中国大陆",
value: 4,
},
]);
const chart5Data = ref([
{
name: "和解/同意令",
value: 50,
},
{
name: "裁定不侵权",
value: 46,
},
{
name: "裁定侵权",
value: 40,
},
{
name: "申诉方撤诉",
value: 31,
},
{
name: "其他",
value: 24,
},
]);
const infoList = ref([
{
title: "专利无效宣告",
content: "被告企业可能通过证明Pantech专利无效来赢得案件",
},
{
title: "交叉许可协议",
content: "双方达成专利交叉许可协议，结束争端",
},
{
title: "和解协议",
content: "被告企业支付专利使用费以换取市场准入",
},
{
title: "有限排除令",
content: "如果侵权成立，ITC可能发布有限排除令，禁止涉案产品进入美国市场",
},
]);
onMounted(() => {
let chart1 = getBarChart(chart1Data.value.title, chart1Data.value.data);
setChart(chart1, "chart1");
let chart2 = getBarChart1(chart2Data.value.title, chart2Data.value.data);
setChart(chart2, "chart2");
let chart3 = getPieChart(chart3Data.value, colorList1.value);
setChart(chart3, "chart3");
let chart4 = getPieChart(chart4Data.value, colorList1.value);
setChart(chart4, "chart4");
let chart5 = getPieChart(chart5Data.value, colorList2.value);
setChart(chart5, "chart5");
});
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
height: 100%;
// padding: 0 160px;
overflow-y: auto;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 16px;
height: 24px;
line-height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 116px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon{
width: 28px;
height: 28px;
img{
width: 100%;
height: 100%;
}
}
}
}
.box {
width: 792px;
height: 410px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
}
.top {
display: flex;
margin: 0 160px;
margin-top: 16px;
.box1 {
.box1-main {
height: 280px;
}
.box1-footer {
height: 40px;
margin: 0 auto;
margin-top: 19px;
width: 759px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.icon1 {
margin-left: 12px;
margin-top: 10px;
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 12px;
line-height: 40px;
width: 666px;
height: 40px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.icon2 {
margin-left: 13px;
margin-top: 8px;
width: 24px;
height: 24px;
background: rgba(231, 243, 255, 1);
border-radius: 12px;
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
.box2 {
margin-left: 16px;
.box2-main {
height: 280px;
}
.box2-footer {
height: 40px;
margin: 0 auto;
margin-top: 19px;
width: 759px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.icon1 {
margin-left: 12px;
margin-top: 10px;
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 12px;
line-height: 40px;
width: 666px;
height: 40px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.icon2 {
margin-left: 13px;
margin-top: 8px;
width: 24px;
height: 24px;
background: rgba(231, 243, 255, 1);
border-radius: 12px;
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
}
.footer {
margin: 0 160px;
margin-top: 16px;
display: flex;
.box3 {
.box3-main {
height: 280px;
display: flex;
#chart3 {
width: 396px;
}
#chart4 {
width: 396px;
}
}
.box3-footer {
height: 40px;
margin: 0 auto;
margin-top: 19px;
width: 759px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.icon1 {
margin-left: 12px;
margin-top: 10px;
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 12px;
line-height: 40px;
width: 666px;
height: 40px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.icon2 {
margin-left: 13px;
margin-top: 8px;
width: 24px;
height: 24px;
background: rgba(231, 243, 255, 1);
border-radius: 12px;
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
.box4 {
margin-left: 16px;
.box4-main {
height: 280px;
display: flex;
#chart5 {
width: 396px;
}
.box4-info-box {
width: 385px;
.item {
min-height: 66px;
display: flex;
.item-left {
width: 6px;
height: 6px;
border-radius: 3px;
background: rgba(255, 77, 79, 1);
margin-top: 16px;
}
.item-right {
margin-left: 10px;
.title {
margin-top: 5px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.content {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
}
.box4-footer {
height: 40px;
margin: 0 auto;
margin-top: 19px;
width: 759px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.icon1 {
margin-left: 12px;
margin-top: 10px;
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 12px;
line-height: 40px;
width: 666px;
height: 40px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.icon2 {
margin-left: 13px;
margin-top: 8px;
width: 24px;
height: 24px;
background: rgba(231, 243, 255, 1);
border-radius: 12px;
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/337/utils/barChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLine: {
show: false
},
show: true
},
xAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: false,
position: 'top',
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 12,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: 'rgba(22, 119, 255, 0)'
},
{
offset: 1,
color: 'rgba(22, 119, 255, 1)'
}
]);
},
barBorderRadius: 6,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/337/utils/barChart1.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from "echarts";
const getBarChart1 = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
data: nameList,
inverse: true,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: [610, 0],
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(22, 119, 255, 0)'
},
{
offset: 1,
color: 'rgba(22, 119, 255, 1)'
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart1
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/337/utils/pieChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [80, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 项 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 12,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue
浏览文件 @ 7ab5fe3e
<template>
<div class="wrapper">
<div class="top">
<div class="box1 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">同领域调查案件数量</div>
<div class="header-btn-box">
<div class="btn btnActive">{{ "半导体" }}</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main" id="chart1"></div>
<div class="box1-footer">
<div class="icon1">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">
{{
"近年来美对华半导体337调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。"
}}
</div>
<div class="icon2">
<img src="./assets/images/icon2.png" alt="" />
</div>
</div>
</div>
<div class="box2 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">同领域调查涉及公司</div>
<div class="header-btn-box">
<div class="btn btnActive">{{ "半导体" }}</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main" id="chart2"></div>
<div class="box2-footer">
<div class="icon1">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">
{{
"主要集中在存储、芯片设计及通信领域，如长江存储、长鑫存储、华为、中兴等"
}}
</div>
<div class="icon2">
<img src="./assets/images/icon2.png" alt="" />
</div>
</div>
</div>
</div>
<div class="footer">
<div class="box3 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">关联企业</div>
<div class="header-btn-box">
<div
class="btn"
:class="{ btnActive: item.isActive }"
v-for="(item, index) in box3BtnList"
:key="index"
@click="handleClickBox3Btn(index)"
>
{{ item.name }}
</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box3-main">
<div id="chart3"></div>
<div id="chart4"></div>
</div>
<div class="box3-footer">
<div class="icon1">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">
{{
"近年来美对华半导体337调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。"
}}
</div>
<div class="icon2">
<img src="./assets/images/icon2.png" alt="" />
</div>
</div>
</div>
<div class="box4 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">和解可能性分析</div>
<div class="header-btn-box">
<div class="btn btnActive">{{ "半导体" }}</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box4-main">
<div id="chart5"></div>
<div class="box4-info-box">
<div class="item" v-for="(item, index) in infoList" :key="index">
<div class="item-left"></div>
<div class="item-right">
<div class="title">{{ item.title }}</div>
<div class="content">{{ item.content }}</div>
</div>
</div>
</div>
</div>
<div class="box4-footer">
<div class="icon1">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">
{{
"近年来美对华半导体337调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。"
}}
</div>
<div class="icon2">
<img src="./assets/images/icon2.png" alt="" />
</div>
</div>
</div>
</div>
<div class="deepdig-wrap">
<Discussion1 v-if="showSurvey ==='337'"></Discussion1>
<Discussion2 v-else-if="showSurvey ==='232'"></Discussion2>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import getBarChart from "./utils/barChart";
import getBarChart1 from "./utils/barChart1";
import getPieChart from "./utils/pieChart";
const box3BtnList = ref([
{
name: "全部",
isActive: true,
},
{
name: "一加",
isActive: false,
},
{
name: "联想",
isActive: false,
},
{
name: "TCL",
isActive: false,
},
{
name: "其他",
isActive: false,
},
]);
const handleClickBox3Btn = (index) => {
box3BtnList.value.forEach((item) => {
item.isActive = false;
});
box3BtnList.value[index].isActive = true;
};
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const chart1Data = ref({
title: [
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2022",
"2023",
"2024",
"2025",
],
data: [32, 32, 41, 33, 29, 31, 16, 31, 37, 31, 27, 27],
});
import { ref, onMounted, computed } from "vue";
import Discussion1 from './337/index.vue'
import Discussion2 from './232/index.vue'
import { useRoute } from "vue-router";
const chart2Data = ref({
title: [
"华为技术有限公司",
"大疆创新科技有限公司",
"TCL科技集团股份有限公司",
"中兴通讯股份有限公司",
"联想集团",
"比亚迪集团",
"宁德时代新能源科技股份有限公司",
"长江存储科技有限公司",
],
data: [42, 35, 28, 19, 15, 12, 11, 8],
});
const route = useRoute()
console.log('route',route.query.id)
const chart3Data = ref([
{
name: "子公司",
value: 7,
},
{
name: "关联公司",
value: 7,
},
{
name: "合作伙伴",
value: 6,
},
{
name: "其他",
value: 4,
},
]);
const colorList1 = ref(["#4096FF", "#FFA39E", "#D6E4FF", "#FFC069"]);
const colorList2 = ref(["#69B1FF", "#FFC069", "#87E8DE", "#D6E4FF", "#FFA39E"]);
const chart4Data = ref([
{
name: "中国香港",
value: 7,
},
{
name: "美国",
value: 7,
},
{
name: "芬兰",
value: 6,
},
{
name: "中国大陆",
value: 4,
},
]);
const chart5Data = ref([
{
name: "和解/同意令",
value: 50,
},
{
name: "裁定不侵权",
value: 46,
},
{
name: "裁定侵权",
value: 40,
},
{
name: "申诉方撤诉",
value: 31,
},
{
name: "其他",
value: 24,
},
]);
const infoList = ref([
{
title: "专利无效宣告",
content: "被告企业可能通过证明Pantech专利无效来赢得案件",
},
{
title: "交叉许可协议",
content: "双方达成专利交叉许可协议，结束争端",
},
{
title: "和解协议",
content: "被告企业支付专利使用费以换取市场准入",
},
{
title: "有限排除令",
content: "如果侵权成立，ITC可能发布有限排除令，禁止涉案产品进入美国市场",
},
]);
const showSurvey = ref('')
onMounted(() => {
let chart1 = getBarChart(chart1Data.value.title, chart1Data.value.data);
setChart(chart1, "chart1");
let chart2 = getBarChart1(chart2Data.value.title, chart2Data.value.data);
setChart(chart2, "chart2");
showSurvey.value = route.query.id
})
let chart3 = getPieChart(chart3Data.value, colorList1.value);
setChart(chart3, "chart3");
let chart4 = getPieChart(chart4Data.value, colorList1.value);
setChart(chart4, "chart4");
let chart5 = getPieChart(chart5Data.value, colorList2.value);
setChart(chart5, "chart5");
});
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
height: 100%;
// padding: 0 160px;
overflow-y: auto;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 16px;
height: 24px;
line-height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 116px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon{
width: 28px;
height: 28px;
img{
width: 100%;
height: 100%;
}
}
}
}
.box {
width: 792px;
height: 410px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
}
.top {
display: flex;
margin: 0 160px;
margin-top: 16px;
.box1 {
.box1-main {
height: 280px;
}
.box1-footer {
height: 40px;
margin: 0 auto;
margin-top: 19px;
width: 759px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.icon1 {
margin-left: 12px;
margin-top: 10px;
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 12px;
line-height: 40px;
width: 666px;
height: 40px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.icon2 {
margin-left: 13px;
margin-top: 8px;
width: 24px;
height: 24px;
background: rgba(231, 243, 255, 1);
border-radius: 12px;
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
.box2 {
margin-left: 16px;
.box2-main {
height: 280px;
}
.box2-footer {
height: 40px;
margin: 0 auto;
margin-top: 19px;
width: 759px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.icon1 {
margin-left: 12px;
margin-top: 10px;
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 12px;
line-height: 40px;
width: 666px;
height: 40px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.icon2 {
margin-left: 13px;
margin-top: 8px;
width: 24px;
height: 24px;
background: rgba(231, 243, 255, 1);
border-radius: 12px;
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
}
.footer {
margin: 0 160px;
margin-top: 16px;
display: flex;
.box3 {
.box3-main {
height: 280px;
display: flex;
#chart3 {
width: 396px;
}
#chart4 {
width: 396px;
}
}
.box3-footer {
height: 40px;
margin: 0 auto;
margin-top: 19px;
width: 759px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.icon1 {
margin-left: 12px;
margin-top: 10px;
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 12px;
line-height: 40px;
width: 666px;
height: 40px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.icon2 {
margin-left: 13px;
margin-top: 8px;
width: 24px;
height: 24px;
background: rgba(231, 243, 255, 1);
border-radius: 12px;
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
.box4 {
margin-left: 16px;
.box4-main {
height: 280px;
display: flex;
#chart5 {
width: 396px;
}
.box4-info-box {
width: 385px;
.item {
min-height: 66px;
display: flex;
.item-left {
width: 6px;
height: 6px;
border-radius: 3px;
background: rgba(255, 77, 79, 1);
margin-top: 16px;
}
.item-right {
margin-left: 10px;
.title {
margin-top: 5px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.content {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
}
.box4-footer {
height: 40px;
margin: 0 auto;
margin-top: 19px;
width: 759px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.icon1 {
margin-left: 12px;
margin-top: 10px;
width: 19px;
height: 20px;
img {
.deepdig-wrap {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 12px;
line-height: 40px;
width: 666px;
height: 40px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.icon2 {
margin-left: 13px;
margin-top: 8px;
width: 24px;
height: 24px;
background: rgba(231, 243, 255, 1);
border-radius: 12px;
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/index.vue
浏览文件 @ 7ab5fe3e
......@@ -2,7 +2,7 @@
<div class="wrapper">
<div class="header">
<div class="header-top">
<div class="header-top-left">{{ '337' }}</div>
<div class="header-top-left">{{ "337" }}</div>
<div class="header-top-right">
<div class="title">
{{ "337-TA-1443：外国制造的半导体器件及其下游产品和组件" }}
......@@ -60,36 +60,43 @@ import NavIcon2Active from "./assets/images/nav-icon2-active.png";
import NavIcon3 from "./assets/images/nav-icon2.png";
import NavIcon3Active from "./assets/images/nav-icon2-active.png";
import { useRoute } from "vue-router";
const route = useRoute();
const navList = ref([
{
name: "调查简介",
icon: NavIcon1,
activeIcon: NavIcon1Active,
isActive: true,
path: "/marketSingleCaseLayout/overview",
path: "/marketSingleCaseLayout/overview"
},
{
name: "深度挖掘",
name: route.query.id === "337" ? "深度挖掘" : "报告解析",
icon: NavIcon2,
activeIcon: NavIcon2Active,
isActive: false,
path: "/marketSingleCaseLayout/deepdig",
},
{
name: "影响分析",
icon: NavIcon3,
activeIcon: NavIcon3Active,
isActive: false,
path: "/marketSingleCaseLayout/overview",
path: "/marketSingleCaseLayout/deepdig"
},
// {
// name: "影响分析",
// icon: NavIcon3,
// activeIcon: NavIcon3Active,
// isActive: false,
// path: "/marketSingleCaseLayout/deepdig"
// }
]);
const handleClickNav = (index) => {
navList.value.forEach((item) => {
const handleClickNav = index => {
navList.value.forEach(item => {
item.isActive = false;
});
navList.value[index].isActive = true;
router.push(navList.value[index].path);
router.push({
path: navList.value[index].path,
query: {
id: route.query.id
}
});
};
</script>
......@@ -119,7 +126,6 @@ const handleClickNav = (index) => {
font-weight: 700;
text-align: center;
line-height: 48px;
}
.header-top-right {
margin-left: 20px;
......
src/views/marketAccessRestrictions/singleCaseLayout/overview/232/index.vue 0 → 100644
浏览文件 @ 7ab5fe3e
<template>
<div class="wrapper">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">基本信息</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main">
<div class="box1-item">
<div class="box1-item-left">{{ "案卷编号：" }}</div>
<div class="box1-item-right">{{ "250414-0065" }}</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查时间：" }}</div>
<div class="box1-item-right">
{{ "2021年9月21日" }}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查概括：" }}</div>
<div class="box1-item-right">
{{
"商务部长已启动一项调查，已确定进口药品和药品原料（包括成品药、医疗对策、关键投入品（如活性药物成分）和主要起始原料）及其衍生产品对国家安全的影响"
}}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "涉及专利：" }}</div>
<div class="box1-item-right">
{{ "注册专利号7745847、9093473、9147747、9184292" }}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查背景：" }}</div>
<div class="box1-item-right">
{{
"2025年3月1日，总统发布第14号行政命令，《应对木材、木料进口对国家安全的威胁》（90FR11359），指示商务部长根据《贸易发展法》第232条启动调查，已确定木材、木料及其衍生产品进口对国家安全的影响。2025年3月10日，部长启动了第232条调查。 "
}}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查范围：" }}</div>
<div class="box1-item-right">{{ "本次调查旨在评估汝铁硼磁铁进口对美国国家安全的影响" }}</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "法律依据：" }}</div>
<div class="box1-item-right1">
<div class="box1-item-right1-item" v-for="(item, index) in reasonList" :key="index">
{{ item }}
</div>
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查结论：" }}</div>
<div class="box1-item-right">
{{ "目前钒进口的数量和情况并未对第232节所定义的国家安全构成损害威胁。" }}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "增加关税：" }}</div>
<div class="box1-item-right">{{ "是，增加15%" }}</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查脉络</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main">
<div class="box2-line-box"></div>
<div
class="box2-item"
:class="{ box2ItemFooter: index % 2 }"
v-for="(item, index) in timeLineList"
:key="index"
>
<div class="point" :class="{ pointFooter: index % 2 }">
<img src="@/assets/images/dot.png" alt="" />
</div>
<div class="box2-item-header">
<div class="title">{{ item.time }}</div>
</div>
<div class="box2-item-content">
{{ item.content }}
</div>
</div>
<div class="arrow-left">
<img src="@/assets/icons/card-btn-left.png" alt="" />
</div>
<div class="arrow-right">
<img src="@/assets/icons/card-btn-right.png" alt="" />
</div>
</div>
<div class="box2-footer">
<div class="box2-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box2-footer-center">
{{
`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
}}
</div>
<div class="box2-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查结论</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box3-main">
<div class="box3-main-item" v-for="(item, index) in surveyResult" :key="index">
<div class="box3-main-item-header">
<div class="header-left">{{ item.title }}</div>
<div class="header-right">
<div class="icon">
<img src="./assets/images/open.png" alt="" />
</div>
<div class="text">{{ "跳转原文" }}</div>
</div>
</div>
<div class="box3-main-item-content" v-for="(val, idx) in item.data" :key="idx">
<div class="content-item">{{ idx + 1 + "." + val }}</div>
</div>
</div>
</div>
<div class="box3-footer">
<div class="box3-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box3-footer-center">
{{
`美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。`
}}
</div>
<div class="box3-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const reasonList = ref([
"1.EO 14017-应对木材、木料进口对国家安全的威胁；",
"2.EO 12443-应对木材、木料进口对国家安全的威胁；",
"3.EO 12443-应对木材、木料进口对国家安全的威胁；"
]);
const surveyResult = ref([
{
title: "（一）. 钒对美国国家安全至关重要",
data: [
"钒是关键矿产。美国内政部将钒列入2017年12月20日发布的第13817号行政命令要求制定的《2018年关键矿产清单》。根据该行政命令，该清单明确钒对美国国家安全至关重要，若钒供应中断，将对美国经济和国家安全造成重大影响。",
"钒因其在钢铁和钛合金中的应用，是国防系统的必需物资。在航空航天用钛关键应用中，钒具有不可替代性，许多军用机身含有大量钒。",
"钒是关键基础设施的必需物资。钒钢合金是建筑业用高强度低合金（HSLA）钢产品的关键成分，也用于工具钢和高速钢，广泛应用于美国关键基础设施。此外，几乎所有含钒钛产品均用于关键交通或国防领域。",
"钒产业对美国国家安全相关的其他关键产业具有重大影响。如前所述，钒在钢铁和钛产品中具有不可或缺的用途，且美国的钒资源往往与铀资源共生。商务部近期发现，这三个产业的进口产品均对美国国家安全构成潜在损害威胁。"
]
},
{
title: "（二）. 钒进口对美国钒产业经济福利的影响具有两面性",
data: [
"美国目前依赖钒进口。美国唯一的原生钒生产商因钒价格低迷，过去五年中仅一年有生产活动；国内二次生产商需进口大量原料。",
"国对钒进口的依赖并未加剧。尽管美国依赖进口满足民用需求，但美国主要钒铁和五氧化二钒生产商正在扩大或重启运营。随着这些举措的顺利完成，2021年美国利用含钒废料生产钒铁的产能预计将翻倍，格拉迪尼公司二次生产设施重启后，美国五氧化二钒产能也将显著提升。此外，多家国内采矿企业拥有闲置产能或正在勘探钒矿开发项目，若国内钒价格上涨或出现国家安全紧急情况，这些企业可能通过新建矿山等方式增加产能。",
"受国内价格持续低迷影响，美国钒产业可能面临重大财务挑战。但由于近期设施所有权变动、大量持续投资以及运营活动的阶段性缺失，难以准确评估该产业的财务健康状况。",
"美国拥有丰富的原生生产资源。至少有三家企业曾有钒矿生产历史，另有两个项目正在开发中。",
"钒的二次生产具有环境效益。二次生产所用含钒废料被美国环境保护局（EPA）归类为危险废物，但二次生产能够回收关键矿产，大幅减少废料填埋量，将其用于国防关键产品生产。"
]
}
]);
const timeLineList = ref([
{
time: "2021年6月",
content: "白宫报告《构建有韧性的供应链、重振美国制造业并促进广泛增长：依据第 14017 号行政令开展的百日审查》。"
},
{
time: "2021年9月21日",
content: "商务部长吉娜・雷蒙多启动了关于钕铁硼磁体进口对国家安全影响的 232 调查。"
},
{
time: "2021 年 9 月 27 日",
content: "商务部在《联邦公报》发布通知，宣布启动关于钕铁硼磁体进口对国家安全影响的调查。"
},
{
time: "2022 年 1 月 31 日",
content: "商务部向 60 家企业发放了调查。"
}
]);
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
// height: 1191px;
padding: 0 160px;
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 16px;
height: 24px;
line-height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-info {
height: 22px;
position: absolute;
right: 84px;
top: 17px;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 3px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.left {
width: 520px;
.box1 {
margin-top: 16px;
width: 520px;
height: 837px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
margin-top: 6px;
margin-left: 22px;
.box1-item {
display: flex;
margin-bottom: 16px;
.box1-item-left {
width: 100px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
margin-top: 3px;
margin-bottom: 3px;
}
.box1-item-right {
width: 346px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.box1-item-right1 {
.box1-item-right1-item {
width: 346px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
}
}
.right {
width: 1064px;
margin-left: 16px;
.box2 {
margin-top: 16px;
width: 1064px;
height: 410px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
margin: 0 auto;
margin-top: 10px;
height: 250px;
// width: 1054px;
// overflow-x: auto;
// overflow-y: hidden;
display: flex;
justify-content: center;
position: relative;
padding-left: 120px;
.box2-line-box {
position: absolute;
left: 0;
top: 114px;
height: 8px;
width: 100%;
background: url("@/assets/icons/line-bg.png") repeat;
}
.box2-item {
width: 320px;
height: 120px;
// background: pink;
position: relative;
box-sizing: border-box;
padding-left: 13px;
border-left: 1px solid #0a57a6;
margin-left: -100px;
.box2-item-header {
display: flex;
width: 240px;
.title {
color: rgba(10, 87, 166, 1);
height: 26px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
}
.box2-item-content {
width: 300px;
min-height: 48px;
max-height: 96px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
}
.point {
position: absolute;
left: -8px;
bottom: -7px;
width: 15px;
height: 15px;
img {
width: 100%;
height: 100%;
}
}
.pointFooter {
position: absolute;
left: -8px;
top: -7px;
width: 15px;
height: 15px;
img {
width: 100%;
height: 100%;
}
}
.time {
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: absolute;
bottom: -36px;
left: 0;
}
}
.box2ItemFooter {
margin-top: 118px;
margin-left: -120px;
box-sizing: border-box;
padding-top: 20px;
}
.arrow-left {
width: 24px;
height: 48px;
position: absolute;
left: 0;
top: 95px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.arrow-right {
width: 24px;
height: 48px;
position: absolute;
right: 0;
top: 95px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
.box2-footer {
margin: 24px auto 0;
width: 1032px;
height: 64px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
display: flex;
align-items: center;
gap: 13px;
padding: 0 12px;
.box2-footer-left {
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.box2-footer-center {
width: 939px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.box2-footer-right {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box3 {
margin-top: 16px;
margin-bottom: 35px;
width: 1064px;
// height: 714px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
padding-bottom: 18px;
.box3-main {
width: 1016px;
// height: 550px;
margin: 0 auto;
overflow: hidden;
overflow-y: auto;
.box3-main-item {
.box3-main-item-header {
width: 1016px;
height: 48px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
background: rgba(247, 248, 249, 1);
display: flex;
justify-content: space-between;
align-items: center;
.header-left {
margin-left: 12px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.header-right {
display: flex;
margin-right: 22px;
gap: 5px;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 14px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
letter-spacing: 0px;
text-align: justify;
}
}
}
.box3-main-item-content {
.content-item {
width: 1014px;
padding: 12px 23px 12px 44px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
}
}
}
.box3-footer {
margin: 24px auto 0;
width: 1032px;
height: 64px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
display: flex;
align-items: center;
gap: 13px;
padding: 0 12px;
.box3-footer-left {
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.box3-footer-center {
width: 939px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.box3-footer-right {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/overview/337/index.vue 0 → 100644
浏览文件 @ 7ab5fe3e
<template>
<div class="wrapper">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">基本信息</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main">
<div class="box1-item">
<div class="box1-item-left">{{ "调查案号：" }}</div>
<div class="box1-item-right">{{ "337-TA-1443" }}</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "涉及产品：" }}</div>
<div class="box1-item-right">
{{
"特定外国制造的半导体器件及其下游产品和组件（Certain Foreign-Fabricated Semiconductor Devices, Products Containing the Same, and Components Thereof"
}}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查类别：" }}</div>
<div class="box1-item-right">{{ "专利侵权调查" }}</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "涉及专利：" }}</div>
<div class="box1-item-right">
{{ "注册专利号7745847、9093473、9147747、9184292" }}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "限制措施：" }}</div>
<div class="box1-item-right">{{ "有限排除令 、禁止令 " }}</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查领域：" }}</div>
<div class="box1-item-right1">
<div class="tag">{{ "半导体" }}</div>
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "案件进展：" }}</div>
<div class="box1-item-right2">
<div
class="box1-item-right2-item"
v-for="(item, index) in processList"
:key="index"
>
<div class="icon">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="time">{{ item.time }}</div>
<div class="title">{{ item.title }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">原告信息</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main">
<div class="box2-main-top">
<div class="left">
{{ "Lon" }}
</div>
<div class="right">
<div class="title">{{ "爱尔兰Longitude Licensing Ltd" }}</div>
<div class="info">{{ "爱尔兰半导体零件制造公司" }}</div>
</div>
</div>
<div class="box2-main-center">
{{
`Longitude Licensing Ltd. (“Longitude”) 是IPValue管理集团旗下企业，致力于在国际知识经济最活跃的领域开展业务。
公司总部位于爱尔兰共和国都柏林，以成为领先的知识产权管理公司为愿景，专注于为全球专利持有人实现专利知识产权价值最大化。自2013年7月成立以来，经度公司目前已获得知名科技企业授权，管理着总计超过8,000项有效专利和专利申请的组合。这些专利组合涵盖半导体设计与制造工艺、非易失性存储技术、显示技术及消费电子技术。我们计划将合作伙伴关系与许可活动拓展至相关技术领域。`
}}
</div>
<div class="box2-main-footer">
<div class="box2-main-footer-left">
<img src="./assets/images/footer-icon1.png" alt="" />
</div>
<div class="box2-main-footer-center">
{{
'Pantech是韩国的一家通信设备公司，曾经是手机制造商，但现在可能已转型为专利持有实体。这类公司常被称为"非执业实体"(NPE)或"专利断言实体"(PAE)，通过专利授权和诉讼获取收益。这些企业曾经是行业龙头，但因科技和市场形态巨变，加上自身改革步伐缓慢，经营状况每况愈下。卖掉实体业务部门后，留下来的是高达几万件的专利。'
}}
</div>
<div class="box2-main-footer-right">
<img src="./assets/images/footer-icon2.png" alt="" />
</div>
</div>
</div>
</div>
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">被告信息</div>
<div class="header-info">
<div class="icon">
<img src="./assets/images/header-info-icon.png" alt="">
</div>
<div class="text">{{ '以下为列名被告企业及其关联公司' }}</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box3-main">
<div class="box3-main-box" v-for="item,index in caseList" :key="index">
<div class="box3-main-box-header">{{ item.title }}</div>
<div class="box3-main-box-content">
<div class="content-item" v-for="val,idx in caseList[index].companyList" :key="idx">
<div class="icon">
<img :src="val.logo" alt="">
</div>
<div class="text">{{ val.name }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Logo1 from "./assets/images/logo1.png";
import Logo2 from "./assets/images/logo2.png";
import Logo3 from "./assets/images/logo3.png";
import Logo4 from "./assets/images/logo4.png";
import Logo5 from "./assets/images/logo5.png";
import Logo6 from "./assets/images/logo6.png";
const processList = ref([
{
time: "2025-02-18",
title: "申请立案"
},
{
time: "2025-03-21",
title: "立案"
},
{
time: "2025-08-14",
title: "部分仲裁"
},
{
time: "2025-09-18",
title: "部分终裁"
}
]);
const caseList = ref([
{
title: "一加(OnePlus)及相关企业",
companyList: [
{
name: "深圳市万普拉斯科技有限公司 (中国广东)",
logo: Logo1
},
{
name: "OnePlus USA Corp. (美国德州欧文)",
logo: Logo1
}
]
},
{
title: "联想(Lenovo)及相关企业",
companyList: [
{
name: "联想集团 (中国北京)",
logo: Logo2
},
{
name: "Lenovo (United States) Inc. (美国北卡罗来纳州)",
logo: Logo2
},
{
name: "Motorola Mobility LLC (美国伊利诺伊州)",
logo: Logo2
}
]
},
{
title: "TCL及相关企业",
companyList: [
{
name: "TCL实业控股股份有限公司 (中国广东)",
logo: Logo3
},
{
name: "TCL Electronics Holdings Ltd. (中国香港)",
logo: Logo3
},
{
name: "TCL Communication Ltd. (中国香港)",
logo: Logo3
},
{
name: "TCL Communication Ltd. (中国香港)",
logo: Logo3
},
{
name: "TCL Communication Technology Holdings Ltd. (中国广东)",
logo: Logo3
},
{
name: "TCL Mobile International Ltd. (中国香港)",
logo: Logo3
},
{
name: "惠州TCL移动通信有限公司 (中国广东)",
logo: Logo3
},
{
name: "TCL Mobile Communication (HK) Company Ltd. (中国香港)",
logo: Logo3
}
]
},
{
title: "其他相关企业",
companyList: [
{
name: "Tinno USA, Inc. (美国德州普莱诺)",
logo: Logo4
},
{
name: "深圳市天珑移动技术有限公司 (中国广东)",
logo: Logo5
},
{
name: "HMD Global (芬兰)",
logo: Logo6
},
{
name: "HMD Global OY (芬兰)",
logo: Logo6
},
{
name: "HMD America, Inc. (美国佛罗里达州迈阿密)",
logo: Logo6
}
]
}
]);
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
height: 1191px;
padding: 0 160px;
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 16px;
height: 24px;
line-height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-info {
height: 22px;
position: absolute;
right: 84px;
top: 17px;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 3px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.left {
width: 520px;
.box1 {
margin-top: 16px;
width: 520px;
height: 837px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
margin-top: 6px;
margin-left: 22px;
.box1-item {
display: flex;
margin-bottom: 16px;
.box1-item-left {
width: 100px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
margin-top: 3px;
margin-bottom: 3px;
}
.box1-item-right {
width: 346px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.box1-item-right1 {
.tag {
margin-top: 3px;
margin-bottom: 3px;
height: 24px;
box-sizing: border-box;
border: 1px solid rgba(135, 232, 222, 1);
border-radius: 4px;
background: rgba(230, 255, 251, 1);
line-height: 24px;
text-align: center;
padding: 0 8px;
color: rgba(19, 168, 168, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
.box1-item-right2 {
.box1-item-right2-item {
width: 332px;
height: 36px;
display: flex;
.icon {
width: 10px;
height: 10px;
margin-left: 17px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
}
}
.time {
height: 24px;
margin-left: 16px;
margin-top: 6px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.title {
height: 24px;
margin-left: 16px;
margin-top: 6px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
}
}
}
.right {
width: 1064px;
margin-left: 16px;
.box2 {
margin-top: 16px;
width: 1064px;
height: 410px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
.box2-main-top {
display: flex;
width: 1012px;
height: 69px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
margin: 0 auto;
.left {
width: 48px;
height: 48px;
text-align: center;
line-height: 48px;
background: rgba(231, 243, 255, 1);
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 700;
}
.right {
margin-left: 16px;
.title {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.info {
color: rgba(95, 101, 108, 1);
height: 24px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.box2-main-center {
width: 1012px;
margin: 0 auto;
margin-top: 13px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
height: 160px;
}
.box2-main-footer {
margin: 0 auto;
margin-top: 10px;
width: 1034px;
height: 88px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
box-sizing: border-box;
padding: 6px 12px;
display: flex;
.box2-main-footer-left {
width: 19px;
height: 20px;
margin-top: 22px;
img {
width: 100%;
height: 100%;
}
}
.box2-main-footer-center {
margin-top: 2px;
margin-left: 13px;
width: 941px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.box2-main-footer-right {
margin-left: 13px;
margin-top: 26px;
width: 24px;
height: 24px;
border-radius: 12px;
background: rgba(231, 243, 255, 1);
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
}
.box3 {
margin-top: 16px;
margin-bottom: 35px;
width: 1064px;
height: 714px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
margin-top: 1px;
margin-left: 24px;
margin-right: 27px;
.box3-main-box {
margin-bottom: 18px;
.box3-main-box-header {
height: 36px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 36px;
}
.box3-main-box-content {
padding-top: 13px;
display: flex;
flex-wrap: wrap;
.content-item {
display: flex;
height: 30px;
width: 50%;
margin-bottom: 11px;
.icon {
width: 24px;
height: 24px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 13px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue
浏览文件 @ 7ab5fe3e
<template>
<div class="wrapper">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">基本信息</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main">
<div class="box1-item">
<div class="box1-item-left">{{ "调查案号：" }}</div>
<div class="box1-item-right">{{ "337-TA-1443" }}</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "涉及产品：" }}</div>
<div class="box1-item-right">
{{
"特定外国制造的半导体器件及其下游产品和组件（Certain Foreign-Fabricated Semiconductor Devices, Products Containing the Same, and Components Thereof"
}}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查类别：" }}</div>
<div class="box1-item-right">{{ "专利侵权调查" }}</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "涉及专利：" }}</div>
<div class="box1-item-right">
{{ "注册专利号7745847、9093473、9147747、9184292" }}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "限制措施：" }}</div>
<div class="box1-item-right">{{ "有限排除令 、禁止令 " }}</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查领域：" }}</div>
<div class="box1-item-right1">
<div class="tag">{{ "半导体" }}</div>
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "案件进展：" }}</div>
<div class="box1-item-right2">
<div
class="box1-item-right2-item"
v-for="(item, index) in processList"
:key="index"
>
<div class="icon">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="time">{{ item.time }}</div>
<div class="title">{{ item.title }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">原告信息</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main">
<div class="box2-main-top">
<div class="left">
{{ "Lon" }}
</div>
<div class="right">
<div class="title">{{ "爱尔兰Longitude Licensing Ltd" }}</div>
<div class="info">{{ "爱尔兰半导体零件制造公司" }}</div>
</div>
</div>
<div class="box2-main-center">
{{
`Longitude Licensing Ltd. (“Longitude”) 是IPValue管理集团旗下企业，致力于在国际知识经济最活跃的领域开展业务。
公司总部位于爱尔兰共和国都柏林，以成为领先的知识产权管理公司为愿景，专注于为全球专利持有人实现专利知识产权价值最大化。自2013年7月成立以来，经度公司目前已获得知名科技企业授权，管理着总计超过8,000项有效专利和专利申请的组合。这些专利组合涵盖半导体设计与制造工艺、非易失性存储技术、显示技术及消费电子技术。我们计划将合作伙伴关系与许可活动拓展至相关技术领域。`
}}
</div>
<div class="box2-main-footer">
<div class="box2-main-footer-left">
<img src="./assets/images/footer-icon1.png" alt="" />
</div>
<div class="box2-main-footer-center">
{{
'Pantech是韩国的一家通信设备公司，曾经是手机制造商，但现在可能已转型为专利持有实体。这类公司常被称为"非执业实体"(NPE)或"专利断言实体"(PAE)，通过专利授权和诉讼获取收益。这些企业曾经是行业龙头，但因科技和市场形态巨变，加上自身改革步伐缓慢，经营状况每况愈下。卖掉实体业务部门后，留下来的是高达几万件的专利。'
}}
</div>
<div class="box2-main-footer-right">
<img src="./assets/images/footer-icon2.png" alt=""></img>
</div>
</div>
</div>
</div>
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">被告信息</div>
<div class="header-info">
<div class="icon">
<img src="./assets/images/header-info-icon.png" alt="">
</div>
<div class="text">{{ '以下为列名被告企业及其关联公司' }}</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box3-main">
<div class="box3-main-box" v-for="item,index in caseList" :key="index">
<div class="box3-main-box-header">{{ item.title }}</div>
<div class="box3-main-box-content">
<div class="content-item" v-for="val,idx in caseList[index].companyList" :key="idx">
<div class="icon">
<img :src="val.logo" alt="">
</div>
<div class="text">{{ val.name }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="overview-wrap">
<Discussion1 v-if="showSurvey ==='337'"></Discussion1>
<Discussion2 v-else-if="showSurvey ==='232'"></Discussion2>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, onMounted, computed } from "vue";
import Discussion1 from './337/index.vue'
import Discussion2 from './232/index.vue'
import { useRoute } from "vue-router";
import Logo1 from "./assets/images/logo1.png";
import Logo2 from "./assets/images/logo2.png";
import Logo3 from "./assets/images/logo3.png";
import Logo4 from "./assets/images/logo4.png";
import Logo5 from "./assets/images/logo5.png";
import Logo6 from "./assets/images/logo6.png";
const route = useRoute()
console.log('route',route.query.id)
const processList = ref([
{
time: "2025-02-18",
title: "申请立案"
},
{
time: "2025-03-21",
title: "立案"
},
{
time: "2025-08-14",
title: "部分仲裁"
},
{
time: "2025-09-18",
title: "部分终裁"
}
]);
const showSurvey = ref('')
onMounted(() => {
showSurvey.value = route.query.id
})
const caseList = ref([
{
title: "一加(OnePlus)及相关企业",
companyList: [
{
name: "深圳市万普拉斯科技有限公司 (中国广东)",
logo: Logo1
},
{
name: "OnePlus USA Corp. (美国德州欧文)",
logo: Logo1
}
]
},
{
title: "联想(Lenovo)及相关企业",
companyList: [
{
name: "联想集团 (中国北京)",
logo: Logo2
},
{
name: "Lenovo (United States) Inc. (美国北卡罗来纳州)",
logo: Logo2
},
{
name: "Motorola Mobility LLC (美国伊利诺伊州)",
logo: Logo2
}
]
},
{
title: "TCL及相关企业",
companyList: [
{
name: "TCL实业控股股份有限公司 (中国广东)",
logo: Logo3
},
{
name: "TCL Electronics Holdings Ltd. (中国香港)",
logo: Logo3
},
{
name: "TCL Communication Ltd. (中国香港)",
logo: Logo3
},
{
name: "TCL Communication Ltd. (中国香港)",
logo: Logo3
},
{
name: "TCL Communication Technology Holdings Ltd. (中国广东)",
logo: Logo3
},
{
name: "TCL Mobile International Ltd. (中国香港)",
logo: Logo3
},
{
name: "惠州TCL移动通信有限公司 (中国广东)",
logo: Logo3
},
{
name: "TCL Mobile Communication (HK) Company Ltd. (中国香港)",
logo: Logo3
}
]
},
{
title: "其他相关企业",
companyList: [
{
name: "Tinno USA, Inc. (美国德州普莱诺)",
logo: Logo4
},
{
name: "深圳市天珑移动技术有限公司 (中国广东)",
logo: Logo5
},
{
name: "HMD Global (芬兰)",
logo: Logo6
},
{
name: "HMD Global OY (芬兰)",
logo: Logo6
},
{
name: "HMD America, Inc. (美国佛罗里达州迈阿密)",
logo: Logo6
}
]
}
]);
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
height: 1191px;
padding: 0 160px;
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 16px;
height: 24px;
line-height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-info {
height: 22px;
position: absolute;
right: 84px;
top: 17px;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 3px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.left {
width: 520px;
.box1 {
margin-top: 16px;
width: 520px;
height: 837px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
margin-top: 6px;
margin-left: 22px;
.box1-item {
display: flex;
margin-bottom: 16px;
.box1-item-left {
width: 100px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
margin-top: 3px;
margin-bottom: 3px;
}
.box1-item-right {
width: 346px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.box1-item-right1 {
.tag {
margin-top: 3px;
margin-bottom: 3px;
height: 24px;
box-sizing: border-box;
border: 1px solid rgba(135, 232, 222, 1);
border-radius: 4px;
background: rgba(230, 255, 251, 1);
line-height: 24px;
text-align: center;
padding: 0 8px;
color: rgba(19, 168, 168, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
.box1-item-right2 {
.box1-item-right2-item {
width: 332px;
height: 36px;
display: flex;
.icon {
width: 10px;
height: 10px;
margin-left: 17px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
}
}
.time {
height: 24px;
margin-left: 16px;
margin-top: 6px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.title {
height: 24px;
margin-left: 16px;
margin-top: 6px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
}
}
}
.right {
width: 1064px;
margin-left: 16px;
.box2 {
margin-top: 16px;
width: 1064px;
height: 410px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
.box2-main-top {
display: flex;
width: 1012px;
height: 69px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
margin: 0 auto;
.left {
width: 48px;
height: 48px;
text-align: center;
line-height: 48px;
background: rgba(231, 243, 255, 1);
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 700;
}
.right {
margin-left: 16px;
.title {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.info {
color: rgba(95, 101, 108, 1);
height: 24px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.box2-main-center {
width: 1012px;
margin: 0 auto;
margin-top: 13px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
height: 160px;
}
.box2-main-footer {
margin: 0 auto;
margin-top: 10px;
width: 1034px;
height: 88px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
box-sizing: border-box;
padding: 6px 12px;
display: flex;
.box2-main-footer-left {
width: 19px;
height: 20px;
margin-top: 22px;
img {
width: 100%;
height: 100%;
}
}
.box2-main-footer-center {
margin-top: 2px;
margin-left: 13px;
width: 941px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.box2-main-footer-right {
margin-left: 13px;
margin-top: 26px;
width: 24px;
height: 24px;
border-radius: 12px;
background: rgba(231, 243, 255, 1);
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
}
.box3 {
margin-top: 16px;
margin-bottom: 35px;
width: 1064px;
height: 714px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
margin-top: 1px;
margin-left: 24px;
margin-right: 27px;
.box3-main-box {
margin-bottom: 18px;
.box3-main-box-header {
height: 36px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 36px;
}
.box3-main-box-content {
padding-top: 13px;
display: flex;
flex-wrap: wrap;
.content-item {
display: flex;
height: 30px;
width: 50%;
margin-bottom: 11px;
.icon {
width: 24px;
height: 24px;
margin-top: 3px;
img {
.overview-wrap {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 13px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论