提交 a21ce506 authored 作者: 李智林's avatar 李智林

update

......@@ -10,12 +10,14 @@
<div class="title-box">
<div
class="title"
:aria-disabled="item.disabled"
v-for="(item, index) in homeTitleList"
:key="index"
@mouseenter="handleShowMenu(index, true)"
@mouseleave="handleShowMenu(index, false)"
>
<div class="text" :class="{ textActive: homeActiveTitleIndex === index }">{{ item.name }}</div>
<div class="text" :class="{ textActive: homeActiveTitleIndex === index }">
{{ item.name }}</div>
<div class="bottom-line" v-if="homeActiveTitleIndex === index"></div>
</div>
</div>
......@@ -28,7 +30,7 @@
<img src="@/assets/icons/overview/search.png" alt="" />
</div>
</div>
<div class="info-box">
<div class="info-box" aria-disabled="true">
<div class="mail">
<img src="@/assets/icons/overview/mail.png" alt="" />
</div>
......@@ -78,6 +80,21 @@
</div>
</div>
<div class="right-btn" aria-disabled="true">
<div class="item">
<div class="icon">
<img src="@/assets/icons/overview/domain.png" alt="" />
</div>
<div class="text">{{ "领域" }}</div>
</div>
<div class="item">
<div class="icon">
<img src="@/assets/icons/overview/element.png" alt="" />
</div>
<div class="text">{{ "要素" }}</div>
</div>
</div>
<div class="ai-btn" @click="openAiBox">
<div class="icon">
<img src="@/assets/icons/ai-icon.png" alt="" />
......@@ -168,7 +185,7 @@ const handleGetPersonType = async () => {
const isCurrentOverview = computed(() => {
if (route.path === "/ZMOverView") {
return true
return true;
} else {
return false;
}
......@@ -178,15 +195,18 @@ const isCurrentOverview = computed(() => {
const homeTitleList = ref([
{
name: "中美科技博弈",
path: "/ZMOverView"
path: "/ZMOverView",
disabled: false
},
{
name: "主要国家科技动向感知",
path: ""
path: "",
disabled: true
},
{
name: "主要国家竞争科技安全",
path: ""
path: "",
disabled: true
}
]);
......@@ -620,6 +640,47 @@ body {
}
}
.right-btn {
position: absolute;
top: 132px;
right: 0;
.item {
width: 108px;
height: 40px;
box-sizing: border-box;
border: 1px solid #fff;
border-radius: 50px 0px 0px 50px;
background: rgba(255, 255, 255, 0.65);
display: flex;
margin-bottom: 8px;
cursor: pointer;
.icon {
width: 36px;
height: 36px;
margin-top: 2px;
margin-left: 2px;
img {
width: 100%;
height: 100%;
}
}
.text {
width: 36px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-style: Regular;
font-size: 18px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
margin-top: 8px;
margin-left: 10px;
}
}
}
.ai-btn {
position: absolute;
bottom: 240px;
......@@ -657,7 +718,7 @@ body {
}
:deep(.el-input__wrapper) {
height: 34px;
height: 100%;
box-shadow: none;
border-radius: 10px;
background: transparent;
......@@ -669,4 +730,23 @@ body {
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
.title[aria-disabled="true"] {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.info-box[aria-disabled="true"] {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.right-btn[aria-disabled="true"] {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
</style>
......@@ -87,7 +87,8 @@ const handleInfoClick = () => {
border-radius: 12px;
padding: 10px 16px;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(231, 243, 255, 1);
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}
.bubble-header {
......
......@@ -10,7 +10,7 @@ const getMultiLineChart = (data) => {
const echartsSeries = series.map((item, index) => ({
name: item.name,
type: 'line',
smooth: false,
smooth: true,
symbol: 'circle',
symbolSize: 8,
itemStyle: {
......
......@@ -102,8 +102,8 @@ export default {
display: flex;
align-items: center;
width: 100%;
padding: 0 40px;
width: 1500px;
/* padding: 0 40px; */
width: 1600px;
overflow: auto;
}
......@@ -156,7 +156,7 @@ export default {
.line {
position: absolute;
left: 0;
left: 10px;
right: 0;
top: 50%;
height: 6px;
......
......@@ -74,7 +74,7 @@ const makeOption = () => {
const change = props.data.change;
const unit = props.data.unit;
if (change === 0) {
return `{num|${'无新增'}}`
return `{noChange|${'无新增'}}\n{b|共${props.data.count}${unit}}`
}
return `{num|${change}}{unit| ${unit}}\n{b|共${props.data.count}${unit}}`
},
......@@ -86,7 +86,7 @@ const makeOption = () => {
padding: [-4, 0, 8, 0]
},
noChange: {
fontSize: 24,
fontSize: 20,
fontWeight: 'bold',
color: `${props.color[5]}`,
padding: [0, 0, 8, 0]
......
......@@ -7,7 +7,7 @@
width: sections[index].waveBall.length === 2 ? '350px' : '503px',
background: section.background
}">
<img class="section-title" :src="`/public/icon/riskToday/title-` + (index + 1) + `.png`" />
<img class="section-title" :src="section.title" />
<div class="stats">
<div v-for="value in sections[index].waveBall">
<WaveBall :percent="value.percent" :data="value" :color="section.waterColor" :size="128" />
......@@ -39,7 +39,8 @@
</div>
</div>
<div style="display: flex">
<div class="risk-signals">
<!-- 风险信号列表 -->
<div class="risk-signals" ref="riskSignalsRef">
<div class="risk-signals-item" v-for="(item, index) in warningList" :key="index"
@click="handleClickToDetailO(item)">
<div class="item-left" :class="{
......@@ -70,7 +71,7 @@
<el-carousel ref="carouselRef" style="height: 443px; width: 664px" :autoplay="true" :interval="30000"
arrow="never" indicator-position="none" @change="handleCarouselChange">
<el-carousel-item v-for="(News, NewsIndex) in hotNewsList" :key="NewsIndex">
<div class="carousel-item">
<div class="carousel-item" @click="toDetaile(News.id, News.HotspotType)">
<div class="carousel-title">
<div>
<div class="title-text">
......@@ -105,17 +106,21 @@
<script setup>
import { color } from "echarts";
import { onMounted, ref, computed, onBeforeUnmount } from "vue";
import { onMounted, ref, onUnmounted, onBeforeUnmount } from "vue";
import WaveBall from "./WaveBall.vue";
import { getBillRiskSignal } from "@/api/bill/billHome";
import { getLatestRiskUpdates, getLatestRisks } from '@/api/zmOverview/risk/index.js'
import router from "@/router/index";
import icon1 from './icon/title-1.png'
import icon2 from './icon/title-2.png'
import icon3 from './icon/title-3.png'
import icon4 from './icon/title-4.png'
const sectionTab = [
{
textColor: "rgba(9, 88, 217, 1)",
background: "linear-gradient(180.00deg, rgba(9, 88, 217, 1),rgba(9, 88, 217, 0.5) 100%)",
borderColor: "rgba(186, 224, 255, 1)",
waterColor: ["#4E92F4", "#5993EE", "#8EB3ED", "#77A2EB", "#ffffff", "#ffffff"],
title: "政策法规"
title: icon1
},
{
textColor: "rgba(9, 88, 217, 1)",
......@@ -123,7 +128,7 @@ const sectionTab = [
borderColor: "rgba(186, 224, 255, 1)",
waterColor: ["#4AB9BA", "#5DBFC1", "#86CCCF", "#8DD0D2", "#ffffff", "#ffffff"],
title: "出口管制"
title: icon2
},
{
textColor: "rgba(9, 88, 217, 1)",
......@@ -131,7 +136,7 @@ const sectionTab = [
borderColor: "rgba(186, 224, 255, 1)",
waterColor: ["#EF797B", "#ED8C8E", "#EAB0B2", "#E7ABAC", "#ffffff", "#ffffff"],
title: "投融资限制"
title: icon3
},
{
textColor: "rgba(9, 88, 217, 1)",
......@@ -139,7 +144,7 @@ const sectionTab = [
borderColor: "rgba(186, 224, 255, 1)",
waterColor: ["#EFA04F", "#EDA969", "#EABA8C", "#E7AF7A", "#ffffff", "#ffffff"],
title: "市场准入"
title: icon4
}
];
// 模拟从后端获取的数据
......@@ -367,7 +372,6 @@ const hotNewsList = ref([
//最新风险信号
const handleGetLatestRisks = async () => {
try {
const res = await getLatestRisks();
console.log("最新风险信号", res);
if (res.code === 200 && res.data) {
......@@ -391,12 +395,86 @@ const handleCarouselChange = index => {
}
};
// 查看详情
const handleClickToDetail = () => {
window.sessionStorage.setItem("billId", curBill.value.billId);
window.sessionStorage.setItem("curTabName", curBill.value.billName);
const route = router.resolve({
path: "/billLayout",
query: {
billId: curBill.value.billId
}
});
console.log(route);
window.open(route.href, "_blank");
};
// 查看详情 传递参数
const handleClickToDetailO = item => {
window.sessionStorage.setItem("billId", item.billId);
window.sessionStorage.setItem("curTabName", item.name || item.signalTitle);
const route = router.resolve("/billLayout?billId=" + item.billId);
window.open(route.href, "_blank");
};
const handleToRiskManage = () => {
// 这里的路由路径请根据实际情况修改
// router.push('/riskSignalManage');
console.log('跳转到风险信号管理');
};
const toDetaile = (id, type) => {
if (type === '法案') {
let path = "/billLayout/bill/introduction";
let query = { billId: id };
const { href } = router.resolve({ path, query });
window.open(href, "_blank");
} else if (type === '政令') {
const route = router.resolve({
path: "/decreeLayout/overview/introduction",
query: {
id: id
}
});
window.open(route.href, "_blank");
} else if (type === '实体清单' || type === 'CCL') {
const route = router.resolve({
path: "/exportControl/singleSanction",
query: {
id: id
}
});
window.open(route.href, "_blank");
} else if (type === '337') {
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "337",
searchId: id
}
});
window.open(curRoute.href, "_blank");
} else if (type === '203') {
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "203",
searchId: id
}
});
window.open(curRoute.href, "_blank");
} else if (type === '301') {
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "301",
searchId: id
}
});
window.open(curRoute.href, "_blank");
}
//type=涉军企业和SDN未对接
}
const handleSwithCurNews = name => {
if (name === "left") {
carouselRef.value.prev();
......@@ -404,12 +482,37 @@ const handleSwithCurNews = name => {
carouselRef.value.next();
}
};
const riskSignalsRef = ref(null); // 引用risk-signals容器
let intervalId;
onMounted(async () => {
await handleGetLatestRiskUpdates()
await handleGetLatestRisks()
console.log("页面加载完成,可以获取数据了");
const scrollInterval = 2000; // 每隔2秒滚动一次
let currentScroll = 0;
intervalId = setInterval(() => {
if (riskSignalsRef.value) {
const scrollHeight = riskSignalsRef.value.scrollHeight; // 内容总高度
const clientHeight = riskSignalsRef.value.clientHeight; // 可视区域高度
console.log(scrollHeight, clientHeight)
// 如果滚动到底,则回到顶部
if (currentScroll + clientHeight >= scrollHeight) {
currentScroll = 0;
riskSignalsRef.value.scrollTop = currentScroll;
} else {
currentScroll += 10; // 调整这个值可以改变滚动速度
riskSignalsRef.value.scrollTop = currentScroll;
}
}
}, scrollInterval);
});
onUnmounted(() => {
clearInterval(intervalId); // 清除定时器
});
// onBeforeUnmount(() => {
// andleGetLatestRiskUpdates()
......@@ -785,32 +888,29 @@ onMounted(async () => {
.title-text {
/* 美国白宫发布关于进一步延长TikTok执法宽限期的行政令 */
width: 547px;
height: 26px;
// height: 26px;
}
.title-tag {
/* 容器 1563 */
width: 190px;
/* 移除固定 width */
height: 30px;
margin-top: 12px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 10;
padding: 0px 12px 0px 12px;
padding: 0 12px;
/* 左右内边距控制最小宽度 */
display: inline-flex;
/* ✅ 关键:inline + flex */
justify-content: center;
/* 水平居中 */
align-items: center;
/* 垂直居中 */
border-radius: 20px;
background: rgba(206, 79, 81, 0.1);
color: rgba(206, 79, 81, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
white-space: nowrap;
/* 防止文字换行 */
box-sizing: border-box;
}
}
......
......@@ -63,14 +63,16 @@
<div class="info-item-left">
<img :src="logo1" alt="" />
<div class="info-item-left-content">
<p>地址:北京市海淀区复兴路15号 邮编:100038</p>
<p>办公电话:010-58882033 办公传真:010-58882590</p>
<p>中国科学技术信息研究所 版权所有 京ICP备10027328</p>
<p>地址:北京市海淀区复兴路某某某某某某 邮编:100000</p>
<p>办公电话:000-88888888 办公传真:000-88888888</p>
<p>中国中国中国中国中国北京 版权所有 京ICP备00000000</p>
</div>
</div>
<div class="info-item-right">
<img :src="logo2" alt="" />
<img :src="logo3" alt="" />
<img class="img1" :src="logo2" alt="" />
<img class="img2" :src="logo3" alt="" />
<div class="text2">{{ "中国某某某某某某某某部" }}</div>
<div class="text3">{{ "中国某某某某某某某某所" }}</div>
</div>
</div>
</div>
......@@ -110,6 +112,11 @@ const navList = ref([
]);
const handleScrollTo = id => {
if (id === "tech-news") {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
return;
}
const element = document.getElementById(id);
const container = document.querySelector(".content-box");
if (element && container) {
......@@ -393,12 +400,45 @@ const handleDateClick = type => {
.info-item-right {
display: flex;
align-items: center;
img:first-child {
position: relative;
height: 60px;
.text2 {
left: 60px;
position: absolute;
width: 237px;
height: 37px;
background: #fff;
color: rgba(34, 41, 52, 1);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 37px;
letter-spacing: 0px;
text-align: center;
}
.text3 {
left: 385px;
top: 12px;
position: absolute;
width: 237px;
height: 37px;
background: #fff;
color: rgba(34, 41, 52, 1);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 37px;
letter-spacing: 0px;
text-align: center;
}
.img1 {
width: 300px;
height: 48.8px;
margin-right: 24px;
}
img:last-child {
.img2 {
width: 300px;
height: 43.5px;
}
......
......@@ -2071,13 +2071,13 @@ onUnmounted(() => {
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 40px 0 30px;
padding: 0 40px 0 21px;
.box1-header-left {
display: flex;
.icon {
width: 18px;
height: 18px;
margin-top: 19px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
......@@ -2087,7 +2087,7 @@ onUnmounted(() => {
width: 112px;
height: 48px;
background: var(--color-main-active);
margin-left: 18px;
margin-left: 21px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 20px;
......@@ -2188,7 +2188,7 @@ onUnmounted(() => {
line-height: 30px;
}
.info1-box-right {
margin-left: 64px;
margin-left: 40px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
......@@ -2347,7 +2347,7 @@ onUnmounted(() => {
width: 24px;
height: 22px;
margin-left: 18px;
margin-top: 18px;
margin-top: 13px;
img {
width: 100%;
height: 100%;
......@@ -2574,11 +2574,12 @@ onUnmounted(() => {
width: 657px;
margin-left: 20px;
.right-top {
margin-top: 16px;
width: 657px;
height: 24px;
display: flex;
justify-content: space-between;
.title {
margin-top: 13px;
width: 440px;
height: 24px;
color: rgba(59, 65, 75, 1);
......@@ -2593,13 +2594,12 @@ onUnmounted(() => {
.time {
flex: 1;
text-align: right;
height: 22px;
margin-top: 19px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
line-height: 24px;
overflow: hidden;
}
}
......
......@@ -28,7 +28,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
legend: {
data: ['提出法案', '通过法案', '通过率'],
show: true,
top: 0,
top: 10,
icon: 'circle',
textStyle: {
color: 'rgba(95, 101, 108, 1)',
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论