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