提交 a9b6e85f authored 作者: liujq23's avatar liujq23

Merge branch 'master' into liujunqiang

差异被折叠。
// 法案相关
import BillHome from "@/views/bill/billHome/index.vue";
import BillLayoutContainer from "@/views/bill/billLayout/index.vue";
import BillLayout from "@/views/bill/index.vue";
import BillIntroduction from "@/views/bill/introdoction/index.vue";
import BillBackground from "@/views/bill/background/index.vue";
import BillTemplate from "@/views/bill/template/index.vue";
import BillDeepDigLayout from "@/views/bill/deepDig/index.vue";
import BillDeepDigProcessOverview from "@/views/bill/deepDig/processOverview/index.vue";
import BillDeepDigProcessAnalysis from "@/views/bill/deepDig/processAnalysis/index.vue";
import BillDeepDigPoliContribution from "@/views/bill/deepDig/poliContribution/index.vue";
import BillInfluenceLayout from "@/views/bill/influence/index.vue";
import BillInfluenceIndustry from "@/views/bill/influence/industry/index.vue";
import BillInfluenceScientificResearch from "@/views/bill/influence/scientificResearch/index.vue";
import BillRelevantCircumstance from "@/views/bill/relevantCircumstance/index.vue";
const billRoutes = [
// 法案系统路由
{
path: "/billHome",
name: "BillHome",
component: BillHome,
meta: {
title: "法案首页"
}
},
{
path: "/billLayout",
name: "BillLayoutContainer",
component: BillLayoutContainer,
redirect: "/billLayout/bill",
meta: {
title: "法案布局"
},
children: [
// 法案分析路由
{
path: "bill",
name: "BillLayout",
component: BillLayout,
redirect: "/billLayout/bill/introduction",
meta: {
title: "法案分析"
},
children: [
{
path: "introduction",
name: "BillIntroduction",
component: BillIntroduction,
meta: { title: "法案简介" }
},
{
path: "background",
name: "BillBackground",
component: BillBackground,
meta: { title: "法案背景" }
},
{
path: "template",
name: "BillTemplate",
component: BillTemplate,
meta: { title: "内容概要" }
}
]
},
// 深度挖掘路由
{
path: "deepDig",
name: "BillDeepDigLayout",
component: BillDeepDigLayout,
redirect: "/billLayout/deepDig/processOverview",
meta: {
title: "深度挖掘"
},
children: [
{
path: "processOverview",
name: "BillDeepDigProcessOverview",
component: BillDeepDigProcessOverview,
meta: { title: "流程概要" }
},
{
path: "processAnalysis",
name: "BillDeepDigProcessAnalysis",
component: BillDeepDigProcessAnalysis,
meta: { title: "流程分析" }
},
{
path: "poliContribution",
name: "BillDeepDigPoliContribution",
component: BillDeepDigPoliContribution,
meta: { title: "政治献金" }
}
]
},
// 影响分析路由
{
path: "influence",
name: "BillInfluenceLayout",
component: BillInfluenceLayout,
redirect: "/billLayout/influence/industry",
meta: {
title: "影响分析"
},
children: [
{
path: "industry",
name: "BillInfluenceIndustry",
component: BillInfluenceIndustry,
meta: { title: "对华产业影响" }
},
{
path: "scientificResearch",
name: "BillInfluenceScientificResearch",
component: BillInfluenceScientificResearch,
meta: { title: "对华科研影响" }
}
]
},
{
path: "relevantCircumstance",
name: "BillRelevantCircumstance",
component: BillRelevantCircumstance,
meta: {
title: "相关情况"
}
}
]
},
]
export default billRoutes
\ No newline at end of file
// 综合搜索
import ComprehensiveSearch from '@/views/comprehensiveSearch/index.vue'
import SearchResults from '@/views/comprehensiveSearch/searchResults/index.vue'
import Chat from '@/views/comprehensiveSearch/chat/index.vue'
const comprehensiveSearchRoutes = [
// 综合搜索
{
path: "/comprehensiveSearch",
name: "comprehensiveSearch",
component: ComprehensiveSearch,
meta: {
title: "综合搜索"
}
},
{
path: "/searchResults",
name: "searchResults",
component: SearchResults,
meta: {
title: "搜索结果"
}
},
{
path: "/chat",
name: "chat",
component: Chat,
meta: {
title: "智能问答"
}
},
]
export default comprehensiveSearchRoutes
\ No newline at end of file
// 合作限制
import CooperationRestrictions from "@/views/coopRestriction/index.vue";
import CooperationRestrictionsDetail from "@/views/coopRestriction/detail/index.vue";
const cooperationRestrictionsRoutes = [
// 合作限制
{
path: "/cooperationRestrictions",
name: "CooperationRestrictions",
component: CooperationRestrictions,
meta: {
title: "合作限制"
}
},
// 合作限制详情
{
path: "/coopRestriction/detail",
name: "CooperationRestrictionsDetail",
component: CooperationRestrictionsDetail,
meta: {
title: "合作限制详情"
}
},
]
export default cooperationRestrictionsRoutes
\ No newline at end of file
// 政令
import Decree from "@/views/decree/decreeHome/index.vue";
import DecreeLayoutContainer from "@/views/decree/decreeLayout/index.vue";
import DecreeOverviewLayout from "@/views/decree/decreeLayout/overview/index.vue";
import DecreeIntroduction from "@/views/decree/decreeLayout/overview/introduction/index.vue";
import DecreeBackground from "@/views/decree/decreeLayout/overview/background/index.vue";
import DecreeDeepDig from "@/views/decree/decreeLayout/deepdig/index.vue";
import DecreeInfluence from "@/views/decree/decreeLayout/influence/index.vue";
const decreeRoutes = [
// 政令首页
{
path: "/decree",
name: "Decree",
component: Decree,
meta: {
title: "政令"
}
},
{
path: "/decreeLayout",
name: "DecreeLayoutContainer",
component: DecreeLayoutContainer,
redirect: "/decreeLayout/overview",
meta: {
title: "政令布局"
},
children: [
{
path: "overview",
name: "DecreeOverviewLayout",
component: DecreeOverviewLayout,
redirect: "/decreeLayout/overview/introduction",
meta: {
title: "政令概况"
},
children: [
{
path: "introduction",
name: "DecreeIntroduction",
component: DecreeIntroduction,
meta: { title: "政令简介" }
},
{
path: "background",
name: "DecreeBackground",
component: DecreeBackground,
meta: { title: "政令背景" }
}
]
},
// 深度挖掘路由
{
path: "deepDig",
name: "DeepDig",
component: DecreeDeepDig,
meta: {
title: "深度挖掘"
}
},
// 影响分析路由
{
path: "influence",
name: "DecreeInfluence",
component: DecreeInfluence,
meta: {
title: "影响分析"
}
}
]
},
]
export default decreeRoutes
\ No newline at end of file
// 出口管制
import ExportControl from "@/views/exportControl/index.vue";
const exportControlRoutes = [
// 出口管制首页
{
path: "/exportControl",
name: "ExportControl",
component: ExportControl,
meta: {
title: "出口管制"
}
},
{
path: "/exportControl/analysis",
name: "analysis",
component: () => import("@/views/exportControl/analysis/index.vue"),
meta: {
title: "分析页"
}
},
{
path: "/exportControl/infoplatform",
name: "infoplatform",
component: () => import("@/views/exportControl/infoPlatform/index.vue"),
meta: {
title: "信息平台"
}
},
{
path: "/exportControl/rulelimit",
name: "rulelimit",
component: () => import("@/views/exportControl/ruleLimit/index.vue"),
meta: {
title: "规则限制"
}
},
{
path: "/exportControl/ruledetail",
name: "ruledetail",
component: () => import("@/views/exportControl/ruleDetail/index.vue"),
meta: {
title: "规则详情"
}
},
{
path: "/exportControl/researchfunding",
name: "researchfunding",
component: () => import("@/views/exportControl/researchFunding/index.vue"),
meta: {
title: "科研资助"
}
},
]
export default exportControlRoutes
\ No newline at end of file
// 投融资限制
import Finance from "@/views/finance/index.vue";
const financeRoutes = [
// 投融资限制
{
path: "/finance",
name: "finance",
component: Finance,
meta: {
title: "投融资限制"
}
},
]
export default financeRoutes
\ No newline at end of file
// 市场准入限制
import MarketAccessRestrictions from "@/views/marketAccessRestrictions/marketAccessHome/index.vue";
import MarketAccessLayout from "@/views/marketAccessRestrictions/marketAccessLayout/index.vue";
import MarketAccessOverview from "@/views/marketAccessRestrictions/marketAccessLayout/overview/index.vue";
import MarketAccessDeepdig from "@/views/marketAccessRestrictions/marketAccessLayout/deepdig/index.vue"
import MarketAccessCase from "@/views/marketAccessRestrictions/marketAccessLayout/case/index.vue";
import MarketSingleCaseLayout from "@/views/marketAccessRestrictions/singleCaseLayout/index.vue";
import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue";
import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue";
const marketAccessRestrictionsRoutes = [
// 市场准入限制首页
{
path: "/marketAccessRestrictions",
name: "MarketAccessRestrictions",
component: MarketAccessRestrictions,
meta: {
title: "市场准入限制"
}
},
{
path: "/marketAccessLayout",
name: "MarketAccessLayout",
component: MarketAccessLayout,
redirect: "/marketAccessLayout/overview",
meta: {
title: "市场准入限制布局"
},
children: [
{
path: "overview",
name: "MarketAccessOverview",
component: MarketAccessOverview,
meta: {
title: "调查概况"
}
},
{
path: "deepdig",
name: "MarketAccessDeepdig",
component: MarketAccessDeepdig,
meta: {
title: "调查概况"
}
},
{
path: "case",
name: "MarketAccessCase",
component: MarketAccessCase,
meta: {
title: "调查案件"
}
},
]
},
{
path: "/marketSingleCaseLayout",
name: "MarketSingleCaseLayout",
component: MarketSingleCaseLayout,
redirect: "/marketSingleCaseLayout/overview",
meta: {
title: "单次调查案件布局"
},
children: [
{
path: "overview",
name: "MarketSingleCaseOverview",
component: MarketSingleCaseOverview,
meta: {
title: "调查简介"
}
},
{
path: "deepdig",
name: "MarketSingleCaseDeepdig",
component: MarketSingleCaseDeepdig,
meta: {
title: "深度挖掘"
}
}
]
},
]
export default marketAccessRestrictionsRoutes
\ No newline at end of file
//新闻速览
import newsBrief from "@/views/newsBrief/index.vue"
// 新闻事件分析
import NewsAnalysis from "@/views/newsAnalysis/index.vue";
const newsRoutes = [
//新闻速览页面路由
{
path: "/newsBrief",
name: "newsBrief",
component: newsBrief,
meta: {
title: "新闻速览"
}
},
// 新闻事件分析
{
path: "/newsAnalysis",
name: "newsAnalysis",
component: NewsAnalysis,
meta: {
title: "新闻事件分析"
}
},
]
export default newsRoutes
\ No newline at end of file
//中美博弈概览
import overView from "@/views/overView/index.vue";
//GJ概览
import gjOverView from "@/views/gjOverView/index.vue";
const overViewRoutes = [
// 中美博弈概览页面路由
{
path: "/",
redirect: "/overView"
},
{
path: "/overView",
name: "overView",
component: overView,
meta: {
title: "中美博弈概览"
}
},
// GJ概览页面路由
{
path: "/gjOverView",
name: "gjOverView",
component: gjOverView,
meta: {
title: "国家概览"
}
},
]
export default overViewRoutes
\ No newline at end of file
// 门户
import Portal from "@/views/portals/portal/index.vue";
const portalRoutes = [
// 门户
{
path: "/portal",
name: "portal",
component: Portal,
meta: {
title: "门户"
}
},
]
export default portalRoutes
\ No newline at end of file
// 风险信号
import RiskSignal from "@/views/riskSignal/index.vue"
const riskSignalRoutes = [
//风险信号页面路由
{
path: "/riskSignal",
name: "riskSignal",
component: RiskSignal,
meta: {
title: "风险信号"
}
},
]
export default riskSignalRoutes
\ No newline at end of file
// 智库相关
import thinkTank from "@/views/thinkTank/index.vue";
import ThinkTankDetail from "@/views/thinkTank/ThinkTankDetail/index.vue";
import ReportDetail from "@/views/thinkTank/ReportDetail/index.vue";
const thinktankRoutes = [
// 智库系统的主要路由
{
path: "/thinkTank",
name: "thinkTank",
component: thinkTank,
meta: {
title: "首页"
}
},
{
path: "/think-tank/:id",
name: "ThinkTankDetail",
component: ThinkTankDetail,
meta: {
title: "智库详情"
}
},
{
path: "/report/:id",
name: "ReportDetail",
component: ReportDetail,
meta: {
title: "报告详情"
}
},
]
export default thinktankRoutes
\ No newline at end of file
// 智能写报
import WrittingAsstaint from "@/views/writtingAsstaint/index.vue";
const writtingRoutes = [
// 法案系统路由
{
path: "/writtingAsstaint",
name: "writtingAsstaint",
component: WrittingAsstaint,
meta: {
title: "智能写报"
}
}
]
export default writtingRoutes
\ No newline at end of file
...@@ -441,6 +441,7 @@ onUnmounted(() => { ...@@ -441,6 +441,7 @@ onUnmounted(() => {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 16px; gap: 16px;
margin-bottom: 10px;
.left { .left {
width: 300px; width: 300px;
height: 880px; height: 880px;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="header"> <div class="header">
<!-- <span>首页 </span>> <span>综合检索 </span> --> <!-- <span>首页 </span>> <span>综合检索 </span> -->
<div class="header-item">首页</div> <div class="header-item back-item" @click="handleBackHome">首页</div>
<div class="header-item">></div> <div class="header-item">></div>
<div class="header-item">综合检索</div> <div class="header-item">综合检索</div>
</div> </div>
...@@ -129,6 +129,13 @@ import Img3 from "./assets/images/box3-img3.png"; ...@@ -129,6 +129,13 @@ import Img3 from "./assets/images/box3-img3.png";
import Img4 from "./assets/images/box3-img4.png"; import Img4 from "./assets/images/box3-img4.png";
import Img5 from "./assets/images/box3-img5.png"; import Img5 from "./assets/images/box3-img5.png";
// 返回首页
const handleBackHome = () => {
router.push({
path: "/overview"
});
};
const headerInfoList = ref([ const headerInfoList = ref([
{ {
name: "美国", name: "美国",
......
...@@ -49,31 +49,30 @@ ...@@ -49,31 +49,30 @@
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import router from '@/router/index' import router from "@/router/index";
import * as echarts from "echarts"; import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue"; import DivideHeader from "@/components/DivideHeader.vue";
import Timeline from "../component/Timeline.vue"; import Timeline from "../component/Timeline.vue";
import getBarChart from '../js/barChart.js' import getBarChart from "../js/barChart.js";
import getBarChart3 from '../js/barChart3.js' import getBarChart3 from "../js/barChart3.js";
import radarChart2 from '../js/radarChart2.js' import radarChart2 from "../js/radarChart2.js";
import getMultiLineChart2 from "../js/multiLineChart2.js"; import getMultiLineChart2 from "../js/multiLineChart2.js";
//科技人才对比分析 //科技人才对比分析
const char4Data = ref({ const char4Data = ref({
name: ['中国', '日本', '欧盟', '韩国', '加拿大', '澳大利亚'], name: ["中国", "日本", "欧盟", "韩国", "加拿大", "澳大利亚"],
value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79], value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79]
}); });
//科研投入对比分析 //科研投入对比分析
const char5Data = ref({ const char5Data = ref({
name: ['中国', '日本', '欧盟', '韩国', '加拿大', '澳大利亚'], name: ["中国", "日本", "欧盟", "韩国", "加拿大", "澳大利亚"],
value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79], value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79]
}); });
const names = ["中国", "日本", "欧盟", "韩国", "加拿大", "澳大利亚"];
const names = ['中国', '日本', '欧盟', '韩国', '加拿大', '澳大利亚'] const data1 = [120, 200, 150, 80, 70, 100];
const data1 = [120, 200, 150, 80, 70, 100] const data2 = [90, 230, 180, 110, 100, 30];
const data2 = [90, 230, 180, 110, 100, 30] const data3 = [20, 130, 120, 160, 80, 11];
const data3 = [20, 130, 120, 160, 80, 11]
// 绘制echarts图表 // 绘制echarts图表
const setChart = (option, chartId) => { const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId); let chartDom = document.getElementById(chartId);
...@@ -83,22 +82,8 @@ const setChart = (option, chartId) => { ...@@ -83,22 +82,8 @@ const setChart = (option, chartId) => {
return chart; return chart;
}; };
const chart8Data = ref({ const chart8Data = ref({
title: [ title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2022",
"2023",
"2024",
"2025"
],
data: [ data: [
{ {
name: "美国", name: "美国",
...@@ -123,21 +108,27 @@ const chart8Data = ref({ ...@@ -123,21 +108,27 @@ const chart8Data = ref({
{ {
name: "人才限制", name: "人才限制",
value: [142, 53, 82, 97, 69, 100, 130, 150, 142, 173, 189, 177] value: [142, 53, 82, 97, 69, 100, 130, 150, 142, 173, 189, 177]
}, }
] ]
}); });
onMounted(() => { onMounted(() => {
let char8 = getBarChart3(names, data1, data2, data3, false); let char8 = getBarChart3(names, data1, data2, data3, false);
setChart(char8, "char8"); setChart(char8, "char8");
let char7 = radarChart2() let char7 = radarChart2();
setChart(char7, "char7"); setChart(char7, "char7");
//制裁手段强度变化折线图 //制裁手段强度变化折线图
let chart9 = getMultiLineChart2(chart8Data.value.title, chart8Data.value.data[0].value, chart8Data.value.data[1].value, chart8Data.value.data[2].value, chart8Data.value.data[3].value, chart8Data.value.data[4].value, chart8Data.value.data[5].value); let chart9 = getMultiLineChart2(
chart8Data.value.title,
chart8Data.value.data[0].value,
chart8Data.value.data[1].value,
chart8Data.value.data[2].value,
chart8Data.value.data[3].value,
chart8Data.value.data[4].value,
chart8Data.value.data[5].value
);
setChart(chart9, "char9"); setChart(chart9, "char9");
}); });
</script> </script>
...@@ -145,13 +136,13 @@ onMounted(() => { ...@@ -145,13 +136,13 @@ onMounted(() => {
.thematic-box { .thematic-box {
margin-top: 64px; margin-top: 64px;
height: 578px; height: 578px;
margin-bottom: 100px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1); border: 1px solid rgba(255, 255, 255, 1);
border-radius: var(---, 10px); border-radius: var(---, 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: linear-gradient(180.00deg, rgba(246, 250, 255, 1), rgba(246, 250, 255, 0) 100%); background: linear-gradient(180deg, rgba(246, 250, 255, 1), rgba(246, 250, 255, 0) 100%);
.divide { .divide {
width: 100%; width: 100%;
...@@ -196,7 +187,6 @@ onMounted(() => { ...@@ -196,7 +187,6 @@ onMounted(() => {
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);
.timeLine-box { .timeLine-box {
height: 100%; height: 100%;
width: calc(100% - 50px); width: calc(100% - 50px);
...@@ -269,7 +259,6 @@ onMounted(() => { ...@@ -269,7 +259,6 @@ onMounted(() => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: right; text-align: right;
} }
} }
.divider { .divider {
...@@ -300,7 +289,6 @@ onMounted(() => { ...@@ -300,7 +289,6 @@ onMounted(() => {
line-height: 30px; line-height: 30px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: center; text-align: center;
} }
.chart-content { .chart-content {
...@@ -313,7 +301,6 @@ onMounted(() => { ...@@ -313,7 +301,6 @@ onMounted(() => {
} }
.chart-box { .chart-box {
height: 452px; height: 452px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
...@@ -333,7 +320,6 @@ onMounted(() => { ...@@ -333,7 +320,6 @@ onMounted(() => {
letter-spacing: 0px; letter-spacing: 0px;
align-items: center; align-items: center;
/* 垂直居中 */ /* 垂直居中 */
} }
.radar2Data-circle { .radar2Data-circle {
......
...@@ -231,6 +231,7 @@ const warningList = ref([ ...@@ -231,6 +231,7 @@ const warningList = ref([
background: #055fc2; background: #055fc2;
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
font-weight: 700;
line-height: 48px; line-height: 48px;
text-align: center; text-align: center;
} }
......
...@@ -67,7 +67,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5) => { ...@@ -67,7 +67,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5) => {
return { return {
tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
grid: { top: '5%', right: '20%', bottom: '0%', left: '0%', containLabel: true }, grid: { top: '5%', right: '0%', bottom: '0%', left: '0%', containLabel: true },
xAxis: { type: 'category', boundaryGap: false, data: dataX }, xAxis: { type: 'category', boundaryGap: false, data: dataX },
yAxis: { yAxis: {
......
<template>
<div class="wrap">
我是深度挖掘页面!!!!!
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.wrap{
width: 200px;
height: 200px;
background: orange;
color: #000;
}
</style>
\ No newline at end of file
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, computed, onMounted } from "vue";
import router from "@/router/index"; import router from "@/router/index";
import icon1 from "./assets/images/icon1.png"; import icon1 from "./assets/images/icon1.png";
import icon1Active from "./assets/images/icon1_active.png"; import icon1Active from "./assets/images/icon1_active.png";
...@@ -53,42 +53,71 @@ import icon2 from "./assets/images/icon2.png"; ...@@ -53,42 +53,71 @@ import icon2 from "./assets/images/icon2.png";
import icon2Active from "./assets/images/icon2_active.png"; import icon2Active from "./assets/images/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 Img232 from "./assets/images/232.png";
import Img301 from "./assets/images/301.png";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();
const btnList = ref([ const btnList = computed(() => {
{ if (route.query.id === "301") {
name: "调查概况", return [
icon: icon1, {
acitveIcon: icon1Active, name: "调查概况",
path: "/marketAccessLayout/overview" icon: icon1,
}, acitveIcon: icon1Active,
{ path: "/marketAccessLayout/overview"
name: "调查案件", },
icon: icon2, {
acitveIcon: icon2Active, name: "深度挖掘",
path: "/marketAccessLayout/case" icon: icon2,
acitveIcon: icon2Active,
path: "/marketAccessLayout/deepdig"
},
{
name: "调查案件",
icon: icon2,
acitveIcon: icon2Active,
path: "/marketAccessLayout/case"
}
];
} else {
return [
{
name: "调查概况",
icon: icon1,
acitveIcon: icon1Active,
path: "/marketAccessLayout/overview"
},
{
name: "调查案件",
icon: icon2,
acitveIcon: icon2Active,
path: "/marketAccessLayout/case"
}
];
} }
]); });
const surveyList = ref([ const curSurvey = computed(() => {
{ if (route.query.id === "301") {
title: "337调查", return {
desc: '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"', title: "301调查",
image: Img337 desc: '由美国贸易代表办公室依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"发起的调查',
}, image: Img301
{ };
title: "232调查", } else if (route.query.id === "232") {
desc: "依据《1962年贸易扩展法》第232条款,授权美国商务部对“特定进口产品是否威胁或损害美国国家安全”而开展的全面调查。", return {
image: Img232 title: "232调查",
desc: "依据《1962年贸易扩展法》第232条款,授权美国商务部对“特定进口产品是否威胁或损害美国国家安全”而开展的全面调查。",
image: Img232
};
} else {
return {
title: "337调查",
desc: '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"',
image: Img337
};
} }
]);
const curSurvey = ref({
title: "337调查",
desc: '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"',
image: Img337
}); });
const activeBtnName = ref("调查概况"); const activeBtnName = ref("调查概况");
...@@ -96,18 +125,14 @@ const activeBtnName = ref("调查概况"); ...@@ -96,18 +125,14 @@ const activeBtnName = ref("调查概况");
const handleClickBtn = item => { const handleClickBtn = item => {
activeBtnName.value = item.name; activeBtnName.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.query.id === "232") {
curSurvey.value = surveyList.value[1];
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
...@@ -108,7 +108,7 @@ const surveyList = ref([ ...@@ -108,7 +108,7 @@ const surveyList = ref([
{ {
title: "231-TA-1225:进口药及进口原材料的调查", title: "231-TA-1225:进口药及进口原材料的调查",
time: '2021年9月21日', time: '2021年9月21日',
name: '337' name: '232'
}, },
]); ]);
......
<template>
<div class="wrap">
<el-row>
<CardCustom
title="热门数据"
title-text-align="left"
title-color="rgba(10, 87, 166, 1)"
:style="{ width: '520px', height: '459px' }"
title-background-color="rgba(255, 255, 255, 1)"
header-height="53px"
>
<template #icon>
<div class="icon icon5"></div>
</template>
<template #right>
<div></div>
</template>
<div class="item" v-for="(item, index) in List" :key="index">
<span class="itemNumber" :style="{ color: getColor(index) }">
{{ index + 1 }}
</span>
<div class="itemText">{{ item.title }}</div>
<span class="itemClass">{{ item.class }}</span>
</div>
</CardCustom>
<CardCustom
title="数据分布"
title-text-align="left"
title-color="rgba(10, 87, 166, 1)"
:style="{ width: '1064px', height: '459px', marginLeft: '16px' }"
title-background-color="rgba(255, 255, 255, 1)"
header-height="53px"
>
<template #icon>
<div class="icon icon3"></div>
</template>
<template #right>
<div></div>
</template>
</CardCustom>
</el-row>
<div class="gap">
<el-row class="cardContainer">
<div class="itemCard">
<div class="itemCardTitle">科研学术</div>
<div class="itemCardNumber">2465</div>
</div>
</el-row>
</div>
</div>
</template>
<script setup>
import CardCustom from "../components/CardCustom.vue";
import { ref } from "vue";
function getColor(index) {
const mapColor = ["rgba(206, 79, 81, 1)", "rgba(255, 169, 64, 1)", "rgba(255, 197, 61, 1)"];
let color = mapColor[index];
return color || "transparent";
}
const List = ref([
{
title: "H.R.1-119th-大而美法案",
class: "科技法案"
},
{
title: "欧盟单方面宣布对中国电动汽车加征反补贴...",
class: "媒体报道"
},
{
title: "禁止在中国建设半导体产能",
class: "总统政令"
},
{
title: "2025年实体清单",
class: "实体清单"
},
{
title: "2025年实体清单",
class: "实体清单"
},
{
title: "2025年实体清单",
class: "实体清单"
},
{
title: "2025年实体清单",
class: "实体清单"
},
{
title: "2025年实体清单",
class: "实体清单"
},
{
title: "2025年实体清单",
class: "实体清单"
},
{
title: "2025年实体清单",
class: "实体清单"
}
]);
</script>
<style lang="scss" scoped>
.wrap {
width: 1600px;
margin: 30px auto;
}
.gap {
margin-top: 24px;
}
.icon {
width: 18px;
height: 18px;
background-size: contain;
background-repeat: no-repeat;
}
.icon3 {
background-image: url("../assets/img/icon3.png");
}
.icon5 {
background-image: url("../assets/img/icon5.png");
}
.item {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 7px;
}
.itemNumber {
width: 40px;
}
.itemText {
flex: 1;
}
.itemClass {
color: rgba(132, 136, 142, 1);
}
.cardContainer {
justify-content: space-between;
}
.itemCard{
/* 容器 245 */
width: 186px;
height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 4px;
}
.itemCardTitle{
font-size: 20px;
font-weight: 700;
}
.itemCardNumber{
margin-top: 5px;
font-size: 16px;
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论