From f6105fb622099ca743bba5dfab981106872ba864 Mon Sep 17 00:00:00 2001
From: chatgpt-yunju <38625060+chatgpt-yunju@users.noreply.github.com>
Date: Tue, 8 Jul 2025 08:48:05 +0800
Subject: [PATCH] 0708

---
 .../components/GraphPanel1.vue                | 207 ++++++++++++
 .../components/graph/dynamicGraph1.vue        | 314 ++++++++++++++++++
 2 files changed, 521 insertions(+)
 create mode 100644 src/views/keyNodeRecognition3/components/GraphPanel1.vue
 create mode 100644 src/views/keyNodeRecognition3/components/graph/dynamicGraph1.vue

diff --git a/src/views/keyNodeRecognition3/components/GraphPanel1.vue b/src/views/keyNodeRecognition3/components/GraphPanel1.vue
new file mode 100644
index 0000000..65dbf14
--- /dev/null
+++ b/src/views/keyNodeRecognition3/components/GraphPanel1.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/keyNodeRecognition3/components/graph/dynamicGraph1.vue b/src/views/keyNodeRecognition3/components/graph/dynamicGraph1.vue
new file mode 100644
index 0000000..252a2df
--- /dev/null
+++ b/src/views/keyNodeRecognition3/components/graph/dynamicGraph1.vue
@@ -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>
\ No newline at end of file