Skip to content

R
risk-monitor
提交 93b74825 authored 作者: 张烨's avatar 张烨
浏览文件
操作

feat:市场准入限制-337和232增加功能板块

上级 302579c7
显示空白字符变更
内嵌 并排
正在显示 包含 1199 行增加 和 2878 行删除
src/views/marketAccessRestrictions/com/AiTips.vue 0 → 100644
浏览文件 @ 93b74825
<template>
<div class="view-box">
<div class="icon-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="">
</div>
<div class="tips-content">{{ props.tips }}</div>
<div class="icon-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="">
</div>
</div>
</template>
<script setup lang="ts" name="AiTips">
const props = defineProps({
tips: {
type: String,
default: ''
}
});
</script>
<style scoped lang="scss">
.view-box {
width: 100%;
display: flex;
align-items: center;
padding: 7px 12px;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.icon-left {
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.tips-content {
color: rgb(5, 95, 194);
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-left: 13px;
flex: 1;
}
.icon-right {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/com/RelatedEvent.vue 0 → 100644
浏览文件 @ 93b74825
<template>
<AnalysisBox :title="props.title" :showAllBtn="false" height="auto">
<div class="box-main">
<div v-for="(item, index) in props.listData" :key="index" class="box-item">
<div class="item-tag">行政令</div>
<div class="item-right">
<div class="item-head">
<div class="item-name one-line-ellipsis">{{ item.name }}</div>
<div class="item-time">{{ item.time }}</div>
</div>
<div class="item-text one-line-ellipsis">{{ item.text }}</div>
</div>
</div>
</div>
</AnalysisBox>
</template>
<script setup lang="ts" name="RelatedEvent">
const props = defineProps({
listData: {
type: Array as any,
default: () => ([])
},
title: {
type: String,
default: ""
}
})
</script>
<style scoped lang="scss">
.box-main {
padding: 0 16px 16px;
.box-item {
border-top: 1px solid var(--bg-black-5);
padding: 6px;
display: flex;
font-size: 16px;
font-family: Source Han Sans CN;
.item-tag {
width: 80px;
height: 28px;
line-height: 28px;
border-radius: 14px;
text-align: center;
margin-right: 16px;
margin-top: 7px;
color: var(--color-yellow-100);
background-color: var(--color-yellow-10);
}
.item-right {
width: 20px;
flex: auto;
line-height: 30px;
.item-head {
display: flex;
.item-name {
width: 20px;
flex: auto;
font-weight: bold;
color: var(--text-primary-80-color);
}
.item-time {
margin-left: 100px;
flex: none;
color: var(--text-primary-65-color);
}
}
.item-text {
color: var(--text-primary-65-color);
}
}
}
.box-item:last-child {
border-bottom: 1px solid var(--bg-black-5);
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/com/SurveyConclusion.vue 0 → 100644
浏览文件 @ 93b74825
<template>
<AnalysisBox :title="title" :showAllBtn="false" height="auto">
<el-empty v-if="!props.listData?.length" description="暂无数据" :image-size="200" />
<div v-else class="box-main">
<div class="data-list">
<div class="data-item" v-for="(item, index) in props.listData" :key="index">
<div class="item-head">
<div class="item-name">{{ item.title }}</div>
<div class="button-box">
<div class="button-icon">
<img src="../assets/icons/open.png" alt="" />
</div>
<div class="button-text">跳转原文</div>
</div>
</div>
<div class="item-down">
<div class="item-text" v-for="(text, num) in item.data" :key="num">{{ text }}</div>
</div>
</div>
</div>
<AiTips :tips="tips"></AiTips>
</div>
</AnalysisBox>
</template>
<script setup lang="ts" name="SurveyConclusion">
import AiTips from "@/views/marketAccessRestrictions/com/AiTips.vue";
const props = defineProps({
listData: {
type: Array as any,
default: () => ([])
},
title: {
type: String,
default: ""
},
tips: {
type: String,
default: ""
}
})
</script>
<style scoped lang="scss">
.box-main {
padding: 0 22px 20px;
.data-list {
margin-bottom: 16px;
border-top: 1px solid rgba(234, 236, 238, 1);
.data-item {
.item-head {
padding: 0 20px;
height: 48px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
background: rgba(247, 248, 249, 1);
display: flex;
align-items: center;
.item-name {
width: 20px;
flex: auto;
font-family: Source Han Sans CN;
font-size: 18px;
font-weight: bold;
line-height: 30px;
color: var(--text-primary-80-color);
}
.button-box {
display: flex;
align-items: center;
margin-left: 50px;
.button-icon {
width: 16px;
height: 16px;
font-size: 0;
margin-right: 4px;
img {
width: 100%;
height: 100%;
}
}
.button-text {
color: var(--color-primary-100);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 12px;
}
}
}
.item-text {
letter-spacing: 1px;
padding: 12px 20px 12px 40px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/com/SurveyHistory.vue 0 → 100644
浏览文件 @ 93b74825
<template>
<div class="view-box">
<el-empty v-if="!props.surveyList?.length" description="当前条件下暂无数据" :image-size="200" />
<div class="timeline-item" v-for="(item, index) in props.surveyList" :key="item.searchid" @click="onNavigateToDetail(item)">
<div class="timeline-date">
<div class="date-text">{{ item.searchdatezh.slice(0,4) }}</div>
<div class="date-text">{{ item.searchdatezh.slice(5) }}</div>
</div>
<div class="timeline-line-box">
<div class="timeline-icon">
<img v-if="item.sortimageurl" :src="item.sortimageurl" alt="" />
<div v-else class="default-dot"></div>
</div>
<div class="timeline-line" v-if="index !== props.surveyList.length - 1"></div>
</div>
<div class="timeline-content-card">
<div class="item-head">
<div :class="`item-tag tag-${item.sortcode}`">{{ item.sortcode }}</div>
<div class="item-name">{{ item.searchname }}</div>
<div class="item-state">
<span class="dot">•</span> {{ item.casestatus }}
</div>
</div>
<div class="card-body">
{{ item.content }}
</div>
<div class="card-footer">
<div class="footer-left-tags">
<AreaTag v-for="(name, num) in item.searchArea" :key="num" :tagName="name"></AreaTag>
</div>
<div class="footer-right-flags">
<div class="flag-icon" v-for="(name, num) in item.countryImage" :key="num">
<img :src="name" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup name="SurveyHistory">
import router from "@/router";
const props = defineProps({
surveyList: {
type: Array,
default: () => ([]),
},
})
const onNavigateToDetail = item => {
window.sessionStorage.setItem("curTabName", item.searchname);
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: { id: item.sortcode, searchId: item.searchid }
});
window.open(curRoute.href, "_blank");
};
</script>
<style scoped lang="scss">
.view-box {
min-height: 600px;
width: 100%;
padding: 18px 27px 0 24px;
border-top: 1px solid rgba(234, 236, 238, 1);
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.timeline-item {
display: flex;
cursor: pointer;
.timeline-date {
width: 80px;
text-align: right;
margin-right: 16px;
.date-text {
height: 24px;
font-size: 16px;
font-weight: 700;
color: var(--color-main-active);
line-height: 24px;
letter-spacing: 1px;
}
}
.timeline-line-box {
width: 40px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.timeline-icon {
width: 32px;
height: 32px;
z-index: 2;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
img {
width: 100%;
height: 100%;
}
.default-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: orange;
}
}
.timeline-line {
width: 2px;
flex: 1;
background: #eaeeef;
margin: 4px 0;
}
}
.timeline-content-card {
width: 20px;
flex: auto;
padding: 2px 16px 0;
margin-bottom: 30px;
&:hover .item-head .item-name {
color: var(--color-main-active);
text-decoration: underline;
}
.item-head {
display: flex;
align-items: center;
margin-bottom: 10px;
.item-tag {
width: 48px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 4px;
font-weight: bold;
font-size: 16px;
margin-right: 12px;
}
.tag-337 {
border: 1px solid #91caff;
background: #e6f4ff;
color: #055fc2;
}
.tag-232 {
border: 1px solid #b37feb;
background: #f9f0ff;
color: #722ed1;
}
.tag-301 {
border: 1px solid #ffd591;
background: #fff7e6;
color: #fa8c16;
}
.item-name {
font-size: 18px;
line-height: 18px;
font-weight: bold;
color: #3b414b;
width: 20px;
flex: auto;
}
.item-state {
font-size: 16px;
color: #84888e;
color: var(--color-main-active);
margin-left: 100px;
}
}
.card-body {
font-size: 16px;
color: #5f656c;
line-height: 30px;
margin-bottom: 8px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.card-footer {
display: flex;
gap: 8px;
align-items: center;
.footer-left-tags {
display: flex;
gap: 8px;
.area-tag {
padding: 2px 12px;
background: #e6f7ff;
border: 1px solid #91d5ff;
color: #1890ff;
border-radius: 4px;
font-size: 14px;
}
}
.footer-right-flags {
display: flex;
gap: 4px;
.flag-icon {
width: 12px;
height: 24px;
img {
border-radius: 50%;
border: 1px solid #eee;
width: 24px;
height: 100%;
object-fit: cover;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ 93b74825
...@@ -8,8 +8,7 @@ ...@@ -8,8 +8,7 @@
placeholder="搜索市场准入限制调查" :containerRef="containerRef" areaName="" /> placeholder="搜索市场准入限制调查" :containerRef="containerRef" areaName="" />
</div> </div>
<div class="home-main-header-card-box"> <div class="home-main-header-card-box">
<div class="home-main-header-card-box-box1 card" v-for="item in sortInfo" :key="item.sortCode" <div :class="getCardClass(item.sortCode)" v-for="item in sortInfo" :key="item.sortCode" @click="onNavigateToCase(item)">
@click="onNavigateToCase(item.sortCode, item.sortName)">
<div class="header"> <div class="header">
<div class="header-left">{{ item.sortName }}</div> <div class="header-left">{{ item.sortName }}</div>
<div class="header-right">{{ `${item.sortCount}项` }}</div> <div class="header-right">{{ `${item.sortCount}项` }}</div>
...@@ -21,32 +20,6 @@ ...@@ -21,32 +20,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="home-main-header-card-box-box2 card"
@click="onNavigateToCase(sortInfo[2]?.sortCode, sortInfo[2]?.sortName)">
<div class="header">
<div class="header-left">{{ sortInfo[2]?.sortName }}</div>
<div class="header-right">{{ `${sortInfo[2]?.sortCount}项` }}</div>
</div>
<div class="content-box">
<div class="item">{{ sortInfo[2]?.sortMeasure }}</div>
<div class="item">
{{ sortInfo[2]?.sortDescription }}
</div>
</div>
</div>
<div class="home-main-header-card-box-box3 card"
@click="onNavigateToCase(sortInfo[0]?.sortCode, sortInfo[0]?.sortName)">
<div class="header">
<div class="header-left">{{ sortInfo[0]?.sortName }}</div>
<div class="header-right">{{ `${sortInfo[0]?.sortCount}项` }}</div>
</div>
<div class="content-box">
<div class="item">{{ sortInfo[0]?.sortMeasure }}</div>
<div class="item">
{{ sortInfo[0]?.sortDescription }}
</div>
</div>
</div> -->
</div> </div>
</div> </div>
<div class="home-main-center"> <div class="home-main-center">
...@@ -55,7 +28,7 @@ ...@@ -55,7 +28,7 @@
<div class="box1"> <div class="box1">
<overviewMainBox title="调查进展" @toDetail="handleClickToDetail()"> <overviewMainBox title="调查进展" @toDetail="handleClickToDetail()">
<template #header-icon> <template #header-icon>
<img style="width: 100%; height: 100%" src="./assets/icons/icon1.svg" alt="" /> <img style="width: 100%; height: 100%" src="./assets/icons/icon_1599.png" alt="" />
</template> </template>
<div class="box1-left" @click="handleSwithCurSurvey('left')"> <div class="box1-left" @click="handleSwithCurSurvey('left')">
<LeftBtn /> <LeftBtn />
...@@ -325,51 +298,7 @@ ...@@ -325,51 +298,7 @@
</div> </div>
<div class="title">{{ "市场准入限制调查" }}</div> <div class="title">{{ "市场准入限制调查" }}</div>
</div> </div>
<SurveyHistory :surveyList="surveyInfoList"></SurveyHistory>
<div class="right-main">
<el-empty v-if="surveyInfoList.length === 0" description="当前条件下暂无数据" :image-size="200" />
<div v-else class="right-main-item" v-for="(item, index) in surveyInfoList" :key="index" @click="onNavigateToDetail(item)">
<div class="item-left">
<div class="item-left-item"> {{ formatDate(item.searchdate, 'year') }}</div>
<div class="item-left-item"> {{ formatDate(item.searchdate, 'date') }}</div>
</div>
<div class="item-center">
<div class="icon">
<img :src='item.sortimageurl' alt="" />
</div>
<div class="line" v-if="index !== surveyInfoList.length - 1"></div>
</div>
<div class="item-right">
<div class="item-right-header">
<div class="tag"
:class="{ tag1: item.sortcode === '337', tag2: item.sortcode === '301', tag3: item.sortcode === '232' }">
{{ item.sortcode }}</div>
<div class="title">{{ item.searchname }}</div>
<div class="status" v-if="item.casestatus">
<div class="status-icon"></div>
<div class="status-text">{{ item.casestatus }}</div>
</div>
</div>
<div class="item-right-content" v-if="item.content">
{{ item.content }}
</div>
<div class="item-right-footer">
<!-- <div class="area-box" v-for="(val, idx) in item.searchArea" :key="idx">
<div class="area">{{ val }}</div>
</div> -->
<div class="area-box" v-if="item.searchArea.length">
<AreaTag v-for="(val, idx) in item.searchArea" :key="idx" :tagName="val"></AreaTag>
</div>
<div class="flag-box">
<div class="flag" v-for="(vall, idxx) in item.countryImage" :key="idxx">
<img :src="vall" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-footer"> <div class="right-footer">
<div class="footer-left"> <div class="footer-left">
{{ `共 ${totalDiscussNum} 项` }} {{ `共 ${totalDiscussNum} 项` }}
...@@ -396,6 +325,7 @@ import TipTab from "@/components/base/TipTab/index.vue" ...@@ -396,6 +325,7 @@ import TipTab from "@/components/base/TipTab/index.vue"
import MessageBubble from "@/components/base/messageBubble/index.vue" import MessageBubble from "@/components/base/messageBubble/index.vue"
import NewsList from "@/components/base/newsList/index.vue"; import NewsList from "@/components/base/newsList/index.vue";
import DivideHeader from "@/components/DivideHeader.vue"; import DivideHeader from "@/components/DivideHeader.vue";
import SurveyHistory from "@/views/marketAccessRestrictions/com/SurveyHistory.vue"
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
import router from "@/router"; import router from "@/router";
...@@ -422,6 +352,9 @@ import { ...@@ -422,6 +352,9 @@ import {
} from "@/api/marketAccessRestrictions/index"; } from "@/api/marketAccessRestrictions/index";
import { getRiskSignal, getNews, getRemarks } from "@/api/common/index"; import { getRiskSignal, getNews, getRemarks } from "@/api/common/index";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { useGotoNewsDetail } from '@/router/modules/news';
const getCardClass = (code) => ['card', `theme-${code}`]
const handleToPosi = id => { const handleToPosi = id => {
const element = document.getElementById(id); const element = document.getElementById(id);
...@@ -468,8 +401,9 @@ const handleGetStatSort = async () => { ...@@ -468,8 +401,9 @@ const handleGetStatSort = async () => {
try { try {
const res = await getStatSort(); const res = await getStatSort();
console.log("首页分类", res); console.log("首页分类", res);
// sortInfo.value = res.data.sort((a, b) => a.sortCode - b.sortCode);
sortInfo.value = res.data; sortInfo.value = res.data;
} catch (error) { } } catch (error) {}
}; };
// 调查进展 // 调查进展
...@@ -493,11 +427,11 @@ const handleClickToDetail = () => { ...@@ -493,11 +427,11 @@ const handleClickToDetail = () => {
}; };
// 跳转调查案件 // 跳转调查案件
const onNavigateToCase = (id, curTabName) => { const onNavigateToCase = (item) => {
window.sessionStorage.setItem("curTabName", curTabName); window.sessionStorage.setItem("curTabName", item.sortName);
const route = router.resolve({ const route = router.resolve({
path: "/marketAccessLayout", path: "/marketAccessLayout",
query: { id } query: { id: item.sortCode }
}); });
window.open(route.href, "_blank"); window.open(route.href, "_blank");
}; };
...@@ -543,14 +477,9 @@ const handleGetBox2Data = async () => { ...@@ -543,14 +477,9 @@ const handleGetBox2Data = async () => {
// 新闻资讯 // 新闻资讯
const newsList = ref([]); const newsList = ref([]);
// 获取新闻资讯列表
const handleGetBox3Data = async () => { const handleGetBox3Data = async () => {
const params = {
moduleId: "0104"
};
try { try {
const res = await getNews(params); const res = await getNews({moduleId: "0104"});
console.log("新闻资讯", res); console.log("新闻资讯", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
newsList.value = res.data.map(item => { newsList.value = res.data.map(item => {
...@@ -562,26 +491,17 @@ const handleGetBox3Data = async () => { ...@@ -562,26 +491,17 @@ const handleGetBox3Data = async () => {
} }
} catch (error) { } } catch (error) { }
}; };
// 点击新闻条目，跳转到新闻分析页 // 查看新闻资讯详情
const gotoNewsDetail = useGotoNewsDetail()
const handleToNewsAnalysis = news => { const handleToNewsAnalysis = news => {
const route = router.resolve({ gotoNewsDetail(news.newsId)
path: "/newsAnalysis",
query: {
newsId: news.newsId
}
});
window.open(route.href, "_blank");
}; };
// 社交媒体 // 社交媒体
const messageList = ref([]); const messageList = ref([]);
const handleGetBox4Data = async () => { const handleGetBox4Data = async () => {
const params = {
moduleId: "0104"
};
try { try {
const res = await getRemarks(params); const res = await getRemarks({moduleId: "0104"});
console.log("社交媒体", res); console.log("社交媒体", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
messageList.value = res.data; messageList.value = res.data;
...@@ -1469,14 +1389,6 @@ onMounted(async () => { ...@@ -1469,14 +1389,6 @@ onMounted(async () => {
.card { .card {
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
}
.home-main-header-card-box-box1 {
width: 520px; width: 520px;
height: 142px; height: 142px;
background: #fff; background: #fff;
...@@ -1493,7 +1405,6 @@ onMounted(async () => { ...@@ -1493,7 +1405,6 @@ onMounted(async () => {
top: 15px; top: 15px;
width: 4px; width: 4px;
height: 111px; height: 111px;
background: rgba(250, 140, 22, 1);
} }
.header { .header {
...@@ -1515,7 +1426,6 @@ onMounted(async () => { ...@@ -1515,7 +1426,6 @@ onMounted(async () => {
margin-top: 28px; margin-top: 28px;
margin-right: 35px; margin-right: 35px;
height: 24px; height: 24px;
color: rgba(250, 140, 22, 1);
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-size: 30px; font-size: 30px;
font-weight: 700; font-weight: 700;
...@@ -1540,143 +1450,40 @@ onMounted(async () => { ...@@ -1540,143 +1450,40 @@ onMounted(async () => {
white-space: nowrap; white-space: nowrap;
} }
} }
}
.home-main-header-card-box-box2 { &:hover {
width: 520px; transform: translateY(-3px);
height: 142px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
background: #fff; }
border-radius: 10px; }
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
position: relative;
cursor: pointer;
// &:hover { .theme-301 {
// margin-top: -2px;
// }
&::before { &::before {
content: ""; background: rgba(250, 140, 22, 1);
position: absolute;
z-index: 99;
left: 0;
top: 15px;
width: 4px;
height: 111px;
background: rgba(114, 46, 209, 1);
} }
.header { .header {
height: 56px;
display: flex;
justify-content: space-between;
.header-left {
margin-left: 30px;
margin-top: 26px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.header-right { .header-right {
margin-top: 28px; color: rgba(250, 140, 22, 1);
margin-right: 35px;
height: 24px;
color: rgba(114, 46, 209, 1);
font-family: Source Han Sans CN;
font-size: 30px;
font-weight: 700;
line-height: 24px;
} }
} }
.content-box {
margin-left: 30px;
.item {
width: 485px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.theme-232 {
&::before {
background: rgba(114, 46, 209, 1);
} }
.header {
.header-right {
color: rgba(114, 46, 209, 1);
} }
}
.home-main-header-card-box-box3 { }
width: 520px; .theme-337 {
height: 142px;
background: #fff;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
position: relative;
cursor: pointer;
// &:hover {
// margin-top: -3px;
// box-shadow: 0 0 5px 5px rgba(10, 87, 166, 0.1);
// }
&::before { &::before {
content: "";
position: absolute;
z-index: 99;
left: 0;
top: 15px;
width: 4px;
height: 111px;
background: var(--color-main-active); background: var(--color-main-active);
} }
.header { .header {
height: 56px;
display: flex;
justify-content: space-between;
.header-left {
margin-left: 30px;
margin-top: 26px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.header-right { .header-right {
margin-top: 28px;
margin-right: 35px;
height: 24px;
color: var(--color-main-active); color: var(--color-main-active);
font-family: Source Han Sans CN;
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
}
.content-box {
margin-left: 30px;
.item {
width: 485px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
} }
...@@ -2475,6 +2282,7 @@ onMounted(async () => { ...@@ -2475,6 +2282,7 @@ onMounted(async () => {
margin: 0 auto; margin: 0 auto;
margin-top: 34px; margin-top: 34px;
display: flex; display: flex;
align-items: flex-start;
gap: 16px; gap: 16px;
.left { .left {
...@@ -2560,7 +2368,6 @@ onMounted(async () => { ...@@ -2560,7 +2368,6 @@ onMounted(async () => {
.right-header { .right-header {
height: 48px; height: 48px;
display: flex; display: flex;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon { .icon {
width: 24px; width: 24px;
...@@ -2589,225 +2396,6 @@ onMounted(async () => { ...@@ -2589,225 +2396,6 @@ onMounted(async () => {
} }
} }
.right-main {
box-sizing: border-box;
padding: 18px 27px 0 24px;
height: calc(100% - 108px);
border-bottom: 1px solid rgba(230, 231, 232, 1);
.right-main-item {
height: 154px;
display: flex;
cursor: pointer;
height: max-content;
.item-left {
width: 100px;
height: 48px;
padding-right: 20px;
.item-left-item {
height: 24px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: right;
}
}
.item-center {
width: 30px;
.icon {
width: 30px;
height: 30px;
border-radius: 15px;
img {
width: 100%;
height: 100%;
}
}
.line {
height: 100%;
margin-left: 14px;
width: 2px;
min-height: 64px;
max-height: 124px;
border-radius: 1.5px;
background: rgba(234, 236, 238, 1);
}
}
.item-right {
padding-left: 20px;
&:hover {
.item-right-header>.title {
color: var(--color-main-active);
text-decoration: underline;
}
}
.item-right-header {
height: 26px;
display: flex;
align-items: center;
.tag {
width: 48px;
height: 24px;
padding: 0 8px;
box-sizing: border-box;
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
border-radius: 4px;
}
.tag1 {
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(5, 95, 194, 1);
}
.tag2 {
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.tag3 {
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1);
}
.title {
margin-left: 9px;
width: 880px;
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status {
margin-left: 9px;
display: flex;
width: 76px;
height: 24px;
justify-content: flex-end;
gap: 5px;
align-items: center;
.status-icon {
width: 4px;
height: 4px;
border-radius: 2px;
background: var(--color-main-active);
}
.status-text {
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: right;
}
}
}
.item-right-content {
margin-top: 9px;
width: 1022px;
height: 60px;
color: rgba(95, 101, 108, 1);
font-family: Source Han Sans CN;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
}
.item-right-footer {
width: 1022px;
height: 24px;
margin-top: 9px;
display: flex;
gap: 8px;
margin-bottom: 10px;
.area-box {
display: flex;
gap: 8px;
.area {
height: 24px;
padding: 0 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
.flag-box {
display: flex;
position: relative;
.flag {
width: 24px;
height: 24px;
border-radius: 12px;
border: 2px solid #fff;
overflow: hidden;
position: absolute;
img {
width: 100%;
height: 100%;
}
}
:nth-child(1) {
left: 18px;
z-index: 99;
}
}
}
}
}
}
.right-footer { .right-footer {
box-sizing: border-box; box-sizing: border-box;
padding-top: 15px; padding-top: 15px;
......
src/views/marketAccessRestrictions/marketAccessLayout/case/232/index.vue
浏览文件 @ 93b74825
...@@ -3,16 +3,7 @@ ...@@ -3,16 +3,7 @@
<div class="wrapper-header"> <div class="wrapper-header">
<div class="header-filters"> <div class="header-filters">
<div class="search-box"> <div class="search-box">
<el-input <el-input v-model="searchText" style="width: 360px; height: 32px" placeholder="搜索调查案件" @keyup.enter="handleSearch" :suffix-icon="Search"></el-input>
v-model="searchText"
style="width: 240px; height: 32px"
placeholder="搜索调查案件"
@keyup.enter="handleSearch"
>
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
</div> </div>
<div class="dropdown-filters"> <div class="dropdown-filters">
<el-select v-model="filterStage" placeholder="全部阶段" class="filter-select" clearable> <el-select v-model="filterStage" placeholder="全部阶段" class="filter-select" clearable>
...@@ -40,59 +31,31 @@ ...@@ -40,59 +31,31 @@
</div> </div>
<div class="wrapper-main"> <div class="wrapper-main">
<div class="left"> <div class="left">
<div class="left-box2"> <!-- 科技领域 -->
<div class="left-box2-header"> <div class="left-box">
<div class="left-header">
<div class="icon"></div> <div class="icon"></div>
<div class="title">{{ "科技领域" }}</div> <div class="title">{{ "科技领域" }}</div>
</div> </div>
<div class="left-box2-main"> <div class="left-main">
<div class="checkbox-group"> <el-checkbox-group class="checkbox-group" v-model="checkedAreaList" @change="handleCheckedAreasChange">
<el-checkbox <el-checkbox class="filter-checkbox" label="全部领域"> 全部领域 </el-checkbox>
v-model="checkAllAreas" <el-checkbox v-for="area in surveyAreaList" :key="area.id" :label="area.id" class="filter-checkbox">
:indeterminate="isIndeterminateAreas"
@change="handleCheckAllAreasChange"
class="filter-checkbox"
>
全部领域
</el-checkbox>
<div class="area-grid">
<el-checkbox
v-for="area in surveyAreaList"
:key="area.id"
v-model="checkedAreaList"
:label="area.id"
class="filter-checkbox"
@change="handleCheckedAreasChange"
>
{{ area.name }} {{ area.name }}
</el-checkbox> </el-checkbox>
</el-checkbox-group>
</div> </div>
</div> </div>
</div> <!-- 发布时间 -->
</div> <div class="left-box">
<div class="left-box1"> <div class="left-header">
<div class="left-box1-header">
<div class="icon"></div> <div class="icon"></div>
<div class="title">{{ "发布时间" }}</div> <div class="title">{{ "发布时间" }}</div>
</div> </div>
<div class="left-box1-main"> <div class="left-main">
<div class="checkbox-group"> <el-checkbox-group class="checkbox-group" v-model="checkedSurveyYears" @change="handleCheckedYearsChange">
<el-checkbox <el-checkbox class="filter-checkbox" label="全部时间"> 全部时间 </el-checkbox>
v-model="checkAllYears" <el-checkbox v-for="year in displayedYearList" :key="year.id" :label="year.id" class="filter-checkbox">
:indeterminate="isIndeterminateYears"
@change="handleCheckAllYearsChange"
class="filter-checkbox"
>
全部时间
</el-checkbox>
<el-checkbox
v-for="year in displayedYearList"
:key="year.id"
v-model="checkedSurveyYears"
:label="year.id"
class="filter-checkbox"
@change="handleCheckedYearsChange"
>
{{ year.name }} {{ year.name }}
</el-checkbox> </el-checkbox>
<div v-if="surveyYearList.length > 6" class="expand-btn" @click="isYearExpanded = !isYearExpanded"> <div v-if="surveyYearList.length > 6" class="expand-btn" @click="isYearExpanded = !isYearExpanded">
...@@ -102,7 +65,7 @@ ...@@ -102,7 +65,7 @@
<ArrowDown v-else /> <ArrowDown v-else />
</el-icon> </el-icon>
</div> </div>
</div> </el-checkbox-group>
</div> </div>
</div> </div>
</div> </div>
...@@ -113,44 +76,7 @@ ...@@ -113,44 +76,7 @@
</div> </div>
<div class="title">{{ "232调查历程" }}</div> <div class="title">{{ "232调查历程" }}</div>
</div> </div>
<div class="right-main" v-loading="listLoading"> <SurveyHistory v-loading="listLoading" :surveyList="surveyInfoList"></SurveyHistory>
<div
class="timeline-item"
v-for="(item, index) in surveyInfoList"
:key="index"
@click="handleToSingleCase(item)"
>
<div class="timeline-date">
<div class="date-text">{{ item.timeZH || item.time }}</div>
</div>
<div class="timeline-line-box">
<div class="timeline-icon">
<img v-if="item.sortImageUrl" :src="item.sortImageUrl" alt="" />
<div v-else class="default-dot"></div>
</div>
<div class="timeline-line" v-if="index !== surveyInfoList.length - 1"></div>
</div>
<div class="timeline-content-card">
<div class="card-header">
<div class="tag-box">
<div class="tag-232">{{ item.tag }}</div>
<div class="title">{{ item.title }}</div>
</div>
<div class="status" :class="{ 'status-active': item.status === '调查中' }">
<span class="dot">•</span> {{ item.status }}
</div>
</div>
<div class="card-body">
{{ item.content }}
</div>
<div class="card-footer">
<div class="area-tag" v-for="(area, idx) in item.areaList" :key="idx">
{{ area }}
</div>
</div>
</div>
</div>
</div>
<div class="right-footer"> <div class="right-footer">
<div class="footer-left"> <div class="footer-left">
{{ `共${totalDiscussNum}项调查` }} {{ `共${totalDiscussNum}项调查` }}
...@@ -173,12 +99,9 @@ ...@@ -173,12 +99,9 @@
<script setup> <script setup>
import { ref, onMounted, watch, computed } from "vue"; import { ref, onMounted, watch, computed } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue"; import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { getSearchAllArea, getSearchAllYear, getSurveyList } from "@/api/marketAccessRestrictions"; import { getSearchAllArea, getSearchAllYear, getSurveyList } from "@/api/marketAccessRestrictions";
import SurveyHistory from "@/views/marketAccessRestrictions/com/SurveyHistory.vue"
const route = useRoute();
// 顶部过滤项 // 顶部过滤项
const searchText = ref(""); const searchText = ref("");
...@@ -255,19 +178,7 @@ const handleFetchSurveyList = async () => { ...@@ -255,19 +178,7 @@ const handleFetchSurveyList = async () => {
}; };
const res = await getSurveyList(params); const res = await getSurveyList(params);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
surveyInfoList.value = res.data.content.map(item => { surveyInfoList.value = res.data.content;
return {
time: item.SEARCHDATE,
timeZH: item.SEARCHDATEZH,
title: item.SEARCHNAME,
content: item.SEARCHDESC || item.SEARCHNAME,
status: item.CASESTATUS || "调查中",
areaList: item.searchArea || [],
tag: item.SORTCODE || "232",
id: item.SEARCHID,
sortImageUrl: item.SORTIMAGEURL
};
});
totalDiscussNum.value = res.data.totalElements || 0; totalDiscussNum.value = res.data.totalElements || 0;
} }
} catch (error) { } catch (error) {
...@@ -287,17 +198,6 @@ const handleSearch = () => { ...@@ -287,17 +198,6 @@ const handleSearch = () => {
handleFetchSurveyList(); handleFetchSurveyList();
}; };
const handleToSingleCase = item => {
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "232",
searchId: item.id + ""
}
});
window.open(curRoute.href, "_blank");
};
// 监听过滤条件 // 监听过滤条件
watch([checkedSurveyYears, checkedAreaList, isSort, filterStage, filterParty, filterReason], () => { watch([checkedSurveyYears, checkedAreaList, isSort, filterStage, filterParty, filterReason], () => {
if (isInitializing.value) return; if (isInitializing.value) return;
...@@ -343,7 +243,7 @@ onMounted(async () => { ...@@ -343,7 +243,7 @@ onMounted(async () => {
.case-wrapper { .case-wrapper {
width: 1600px; width: 1600px;
margin: 0 auto; margin: 0 auto;
padding-top: 20px; padding: 20px 0;
.wrapper-header { .wrapper-header {
height: 32px; height: 32px;
...@@ -357,6 +257,12 @@ onMounted(async () => { ...@@ -357,6 +257,12 @@ onMounted(async () => {
gap: 16px; gap: 16px;
align-items: center; align-items: center;
.search-box {
background-color: #fff;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
}
.dropdown-filters { .dropdown-filters {
display: flex; display: flex;
gap: 12px; gap: 12px;
...@@ -396,10 +302,10 @@ onMounted(async () => { ...@@ -396,10 +302,10 @@ onMounted(async () => {
.wrapper-main { .wrapper-main {
display: flex; display: flex;
justify-content: space-between; gap: 16px;
.left { .left {
width: 300px; width: 360px;
min-height: 560px; min-height: 560px;
height: fit-content; height: fit-content;
padding-bottom: 20px; padding-bottom: 20px;
...@@ -407,19 +313,20 @@ onMounted(async () => { ...@@ -407,19 +313,20 @@ onMounted(async () => {
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: #fff; background: #fff;
.left-box1, .left-box {
.left-box2 {
margin-top: 17px; margin-top: 17px;
.left-box1-header,
.left-box2-header { .left-header {
display: flex; display: flex;
align-items: center; align-items: center;
.icon { .icon {
width: 8px; width: 8px;
height: 16px; height: 16px;
background: var(--color-main-active); background: var(--color-main-active);
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
} }
.title { .title {
margin-left: 17px; margin-left: 17px;
color: var(--color-main-active); color: var(--color-main-active);
...@@ -431,16 +338,8 @@ onMounted(async () => { ...@@ -431,16 +338,8 @@ onMounted(async () => {
.checkbox-group { .checkbox-group {
padding: 10px 0 0 25px; padding: 10px 0 0 25px;
display: flex;
flex-direction: column;
.area-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
}
.filter-checkbox { .filter-checkbox {
width: 130px;
margin-bottom: 8px; margin-bottom: 8px;
height: 32px; height: 32px;
:deep(.el-checkbox__label) { :deep(.el-checkbox__label) {
...@@ -448,6 +347,7 @@ onMounted(async () => { ...@@ -448,6 +347,7 @@ onMounted(async () => {
color: #5f656c; color: #5f656c;
} }
} }
.expand-btn { .expand-btn {
color: var(--color-main-active); color: var(--color-main-active);
font-size: 14px; font-size: 14px;
...@@ -455,6 +355,7 @@ onMounted(async () => { ...@@ -455,6 +355,7 @@ onMounted(async () => {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 4px; margin-top: 4px;
.el-icon { .el-icon {
margin-left: 4px; margin-left: 4px;
} }
...@@ -463,7 +364,8 @@ onMounted(async () => { ...@@ -463,7 +364,8 @@ onMounted(async () => {
} }
.right { .right {
width: 1284px; flex: auto;
width: 20px;
min-height: 700px; min-height: 700px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
...@@ -474,7 +376,6 @@ onMounted(async () => { ...@@ -474,7 +376,6 @@ onMounted(async () => {
height: 48px; height: 48px;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid #eaeeef;
padding: 0 20px; padding: 0 20px;
.icon { .icon {
width: 22px; width: 22px;
...@@ -490,136 +391,6 @@ onMounted(async () => { ...@@ -490,136 +391,6 @@ onMounted(async () => {
} }
} }
.right-main {
padding: 30px 40px;
.timeline-item {
display: flex;
cursor: pointer;
&:hover {
.timeline-content-card {
background-color: #f5f7fa;
}
}
.timeline-date {
width: 100px;
text-align: right;
padding-right: 20px;
.date-text {
font-size: 16px;
font-weight: 700;
color: var(--color-main-active);
line-height: 24px;
}
}
.timeline-line-box {
width: 40px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.timeline-icon {
width: 32px;
height: 32px;
z-index: 2;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
}
.default-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: orange;
}
}
.timeline-line {
width: 2px;
flex: 1;
background: #eaeeef;
margin: 4px 0;
}
}
.timeline-content-card {
flex: 1;
// border: 1px solid #eaeeef;
border-radius: 8px;
padding: 16px 20px;
margin-left: 10px;
margin-bottom: 24px;
transition: all 0.3s;
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.tag-box {
display: flex;
align-items: center;
gap: 12px;
.tag-232 {
padding: 2px 10px;
border: 1px solid #b37feb;
background: #f9f0ff;
color: #722ed1;
border-radius: 4px;
font-weight: 700;
font-size: 16px;
}
.title {
font-size: 18px;
font-weight: 700;
color: #3b414b;
}
}
.status {
font-size: 16px;
color: #84888e;
.dot {
margin-right: 4px;
}
}
.status-active {
color: var(--color-main-active);
}
}
.card-body {
font-size: 16px;
color: #5f656c;
line-height: 1.6;
margin-bottom: 16px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.card-footer {
display: flex;
gap: 8px;
.area-tag {
padding: 2px 12px;
background: #e6f7ff;
border: 1px solid #91d5ff;
color: #1890ff;
border-radius: 4px;
font-size: 14px;
}
}
}
}
}
.right-footer { .right-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
src/views/marketAccessRestrictions/marketAccessLayout/case/301/index.vue
浏览文件 @ 93b74825
...@@ -2,17 +2,7 @@ ...@@ -2,17 +2,7 @@
<div class="case-wrapper"> <div class="case-wrapper">
<div class="wrapper-header"> <div class="wrapper-header">
<div class="search-box"> <div class="search-box">
<el-input <el-input v-model="searchText" style="width: 360px; height: 32px" placeholder="搜索调查案件" @keyup.enter="handleSearch" :suffix-icon="Search"></el-input>
v-model="searchText"
style="width: 300px; height: 32px"
placeholder="搜索调查案件"
@keyup.enter="handleSearch"
>
<template #append
><el-button @click="handleSearch"
><el-icon><Search color="#84888E" /></el-icon></el-button
></template>
</el-input>
</div> </div>
<div class="select-box"> <div class="select-box">
<div class="paixu-btn" @click="handleSwithSort"> <div class="paixu-btn" @click="handleSwithSort">
...@@ -30,75 +20,44 @@ ...@@ -30,75 +20,44 @@
</div> </div>
<div class="wrapper-main"> <div class="wrapper-main">
<div class="left"> <div class="left">
<div class="left-box2"> <!-- 科技领域 -->
<div class="left-box2-header"> <div class="left-box">
<div class="left-header">
<div class="icon"></div> <div class="icon"></div>
<div class="title">{{ "科技领域" }}</div> <div class="title">{{ "科技领域" }}</div>
</div> </div>
<div class="left-box2-main"> <div class="left-main">
<div class="checkbox-group"> <el-checkbox-group class="checkbox-group" v-model="checkedAreaList" @change="handleCheckedAreasChange">
<el-checkbox <el-checkbox class="filter-checkbox" label="全部领域"> 全部领域 </el-checkbox>
v-model="checkAllAreas" <el-checkbox v-for="area in surveyAreaList" :key="area.id" :label="area.id" class="filter-checkbox">
:indeterminate="isIndeterminateAreas"
@change="handleCheckAllAreasChange"
class="filter-checkbox"
>
全部领域
</el-checkbox>
<el-checkbox
v-for="area in surveyAreaList"
:key="area.id"
v-model="checkedAreaList"
:label="area.id"
class="filter-checkbox"
@change="handleCheckedAreasChange"
>
{{ area.name }} {{ area.name }}
</el-checkbox> </el-checkbox>
</el-checkbox-group>
</div> </div>
</div> </div>
</div> <!-- 发布时间 -->
<div class="left-box1"> <div class="left-box">
<div class="left-box1-header"> <div class="left-header">
<div class="icon"></div> <div class="icon"></div>
<div class="title">{{ "发布时间" }}</div> <div class="title">{{ "发布时间" }}</div>
</div> </div>
<div class="left-box1-main"> <div class="left-main">
<div class="checkbox-group"> <el-checkbox-group class="checkbox-group" v-model="checkedSurveyYears" @change="handleCheckedYearsChange">
<el-checkbox <el-checkbox class="filter-checkbox" label="全部时间"> 全部时间 </el-checkbox>
v-model="checkAllYears" <el-checkbox v-for="year in displayedYearList" :key="year.id" :label="year.id" class="filter-checkbox">
:indeterminate="isIndeterminateYears"
@change="handleCheckAllYearsChange"
class="filter-checkbox"
>
全部时间
</el-checkbox>
<el-checkbox
v-for="year in displayedYearList"
:key="year.id"
v-model="checkedSurveyYears"
:label="year.id"
class="filter-checkbox"
@change="handleCheckedYearsChange"
>
{{ year.name }} {{ year.name }}
</el-checkbox> </el-checkbox>
<div <div v-if="surveyYearList.length > 6" class="expand-btn" @click="isYearExpanded = !isYearExpanded">
v-if="surveyYearList.length > 6"
class="expand-btn"
@click="isYearExpanded = !isYearExpanded"
>
{{ isYearExpanded ? "收起" : "更早" }} {{ isYearExpanded ? "收起" : "更早" }}
<el-icon> <el-icon>
<ArrowUp v-if="isYearExpanded" /> <ArrowUp v-if="isYearExpanded" />
<ArrowDown v-else /> <ArrowDown v-else />
</el-icon> </el-icon>
</div> </div>
</el-checkbox-group>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="right"> <div class="right">
<div class="right-header"> <div class="right-header">
<div class="icon"> <div class="icon">
...@@ -106,53 +65,11 @@ ...@@ -106,53 +65,11 @@
</div> </div>
<div class="title">{{ "301调查历程" }}</div> <div class="title">{{ "301调查历程" }}</div>
</div> </div>
<div class="right-main" v-loading="listLoading"> <SurveyHistory v-loading="listLoading" :surveyList="surveyInfoList"></SurveyHistory>
<div class="item" v-for="(item, index) in surveyInfoList" :key="index" @click="handleToSingleCase(item)">
<div class="item-left">{{ item.time }}</div>
<div class="item-center">
<div class="icon">
<!-- <img :src="item.img" alt="" /> -->
</div>
<div class="line" v-if="index !== surveyInfoList.length - 1"></div>
</div>
<div class="item-right">
<div class="item-right-header">
<div class="tag tag1">{{ item.tag }}</div>
<div class="title">{{ item.title }}</div>
<div class="status">
<div class="status-icon"></div>
<div class="status-text">{{ item.status }}</div>
</div>
</div>
<div class="item-right-content">
{{ item.content }}
</div>
<div class="item-right-footer">
<div class="area-box" v-for="(val, idx) in item.areaList" :key="idx">
<div class="area">{{ val }}</div>
</div>
<div class="flag-box">
<div class="flag" v-for="(vall, idxx) in item.countryList" :key="idxx">
<img :src="vall" alt="" style="width: 100%; height: 100%; border-radius: 50%;" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-footer"> <div class="right-footer">
<div class="footer-left"> <div class="footer-left">{{ `共 ${totalDiscussNum} 项` }}</div>
{{ `共 ${totalDiscussNum} 项` }}
</div>
<div class="footer-right"> <div class="footer-right">
<el-pagination <el-pagination @current-change="handleCurrentChange" :pageSize="pageSize" :current-page="currentPage" background layout="prev, pager, next" :total="totalDiscussNum" />
@current-change="handleCurrentChange"
:pageSize="pageSize"
:current-page="currentPage"
background
layout="prev, pager, next"
:total="totalDiscussNum"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -162,11 +79,9 @@ ...@@ -162,11 +79,9 @@
<script setup> <script setup>
import { ref, onMounted, watch, computed } from "vue"; import { ref, onMounted, watch, computed } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue"; import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { getSearchAllArea, getSearchAllYear, getSurveyList } from "@/api/marketAccessRestrictions"; import { getSearchAllArea, getSearchAllYear, getSurveyList } from "@/api/marketAccessRestrictions";
const route = useRoute(); import SurveyHistory from "@/views/marketAccessRestrictions/com/SurveyHistory.vue"
const isSort = ref(true); // true 升序 false 倒序 const isSort = ref(true); // true 升序 false 倒序
const handleSwithSort = () => { const handleSwithSort = () => {
...@@ -238,18 +153,7 @@ const handleFetchSurveyList = async () => { ...@@ -238,18 +153,7 @@ const handleFetchSurveyList = async () => {
}; };
const res = await getSurveyList(params); const res = await getSurveyList(params);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
surveyInfoList.value = res.data.content.map(item => { surveyInfoList.value = res.data.content;
return {
time: item.SEARCHDATEZH || item.SEARCHDATE,
title: item.SEARCHNAME,
content: item.SEARCHNAME, // 或者其他字段，API文档没给出具体描述字段，暂用名称
status: item.CASESTATUS,
areaList: item.searchArea || [],
countryList: item.countryImage || [],
tag: item.SORTCODE || "301",
id: item.SEARCHID
};
});
totalDiscussNum.value = res.data.totalElements || 0; totalDiscussNum.value = res.data.totalElements || 0;
} }
} catch (error) { } catch (error) {
...@@ -281,19 +185,6 @@ watch( ...@@ -281,19 +185,6 @@ watch(
} }
); );
const handleToSingleCase = item => {
console.log(item)
// router.push('/marketSingleCaseLayout/overview')
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: route.query.id + '',
searchId: item.id + ''
}
});
window.open(curRoute.href, "_blank");
};
const handleGetSearchAllArea = async () => { const handleGetSearchAllArea = async () => {
try { try {
const res = await getSearchAllArea({ const res = await getSearchAllArea({
...@@ -346,18 +237,20 @@ onMounted(async () => { ...@@ -346,18 +237,20 @@ onMounted(async () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.case-wrapper { .case-wrapper {
// width: 100%;
// height: 100%;
overflow: hidden;
.wrapper-header {
width: 1600px; width: 1600px;
margin: 0 auto;
padding: 20px 0;
.wrapper-header {
width: 100%;
height: 32px; height: 32px;
margin: 16px auto;
display: flex; display: flex;
margin-bottom: 16px;
justify-content: space-between; justify-content: space-between;
.search-box { .search-box {
width: 300px; background-color: #fff;
display: flex; border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
} }
.select-box { .select-box {
height: 32px; height: 32px;
...@@ -409,12 +302,11 @@ onMounted(async () => { ...@@ -409,12 +302,11 @@ onMounted(async () => {
} }
} }
} }
.wrapper-main { .wrapper-main {
width: 1600px;
// height: 900px;
margin: 0 auto;
display: flex; display: flex;
justify-content: space-between; gap: 16px;
.left { .left {
width: 360px; width: 360px;
min-height: 560px; min-height: 560px;
...@@ -422,58 +314,62 @@ onMounted(async () => { ...@@ -422,58 +314,62 @@ onMounted(async () => {
padding-bottom: 20px; padding-bottom: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1); background: #fff;
.left-box1 {
.left-box {
margin-top: 17px; margin-top: 17px;
// height: 260px;
.left-box1-header { .left-header {
display: flex; display: flex;
align-items: center;
.icon { .icon {
width: 8px; width: 8px;
height: 16px; height: 16px;
margin-top: 4px;
border-radius: 2px 2px 0 0;
background: var(--color-main-active); background: var(--color-main-active);
border-radius: 0 2px 2px 0;
} }
.title { .title {
height: 2px;
margin-left: 17px; margin-left: 17px;
color: var(--color-main-active); color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
line-height: 24px;
} }
} }
} }
.left-box2 {
margin-top: 17px; .checkbox-group {
.left-box2-header { padding: 10px 0 0 25px;
display: flex; .filter-checkbox {
.icon { width: 130px;
width: 8px; margin-bottom: 8px;
height: 16px; height: 32px;
margin-top: 4px; :deep(.el-checkbox__label) {
border-radius: 2px 2px 0 0; font-size: 16px;
background: var(--color-main-active); color: #5f656c;
} }
.title { }
height: 2px;
margin-left: 17px; .expand-btn {
color: var(--color-main-active); color: var(--color-main-active);
font-family: Microsoft YaHei; font-size: 14px;
font-size: 16px; cursor: pointer;
font-weight: 700; display: flex;
line-height: 24px; align-items: center;
margin-top: 4px;
.el-icon {
margin-left: 4px;
} }
} }
} }
} }
.right { .right {
margin-left: 16px; width: 20px;
width: 1224px; flex: auto;
min-height: 700px; min-height: 700px;
height: 770px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
...@@ -482,7 +378,6 @@ onMounted(async () => { ...@@ -482,7 +378,6 @@ onMounted(async () => {
height: 48px; height: 48px;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon { .icon {
width: 22px; width: 22px;
height: 18px; height: 18px;
...@@ -505,170 +400,6 @@ onMounted(async () => { ...@@ -505,170 +400,6 @@ onMounted(async () => {
text-align: left; text-align: left;
} }
} }
.right-main {
padding-top: 6px;
height: 660px;
border-bottom: 1px solid rgba(230, 231, 232, 1);
overflow: auto;
.item {
height: 154px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover) !important;
}
.item-left {
width: 100px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: right;
padding-right: 16px;
}
.item-center {
width: 30px;
height: 154px;
.icon {
width: 30px;
height: 30px;
border-radius: 15px;
background: orange;
}
.line {
margin-left: 14px;
width: 2px;
height: 124px;
border-radius: 1.5px;
background: rgba(234, 236, 238, 1);
}
}
.item-right {
padding-left: 20px;
.item-right-header {
height: 26px;
display: flex;
align-items: center;
.tag {
width: 48px;
height: 24px;
padding: 0 8px;
box-sizing: border-box;
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
border-radius: 4px;
}
.tag1 {
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(5, 95, 194, 1);
}
.tag2 {
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.tag3 {
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1);
}
.title {
margin-left: 9px;
width: 880px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.status {
margin-left: 9px;
display: flex;
width: 76px;
height: 24px;
justify-content: space-between;
align-items: center;
.status-icon {
width: 4px;
height: 4px;
border-radius: 2px;
background: var(--color-main-active);
}
.status-text {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: right;
}
}
}
.item-right-content {
margin-top: 9px;
width: 1022px;
height: 60px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
}
.item-right-footer {
margin-top: 9px;
display: flex;
gap: 8px;
.area-box {
display: flex;
.area {
height: 24px;
padding: 0 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
.flag-box {
display: flex;
.flag {
width: 24px;
height: 24px;
border-radius: 12px;
background: orange;
}
}
}
}
}
}
.right-footer { .right-footer {
box-sizing: border-box; box-sizing: border-box;
padding-top: 15px; padding-top: 15px;
...@@ -691,29 +422,4 @@ onMounted(async () => { ...@@ -691,29 +422,4 @@ onMounted(async () => {
} }
} }
} }
.checkbox-group{
padding-top: 10px;
margin-left: 16px;
.expand-btn {
width: 140px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-main-active);
font-size: 14px;
cursor: pointer;
user-select: none;
&:hover {
opacity: 0.8;
}
.el-icon {
margin-left: 4px;
}
}
}
.filter-checkbox {
width: 140px;
margin-bottom: 8px;
}
</style> </style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/case/337/index.vue
浏览文件 @ 93b74825
...@@ -45,7 +45,6 @@ ...@@ -45,7 +45,6 @@
{{ area.name }} {{ area.name }}
</el-checkbox> </el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</div> </div>
<!-- 发布时间 --> <!-- 发布时间 -->
...@@ -89,46 +88,7 @@ ...@@ -89,46 +88,7 @@
</div> </div>
<div class="right"> <div class="right">
<AnalysisBox title="337调查历程" width="1224px" height="auto"> <AnalysisBox title="337调查历程" width="1224px" height="auto">
<div class="right-main" v-loading="listLoading"> <SurveyHistory v-loading="listLoading" :surveyList="surveyInfoList"></SurveyHistory>
<div class="timeline-item" v-for="(item, index) in surveyInfoList" :key="index"
@click="handleToSingleCase(item)">
<div class="timeline-date">
<div class="date-text">{{ item.timeZH.slice(0,4) }}</div>
<div class="date-text">{{ item.timeZH.slice(5) }}</div>
</div>
<div class="timeline-line-box">
<div class="timeline-icon">
<img v-if="item.sortImageUrl" :src="item.sortImageUrl" alt="" />
<div v-else class="default-dot"></div>
</div>
<div class="timeline-line" v-if="index !== surveyInfoList.length - 1"></div>
</div>
<div class="timeline-content-card">
<div class="card-header">
<div class="tag-box">
<div class="tag-337">{{ item.tag }}</div>
<div class="title">{{ item.title }}</div>
</div>
<div class="status" :class="{ 'status-active': true }">
<span class="dot">•</span> {{ item.status }}
</div>
</div>
<div class="card-body">
{{ item.content }}
</div>
<div class="card-footer">
<div class="footer-left-tags">
<AreaTag v-for="(area, idx) in item.areaList" :key="idx" :tagName="area"></AreaTag>
</div>
<div class="footer-right-flags">
<div class="flag-icon" v-for="(flag, fidx) in item.countryList" :key="fidx">
<img :src="flag" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-footer"> <div class="right-footer">
<div class="footer-left">{{ `共${totalDiscussNum}项调查` }}</div> <div class="footer-left">{{ `共${totalDiscussNum}项调查` }}</div>
<div class="footer-right"> <div class="footer-right">
...@@ -144,14 +104,11 @@ ...@@ -144,14 +104,11 @@
<script setup> <script setup>
import { ref, onMounted, watch, computed } from "vue"; import { ref, onMounted, watch, computed } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue"; import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { getSearchAllArea, getSearchAllYear, getSurveyList, getSearchAllCountry } from "@/api/marketAccessRestrictions"; import { getSearchAllArea, getSearchAllYear, getSurveyList, getSearchAllCountry } from "@/api/marketAccessRestrictions";
import AnalysisBox from "@/components/base/boxBackground/analysisBox.vue" import AnalysisBox from "@/components/base/boxBackground/analysisBox.vue"
import SurveyHistory from "@/views/marketAccessRestrictions/com/SurveyHistory.vue"
const route = useRoute();
// 顶部过滤项 // 顶部过滤项
const searchText = ref(""); const searchText = ref("");
...@@ -255,22 +212,9 @@ const handleFetchSurveyList = async () => { ...@@ -255,22 +212,9 @@ const handleFetchSurveyList = async () => {
sortOrder: isSort.value ? "asc" : "desc" sortOrder: isSort.value ? "asc" : "desc"
}; };
const res = await getSurveyList(params); const res = await getSurveyList(params);
if (res.code === 200 && res.data) { if (res.code === 200) {
surveyInfoList.value = res.data.content.map(item => { surveyInfoList.value = res.data?.content || [];
return { totalDiscussNum.value = res.data?.totalElements || 0;
time: item.searchdate,
timeZH: item.searchdatezh,
title: item.searchname,
content: item.content,
status: item.casestatus,
areaList: item.searchArea || [],
countryList: item.countryImage || [],
tag: item.sortcode || "337",
id: item.searchid,
sortImageUrl: item.sortimageurl
};
});
totalDiscussNum.value = res.data.totalElements || 0;
} }
} catch (error) { } catch (error) {
console.error("获取调查列表失败", error); console.error("获取调查列表失败", error);
...@@ -289,17 +233,6 @@ const handleSearch = () => { ...@@ -289,17 +233,6 @@ const handleSearch = () => {
handleFetchSurveyList(); handleFetchSurveyList();
}; };
const handleToSingleCase = item => {
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "337",
searchId: item.id + ""
}
});
window.open(curRoute.href, "_blank");
};
// 监听过滤条件 // 监听过滤条件
watch( watch(
[checkedSurveyYears, checkedAreaList, checkedCountryList, isSort, filterStage, filterParty, filterReason], [checkedSurveyYears, checkedAreaList, checkedCountryList, isSort, filterStage, filterParty, filterReason],
...@@ -359,8 +292,7 @@ onMounted(async () => { ...@@ -359,8 +292,7 @@ onMounted(async () => {
.case-wrapper { .case-wrapper {
width: 1600px; width: 1600px;
margin: 0 auto; margin: 0 auto;
padding-top: 20px; padding: 20px 0;
padding-bottom: 35px;
.wrapper-header { .wrapper-header {
height: 32px; height: 32px;
...@@ -375,12 +307,10 @@ onMounted(async () => { ...@@ -375,12 +307,10 @@ onMounted(async () => {
align-items: center; align-items: center;
.search-box { .search-box {
:deep(.el-input__wrapper) {
background-color: #fff; background-color: #fff;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px; border-radius: 4px;
} }
}
.dropdown-filters { .dropdown-filters {
display: flex; display: flex;
...@@ -426,7 +356,7 @@ onMounted(async () => { ...@@ -426,7 +356,7 @@ onMounted(async () => {
.wrapper-main { .wrapper-main {
display: flex; display: flex;
justify-content: space-between; gap: 16px;
.left { .left {
width: 360px; width: 360px;
...@@ -462,21 +392,10 @@ onMounted(async () => { ...@@ -462,21 +392,10 @@ onMounted(async () => {
.checkbox-group { .checkbox-group {
padding: 10px 0 0 25px; padding: 10px 0 0 25px;
// display: flex;
// flex-direction: column;
// .area-grid,
// .year-grid,
// .country-grid {
// display: grid;
// grid-template-columns: repeat(2, 1fr);
// gap: 4px;
// }
.filter-checkbox { .filter-checkbox {
width: 130px;
margin-bottom: 8px; margin-bottom: 8px;
height: 32px; height: 32px;
:deep(.el-checkbox__label) { :deep(.el-checkbox__label) {
font-size: 16px; font-size: 16px;
color: #5f656c; color: #5f656c;
...@@ -499,204 +418,8 @@ onMounted(async () => { ...@@ -499,204 +418,8 @@ onMounted(async () => {
} }
.right { .right {
width: 1224px; flex: auto;
width: 20px;
.right-header {
height: 48px;
display: flex;
align-items: center;
padding: 0 20px;
.icon {
width: 22px;
img {
width: 100%;
}
}
.title {
margin-left: 12px;
font-size: 20px;
font-weight: 700;
color: var(--color-main-active);
}
}
.right-main {
padding: 18px 27px 0 24px;
border-top: 1px solid var(--bg-black-5);
.timeline-item {
display: flex;
cursor: pointer;
.timeline-date {
width: 100px;
text-align: right;
padding-right: 20px;
.date-text {
height: 24px;
font-size: 16px;
font-weight: 700;
color: var(--color-main-active);
line-height: 24px;
letter-spacing: 1px;
}
}
.timeline-line-box {
width: 40px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.timeline-icon {
width: 32px;
height: 32px;
z-index: 2;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
}
.default-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: orange;
}
}
.timeline-line {
width: 2px;
flex: 1;
background: #eaeeef;
margin: 4px 0;
}
}
.timeline-content-card {
flex: 1;
border-radius: 8px;
padding: 0 20px;
margin-left: 10px;
margin-bottom: 24px;
transition: all 0.3s;
&:hover {
.card-header>.tag-box>.title {
color: var(--color-main-active);
text-decoration: underline;
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.tag-box {
display: flex;
align-items: center;
gap: 12px;
.tag-337 {
padding: 2px 10px;
border: 1px solid #91caff;
background: #e6f4ff;
color: #055fc2;
border-radius: 4px;
font-weight: 700;
font-size: 16px;
}
.title {
font-size: 18px;
font-weight: 700;
color: #3b414b;
}
}
.status {
font-size: 16px;
color: #84888e;
.dot {
margin-right: 4px;
}
}
.status-active {
color: var(--color-main-active);
}
}
.card-body {
font-size: 16px;
color: #5f656c;
line-height: 1.6;
margin-bottom: 16px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.card-footer {
display: flex;
gap: 8px;
align-items: center;
.footer-left-tags {
display: flex;
gap: 8px;
.area-tag {
padding: 2px 12px;
background: #e6f7ff;
border: 1px solid #91d5ff;
color: #1890ff;
border-radius: 4px;
font-size: 14px;
}
}
.footer-right-flags {
display: flex;
gap: 4px;
.flag-icon {
width: 24px;
height: 24px;
border-radius: 50%;
overflow: hidden;
border: 1px solid #eee;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
}
}
}
.right-footer { .right-footer {
height: 74px; height: 74px;
...@@ -704,7 +427,6 @@ onMounted(async () => { ...@@ -704,7 +427,6 @@ onMounted(async () => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 40px; padding: 0 40px;
border-top: 1px solid rgba(234, 236, 238, 1);
.footer-left { .footer-left {
font-size: 14px; font-size: 14px;
...@@ -714,8 +436,4 @@ onMounted(async () => { ...@@ -714,8 +436,4 @@ onMounted(async () => {
} }
} }
} }
.filter-checkbox {
width: 130px;
}
</style> </style>
src/views/marketAccessRestrictions/marketAccessLayout/index.vue
浏览文件 @ 93b74825
<template> <template>
<div class="wrap"> <div class="page-box">
<div class="header"> <div class="page-top">
<div class="header-top"> <div class="head-box">
<div class="left"> <div class="head-icon">
<div class="icon">
<img :src="curSurvey.image" alt="" /> <img :src="curSurvey.image" alt="" />
</div> </div>
<div class="info"> <div class="head-info">
<div class="title">{{ curSurvey.title }}</div> <div class="head-name one-line-ellipsis">{{ curSurvey.title }}</div>
<div class="content"> <div class="head-text one-line-ellipsis">{{ curSurvey.desc }}</div>
{{ curSurvey.desc }}
</div>
</div> </div>
</div> <!-- <div class="head-button">
<!-- <div class="right"> <div class="button-icon">
<div class="icon">
<img src="./assets/images/button-icon.png" alt="" /> <img src="./assets/images/button-icon.png" alt="" />
</div> </div>
<div class="text">{{ "查看官网" }}</div> <div class="button-text">{{ "查看官网" }}</div>
</div> --> </div> -->
</div> </div>
<div class="header-footer"> <div class="page-tabs">
<div <div :class="['tab-item', {'tab-active': activeName==item.name}]" v-for="(item, index) in tabList" :key="index" @click="handleClickBtn(item)">
class="btn-item"
:class="{ btnItemActive: activeBtnName === item.name }"
v-for="(item, index) in btnList"
:key="index"
@click="handleClickBtn(item)"
>
<div class="icon"> <div class="icon">
<img :src="item.acitveIcon" alt="" v-if="activeBtnName === item.name" /> <img :src="item.activeIcon" alt="" v-if="activeName==item.name" />
<img :src="item.icon" alt="" v-else /> <img :src="item.icon" alt="" v-else />
</div> </div>
<div class="text" :class="{ textActive: activeBtnName === item.name }"> <div class="text" :class="{ textActive: activeName==item.name }">
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
...@@ -58,17 +48,17 @@ import Img301 from "./assets/images/301.png"; ...@@ -58,17 +48,17 @@ import Img301 from "./assets/images/301.png";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();
const btnList = ref([ const tabList = ref([
{ {
name: "调查案件", name: "调查案件",
icon: icon2, icon: icon2,
acitveIcon: icon2Active, activeIcon: icon2Active,
path: "/marketAccessLayout/case" path: "/marketAccessLayout/case"
}, },
{ {
name: "数据统计", name: "数据统计",
icon: icon1, icon: icon1,
acitveIcon: icon1Active, activeIcon: icon1Active,
path: "/marketAccessLayout/overview" path: "/marketAccessLayout/overview"
} }
]); ]);
...@@ -78,87 +68,80 @@ const curSurvey = computed(() => { ...@@ -78,87 +68,80 @@ const curSurvey = computed(() => {
return { return {
title: "301调查", title: "301调查",
desc: '由美国贸易代表办公室依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"发起的调查', desc: '由美国贸易代表办公室依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"发起的调查',
image: Img301 image: Img301,
}; };
} else if (route.query.id === "232") { } else if (route.query.id === "232") {
return { return {
title: "232调查", title: "232调查",
desc: "依据《1962年贸易扩展法》第232条款，授权美国商务部对“特定进口产品是否威胁或损害美国国家安全”而开展的全面调查。", desc: "依据《1962年贸易扩展法》第232条款，授权美国商务部对“特定进口产品是否威胁或损害美国国家安全”而开展的全面调查。",
image: Img232 image: Img232,
}; };
} else { } else {
return { return {
title: "337调查", title: "337调查",
desc: '美国国际贸易委员会根据《1930年关税法》第337节及相关修正案进行的调查，主要针对进口贸易中的知识产权侵权行为以及其他不公平竞争行为', desc: '美国国际贸易委员会根据《1930年关税法》第337节及相关修正案进行的调查，主要针对进口贸易中的知识产权侵权行为以及其他不公平竞争行为',
image: Img337 image: Img337,
}; };
} }
}); });
const activeBtnName = ref("调查案件"); const activeName = ref("调查案件");
const handleClickBtn = item => { const handleClickBtn = item => {
activeBtnName.value = item.name; activeName.value = item.name;
router.push({ router.push({
path: item.path, path: item.path,
query: { query: { id: route.query.id }
id: route.query.id
}
}); });
}; };
onMounted(() => { onMounted(() => {
if (route.path === "/marketAccessLayout/overview") { if (route.path === "/marketAccessLayout/overview") {
activeBtnName.value = "数据统计"; activeName.value = "数据统计";
} else { } else {
activeBtnName.value = "调查案件"; activeName.value = "调查案件";
} }
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .page-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #f7f8f9;
.header {
width: 1920px;
height: 148px;
box-sizing: border-box;
border-bottom: 1px solid rgba(230, 231, 232, 1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.header-top { .page-top {
display: flex; width: 1600px;
height: 100px; margin: 0 auto;
justify-content: space-between; box-sizing: border-box;
.left { .head-box {
margin-left: 160px; width: 100%;
margin-top: 24px;
display: flex; display: flex;
padding: 30px 0 20px;
.icon { .head-icon {
width: 54px; width: 54px;
height: 54px; height: 54px;
font-size: 0px;
margin-right: 16px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.info { .head-info {
margin-left: 14px; width: 20px;
margin-top: -1px; flex: auto;
.title { .head-name {
width: 100%;
height: 26px; height: 26px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: bold;
line-height: 26px; line-height: 26px;
} }
.content { .head-text {
margin-top: 1px; width: 100%;
height: 24px; height: 24px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -167,61 +150,54 @@ onMounted(() => { ...@@ -167,61 +150,54 @@ onMounted(() => {
line-height: 24px; line-height: 24px;
} }
} }
} .head-button {
.right { margin-left: 100px;
margin-top: 24px;
margin-right: 160px;
width: 120px; width: 120px;
height: 36px; height: 36px;
border-radius: 6px; border-radius: 6px;
background: var(--color-main-active); background: var(--color-main-active);
display: flex; display: flex;
justify-content: center;
align-items: center;
cursor: pointer; cursor: pointer;
.icon { .button-icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-left: 16px; font-size: 0;
margin-top: 10px;
position: relative;
z-index: 99;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.text { .button-text {
margin-left: 8px; margin-left: 8px;
margin-top: 7px;
height: 22px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 22px;
} }
} }
} }
.header-footer { .page-tabs {
height: 48px;
margin-left: 160px;
display: flex; display: flex;
gap: 24px; align-items: flex-start;
.btn-item { .tab-item {
height: 40px;
display: flex; display: flex;
align-items: center;
gap: 4px; gap: 4px;
cursor: pointer; cursor: pointer;
margin-right: 24px;
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-top: 16px; font-size: 0;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.text { .text {
margin-left: 2px;
margin-top: 12px;
height: 24px; height: 24px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -234,13 +210,24 @@ onMounted(() => { ...@@ -234,13 +210,24 @@ onMounted(() => {
font-weight: 700; font-weight: 700;
} }
} }
.btnItemActive { .tab-active {
border-bottom: 3px solid var(--color-main-active); position: relative;
&::after {
content: "";
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
height: 3px;
background-color: var(--color-main-active);
}
} }
} }
} }
.main { .main {
width: 1920px; border-top: 1px solid rgba(230, 231, 232, 1);
background-color: #f7f8f9;
width: 100%;
height: 20px; height: 20px;
flex: auto; flex: auto;
} }
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/232/index.vue
浏览文件 @ 93b74825
...@@ -201,13 +201,16 @@ onMounted(() => { ...@@ -201,13 +201,16 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
width: 100%; width: 1600px;
height: 100%; margin: 0 auto;
overflow: hidden; padding: 20px 0;
display: flex;
flex-direction: column;
gap: 16px;
.top { .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 16px 160px;
.item { .item {
width: 388px; width: 388px;
height: 80px; height: 80px;
...@@ -338,7 +341,6 @@ onMounted(() => { ...@@ -338,7 +341,6 @@ onMounted(() => {
.center { .center {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 160px;
.box1 { .box1 {
width: 792px; width: 792px;
height: 360px; height: 360px;
...@@ -364,7 +366,6 @@ onMounted(() => { ...@@ -364,7 +366,6 @@ onMounted(() => {
} }
} }
.footer { .footer {
margin: 16px 160px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.box3 { .box3 {
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/301/index.vue
浏览文件 @ 93b74825
<template> <template>
<div class="wrap"> <div class="wrap">
<!-- <div class="sider-tab-box">
<SiderTabs :siderList="siderTabList" @clickSiderItem="handleClickTabItem" />
</div> -->
<div class="top"> <div class="top">
<div class="box1 box" v-loading="box1Loading"> <div class="box1 box" v-loading="box1Loading">
<div class="box-header"> <div class="box-header">
...@@ -143,28 +140,6 @@ import getSankeyChart from "./utils/sankey"; ...@@ -143,28 +140,6 @@ import getSankeyChart from "./utils/sankey";
import getPieChart from "./utils/piechart"; import getPieChart from "./utils/piechart";
import getbarChart from "@/views/bill/utils/barchart"; import getbarChart from "@/views/bill/utils/barchart";
import { getSearchCountry, getStatArea, getStatNum, getSearchDirection } from "@/api/marketAccessRestrictions"; import { getSearchCountry, getStatArea, getStatNum, getSearchDirection } from "@/api/marketAccessRestrictions";
import SiderTabs from "@/components/base/SiderTabs/index.vue"
// const siderTabList = ref([
// {
// name: '分析内11111',
// active: false
// },
// {
// name: '分析内2',
// active: true
// },
// {
// name: '分析内3',
// active: false
// },
// ])
// const handleClickTabItem = (value) => {
// console.log('val',value);
// }
const selectYear = ref("2025"); const selectYear = ref("2025");
...@@ -339,14 +314,12 @@ onMounted(() => { ...@@ -339,14 +314,12 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
overflow: hidden; width: 1600px;
position: relative; margin: 0 auto;
padding: 20px 0;
.sider-tab-box{ display: flex;
position: absolute; flex-direction: column;
left: 20px; gap: 16px;
top: 20px;
}
.box { .box {
width: 792px; width: 792px;
...@@ -473,7 +446,6 @@ onMounted(() => { ...@@ -473,7 +446,6 @@ onMounted(() => {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 16px; gap: 16px;
margin: 16px auto;
.box1 { .box1 {
.box1-main { .box1-main {
...@@ -494,9 +466,6 @@ onMounted(() => { ...@@ -494,9 +466,6 @@ onMounted(() => {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 16px; gap: 16px;
margin: 0 auto;
margin-bottom: 16px;
.box3 { .box3 {
.box3-main { .box3-main {
height: 304px; height: 304px;
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/index.vue
浏览文件 @ 93b74825
...@@ -41,45 +41,6 @@ ...@@ -41,45 +41,6 @@
</div> </div>
<div class="footer"> <div class="footer">
<div class="box3" v-loading="box3Loading"> <div class="box3" v-loading="box3Loading">
<!-- <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 class="box3-footer">
<TipTab />
</div> -->
<AnalysisBox title="中国公司受调查情况"> <AnalysisBox title="中国公司受调查情况">
<template #header-btn> <template #header-btn>
<div class="header-btn-box"> <div class="header-btn-box">
...@@ -520,25 +481,16 @@ onMounted(() => { ...@@ -520,25 +481,16 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
width: 100%; width: 1600px;
overflow: hidden; margin: 0 auto;
position: relative; padding: 20px 0;
display: flex;
.graph-box { flex-direction: column;
position: absolute; gap: 16px;
top: 100px;
left: 100px;
width: 1000px;
height: 600px;
border-radius: 10px;
z-index: 9999;
background: #fff;
}
.top { .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 16px 160px;
.item { .item {
width: 388px; width: 388px;
...@@ -631,36 +583,6 @@ onMounted(() => { ...@@ -631,36 +583,6 @@ onMounted(() => {
font-weight: 700; font-weight: 700;
} }
// .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 var(--color-main-active);
// background: rgba(246, 250, 255, 1);
// color: var(--color-main-active);
// }
// }
.header-right { .header-right {
position: absolute; position: absolute;
top: 14px; top: 14px;
...@@ -684,7 +606,6 @@ onMounted(() => { ...@@ -684,7 +606,6 @@ onMounted(() => {
.center { .center {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 160px;
.box1 { .box1 {
width: 792px; width: 792px;
...@@ -717,7 +638,6 @@ onMounted(() => { ...@@ -717,7 +638,6 @@ onMounted(() => {
} }
.footer { .footer {
margin: 16px 160px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/232/index.vue
浏览文件 @ 93b74825
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="box1 box"> <AnalysisBox title="行业背景" :showAllBtn="false" height="auto">
<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">
<div class="box1-main-item" v-for="(bg, index) in bgList" :key="index"> <div class="data-list">
<!-- <div class="id">{{ index + 1 + "." }}</div> --> <div class="data-item" v-for="(bg, index) in bgList" :key="index">{{ bg.title }}</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>
<AiTips tips="钒作为被美国列为对经济与国家安全至关重要且供应链易受中断的关键矿产，广泛应用于国防、关键基础设施等多个领域，美国钒产业以二次生产为主、产业高度集中且依赖进口原料，同时通过征收反倾销税、加征关税及签订国际合作协议等方式管控钒进口。"></AiTips>
</div> </div>
</AnalysisBox>
<SurveyConclusion title="市场需求" :listData="demandList" tips="美国钒市场年均表观消费量约 8590 吨且进口依赖度超 80%，需求主要集中在钢铁产业（占 90%），钛产业和非冶金领域各占 5%，2020 年受新冠疫情冲击需求下滑；全球钒需求以钢铁产业为主（90%-93%），中国是最大消费国，航空航天领域需求稳定、钒液流电池为新兴增长点，化工领域提供稳定补充。"></SurveyConclusion>
<SurveyConclusion title="国内外供应情况" :listData="supplyList" tips="美国钒供应以二次生产为主、原生供应仅一家企业且已停产，存在潜在产能但需达到一定钒价才具经济性，原料进口依赖度高；全球钒产能集中在中国、俄罗斯等四国，中国主导供应，欧盟、南非等为主要出口方，美国进口来源集中且本土生产竞争力弱，多国规划新增产能有望大幅提升全球矿山产量。"></SurveyConclusion>
<SurveyConclusion title="未来产业格局" :listData="box4List" tips="美国钒产业短期将通过产能扩张提升自给率，中长期有望进一步降低进口依赖度，同时受政策驱动与多重风险挑战影响；全球钒市场需求将受钢铁产业结构调整和储能需求增长支撑，供应格局向多极化发展，价格受产能释放与储能需求影响呈现短期低位、中长期有望回升的态势，贸易与政策层面的竞争和管控将持续加剧。"></SurveyConclusion>
<AnalysisBox title="调查建议" :showAllBtn="false" height="auto">
<div class="box5-main">
<div class="data-list">
<div class="data-item" v-for="(item, index) in suggestionList" :key="index">
<div class="item-head">
<div class="item-name">{{ item.title }}</div>
<div class="button-box">
<div class="button-icon">
<img src="@/views/marketAccessRestrictions/assets/icons/open.png" alt="" />
</div> </div>
</div> <div class="button-text">跳转原文</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> </div>
<div class="box4-main-item-content"> <div class="item-down">
<div class="content-item" v-for="(val, idx) in item.data" :key="idx"> <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">{{val.title }}</div> <div class="content-item-title">{{val.title }}</div>
<div class="content-item-info"> <div class="content-item-info">
<div class="desc">{{ val.info.desc }}</div> <div class="desc">{{ val.info.desc }}</div>
...@@ -221,20 +43,9 @@ ...@@ -221,20 +43,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box-footer"> <AiTips tips="美国为降低盟友及自身在钕铁硼磁体价值链对中国的依赖、保障国家安全，一方面推动关键矿物多边及双边合作，另一方面通过支持相关税收抵免法案、分配额外资金等立法与政策举措，强化稀土及非稀土磁体相关国内供应链建设。"></AiTips>
<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>
</AnalysisBox>
</div> </div>
</template> </template>
...@@ -242,6 +53,8 @@ ...@@ -242,6 +53,8 @@
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { getReportAnalyze } from "@/api/marketAccessRestrictions/index.js"; import { getReportAnalyze } from "@/api/marketAccessRestrictions/index.js";
import SurveyConclusion from "@/views/marketAccessRestrictions/com/SurveyConclusion.vue";
import AiTips from "@/views/marketAccessRestrictions/com/AiTips.vue";
const route = useRoute(); const route = useRoute();
const searchId = route.query.searchId || "232"; const searchId = route.query.searchId || "232";
...@@ -264,22 +77,37 @@ const getData = async () => { ...@@ -264,22 +77,37 @@ const getData = async () => {
// 市场需求 // 市场需求
getReportAnalyze({ searchId, type: "02" }).then((res) => { getReportAnalyze({ searchId, type: "02" }).then((res) => {
if (res.data) { if (res.code==200) {
demandList.value = groupData(res.data); demandList.value = res.data.map(item => {
return {
title: item.TITLE,
data: item.CONTENT?.split(/\r\n|\n/).filter(line => line.trim()) || [],
};
});
} }
}); });
// 国内外供应情况 // 国内外供应情况
getReportAnalyze({ searchId, type: "03" }).then((res) => { getReportAnalyze({ searchId, type: "03" }).then((res) => {
if (res.data) { if (res.code==200) {
supplyList.value = groupData(res.data); supplyList.value = res.data.map(item => {
return {
title: item.TITLE,
data: item.CONTENT?.split(/\r\n|\n/).filter(line => line.trim()) || [],
};
});
} }
}); });
// 未来产业格局 // 未来产业格局
getReportAnalyze({ searchId, type: "04" }).then((res) => { getReportAnalyze({ searchId, type: "04" }).then((res) => {
if (res.data) { if (res.code==200) {
box4List.value = groupData(res.data); box4List.value = res.data.map(item => {
return {
title: item.TITLE,
data: item.CONTENT?.split(/\r\n|\n/).filter(line => line.trim()) || [],
};
});
} }
}); });
...@@ -336,411 +164,79 @@ onMounted(() => { ...@@ -336,411 +164,79 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .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: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 16px;
height: 24px;
line-height: 24px;
color: var(--color-main-active);
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 var(--color-main-active);
background: rgba(246, 250, 255, 1);
color: var(--color-main-active);
}
}
.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; width: 1600px;
// height: 588px; margin: 20px auto;
.box1-main { display: flex;
// height: 425px; flex-direction: column;
margin-top: 2px; gap: 16px;
overflow: hidden; }
overflow-y: auto;
} .box1-main {
.box1-main-item { padding: 0 22px 20px;
margin: 0 auto; .data-list {
width: 1552px; margin-bottom: 16px;
padding: 12px 23px 12px 44px; border-top: 1px solid rgba(234, 236, 238, 1);
.data-item {
letter-spacing: 1px;
padding: 12px 20px 12px 40px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Source Han Sans CN;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: justify; text-align: justify;
display: flex;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
.id {
width: 18px;
}
.title {
flex: 1;
} }
} }
} }
.box2 {
width: 1600px; .box5-main {
// height: 921px; padding: 0 22px 20px;
.box2-main { .data-list {
// height: 760px; margin-bottom: 16px;
width: 1552px; border-top: 1px solid rgba(234, 236, 238, 1);
margin: 2px auto 0; .data-item {
.box2-main-item { .item-head {
width: 1552px; padding: 0 20px;
.box2-main-item-header {
height: 48px; 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-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
background: rgba(247, 248, 249, 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;
}
.title {
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; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
box-sizing: border-box; .item-name {
border-bottom: 1px solid rgba(234, 236, 238, 1); width: 20px;
border-top: 1px solid rgba(234, 236, 238, 1); flex: auto;
background: rgba(247, 248, 249, 1); font-family: Source Han Sans CN;
.header-left {
margin-left: 12px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: bold;
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; line-height: 30px;
letter-spacing: 0px; color: var(--text-primary-80-color);
text-align: justify;
display: flex;
.id {
width: 18px;
}
.title {
flex: 1;
}
}
} }
} .button-box {
}
}
.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; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
box-sizing: border-box; margin-left: 50px;
border-bottom: 1px solid rgba(234, 236, 238, 1); .button-icon {
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; width: 16px;
height: 16px; height: 16px;
font-size: 0;
margin-right: 4px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.text { .button-text {
height: 14px; color: var(--color-primary-100);
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
line-height: 14px; line-height: 12px;
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;
}
.title {
flex: 1;
} }
} }
} }
} .item-down {
}
}
.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; margin-bottom: 10px;
.content-item { .content-item {
.content-item-title { .content-item-title {
...@@ -748,7 +244,7 @@ onMounted(() => { ...@@ -748,7 +244,7 @@ onMounted(() => {
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Source Han Sans CN;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
line-height: 30px; line-height: 30px;
...@@ -761,7 +257,7 @@ onMounted(() => { ...@@ -761,7 +257,7 @@ onMounted(() => {
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
.desc { .desc {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Source Han Sans CN;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
...@@ -821,6 +317,5 @@ onMounted(() => { ...@@ -821,6 +317,5 @@ onMounted(() => {
} }
} }
} }
}
} }
</style> </style>
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/337/index.vue
浏览文件 @ 93b74825
...@@ -446,9 +446,9 @@ onMounted(() => { ...@@ -446,9 +446,9 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.deep-dig-container { .deep-dig-container {
display: flex; display: flex;
padding: 16px 160px; width: 1600px;
margin: 20px auto;
gap: 16px; gap: 16px;
background: #f7f8f9;
.box { .box {
background: #ffffff; background: #ffffff;
...@@ -553,7 +553,7 @@ onMounted(() => { ...@@ -553,7 +553,7 @@ onMounted(() => {
} }
.left-section { .left-section {
width: 320px; width: 480px;
flex-shrink: 0; flex-shrink: 0;
.company-list-box { .company-list-box {
...@@ -565,11 +565,12 @@ onMounted(() => { ...@@ -565,11 +565,12 @@ onMounted(() => {
margin-bottom: 16px; margin-bottom: 16px;
.area-select { .area-select {
flex: 0 0 100px; width: 150px;
} }
.search-input { .search-input {
flex: 1; flex: auto;
width: 20px;
} }
} }
...@@ -624,7 +625,8 @@ onMounted(() => { ...@@ -624,7 +625,8 @@ onMounted(() => {
} }
.right-section { .right-section {
flex: 1; flex: auto;
width: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
......
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue
浏览文件 @ 93b74825
...@@ -26,5 +26,6 @@ onMounted(() => { ...@@ -26,5 +26,6 @@ onMounted(() => {
.deepdig-wrap { .deepdig-wrap {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto;
} }
</style> </style>
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/index.vue
浏览文件 @ 93b74825
<template> <template>
<div class="wrapper"> <div class="page-box">
<div class="header"> <div class="page-top">
<div class="header-top"> <div class="head-box">
<div class="header-top-left">{{ curSurvey.name }}</div> <div class="head-icon">
<div class="header-top-right"> <img :src="curSurvey.image" alt="" />
<div class="title">
{{ curSurvey.title }}
</div> </div>
<div class="time">{{ curSurvey.time }}</div> <div class="head-info">
<div class="head-name one-line-ellipsis">{{ curSurvey.title }}</div>
<div class="head-text">{{ curSurvey.time }}</div>
</div> </div>
<div :class="`item-tag tag-${curSurvey.name}`">{{ curSurvey.name }}调查</div>
</div> </div>
<div class="header-footer"> <div class="page-tabs">
<div class="nav-box"> <div :class="['tab-item', {'tab-active': activeName==item.name}]" v-for="(item, index) in tabList" :key="index" @click="handleClickBtn(item)">
<div
class="nav-item"
:class="{ navItemActive: item.isActive }"
v-for="(item, index) in navList"
v-show="item.isShow"
:key="index"
@click="handleClickNav(index)"
>
<div class="icon"> <div class="icon">
<img v-if="!item.isActive" :src="item.icon" alt="" /> <img :src="item.activeIcon" alt="" v-if="activeName==item.name" />
<img v-else :src="item.activeIcon" alt="" /> <img :src="item.icon" alt="" v-else />
</div> </div>
<div class="text" :class="{ textActive: item.isActive }"> <div class="text" :class="{ textActive: activeName==item.name }">
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
</div> <div style="width:20px; flex:auto;"></div>
<div class="btn-box"> <div class="head-button">
<!-- <div class="btn"> <div class="button-icon">
<div class="icon">
<img src="./assets/images/btn-icon1.png" alt="" />
</div>
<div class="text">{{ "查看官网" }}</div>
</div> -->
<div class="btn1">
<div class="icon">
<img src="./assets/images/btn-icon2.png" alt="" /> <img src="./assets/images/btn-icon2.png" alt="" />
</div> </div>
<div class="text">{{ "分析报告" }}</div> <div class="button-text">{{ "分析报告" }}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -56,77 +41,50 @@ import { ref, onMounted, computed } from "vue"; ...@@ -56,77 +41,50 @@ import { ref, onMounted, computed } from "vue";
import router from "@/router"; import router from "@/router";
import NavIcon1 from "./assets/images/nav-icon1.png"; import NavIcon1 from "./assets/images/nav-icon1.png";
import NavIcon1Active from "./assets/images/nav-icon1-active.png"; import NavIcon1Active from "./assets/images/nav-icon1-active.png";
import NavIcon2 from "./assets/images/nav-icon2.png";
import NavIcon2Active from "./assets/images/nav-icon2-active.png";
import NavIcon3 from "./assets/images/nav-icon2.png"; import NavIcon3 from "./assets/images/nav-icon2.png";
import NavIcon3Active from "./assets/images/nav-icon2-active.png"; import NavIcon3Active from "./assets/images/nav-icon2-active.png";
import Img337 from "./assets/images/337.png";
import Img232 from "./assets/images/232.png";
import Img301 from "./assets/images/301.png";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();
const navList = ref([ const tabList = ref([
{ {
name: "调查概况", name: "调查概况",
icon: NavIcon1, icon: NavIcon1,
activeIcon: NavIcon1Active, activeIcon: NavIcon1Active,
isActive: true,
isShow: true,
path: "/marketSingleCaseLayout/overview" path: "/marketSingleCaseLayout/overview"
}, },
// {
// name: "报告解析",
// icon: NavIcon2,
// activeIcon: NavIcon2Active,
// isActive: false,
// isShow: route.query.id === "337",
// path: "/marketSingleCaseLayout/deepdig"
// },
{ {
name: "影响分析", name: "影响分析",
icon: NavIcon3, icon: NavIcon3,
activeIcon: NavIcon3Active, activeIcon: NavIcon3Active,
isActive: false,
isShow: true,
path: "/marketSingleCaseLayout/deepdig" path: "/marketSingleCaseLayout/deepdig"
} }
]); ]);
const handleClickNav = index => {
navList.value.forEach(item => {
item.isActive = false;
});
navList.value[index].isActive = true;
router.push({
path: navList.value[index].path,
query: {
...route.query
}
});
};
const surveyList = ref([ const surveyList = ref([
{ {
title: "337-TA-1443：外国制造的半导体器件及其下游产品和组件", title: "337-TA-1443：外国制造的半导体器件及其下游产品和组件",
time: "2025年7月18日", time: "2025年7月18日",
image: Img337,
name: "337" name: "337"
}, },
{ {
title: "231-TA-1225：进口药及进口原材料的调查", title: "231-TA-1225：进口药及进口原材料的调查",
time: "2021年9月21日", time: "2021年9月21日",
image: Img232,
name: "232" name: "232"
}, },
{ {
title: "美国贸易代表第301条关于中国针对海事、物流和造船业以争取主导地位的行动", title: "美国贸易代表第301条关于中国针对海事、物流和造船业以争取主导地位的行动",
time: "2025年4月17日", time: "2025年4月17日",
image: Img301,
name: "301" name: "301"
} }
]); ]);
// const curSurvey = ref( {
// title: "337-TA-1443：外国制造的半导体器件及其下游产品和组件",
// time: '2025年7月18日',
// name: '337'
// });
const curSurvey = computed(() => { const curSurvey = computed(() => {
let survey; let survey;
if (route.query.id === "232") { if (route.query.id === "232") {
...@@ -139,170 +97,203 @@ const curSurvey = computed(() => { ...@@ -139,170 +97,203 @@ const curSurvey = computed(() => {
return survey; return survey;
}); });
onMounted(() => {}); const activeName = ref("调查案件");
const handleClickBtn = item => {
activeName.value = item.name;
router.push({
path: item.path,
query: { ...route.query }
});
};
onMounted(() => {
console.log('route', route);
if (route.path === "/marketSingleCaseLayout/deepdig") {
activeName.value = "影响分析";
} else {
activeName.value = "调查概况";
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .page-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #f7f8f9;
.header {
width: 1920px;
height: 148px;
box-sizing: border-box;
border-bottom: 1px solid rgba(230, 231, 232, 1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
padding: 24px 160px 0; .page-top {
.header-top { width: 1600px;
display: flex; margin: 0 auto;
.header-top-left {
width: 48px;
height: 48px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(145, 202, 255, 1); .head-box {
border-radius: 4px; width: 100%;
background: rgba(230, 244, 255, 1); display: flex;
color: var(--color-main-active); padding: 30px 0 20px;
font-family: Microsoft YaHei; .head-icon {
font-size: 16px; width: 54px;
font-weight: 700; height: 54px;
text-align: center; font-size: 0px;
line-height: 48px; margin-right: 16px;
img {
width: 100%;
height: 100%;
}
} }
.header-top-right { .head-info {
margin-left: 20px; width: 20px;
.title { flex: auto;
.head-name {
width: 100%;
height: 26px; height: 26px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: bold;
line-height: 26px; line-height: 26px;
} }
.time { .head-text {
width: 100%;
height: 24px; height: 24px;
color: rgba(132, 136, 142, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
} }
} }
.item-tag {
height: 24px;
line-height: 24px;
padding: 0 8px;
border-radius: 4px;
font-weight: bold;
font-size: 16px;
letter-spacing: 2px;
} }
.header-footer { .tag-337 {
display: flex; border: 1px solid #91caff;
justify-content: space-between; background: #e6f4ff;
margin-top: 24px; color: #055fc2;
.nav-box {
height: 48px;
display: flex;
.navItemActive {
border-bottom: 3px solid var(--color-main-active);
} }
.nav-item { .tag-232 {
border: 1px solid #b37feb;
background: #f9f0ff;
color: #722ed1;
}
.tag-301 {
border: 1px solid #ffd591;
background: #fff7e6;
color: #fa8c16;
}
.head-button {
margin-left: 100px;
width: 120px;
height: 36px;
border-radius: 6px;
background: var(--color-main-active);
display: flex; display: flex;
width: 95px; justify-content: center;
margin-right: 20px; align-items: center;
cursor: pointer; cursor: pointer;
.icon { .button-icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-top: 16px; font-size: 0;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.text { .button-text {
width: 72px; margin-left: 8px;
height: 24px; color: rgba(255, 255, 255, 1);
margin-top: 12px;
margin-left: 4px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 18px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px;
}
.textActive {
font-size: 18px;
font-weight: 700;
color: var(--color-main-active);
} }
} }
} }
.btn-box { .page-tabs {
height: 48px;
display: flex; display: flex;
.btn { align-items: flex-start;
margin-top: 2px; .tab-item {
width: 120px; height: 40px;
height: 36px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 6px;
background: rgba(255, 255, 255, 1);
display: flex; display: flex;
align-items: center;
gap: 4px;
cursor: pointer; cursor: pointer;
margin-right: 24px;
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-left: 16px; font-size: 0;
margin-top: 10px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.text { .text {
margin-left: 8px; height: 24px;
margin-top: 7px; color: rgba(59, 65, 75, 1);
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 18px;
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 24px;
}
.textActive {
color: var(--color-main-active);
font-weight: 700;
}
}
.tab-active {
position: relative;
&::after {
content: "";
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
height: 3px;
background-color: var(--color-main-active);
} }
} }
.btn1 {
margin-left: 12px; .head-button {
margin-top: 2px; position: relative;
top: -5px;
width: 120px; width: 120px;
height: 36px; height: 36px;
border-radius: 6px; border-radius: 6px;
background: var(--color-main-active); background: var(--color-main-active);
display: flex; display: flex;
justify-content: center;
align-items: center;
cursor: pointer; cursor: pointer;
.icon { .button-icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-left: 16px; font-size: 0;
margin-top: 10px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.text { .button-text {
margin-left: 8px; margin-left: 8px;
margin-top: 7px; color: rgba(255, 255, 255, 1);
height: 22px;
color: #fff;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 22px;
}
} }
} }
} }
} }
.main { .main {
width: 1920px; border-top: 1px solid rgba(230, 231, 232, 1);
background-color: #f7f8f9;
width: 100%;
height: 20px; height: 20px;
flex: auto; flex: auto;
} }
......
src/views/marketAccessRestrictions/singleCaseLayout/overview/232/index.vue
浏览文件 @ 93b74825
<template> <template>
<div class="wrapper" v-loading="loading"> <div class="wrapper">
<div class="left"> <div class="left">
<div class="box1"> <AnalysisBox title="基本信息" :showAllBtn="false" height="auto">
<div class="box-header"> <div class="box1-main" v-loading="loading">
<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">
<div class="box1-item-left">{{ "案卷编号：" }}</div> <div class="box1-item-left">{{ "案卷编号：" }}</div>
<div class="box1-item-right">{{ baseInfo.SEARCHNUM || '-' }}</div> <div class="box1-item-right">{{ baseInfo.SEARCHNUM || '-' }}</div>
...@@ -70,42 +55,20 @@ ...@@ -70,42 +55,20 @@
<div class="box1-item-right">{{ baseInfo.ISTARIFF === 'Y' ? `是，增加${baseInfo.ADDTARIFF}%` : '否' }}</div> <div class="box1-item-right">{{ baseInfo.ISTARIFF === 'Y' ? `是，增加${baseInfo.ADDTARIFF}%` : '否' }}</div>
</div> </div>
</div> </div>
</div> </AnalysisBox>
</div> </div>
<div class="right"> <div class="right">
<div class="box2" v-loading="box2Loading"> <!-- <AnalysisBox title="调查脉络" :showAllBtn="false" height="auto">
<div class="box-header"> <div class="box2-main" v-loading="box2Loading">
<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-line-box"></div>
<div <div class="box2-item" :class="{ box2ItemFooter: index % 2 }" v-for="(item, index) in timeLineList" :key="index">
class="box2-item"
:class="{ box2ItemFooter: index % 2 }"
v-for="(item, index) in timeLineList"
:key="index"
>
<div class="point" :class="{ pointFooter: index % 2 }"> <div class="point" :class="{ pointFooter: index % 2 }">
<img src="@/assets/images/dot.png" alt="" /> <img src="@/assets/images/dot.png" alt="" />
</div> </div>
<div class="box2-item-header"> <div class="box2-item-header">
<div class="title">{{ item.time }}</div> <div class="title">{{ item.time }}</div>
</div> </div>
<div class="box2-item-content"> <div class="box2-item-content">{{ item.content }}</div>
{{ item.content }}
</div>
</div> </div>
<div class="arrow-left"> <div class="arrow-left">
<img src="@/assets/icons/card-btn-left.png" alt="" /> <img src="@/assets/icons/card-btn-left.png" alt="" />
...@@ -127,50 +90,9 @@ ...@@ -127,50 +90,9 @@
<img src="@/assets/icons/box-footer-right-icon.png" alt="" /> <img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div> </div>
</div> </div>
</div> </AnalysisBox> -->
<div class="box3" v-loading="box3Loading"> <SurveyConclusion title="调查结论" :listData="surveyResult" :tips="tips"></SurveyConclusion>
<div class="box-header"> <RelatedEvent title="相关行政举措" :listData="eventList"></RelatedEvent>
<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">{{ 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>
</div> </div>
</template> </template>
...@@ -179,6 +101,10 @@ ...@@ -179,6 +101,10 @@
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { getSearchBlurb, getSearchContext, getSearchConclusion } from "@/api/marketAccessRestrictions"; import { getSearchBlurb, getSearchContext, getSearchConclusion } from "@/api/marketAccessRestrictions";
import RelatedEvent from "@/views/marketAccessRestrictions/com/RelatedEvent.vue";
import SurveyConclusion from "@/views/marketAccessRestrictions/com/SurveyConclusion.vue";
const tips = "美国 232 调查认定，钕铁硼永磁体（关键领域核心材料）进口威胁其国家安全，因中国主导全球市场、美本土产能薄弱，未提关税，提议扶持本土供应链。"
const route = useRoute(); const route = useRoute();
const loading = ref(false); const loading = ref(false);
...@@ -239,13 +165,11 @@ const handleGetSearchConclusion = async () => { ...@@ -239,13 +165,11 @@ const handleGetSearchConclusion = async () => {
const res = await getSearchConclusion({ const res = await getSearchConclusion({
searchId: route.query.searchId searchId: route.query.searchId
}); });
if (res.code === 200 && res.data) { if (res.code === 200) {
surveyResult.value = res.data.map(item => { surveyResult.value = res.data.map(item => {
// 将 CONTENT 按换行符分割，并过滤掉空行
const contentList = item.CONTENT ? item.CONTENT.split(/\r\n|\n/).filter(line => line.trim()) : [];
return { return {
title: item.TITLE, title: item.TITLE,
data: contentList data: item.CONTENT?.split(/\r\n|\n/).filter(line => line.trim()) || [],
}; };
}); });
} }
...@@ -256,6 +180,25 @@ const handleGetSearchConclusion = async () => { ...@@ -256,6 +180,25 @@ const handleGetSearchConclusion = async () => {
} }
}; };
// 相关行政举措
const eventList = ref([
{
name: "某些特定外国制造的半导体器件及其下游产品和组件;委员会最终裁定未违反第337条的通知;调查终止",
text: "特此通知，2025 年 2 月 18 日，根据 1930 年《关税法》第 337 条（经修订）已代表爱尔兰 Longitude Licensing Ltd.和爱尔",
time: "2025年4月15日"
},
{
name: "某些特定外国制造的半导体器件及其下游产品和组件;委员会最终裁定未违反第337条的通知;调查终止",
text: "特此通知，2025 年 2 月 18 日，根据 1930 年《关税法》第 337 条（经修订）已代表爱尔兰 Longitude Licensing Ltd.和爱尔",
time: "2025年4月15日"
},
{
name: "某些特定外国制造的半导体器件及其下游产品和组件;委员会最终裁定未违反第337条的通知;调查终止",
text: "特此通知，2025 年 2 月 18 日，根据 1930 年《关税法》第 337 条（经修订）已代表爱尔兰 Longitude Licensing Ltd.和爱尔",
time: "2025年4月15日"
},
])
onMounted(() => { onMounted(() => {
handleGetSearchBlurb(); handleGetSearchBlurb();
handleGetSearchContext(); handleGetSearchContext();
...@@ -265,113 +208,27 @@ onMounted(() => { ...@@ -265,113 +208,27 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .wrapper {
width: 100%; width: 1600px;
// height: 1191px; margin: 20px auto;
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: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 16px;
height: 24px;
line-height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex; display: flex;
.btn { gap: 16px;
margin-left: 8px; .left {
height: 28px; width: 520px;
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 var(--color-main-active);
background: rgba(246, 250, 255, 1);
color: var(--color-main-active);
}
}
.header-info {
height: 22px;
position: absolute;
right: 84px;
top: 17px;
display: flex; display: flex;
justify-content: flex-end; flex-direction: column;
.icon { gap: 16px;
margin-top: 3px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
} }
} .right {
.text { width: 20px;
height: 22px; flex: auto;
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; display: flex;
justify-content: flex-end; flex-direction: column;
gap: 4px; gap: 16px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
} }
} }
.left {
width: 520px; .box1-main {
.box1 { padding: 0 22px;
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 { .box1-item {
display: flex; display: flex;
margin-bottom: 16px; margin-bottom: 16px;
...@@ -405,30 +262,14 @@ onMounted(() => { ...@@ -405,30 +262,14 @@ onMounted(() => {
} }
} }
} }
} }
}
} .box2-main {
.right { padding: 0 22px;
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; height: 250px;
// width: 1054px;
// overflow-x: auto;
// overflow-y: hidden;
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative; position: relative;
padding-left: 120px;
.box2-line-box { .box2-line-box {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -440,7 +281,6 @@ onMounted(() => { ...@@ -440,7 +281,6 @@ onMounted(() => {
.box2-item { .box2-item {
width: 320px; width: 320px;
height: 120px; height: 120px;
// background: pink;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
padding-left: 13px; padding-left: 13px;
...@@ -532,10 +372,9 @@ onMounted(() => { ...@@ -532,10 +372,9 @@ onMounted(() => {
height: 100%; height: 100%;
} }
} }
} }
.box2-footer { .box2-footer {
margin: 24px auto 0; margin: 20px 22px;
width: 1032px;
height: 64px; height: 64px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1); border: 1px solid rgba(231, 243, 255, 1);
...@@ -571,125 +410,5 @@ onMounted(() => { ...@@ -571,125 +410,5 @@ onMounted(() => {
height: 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> </style>
src/views/marketAccessRestrictions/singleCaseLayout/overview/301/index.vue
浏览文件 @ 93b74825
...@@ -339,8 +339,8 @@ onMounted(() => { ...@@ -339,8 +339,8 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .wrapper {
width: 100%; width: 1600px;
padding: 0 160px; margin: 20px auto;
display: flex; display: flex;
.box-header { .box-header {
height: 56px; height: 56px;
......
src/views/marketAccessRestrictions/singleCaseLayout/overview/337/index.vue
浏览文件 @ 93b74825
<template> <template>
<div class="wrapper" v-loading="loading"> <div class="wrapper" v-loading="loading">
<div class="left"> <div class="left">
<div class="box1"> <AnalysisBox title="基本信息" :showAllBtn="false" height="auto">
<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-main">
<div class="box1-item"> <div class="box1-item">
<div class="box1-item-left">{{ "调查案号：" }}</div> <div class="box1-item-left">{{ "调查案号：" }}</div>
...@@ -52,11 +37,7 @@ ...@@ -52,11 +37,7 @@
<div class="box1-item"> <div class="box1-item">
<div class="box1-item-left">{{ "案件进展：" }}</div> <div class="box1-item-left">{{ "案件进展：" }}</div>
<div class="box1-item-right2"> <div class="box1-item-right2">
<div <div class="box1-item-right2-item" v-for="(item, index) in processList" :key="index">
class="box1-item-right2-item"
v-for="(item, index) in processList"
:key="index"
>
<div class="icon"> <div class="icon">
<img src="./assets/images/icon1.png" alt="" /> <img src="./assets/images/icon1.png" alt="" />
</div> </div>
...@@ -66,72 +47,41 @@ ...@@ -66,72 +47,41 @@
</div> </div>
</div> </div>
</div> </div>
</AnalysisBox>
<AnalysisBox title="调查公告" :showAllBtn="false" height="auto">
<div class="box4-main">
<div v-for="(item, index) in afficheList" :key="index" class="box4-item">
<div class="item-icon">
<img src="@/views/marketAccessRestrictions/singleCaseLayout/assets/images/icon_affiche.png" alt="">
</div> </div>
</div> <div class="item-right">
<div class="right"> <div class="item-time">{{ item.time }}</div>
<div class="box2"> <div class="item-text">{{ item.text }}</div>
<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>
</div> </div>
<div class="box2-main"> </AnalysisBox>
<div class="box2-main-top">
<div class="left">
{{ baseInfo.ORGNAME ? baseInfo.ORGNAME.substring(0, 3) : '-' }}
</div> </div>
<div class="right"> <div class="right">
<div class="title">{{ baseInfo.ORGNAME || '-' }}</div> <AnalysisBox title="原告信息" :showAllBtn="false" height="auto">
<div class="info">{{ "-" }}</div> <div class="box2-main">
</div> <div class="data-head">
</div> <div class="data-icon">{{ baseInfo.ORGNAME?.substring(0, 3) }}</div>
<div class="box2-main-center"> <div class="data-right">
{{ baseInfo.ORGBLURB || '-' }} <div class="data-name">{{ baseInfo.ORGNAME }}</div>
</div> <div class="data-desc">{{ "" }}</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">
{{ baseInfo.ORGBLURB || '-' }}
</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>
<div class="data-text">{{ baseInfo.ORGBLURB || '-' }}</div>
<AiTips :tips="tips"></AiTips>
</div> </div>
</AnalysisBox>
<AnalysisBox title="被告信息" :showAllBtn="false" height="auto">
<div class="box3-main"> <div class="box3-main">
<div class="box3-main-box" v-for="(item, index) in caseList" :key="index"> <div class="data-item" v-for="(item, index) in caseList" :key="index">
<div class="box3-main-box-header">{{ item.title }}</div> <div class="data-head">{{ item.title }}</div>
<div class="box3-main-box-content"> <div class="info-list">
<div class="content-item" v-for="(val, idx) in item.companyList" :key="idx"> <div class="info-item" v-for="(val, idx) in item.companyList" :key="idx">
<div class="icon"> <div class="icon">
<img :src="val.logo" alt="" v-if="val.logo"> <img :src="val.logo" alt="" v-if="val.logo">
<div class="default-logo" v-else>{{ val.name ? val.name.substring(0, 1) : '' }}</div> <div class="default-logo" v-else>{{ val.name ? val.name.substring(0, 1) : '' }}</div>
...@@ -141,7 +91,8 @@ ...@@ -141,7 +91,8 @@
</div> </div>
</div> </div>
</div> </div>
</div> </AnalysisBox>
<RelatedEvent title="相关事件" :listData="eventList"></RelatedEvent>
</div> </div>
</div> </div>
</template> </template>
...@@ -150,12 +101,17 @@ import { ref, onMounted } from "vue"; ...@@ -150,12 +101,17 @@ import { ref, onMounted } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { getSearchBlurb } from "@/api/marketAccessRestrictions"; import { getSearchBlurb } from "@/api/marketAccessRestrictions";
import AiTips from "@/views/marketAccessRestrictions/com/AiTips.vue";
import RelatedEvent from "@/views/marketAccessRestrictions/com/RelatedEvent.vue";
const tips = `Pantech是韩国的一家通信设备公司，曾经是手机制造商，但现在可能已转型为专利持有实体。这类公司常被称为"非执业实体"(NPE)或"专利断言实体"(PAE)，通过专利授权和诉讼获取收益。这些企业曾经是行业龙头，但因科技和市场形态巨变，加上自身改革步伐缓慢，经营状况每况愈下。卖掉实体业务部门后，留下来的是高达几万件的专利。`
const route = useRoute(); const route = useRoute();
const loading = ref(false); const loading = ref(false);
const baseInfo = ref({}); const baseInfo = ref({});
const processList = ref([]); const processList = ref([]);
const caseList = ref([]); const caseList = ref([]);
// 调查概况
const handleGetSearchBlurb = async () => { const handleGetSearchBlurb = async () => {
loading.value = true; loading.value = true;
try { try {
...@@ -163,6 +119,7 @@ const handleGetSearchBlurb = async () => { ...@@ -163,6 +119,7 @@ const handleGetSearchBlurb = async () => {
searchId: route.query.searchId, searchId: route.query.searchId,
sortCode: "337" sortCode: "337"
}); });
console.log("调查概况", res)
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
const data = res.data; const data = res.data;
baseInfo.value = data; baseInfo.value = data;
...@@ -195,12 +152,54 @@ const handleGetSearchBlurb = async () => { ...@@ -195,12 +152,54 @@ const handleGetSearchBlurb = async () => {
} }
} }
} catch (error) { } catch (error) {
console.error("获取调查详情失败", error); console.log("获取调查概况失败", error);
} finally {
loading.value = false;
} }
loading.value = false;
}; };
// 调查公告
const afficheList = ref([
{
time: "2025-03-30",
text: "美国ITC正式对外国制造的半导体器件及其下游产品和组件启动337调查"
},
{
time: "2025-03-30",
text: "美国ITC正式对外国制造的半导体器件及其下游产品和组件启动337调查"
},
{
time: "2025-03-30",
text: "美国ITC正式对外国制造的半导体器件及其下游产品和组件启动337调查"
},
{
time: "2025-03-30",
text: "美国ITC正式对外国制造的半导体器件及其下游产品和组件启动337调查"
},
{
time: "2025-03-30",
text: "美国ITC正式对外国制造的半导体器件及其下游产品和组件启动337调查"
},
]);
// 相关事件
const eventList = ref([
{
name: "某些特定外国制造的半导体器件及其下游产品和组件;委员会最终裁定未违反第337条的通知;调查终止",
text: "特此通知，2025 年 2 月 18 日，根据 1930 年《关税法》第 337 条（经修订）已代表爱尔兰 Longitude Licensing Ltd.和爱尔",
time: "2025年4月15日"
},
{
name: "某些特定外国制造的半导体器件及其下游产品和组件;委员会最终裁定未违反第337条的通知;调查终止",
text: "特此通知，2025 年 2 月 18 日，根据 1930 年《关税法》第 337 条（经修订）已代表爱尔兰 Longitude Licensing Ltd.和爱尔",
time: "2025年4月15日"
},
{
name: "某些特定外国制造的半导体器件及其下游产品和组件;委员会最终裁定未违反第337条的通知;调查终止",
text: "特此通知，2025 年 2 月 18 日，根据 1930 年《关税法》第 337 条（经修订）已代表爱尔兰 Longitude Licensing Ltd.和爱尔",
time: "2025年4月15日"
},
])
onMounted(() => { onMounted(() => {
handleGetSearchBlurb(); handleGetSearchBlurb();
}); });
...@@ -208,8 +207,8 @@ onMounted(() => { ...@@ -208,8 +207,8 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .wrapper {
width: 100%; width: 1600px;
padding: 0 160px; margin: 20px auto;
display: flex; display: flex;
.box-header { .box-header {
height: 56px; height: 56px;
...@@ -304,22 +303,29 @@ onMounted(() => { ...@@ -304,22 +303,29 @@ onMounted(() => {
} }
.left { .left {
width: 520px; width: 520px;
.box1 { display: flex;
margin-top: 16px; flex-direction: column;
width: 520px; gap: 16px;
height: 837px; }
border-radius: 4px; .right {
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); width: 20px;
background: rgba(255, 255, 255, 1); flex: auto;
.box1-main { margin-left: 16px;
margin-top: 6px; display: flex;
margin-left: 22px; flex-direction: column;
gap: 16px;
}
}
.box1-main {
padding: 0 22px;
.box1-item { .box1-item {
display: flex; display: flex;
margin-bottom: 16px; margin-bottom: 16px;
.box1-item-left { .box1-item-left {
width: 100px; width: 100px;
height: 24px; height: 24px;
flex: none;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
...@@ -395,136 +401,59 @@ onMounted(() => { ...@@ -395,136 +401,59 @@ onMounted(() => {
} }
} }
} }
} }
}
} .box2-main {
.right { padding: 0 22px 20px;
width: 1064px; .data-head {
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; display: flex;
width: 1012px;
height: 69px;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
margin: 0 auto; padding-bottom: 16px;
.left { .data-icon {
width: 48px; width: 48px;
height: 48px; height: 48px;
text-align: center; text-align: center;
line-height: 48px; line-height: 48px;
background: rgba(231, 243, 255, 1); background: rgba(231, 243, 255, 1);
color: var(--color-main-active); color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: bold;
font-family: Microsoft YaHei;
} }
.right { .data-right {
width: 20px;
flex: auto;
margin-left: 16px; margin-left: 16px;
.title {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 700; font-family: Source Han Sans CN;
line-height: 24px; .data-name {
color: var(--text-primary-80-color);
font-weight: bold;
} }
.info { .data-desc {
color: rgba(95, 101, 108, 1); color: var(--text-primary-65-color);
height: 24px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px;
} }
} }
} }
.box2-main-center { .data-text {
width: 1012px; width: 1012px;
margin: 0 auto; margin: 0 auto;
margin-top: 13px; margin-top: 13px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Source Han Sans CN;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
height: 160px; height: 160px;
overflow-y: auto; overflow-y: auto;
} }
.box2-main-footer { }
margin: 0 auto;
margin-top: 10px; .box3-main {
width: 1034px; padding: 0 22px 20px;
height: 88px; .data-item {
box-sizing: border-box; .data-head {
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: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.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;
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; height: 36px;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -533,15 +462,15 @@ onMounted(() => { ...@@ -533,15 +462,15 @@ onMounted(() => {
font-weight: 700; font-weight: 700;
line-height: 36px; line-height: 36px;
} }
.box3-main-box-content { .info-list {
padding-top: 13px; padding-top: 13px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.content-item { .info-item {
display: flex; display: flex;
height: 30px; height: 30px;
width: 50%; width: 50%;
margin-bottom: 11px; margin-bottom: 10px;
.icon { .icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
...@@ -583,8 +512,42 @@ onMounted(() => { ...@@ -583,8 +512,42 @@ onMounted(() => {
} }
} }
} }
}
.box4-main {
padding: 0 16px 16px;
.box4-item {
border-top: 1px solid var(--bg-black-5);
padding: 6px;
display: flex;
.item-icon {
width: 15px;
height: 15px;
font-size: 0px;
margin-right: 16px;
margin-top: 7px;
img {
width: 100%;
height: 100%;
}
}
.item-right {
width: 20px;
flex: auto;
font-family: Source Han Sans CN;
font-size: 16px;
line-height: 30px;
.item-time {
font-weight: bold;
color: var(--text-primary-80-color);
}
.item-text {
color: var(--text-primary-65-color);
}
} }
} }
.box4-item:last-child {
border-bottom: 1px solid var(--bg-black-5);
} }
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论