duanhao/SocialNetworks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Top互动

Browse Source
This commit is contained in:
chatgpt-yunju 2025-07-04 07:46:58 +08:00
parent 89c9231302
commit 970c793dc0
3 changed files with 185 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/relationship-title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

136
src/components/weight/InteractionStrengthChart.vue Normal file
View File

@ -0,0 +1,136 @@
<!-- src/components/weight/InteractionStrengthChart.vue -->
<template>
<div class="interaction-strength-panel">
<img src="@/assets/images/relationship-title.png" class="panel-title-img" alt="TOP关系强度图" />
<div class="chart-content">
<div class="axis">
<span>0</span>
<span>0.2</span>
<span>0.4</span>
<span>0.6</span>
<span>0.8</span>
<span>1</span>
<span class="axis-label">数量</span>
</div>
<div class="rows-container">
<div v-for="(item, index) in chartData" :key="index" class="row">
<div class="image-pair">
<img :src="item.images[0]" alt="Image 1" />
<img :src="item.images[1]" alt="Image 2" />
</div>
<div class="bar-area">
<div class="bar-track">
<div class="bar-fill" :style="{ width: item.value * 100 + '%' }"></div>
</div>
<span class="bar-value">{{ item.value.toFixed(2) }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
defineProps({
chartData: {
type: Array,
required: true,
},
});
</script>
<style scoped>
.interaction-strength-panel {
width: 352px;
height: 276px;
background: rgba(2, 8, 13, 0.4);
border: 1px solid #1a8bff;
border-radius: 2px;
display: flex;
flex-direction: column;
padding: 10px 20px;
box-sizing: border-box;
}
.panel-title-img {
width: 303px;
height: 34px;
align-self: center;
margin-top: 5px;
margin-bottom: 25px;
}
.chart-content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.axis {
display: flex;
justify-content: space-between;
color: #94c2ed;
font-family: 'D-DIN', sans-serif;
font-size: 12px;
padding: 0 5px;
margin-left: 70px; /* Align with bars */
margin-bottom: 20px;
}
.axis .axis-label {
color: #94c2ed;
}
.rows-container {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.row {
display: flex;
align-items: center;
gap: 10px;
height: 40px;
}
.image-pair {
display: flex;
gap: 4px;
}
.image-pair img {
width: 32px;
height: 32px;
border-radius: 4px;
object-fit: cover;
}
.bar-area {
flex-grow: 1;
display: flex;
align-items: center;
gap: 8px;
}
.bar-track {
flex-grow: 1;
height: 6px;
background-color: #192e40;
border-radius: 3px;
}
.bar-fill {
height: 100%;
background-color: #0078de;
border-radius: 3px;
}
.bar-value {
color: #29b8fb;
font-family: 'D-DIN', sans-serif;
font-size: 16px;
font-weight: bold;
}
</style>

119
src/views/LinkPrediction1.vue
View File

@ -146,45 +146,16 @@
<LeaderAnalysis :chart-data="analysisChartData" />
</div>
<!-- 第二行布局容器 (布局不变) -->
<!-- 第二行布局容器 (布局更新) -->
<div class="leader-containner2">
<EventHeatmap
@show-details="openDetailsModal"
:panelTrendData="[32655, 29182, 55732, 1051]"
:panelXAxisLabels="['2022.7.31', '2022.8.1', '2022.8.2', '2022.8.3']"
:granularTrendData="[
8959, 7460, 8334, 7902, 5753, 3070, 3481, 16878, 17819, 15296, 18883, 3734, 938, 101, 12
]"
:granularXAxisLabels="[
'7.31 00h',
'7.31 06h',
'7.31 12h',
'7.31 18h',
'8.1 00h',
'8.1 06h',
'8.1 12h',
'8.1 18h',
'8.2 00h',
'8.2 06h',
'8.2 12h',
'8.2 18h',
'8.3 00h',
'8.3 06h',
'8.3 12h'
]"
/>
<!-- EventHeatmap has been replaced with InteractionStrengthChart -->
<InteractionStrengthChart :chart-data="interactionStrengthData" />
<PostDynamics :posts="posts" @handle:openDialog="handleLeaderPost" />
<WordCloud :wordsCloudList="wordCloudData" />
</div>
<!-- 详情弹窗 -->
<div v-if="showDetailsModal" class="modal-overlay" @click="closeDetailsModal">
<div class="modal-content" @click.stop>
<button class="close-btn" @click="closeDetailsModal">×</button>
<div ref="detailsChart" class="details-chart-container"></div>
</div>
</div>
<!-- 详情弹窗 (EventHeatmap's modal removed) -->
<el-dialog
v-model="leaderDetailDialog"
width="500"
@ -199,10 +170,10 @@
<div class="leader-name">{{ activeLeader.name }}</div>
<div class="leader-heat">
<div class="fancy">
粉丝量:&nbsp;&nbsp;{{ activeLeader.leaderOriginInfo.followers }}
粉丝量:  {{ activeLeader.leaderOriginInfo.followers }}
</div>
<div class="post-number">
发帖数:&nbsp;&nbsp;{{ activeLeader.leaderOriginInfo.posts }}
发帖数:  {{ activeLeader.leaderOriginInfo.posts }}
</div>
</div>
</div>
@ -223,13 +194,13 @@
<div class="item-time">{{ item.time }}</div>
<div class="item-heat-detail">
<div class="item-heat-like">
<Icon icon="ei:like" width="25" height="25" />&nbsp;{{ item.like }}
<Icon icon="ei:like" width="25" height="25" /> {{ item.like }}
</div>
<div class="item-heat-comment">
<Icon icon="la:comment-dots" width="25" height="25" />&nbsp;{{ item.comment }}
<Icon icon="la:comment-dots" width="25" height="25" /> {{ item.comment }}
</div>
<div class="item-heat-transmit">
<Icon icon="mdi:share-outline" width="25" height="25" />&nbsp;{{
<Icon icon="mdi:share-outline" width="25" height="25" /> {{
item.transmit
}}
</div>
@ -241,27 +212,27 @@
<div class="dialog-content-heat-degree">
<div class="heat-item">
<p class="diamond"></p>
粉丝数量:&nbsp;&nbsp;&nbsp;{{ activeLeader.leaderOriginInfo.followers }}
粉丝数量:   {{ activeLeader.leaderOriginInfo.followers }}
</div>
<div class="heat-item">
<p class="diamond"></p>
关注数量:&nbsp;&nbsp;&nbsp;1329
关注数量:   1329
</div>
<div class="heat-item">
<p class="diamond"></p>
发帖总数:&nbsp;&nbsp;&nbsp;{{ activeLeader.leaderOriginInfo.posts }}
发帖总数:   {{ activeLeader.leaderOriginInfo.posts }}
</div>
<div class="heat-item">
<p class="diamond"></p>
贴文被转总数:&nbsp;&nbsp;&nbsp;1329
贴文被转总数:   1329
</div>
<div class="heat-item">
<p class="diamond"></p>
参与互动次数:&nbsp;&nbsp;&nbsp;30
参与互动次数:   30
</div>
<div class="heat-item">
<p class="diamond"></p>
首次活跃事件:&nbsp;&nbsp;&nbsp;2022.7.31 00:14
首次活跃事件:   2022.7.31 00:14
</div>
</div>
</div>
@ -279,13 +250,13 @@
<div class="heat">
<div class="item-heat-detail">
<div class="item-heat-like">
<Icon icon="ei:like" width="25" height="25" />&nbsp;{{ currentPost.like }}
<Icon icon="ei:like" width="25" height="25" /> {{ currentPost.like }}
</div>
<div class="item-heat-comment">
<Icon icon="la:comment-dots" width="25" height="25" />&nbsp;{{ currentPost.comment }}
<Icon icon="la:comment-dots" width="25" height="25" /> {{ currentPost.comment }}
</div>
<div class="item-heat-transmit">
<Icon icon="mdi:share-outline" width="25" height="25" />&nbsp;{{
<Icon icon="mdi:share-outline" width="25" height="25" /> {{
currentPost.transmit
}}
</div>
@ -305,7 +276,7 @@ import { SVGRenderer } from "echarts/renderers";
echarts.use([TitleComponent, TooltipComponent, GraphChart, SVGRenderer]);
// 引入其他子组件
import LeaderAnalysis from "../components/weight/LeaderAnalysis.vue";
import EventHeatmap from "../components/weight/EventHeatmap.vue";
import InteractionStrengthChart from "../components/weight/InteractionStrengthChart.vue"; // Replaced EventHeatmap
import PostDynamics from "../components/weight/PostDynamics.vue";
import WordCloud from "../components/weight/WordCloud.vue";
import dynamicGraph from "../components/graph/dynamicGraph.vue";
@ -453,7 +424,7 @@ const allLeaderData = ref([
time: "2022-08-02 04:02:24",
type: "原发",
content:
"The US is moving planes and aircraft carriers closer to #Taiwan due to the upcoming visit of House Speaker Nancy Pelosi to Taiwan - Nikkei Asia\n\nThe #USNavy has 2 aircraft carrier groups &amp; 2 amphibious assault groups in the region, plus other assets based in #Japan, Hawaii &amp; Guam https://t.co/L0eEr3px5N"
"The US is moving planes and aircraft carriers closer to #Taiwan due to the upcoming visit of House Speaker Nancy Pelosi to Taiwan - Nikkei Asia\n\nThe #USNavy has 2 aircraft carrier groups & 2 amphibious assault groups in the region, plus other assets based in #Japan, Hawaii & Guam https://t.co/L0eEr3px5N"
},
{
id: 2,
@ -670,6 +641,32 @@ const posts = ref([
}
]);
// Data for the new InteractionStrengthChart component
const interactionStrengthData = ref([
{
value: 0.60,
images: [
new URL("@/assets/images/link1p1.png", import.meta.url).toString(),
new URL("@/assets/images/link1p2.png", import.meta.url).toString(),
],
},
{
value: 0.45,
images: [
new URL("@/assets/images/link1p3.png", import.meta.url).toString(),
new URL("@/assets/images/link1p4.png", import.meta.url).toString(),
],
},
{
value: 0.32,
images: [
new URL("@/assets/images/link1p5.png", import.meta.url).toString(),
new URL("@/assets/images/link1p6.png", import.meta.url).toString(),
],
},
]);
const leaderGraphRef = ref(null);
const visibleLeaders = computed(() => allLeaderData.value.slice(0, activeTimePoint.value));
const tabs = ref(["全部", "新闻媒体", "自媒体", "政府官号"]);
@ -820,25 +817,7 @@ const wordCloudData = ref([
{ text: "英文", top: 77.5, left: 264.5, width: 49, height: 19, fontSize: 12, opacity: 0.7 },
{ text: "兩岸", top: 195.5, left: 287.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 }
]);
const showDetailsModal = ref(false);
const detailsChart = ref(null);
let myDetailsChart = null;
const openDetailsModal = (chartConfig) => {
showDetailsModal.value = true;
nextTick(() => {
if (detailsChart.value) {
myDetailsChart = echarts.init(detailsChart.value);
myDetailsChart.setOption(chartConfig.option);
}
});
};
const closeDetailsModal = () => {
showDetailsModal.value = false;
if (myDetailsChart) {
myDetailsChart.dispose();
myDetailsChart = null;
}
};
//页面启动自动播放
let timer = null;
const automaticPlay = () => {
@ -1316,4 +1295,4 @@ onMounted(() => {
margin-top: -24px;
margin-left: -2px;
}
</style>
</style>