提交 685c8c6a authored 作者: 付康's avatar 付康

合并分支 'lzl-dev' 到 'master'

Lzl dev 查看合并请求 !77
......@@ -90,7 +90,7 @@ const headerTitleClasses = computed(() => [
width: 100%;
margin-bottom: 15px;
position: relative;
// margin-bottom: 100px;
margin-bottom: 100px;
}
.container-header {
......
......@@ -1513,20 +1513,24 @@ watch(box8selectetedTime, () => {
});
const handleToPosi = id => {
// 0 618 1240 2350
let top = 0;
switch (id) {
case "position2":
containerRef.value.scrollTop = isShow.value ? 634 : 980;
top = isShow.value ? 634 : 980;
break;
case "position3":
containerRef.value.scrollTop = isShow.value ? 1204 : 1550;
top = isShow.value ? 1204 : 1550;
break;
case "position4":
containerRef.value.scrollTop = isShow.value ? 2334 : 2680;
top = isShow.value ? 2334 : 2680;
break;
default:
containerRef.value.scrollTop = 0;
top = 0;
}
containerRef.value.scrollTo({
top: top,
behavior: "smooth"
});
};
const tabList = ref([
......
<template>
<div class="home-wrapper">
<div class="home-header">
<div class="search-header" v-show="isShow">
<div class="home-main-header-center">
<el-input v-model="searchExportControlText" style="width: 800px; height: 100%" placeholder="搜索出口管制" />
<div class="search">
<div class="search-icon">
<img src="@/assets/icons/search-icon.png" alt="" />
</div>
<div class="search-text" @click="handleSearch">搜索</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
<div class="home-header" v-show="!isShow">
<div class="header-item">国家科技安全</div>
<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>
<div class="home-main">
<div class="home-main" ref="homeMainRef" :class="{ 'scroll-main': isShow }">
<div class="home-main-header">
<div class="home-main-header-center">
<!-- <el-input
v-model="searchExportControlText"
style="width: 100%; height: 48px"
size="large"
placeholder="搜索出口管制调查"
:suffix-icon="Search"
/> -->
<el-input v-model="searchExportControlText" style="width: 800px; height: 100%" placeholder="搜索出口管制调查" />
<div class="home-main-header-center" v-show="!isShow">
<el-input v-model="searchExportControlText" style="width: 800px; height: 100%" placeholder="搜索出口管制" />
<div class="search">
<div class="search-icon">
<img src="@/assets/icons/search-icon.png" alt="" />
......@@ -25,40 +55,26 @@
<div class="search-text" @click="handleSearch">搜索</div>
</div>
</div>
<!-- <div class="home-main-header-footer">
<div class="home-main-header-footer-item">
<div class="item-top">1096</div>
<div class="item-footer">实体清单</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">2633</div>
<div class="item-footer">商业管制清单</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">162</div>
<div class="item-footer">关键和新型技术清单</div>
</div>
</div> -->
<div class="home-main-header-btn-box">
<div class="btn" @click="scrollToTop('position1')">
<div class="home-main-header-btn-box" v-show="!isShow">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="scrollToTop('position2')">
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="scrollToTop('position3')">
<div class="btn-text">{{ "统计概览" }}</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="scrollToTop('position4')">
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
......@@ -557,9 +573,15 @@
</div>
</div>
<div class="right-footer">
<div class="total-count">{{ totalAll }}项调查</div>
<el-pagination v-model:current-page="currentPageAll" :page-size="pageSizeAll" :total="totalAll"
layout="prev, pager, next" background @current-change="handlePageChangeAll" />
<div class="total-count">{{ totalAll }}</div>
<el-pagination
v-model:current-page="currentPageAll"
:page-size="pageSizeAll"
:total="totalAll"
layout="prev, pager, next"
background
@current-change="handlePageChangeAll"
/>
</div>
</div>
</div>
......@@ -607,6 +629,9 @@
<script setup>
import { onMounted, ref, computed, reactive, shallowRef, watch } from "vue";
import scrollToTop from "@/utils/scrollToTop";
import { useContainerScroll } from "@/hooks/useScrollShow";
const homeMainRef = ref(null);
const { isShow } = useContainerScroll(homeMainRef);
import * as echarts from "echarts";
import setChart from "@/utils/setChart";
import { ElMessage, ElMessageBox } from "element-plus";
......@@ -658,6 +683,19 @@ import {
getExportControlList
} from "@/api/exportControl";
const handleToPosi = id => {
const element = document.getElementById(id);
if (element && homeMainRef.value) {
const containerRect = homeMainRef.value.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
const top = elementRect.top - containerRect.top + homeMainRef.value.scrollTop;
homeMainRef.value.scrollTo({
top: top,
behavior: "smooth"
});
}
};
// 跳转到单项制裁页面
const handleToRiskSignalDetail = item => {
const routeData = router.resolve({
......@@ -1185,6 +1223,7 @@ const fetchSanctionList = async () => {
const handlePageChangeAll = val => {
currentPageAll.value = val;
fetchSanctionList();
handleToPosi("position4");
};
watch(
......@@ -1316,8 +1355,8 @@ const resourceTabs = [
{ label: "全部制裁", value: "all", disabled: false },
{ label: "实体清单", value: "entity", disabled: false },
{ label: "商业管制清单", value: "commerce", disabled: true },
{ label: "关键与新兴技术清单", value: "tech", disabled: true },
{ label: "军事最终用户清单", value: "military", disabled: true }
// { label: "关键与新兴技术清单", value: "tech", disabled: true },
// { label: "军事最终用户清单", value: "military", disabled: true }
];
const activeResourceTab = ref("all");
......@@ -3233,4 +3272,102 @@ const handleMediaClick = item => {
}
}
}
.search-header {
width: 100%;
height: 144px;
background: #fff;
overflow: hidden;
.home-main-header-center {
margin-top: 20px;
margin-left: 200px;
width: 800px;
height: 48px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
top: 0px;
width: 120px;
height: 46px;
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-btn-box {
margin-top: 20px;
margin-left: 200px;
display: flex;
gap: 16px;
.btn {
display: flex;
align-items: center;
gap: 9px;
width: 160px;
height: 48px;
border: 1px solid #aed6ff;
box-sizing: border-box;
border-radius: 24px;
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
line-height: 48px;
margin-left: 36px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 16px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.scroll-main {
height: calc(100% - 144px) !important;
}
</style>
......@@ -30,7 +30,7 @@
<div class="item-position"></div>
<div class="content">
<div class="info">
<div class="title">2025年新增</div>
<div class="title">{{ currentYear }}年新增</div>
</div>
<div class="number">
<span class="num">{{ totalCount.latestYearCount }}</span>
......@@ -43,7 +43,7 @@
<div class="content">
<div class="info">
<div class="title">近期制裁新增</div>
<div class="subtitle">2025年11月12日</div>
<!-- <div class="subtitle">{{ totalCount.latestTime }}</div> -->
</div>
<div class="number">
<span class="num">{{ totalCount.latestTimeCount }}</span>
......@@ -342,38 +342,28 @@ const regionTime = ref("all");
const domainTime = ref("all");
const typeTime = ref("all");
const currentYear = new Date().getFullYear();
const timeOptions = [
{ label: "全部时间", value: "all" },
{ label: "2025年", value: "2025" },
{ label: "2024年", value: "2024" },
{ label: "2023年", value: "2023" },
{ label: "2022年", value: "2022" },
{ label: "2021年", value: "2021" },
{ label: "2020年", value: "2020" },
{ label: "2019年", value: "2019" },
{ label: "2018年", value: "2018" },
{ label: "2017年", value: "2017" },
{ label: "2016年", value: "2016" },
{ label: "2015年", value: "2015" }
];
for (let i = 0; i <= 10; i++) {
const year = currentYear - i;
timeOptions.push({ label: `${year}年`, value: year.toString() });
}
const sanctionCountChartRef = ref(null);
const mapChartRef = ref(null);
const domainChartRef = ref(null);
const typeChartRef = ref(null);
const getBarColor = index => {
if (index === 0) return "linear-gradient(90deg, rgba(255, 77, 79, 0) 0%, rgba(255, 77, 79, 1) 100%)";
if (index === 1 || index === 2) return "linear-gradient(90deg, rgba(255, 172, 77, 0) 0%, rgba(255, 172, 77, 1) 100%)";
return "linear-gradient(90deg, rgba(5, 95, 194, 0) 0%, rgba(5, 95, 194, 1) 100%)";
};
const updateSanctionCountChart = () => {
if (!sanctionCountChartRef.value) return;
let chart = echarts.getInstanceByDom(sanctionCountChartRef.value);
......
......@@ -82,7 +82,7 @@
</div>
</div>
<div class="left-footer">
<div class="total-count">{{ totalAll }}调查</div>
<div class="total-count">{{ totalAll }}</div>
<el-pagination
v-model:current-page="currentPageAll"
:page-size="pageSizeAll"
......@@ -291,6 +291,18 @@ watch([selectedDomain, onlyChina], () => {
const handlePageChangeAll = val => {
currentPageAll.value = val;
getSanctionUpdate();
const container = document.querySelector(".entity-list");
const target = document.querySelector(".left-bottom");
if (container && target) {
const containerRect = container.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
// 148是吸顶头部的高度,减去它以避免标题被遮挡
const top = targetRect.top - containerRect.top + container.scrollTop - 148;
container.scrollTo({
top: top,
behavior: "smooth"
});
}
};
// 获取实体清单发布机构
......
......@@ -84,11 +84,11 @@ const headerNavList = ref([
imgActive: icon2Active,
title: "深度挖掘"
},
{
img: icon3,
imgActive: icon3Active,
title: "影响分析"
}
// {
// img: icon3,
// imgActive: icon3Active,
// title: "影响分析"
// }
])
......@@ -103,11 +103,16 @@ const headerNavList = ref([
.entity-list{
width: 100%;
height: 100%;
overflow-y: auto;
.header{
width: 100%;
height: 148px;
background-color: #fff;
padding-top: 16px;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
.header-title{
width: 1601px;
height: 72px;
......@@ -214,7 +219,8 @@ const headerNavList = ref([
}
.main{
width: 100%;
height: calc(100% - 148px);
height: auto;
min-height: calc(100% - 148px);
background-color: #F7F8F9;
}
}
......
......@@ -34,7 +34,7 @@
</div>
<div class="number">
<span class="num">{{ totalCount.techDomainCount }}</span>
<span class="unit"></span>
<span class="unit"></span>
</div>
</div>
</div>
......@@ -45,9 +45,9 @@
<div class="box"></div>
<div class="text">制裁实体领域分布情况</div>
<div class="right-group">
<el-select v-model="domainTime" class="time-select" placeholder="请选择">
<!-- <el-select v-model="domainTime" class="time-select" placeholder="请选择">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-select> -->
<div class="btn">
<img src="../../assets/数据库按钮.png" alt="" />
<img src="../../assets/下载按钮.png" alt="" />
......@@ -73,9 +73,9 @@
<div class="box"></div>
<div class="text">制裁实体类型分布情况</div>
<div class="right-group">
<el-select v-model="typeTime" class="time-select" placeholder="请选择">
<!-- <el-select v-model="typeTime" class="time-select" placeholder="请选择">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-select> -->
<div class="btn">
<img src="../../assets/数据库按钮.png" alt="" />
<img src="../../assets/下载按钮.png" alt="" />
......@@ -99,7 +99,7 @@
<div class="main-item">
<div class="title-com">
<div class="box"></div>
<div class="text">制裁实体国家分布</div>
<div class="text">制裁实体国家分布情况</div>
<div class="right-group">
<div class="btn">
<img src="../../assets/数据库按钮.png" alt="" />
......@@ -141,9 +141,9 @@
<div class="box"></div>
<div class="text">制裁实体地域分布情况</div>
<div class="right-group">
<el-select v-model="regionTime" class="time-select" placeholder="请选择">
<!-- <el-select v-model="regionTime" class="time-select" placeholder="请选择">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-select> -->
<div class="btn">
<img src="../../assets/数据库按钮.png" alt="" />
<img src="../../assets/下载按钮.png" alt="" />
......
......@@ -272,7 +272,8 @@ const getUrlParams = () => {
sanRecordId.value = urlParams.get("id") || ""
}
const activeTab = ref(["实体穿透分析", "重点实体识别"]);
// const activeTab = ref(["实体穿透分析", "重点实体识别"]);
const activeTab = ref(["实体穿透分析"]);
const activeIndex = ref(0);
const rightActiveTab = ref("supplyChain");
......
......@@ -514,30 +514,26 @@ onMounted(() => {
margin: 0 auto;
padding-top: 16px;
padding-bottom: 50px;
.main {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
.left {
width: 520px;
height: 1119px;
.left-top {
width: 100%;
height: 582px;
height: auto;
padding-bottom: 20px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
margin-bottom: 16px;
.left-top-title {
padding: 22px 20px 22px 27px;
width: 100%;
height: 286px;
height: auto;
border-bottom: 1px solid rgb(234, 236, 238);
display: flex;
flex-direction: column;
......@@ -569,7 +565,7 @@ onMounted(() => {
font-size: 16px;
font-family: "Microsoft YaHei";
line-height: 24px;
overflow: hidden; // Ensure it respects the container width
overflow: hidden;
&.link {
color: rgb(5, 95, 194);
......@@ -591,26 +587,10 @@ onMounted(() => {
&.tags {
gap: 8px;
overflow-x: auto; // Allow horizontal scrolling
white-space: nowrap; // Prevent wrapping
padding-bottom: 4px; // Add some space for scrollbar
/* Custom Scrollbar */
&::-webkit-scrollbar {
height: 4px;
}
&::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 2px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
flex-wrap: wrap;
overflow: visible;
.tag {
flex-shrink: 0; // Prevent tags from shrinking
padding: 1px 8px;
background: rgba(246, 250, 255, 1);
border-radius: 4px;
......
......@@ -162,11 +162,16 @@ onMounted(() => {
.entity-list{
width: 100%;
height: 100%;
overflow-y: auto;
.header{
width: 100%;
height: 148px;
background-color: #fff;
padding-top: 16px;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
.header-title{
width: 1601px;
height: 72px;
......@@ -300,7 +305,8 @@ onMounted(() => {
}
.main{
width: 100%;
height: calc(100% - 148px);
height: auto;
min-height: calc(100% - 148px);
background-color: #F7F8F9;
}
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论