SocialNetworks/src/views/KeyNodeRecognition2.vue

<template>
  <div>
    <div>
      <img src="@/assets/images/head/qiaoliang.png" alt="系统介绍" class="intruduction" />
    </div>

    <div class="leader-containner1">
      <LeaderList @selectLeader="handleLeaderSelect" />
      <GraphPanel ref="graphPanelRef" />
      <LeaderAnalysis :chart-data="analysisChartData" />
    </div>

    <div class="leader-containner2">
      <EventHeatmap
        @show-details="handleShowDetails"
        :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']"
      />
      <PostDynamics :posts="store.posts" @handle:openDialog="handleOpenPostDialog" />
      <WordCloud :wordsCloudList="wordCloudData" />
    </div>

    <DetailsModal />
    <LeaderDetailDialog />
    <PostDetailDialog />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useKeyNodeStore2 } from '@/store/keyNodeStore2';

import LeaderList from './KeyNodeRecognition2/components/LeaderList.vue';
import GraphPanel from './KeyNodeRecognition2/components/GraphPanel.vue';
import DetailsModal from './KeyNodeRecognition2/components/DetailsModal.vue';
import LeaderDetailDialog from './KeyNodeRecognition2/components/LeaderDetailDialog.vue';
import PostDetailDialog from './KeyNodeRecognition2/components/PostDetailDialog.vue';

import LeaderAnalysis from "./KeyNodeRecognition2/components/LeaderAnalysis.vue";
import EventHeatmap from "../components/weight/EventHeatmap.vue";
import PostDynamics from "../components/weight/PostDynamics.vue";
import WordCloud from "../components/weight/WordCloud.vue";

const store = useKeyNodeStore2();
const graphPanelRef = ref(null);

const handleLeaderSelect = (leader) => {
  if (graphPanelRef.value && leader.id) {
    graphPanelRef.value.highlightNode(leader.id);
  }
};

const handleShowDetails = (chartConfig) => {
  store.openDetailsModal(chartConfig);
};

const handleOpenPostDialog = (post) => {
  store.openPostDetail(post);
};

let timer = null;
const automaticPlay = () => {
  let index = 1;
  if (timer) clearInterval(timer);
  timer = setInterval(() => {
    store.setActiveTimePoint(index);
    if (index >= store.allLeaderData.length) {
      clearInterval(timer);
      timer = null;
      return;
    }
    index++;
  }, 1500);
};

onMounted(() => {
  store.initializeTimePoints();
  automaticPlay();
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

const analysisChartData = ref([
  {
    title: "平均发帖数",
    unit: "数量",
    max: 10,
    series: [
      { name: "领袖", value: 6.4 },
      { name: "所有用户", value: 0.46 }
    ]
  },
  {
    title: "帖子平均生存周期",
    unit: "天数",
    max: 10,
    series: [
      { name: "领袖", value: 2.19 },
      { name: "所有用户", value: 0.46 }
    ]
  },
  {
    title: "平均粉丝数",
    unit: "天数",
    max: 10,
    series: [
      { name: "领袖", value: 2.19 },
      { name: "所有用户", value: 0.46 }
    ]
  }
]);

const wordCloudData = ref([
  {
    text: "Hama",
    top: 115.5,
    left: 215.5,
    width: 109,
    height: 40,
    fontSize: 28,
    opacity: 1
  },
  {
    text: "Israel",
    top: 72.5,
    left: 132.5,
    width: 123,
    height: 22,
    fontSize: 25,
    opacity: 1
  },
  {
    text: "terrorist",
    top: 171.5,
    left: 212.5,
    width: 81,
    height: 22,
    fontSize: 14,
    opacity: 0.8
  },
  { text: "attack", top: 135.5, left: 42.5, width: 57, height: 24, fontSize: 16, opacity: 1 },
  {
    text: "以色列",
    top: 228.5,
    left: 230.5,
    width: 81,
    height: 22,
    fontSize: 14,
    opacity: 0.8
  },
  {
    text: "哈马斯",
    top: 233.5,
    left: 38.5,
    width: 73,
    height: 19,
    fontSize: 12,
    opacity: 0.7
  },
  {
    text: "Gaza",
    top: 241.5,
    left: 130.5,
    width: 73,
    height: 19,
    fontSize: 12,
    opacity: 0.7
  },
  {
    text: "Palestine",
    top: 211.5,
    left: 143.5,
    width: 73,
    height: 19,
    fontSize: 12,
    opacity: 1
  },
  { text: "kill", top: 176.5, left: 15.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 },
  { text: "against", top: 87.5, left: 36.5, width: 53, height: 22, fontSize: 14, opacity: 1 },
  { text: "恐怖组织", top: 103.5, left: 95.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 },
  { text: "Palestinian", top: 57.5, left: 72.5, width: 49, height: 19, fontSize: 12, opacity: 0.6 },
  {
    text: "organization",
    top: 77.5,
    left: 264.5,
    width: 49,
    height: 19,
    fontSize: 12,
    opacity: 0.7
  },
  { text: "UN", top: 195.5, left: 287.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 },
  {
    text: "Israeli",
    top: 30,
    left: 220,
    width: 70,
    height: 22,
    fontSize: 16,
    opacity: 1
  },
  {
    text: "巴勒斯坦",
    top: 270,
    left: 60,
    width: 70,
    height: 22,
    fontSize: 16,
    opacity: 1
  },
  {
    text: "today",
    top: 300,
    left: 200,
    width: 60,
    height: 20,
    fontSize: 14,
    opacity: 1
  },
  {
    text: "group",
    top: 60,
    left: 230,
    width: 60,
    height: 20,
    fontSize: 14,
    opacity: 1
  },
  {
    text: "people",
    top: 320,
    left: 270,
    width: 70,
    height: 22,
    fontSize: 16,
    opacity: 1
  },
  {
    text: "恐怖分子",
    top: 340,
    left: 120,
    width: 70,
    height: 22,
    fontSize: 16,
    opacity: 1
  }
]);
</script>

<style scoped>
.intruduction {
  width: 100%;
  margin-top: 0px;
  border-radius: 2px;
}
.leader-containner1,
.leader-containner2 {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.leader-containner2 {
  margin-top: 10px;
}
</style>