diff --git a/src/store/keyNodeRecognition/index.js b/src/store/keyNodeRecognition/index.js index 26be212..d6f8a3f 100644 --- a/src/store/keyNodeRecognition/index.js +++ b/src/store/keyNodeRecognition/index.js @@ -1919,3 +1919,387 @@ export const useKeyNodeRecognitionStore = defineStore("keyNodeRecognition", { actions: {}, persist: false // 开启持久化 }); + +export const useOptionLeaderDiscoveryStore = defineStore("OptionLeaderDiscovery", { + state: () => ({ + leaderNodeList: [ + { + userid: "huxijin", + name: "Hu Xijin", + chineseName: "胡锡进", + followers: "53.8万", + posts: "54", + avatar: new URL("@/assets/images/huxijin.png", import.meta.url).toString(), + default_avatar: new URL( + "@/assets/images/avatar/1/blue_huxijin.png", + import.meta.url + ).toString(), + active_avatar: new URL( + "@/assets/images/avatar/1/light_huxijin.png", + import.meta.url + ).toString(), + category: "自媒体", + labelling: [ + { + id: 1, + like: "3935", + comment: "1727", + transmit: "842", + time: "2022-8-1 23:11:01", + type: "原发", + content: + "1.Where is Pelosi now, does anybody know? Some said that she will be going to Taiwan by a submarine instead, and others said that she has sneaked into Taiwan disguised as someone else, is that the case?" + }, + { + id: 2, + like: "2827", + comment: "1350", + transmit: "1115", + time: "2022-8-2 00:12:01", + type: "原发", + content: + "If Pelosi really visits Taiwan as planned, the Tsai Ing-wen authorities are accomplice. The mainland will definitely carry out severe punishment actions on Taiwan at the same time. The unbearable consequences will fall on Tsai authorities." + } + ] + }, + { + id: "levi_godman", + name: "Levi Godman", + chineseName: null, + followers: "4.6万", + posts: "12847", + avatar: new URL("@/assets/images/levi.png", import.meta.url).toString(), + default_avatar: new URL( + "@/assets/images/avatar/1/blue_levi_godman.png", + import.meta.url + ).toString(), + active_avatar: new URL( + "@/assets/images/avatar/1/light_levi_godman.png", + import.meta.url + ).toString(), + category: "自媒体", + labelling: [ + { + id: 1, + like: "5354", + comment: "155", + transmit: "1410", + time: "2022-8-1 17:56:56", + type: "原发", + content: "BREAKING : Pelosi seen flying over Taiwan https://t.co/VQdm88KVeU" + }, + { + id: 2, + like: "469", + comment: "41", + transmit: "163", + time: "2022-8-2 04:39:53", + type: "原发", + content: + "The Taiwanese press writes that tomorrow Pelosi will arrive in Taipei at around 17.30 Moscow time (22.30 local time), spend the night at the Grand Hyatt Hotel, and the next morning will visit the Taiwan Legislative Council, where she will meet with the leadership of the island" + } + ] + }, + { + id: "bidishalolo", + name: "bidishalolo", + chineseName: null, + followers: "2387", + posts: "8380", + avatar: new URL("@/assets/images/bidishalolo.png", import.meta.url).toString(), + default_avatar: new URL( + "@/assets/images/avatar/1/blue_bidishalolo.png", + import.meta.url + ).toString(), + active_avatar: new URL( + "@/assets/images/avatar/1/light_bidishalolo.png", + import.meta.url + ).toString(), + category: "自媒体", + labelling: [ + { + id: 1, + like: "5013", + comment: "247", + transmit: "1376", + time: "2022-8-1 17:26:46", + type: "原发", + content: + "BREAKING: #Pelosi seen flying over #Taiwan. Stunning footage... https://t.co/8AOJ6yMPvl" + } + ] + }, + { + id: "indopacific", + name: "Indo-Pacific News", + chineseName: null, + followers: "11.5万", + posts: "11.3万", + avatar: new URL("@/assets/images/indo.png", import.meta.url).toString(), + default_avatar: new URL( + "@/assets/images/avatar/1/blue_indopacific.png", + import.meta.url + ).toString(), + active_avatar: new URL( + "@/assets/images/avatar/1/light_indopacific.png", + import.meta.url + ).toString(), + category: "新闻媒体", + labelling: [ + { + id: 1, + like: "2466", + comment: "89", + transmit: "938", + time: "2022-08-02 04:02:24", + type: "原发", + content: + "The US is moving planes and aircraft carriers closer to #Taiwan due to the upcoming visit of House Speaker Nancy Pelosi to Taiwan - Nikkei Asia\n\nThe #USNavy has 2 aircraft carrier groups & 2 amphibious assault groups in the region, plus other assets based in #Japan, Hawaii & Guam https://t.co/L0eEr3px5N" + }, + { + id: 2, + like: "2506", + comment: "128", + transmit: "658", + time: "2022-8-2 02:39:49", + type: "原发", + content: + "Nancy Pelosi's #Taiwan Itinerary Confirmed by Local Media\n\nPelosi will touch down in Taipei Tuesday night and is going to spend the evening at the Grand Hyatt Hotel, local media said.\n\nPelosi will then visit Taiwan's parliament Wednesday morning where she will meet Tsai Ing-Wen. https://t.co/Bu7VPkd9yK" + } + ] + }, + { + id: "spectator", + name: "The Spectator Index", + chineseName: null, + followers: "233.5万", + posts: "56", + avatar: new URL("@/assets/images/spectator.png", import.meta.url).toString(), + category: "新闻媒体", + default_avatar: new URL( + "@/assets/images/avatar/1/blue_spectator.png", + import.meta.url + ).toString(), + active_avatar: new URL( + "@/assets/images/avatar/1/light_spectator.png", + import.meta.url + ).toString(), + labelling: [ + { + id: 1, + like: "12118", + comment: "623", + transmit: "3731", + time: "2022-8-2 03:21:04", + type: "原发", + content: "BREAKING: CNN reports US House Speaker Nancy Pelosi will visit Taiwan" + }, + { + id: 2, + like: "6238", + comment: "409", + transmit: "1698", + time: "2022-8-1 22:56:59", + type: "原发", + content: + "BREAKING: Press release by US House Speaker Pelosi lists she will visit Singapore, Malaysia, South Korea and Japan on upcoming trip, without mention of Taiwan." + } + ] + }, + { + id: "reuters", + name: "Reuters", + chineseName: null, + followers: "2575.7万", + posts: "98", + avatar: new URL("@/assets/images/reuters.png", import.meta.url).toString(), + category: "新闻媒体", + default_avatar: new URL( + "@/assets/images/avatar/1/blue_reuters.png", + import.meta.url + ).toString(), + active_avatar: new URL( + "@/assets/images/avatar/1/light_reuters.png", + import.meta.url + ).toString(), + labelling: [ + { + id: 1, + like: "1786", + comment: "362", + transmit: "741", + time: "2022-8-2 03:41:57", + type: "原发", + content: + "1.U.S. House Speaker Pelosi to visit Taiwan on Tuesday -Taiwan media https://t.co/UWXopyKO5I https://t.co/KIoLpCFfXf" + }, + { + id: 2, + like: "277", + comment: "266", + transmit: "132", + time: "2022-8-2 14:04:22", + type: "原发", + content: + "U.S. looking to China not to escalate tensions in event of Pelosi visit to Taiwan -Blinken https://t.co/CPdyuIbA88 https://t.co/sKhaWTyS4p" + } + ] + }, + { + id: "mickwallace", + name: "Mick Wallace", + chineseName: null, + followers: "24.8万", + posts: "10259", + avatar: new URL("@/assets/images/mick.png", import.meta.url).toString(), + category: "自媒体", + default_avatar: new URL( + "@/assets/images/avatar/1/blue_mickwallace.png", + import.meta.url + ).toString(), + active_avatar: new URL( + "@/assets/images/avatar/1/light_mickwallace.png", + import.meta.url + ).toString(), + labelling: [ + { + id: 1, + like: "5354", + comment: "155", + transmit: "1410", + time: "2022-8-1 17:56:56", + type: "引用", + content: "BREAKING : Pelosi seen flying over Taiwan https://t.co/VQdm88KVeU" + }, + { + id: 2, + like: "2254", + comment: "168", + transmit: "428", + time: "2022-8-1 10:55:50", + type: "二级转发", + content: + "If #Pelosi visits Taiwan to selfishly promote herself while knowingly undermining Peace and Security in the Region,she will be remembered as a disappointing piece of work..." + } + ] + }, + { + id: "jiushiniya", + name: "Jiushiniya", + chineseName: null, + followers: "557", + posts: "16020", + avatar: new URL("@/assets/images/jiushiniya.png", import.meta.url).toString(), + category: "自媒体", + default_avatar: new URL( + "@/assets/images/avatar/1/blue_jiushiniya.png", + import.meta.url + ).toString(), + active_avatar: new URL( + "@/assets/images/avatar/1/light_jiushiniya.png", + import.meta.url + ).toString(), + labelling: [ + { + id: 1, + like: "3336", + comment: "135", + transmit: "1197", + time: "2022-8-2 15:33:45", + type: "引用", + content: + "House Speaker Nancy Pelosi is going to Taiwan as a show of US support for Taiwan's independence. Trump holds a secret Chinese bank account & Ivanka owns patents on Chinese Coffins & Body Bags. Democrats are tough on China. Republicans invest in China. MAGA hats are made in China" + }, + { + id: 2, + like: "2405", + comment: "140", + transmit: "669", + time: "2022-8-2 02:48:07", + type: "引用", + content: + "BREAKING:\n\nCNN confirms Speaker of the House, Nancy Pelosi, will travel to Taiwan.\n\nTaiwanese sources say she will arrive tomorrow.\n\nPelosi will be the highest-ranking American to visit Taiwan in 25 years.\n\nThe island is the nod in the First Island Chain that is closest to China. https://t.co/wTjBnm0zpv" + } + ] + }, + { + id: "liuxiaoming", + name: "Liu Xiaoming", + chineseName: "刘晓明", + followers: "33.8万", + posts: "8757", + avatar: new URL("@/assets/images/liuxiaoming.png", import.meta.url).toString(), + category: "自媒体", + default_avatar: new URL( + "@/assets/images/avatar/1/blue_liuxiaoming.png", + import.meta.url + ).toString(), + active_avatar: new URL( + "@/assets/images/avatar/1/light_liuxiaoming.png", + import.meta.url + ).toString(), + labelling: [ + { + id: 1, + like: "6545", + comment: "1561", + transmit: "1062", + time: "2022-8-2 19:48:22", + type: "原发", + content: + "我们正告美方，中方正严阵以待，中国人民解放军绝不会坐视不管，必将采取坚决应对和有力反制措施，捍卫中国主权和领土完整。美方应该做的是恪守一个中国原则和中美三个联合公报规定，兑现拜登总统不支持'台独'的承诺，不安排佩洛西访问台湾。" + }, + { + id: 2, + like: "5261", + comment: "1602", + transmit: "1741", + time: "2022-8-2 13:44:38", + type: "原发", + content: + "We are closely following the itinerary of #Pelosi. A visit to #Taiwan by her would constitute a gross interference in #China's internal affairs, seriously undermine China's sovereignty and territorial integrity, wantonly trample on the #one-China principle." + } + ] + }, + { + id: "indobosss", + name: "indobosss", + chineseName: null, + followers: "32", + posts: "1403", + avatar: new URL("@/assets/images/indobosss.png", import.meta.url).toString(), + category: "自媒体", + default_avatar: new URL( + "@/assets/images/avatar/1/blue_indobosss.png", + import.meta.url + ).toString(), + active_avatar: new URL( + "@/assets/images/avatar/1/light_indobosss.png", + import.meta.url + ).toString(), + labelling: [ + { + id: 1, + like: "1310", + comment: "60", + transmit: "300", + time: "2022-8-1 21:55:31", + type: "引用", + content: + "Taiwan is China. \n\nThe UN says so. \n\nThe U.S. and China have said so in three different joint communiques.\n\nIt's called the One-China policy and Nancy Pelosi has gone full neocon to violate it." + }, + { + id: 2, + like: "555", + comment: "123", + transmit: "204", + time: "2022-8-1 21:55:31", + type: "引用", + content: + "US House Speaker Nancy #Pelosi office officially announced her itinerary to Asia on Sunday. It said Pelosi will lead a Congressional delegation to the Indo-Pacific region, including visits to Singapore, Malaysia, South Korea and Japan, China's #Taiwan was not mentioned. https://t.co/AK6X0lm8OU" + } + ] + } + ] + }) +}) diff --git a/src/store/keyNodeStore1.js b/src/store/keyNodeStore1.js index d081eb6..be2f426 100644 --- a/src/store/keyNodeStore1.js +++ b/src/store/keyNodeStore1.js @@ -4,7 +4,8 @@ import { ref, computed } from "vue"; export const useKeyNodeStore1 = defineStore("keyNode1", () => { const allLeaderData = ref([ { - userid: "huxijin", + // id: "huxijin", + id: "Hu Xijin 胡锡进", name: "Hu Xijin", chineseName: "胡锡进", followers: "53.8万", @@ -43,7 +44,8 @@ export const useKeyNodeStore1 = defineStore("keyNode1", () => { ] }, { - id: "levi_godman", + // id: "levi_godman", + id: "Levi Godman", name: "Levi Godman", chineseName: null, followers: "4.6万", @@ -81,6 +83,7 @@ export const useKeyNodeStore1 = defineStore("keyNode1", () => { ] }, { + // id: "bidishalolo", id: "bidishalolo", name: "bidishalolo", chineseName: null, @@ -110,7 +113,8 @@ export const useKeyNodeStore1 = defineStore("keyNode1", () => { ] }, { - id: "indopacific", + // id: "indopacific", + id: "Indo-Pacific News", name: "Indo-Pacific News", chineseName: null, followers: "11.5万", @@ -149,7 +153,8 @@ export const useKeyNodeStore1 = defineStore("keyNode1", () => { ] }, { - id: "spectator", + // id: "spectator", + id: "The Spectator Index", name: "The Spectator Index", chineseName: null, followers: "233.5万", @@ -187,7 +192,8 @@ export const useKeyNodeStore1 = defineStore("keyNode1", () => { ] }, { - id: "reuters", + // id: "reuters", + id: "Reuters", name: "Reuters", chineseName: null, followers: "2575.7万", @@ -226,7 +232,8 @@ export const useKeyNodeStore1 = defineStore("keyNode1", () => { ] }, { - id: "mickwallace", + // id: "mickwallace", + id: "Mick Wallace", name: "Mick Wallace", chineseName: null, followers: "24.8万", @@ -264,7 +271,8 @@ export const useKeyNodeStore1 = defineStore("keyNode1", () => { ] }, { - id: "jiushiniya", + // id: "jiushiniya", + id: "Jiushiniya", name: "Jiushiniya", chineseName: null, followers: "557", @@ -303,7 +311,8 @@ export const useKeyNodeStore1 = defineStore("keyNode1", () => { ] }, { - id: "liuxiaoming", + // id: "liuxiaoming", + id: "刘晓明", name: "Liu Xiaoming", chineseName: "刘晓明", followers: "33.8万", @@ -342,7 +351,8 @@ export const useKeyNodeStore1 = defineStore("keyNode1", () => { ] }, { - id: "indobosss", + // id: "indobosss", + id: "Indobosss", name: "indobosss", chineseName: null, followers: "32", @@ -524,7 +534,8 @@ export const useKeyNodeStore1 = defineStore("keyNode1", () => { leaderOriginInfo: { avatar: leader.avatar, followers: leader.followers, - posts: posts.value + posts: leader.posts, + labelling: posts.value .filter((p) => p.author === leader.id) .map((p) => ({ id: p.id, diff --git a/src/views/KeyNodeRecognition1/components/GraphPanel.vue b/src/views/KeyNodeRecognition1/components/GraphPanel.vue index 135e990..ae3e55f 100644 --- a/src/views/KeyNodeRecognition1/components/GraphPanel.vue +++ b/src/views/KeyNodeRecognition1/components/GraphPanel.vue @@ -52,20 +52,24 @@ />
+ 2023.10.07 00:00:00
+ +
+ 2023.10.15 00:00:00
@@ -95,6 +100,7 @@ import { ref, defineExpose } from 'vue'; import { useKeyNodeStore1 } from '@/store/keyNodeStore1'; import DynamicGraph from "./graph/dynamicGraph.vue"; +import { watch } from 'vue' const store = useKeyNodeStore1(); const leaderGraphRef = ref(null); @@ -108,6 +114,63 @@ const highlightNode = (leaderId) => { leaderGraphRef.value.highlightNode(leaderId); } }; + +// 计算时间点在时间轴上的位置百分比 +const calculatePositions = (timestamp) => { +// 时间范围: 2022.07.31 00:00:00 到 2022.08.01 00:00:00 + const startTime = new Date('2022-07-31T00:00:00').getTime() + const endTime = new Date('2022-08-01T00:00:00').getTime() + const timeRange = endTime - startTime; + // 复制并排序时间点数据 + const sortedPoints = [...store.timePoints].sort((a, b) => { + return new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(); + }); + // 计算每个点的原始位置 + const pointPositions = {}; + sortedPoints.forEach(point => { + const pointTime = new Date(point.timestamp).getTime(); + const position = ((pointTime - startTime) / timeRange) * 100; + pointPositions[point.id] = Math.max(0, Math.min(100, position)); + }); + // 处理重叠 (假设每个点宽度约为20px，时间轴总宽度为可用宽度) + const pointWidthPercentage = 5; // 估算的点宽度百分比 + const minSpacing = pointWidthPercentage; // 最小间距百分比 + + // 调整重叠的点 + for (let i = 1; i < sortedPoints.length; i++) { + const prevPoint = sortedPoints[i - 1]; + const currPoint = sortedPoints[i]; + + const prevPosition = pointPositions[prevPoint.id]; + const currPosition = pointPositions[currPoint.id]; + + // 检查是否重叠 + if (currPosition - prevPosition < minSpacing) { + // 调整当前点位置 + pointPositions[currPoint.id] = prevPosition + minSpacing; + + // 确保不超出范围 + if (pointPositions[currPoint.id] > 100) { + pointPositions[currPoint.id] = 100; + } + } + } + + return pointPositions; +} + +// 响应式引用存储位置信息 +const pointPositions = ref({}); + +// 监听时间点变化，重新计算位置 +watch( + () => store.timePoints, + () => { + pointPositions.value = calculatePositions(); + }, + { immediate: true, deep: true } +); + defineExpose({ highlightNode }); @@ -168,7 +231,7 @@ defineExpose({ highlightNode }); margin: 0 15px; position: relative; display: flex; - justify-content: space-between; + /* justify-content: space-between; */ align-items: center; } .timeline-point-wrapper { @@ -177,31 +240,48 @@ defineExpose({ highlightNode }); justify-content: center; height: 20px; cursor: pointer; + position: absolute; + transform: translateX(-50%); } .timeline-point { - width: 10px; - height: 10px; - background-color: #8dc5ff; + width: 18px; + height: 18px; + background-color: transparent; border-radius: 50%; - border: 1px solid #cce7ff; + border: 1.6px solid #FFE5A4; transition: transform 0.3s ease; position: relative; + display: flex; + align-items: center; + justify-content: center; } + +.timeline-point::after { + content: ''; + width: 10px; + height: 10px; + background-color: #F9BD25; + border-radius: 50%; + position: absolute; +} + .timeline-point-wrapper:hover .timeline-point { transform: scale(1.5); } .timeline-point.active { - background-color: #ffc94d; - border-color: #fff; + background-color: transparent; + border-color: #FFE5A4; transform: scale(1.3); } +.timeline-point.active::after { + background-color: #ffc94d; /* 活跃状态下内部圆圈仍为黄色 */ +} .active-pin { width: 30px; height: 34px; background-image: url("@/assets/images/point.png"); background-size: cover; - bottom: 5px; - left: -11px; + bottom: 6px; position: absolute; } \ No newline at end of file diff --git a/src/views/KeyNodeRecognition1/components/LeaderDetailDialog.vue b/src/views/KeyNodeRecognition1/components/LeaderDetailDialog.vue index 86a06c4..71a2300 100644 --- a/src/views/KeyNodeRecognition1/components/LeaderDetailDialog.vue +++ b/src/views/KeyNodeRecognition1/components/LeaderDetailDialog.vue @@ -69,12 +69,21 @@