提交 23d27415 authored 作者: coderBryanFu's avatar coderBryanFu

解决路由冲突

上级 b689b671
......@@ -14,7 +14,7 @@ const cooperationRestrictionsRoutes = [
},
// 合作限制详情
{
path: "/coopRestriction/detail",
path: "/cooperationRestrictions/detail",
name: "CooperationRestrictionsDetail",
component: CooperationRestrictionsDetail,
meta: {
......
......@@ -4,7 +4,7 @@
<div class="left-title">
<img src="./assets/icon01.png" alt="">
<div class="tit">新闻资讯</div>
<div class="more">更多 +</div>
<div class="more" @click="handleToMoreNews">更多 +</div>
</div>
<div class="left-main">
<div v-for="item in leftList" :key="item.id" class="main-item">
......@@ -55,6 +55,7 @@
<script setup>
import { ref } from "vue";
import router from '@/router'
import image01 from './assets/image01.png'
import image02 from './assets/image02.png'
import image03 from './assets/image03.png'
......@@ -128,6 +129,12 @@ const rightList = ref([
}
])
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
</script>
<style scoped lang="scss">
......
......@@ -58,7 +58,7 @@
</div>
</div>
<div style="margin: 6px 34px 0 23px">
<div v-for="item in list" :key="item.id" class="right-main">
<div v-for="item in list" :key="item.id" class="right-main" @click="handleClickToDetail()">
<div class="main-left" :class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险' }">
{{ item.title }}
</div>
......@@ -66,7 +66,7 @@
<div class="main-right">{{ item.time }}</div>
</div>
</div>
<div class="right-mainbtn">
<div class="right-mainbtn" @click="handleToMoreRiskSignal">
<img src="./assets/btn.png" alt="" />
查看更多
</div>
......@@ -76,6 +76,7 @@
<script setup>
import { ref } from "vue";
import router from "@/router";
const list = ref([
{
......@@ -103,6 +104,20 @@ const list = ref([
time: "一天前"
}
]);
// 点击查看详情
const handleClickToDetail = () => {
// router.push("/decreeLayout");
const curRoute = router.resolve("/cooperationRestrictions/detail");
window.open(curRoute.href, "_blank");
};
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
};
</script>
<style scoped lang="scss">
......@@ -340,11 +355,16 @@ const list = ref([
}
}
.right-main {
width: 463px;
width: 468px;
padding-right: 5px;
height: 47px;
border-radius: 2px;
display: flex;
align-items: center;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.main-left {
width: 40px;
height: 40px;
......
......@@ -36,47 +36,47 @@
</div>
</div>
<div class="search-bottom">
<div class="btn">
<div class="btn" @click="scrollToTop('position1')">
<div class="btn-text">最新动态</div>
<div class="btn-icon">></div>
</div>
<div class="btn">
<div class="btn" @click="scrollToTop('position2')">
<div class="btn-text">咨询要闻</div>
<div class="btn-icon">></div>
</div>
<div class="btn">
<div class="btn" @click="scrollToTop('position3')">
<div class="btn-text">数据总览</div>
<div class="btn-icon">></div>
</div>
<div class="btn">
<div class="btn" @click="scrollToTop('position4')">
<div class="btn-text">资源库</div>
<div class="btn-icon">></div>
</div>
</div>
</div>
<!-- 最新动态 -->
<div class="newdata">
<div class="newdata" id="position1">
<com-title title="最新动态" />
<div class="newdata-main">
<newData />
</div>
</div>
<!-- 资讯要问 -->
<div class="ask">
<div class="ask" id="position2">
<com-title title="咨询要闻" />
<div class="ask-main">
<askPage />
</div>
</div>
<!-- 数据总览 -->
<div class="datasub">
<div class="datasub" id="position3">
<com-title title="数据总览" />
<div class="datasub-main">
<dataSub />
</div>
</div>
<!-- 资源库 -->
<div class="reslib">
<div class="reslib" id="position4">
<com-title title="资源库" />
<div class="reslib-main">
<resLib />
......@@ -94,6 +94,7 @@ import newData from "./components/dataNew/index.vue";
import askPage from "./components/askPage/index.vue";
import dataSub from "./components/dataSub/index.vue";
import resLib from "./components/resLib/index.vue";
import scrollToTop from "@/utils/scrollToTop";
import { useContainerScroll } from "@/hooks/useScrollShow";
......@@ -153,6 +154,7 @@ const handleBackHome = () => {
width: 960px;
height: 225px;
margin: 0 auto 68px auto;
.search-main {
display: flex;
padding-right: 3px;
......@@ -163,11 +165,14 @@ const handleBackHome = () => {
height: 48px;
background-color: rgba(255, 255, 255, 0.65);
border-radius: 10px;
border: 1px solid #fff;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search-input {
border: none;
outline: none;
width: 800px;
width: 838px;
height: 48px;
background-color: transparent;
font-size: 16px;
......@@ -178,12 +183,13 @@ const handleBackHome = () => {
color: rgb(132, 136, 142);
}
.search-btn {
margin-right: -3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 42px;
height: 46px;
border-radius: 8px;
background-color: rgb(5, 95, 194);
font-size: 18px;
......
......@@ -315,9 +315,9 @@
</div>
<div class="box6-main">
<div class="box6-main-select-box">
<el-select v-model="curAreaYear" placeholder="选择发布时间" style="width: 120px">
<el-select v-model="box6SelectedYear" placeholder="选择发布时间" style="width: 120px">
<el-option
v-for="item in areaYearList"
v-for="item in box6YearList"
:key="item.value"
:label="item.label"
:value="item.value"
......@@ -894,6 +894,36 @@ const handleToMoreNews = () => {
window.open(route.href, "_blank");
};
// 制裁领域分布
const box6SelectedYear = ref("2025");
const box6YearList = ref([
{
label: "2025",
value: "2025"
},
{
label: "2024",
value: "2024"
},
{
label: "2023",
value: "2023"
},
{
label: "2022",
value: "2022"
},
{
label: "2021",
value: "2021"
},
{
label: "2020",
value: "2020"
}
]);
const box7Chart1Data = ref([
{
name: "337调查",
......@@ -2154,11 +2184,14 @@ onMounted(async () => {
position: relative;
.box6-main-select-box {
position: absolute;
z-index: 100;
top: 10px;
right: 20px;
}
.box6-mian-chart {
height: 360px;
position: relative;
z-index: 99;
}
}
}
......
......@@ -27,8 +27,8 @@
<div class="item-header-text">打压遏制手段分布</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex; justify-content: space-between; width: 100%; height: calc(100% - 60px);">
<div class="thematic-btn-left" @click="changeBtn('left')">
<div style="display: flex; justify-content: space-between; width: 100%; height: calc(100% - 60px);" @mouseenter="handleChangeSwiper(false)" @mouseleave="handleChangeSwiper(true)">
<div class="thematic-btn-left" @click="handleSwitch('left')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
</div>
......@@ -45,7 +45,7 @@
</div>
</div>
</div>
<div class="thematic-btn-right" @click="changeBtn('right')">
<div class="thematic-btn-right" @click="handleSwitch('right')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
</div>
</div>
......@@ -169,7 +169,7 @@
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import { onMounted, ref, computed, onUnmounted } from "vue";
import router from "@/router/index";
import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue";
......@@ -232,8 +232,7 @@ const course = ref([
}
]);
//打压遏制手段分布
const distribution = ref([
const totalDistribution = ref([
{
titlle: "法案",
value: 80,
......@@ -287,9 +286,108 @@ const distribution = ref([
change: "较上个月+1",
path: "/marketAccessRestrictions",
color: ["#FFE3B9", "#FFEDCE", "#FFF7E6", "#D46B08"]
},
{
titlle: "合作限制",
value: 41,
text: "127",
unit: "次",
change: "较上个月+3",
path: "/cooperationRestrictions",
color: ["rgba(139,69,19,0.4)", "rgba(139,69,19,0.5)", "rgba(139,69,19,0.3)", "rgba(139,69,19,1)"]
}
]);
const startIndex = ref(0);
const handleSwitch = flag => {
if (flag == "left") {
if (startIndex.value === 0) {
startIndex.value = totalDistribution.value.length - 6;
} else {
startIndex.value--;
}
} else {
if (startIndex.value === totalDistribution.value.length - 6) {
startIndex.value = 0;
} else {
startIndex.value++;
}
}
};
//打压遏制手段分布
const distribution = computed(() => {
return totalDistribution.value.slice(startIndex.value, startIndex.value + 6);
});
//打压遏制手段分布
// const distribution = ref([
// {
// titlle: "法案",
// value: 80,
// text: "1626",
// unit: "个",
// change: "较上月+3",
// path: "/billHome",
// color: ["#9AC8FF", "#BCDCFF", "#E7F4FF", "#0F5EDB"]
// },
// {
// titlle: "行政令",
// value: 20,
// text: "1626",
// unit: "个",
// change: "较上月+1",
// path: "/decree",
// color: ["#FDE19A", "#FEECBD", "#FFFBE6", "#D68E16"]
// },
// {
// titlle: "科技智库",
// value: 10,
// text: "66",
// unit: "次",
// change: "较上月+2",
// path: "/thinkTank",
// color: ["#C9AAF0", "#DFCAF6", "#FAF1FF", "#531DAC"]
// },
// {
// titlle: "出口管制",
// value: 33,
// text: "66",
// unit: "次",
// change: "较上月+1",
// path: "/exportControl",
// color: ["#96DFDD", "#BCEFEC", "#E7FFFB", "#006E75"]
// },
// {
// titlle: "投融资限制",
// value: 80,
// text: "119",
// unit: "次",
// change: "较上月+1",
// path: "/finance",
// color: ["#F5BEBC", "#F7D3D0", "#FEF1F0", "#C64C4E"]
// },
// {
// titlle: "市场准入",
// value: 50,
// text: "223",
// unit: "次",
// change: "较上个月+1",
// path: "/marketAccessRestrictions",
// color: ["#FFE3B9", "#FFEDCE", "#FFF7E6", "#D46B08"]
// },
// {
// titlle: "合作限制",
// value: 41,
// text: "127",
// unit: "次",
// change: "较上个月+3",
// path: "/cooperationRestrictions",
// color: ["rgba(139,69,19,0.4)", "rgba(139,69,19,0.5)", "rgba(139,69,19,0.3)", "rgba(139,69,19,1)"]
// }
// ]);
//随机生成颜色
const makeColors = () => {
let A = Math.floor(Math.random() * 360); // 随机色相
......@@ -380,7 +478,20 @@ const handleClickItem = item => {
});
};
const swiper = ref(null);
const isOnSwiper = ref(true)
const handleChangeSwiper = (val) => {
isOnSwiper.value = val
}
onMounted(() => {
// swiper.value = setInterval(() => {
// if (isOnSwiper.value) {
// handleSwitch("right");
// }
// }, 3500);
let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true);
setChart(char1, "chart1");
......@@ -388,12 +499,15 @@ onMounted(() => {
let char2 = radarChart();
setChart(char2, "char2");
});
onUnmounted(() => {
clearInterval(swiper.value);
});
</script>
<style lang="scss" scoped>
.cup-box {
overflow-x: auto;
.cup-item-box {
width: 240px;
text-align: center;
......@@ -534,12 +648,14 @@ onMounted(() => {
height: 100%;
width: 24px;
padding-top: 130px;
cursor: pointer;
}
.thematic-btn-right {
height: 100%;
width: 24px;
padding-top: 130px;
cursor: pointer;
}
.thematic-btn-icon {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论