0708
This commit is contained in:
chatgpt-yunju
parent
ddcba3b96e
commit
f6105fb622
207
src/views/keyNodeRecognition3/components/GraphPanel1.vue
Normal file
207
src/views/keyNodeRecognition3/components/GraphPanel1.vue
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
<template>
|
||||
<div class="right-panel">
|
||||
<div class="key-node-recognition">
|
||||
<div class="background-svg-wrapper">
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 800 540"
|
||||
preserveAspectRatio="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_bg"
|
||||
x1="0"
|
||||
y1="167.1"
|
||||
x2="800"
|
||||
y2="167.1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#063D71" stop-opacity="0.2" />
|
||||
<stop offset="1" stop-color="#081E38" stop-opacity="0.8" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_border"
|
||||
x1="400"
|
||||
y1="0"
|
||||
x2="400"
|
||||
y2="540"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#3AA1F8" />
|
||||
<stop offset="1" stop-color="#3AA1F8" stop-opacity="0.2" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="M798 0.5H2C1.17159 0.5 0.500003 1.17158 0.5 2V538C0.5 538.828 1.17159 539.5 2 539.5H798C798.828 539.5 799.5 538.828 799.5 538V2C799.5 1.17157 798.828 0.5 798 0.5Z"
|
||||
fill="url(#paint0_linear_bg)"
|
||||
fill-opacity="0.48"
|
||||
stroke="url(#paint1_linear_border)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<img src="@/assets/images/chuanboGraphTitle.png" alt="" />
|
||||
<div class="chart-container">
|
||||
<DynamicGraph
|
||||
ref="leaderGraphRef"
|
||||
:timestamp="store.activeTimePoint"
|
||||
:allLeaderData="store.allLeaderData"
|
||||
@handle:openDialog="handleGraphNodeClick"
|
||||
/>
|
||||
</div>
|
||||
<div class="timeline-container">
|
||||
<span class="time-label">2023.10.07 00:00:00</span>
|
||||
<div class="timeline-track">
|
||||
<div
|
||||
v-for="point in store.timePoints"
|
||||
:key="point.id"
|
||||
class="timeline-point-wrapper"
|
||||
@click="store.setActiveTimePoint(point.id)"
|
||||
>
|
||||
<el-tooltip
|
||||
class="timePoint-box-item"
|
||||
effect="light"
|
||||
:content="point.timestamp"
|
||||
placement="bottom"
|
||||
>
|
||||
<div class="timeline-point" :class="{ active: store.activeTimePoint === point.id }">
|
||||
<el-popover
|
||||
v-if="store.activeTimePoint === point.id"
|
||||
effect="dark"
|
||||
placement="top"
|
||||
:title="point.leaderId"
|
||||
:width="50"
|
||||
trigger="click"
|
||||
content="发布贴文"
|
||||
>
|
||||
<template #reference>
|
||||
<div class="active-pin"></div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<span class="time-label">2023.10.15 00:00:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineExpose } from 'vue';
|
||||
import { useKeyNodeStore } from '@/store/keyNodeStore';
|
||||
import DynamicGraph from "./graph/dynamicGraph.vue";
|
||||
|
||||
const store = useKeyNodeStore();
|
||||
const leaderGraphRef = ref(null);
|
||||
|
||||
const handleGraphNodeClick = (leaderData) => {
|
||||
store.openLeaderDetail(leaderData);
|
||||
};
|
||||
|
||||
const highlightNode = (leaderId) => {
|
||||
if (leaderGraphRef.value) {
|
||||
leaderGraphRef.value.highlightNode(leaderId);
|
||||
}
|
||||
};
|
||||
defineExpose({ highlightNode });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.right-panel {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
.key-node-recognition {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.background-svg-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 15px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.chart-container {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 100px);
|
||||
}
|
||||
.timeline-container {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(4, 67, 92, 0.6);
|
||||
border-radius: 5px;
|
||||
z-index: 1;
|
||||
}
|
||||
.time-label {
|
||||
font-size: 12px;
|
||||
color: #a9c2e0;
|
||||
}
|
||||
.timeline-track {
|
||||
flex-grow: 1;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #1b62a9, #3aa1f8, #1b62a9);
|
||||
margin: 0 15px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.timeline-point-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.timeline-point {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #8dc5ff;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #cce7ff;
|
||||
transition: transform 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
.timeline-point-wrapper:hover .timeline-point {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.timeline-point.active {
|
||||
background-color: #ffc94d;
|
||||
border-color: #fff;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
.active-pin {
|
||||
width: 30px;
|
||||
height: 34px;
|
||||
background-image: url("@/assets/images/point.png");
|
||||
background-size: cover;
|
||||
bottom: 5px;
|
||||
left: -11px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
314
src/views/keyNodeRecognition3/components/graph/dynamicGraph1.vue
Normal file
314
src/views/keyNodeRecognition3/components/graph/dynamicGraph1.vue
Normal file
|
|
@ -0,0 +1,314 @@
|
|||
<template>
|
||||
<div id="container"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import {
|
||||
nextTick,
|
||||
onMounted,
|
||||
ref,
|
||||
onUnmounted,
|
||||
watch,
|
||||
defineEmits,
|
||||
defineExpose,
|
||||
defineProps
|
||||
} from "vue";
|
||||
import { cropToCircleAsync } from "@/utils/transform";
|
||||
import Cache from "@/utils/cache";
|
||||
|
||||
// --- 导入将要共用的11个 Follower 头像 ---
|
||||
import follower1 from "@/assets/images/followers/Israel Defense Forces.png";
|
||||
import follower2 from "@/assets/images/followers/Laura Loomer.png";
|
||||
import follower3 from "@/assets/images/followers/🇺🇸 Mike Davis 🇺🇸.png";
|
||||
import follower4 from "@/assets/images/followers/Rep. Carlos A. Gimenez.png";
|
||||
import follower5 from "@/assets/images/followers/Israel War Room.png";
|
||||
import follower6 from "@/assets/images/followers/Meme Knight 🇺🇸.png";
|
||||
import follower7 from "@/assets/images/followers/AIPAC 🇺🇸🇮🇱🎗️.png";
|
||||
import follower8 from "@/assets/images/followers/Sarah Larchmont.png";
|
||||
import follower9 from "@/assets/images/followers/Faraz Pervaiz.png";
|
||||
import follower10 from "@/assets/images/followers/Jamie Bryson.png";
|
||||
import follower11 from "@/assets/images/followers/大桥_daqiao.png";
|
||||
|
||||
|
||||
const emit = defineEmits(["handle:openDialog"]);
|
||||
const props = defineProps({
|
||||
timestamp: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
allLeaderData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
// --- 将共用的 Follower 数据结构化为一个数组 ---
|
||||
const commonFollowers = [
|
||||
{ name: "Israel Defense Forces", avatar: follower1 },
|
||||
{ name: "Laura Loomer", avatar: follower2 },
|
||||
{ name: "🇺🇸 Mike Davis 🇺🇸", avatar: follower3 },
|
||||
{ name: "Rep. Carlos A. Gimenez", avatar: follower4 },
|
||||
{ name: "Israel War Room", avatar: follower5 },
|
||||
{ name: "Meme Knight 🇺🇸", avatar: follower6 },
|
||||
{ name: "AIPAC 🇺🇸🇮🇱🎗️", avatar: follower7 },
|
||||
{ name: "Sarah Larchmont", avatar: follower8 },
|
||||
{ name: "Faraz Pervaiz", avatar: follower9 },
|
||||
{ name: "Jamie Bryson", avatar: follower10 },
|
||||
{ name: "大桥_daqiao", avatar: follower11 }
|
||||
];
|
||||
|
||||
|
||||
const allLeaderData = ref(props.allLeaderData);
|
||||
const chart = ref(null);
|
||||
const allGraphData = ref({ nodes: [], edges: [] });
|
||||
const selectedLeaderId = ref(null);
|
||||
|
||||
const getCircleAvatar = async (avatarUrl) => {
|
||||
const avatarCache = Cache.getItem(avatarUrl);
|
||||
if (avatarCache) {
|
||||
return avatarCache;
|
||||
}
|
||||
const base64 = await cropToCircleAsync(avatarUrl);
|
||||
Cache.setItem(avatarUrl, base64); // 以 avatarUrl 为 key 单独缓存
|
||||
return base64;
|
||||
};
|
||||
|
||||
// 初始化所有节点和边（一次性生成，后续根据timestamp筛选）
|
||||
const initAllGraphData = async () => {
|
||||
const nodes = [];
|
||||
const edges = [];
|
||||
// 使用 .entries() 同时获取 leader 数据和其在数组中的索引
|
||||
for (const [leaderIndex, leader] of allLeaderData.value.entries()) {
|
||||
// 处理父节点头像
|
||||
const avatar = await getCircleAvatar(leader.default_avatar);
|
||||
nodes.push({
|
||||
id: leader.id,
|
||||
name: leader.name,
|
||||
symbol: `image://${avatar}`,
|
||||
symbolSize: 80,
|
||||
category: 0,
|
||||
value: leader.followers,
|
||||
leaderOriginInfo: leader,
|
||||
label: { show: false }
|
||||
});
|
||||
|
||||
const userCount = Math.floor(Math.random() * 11) + 5; // 生成5到15之间的随机数
|
||||
for (let i = 0; i < userCount; i++) {
|
||||
const userId = `user_${leader.id}_${i}`;
|
||||
|
||||
// 核心逻辑: 如果是前10个父节点，并且是它们的前10个子节点，则使用通用头像列表
|
||||
if (leaderIndex < 10 && i < 10) {
|
||||
// 从通用列表中获取数据（commonFollowers[10]存在，但i<10不会取到）
|
||||
const followerData = commonFollowers[i];
|
||||
const followerAvatar = await getCircleAvatar(followerData.avatar);
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
// --- 修改点：将头像大小从 35 改为 25，与散点大小保持一致 ---
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false }
|
||||
});
|
||||
} 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" }
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// 边（关系）的创建逻辑对所有子节点都一样
|
||||
edges.push({
|
||||
source: leader.id,
|
||||
target: userId
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 随机生成若干散点
|
||||
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);
|
||||
const leaderIds = new Set(leaders.map((l) => l.id));
|
||||
const nodes = [];
|
||||
const edges = [];
|
||||
for (const node of allGraphData.value.nodes) {
|
||||
let shouldShow = false;
|
||||
if (leaderIds.has(node.id) || node.id.startsWith("user_splattering_")) {
|
||||
shouldShow = true;
|
||||
} else if (node.id.startsWith("user_")) {
|
||||
const parts = node.id.split("_");
|
||||
// Correctly handle parent IDs that contain underscores (e.g., 'levi_godman')
|
||||
const parentId = parts.slice(1, parts.length - 1).join("_");
|
||||
if (leaderIds.has(parentId)) {
|
||||
shouldShow = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldShow) {
|
||||
nodes.push(node);
|
||||
}
|
||||
}
|
||||
for (const edge of allGraphData.value.edges) {
|
||||
if (leaderIds.has(edge.source)) {
|
||||
edges.push(edge);
|
||||
}
|
||||
}
|
||||
return { nodes, edges };
|
||||
};
|
||||
|
||||
const renderChart = () => {
|
||||
if (!chart.value) {
|
||||
chart.value = echarts.init(document.getElementById("container"));
|
||||
}
|
||||
const { nodes, edges } = getVisibleGraphData();
|
||||
chart.value.setOption({
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (params.data.category === 0) {
|
||||
return `Name: ${params.data.name}<br>Followers: ${params.data.value}`;
|
||||
}
|
||||
return params.data.name;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "graph",
|
||||
layout: "force",
|
||||
roam: true,
|
||||
draggable: true,
|
||||
data: nodes.map((node) => {
|
||||
let symbol = node.symbol;
|
||||
if (node.category === 0) {
|
||||
// 选中时用高亮头像，否则用普通头像
|
||||
symbol =
|
||||
selectedLeaderId.value === node.id
|
||||
? `image://${node.leaderOriginInfo.active_avatar}`
|
||||
: `image://${node.leaderOriginInfo.default_avatar}`;
|
||||
}
|
||||
return {
|
||||
...node,
|
||||
symbol,
|
||||
itemStyle: {
|
||||
...node.itemStyle,
|
||||
shadowBlur: 10,
|
||||
shadowColor: "rgba(0,207,255,0.5)",
|
||||
borderWidth: 1,
|
||||
borderColor: "#32c6fc"
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 20,
|
||||
shadowColor: "#c4a651",
|
||||
borderColor: "#fcd267",
|
||||
borderWidth: node.category === 0 ? 10 : 2,
|
||||
borderType: "solid"
|
||||
}
|
||||
},
|
||||
symbolKeepAspect: true
|
||||
};
|
||||
}),
|
||||
links: edges,
|
||||
categories: [{ name: "Leader" }, { name: "User" }],
|
||||
force: {
|
||||
repulsion: 100,
|
||||
edgeLength: 80
|
||||
},
|
||||
label: {
|
||||
position: "center"
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
const handleClickNode = () => {
|
||||
chart.value.on("click", (params) => {
|
||||
if (params.data && params.data.category === 0) {
|
||||
selectedLeaderId.value = params.data.id;
|
||||
renderChart();
|
||||
emit("handle:openDialog", params.data);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
await initAllGraphData();
|
||||
renderChart();
|
||||
handleClickNode();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.timestamp,
|
||||
() => {
|
||||
renderChart();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
if (chart.value) {
|
||||
chart.value.dispose();
|
||||
}
|
||||
});
|
||||
// 暴露 chart 实例或自定义方法
|
||||
defineExpose({
|
||||
chart, // 直接暴露 chart 实例
|
||||
// 或者暴露自定义方法
|
||||
highlightNode(leaderId) {
|
||||
if (chart.value) {
|
||||
selectedLeaderId.value = leaderId;
|
||||
renderChart();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user