Skip to content

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

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

上级 302579c7
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 604 行增加 和 514 行删除
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/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/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/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;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论