完成图表组件动态加载及样式优化

This commit is contained in:
于磊奇 2025-06-18 22:42:28 +08:00
parent 339e4507a9
commit 4d25f14e95
16 changed files with 1027 additions and 798 deletions

1221
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -15,6 +15,7 @@
"axios": "^1.10.0",
"echarts": "^5.6.0",
"element-plus": "^2.10.1",
"pinia": "^3.0.3",
"tdesign-vue-next": "^1.13.2",
"vue": "^3.5.13",
"vue-router": "^4.5.1"

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 95 KiB

View File

@ -1,10 +1,13 @@
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const pinia = createPinia();
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import router from './router';
const app = createApp(App);
app.use(pinia);
app.use(ElementPlus);
app.use(router);
app.mount('#app');

22
src/store/index.js Normal file
View File

@ -0,0 +1,22 @@
import { defineStore } from 'pinia';
export const useActionStore = defineStore('action', {
state: () => ({
triggerCombineAction: false,
targetNodeId: '840983' // 默认高亮节点ID
}),
actions: {
// 触发定位并高亮操作
triggerCombine() {
this.triggerCombineAction = true;
// 自动重置状态,避免重复触发
setTimeout(() => {
this.triggerCombineAction = false;
}, 100);
},
// 设置目标节点ID
setTargetNodeId(id) {
this.targetNodeId = id;
}
}
});

View File

@ -1,9 +1,3 @@
<!-- <script setup>
// import { RouterView } from 'vue-router'
// import HelloWorld from './components/HelloWorld.vue'
// import Visualize from '../views/visualize/index.vue'
// import graphData from "../views/visualize/data/graphData.ts"
</script> -->
<template>
<div style="width: 100%; height: 100%;">
@ -173,6 +167,6 @@ onMounted(() => {
}
.slider-box {
margin-top: 10px;
margin-top: -230px;
}
</style>

View File

@ -1,26 +1,68 @@
<template>
<div class="main">
<div v-if="showTooltip" class="tooltip">
<div class="tooltip-containner">
<img src="../assets/images/mess/key.png" alt="">
<div class="tooltip-containner-data">
<li><img :src="currentItem.img" alt="" style="max-width: 100%; height: auto;"></li>
<li><img src="../assets/images/logo/point.png" alt="">最初首发者&nbsp;&nbsp;&nbsp;{{ currentItem.earler }} </li>
<li><img src="../assets/images/logo/point.png" alt="">积极评论者{{ currentItem.comenter }}</li>
<li><img src="../assets/images/logo/point.png" alt="">锚点用户{{ currentItem.keyuser }}</li>
<li><img src="../assets/images/logo/point.png" alt="">积极转发者&nbsp;&nbsp;&nbsp;{{ currentItem.switcher }}</li>
<li><img :src="currentItem.img" alt="" style=""></li>
<li><img :src="currentItem.imgdata" alt="" style="width: 500px;height: 400px;margin-left: 20px;"></li>
<li style="margin-left: 10px; margin-top: 20px;"><img src="../assets/images/logo/point.png"
alt="">最初首发者&nbsp;&nbsp;&nbsp;{{ currentItem.earler }} </li>
<li style="margin-left: 10px;"><img src="../assets/images/logo/point.png" alt="">积极评论者{{ currentItem.comenter
}}</li>
<li style="margin-left: 200px;margin-top: -57px;"><img src="../assets/images/logo/point.png" alt="">锚点用户{{
currentItem.keyuser }}</li>
<li style="margin-left: 200px;;"><img src="../assets/images/logo/point.png" alt="">积极转发者&nbsp;&nbsp;&nbsp;{{
currentItem.switcher }}</li>
</div>
<img src="../assets/images/logo/cancel.png" alt=""
style="float: right;margin-right: 10px;margin-top: -160px;cursor: pointer;" @click="showTooltip = false">
style="float: right;margin-right: 10px;margin-top: -520px;cursor: pointer;" @click="showTooltip = false">
</div>
</div>
<div v-if="showDetailModal" class="detail-modal-overlay">
<div class="detail-modal">
<img src="../assets/images/logo/cancel.png" @click="closeDetailModal" style="float: right;margin-left: 300px;">
</img>
<img :src="currentDetailItem.avatar" class="large-avatar">
<div style="color: #FFFFFF;font-size:large;margin-left: 150px;margin-top: -50px;">{{ currentDetailItem.name }}
</div>
<div class="info-container">
<!-- 第一列 -->
<div class="info-column">
<p><strong>粉丝数量:</strong> {{ currentDetailItem.number }}</p>
<p><strong>贴文被转发总数:</strong> {{ currentDetailItem.transmit || '未设置' }}</p>
<p><strong>首次活跃时间:</strong> {{ currentDetailItem.time || '未知' }}</p>
</div>
<!-- 第二列 -->
<div class="info-column">
<p><strong>发帖总数:</strong> {{ currentDetailItem.posts || '未知' }}</p>
<p><strong>关注数量:</strong> {{ currentDetailItem.atten || '未知' }}</p>
<p><strong>参与互动次数:</strong> {{ currentDetailItem.interaction || '未知' }}</p>
</div>
</div>
<div class="info-coment">精选贴文
<!-- 新增贴文列表容器 -->
<div class="post-list-container">
<div class="post-item" v-for="(post, index) in visibleData" :key="index">
<p class="post-content">{{ post.commenter }}</p>
<p class="post-content">{{ post.comment }}</p>
</div>
</div>
</div>
</div>
</div>
<header class="header">
<div class="time">
<img src="../assets/images/logo/time.png" alt="" style="float: right;margin-right: 250px;margin-top: -150px;">
<div class="realtime-clock" style="position: absolute; top: 20px; right:100px; color: #1EA0FD; font-family: LCD2; font-size: 20px;">
<button class="back-home-btn" @click="goToHome">返回主页面</button>
<div class="timer">
<button class="reload-button" @click="handleReload" :disabled="isReloading" style="margin-top: -10px;">
<img src="../assets/images/logo/reload.png">
{{ buttonText }}
</button>
{{ currentTime }}
</div>
</div>
</header>
<div class="search">
<!-- 使用 el-autocomplete 组件替换原输入框 -->
@ -62,15 +104,20 @@
</div>
<div class="suggestion-containner">
<ul>
<li v-for="item in filteredData" :key="item.id">
<!-- 显示用户头像 -->
<li v-for="item in filteredData" :key="item.id" @click="openDetailModal(item)"
@mouseenter="handleMouseEnter(item.id)" @mouseleave="handleMouseLeave()"
:class="{ 'hover-item': hoverItemId === item.id }">
<img :src="item.avatar">
<!-- 显示其他信息 -->
<div class="span-data">
<span class="span-1">{{ item.name }}</span>
<span class="span-2">粉丝数&nbsp;{{ item.number }}</span>
<span class="span-3">推荐监控频率</span>
<span class="span-3">推荐监控频率{{ item.transmit }}</span>
<button
style="background-image: url('src/assets/images/logo/定位.png'); background-size: cover; background-repeat: no-repeat; background-position: center;width: 20px;height: 20px;margin-left: 240px;margin-top:-45px;border-radius: 0px;border: 0;cursor: pointer;"
@click.stop="handleCombineAction"></button>
</div>
</li>
</ul>
</div>
@ -116,14 +163,13 @@
</div>
<!-- 初始无数据时显示空状态 -->
<div v-else class="empty-state">
<!-- 可以添加空状态提示或留空 -->
</div>
</div>
</transition>
</div>
</div>
<div class="containner3-img">
<div id="main" style="width: 100%;height:230px;"></div>
<div id="main" style="width: 450px;height:230px;"></div>
</div>
</div>
<div class="containner4">
@ -160,16 +206,40 @@
</div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
import { ref, computed, reactive, onMounted, onUnmounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import IndexView from './App.vue';
import ScrollContainer from '@/components/ScrollContainer.vue';
import * as echarts from 'echarts';
import axios from 'axios';
import { useActionStore } from '@/store';
// import { positionElement } from 'echarts/types/src/util/layout.js';
let myChart = null;
const router = useRouter();
const actionStore = useActionStore();
const nodes = [{}, {}];
const links = [];
const graphData = { nodes, links }
const graphData = { nodes, links };
//
const isReloading = ref(false);
const buttonText = ref('');
//
const handleReload = () => {
//
isReloading.value = true;
buttonText.value = '加载中...';
//
window.location.reload();
};
const goToHome = () => {
router.push('/'); //
};
const handleCombineAction = () => {
actionStore.triggerCombine();
};
//
const currentTime = ref('');
@ -184,6 +254,45 @@ const formatTime = () => {
hour12: false
});
};
//
//
const hoverItemId = ref(null);
//
const showDetailModal = ref(false);
const currentDetailItem = ref(null);
//
const handleMouseEnter = (id) => {
hoverItemId.value = id;
};
const handleMouseLeave = () => {
hoverItemId.value = null;
};
//
const openDetailModal = (item) => {
currentDetailItem.value = item;
showDetailModal.value = true;
//
event.stopPropagation();
};
//
const closeDetailModal = () => {
showDetailModal.value = false;
currentDetailItem.value = null;
};
//
const handleClickOutside = () => {
if (showDetailModal.value) {
closeDetailModal();
}
};
const handleSearch = () => {
if (inputValue.value === '南海争端系列舆情事件') {
@ -238,26 +347,26 @@ const handleInput = () => {
};
const mediaData = [
{ id: 1, type: '新闻媒体', name: '新浪军事', avatar: 'src/views/user/xinlang.png', number: '5005.8w' },
{ id: 2, type: '新闻媒体', name: '环球时报', avatar: 'src/views/user/huanqiu.png', number: '3126.1w' },
{ id: 3, type: '自媒体', name: '大侠啊啊啊啊', avatar: 'src/views/user/daxia.png', number: '288' },
{ id: 4, type: '自媒体', name: '外贸发布BBS', avatar: 'src/views/user/bbs.png', number: '1.3w' },
{ id: 5, type: '自媒体', name: '空天砺剑', avatar: 'src/views/user/kongtian.png', number: '516.5w' },
{ id: 6, type: '自媒体', name: '爱锤盾海桃-霆恩启副', avatar: 'src/views/user/ai.png', number: '223' },
{ id: 7, type: '自媒体', name: '苍龙飞天79', avatar: 'src/views/user/79.png', number: '516.6w' },
{ id: 8, type: '自媒体', name: '盖世英雄玉椒龙', avatar: 'src/views/user/gaishi.png', number: '42w' },
{ id: 9, type: '自媒体', name: '十八子91221', avatar: 'src/views/user/91221.png', number: '1947' },
{ id: 10, type: '自媒体', name: '江夏云飞', avatar: 'src/views/user/jiang.png', number: '1629' },
{ id: 11, type: '自媒体', name: '唐宁20150903', avatar: 'src/views/user/tang.png', number: '25' },
{ id: 12, type: '自媒体', name: '钻石狗Boss', avatar: 'src/views/user/bbs.png', number: '1184' },
{ id: 13, type: '自媒体', name: '乐之567', avatar: 'src/views/user/567.png', number: '266' },
{ id: 14, type: '自媒体', name: '地瓜熊老六', avatar: 'src/views/user/lao.png', number: '667.5w' },
{ id: 15, type: '自媒体', name: 'CGTN记者团', avatar: 'src/views/user/cgtn.png', number: '322.1w' },
{ id: 16, type: '自媒体', name: '钱局长本人', avatar: 'src/views/user/qian.png', number: '40万' },
{ id: 17, type: '自媒体', name: '肥_谍_gg', avatar: 'src/views/user/gg.png', number: '245' },
{ id: 18, type: '自媒体', name: '深海一万米', avatar: 'src/views/user/shenhai.png', number: '126w' },
{ id: 19, type: '政府官号', name: '中国海警', avatar: 'src/views/user/haijing.png', number: '80.9w' },
{ id: 20, type: '政府官号', name: '平安泸县', avatar: 'src/views/user/luxian.png', number: '3.9w' },
{ id: 1, type: '新闻媒体', name: '新浪军事', avatar: 'src/views/user/xinlang.png', number: '5005.8w', transmit: '425', time: '2024.1.5', posts: '2.1w', atten: '98', interaction: '16.1w' },
{ id: 2, type: '新闻媒体', name: '环球时报', avatar: 'src/views/user/huanqiu.png', number: '3126.1w', transmit: '557', time: '2024.3.12', posts: '1.8w', atten: '76', interaction: '9.3w' },
{ id: 3, type: '自媒体', name: '大侠啊啊啊啊', avatar: 'src/views/user/daxia.png', number: '288', transmit: '55', time: '2024.2.20', posts: '896', atten: '12', interaction: '3.2w' },
{ id: 4, type: '自媒体', name: '外贸发布BBS', avatar: 'src/views/user/bbs.png', number: '1.3w', transmit: '68', time: '2024.4.5', posts: '562', atten: '8', interaction: '1.5w' },
{ id: 5, type: '自媒体', name: '空天砺剑', avatar: 'src/views/user/kongtian.png', number: '516.5w', transmit: '55', time: '2024.1.28', posts: '3.2w', atten: '156', interaction: '22.7w' },
{ id: 6, type: '自媒体', name: '爱锤盾海桃-霆恩启副', avatar: 'src/views/user/ai.png', number: '223', transmit: '76', time: '2024.3.18', posts: '432', atten: '5', interaction: '896' },
{ id: 7, type: '自媒体', name: '苍龙飞天79', avatar: 'src/views/user/79.png', number: '516.6w', transmit: '76', time: '2024.2.10', posts: '2.9w', atten: '142', interaction: '19.5w' },
{ id: 8, type: '自媒体', name: '盖世英雄玉椒龙', avatar: 'src/views/user/gaishi.png', number: '42w', transmit: '53', time: '2024.4.1', posts: '1.2w', atten: '67', interaction: '8.3w' },
{ id: 9, type: '自媒体', name: '十八子91221', avatar: 'src/views/user/91221.png', number: '1947', transmit: '56', time: '2024.1.15', posts: '654', atten: '9', interaction: '2.1w' },
{ id: 10, type: '自媒体', name: '江夏云飞', avatar: 'src/views/user/jiang.png', number: '1629', transmit: '33', time: '2024.3.25', posts: '321', atten: '4', interaction: '987' },
{ id: 11, type: '自媒体', name: '唐宁20150903', avatar: 'src/views/user/tang.png', number: '25', transmit: '43', time: '2024.2.5', posts: '128', atten: '2', interaction: '456' },
{ id: 12, type: '自媒体', name: '钻石狗Boss', avatar: 'src/views/user/bbs.png', number: '1184', transmit: '76', time: '2024.4.12', posts: '512', atten: '7', interaction: '1.8w' },
{ id: 13, type: '自媒体', name: '乐之567', avatar: 'src/views/user/567.png', number: '266', transmit: '24', time: '2024.1.30', posts: '209', atten: '3', interaction: '654' },
{ id: 14, type: '自媒体', name: '地瓜熊老六', avatar: 'src/views/user/lao.png', number: '667.5w', transmit: '33', time: '2024.3.8', posts: '4.7w', atten: '210', interaction: '33.2w' },
{ id: 15, type: '自媒体', name: 'CGTN记者团', avatar: 'src/views/user/cgtn.png', number: '322.1w', transmit: '43', time: '2024.2.18', posts: '2.5w', atten: '105', interaction: '17.8w' },
{ id: 16, type: '自媒体', name: '钱局长本人', avatar: 'src/views/user/qian.png', number: '40万', transmit: '56', time: '2024.4.20', posts: '1.3w', atten: '58', interaction: '9.4w' },
{ id: 17, type: '自媒体', name: '肥_谍_gg', avatar: 'src/views/user/gg.png', number: '245', transmit: '56', time: '2024.1.22', posts: '317', atten: '6', interaction: '1.2w' },
{ id: 18, type: '自媒体', name: '深海一万米', avatar: 'src/views/user/shenhai.png', number: '126w', transmit: '44', time: '2024.3.5', posts: '8906', atten: '42', interaction: '6.7w' },
{ id: 19, type: '政府官号', name: '中国海警', avatar: 'src/views/user/haijing.png', number: '80.9w', transmit: '45', time: '2024.2.8', posts: '1.1w', atten: '35', interaction: '5.2w' },
{ id: 20, type: '政府官号', name: '平安泸县', avatar: 'src/views/user/luxian.png', number: '3.9w', transmit: '45', time: '2024.4.15', posts: '4321', atten: '18', interaction: '2.9w' },
];
const categoryData = {
'全部': {
@ -505,6 +614,7 @@ const tooltipDdata1 = [
earler: '玉渊谭天',
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
img: 'src/assets/images/mess/main1.png',
imgdata: 'src/assets/images/mess/1top.png',
beforeimg: 'src/assets/images/logo/ruank1.png',
backimg: 'src/assets/images/logo/high3.png'
}
@ -518,6 +628,7 @@ const tooltipDdata2 = [
earler: '玉渊谭天',
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
img: 'src/assets/images/mess/main1.png',
imgdata: 'src/assets/images/mess/1top.png',
beforeimg: 'src/assets/images/logo/ruank1.png',
backimg: 'src/assets/images/logo/high3.png'
},
@ -529,6 +640,7 @@ const tooltipDdata2 = [
earler: '玉渊谭天',
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
img: 'src/assets/images/mess/main2.png',
imgdata: 'src/assets/images/mess/2top.png',
beforeimg: 'src/assets/images/logo/ruank2.png',
backimg: 'src/assets/images/logo/high3.png'
},
@ -542,6 +654,7 @@ const tooltipDdata3 = [
earler: '玉渊谭天',
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
img: 'src/assets/images/mess/main1.png',
imgdata: 'src/assets/images/mess/1top.png',
beforeimg: 'src/assets/images/logo/ruank1.png',
backimg: 'src/assets/images/logo/high3.png'
},
@ -553,6 +666,7 @@ const tooltipDdata3 = [
earler: '玉渊谭天',
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
img: 'src/assets/images/mess/main2.png',
imgdata: 'src/assets/images/mess/2top.png',
beforeimg: 'src/assets/images/logo/ruank2.png',
backimg: 'src/assets/images/logo/high3.png'
},
@ -564,6 +678,7 @@ const tooltipDdata3 = [
earler: '新浪军事',
keyuser: '环球时报, 苍龙飞天79, 外贸发布BBS, 新浪军事, 空天砺剑',
img: 'src/assets/images/mess/main3.png',
imgdata: 'src/assets/images/mess/3top.png',
beforeimg: 'src/assets/images/logo/ruank3.png',
backimg: 'src/assets/images/logo/high3.png'
},
@ -577,6 +692,7 @@ const tooltipDdata4 = [
earler: '玉渊谭天',
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
img: 'src/assets/images/mess/main1.png',
imgdata: 'src/assets/images/mess/1top.png',
beforeimg: 'src/assets/images/logo/ruank1.png',
backimg: 'src/assets/images/logo/high2.png'
},
@ -588,6 +704,7 @@ const tooltipDdata4 = [
earler: '玉渊谭天',
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
img: 'src/assets/images/mess/main2.png',
imgdata: 'src/assets/images/mess/2top.png',
beforeimg: 'src/assets/images/logo/ruank2.png',
backimg: 'src/assets/images/logo/high3.png'
},
@ -599,6 +716,7 @@ const tooltipDdata4 = [
earler: '新浪军事',
keyuser: '环球时报, 苍龙飞天79, 外贸发布BBS, 新浪军事, 空天砺剑',
img: 'src/assets/images/mess/main3.png',
imgdata: 'src/assets/images/mess/3top.png',
beforeimg: 'src/assets/images/logo/ruank3.png',
backimg: 'src/assets/images/logo/high3.png'
},
@ -610,8 +728,9 @@ const tooltipDdata4 = [
earler: '白俄罗斯大宽',
keyuser: '盖世英雄玉椒龙, 肥_谍_gg, 钻石狗Boss, 外贸发布BBS, 新浪军事, 钱局长本人, 地瓜熊老六,唐宁20150903,空天砺剑',
img: 'src/assets/images/mess/main4.png',
imgdata: 'src/assets/images/mess/4top.png',
beforeimg: 'src/assets/images/logo/ruank4.png',
backimg: 'src/assets/images/logo/high4.png'
backimg: 'src/assets/images/logo/high3.png'
},
]
const tooltipDdata5 = [
@ -623,6 +742,7 @@ const tooltipDdata5 = [
earler: '玉渊谭天',
keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
img: 'src/assets/images/mess/main1.png',
imgdata: 'src/assets/images/mess/1top.png',
beforeimg: 'src/assets/images/logo/ruank1.png',
backimg: 'src/assets/images/logo/high1.png'
},
@ -634,6 +754,7 @@ const tooltipDdata5 = [
earler: '白俄罗斯大宽',
keyuser: '苍龙飞天79,平安泸县,新浪军事',
img: 'src/assets/images/mess/main2.png',
imgdata: 'src/assets/images/mess/2top.png',
beforeimg: 'src/assets/images/logo/ruank2.png',
backimg: 'src/assets/images/logo/high2.png'
},
@ -645,6 +766,7 @@ const tooltipDdata5 = [
earler: '新浪军事',
keyuser: '环球时报, 苍龙飞天79, 外贸发布BBS, 新浪军事, 空天砺剑',
img: 'src/assets/images/mess/main3.png',
imgdata: 'src/assets/images/mess/3top.png',
beforeimg: 'src/assets/images/logo/ruank3.png',
backimg: 'src/assets/images/logo/high3.png'
},
@ -656,6 +778,7 @@ const tooltipDdata5 = [
earler: '白俄罗斯大宽',
keyuser: '盖世英雄玉椒龙, 肥_谍_gg, 钻石狗Boss, 外贸发布BBS, 新浪军事, 钱局长本人, 地瓜熊老六,唐宁20150903,空天砺剑',
img: 'src/assets/images/mess/main4.png',
imgdata: 'src/assets/images/mess/4top.png',
beforeimg: 'src/assets/images/logo/ruank4.png',
backimg: 'src/assets/images/logo/high3.png'
},
@ -667,6 +790,7 @@ const tooltipDdata5 = [
earler: '今日俄罗斯RT',
keyuser: '新浪军事',
img: 'src/assets/images/mess/main5.png',
imgdata: 'src/assets/images/mess/5top.png',
beforeimg: 'src/assets/images/logo/ruank5.png',
backimg: 'src/assets/images/logo/high3.png'
},
@ -691,16 +815,7 @@ const selectItem = (item) => {
//
const switchToNextDataSet = () => {
currentDataSetIndex.value++;
//
if (currentDataSetIndex.value >= dataSets.value.length) {
currentDataSetIndex.value = 0;
}
};
// (615)
const activeWarningCount = ref(0);
// (24161)
const highRiskCount = ref(0);
// 便
const TIMER = {
ACTIVE_WARNING_INTERVAL: 12000, // (ms)
@ -756,19 +871,34 @@ const startDataSwitchTimer = () => {
}, TIMER.DATA_SWITCH_DURATION);
timers.push(interval, timeout);
};
//
const appRef = ref(null);
//
const handleLocationClick = (itemId) => {
// slider30
state.sliderValue = 30;
sliderChange(30);
// 使itemId
setTimeout(() => {
highlightNode(itemId);
}, 500);
};
onMounted(() => {
// ... ...
startActiveWarningTimer();
startHighRiskTimer();
startDataSwitchTimer();
//
currentTime.value = formatTime();
document.addEventListener('click', handleClickOutside);
//
currentTime.value = formatTime();
const clockTimer = setInterval(() => {
currentTime.value = formatTime();
}, 1000);
//
timers.push(clockTimer);
@ -788,7 +918,6 @@ onMounted(() => {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
@ -798,8 +927,15 @@ onMounted(() => {
},
xAxis: {
type: 'category',
boundaryGap: false,//
data: ['1-4', '2.8', '3-6', '4-7', '5-8', '5-29', '6-20'],
boundaryGap: true,//
data: ['6.29', '6.30', '7-1', '7-2', '7-3', '7-4', '7-5'],
name: '日期',
nameLocation: 'middle',
nameGap: 20,
nameTextStyle: {
color: '#606266',
fontSize: 12
},
axisLabel: { //
interval: 0,// 1
// margin:15,
@ -844,7 +980,7 @@ onMounted(() => {
}
},
splitLine: { // grid 线
show: true,
show: false,
lineStyle: {
color: '#E5E9ED',
// opacity:0.1
@ -855,6 +991,7 @@ onMounted(() => {
{
type: 'value',
splitNumber: 5,
name: '事件数量',
axisLabel: {
textStyle: {
color: '#a8aab0',
@ -933,7 +1070,11 @@ onMounted(() => {
}
});
//
onUnmounted(() => {
document.removeEventListener('click', handleClickOutside);
//
// 6
const dataSwitchTimer = setInterval(switchToNextDataSet, 6000);
@ -988,7 +1129,7 @@ onUnmounted(() => {
letter-spacing: 9.5%;
color: #1EA0FD;
float: right;
margin-right: 90px;
margin-right: 80px;
margin-top: -148px;
}
@ -1132,7 +1273,7 @@ onUnmounted(() => {
height: 682px;
margin-left: 530px;
margin-top: -900px;
margin-bottom: 200px;
margin-bottom: 30px;
}
.hiden {
@ -1164,6 +1305,30 @@ onUnmounted(() => {
margin-bottom: 15px;
}
.reload-button {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 12px;
background-color: #091f35;
color: #FFFFFF;
border: none;
border-radius: 8px;
cursor: pointer;
font-family: OPPOSans;
font-size: 12px;
}
.reload-button img {
width: 16px;
height: 16px;
}
.reload-button:hover {
background-color: #236291;
}
.right-container {
margin-right: 16px;
display: flex;
@ -1242,6 +1407,7 @@ onUnmounted(() => {
color: #FFFFFF;
margin-top: 15px;
margin-left: 30px;
border-radius: 8px;
}
.suggestion li img {
@ -1251,10 +1417,14 @@ onUnmounted(() => {
border-radius: 4px;
}
.suggestion li:hover {
background-image: linear-gradient(to bottom, #07293D, #050B23);
}
.suggestion-containner {
margin-left: 10px;
margin-top: 15px;
width: 360px;
width: 400px;
height: 480px;
max-height: 380px;
/* 可根据需要调整最大高度 */
@ -1462,6 +1632,10 @@ onUnmounted(() => {
-webkit-backdrop-filter: blur(4px);
}
.containner3-img {
margin-top: 70px;
}
.focus-events {
width: 440px;
height: 200px;
@ -1691,9 +1865,225 @@ onUnmounted(() => {
justify-content: center;
align-items: center;
color: #C6E3F5;
width: 200px;
width: 590px;
list-style-type: none;
flex: 1;
min-width: 0;
}
.timer {
color: #C6E3F5;
font-family: LCD2;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
display: flex;
flex-direction: row;
float: right;
margin-right: 50px;
margin-top: 20px;
}
/* 悬浮效果 */
.hover-item {
background-color: rgba(240, 245, 255, 0.8);
border-radius: 4px;
cursor: pointer;
transform: scale(1.02);
transition: all 0.2s ease;
}
/* 详情框样式 */
.detail-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.detail-modal {
background-image: linear-gradient(to bottom, #050B23, #07293D);
color: #E1F4FF;
width: 540px;
height: 660px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.modal-header {
padding: 15px 20px;
background-color: #f5f7fa;
border-bottom: 1px solid #e5e9f2;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
margin: 0;
color: #1d2129;
}
.close-btn {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #86909c;
}
.modal-body {
display: flex;
gap: 20px;
width: 668px;
height: 580px;
border-image: linear-gradient(to bottom, #0090FF, #0090FF00)1;
background-image: linear-gradient(to bottom, #050B23, #07293D);
}
.large-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 10px;
}
.info-container {
margin-left: 20px;
margin-top: 30px;
flex: 1;
}
.info-container p {
color: #C6E3F5;
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 200;
line-height: normal;
}
.cancel-btn {
padding: 8px 16px;
background-color: #0066ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.cancel-btn:hover {
background-color: #0052cc;
}
.info-container {
flex: 1;
display: flex;
gap: 30px;
}
.info-column {
flex: 1;
}
.info-column p {
margin: 12px 0;
color: #C6E3F5;
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 200;
line-height: normal;
line-height: 1.5;
}
.info-coment {
margin-top: 20px;
color: #C6E3F5;
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 200;
line-height: normal;
line-height: 1.5;
margin-left: 20px;
padding: 15px;
background-image: linear-gradient(to bottom, #0a1338, #07293D);
border-radius: 8px;
}
.post-list-container {
max-height: 370px;
/* 设置最大高度,超出部分将被隐藏 */
overflow-y: auto;
/* 垂直方向溢出时显示滚动条 */
margin-top: 10px;
padding-right: 5px;
/* 避免滚动条遮挡内容 */
}
/* 贴文项样式 */
.post-item {
padding: 12px;
margin-bottom: 10px;
background-image: linear-gradient(to bottom, #050B23, #07293D);
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.post-item:last-child {
margin-bottom: 0;
}
.post-content {
margin: 0 0 8px 0;
line-height: 1.5;
}
.post-meta {
margin: 0;
font-size: 12px;
color: #000000;
}
/* 自定义滚动条样式(可选) */
.post-list-container::-webkit-scrollbar {
width: 6px;
}
.post-list-container::-webkit-scrollbar-thumb {
/* background-color: #ffffff; */
border-radius: 3px;
}
.back-home-btn {
padding: 8px 16px;
background-color: #060427;
/* Vue绿色主题 */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.back-home-btn:hover {
background-color: #04142166;
}
.back-home-btn:active {
background-color: #0a1949;
}
</style>

View File

@ -58,7 +58,8 @@
style=" width: 180px;margin-top: -70px;margin-right: 50px;float: right;">
<img src="../assets/images/percent/1-1-1.png" alt="" style="margin-left: 45px;">
<button
class="mao-button"
class="mao-button"
:class="{ active: route.path === '/Main' }"
@click="goToPage('/Main')"
>
<img src="../assets/images/logo/mao.png" alt="" style="
@ -102,6 +103,8 @@
<script setup>
import { useRouter } from 'vue-router';
import { ref, onMounted,onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
import { ElLoading } from 'element-plus';
//
const currentTime = ref('');
@ -220,6 +223,26 @@ onUnmounted(() => {
});
</script>
<style scoped>
.mao-button {
/* 保留原有样式 */
transition: all 0.3s ease;
border-color: red;
}
.mao-button.active {
background-color: #409eff; /* 蓝色高亮 */
color: rgb(252, 5, 5);
box-shadow: 0 0 8px rgba(64, 158, 255, 0.6);
border-color: #f80202;
}
.mao-button:hover:not(.active) {
border-color: #409eff;
color: #409eff;
}
</style>
<style scoped>
html, body {
margin: 0;
@ -329,5 +352,22 @@ margin-top: -148px;
/* 添加 z-index 属性 */
position: relative;
z-index: 1001;
animation: breathe 2s infinite ease-in-out;
}
/* 定义呼吸效果关键帧 */
@keyframes breathe {
0% {
opacity: 0.4;
transform: scale(0.9);
}
50% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0.4;
transform: scale(0.9);
}
}
</style>

View File

@ -0,0 +1,4 @@
选择时间步长: 1D
热度字典:
{'2024-06-19 15:57': 2280, '2024-06-20 15:57': 612, '2024-06-21 15:57': 261, '2024-06-22 15:57': 258, '2024-06-23 15:57': 110, '2024-06-24 15:57': 80, '2024-06-25 15:57': 51, '2024-06-26 15:57': 18, '2024-06-27 15:57': 10, '2024-06-28 15:57': 10, '2024-06-29 15:57': 2, '2024-06-30 15:57': 2, '2024-07-01 15:57': 2}

View File

@ -0,0 +1,4 @@
选择时间步长: 12H
热度字典:
{'2024-06-19 21:36': 416, '2024-06-20 09:36': 796, '2024-06-20 21:36': 403, '2024-06-21 09:36': 236, '2024-06-21 21:36': 33, '2024-06-22 09:36': 29, '2024-06-22 21:36': 11, '2024-06-23 09:36': 10, '2024-06-23 21:36': 5, '2024-06-24 09:36': 10, '2024-06-24 21:36': 7, '2024-06-25 09:36': 1, '2024-06-25 21:36': 4, '2024-06-26 09:36': 6, '2024-06-26 21:36': 5, '2024-06-27 09:36': 5, '2024-06-27 21:36': 2, '2024-06-28 09:36': 1, '2024-06-28 21:36': 0, '2024-06-29 09:36': 1, '2024-06-29 21:36': 1}

View File

@ -0,0 +1,4 @@
选择时间步长: 1D
热度字典:
{'2024-06-20 13:08': 1711, '2024-06-21 13:08': 294, '2024-06-22 13:08': 49, '2024-06-23 13:08': 19, '2024-06-24 13:08': 6, '2024-06-25 13:08': 5, '2024-06-26 13:08': 1, '2024-06-27 13:08': 0, '2024-06-28 13:08': 0, '2024-06-29 13:08': 0, '2024-06-30 13:08': 1, '2024-07-01 13:08': 1}

View File

@ -0,0 +1,4 @@
选择时间步长: 12H
热度字典:
{'2024-06-22 17:10': 10, '2024-06-23 05:10': 1255, '2024-06-23 17:10': 801, '2024-06-24 05:10': 281, '2024-06-24 17:10': 48, '2024-06-25 05:10': 65, '2024-06-25 17:10': 30, '2024-06-26 05:10': 32, '2024-06-26 17:10': 16, '2024-06-27 05:10': 7, '2024-06-27 17:10': 5, '2024-06-28 05:10': 2, '2024-06-28 17:10': 1, '2024-06-29 05:10': 1, '2024-06-29 17:10': 1, '2024-06-30 05:10': 4, '2024-06-30 17:10': 1, '2024-07-01 05:10': 4}

View File

@ -0,0 +1,4 @@
选择时间步长: 6H
热度字典:
{'2024-06-25 15:05': 169, '2024-06-25 21:05': 186, '2024-06-26 03:05': 31, '2024-06-26 09:05': 8, '2024-06-26 15:05': 1, '2024-06-26 21:05': 2, '2024-06-27 03:05': 1, '2024-06-27 09:05': 0, '2024-06-27 15:05': 1, '2024-06-27 21:05': 0, '2024-06-28 03:05': 0, '2024-06-28 09:05': 0, '2024-06-28 15:05': 0, '2024-06-28 21:05': 0, '2024-06-29 03:05': 0, '2024-06-29 09:05': 0, '2024-06-29 15:05': 0, '2024-06-29 21:05': 0, '2024-06-30 03:05': 0, '2024-06-30 09:05': 1}