1
This commit is contained in:
qumeng039@126.com
parent
908bcfc5b1
commit
99acd814eb
|
|
@ -249,6 +249,7 @@ const showToggleJianjie = ref(false);
|
|||
<style scoped>
|
||||
.app-container {
|
||||
width: 100vw;
|
||||
padding-bottom: 20px;
|
||||
background-image: url("./assets/images/bci.png");
|
||||
background-size:cover;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -272,7 +273,7 @@ const showToggleJianjie = ref(false);
|
|||
}
|
||||
.aside {
|
||||
width: 320px;
|
||||
height: 100%;
|
||||
height: 954px;
|
||||
border: 2px;
|
||||
padding: 16px;
|
||||
left: 16px;
|
||||
|
|
|
|||
|
|
@ -47,14 +47,14 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useKeyNodeStore } from '@/store/keyNodeStore1';
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { useKeyNodeStore } from "@/store/keyNodeStore1";
|
||||
|
||||
import LeaderList from './KeyNodeRecognition1/components/LeaderList.vue';
|
||||
import GraphPanel from './KeyNodeRecognition1/components/GraphPanel.vue';
|
||||
import DetailsModal from './KeyNodeRecognition1/components/DetailsModal.vue';
|
||||
import LeaderDetailDialog from './KeyNodeRecognition1/components/LeaderDetailDialog.vue';
|
||||
import PostDetailDialog from './KeyNodeRecognition1/components/PostDetailDialog.vue';
|
||||
import LeaderList from "./KeyNodeRecognition1/components/LeaderList.vue";
|
||||
import GraphPanel from "./KeyNodeRecognition1/components/GraphPanel.vue";
|
||||
import DetailsModal from "./KeyNodeRecognition1/components/DetailsModal.vue";
|
||||
import LeaderDetailDialog from "./KeyNodeRecognition1/components/LeaderDetailDialog.vue";
|
||||
import PostDetailDialog from "./KeyNodeRecognition1/components/PostDetailDialog.vue";
|
||||
|
||||
import LeaderAnalysis from "./KeyNodeRecognition1/components/LeaderAnalysis.vue";
|
||||
import EventHeatmap from "../components/weight/EventHeatmap.vue";
|
||||
|
|
@ -224,4 +224,38 @@ const wordCloudData = ref([
|
|||
.leader-containner2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:deep(.custom-leader-dialog) {
|
||||
width: 640px;
|
||||
height: 680px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1);
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
:deep(.custom-leader-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 23px 23px;
|
||||
}
|
||||
|
||||
:deep(.custom-leader-post-dialog) {
|
||||
width: 640px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1);
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
:deep(.custom-leader-post-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
padding: 25px 25px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
<div class="content">
|
||||
<!-- Title Image: using a placeholder as the local asset is not available -->
|
||||
<img
|
||||
src="../../assets/images/chuanbofenxititle.png"
|
||||
src="@/assets/images/chuanbofenxititle.png"
|
||||
alt="传播意见领袖分析"
|
||||
class="title-img"
|
||||
style="margin-top: -22px; margin-left: -24px"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<el-dialog v-model="isVisible" width="640" align-center class="custom-dialog">
|
||||
<template v-if="store.activeLeader">
|
||||
<el-dialog v-model="isVisible" width="640" align-center class="custom-leader-dialog">
|
||||
<img src="@/assets/images/leaderDialogTitle.png" alt="" class="dialogTitleImg" />
|
||||
<div class="dialog-content">
|
||||
<div class="dialog-content-leaderInfo">
|
||||
|
|
@ -8,12 +7,8 @@
|
|||
<div class="leaderInfo-message">
|
||||
<div class="leader-name">{{ store.activeLeader.name }}</div>
|
||||
<div class="leader-heat">
|
||||
<div class="fancy">
|
||||
粉丝量: {{ store.activeLeader.leaderOriginInfo.followers }}
|
||||
</div>
|
||||
<div class="post-number">
|
||||
发帖数: {{ store.activeLeader.leaderOriginInfo.posts }}
|
||||
</div>
|
||||
<div class="fancy">粉丝量: {{ store.activeLeader.leaderOriginInfo.followers }}</div>
|
||||
<div class="post-number">发帖数: {{ store.activeLeader.leaderOriginInfo.posts }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -70,14 +65,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useKeyNodeStore } from '@/store/keyNodeStore1';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { computed } from "vue";
|
||||
import { useKeyNodeStore } from "@/store/keyNodeStore1";
|
||||
import { Icon } from "@iconify/vue";
|
||||
|
||||
const store = useKeyNodeStore();
|
||||
|
||||
|
|
@ -92,25 +86,10 @@ const isVisible = computed({
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.custom-dialog) {
|
||||
width: 640px;
|
||||
height: 680px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1);
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
}
|
||||
.dialogTitleImg {
|
||||
margin-top: -23px;
|
||||
}
|
||||
:deep(.custom-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 23px 23px;
|
||||
}
|
||||
|
||||
.dialog-content-leaderInfo {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@
|
|||
<Icon icon="la:comment-dots" width="25" height="25" /> {{ store.currentPost.comment }}
|
||||
</div>
|
||||
<div class="item-heat-transmit">
|
||||
<Icon icon="mdi:share-outline" width="25" height="25" /> {{ store.currentPost.transmit }}
|
||||
<Icon icon="mdi:share-outline" width="25" height="25" /> {{
|
||||
store.currentPost.transmit
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -23,9 +25,9 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useKeyNodeStore } from '@/store/keyNodeStore1';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { computed } from "vue";
|
||||
import { useKeyNodeStore } from "@/store/keyNodeStore1";
|
||||
import { Icon } from "@iconify/vue";
|
||||
|
||||
const store = useKeyNodeStore();
|
||||
|
||||
|
|
@ -39,22 +41,7 @@ const isVisible = computed({
|
|||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.custom-leader-post-dialog) {
|
||||
width: 640px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1);
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
:deep(.custom-leader-post-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
padding: 25px 25px;
|
||||
}
|
||||
<style>
|
||||
.content {
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
|
|
@ -64,6 +51,9 @@ const isVisible = computed({
|
|||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.heat .item-heat-detail {
|
||||
display: flex;
|
||||
}
|
||||
.heat .item-heat-detail div {
|
||||
width: 70px;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -250,7 +250,6 @@ const node9Followers = [
|
|||
{ name: "从头再来_congtouzailai", avatar: node9_9 }
|
||||
];
|
||||
|
||||
|
||||
const allLeaderData = ref(props.allLeaderData);
|
||||
const chart = ref(null);
|
||||
const allGraphData = ref({ nodes: [], edges: [] });
|
||||
|
|
@ -272,13 +271,28 @@ const initAllGraphData = async () => {
|
|||
const edges = [];
|
||||
|
||||
const node2Avatars = [
|
||||
node2_1, node2_2, node2_3, node2_4, node2_5,
|
||||
node2_6, node2_7, node2_8, node2_9, node2_10
|
||||
node2_1,
|
||||
node2_2,
|
||||
node2_3,
|
||||
node2_4,
|
||||
node2_5,
|
||||
node2_6,
|
||||
node2_7,
|
||||
node2_8,
|
||||
node2_9,
|
||||
node2_10
|
||||
];
|
||||
const node2Names = [
|
||||
'Andy Ngo', 'Andy Ngo', 'Ian Miles Cheong', '简爱_jianai',
|
||||
'唯有基督拯救人类！', 'wethenorth - 1984', 'Lomt Lea🅰️',
|
||||
'Chad Felix Greene 🇮🇱', 'AlinaSalazarGongora', 'Gary Du'
|
||||
"Andy Ngo",
|
||||
"Andy Ngo",
|
||||
"Ian Miles Cheong",
|
||||
"简爱_jianai",
|
||||
"唯有基督拯救人类！",
|
||||
"wethenorth - 1984",
|
||||
"Lomt Lea🅰️",
|
||||
"Chad Felix Greene 🇮🇱",
|
||||
"AlinaSalazarGongora",
|
||||
"Gary Du"
|
||||
];
|
||||
|
||||
for (const [leaderIndex, leader] of allLeaderData.value.entries()) {
|
||||
|
|
@ -347,7 +361,7 @@ const initAllGraphData = async () => {
|
|||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -364,7 +378,7 @@ const initAllGraphData = async () => {
|
|||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -381,7 +395,7 @@ const initAllGraphData = async () => {
|
|||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -398,7 +412,7 @@ const initAllGraphData = async () => {
|
|||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -486,27 +500,26 @@ const initAllGraphData = async () => {
|
|||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
// 对于所有其他情况（或超出指定数量的子节点），使用原来的蓝色圆点
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: `user ${i}`,
|
||||
symbol: "circle",
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#035e96" },
|
||||
{ offset: 1, color: "#34a7b0" }
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
// nodes.push({
|
||||
// id: userId,
|
||||
// name: `user ${i}`,
|
||||
// symbol: "circle",
|
||||
// symbolSize: 25,
|
||||
// category: 1,
|
||||
// value: "",
|
||||
// label: { show: false },
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// colorStops: [
|
||||
// { offset: 0, color: "#035e96" },
|
||||
// { offset: 1, color: "#34a7b0" }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
||||
|
|
@ -521,33 +534,32 @@ const initAllGraphData = async () => {
|
|||
}
|
||||
|
||||
// 随机生成若干散点
|
||||
const splatteringCount = Math.floor(Math.random() * 11) + 10; // 10~20个
|
||||
for (let i = 0; i < splatteringCount; i++) {
|
||||
const userId = `user_splattering_${i}`;
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: `user ${i}`,
|
||||
symbol: "circle",
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#035e96" },
|
||||
{ offset: 1, color: "#34a7b0" }
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// const splatteringCount = Math.floor(Math.random() * 11) + 10; // 10~20个
|
||||
// for (let i = 0; i < splatteringCount; i++) {
|
||||
// const userId = `user_splattering_${i}`;
|
||||
// nodes.push({
|
||||
// id: userId,
|
||||
// name: `user ${i}`,
|
||||
// symbol: "circle",
|
||||
// symbolSize: 25,
|
||||
// category: 1,
|
||||
// value: "",
|
||||
// label: { show: false },
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// colorStops: [
|
||||
// { offset: 0, color: "#035e96" },
|
||||
// { offset: 1, color: "#34a7b0" }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
allGraphData.value = { nodes, edges };
|
||||
console.log(allGraphData.value);
|
||||
};
|
||||
|
||||
|
||||
// 根据timestamp筛选要显示的节点和边 和散点
|
||||
const getVisibleGraphData = () => {
|
||||
const leaders = allLeaderData.value.slice(0, props.timestamp);
|
||||
|
|
|
|||
|
|
@ -16,7 +16,17 @@
|
|||
:panelTrendData="[40105, 24845, 27917, 717, 444]"
|
||||
:panelXAxisLabels="['2023.10.11', '2023.10.14', '2023.10.18', '2023.10.22', '2023.10.25']"
|
||||
:granularTrendData="[28545, 13922, 13719, 16651, 18240, 2205, 274, 157, 315]"
|
||||
:granularXAxisLabels="['10.9 13h', '10.11 14h', '10.13 16h', '10.15 17h', '10.17 18h', '10.19 20h', '10.21 21h', '10.23 22h', '10.25 23h']"
|
||||
:granularXAxisLabels="[
|
||||
'10.9 13h',
|
||||
'10.11 14h',
|
||||
'10.13 16h',
|
||||
'10.15 17h',
|
||||
'10.17 18h',
|
||||
'10.19 20h',
|
||||
'10.21 21h',
|
||||
'10.23 22h',
|
||||
'10.25 23h'
|
||||
]"
|
||||
/>
|
||||
<PostDynamics :posts="store.posts" @handle:openDialog="handleOpenPostDialog" />
|
||||
<WordCloud :wordsCloudList="wordCloudData" />
|
||||
|
|
@ -29,14 +39,14 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useKeyNodeStore } from '@/store/keyNodeStore2';
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { useKeyNodeStore } from "@/store/keyNodeStore2";
|
||||
|
||||
import LeaderList from './KeyNodeRecognition2/components/LeaderList.vue';
|
||||
import GraphPanel from './KeyNodeRecognition2/components/GraphPanel.vue';
|
||||
import DetailsModal from './KeyNodeRecognition2/components/DetailsModal.vue';
|
||||
import LeaderDetailDialog from './KeyNodeRecognition2/components/LeaderDetailDialog.vue';
|
||||
import PostDetailDialog from './KeyNodeRecognition2/components/PostDetailDialog.vue';
|
||||
import LeaderList from "./KeyNodeRecognition2/components/LeaderList.vue";
|
||||
import GraphPanel from "./KeyNodeRecognition2/components/GraphPanel.vue";
|
||||
import DetailsModal from "./KeyNodeRecognition2/components/DetailsModal.vue";
|
||||
import LeaderDetailDialog from "./KeyNodeRecognition2/components/LeaderDetailDialog.vue";
|
||||
import PostDetailDialog from "./KeyNodeRecognition2/components/PostDetailDialog.vue";
|
||||
|
||||
import LeaderAnalysis from "./KeyNodeRecognition2/components/LeaderAnalysis.vue";
|
||||
import EventHeatmap from "../components/weight/EventHeatmap.vue";
|
||||
|
|
@ -267,4 +277,44 @@ const wordCloudData = ref([
|
|||
.leader-containner2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:deep(.leader-custom-dialog) {
|
||||
width: 640px;
|
||||
height: 680px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1) !important;
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
:deep(.leader-custom-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 23px 23px;
|
||||
background-color: rgba(6, 45, 90, 1) !important;
|
||||
}
|
||||
|
||||
:deep(.custom-leader-post-dialog) {
|
||||
width: 640px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1);
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
:deep(.custom-leader-post-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
padding: 25px 25px;
|
||||
}
|
||||
|
||||
:deep(.custom-leader-post-dialog) .dialog-content .content {
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -48,8 +48,7 @@
|
|||
<div class="content">
|
||||
<!-- Title Image: using a placeholder as the local asset is not available -->
|
||||
<img
|
||||
src="../../assets/images/chuanbofenxititle.png"
|
||||
alt="传播意见领袖分析"
|
||||
src="../../../assets/images/chuanbo-show-title.png"
|
||||
class="title-img"
|
||||
style="margin-top: -22px; margin-left: -24px"
|
||||
/>
|
||||
|
|
@ -89,7 +88,7 @@
|
|||
</div>
|
||||
<!-- X-Axis Labels -->
|
||||
<div class="x-axis-labels">
|
||||
<span v-for="n in 6" :key="n">{{ (n - 1) * 2 }}</span>
|
||||
<span v-for="n in 6" :key="n">{{ ((chart.max / 5) * (n - 1)).toFixed(0) }}</span>
|
||||
<span class="unit">{{ chart.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -108,30 +107,30 @@ const chartData = ref([
|
|||
id: 1,
|
||||
title: "平均发帖数",
|
||||
unit: "数量",
|
||||
max: 10,
|
||||
max: 20,
|
||||
rows: [
|
||||
{ label: "领袖", value: 6.4, type: "leader" },
|
||||
{ label: "所有用户", value: 0.46, type: "user" }
|
||||
{ label: "桥梁节点", value: 14.4, type: "leader" },
|
||||
{ label: "其他节点", value: 5.2, type: "user" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "帖子平均生存周期",
|
||||
unit: "天数",
|
||||
max: 10,
|
||||
unit: "分钟",
|
||||
max: 40,
|
||||
rows: [
|
||||
{ label: "领袖", value: 2.73, type: "leader" },
|
||||
{ label: "所有用户", value: 2.32, type: "user" }
|
||||
{ label: "桥梁节点", value: (2245.87 / 60).toFixed(2), type: "leader" },
|
||||
{ label: "其他节点", value: (67.43 / 60).toFixed(2), type: "user" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "平均粉丝数",
|
||||
unit: "天数",
|
||||
max: 10,
|
||||
unit: "数量",
|
||||
max: 1200,
|
||||
rows: [
|
||||
{ label: "领袖", value: 290.4, type: "leader", highlight: false },
|
||||
{ label: "所有用户", value: 1.31, type: "user" }
|
||||
{ label: "桥梁节点", value: 1033, type: "leader", highlight: false },
|
||||
{ label: "其他节点", value: 120, type: "user" }
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-dialog v-model="isVisible" width="640" align-center class="custom-dialog">
|
||||
<el-dialog v-model="isVisible" width="640" align-center class="leader-custom-dialog">
|
||||
<template v-if="store.activeLeader">
|
||||
<img src="@/assets/images/leaderDialogTitle.png" alt="" class="dialogTitleImg" />
|
||||
<div class="dialog-content">
|
||||
|
|
@ -8,9 +8,7 @@
|
|||
<div class="leaderInfo-message">
|
||||
<div class="leader-name">{{ store.activeLeader.name }}</div>
|
||||
<div class="leader-heat">
|
||||
<div class="fancy">
|
||||
粉丝量: {{ store.activeLeader.leaderOriginInfo.followers }}
|
||||
</div>
|
||||
<div class="fancy">粉丝量: {{ store.activeLeader.leaderOriginInfo.followers }}</div>
|
||||
<div class="post-number">
|
||||
发帖数: {{ store.activeLeader.leaderOriginInfo.posts }}
|
||||
</div>
|
||||
|
|
@ -75,9 +73,9 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useKeyNodeStore } from '@/store/keyNodeStore2';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { computed } from "vue";
|
||||
import { useKeyNodeStore } from "@/store/keyNodeStore2";
|
||||
import { Icon } from "@iconify/vue";
|
||||
|
||||
const store = useKeyNodeStore();
|
||||
|
||||
|
|
@ -92,25 +90,10 @@ const isVisible = computed({
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.custom-dialog) {
|
||||
width: 640px;
|
||||
height: 680px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1);
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
}
|
||||
.dialogTitleImg {
|
||||
margin-top: -23px;
|
||||
}
|
||||
:deep(.custom-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 23px 23px;
|
||||
}
|
||||
|
||||
.dialog-content-leaderInfo {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<el-dialog v-model="isVisible" width="640" align-center class="custom-leader-post-dialog">
|
||||
<template v-if="store.currentPost">
|
||||
<img src="@/assets/images/head/post-dialog-title.png" alt="" class="postTitleImage" />
|
||||
<div class="dialog-content">
|
||||
<div class="content">{{ store.currentPost.content }}</div>
|
||||
|
|
@ -13,19 +12,20 @@
|
|||
<Icon icon="la:comment-dots" width="25" height="25" /> {{ store.currentPost.comment }}
|
||||
</div>
|
||||
<div class="item-heat-transmit">
|
||||
<Icon icon="mdi:share-outline" width="25" height="25" /> {{ store.currentPost.transmit }}
|
||||
<Icon icon="mdi:share-outline" width="25" height="25" /> {{
|
||||
store.currentPost.transmit
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useKeyNodeStore } from '@/store/keyNodeStore2';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { computed } from "vue";
|
||||
import { useKeyNodeStore } from "@/store/keyNodeStore2";
|
||||
import { Icon } from "@iconify/vue";
|
||||
|
||||
const store = useKeyNodeStore();
|
||||
|
||||
|
|
@ -40,30 +40,14 @@ const isVisible = computed({
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.custom-leader-post-dialog) {
|
||||
width: 640px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1);
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
:deep(.custom-leader-post-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
padding: 25px 25px;
|
||||
}
|
||||
.content {
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.heat {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.heat .item-heat-detail {
|
||||
display: flex;
|
||||
}
|
||||
.heat .item-heat-detail div {
|
||||
width: 70px;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -118,7 +118,6 @@ import node9_7 from "@/assets/images/qiaoliang/Change Zhang🇨🇦.png";
|
|||
import node9_8 from "@/assets/images/qiaoliang/Andy C.png";
|
||||
import node9_9 from "@/assets/images/qiaoliang/从头再来_congtouzailai.png.png";
|
||||
|
||||
|
||||
const emit = defineEmits(["handle:openDialog"]);
|
||||
const props = defineProps({
|
||||
timestamp: {
|
||||
|
|
@ -249,7 +248,6 @@ const node9Followers = [
|
|||
{ name: "从头再来_congtouzailai", avatar: node9_9 }
|
||||
];
|
||||
|
||||
|
||||
const allLeaderData = ref(props.allLeaderData);
|
||||
const chart = ref(null);
|
||||
const allGraphData = ref({ nodes: [], edges: [] });
|
||||
|
|
@ -271,13 +269,28 @@ const initAllGraphData = async () => {
|
|||
const edges = [];
|
||||
|
||||
const node2Avatars = [
|
||||
node2_1, node2_2, node2_3, node2_4, node2_5,
|
||||
node2_6, node2_7, node2_8, node2_9, node2_10
|
||||
node2_1,
|
||||
node2_2,
|
||||
node2_3,
|
||||
node2_4,
|
||||
node2_5,
|
||||
node2_6,
|
||||
node2_7,
|
||||
node2_8,
|
||||
node2_9,
|
||||
node2_10
|
||||
];
|
||||
const node2Names = [
|
||||
'Andy Ngo', 'Andy Ngo', 'Ian Miles Cheong', '简爱_jianai',
|
||||
'唯有基督拯救人类！', 'wethenorth - 1984', 'Lomt Lea🅰️',
|
||||
'Chad Felix Greene 🇮🇱', 'AlinaSalazarGongora', 'Gary Du'
|
||||
"Andy Ngo",
|
||||
"Andy Ngo",
|
||||
"Ian Miles Cheong",
|
||||
"简爱_jianai",
|
||||
"唯有基督拯救人类！",
|
||||
"wethenorth - 1984",
|
||||
"Lomt Lea🅰️",
|
||||
"Chad Felix Greene 🇮🇱",
|
||||
"AlinaSalazarGongora",
|
||||
"Gary Du"
|
||||
];
|
||||
|
||||
for (const [leaderIndex, leader] of allLeaderData.value.entries()) {
|
||||
|
|
@ -346,7 +359,7 @@ const initAllGraphData = async () => {
|
|||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -363,7 +376,7 @@ const initAllGraphData = async () => {
|
|||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -380,7 +393,7 @@ const initAllGraphData = async () => {
|
|||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -397,7 +410,7 @@ const initAllGraphData = async () => {
|
|||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -485,27 +498,26 @@ const initAllGraphData = async () => {
|
|||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
// 对于所有其他情况（或超出指定数量的子节点），使用原来的蓝色圆点
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: `user ${i}`,
|
||||
symbol: "circle",
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#035e96" },
|
||||
{ offset: 1, color: "#34a7b0" }
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
// nodes.push({
|
||||
// id: userId,
|
||||
// name: `user ${i}`,
|
||||
// symbol: "circle",
|
||||
// symbolSize: 25,
|
||||
// category: 1,
|
||||
// value: "",
|
||||
// label: { show: false },
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// colorStops: [
|
||||
// { offset: 0, color: "#035e96" },
|
||||
// { offset: 1, color: "#34a7b0" }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
||||
|
|
@ -520,33 +532,32 @@ const initAllGraphData = async () => {
|
|||
}
|
||||
|
||||
// 随机生成若干散点
|
||||
const splatteringCount = Math.floor(Math.random() * 11) + 10; // 10~20个
|
||||
for (let i = 0; i < splatteringCount; i++) {
|
||||
const userId = `user_splattering_${i}`;
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: `user ${i}`,
|
||||
symbol: "circle",
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#035e96" },
|
||||
{ offset: 1, color: "#34a7b0" }
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// const splatteringCount = Math.floor(Math.random() * 11) + 10; // 10~20个
|
||||
// for (let i = 0; i < splatteringCount; i++) {
|
||||
// const userId = `user_splattering_${i}`;
|
||||
// nodes.push({
|
||||
// id: userId,
|
||||
// name: `user ${i}`,
|
||||
// symbol: "circle",
|
||||
// symbolSize: 25,
|
||||
// category: 1,
|
||||
// value: "",
|
||||
// label: { show: false },
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// colorStops: [
|
||||
// { offset: 0, color: "#035e96" },
|
||||
// { offset: 1, color: "#34a7b0" }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
allGraphData.value = { nodes, edges };
|
||||
console.log(allGraphData.value);
|
||||
};
|
||||
|
||||
|
||||
// 根据timestamp筛选要显示的节点和边 和散点
|
||||
const getVisibleGraphData = () => {
|
||||
const leaders = allLeaderData.value.slice(0, props.timestamp);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user