Skip to content

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

feat:市场准入限制概览页-调查分类增加日期筛选

上级 59d0a2fd
隐藏空白字符变更
内嵌 并排
正在显示 包含 696 行增加 和 845 行删除
src/api/marketAccessRestrictions/index.js
浏览文件 @ 172383fa
...@@ -138,7 +138,7 @@ export function getSurveyList(params) { ...@@ -138,7 +138,7 @@ export function getSurveyList(params) {
// 详情页--------------------------------------------------- // 详情页---------------------------------------------------
// 获取调查列表接口 // 调查分类详情接口
/** /**
* @param { sortCode } * @param { sortCode }
*/ */
...@@ -169,7 +169,7 @@ export function getSearchAllYear(params) { ...@@ -169,7 +169,7 @@ export function getSearchAllYear(params) {
} }
// 调查简介 /marketsearchDetails/searchBlurb // 调查简介
export function getSearchBlurb(params) { export function getSearchBlurb(params) {
return request({ return request({
method: 'GET', method: 'GET',
......
src/components/base/boxBackground/overviewNormalBox.vue
浏览文件 @ 172383fa
<template> <template>
<div class="overview-normal-box-wrapper" <div class="box-main" :style="{ width: width || '1064px', height: height || '460px' }">
:style="{ width: width ? width : '1064px', height: height ? height : '460px' }"> <div class="box-head-box">
<div class="overview-normal-box-header"> <div class="box-head-left">
<div class="header-left"> <slot name="header-icon"></slot>
<div class="header-icon">
<slot name="header-icon"></slot>
</div>
<div class="header-title">{{ title }}</div>
</div> </div>
<div class="box-head-name one-line-ellipsis">{{ title }}</div>
<div class="header-right"> <div class="box-head-right">
<slot name="header-right"></slot> <slot name="header-right"></slot>
</div> </div>
</div> </div>
<div class="wrapper-main"> <div class="box-down-box">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
...@@ -41,49 +37,44 @@ const props = defineProps({ ...@@ -41,49 +37,44 @@ const props = defineProps({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.overview-normal-box-wrapper { .box-main {
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: relative; display: flex;
flex-direction: column;
.overview-normal-box-header { .box-head-box {
padding: 0 22px;
height: 48px; height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
justify-content: space-between; align-items: center;
box-sizing: border-box; width: 100%;
.header-left { .box-head-left {
display: flex; width: 24px;
height: 24px;
.header-icon { font-size: 0px;
width: 24px; margin-right: 16px;
height: 24px;
margin-top: 14px;
margin-left: 19px;
}
.header-title {
margin-left: 17px;
height: 48px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: 700;
line-height: 48px;
text-align: center;
}
} }
.box-head-name {
.header-right { color: var(--color-main-active);
height: 48px; font-family: Source Han Sans CN;
margin-right: 28px; font-size: 20px;
font-weight: bold;
line-height: 20px;
width: 20px;
flex: auto;
}
.box-head-right {
margin-left: 16px;
} }
} }
.wrapper-main { .box-down-box {
height: calc(100% - 48px); height: 20px;
flex: auto;
overflow: hidden; overflow: hidden;
} }
} }
......
src/router/index.js
浏览文件 @ 172383fa
...@@ -72,7 +72,7 @@ router.beforeEach((to, from, next) => { ...@@ -72,7 +72,7 @@ router.beforeEach((to, from, next) => {
const storageKey = to.meta.titleStorageKey || "curTabName"; const storageKey = to.meta.titleStorageKey || "curTabName";
// 新开页签时 sessionStorage 不共享，优先用 query 带过来的 title/name // 新开页签时 sessionStorage 不共享，优先用 query 带过来的 title/name
const queryTitle = (to.query && (to.query.title || to.query.name)) ? String(to.query.title || to.query.name) : ""; const queryTitle = (to.query && (to.query.title || to.query.name)) ? String(to.query.title || to.query.name) : "";
if (!to.path.startsWith('/decreeLayout/')) { if (!to.meta.noTitle) {
document.title = queryTitle || window.sessionStorage.getItem(storageKey) || to.meta.title; document.title = queryTitle || window.sessionStorage.getItem(storageKey) || to.meta.title;
} }
} else { } else {
......
src/router/modules/decree.js
浏览文件 @ 172383fa
...@@ -28,9 +28,7 @@ const decreeRoutes = [ ...@@ -28,9 +28,7 @@ const decreeRoutes = [
name: "DecreeLayoutContainer", name: "DecreeLayoutContainer",
component: DecreeLayoutContainer, component: DecreeLayoutContainer,
redirect: "/decreeLayout/overview", redirect: "/decreeLayout/overview",
// meta: { // meta: { title: "政令布局" },
// title: "政令布局"
// },
children: [ children: [
{ {
path: "overview", path: "overview",
...@@ -46,19 +44,19 @@ const decreeRoutes = [ ...@@ -46,19 +44,19 @@ const decreeRoutes = [
path: "introduction", path: "introduction",
name: "DecreeIntroduction", name: "DecreeIntroduction",
component: DecreeIntroduction, component: DecreeIntroduction,
// meta: { title: "政令简介" } meta: { noTitle: true }
}, },
{ {
path: "background", path: "background",
name: "DecreeBackground", name: "DecreeBackground",
component: DecreeBackground, component: DecreeBackground,
// meta: { title: "政令背景" } meta: { noTitle: true }
}, },
{ {
path: "measures", path: "measures",
name: "DecreeMeasures", name: "DecreeMeasures",
component: DecreeMeasures, component: DecreeMeasures,
// meta: { title: "政令举措" } meta: { noTitle: true }
}, },
] ]
}, },
...@@ -67,18 +65,14 @@ const decreeRoutes = [ ...@@ -67,18 +65,14 @@ const decreeRoutes = [
path: "deepDig", path: "deepDig",
name: "DeepDig", name: "DeepDig",
component: DecreeDeepDig, component: DecreeDeepDig,
// meta: { meta: { noTitle: true }
// title: "深度挖掘"
// }
}, },
// 影响分析路由 // 影响分析路由
{ {
path: "influence", path: "influence",
name: "DecreeInfluence", name: "DecreeInfluence",
component: DecreeInfluence, component: DecreeInfluence,
// meta: { meta: { noTitle: true }
// title: "影响分析"
// }
}, },
] ]
}, },
......
src/router/modules/marketAccessRestrictions.js
浏览文件 @ 172383fa
...@@ -28,22 +28,17 @@ const marketAccessRestrictionsRoutes = [ ...@@ -28,22 +28,17 @@ const marketAccessRestrictionsRoutes = [
dynamicTitle: true dynamicTitle: true
}, },
children: [ children: [
{ {
path: "case", path: "case",
name: "MarketAccessCase", name: "MarketAccessCase",
component: MarketAccessCase, component: MarketAccessCase,
// meta: { meta: { noTitle: true }
// title: "调查案件"
// }
}, },
{ {
path: "overview", path: "overview",
name: "MarketAccessOverview", name: "MarketAccessOverview",
component: MarketAccessOverview, component: MarketAccessOverview,
// meta: { meta: { noTitle: true }
// title: "数据统计"
// }
} }
] ]
}, },
...@@ -62,17 +57,13 @@ const marketAccessRestrictionsRoutes = [ ...@@ -62,17 +57,13 @@ const marketAccessRestrictionsRoutes = [
path: "overview", path: "overview",
name: "MarketSingleCaseOverview", name: "MarketSingleCaseOverview",
component: MarketSingleCaseOverview, component: MarketSingleCaseOverview,
// meta: { meta: { noTitle: true }
// title: "调查简介"
// }
}, },
{ {
path: "deepdig", path: "deepdig",
name: "MarketSingleCaseDeepdig", name: "MarketSingleCaseDeepdig",
component: MarketSingleCaseDeepdig, component: MarketSingleCaseDeepdig,
// meta: { meta: { noTitle: true }
// title: "深度挖掘"
// }
} }
] ]
}, },
......
src/views/decree/decreeHome/index.vue
浏览文件 @ 172383fa
...@@ -63,66 +63,6 @@ ...@@ -63,66 +63,6 @@
<DivideHeader id="position1" class="divide" :titleText="'最新动态'"></DivideHeader> <DivideHeader id="position1" class="divide" :titleText="'最新动态'"></DivideHeader>
<div class="home-main-center"> <div class="home-main-center">
<div class="center-top"> <div class="center-top">
<!-- <div class="box1">
<div class="box1-left" @click="handleSwithCurDecree('left')">
<div class="icon">
<img src="./assets/images/box1-left.svg" alt="" />
</div>
</div>
<div class="box1-right" @click="handleSwithCurDecree('right')">
<div class="icon">
<img src="./assets/images/box1-right.svg" alt="" />
</div>
</div>
<div class="box1-header">
<div class="box1-header-left">
<div class="icon">
<img src="./assets/images/box1-header-icon.png" alt="" />
</div>
<div class="title">{{ "最新科技政令" }}</div>
</div>
<div class="box1-header-right" @click="handleClickOrder">
{{ "查看详情 >" }}
</div>
</div>
<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
indicator-position="none">
<el-carousel-item v-for="(item, index) in box1DataList" :key="index">
<div class="box1-main">
<div class="box1-main-left">
<img v-if="item.imageUrl" :src="item.imageUrl" alt="" />
<div v-else class="box1-main-left-img-mock">
<img class="img-mock-badge-img" src="./assets/images/badge.png" />
<p class="img-mock-badge-title">行政令</p>
<p class="img-mock-badge-title">{{ item.name }}</p>
</div>
</div>
<div class="box1-main-right">
<div class="box1-main-right-title">
{{ item.name }}
</div>
<div class="box1-main-right-info">
<AreaTag v-for="(tag, index) in item.industryList" :key="index" :tagName="tag.industryName" />
</div>
<div class="box1-main-right-center">
{{ item.describe }}
</div>
<div class="box1-main-right-footer">
<div class="footer-left">{{ item.postDate }}</div>
<div class="footer-right">
<div class="footer-right-item1">
{{ item.officialUrl }}
</div>
<div class="footer-right-item2">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div> -->
<OverviewMainBox class="box1" title="最新科技政令" @toDetail="handleClickOrder"> <OverviewMainBox class="box1" title="最新科技政令" @toDetail="handleClickOrder">
<template #header-icon> <template #header-icon>
<img style="width: 100%; height: 100%" src="./assets/images/box1-header-icon.png" alt="" /> <img style="width: 100%; height: 100%" src="./assets/images/box1-header-icon.png" alt="" />
...@@ -610,7 +550,6 @@ const carouselRef = ref(null); ...@@ -610,7 +550,6 @@ const carouselRef = ref(null);
const handleClickOrder = () => { const handleClickOrder = () => {
let index = carouselRef.value?.activeIndex || 0; let index = carouselRef.value?.activeIndex || 0;
let item = box1DataList.value[index]; let item = box1DataList.value[index];
console.log(item)
if (item) onNavigateToDetail(item) if (item) onNavigateToDetail(item)
}; };
...@@ -732,10 +671,7 @@ handleGetMessage(); ...@@ -732,10 +671,7 @@ handleGetMessage();
// 点击人物头像，跳转到人物主页 // 点击人物头像，跳转到人物主页
const handleClickPerson = async item => { const handleClickPerson = async item => {
console.log("person", item);
const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList")); const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList"));
console.log("personTypeList", personTypeList);
let type = 0; let type = 0;
let personTypeName = ""; let personTypeName = "";
...@@ -749,12 +685,9 @@ const handleClickPerson = async item => { ...@@ -749,12 +685,9 @@ const handleClickPerson = async item => {
const arr = personTypeList.filter(item => { const arr = personTypeList.filter(item => {
return item.typeId === res.data.personType; return item.typeId === res.data.personType;
}); });
console.log("arr", arr);
if (arr && arr.length > 0) { if (arr && arr.length > 0) {
personTypeName = arr[0].typeName; personTypeName = arr[0].typeName;
console.log("personTypeName", personTypeName);
if (personTypeName === "科技企业领袖") { if (personTypeName === "科技企业领袖") {
type = 1; type = 1;
} else if (personTypeName === "国会议员") { } else if (personTypeName === "国会议员") {
...@@ -1551,12 +1484,11 @@ onMounted(async () => { ...@@ -1551,12 +1484,11 @@ onMounted(async () => {
position: absolute; position: absolute;
right: -13px; right: -13px;
top: -10px; top: -10px;
padding: 0 8px; padding: 4px 8px 6px;
height: 26px;
background-color: #FF4D4F; background-color: #FF4D4F;
color: white; color: white;
font-size: 16px; font-size: 16px;
line-height: 26px; line-height: 16px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
border-radius: 14px; border-radius: 14px;
letter-spacing: 1px; letter-spacing: 1px;
......
src/views/decree/decreeLayout/index.vue
浏览文件 @ 172383fa
...@@ -69,85 +69,14 @@ ...@@ -69,85 +69,14 @@
<router-view /> <router-view />
</div> </div>
</div> </div>
<!-- <div class="layout-report-box" v-if="activeName === '法案原文'">
<div class="report-close" @click="handleSwitchActiveName('分析报告')">
<img src="./assets/images/report-close-icon.png" alt="" />
</div>
<div class="report-main">
<div class="report-header">
<div class="report-header-left">
<div class="text">法案版本：</div>
<div class="select-box">
<el-select v-model="curBill" placeholder="选择法案" style="width: 240px">
<el-option v-for="item in billList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
<div class="report-header-right">
<div class="btn">
<div class="icon">
<img src="./assets/images/report-header-icon1.png" alt="" />
</div>
<div class="text">翻译</div>
</div>
<div class="btn">
<div class="icon">
<img src="./assets/images/report-header-icon2.png" alt="" />
</div>
<div class="text">下载</div>
</div>
<div class="btn">
<div class="icon">
<img src="./assets/images/report-header-icon3.png" alt="" />
</div>
<div class="text">对比</div>
</div>
<div class="btn">
<div class="icon">
<img src="./assets/images/report-header-icon4.png" alt="" />
</div>
<div class="text">查找</div>
</div>
</div>
</div>
<div class="report-content">
<div class="content-left">
<img src="./assets/images/report1.png" alt="" />
</div>
<div class="content-right">
<img src="./assets/images/report2.png" alt="" />
</div>
</div>
</div>
</div> -->
<!-- <div class="report" v-if="isShowReport">
<div class="report-close" @click="handleCloseReport">
<img src="@/assets/icons/close.png" alt="" />
</div>
<div class="report-header">
{{ "政令原文" }}
</div>
<div class="report-main">
<div class="left">
<div v-if="!reportUrl" class="noContent">{{ "中文原文暂无数据" }}</div>
<iframe v-else :src="reportUrl" style="border: none" width="100%" height="100%"> </iframe>
</div>
<div class="right">
<div v-if="!reportUrlEn" class="noContent">{{ "英文原文暂无数据" }}</div>
<iframe v-else :src="reportUrlEn" style="border: none" width="100%" height="100%"> </iframe>
</div>
</div>
</div> -->
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onUnmounted } from "vue"; import { ref, onMounted } from "vue";
import router from "@/router"; import router from "@/router";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { getDecreeSummary } from "@/api/decree/introduction"; import { getDecreeSummary } from "@/api/decree/introduction";
import { getDecreeReport } from "@/api/decree/introduction";
import search from "./assets/images/search.png";
import icon1 from "./assets/icons/icon1.svg"; import icon1 from "./assets/icons/icon1.svg";
import icon1Active from "./assets/icons/icon1_active.svg"; import icon1Active from "./assets/icons/icon1_active.svg";
...@@ -156,7 +85,6 @@ import icon2Active from "./assets/icons/icon2_active.svg"; ...@@ -156,7 +85,6 @@ import icon2Active from "./assets/icons/icon2_active.svg";
import icon3 from "./assets/icons/icon3.svg"; import icon3 from "./assets/icons/icon3.svg";
import icon3Active from "./assets/icons/icon3_active.svg"; import icon3Active from "./assets/icons/icon3_active.svg";
import USALogo from "./assets/images/USA-logo.png"; import USALogo from "./assets/images/USA-logo.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
const route = useRoute(); const route = useRoute();
...@@ -224,28 +152,8 @@ const handleGetSummary = async () => { ...@@ -224,28 +152,8 @@ const handleGetSummary = async () => {
} }
} catch (error) {} } catch (error) {}
document.title = pageTitle; document.title = pageTitle;
window.sessionStorage.setItem("curTabName", pageTitle);
}; };
// 获取报告原文
// const reportUrl = ref("");
// const reportUrlEn = ref("");
// const handleGetReport = async () => {
// try {
// const res = await getDecreeReport({id: route.query.id});
// console.log("报告原文", res);
// if (res.code === 200 && res.data) {
// reportUrl.value = res.data.content;
// reportUrlEn.value = res.data.contentEn;
// }
// } catch (error) {}
// };
// const isShowReport = ref(false);
// const handleCloseReport = () => {
// isShowReport.value = false;
// };
const handleShowReport = () => { const handleShowReport = () => {
const curRoute = router.resolve({ const curRoute = router.resolve({
path: "/decree/decreeOriginal", path: "/decree/decreeOriginal",
...@@ -291,7 +199,6 @@ onMounted(() => { ...@@ -291,7 +199,6 @@ onMounted(() => {
} else if (route.path === "/decreeLayout/influence") { } else if (route.path === "/decreeLayout/influence") {
activeTitle.value = "影响分析"; activeTitle.value = "影响分析";
} }
// handleGetReport();
}); });
</script> </script>
...@@ -312,20 +219,6 @@ onMounted(() => { ...@@ -312,20 +219,6 @@ onMounted(() => {
height: 100%; height: 100%;
background: #f7f8f9; background: #f7f8f9;
.report-close {
position: absolute;
top: 20px;
right: 230px;
width: 20px;
height: 20px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.report-header { .report-header {
width: 100%; width: 100%;
height: 50px; height: 50px;
...@@ -639,130 +532,5 @@ onMounted(() => { ...@@ -639,130 +532,5 @@ onMounted(() => {
background-color: #f7f8f9; background-color: #f7f8f9;
} }
} }
.layout-report-box {
position: absolute;
z-index: 9999;
top: 154px;
left: 0;
width: 100%;
height: 926px;
background: rgba(248, 249, 250, 1);
.report-close {
position: absolute;
top: 24px;
right: 178px;
width: 32px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.report-main {
width: 1600px;
height: 926px;
margin: 0 auto;
background: #fff;
box-sizing: border-box;
padding: 0 69px;
.report-header {
height: 77px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
.report-header-left {
display: flex;
.text {
margin-top: 32px;
width: 70px;
height: 14px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 14px;
}
.select-box {
margin-left: 8px;
margin-top: 23px;
}
}
.report-header-right {
display: flex;
margin-top: 24px;
.btn {
display: flex;
width: 88px;
height: 32px;
margin-left: 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
height: 32px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 32px;
}
}
}
}
.report-content {
display: flex;
margin-top: 35px;
.content-left {
width: 680px;
height: 786px;
img {
width: 100%;
height: 100%;
}
}
.content-right {
margin-left: 89px;
width: 680px;
height: 786px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
} }
</style> </style>
\ No newline at end of file
src/views/marketAccessRestrictions/com/SurveyHistory.vue
浏览文件 @ 172383fa
...@@ -48,7 +48,6 @@ const props = defineProps({ ...@@ -48,7 +48,6 @@ const props = defineProps({
}) })
const onNavigateToDetail = item => { const onNavigateToDetail = item => {
window.sessionStorage.setItem("curTabName", item.searchname);
const curRoute = router.resolve({ const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview", path: "/marketSingleCaseLayout/overview",
query: { id: item.sortcode, searchId: item.searchid } query: { id: item.sortcode, searchId: item.searchid }
......
src/views/marketAccessRestrictions/marketAccessHome/com/CarouselItem232.vue 0 → 100644
浏览文件 @ 172383fa
<template>
<div class="box-text-box">
<div class="box-text-item">
<div class="box-text-left">{{ "启动时间：" }}</div>
<div class="box-text-right one-line-ellipsis">{{ props.baseInfo.searchnum }}</div>
</div>
<div class="box-text-item">
<div class="box-text-left">{{ "调查概括：" }}</div>
<div class="box-text-right two-line-ellipsis">{{ props.baseInfo.product }}</div>
</div>
<div class="box-text-item">
<div class="box-text-left">{{ "调查阶段：" }}</div>
<div class="box-text-right one-line-ellipsis">{{ props.baseInfo.plaintiff }}</div>
</div>
<div class="box-text-item">
<div class="box-text-left">{{ "调查范围：" }}</div>
<div class="box-text-right five-line-ellipsis">{{ props.baseInfo.defendant }}</div>
</div>
</div>
</template>
<script setup name="CarouselItem337">
const props = defineProps({
baseInfo: {
type: Object,
default: () => ({})
}
})
</script>
<style scoped lang="scss">
.box-text-box {
width: 100%;
padding: 20px 20px 0;
height: 185px;
.box-text-item {
display: flex;
align-items: flex-start;
line-height: 30px;
margin-bottom: 8px;
&::before {
content: "";
width: 4px;
height: 4px;
border-radius: 2px;
background: rgba(59, 65, 75, 1);
margin-top: 16px;
margin-right: 12px;
}
.box-text-left {
height: 30px;
width: 100px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: 700;
}
.box-text-right {
min-height: 30px;
width: 20px;
flex: auto;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 16px;
}
.two-line-ellipsis {
max-height: 60px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.five-line-ellipsis {
max-height: 150px;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessHome/com/CarouselItem301.vue 0 → 100644
浏览文件 @ 172383fa
<template>
<div class="box-blue-box">
<div class="box-blue-name">
<div class="box-blue-time">{{ props.baseInfo.progressdate }}</div>
<div class="box-blue-time">{{ props.baseInfo.progressresult }}</div>
</div>
<div class="box-blue-text one-line-ellipsis">{{ props.baseInfo.progressdetails }}</div>
</div>
<div class="box-text-box">
<div class="box-text-item">
<div class="box-text-left">{{ "启动时间：" }}</div>
<div class="box-text-right one-line-ellipsis">{{ props.baseInfo.searchnum }}</div>
</div>
<div class="box-text-item">
<div class="box-text-left">{{ "调查对象：" }}</div>
<div class="box-text-right one-line-ellipsis">{{ props.baseInfo.product }}</div>
</div>
<div class="box-text-item">
<div class="box-text-left">{{ "调查状态：" }}</div>
<div class="box-text-right one-line-ellipsis">{{ props.baseInfo.plaintiff }}</div>
</div>
<div class="box-text-item">
<div class="box-text-left">{{ "请愿方：" }}</div>
<div class="box-text-right three-line-ellipsis">{{ props.baseInfo.product }}</div>
</div>
</div>
</template>
<script setup name="CarouselItem337">
const props = defineProps({
baseInfo: {
type: Object,
default: () => ({})
}
})
</script>
<style scoped lang="scss">
.box-blue-box {
width: 100%;
padding: 0 20px 10px;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.box-blue-name {
height: 38px;
display: flex;
align-items: center;
font-weight: bold;
font-family: Source Han Sans CN;
font-size: 16px;
line-height: 24px;
color: var(--text-primary-80-color);
&::before {
content: "";
width: 4px;
height: 4px;
border-radius: 2px;
background: var(--text-primary-80-color);
margin-right: 12px;
}
.box-blue-time {
height: 24px;
width: 100px;
}
}
.box-blue-text {
padding-left: 18px;
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 16px;
line-height: 30px;
}
}
.box-text-box {
width: 100%;
padding: 20px 20px 0;
height: 185px;
.box-text-item {
display: flex;
align-items: flex-start;
line-height: 30px;
margin-bottom: 8px;
&::before {
content: "";
width: 4px;
height: 4px;
border-radius: 2px;
background: rgba(59, 65, 75, 1);
margin-top: 16px;
margin-right: 12px;
}
.box-text-left {
height: 30px;
width: 100px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: 700;
}
.box-text-right {
min-height: 30px;
width: 20px;
flex: auto;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 16px;
}
.three-line-ellipsis {
max-height: 90px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessHome/com/CarouselItem337.vue 0 → 100644
浏览文件 @ 172383fa
<template>
<div class="box-blue-box">
<div class="box-blue-name">
<div class="box-blue-time">{{ props.baseInfo.progressdate }}</div>
<div class="box-blue-time">{{ props.baseInfo.progressresult }}</div>
</div>
<div class="box-blue-text">{{ props.baseInfo.progressdetails }}</div>
</div>
<div class="box-text-box">
<div class="box-text-item">
<div class="box-text-left">{{ "调查案号：" }}</div>
<div class="box-text-right one-line-ellipsis">{{ props.baseInfo.searchnum }}</div>
</div>
<div class="box-text-item">
<div class="box-text-left">{{ "涉及产品：" }}</div>
<div class="box-text-right one-line-ellipsis">{{ props.baseInfo.product }}</div>
</div>
<div class="box-text-item">
<div class="box-text-left">{{ "原告：" }}</div>
<div class="box-text-right one-line-ellipsis">{{ props.baseInfo.plaintiff }}</div>
</div>
<div class="box-text-item">
<div class="box-text-left">{{ "被告：" }}</div>
<div class="box-text-right one-line-ellipsis">{{ props.baseInfo.defendant }}</div>
</div>
<div class="box-text-item">
<div class="box-text-left">{{ "涉案专利：" }}</div>
<div class="box-text-right one-line-ellipsis">{{ props.baseInfo.patent }}</div>
</div>
</div>
</template>
<script setup name="CarouselItem337">
const props = defineProps({
baseInfo: {
type: Object,
default: () => ({})
}
})
</script>
<style scoped lang="scss">
.box-blue-box {
width: 100%;
padding: 0 20px 10px;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.box-blue-name {
height: 38px;
display: flex;
align-items: center;
font-weight: bold;
font-family: Source Han Sans CN;
font-size: 16px;
line-height: 24px;
color: var(--text-primary-80-color);
&::before {
content: "";
width: 4px;
height: 4px;
border-radius: 2px;
background: var(--text-primary-80-color);
margin-right: 12px;
}
.box-blue-time {
height: 24px;
width: 100px;
}
}
.box-blue-text {
padding-left: 18px;
height: 60px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 16px;
line-height: 30px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
}
.box-text-box {
width: 100%;
padding: 20px 20px 0;
height: 185px;
.box-text-item {
display: flex;
align-items: flex-start;
line-height: 30px;
margin-bottom: 8px;
&::before {
content: "";
width: 4px;
height: 4px;
border-radius: 2px;
background: rgba(59, 65, 75, 1);
margin-top: 16px;
margin-right: 12px;
}
.box-text-left {
height: 30px;
width: 100px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: 700;
}
.box-text-right {
min-height: 30px;
width: 20px;
flex: auto;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 16px;
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ 172383fa
...@@ -7,6 +7,13 @@ ...@@ -7,6 +7,13 @@
<SearchContainer style="margin-bottom: 0;margin-top: 48px; height: fit-content" v-if="containerRef" <SearchContainer style="margin-bottom: 0;margin-top: 48px; height: fit-content" v-if="containerRef"
placeholder="搜索市场准入限制调查" :containerRef="containerRef" areaName="" /> placeholder="搜索市场准入限制调查" :containerRef="containerRef" areaName="" />
</div> </div>
<div class="date-box" v-if="sortInfo.length">
<div class="date-icon">
<img :src="tipsTcon" alt="">
</div>
<div class="date-text">近期美国各联邦政府机构市场准入调查数量汇总</div>
<TimeTabPane @time-click="handleGetStatSort" activeTime="近一年" />
</div>
<div class="home-main-header-card-box"> <div class="home-main-header-card-box">
<div :class="getCardClass(item.sortCode)" v-for="item in sortInfo" :key="item.sortCode" @click="onNavigateToCase(item)"> <div :class="getCardClass(item.sortCode)" v-for="item in sortInfo" :key="item.sortCode" @click="onNavigateToCase(item)">
<div class="header"> <div class="header">
...@@ -19,6 +26,7 @@ ...@@ -19,6 +26,7 @@
{{ item.sortDescription }} {{ item.sortDescription }}
</div> </div>
</div> </div>
<div class="item-dot">+{{ "999" }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -28,81 +36,31 @@ ...@@ -28,81 +36,31 @@
<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/icon_1599.png" alt="" /> <img style="width:100%; height:100%" src="./assets/icons/icon_1599.png" alt="" />
</template> </template>
<div class="box1-left" @click="handleSwithCurSurvey('left')"> <el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never" indicator-position="none">
<LeftBtn />
</div>
<div class="box1-right" @click="handleSwithCurSurvey('right')">
<RightBtn />
</div>
<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
indicator-position="none">
<el-carousel-item v-for="(item, index) in box1DataList" :key="index"> <el-carousel-item v-for="(item, index) in box1DataList" :key="index">
<div class="box1-main"> <div class="box1-main">
<div class="box1-main-header"> <div class="box1-head-box">
<div class="header-left"> <div :class="`box1-head-code box1-tags-${item.searchsort}`">{{ item.searchsort }}调查</div>
{{ item.searchname }} <div class="box1-head-name one-line-ellipsis">{{ item.searchname }}</div>
</div> <div class="box1-head-tags" v-if="item.searchArea.length">
<div class="header-right"> <AreaTag v-for="(val, idx) in item.searchArea.slice(0, 2)" :key="idx" :tagName="val" />
<div class="tag1">{{ item.searchsort }}</div>
<div class="area-tag-box" v-if="item.searchArea.length">
<AreaTag v-for="(val, idx) in item.searchArea" :key="idx" :tagName="val" />
</div>
</div>
</div>
<div class="info-box">
<div class="info-header">
<div class="icon"></div>
<div class="time">{{ item.progressdate }}</div>
<div class="title">{{ item.progressresult }}</div>
</div>
<div class="info-content">
{{ item.progressdetails }}
</div>
</div>
<div class="list-box">
<div class="list-item">
<div class="icon"></div>
<div class="list-left">{{ "调查案号：" }}</div>
<div class="list-right">{{ item.searchnum }}</div>
</div>
<div class="list-item">
<div class="icon"></div>
<div class="list-left">{{ "涉及产品：" }}</div>
<div class="list-right">
{{ item.product }}
</div>
</div>
<div class="list-item">
<div class="icon"></div>
<div class="list-left">{{ "原告：" }}</div>
<div class="list-right">
{{ item.plaintiff }}
</div>
</div>
<div class="list-item">
<div class="icon"></div>
<div class="list-left">{{ "被告：" }}</div>
<div class="list-right">
{{ item.defendant }}
</div>
</div>
<div class="list-item">
<div class="icon"></div>
<div class="list-left">{{ "涉案专利：" }}</div>
<div class="list-right">
{{ item.patent }}
</div>
</div> </div>
</div> </div>
<CarouselItem337 v-if="item.searchsort==337" :baseInfo="item"></CarouselItem337>
<CarouselItem301 v-if="item.searchsort==301" :baseInfo="item"></CarouselItem301>
<CarouselItem232 v-if="item.searchsort==232" :baseInfo="item"></CarouselItem232>
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div class="box1-left" @click="handleSwithCurSurvey('left')"> <LeftBtn /> </div>
<div class="box1-right" @click="handleSwithCurSurvey('right')"> <RightBtn /> </div>
</overviewMainBox> </overviewMainBox>
</div> </div>
<RiskSignal :list="box2Data" @more-click="handleToMoreRiskSignal" @item-click="onNavigateToDetail" postDate="signalTime" name="signalTitle" riskLevel="signalLevel" /> <RiskSignal :list="box2Data" @more-click="handleToMoreRiskSignal" @item-click="onNavigateToDetail" postDate="signalTime" name="signalTitle" riskLevel="signalLevel" />
</div> </div>
<DivideHeader id="position2" class="divide-header" :titleText="'资讯要闻'"></DivideHeader> <DivideHeader id="position2" class="divide-header" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center"> <div class="center-center">
<NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews" <NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews"
...@@ -111,6 +69,7 @@ ...@@ -111,6 +69,7 @@
source="orgName" content="remarks" name="personName" imageUrl="personImage"> source="orgName" content="remarks" name="personName" imageUrl="personImage">
</MessageBubble> </MessageBubble>
</div> </div>
<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader> <DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer"> <div class="center-footer">
<div class="box5"> <div class="box5">
...@@ -121,18 +80,17 @@ ...@@ -121,18 +80,17 @@
<template #header-right> <template #header-right>
<div class="box-header-right"> <div class="box-header-right">
<div class="box5-header-right-btn-box"> <div class="box5-header-right-btn-box">
<div class="right-box" :class="{ rightBoxActive: box5BtnActive === item.value }" <div :class="['right-box', { 'box5-active': box5Active==1 }]" @click="hadleGetStatNum(1)">按月度</div>
v-for="(item, index) in box5BtnList" :key="index" @click="handleChangeBox5Btn(item.value)"> <div :class="['right-box', { 'box5-active': box5Active==12 }]" @click="hadleGetStatNum(12)">按年度</div>
{{ item.name }}
</div>
</div> </div>
</div> </div>
</template> </template>
<div class="box5-main"> <div class="box-echart-main">
<div class="box5-main-chart" id="chart1"></div> <div class="box-echart-content">
<div class="box5-main-footer"> <el-empty v-if="!box5ChartData.title.length" description="暂无数据" style="padding: 100px 0 0;" :image-size="100" />
<TipTab /> <div v-if="box5ChartData.title.length" style="width: 100%; height: 100%;" id="box5Chart"></div>
</div> </div>
<TipTab style="margin-top: 6px;" />
</div> </div>
</OverviewNormalBox> </OverviewNormalBox>
</div> </div>
...@@ -143,18 +101,17 @@ ...@@ -143,18 +101,17 @@
</template> </template>
<template #header-right> <template #header-right>
<div class="box-header-right"> <div class="box-header-right">
<el-select v-model="box6SelectedYear" @change="handleChangeBox6Year" placeholder="选择时间" <el-select v-model="box6SelectedYear" @change="handleChangeBox6Year" placeholder="选择时间" style="width: 120px">
style="width: 120px">
<el-option v-for="item in box7YearList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in box7YearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div> </div>
</template> </template>
<div class="box6-main"> <div class="box-echart-main">
<div class="box-echart-content">
<div class="box6-main-chart" id="chart2"></div> <el-empty v-if="!box6Data.title.length" description="暂无数据" style="padding: 100px 0 0;" :image-size="100" />
<div class="box6-main-footer"> <div v-if="box6Data.title.length" style="width: 100%; height: 100%;" id="box6Chart"></div>
<TipTab />
</div> </div>
<TipTab style="margin-top: 6px;" />
</div> </div>
</OverviewNormalBox> </OverviewNormalBox>
</div> </div>
...@@ -168,25 +125,21 @@ ...@@ -168,25 +125,21 @@
<template #header-right> <template #header-right>
<div class="box-header-right"> <div class="box-header-right">
<div class="box7-header-right-select-box"> <div class="box7-header-right-select-box">
<el-select v-model="box7SelectedSurvey" @change="handleBox7()" placeholder="选择调查" <el-select v-model="box7SelectedSurvey" @change="handleBox7()" placeholder="选择调查" style="width: 120px">
style="width: 120px"> <el-option v-for="item in box8SurveyList" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in box8SurveyList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select> </el-select>
<el-select v-model="box7SelectedYear" @change="handleBox7()" placeholder="选择时间" <el-select v-model="box7SelectedYear" @change="handleBox7()" placeholder="选择时间" style="width: 120px">
style="width: 120px"> <el-option v-for="item in box7YearList" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in box7YearList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select> </el-select>
</div> </div>
</div> </div>
</template> </template>
<div class="box7-main"> <div class="box-echart-main">
<el-empty v-if="box7Data.data.length === 0" description="暂无数据" :image-size="100" /> <div class="box-echart-content">
<div v-if="box7Data.data.length > 0" class="box7-main-chart-box" id="box7Chart"></div> <el-empty v-if="!box7Data.data.length" description="暂无数据" style="padding: 100px 0 0;" :image-size="100" />
<div class="box7-main-footer"> <div v-if="box7Data.data.length" style="width: 100%; height: 100%;" id="box7Chart"></div>
<TipTab />
</div> </div>
<TipTab style="margin-top: 6px;" />
</div> </div>
</OverviewNormalBox> </OverviewNormalBox>
</div> </div>
...@@ -197,22 +150,23 @@ ...@@ -197,22 +150,23 @@
</template> </template>
<template #header-right> <template #header-right>
<div class="box-header-right"> <div class="box-header-right">
<el-select v-model="box8SelectedSurvey" @change="handleBox8()" placeholder="选择调查" <el-select v-model="box8SelectedSurvey" @change="handleGetBox8Data()" placeholder="选择调查" style="width: 120px">
style="width: 120px"> <el-option v-for="item in box8SurveyList" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in box8SurveyList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select> </el-select>
</div> </div>
</template> </template>
<el-empty v-if="box8Data.length === 0" description="暂无数据" :image-size="120" style="padding-top: 100px;" /> <div class="box-echart-main">
<div v-if="box8Data.length" class="box8-main" id="box8Chart"></div> <div class="box-echart-content">
<div class="box8-footer"> <el-empty v-if="!box8Data.length" description="暂无数据" style="padding: 100px 0 0;" :image-size="100" />
<TipTab /> <div v-if="box8Data.length" style="width: 100%; height: 100%;" id="box8Chart"></div>
</div>
<TipTab style="margin-top: 6px;" />
</div> </div>
</OverviewNormalBox> </OverviewNormalBox>
</div> </div>
</div> </div>
</div> </div>
<div class="home-main-footer"> <div class="home-main-footer">
<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader> <DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header"> <div class="home-main-footer-header">
...@@ -317,6 +271,10 @@ import MessageBubble from "@/components/base/messageBubble/index.vue" ...@@ -317,6 +271,10 @@ 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 SurveyHistory from "@/views/marketAccessRestrictions/com/SurveyHistory.vue"
import TimeTabPane from '@/components/base/TimeTabPane/index.vue';
import CarouselItem337 from '@/views/marketAccessRestrictions/marketAccessHome/com/CarouselItem337.vue';
import CarouselItem301 from '@/views/marketAccessRestrictions/marketAccessHome/com/CarouselItem301.vue';
import CarouselItem232 from '@/views/marketAccessRestrictions/marketAccessHome/com/CarouselItem232.vue';
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
import router from "@/router"; import router from "@/router";
...@@ -342,8 +300,9 @@ import { ...@@ -342,8 +300,9 @@ import {
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'; import { useGotoNewsDetail } from '@/router/modules/news';
import tipsTcon from "./assets/icons/tips-icon.png";
const getCardClass = (code) => ['card', `theme-${code}`] const getCardClass = (code) => ['theme-card', `theme-${code}`]
const handleToPosi = id => { const handleToPosi = id => {
const element = document.getElementById(id); const element = document.getElementById(id);
...@@ -370,8 +329,9 @@ const handleToPosi = id => { ...@@ -370,8 +329,9 @@ const handleToPosi = id => {
let containerRef = ref(null); let containerRef = ref(null);
// 首页分类 // 首页分类
const sortInfo = ref([{}]); const sortInfo = ref([]);
const handleGetStatSort = async () => { const handleGetStatSort = async (event) => {
console.log('周期筛选', event)
try { try {
const res = await getStatSort(); const res = await getStatSort();
console.log("首页分类", res); console.log("首页分类", res);
...@@ -402,7 +362,6 @@ const handleClickToDetail = () => { ...@@ -402,7 +362,6 @@ const handleClickToDetail = () => {
// 跳转调查案件 // 跳转调查案件
const onNavigateToCase = (item) => { const onNavigateToCase = (item) => {
window.sessionStorage.setItem("curTabName", item.sortName);
const route = router.resolve({ const route = router.resolve({
path: "/marketAccessLayout", path: "/marketAccessLayout",
query: { id: item.sortCode } query: { id: item.sortCode }
...@@ -550,22 +509,6 @@ const handleClickPerson = async item => { ...@@ -550,22 +509,6 @@ const handleClickPerson = async item => {
} catch (error) { } } catch (error) { }
}; };
// 调查数量
const box5BtnList = ref([
{
name: "按月度",
value: 1
},
{
name: "按年度",
value: 12
}
]);
const box5BtnActive = ref(1);
const handleChangeBox5Btn = val => {
box5BtnActive.value = val;
handleBox5();
};
function transformAllData(originalData) { function transformAllData(originalData) {
// 1. 提取所有年份并去重，排除null和undefined，然后按数字升序排序 // 1. 提取所有年份并去重，排除null和undefined，然后按数字升序排序
const allYears = [ const allYears = [
...@@ -658,44 +601,30 @@ function transformAllData1(originalData) { ...@@ -658,44 +601,30 @@ function transformAllData1(originalData) {
} }
const box5ChartData = ref({ const box5ChartData = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"], title: [],
data: [ data: [
{ { name: "337调查", value: [] },
name: "337调查", { name: "301调查", value: [] },
value: [73, 32, 42, 48, 38, 49, 63, 75, 70, 86, 95, 87] { name: "232调查", value: [] }
},
{
name: "301调查",
value: [8, 3, 2, 8, 9, 10, 12, 18, 16, 18, 20, 22]
},
{
name: "232调查",
value: [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 2, 3]
}
] ]
}); });
const hadleGetStatNum = async () => { const box5Active = ref(1);
const params = { const hadleGetStatNum = async (event) => {
byYorM: box5BtnActive.value // 月度：1 年度：12 if (event) box5Active.value = event;
};
try { try {
const res = await getStatNum(params); let byYorM = box5Active.value
const res = await getStatNum({byYorM});
console.log("调查数量", res); console.log("调查数量", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
if (box5BtnActive.value === 1) { if (byYorM === 1) {
box5ChartData.value = transformAllData1(res.data); box5ChartData.value = transformAllData1(res.data);
} else { } else {
box5ChartData.value = transformAllData(res.data); box5ChartData.value = transformAllData(res.data);
} }
console.log("box5ChartData", box5ChartData.value);
} }
} catch (error) { } } catch (error) {}
}; let box5Chart = getMultiLineChart(box5ChartData.value);
nextTick(() => { setChart(box5Chart, "box5Chart") })
const handleBox5 = async () => {
await hadleGetStatNum();
let chart1 = getMultiLineChart(box5ChartData.value);
setChart(chart1, "chart1");
}; };
// 制裁领域分布 // 制裁领域分布
...@@ -706,18 +635,9 @@ const handleChangeBox6Year = () => { ...@@ -706,18 +635,9 @@ const handleChangeBox6Year = () => {
const box6Data = ref({ const box6Data = ref({
title: [], title: [],
data: [ data: [
{ { name: "337调查", value: [] },
name: "337调查", { name: "232调查", value: [] },
value: [] { name: "301调查", value: [] }
},
{
name: "232调查",
value: []
},
{
name: "301调查",
value: []
}
], ],
maxNum: 0 maxNum: 0
}); });
...@@ -789,8 +709,8 @@ const handleGetStatArea = async () => { ...@@ -789,8 +709,8 @@ const handleGetStatArea = async () => {
}; };
const handleBox6 = async () => { const handleBox6 = async () => {
await handleGetStatArea(); await handleGetStatArea();
let chart2 = getRadarChart(box6Data.value); let box6Chart = getRadarChart(box6Data.value);
setChart(chart2, "chart2"); setChart(box6Chart, "box6Chart");
}; };
// 受调查国家分布 // 受调查国家分布
...@@ -852,24 +772,16 @@ const handleGetBox8Data = async () => { ...@@ -852,24 +772,16 @@ const handleGetBox8Data = async () => {
const res = await getSearchResult({sortCode: box8SelectedSurvey.value}); const res = await getSearchResult({sortCode: box8SelectedSurvey.value});
console.log("调查结果分布", res); console.log("调查结果分布", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
box8Data.value = res.data.map(item => { box8Data.value = res.data.map(item => ({ name: item.RESULTNAME, value: item.RESULTNUM }))
return {
name: item.RESULTNAME,
value: item.RESULTNUM
}
})
} else { } else {
box8Data.value = [] box8Data.value = []
} }
} catch (error) { } catch (error) {
console.error(error); box8Data.value = []
} }
};
const handleBox8 = async () => {
await handleGetBox8Data()
const box8Chart = getPieChart(box8Data.value); const box8Chart = getPieChart(box8Data.value);
setChart(box8Chart, "box8Chart"); nextTick(() => { setChart(box8Chart, "box8Chart") })
} };
// 资源库 // 资源库
const pageSize = ref(10); const pageSize = ref(10);
...@@ -1034,10 +946,10 @@ onMounted(async () => { ...@@ -1034,10 +946,10 @@ onMounted(async () => {
handleGetBox2Data(); handleGetBox2Data();
handleGetBox3Data(); handleGetBox3Data();
handleGetBox4Data(); handleGetBox4Data();
handleBox5(); hadleGetStatNum();
handleBox6(); handleBox6();
handleBox7(); handleBox7();
handleBox8(); handleGetBox8Data();
handleGetAllSearchCountry() handleGetAllSearchCountry()
handleGetInsList() handleGetInsList()
handleGetSearchAllArea(); handleGetSearchAllArea();
...@@ -1050,6 +962,19 @@ onMounted(async () => { ...@@ -1050,6 +962,19 @@ onMounted(async () => {
box-shadow: none; box-shadow: none;
} }
.box-echart-main {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 8px 22px 20px;
.box-echart-content {
width: 100%;
height: 20px;
flex: auto;
}
}
.home-wrapper { .home-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -1164,15 +1089,42 @@ onMounted(async () => { ...@@ -1164,15 +1089,42 @@ onMounted(async () => {
} }
} }
.date-box {
display: flex;
align-items: center;
width: 1600px;
margin-top: 48px;
.date-icon {
width: 16px;
height: 16px;
font-size: 0px;
margin-right: 6px;
img {
width: 100%;
height: 100%;
}
}
.date-text {
width: 20px;
flex: auto;
font-size: 18px;
line-height: 18px;
font-family: Source Han Sans CN;
color: var(--text-primary-80-color);
}
}
.home-main-header-card-box { .home-main-header-card-box {
width: 1600px; width: 1600px;
margin: 0 auto; margin: 20px auto 0;
height: 142px; height: 142px;
margin-top: 64px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.card { .theme-card {
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 520px; width: 520px;
height: 142px; height: 142px;
...@@ -1185,13 +1137,26 @@ onMounted(async () => { ...@@ -1185,13 +1137,26 @@ onMounted(async () => {
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
z-index: 99;
left: 0; left: 0;
top: 15px; top: 15px;
width: 4px; width: 4px;
height: 111px; height: 111px;
} }
.item-dot {
position: absolute;
right: -13px;
top: -10px;
padding: 4px 8px 6px;
background-color: #FF4D4F;
color: white;
font-size: 16px;
line-height: 16px;
font-family: Source Han Sans CN;
border-radius: 14px;
letter-spacing: 1px;
}
.header { .header {
height: 56px; height: 56px;
display: flex; display: flex;
...@@ -1291,7 +1256,6 @@ onMounted(async () => { ...@@ -1291,7 +1256,6 @@ onMounted(async () => {
.box1-left { .box1-left {
position: absolute; position: absolute;
left: 0; left: 0;
z-index: 9999;
top: 220px; top: 220px;
width: 24px; width: 24px;
height: 48px; height: 48px;
...@@ -1307,7 +1271,6 @@ onMounted(async () => { ...@@ -1307,7 +1271,6 @@ onMounted(async () => {
position: absolute; position: absolute;
right: 0; right: 0;
top: 220px; top: 220px;
z-index: 9999;
width: 24px; width: 24px;
height: 48px; height: 48px;
cursor: pointer; cursor: pointer;
...@@ -1326,19 +1289,16 @@ onMounted(async () => { ...@@ -1326,19 +1289,16 @@ onMounted(async () => {
.box1-header-left { .box1-header-left {
display: flex; display: flex;
.icon { .icon {
width: 19px; width: 19px;
height: 18px; height: 18px;
margin-top: 15px; margin-top: 15px;
margin-left: 22px; margin-left: 22px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.title { .title {
width: 112px; width: 112px;
height: 48px; height: 48px;
...@@ -1367,166 +1327,53 @@ onMounted(async () => { ...@@ -1367,166 +1327,53 @@ onMounted(async () => {
} }
.box1-main { .box1-main {
width: 1064px; width: 100%;
height: 354px; height: 354px;
margin-top: 16px; padding: 0 40px;
margin-left: 31px; .box1-head-box {
width: 100%;
.box1-main-header {
width: 990px;
height: 60px; height: 60px;
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
.header-left { .box1-head-code {
width: 660px; height: 26px;
padding-left: 22px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: 700;
line-height: 26px; line-height: 26px;
font-size: 14px;
padding: 0 8px;
font-family: Microsoft YaHei;
border-radius: 4px;
font-weight: bold;
margin-right: 10px;
} }
.box1-tags-337 {
.header-right { border: 1px solid #91caff;
display: flex; background: #e6f4ff;
width: 320px; color: #055fc2;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
.tag1 {
height: 24px;
line-height: 24px;
padding: 0 8px;
box-sizing: border-box;
color: var(--color-main-active);
border: 1px solid rgba(145, 202, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
}
.area-tag-box {
flex: 1;
margin-left: 8px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
} }
} .box1-tags-232 {
border: 1px solid #b37feb;
.info-box { background: #f9f0ff;
margin-left: 6px; color: #722ed1;
width: 989px;
height: 108px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.info-header {
height: 38px;
display: flex;
.icon {
width: 4px;
height: 4px;
border-radius: 2px;
background: rgba(59, 65, 75, 1);
margin-left: 24px;
margin-top: 20px;
}
.time {
width: 200px;
height: 24px;
margin-top: 10px;
margin-left: 12px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.title {
width: 200px;
margin-left: 11px;
margin-top: 10px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
} }
.box1-tags-301 {
.info-content { border: 1px solid #ffd591;
width: 909px; background: #fff7e6;
height: 60px; color: #fa8c16;
color: rgba(59, 65, 75, 1); }
.box1-head-name {
width: 20px;
flex: auto;
color: var(--color-main-active);
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-size: 16px; font-size: 20px;
font-weight: 400; font-weight: bold;
line-height: 30px; line-height: 26px;
margin-left: 41px;
margin-top: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
} }
} .box1-head-tags {
margin-left: 40px;
.list-box {
margin-top: 18px;
margin-left: 28px;
width: 940px;
height: 185px;
overflow: hidden;
overflow-y: auto;
.list-item {
height: 37px;
display: flex; display: flex;
gap: 8px;
.icon {
width: 4px;
height: 4px;
border-radius: 2px;
background: rgba(59, 65, 75, 1);
margin-top: 16px;
}
.list-left {
margin-left: 18px;
line-height: 37px;
width: 80px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: 700;
text-align: right;
}
.list-right {
line-height: 37px;
margin-left: 17px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: 400;
width: 820px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
} }
} }
...@@ -1535,9 +1382,6 @@ onMounted(async () => { ...@@ -1535,9 +1382,6 @@ onMounted(async () => {
.box2 { .box2 {
width: 521px; width: 521px;
height: 450px; height: 450px;
// border-radius: 10px;
// box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
// background: rgba(255, 255, 255, 1);
position: relative; position: relative;
.box2-header { .box2-header {
...@@ -1891,7 +1735,7 @@ onMounted(async () => { ...@@ -1891,7 +1735,7 @@ onMounted(async () => {
cursor: pointer; cursor: pointer;
} }
.rightBoxActive { .box5-active {
color: var(--color-main-active); color: var(--color-main-active);
border: 1px solid var(--color-main-active); border: 1px solid var(--color-main-active);
border-radius: 4px; border-radius: 4px;
...@@ -1899,17 +1743,6 @@ onMounted(async () => { ...@@ -1899,17 +1743,6 @@ onMounted(async () => {
} }
} }
} }
.box5-main {
height: 410px;
position: relative;
z-index: 0;
.box5-main-chart {
height: 370px;
}
}
} }
.box6 { .box6 {
...@@ -1922,25 +1755,6 @@ onMounted(async () => { ...@@ -1922,25 +1755,6 @@ onMounted(async () => {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
}
.box6-main {
height: 360px;
position: relative;
.box6-main-chart {
height: 370px;
position: relative;
z-index: 99;
}
.box6-main-footer {
width: 100%;
height: 40px;
}
} }
} }
} }
...@@ -1967,18 +1781,6 @@ onMounted(async () => { ...@@ -1967,18 +1781,6 @@ onMounted(async () => {
gap: 12px; gap: 12px;
} }
} }
.box7-main {
height: 412px;
.box7-main-chart-box {
height: 372px;
}
.box7-main-footer {
height: 40px;
}
}
} }
.box8 { .box8 {
...@@ -1991,17 +1793,6 @@ onMounted(async () => { ...@@ -1991,17 +1793,6 @@ onMounted(async () => {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
}
.box8-main {
width: calc(100% - 40px);
margin: 0 auto;
height: 360px;
}
.box8-footer {
height: 40px;
} }
} }
} }
......
src/views/marketAccessRestrictions/marketAccessHome/utils/barChart1.js
浏览文件 @ 172383fa
...@@ -5,10 +5,12 @@ const getBarChart = (nameList, valueList) => { ...@@ -5,10 +5,12 @@ const getBarChart = (nameList, valueList) => {
const option = { const option = {
tooltip: {}, tooltip: {},
grid: { grid: {
top: '8%', width: '100%',
right: 24, height: '83%',
bottom: 24, top: '15%',
left: 24, right: '5%',
bottom: '2%',
left: '1%',
containLabel: true containLabel: true
}, },
yAxis: { yAxis: {
......
src/views/marketAccessRestrictions/marketAccessHome/utils/multiLineChart.js
浏览文件 @ 172383fa
import * as echarts from 'echarts' import * as echarts from 'echarts'
const getMultiLineChart = (data) => { const getMultiLineChart = (data) => {
console.log('dataaaa', data);
return { return {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'item',
axisPointer: { axisPointer: {
type: 'cross', type: 'cross',
label: { label: {
...@@ -14,44 +12,79 @@ const getMultiLineChart = (data) => { ...@@ -14,44 +12,79 @@ const getMultiLineChart = (data) => {
} }
}, },
grid: { grid: {
top: 48, width: '95%',
right: 24, height: '83%',
bottom: 24, top: '15%',
left: 24, left: '1%',
containLabel: true containLabel: true
}, },
legend: { legend: {
show: true, show: true,
top: 10, top: 10,
left: '10%' icon: 'circle',
textStyle: {
color: 'rgba(95, 101, 108, 1)',
fontFamily: 'Microsoft YaHei',
fontSize: '14px',
}
}, },
color: ['#0A57A6', '#FA8C16', '#722ED1'], color: ['#0A57A6', '#FA8C16', '#722ED1'],
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: data.title data: data.title,
axisLine: {
show: true,
lineStyle: {
color: '#e7f3ff',
},
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(95, 101, 108, 1)',
fontFamily: 'Microsoft YaHei',
fontsize: 14,
}
}
} }
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
position: 'left',
name: '数量', name: '数量',
nameLocation: 'end',
nameGap: 12,
nameTextStyle: {
color: '#666',
fontSize: 14,
fontWeight: 400,
padding: [0, 0, 6, -20]
},
axisLabel: {
formatter: '{value}',
color: '#666',
fontSize: 14,
fontWeight: 400
},
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed', // 虚线类型 color: '#e7f3ff',
color: 'rgb(231, 243, 255)', // 灰色线条 type: 'dashed',
width: 1 // 线宽为1
} }
} },
} }
], ],
series: [ series: [
{ {
name: data.data[0]?.name, name: data.data[0]?.name,
type: 'line', type: 'line',
smooth: true,
symbol: 'emptyCircle',
symbolSize: 6,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
...@@ -69,6 +102,9 @@ const getMultiLineChart = (data) => { ...@@ -69,6 +102,9 @@ const getMultiLineChart = (data) => {
{ {
name: data.data[1]?.name, name: data.data[1]?.name,
type: 'line', type: 'line',
smooth: true,
symbol: 'emptyCircle',
symbolSize: 6,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
...@@ -86,6 +122,9 @@ const getMultiLineChart = (data) => { ...@@ -86,6 +122,9 @@ const getMultiLineChart = (data) => {
{ {
name: data.data[2]?.name, name: data.data[2]?.name,
type: 'line', type: 'line',
smooth: true,
symbol: 'emptyCircle',
symbolSize: 6,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
......
src/views/marketAccessRestrictions/marketAccessLayout/case/337/index.vue
浏览文件 @ 172383fa
...@@ -200,8 +200,8 @@ const handleFetchSurveyList = async () => { ...@@ -200,8 +200,8 @@ const handleFetchSurveyList = async () => {
publishYear: checkedYearList.value.join(',') || null, publishYear: checkedYearList.value.join(',') || null,
Area: checkedAreaList.value.join(',') || null, Area: checkedAreaList.value.join(',') || null,
searchCountry: checkedCountryList.value.join(',') || null, searchCountry: checkedCountryList.value.join(',') || null,
caseStatus: filterStage.value ? filterStage.value : null, caseStatus: filterStage.value || null,
keywords: searchText.value ? searchText.value : null, keywords: searchText.value || null,
sortField: "date", sortField: "date",
sortOrder: isSort.value ? "asc" : "desc" sortOrder: isSort.value ? "asc" : "desc"
}; };
......
src/views/marketAccessRestrictions/marketAccessLayout/index.vue
浏览文件 @ 172383fa
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
<div class="page-top"> <div class="page-top">
<div class="head-box"> <div class="head-box">
<div class="head-icon"> <div class="head-icon">
<img :src="curSurvey.image" alt="" /> <img :src="codeInfo.sortImageUrl || Img337" alt="" />
</div> </div>
<div class="head-info"> <div class="head-info">
<div class="head-name one-line-ellipsis">{{ curSurvey.title }}</div> <div class="head-name one-line-ellipsis">{{ codeInfo.sortName }}</div>
<div class="head-text one-line-ellipsis">{{ curSurvey.desc }}</div> <div class="head-text one-line-ellipsis">{{ codeInfo.sortDescription }}</div>
</div> </div>
<!-- <div class="head-button"> <!-- <div class="head-button">
<div class="button-icon"> <div class="button-icon">
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, onMounted } from "vue"; import { ref, onMounted, reactive } from "vue";
import router from "@/router/index"; import router from "@/router/index";
import icon1 from "./assets/icons/icon1.svg"; import icon1 from "./assets/icons/icon1.svg";
import icon1Active from "./assets/icons/icon1_active.svg"; import icon1Active from "./assets/icons/icon1_active.svg";
...@@ -44,6 +44,7 @@ import icon2Active from "./assets/icons/icon2_active.svg"; ...@@ -44,6 +44,7 @@ import icon2Active from "./assets/icons/icon2_active.svg";
import Img337 from "./assets/images/337.png"; import Img337 from "./assets/images/337.png";
import Img232 from "./assets/images/232.png"; import Img232 from "./assets/images/232.png";
import Img301 from "./assets/images/301.png"; import Img301 from "./assets/images/301.png";
import { getSurvyInfo } from "@/api/marketAccessRestrictions/index.js"
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();
...@@ -63,27 +64,23 @@ const tabList = ref([ ...@@ -63,27 +64,23 @@ const tabList = ref([
} }
]); ]);
const curSurvey = computed(() => { const curSurvey = [
if (route.query.id === "301") { {
return { title: "301调查",
title: "301调查", desc: '由美国贸易代表办公室依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"发起的调查',
desc: '由美国贸易代表办公室依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"发起的调查', image: Img301,
image: Img301, },
}; {
} else if (route.query.id === "232") {
return {
title: "232调查", title: "232调查",
desc: "依据《1962年贸易扩展法》第232条款，授权美国商务部对“特定进口产品是否威胁或损害美国国家安全”而开展的全面调查。", desc: "依据《1962年贸易扩展法》第232条款，授权美国商务部对“特定进口产品是否威胁或损害美国国家安全”而开展的全面调查。",
image: Img232, image: Img232,
}; },
} else { {
return { title: "337调查",
title: "337调查", desc: '美国国际贸易委员会根据《1930年关税法》第337节及相关修正案进行的调查，主要针对进口贸易中的知识产权侵权行为以及其他不公平竞争行为',
desc: '美国国际贸易委员会根据《1930年关税法》第337节及相关修正案进行的调查，主要针对进口贸易中的知识产权侵权行为以及其他不公平竞争行为', image: Img337,
image: Img337,
};
} }
}); ]
const activeName = ref("调查案件"); const activeName = ref("调查案件");
const handleClickBtn = item => { const handleClickBtn = item => {
...@@ -94,7 +91,23 @@ const handleClickBtn = item => { ...@@ -94,7 +91,23 @@ const handleClickBtn = item => {
}); });
}; };
const codeInfo = reactive({
sortCode: route.query.id,
sortName: "调查主页",
sortImageUrl: "",
sortDescription: "",
})
const onSurvyInfo = async () => {
const res = await getSurvyInfo({sortCode: route.query.id})
console.log("调查分类信息", res)
if (res.code == 200) {
Object.assign(codeInfo, res.data)
}
document.title = codeInfo.sortName;
}
onMounted(() => { onMounted(() => {
onSurvyInfo()
if (route.path === "/marketAccessLayout/overview") { if (route.path === "/marketAccessLayout/overview") {
activeName.value = "数据统计"; activeName.value = "数据统计";
} else { } else {
...@@ -141,6 +154,7 @@ onMounted(() => { ...@@ -141,6 +154,7 @@ onMounted(() => {
line-height: 26px; line-height: 26px;
} }
.head-text { .head-text {
margin-top: 4px;
width: 100%; width: 100%;
height: 24px; height: 24px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
......
src/views/marketAccessRestrictions/singleCaseLayout/index.vue
浏览文件 @ 172383fa
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
<div class="page-top"> <div class="page-top">
<div class="head-box"> <div class="head-box">
<div class="head-icon"> <div class="head-icon">
<img :src="curSurvey.image" alt="" /> <img :src="codeInfo.sortImageUrl || Img337" alt="" />
</div> </div>
<div class="head-info"> <div class="head-info">
<div class="head-name one-line-ellipsis">{{ curSurvey.title }}</div> <div class="head-name one-line-ellipsis">{{ baseInfo.SEARCHNAME }}</div>
<div class="head-text">{{ curSurvey.time }}</div> <div class="head-text">{{ baseInfo.SEARCHDATE }}</div>
</div> </div>
<div :class="`item-tag tag-${curSurvey.name}`">{{ curSurvey.name }}调查</div> <div :class="`item-tag tag-${codeInfo.sortCode}`">{{ codeInfo.sortName }}</div>
</div> </div>
<div class="page-tabs"> <div class="page-tabs">
<div :class="['tab-item', {'tab-active': activeName==item.name}]" v-for="(item, index) in tabList" :key="index" @click="handleClickBtn(item)"> <div :class="['tab-item', {'tab-active': activeName==item.name}]" v-for="(item, index) in tabList" :key="index" @click="handleClickBtn(item)">
...@@ -37,15 +37,14 @@ ...@@ -37,15 +37,14 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, computed } from "vue"; import { ref, onMounted, reactive } 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 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 Img337 from "./assets/images/337.png";
import Img232 from "./assets/images/232.png"; import { getSurvyInfo, getSearchBlurb } from "@/api/marketAccessRestrictions/index.js"
import Img301 from "./assets/images/301.png";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();
...@@ -64,39 +63,6 @@ const tabList = ref([ ...@@ -64,39 +63,6 @@ const tabList = ref([
} }
]); ]);
const surveyList = ref([
{
title: "337-TA-1443：外国制造的半导体器件及其下游产品和组件",
time: "2025年7月18日",
image: Img337,
name: "337"
},
{
title: "231-TA-1225：进口药及进口原材料的调查",
time: "2021年9月21日",
image: Img232,
name: "232"
},
{
title: "美国贸易代表第301条关于中国针对海事、物流和造船业以争取主导地位的行动",
time: "2025年4月17日",
image: Img301,
name: "301"
}
]);
const curSurvey = computed(() => {
let survey;
if (route.query.id === "232") {
survey = surveyList.value[1];
} else if (route.query.id === "301") {
survey = surveyList.value[2];
} else {
survey = surveyList.value[0];
}
return survey;
});
const activeName = ref("调查案件"); const activeName = ref("调查案件");
const handleClickBtn = item => { const handleClickBtn = item => {
activeName.value = item.name; activeName.value = item.name;
...@@ -106,8 +72,36 @@ const handleClickBtn = item => { ...@@ -106,8 +72,36 @@ const handleClickBtn = item => {
}); });
}; };
const codeInfo = reactive({
sortCode: route.query.id,
sortName: "",
sortImageUrl: "",
})
const onSurvyInfo = async () => {
const res = await getSurvyInfo({sortCode: route.query.id})
console.log("调查分类信息", res)
if (res.code == 200) {
Object.assign(codeInfo, res.data)
}
}
const baseInfo = reactive({
SEARCHNAME: "调查详情",
SEARCHDATE: "",
})
const onSearchBlurb = async () => {
const res = await getSearchBlurb({sortCode: route.query.id, searchId: route.query.searchId})
console.log("调查简介", res)
if (res.code == 200) {
baseInfo.SEARCHNAME = res.data.SEARCHNAME
baseInfo.SEARCHDATE = res.data.SEARCHDATE
}
document.title = baseInfo.SEARCHNAME;
}
onMounted(() => { onMounted(() => {
console.log('route', route); onSurvyInfo()
onSearchBlurb()
if (route.path === "/marketSingleCaseLayout/deepdig") { if (route.path === "/marketSingleCaseLayout/deepdig") {
activeName.value = "影响分析"; activeName.value = "影响分析";
} else { } else {
...@@ -154,6 +148,7 @@ onMounted(() => { ...@@ -154,6 +148,7 @@ onMounted(() => {
line-height: 26px; line-height: 26px;
} }
.head-text { .head-text {
margin-top: 4px;
width: 100%; width: 100%;
height: 24px; height: 24px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论