From 99acd814eb318c4ea583932c491e554f6d5de9ec Mon Sep 17 00:00:00 2001 From: "qumeng039@126.com" <86925389+qumen@users.noreply.github.com> Date: Tue, 8 Jul 2025 16:32:13 +0800 Subject: [PATCH] 1 --- src/App.vue | 3 +- src/views/KeyNodeRecognition1.vue | 50 ++++- .../components/LeaderAnalysis.vue | 2 +- .../components/LeaderDetailDialog.vue | 145 ++++++------- .../components/PostDetailDialog.vue | 62 +++--- .../components/graph/dynamicGraph.vue | 192 ++++++++++-------- src/views/KeyNodeRecognition2.vue | 68 ++++++- .../components/LeaderAnalysis.vue | 27 ++- .../components/LeaderDetailDialog.vue | 31 +-- .../components/PostDetailDialog.vue | 64 +++--- .../components/graph/dynamicGraph.vue | 187 +++++++++-------- 11 files changed, 437 insertions(+), 394 deletions(-) diff --git a/src/App.vue b/src/App.vue index 3947655..8c316b9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -249,6 +249,7 @@ const showToggleJianjie = ref(false); \ No newline at end of file + +: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; +} + diff --git a/src/views/KeyNodeRecognition1/components/LeaderAnalysis.vue b/src/views/KeyNodeRecognition1/components/LeaderAnalysis.vue index 7a1d600..b36b419 100644 --- a/src/views/KeyNodeRecognition1/components/LeaderAnalysis.vue +++ b/src/views/KeyNodeRecognition1/components/LeaderAnalysis.vue @@ -48,7 +48,7 @@
传播意见领袖分析 - - +
\ No newline at end of file + diff --git a/src/views/KeyNodeRecognition1/components/PostDetailDialog.vue b/src/views/KeyNodeRecognition1/components/PostDetailDialog.vue index 357ff8e..bc80fa5 100644 --- a/src/views/KeyNodeRecognition1/components/PostDetailDialog.vue +++ b/src/views/KeyNodeRecognition1/components/PostDetailDialog.vue @@ -1,31 +1,33 @@ - \ No newline at end of file + diff --git a/src/views/KeyNodeRecognition1/components/graph/dynamicGraph.vue b/src/views/KeyNodeRecognition1/components/graph/dynamicGraph.vue index ddff6b0..c673780 100644 --- a/src/views/KeyNodeRecognition1/components/graph/dynamicGraph.vue +++ b/src/views/KeyNodeRecognition1/components/graph/dynamicGraph.vue @@ -21,7 +21,7 @@ import Cache from "@/utils/cache"; // ---【新代码】导入第一个父节点的 10 个子节点的头像 （替换为上述前10个头像，路径为images/leader）--- import node1_1 from "@/assets/images/leader/The Spectator Index.png"; import node1_2 from "@/assets/images/leader/自由時報_ziyoushibao.png"; -import node1_3 from "@/assets/images/qiaoliang/Andy Ngo.png";//缺失 +import node1_3 from "@/assets/images/qiaoliang/Andy Ngo.png"; //缺失 import node1_4 from "@/assets/images/leader/Viscosity🧩Solutions.png"; import node1_5 from "@/assets/images/leader/Insider Paper.png"; import node1_6 from "@/assets/images/leader/रV Sinघ.png"; @@ -75,7 +75,7 @@ import node5_4 from "@/assets/images/leader/Radio.png"; import node5_5 from "@/assets/images/leader/Rafael Fontana.png"; import node5_6 from "@/assets/images/leader/Indo-Pacific News - Watching the CCP-China Threat.png"; import node5_7 from "@/assets/images/leader/🍁RASTA MAN™🍁.png"; -import node5_8 from "@/assets/images/qiaoliang/THEE((L'EtatC'estMoi))🎗️.png";//缺失 +import node5_8 from "@/assets/images/qiaoliang/THEE((L'EtatC'estMoi))🎗️.png"; //缺失 import node5_9 from "@/assets/images/leader/Mundo News.png"; import node5_10 from "@/assets/images/leader/迷人的小红🇨🇳.png"; @@ -107,7 +107,7 @@ import node8_5 from "@/assets/images/leader/911news.png"; import node8_6 from "@/assets/images/leader/Navar 🇧🇷🇷🇺.png"; import node8_7 from "@/assets/images/leader/Kingmoj.png"; import node8_8 from "@/assets/images/leader/Hosanna Revivals.png"; -import node8_9 from "@/assets/images/qiaoliang/SilbernagelSimos.png";//缺失 +import node8_9 from "@/assets/images/qiaoliang/SilbernagelSimos.png"; //缺失 // --- 导入第九个父节点的 9 个子节点的头像 --- import node9_1 from "@/assets/images/leader/Go22.png"; @@ -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: [] }); @@ -270,15 +269,30 @@ const getCircleAvatar = async (avatarUrl) => { const initAllGraphData = async () => { const nodes = []; 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()) { @@ -305,7 +319,7 @@ const initAllGraphData = async () => { if (leaderIndex === 0 && i < node1Followers.length) { const followerData = node1Followers[i]; const currentAvatar = followerData.avatar; - + const followerAvatar = await getCircleAvatar(currentAvatar); nodes.push({ id: userId, @@ -321,11 +335,11 @@ const initAllGraphData = async () => { // 为第二个父节点（索引为1）的子节点添加指定头像 else if (leaderIndex === 1 && i < 10) { const currentAvatar = node2Avatars[i]; - + const followerAvatar = await getCircleAvatar(currentAvatar); nodes.push({ id: userId, - name: node2Names[i], + name: node2Names[i], symbol: `image://${followerAvatar}`, symbolSize: 25, category: 1, @@ -341,13 +355,13 @@ const initAllGraphData = async () => { const followerAvatar = await getCircleAvatar(currentAvatar); nodes.push({ - id: userId, - name: followerData.name, - symbol: `image://${followerAvatar}`, - symbolSize: 25, - category: 1, - value: "", - label: { show: false }, + id: userId, + name: followerData.name, + symbol: `image://${followerAvatar}`, + symbolSize: 25, + category: 1, + value: "", + label: { show: false } }); nodeAdded = true; } @@ -358,13 +372,13 @@ const initAllGraphData = async () => { const followerAvatar = await getCircleAvatar(currentAvatar); nodes.push({ - id: userId, - name: followerData.name, - symbol: `image://${followerAvatar}`, - symbolSize: 25, - category: 1, - value: "", - label: { show: false }, + id: userId, + name: followerData.name, + symbol: `image://${followerAvatar}`, + symbolSize: 25, + category: 1, + value: "", + label: { show: false } }); nodeAdded = true; } @@ -375,13 +389,13 @@ const initAllGraphData = async () => { const followerAvatar = await getCircleAvatar(currentAvatar); nodes.push({ - id: userId, - name: followerData.name, - symbol: `image://${followerAvatar}`, - symbolSize: 25, - category: 1, - value: "", - label: { show: false }, + id: userId, + name: followerData.name, + symbol: `image://${followerAvatar}`, + symbolSize: 25, + category: 1, + value: "", + label: { show: false } }); nodeAdded = true; } @@ -392,13 +406,13 @@ const initAllGraphData = async () => { const followerAvatar = await getCircleAvatar(currentAvatar); nodes.push({ - id: userId, - name: followerData.name, - symbol: `image://${followerAvatar}`, - symbolSize: 25, - category: 1, - value: "", - label: { show: false }, + id: userId, + name: followerData.name, + symbol: `image://${followerAvatar}`, + symbolSize: 25, + category: 1, + value: "", + label: { show: false } }); nodeAdded = true; } @@ -486,68 +500,66 @@ 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; } - + // 仅当节点被实际添加时，才创建边 if (nodeAdded) { - edges.push({ - source: leader.id, - target: userId - }); + 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" } - ] - } - } - }); - } + // 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); @@ -690,4 +702,4 @@ defineExpose({ width: 100%; height: 100%; } - \ No newline at end of file + diff --git a/src/views/KeyNodeRecognition2.vue b/src/views/KeyNodeRecognition2.vue index 5283211..2550668 100644 --- a/src/views/KeyNodeRecognition2.vue +++ b/src/views/KeyNodeRecognition2.vue @@ -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' + ]" /> @@ -29,14 +39,14 @@ \ No newline at end of file + diff --git a/src/views/KeyNodeRecognition2/components/PostDetailDialog.vue b/src/views/KeyNodeRecognition2/components/PostDetailDialog.vue index 5ec9e94..fe13846 100644 --- a/src/views/KeyNodeRecognition2/components/PostDetailDialog.vue +++ b/src/views/KeyNodeRecognition2/components/PostDetailDialog.vue @@ -1,31 +1,31 @@ \ No newline at end of file + diff --git a/src/views/KeyNodeRecognition2/components/graph/dynamicGraph.vue b/src/views/KeyNodeRecognition2/components/graph/dynamicGraph.vue index 7392dbe..e7bff7e 100644 --- a/src/views/KeyNodeRecognition2/components/graph/dynamicGraph.vue +++ b/src/views/KeyNodeRecognition2/components/graph/dynamicGraph.vue @@ -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: [] }); @@ -269,15 +267,30 @@ const getCircleAvatar = async (avatarUrl) => { const initAllGraphData = async () => { const nodes = []; 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()) { @@ -304,7 +317,7 @@ const initAllGraphData = async () => { if (leaderIndex === 0 && i < node1Followers.length) { const followerData = node1Followers[i]; const currentAvatar = followerData.avatar; - + const followerAvatar = await getCircleAvatar(currentAvatar); nodes.push({ id: userId, @@ -320,11 +333,11 @@ const initAllGraphData = async () => { // 为第二个父节点（索引为1）的子节点添加指定头像 else if (leaderIndex === 1 && i < 10) { const currentAvatar = node2Avatars[i]; - + const followerAvatar = await getCircleAvatar(currentAvatar); nodes.push({ id: userId, - name: node2Names[i], + name: node2Names[i], symbol: `image://${followerAvatar}`, symbolSize: 25, category: 1, @@ -340,13 +353,13 @@ const initAllGraphData = async () => { const followerAvatar = await getCircleAvatar(currentAvatar); nodes.push({ - id: userId, - name: followerData.name, - symbol: `image://${followerAvatar}`, - symbolSize: 25, - category: 1, - value: "", - label: { show: false }, + id: userId, + name: followerData.name, + symbol: `image://${followerAvatar}`, + symbolSize: 25, + category: 1, + value: "", + label: { show: false } }); nodeAdded = true; } @@ -357,13 +370,13 @@ const initAllGraphData = async () => { const followerAvatar = await getCircleAvatar(currentAvatar); nodes.push({ - id: userId, - name: followerData.name, - symbol: `image://${followerAvatar}`, - symbolSize: 25, - category: 1, - value: "", - label: { show: false }, + id: userId, + name: followerData.name, + symbol: `image://${followerAvatar}`, + symbolSize: 25, + category: 1, + value: "", + label: { show: false } }); nodeAdded = true; } @@ -374,13 +387,13 @@ const initAllGraphData = async () => { const followerAvatar = await getCircleAvatar(currentAvatar); nodes.push({ - id: userId, - name: followerData.name, - symbol: `image://${followerAvatar}`, - symbolSize: 25, - category: 1, - value: "", - label: { show: false }, + id: userId, + name: followerData.name, + symbol: `image://${followerAvatar}`, + symbolSize: 25, + category: 1, + value: "", + label: { show: false } }); nodeAdded = true; } @@ -391,13 +404,13 @@ const initAllGraphData = async () => { const followerAvatar = await getCircleAvatar(currentAvatar); nodes.push({ - id: userId, - name: followerData.name, - symbol: `image://${followerAvatar}`, - symbolSize: 25, - category: 1, - value: "", - label: { show: false }, + id: userId, + name: followerData.name, + symbol: `image://${followerAvatar}`, + symbolSize: 25, + category: 1, + value: "", + label: { show: false } }); nodeAdded = true; } @@ -485,68 +498,66 @@ 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; } - + // 仅当节点被实际添加时，才创建边 if (nodeAdded) { - edges.push({ - source: leader.id, - target: userId - }); + 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" } - ] - } - } - }); - } + // 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); @@ -689,4 +700,4 @@ defineExpose({ width: 100%; height: 100%; } - \ No newline at end of file +