SocialNetworks_duan/src/views/KeyNodeRecognition1/index.vue

<template>
  <div>
    <div>
      <img src="@/assets/images/head/leaderOptionText.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="openDetailsModal"
        :panelTrendData="[32655, 29182, 55732, 1051]"
        :panelXAxisLabels="['2022.7.31', '2022.8.1', '2022.8.2', '2022.8.3']"
        :granularTrendData="[
          8959, 7460, 8334, 7902, 5753, 3070, 3481, 16878, 17819, 15296, 18883, 3734, 938, 101, 12
        ]"
        :granularXAxisLabels="[
          '7.31 00h',
          '7.31 06h',
          '7.31 12h',
          '7.31 18h',
          '8.1 00h',
          '8.1 06h',
          '8.1 12h',
          '8.1 18h',
          '8.2 00h',
          '8.2 06h',
          '8.2 12h',
          '8.2 18h',
          '8.3 00h',
          '8.3 06h',
          '8.3 12h'
        ]"
      />
      <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 { useKeyNodeStore1 } from "@/store/keyNodeStore1";

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

import LeaderAnalysis from "./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 = useKeyNodeStore1();
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: "佩洛西",
    top: 115.5,
    left: 215.5,
    width: 109,
    height: 40,
    fontSize: 28,
    opacity: 1
  },
  { text: "中国", top: 183.5, left: 69.5, width: 73, height: 35, fontSize: 22, opacity: 1 },
  {
    text: "中国人民解放军",
    top: 72.5,
    left: 132.5,
    width: 123,
    height: 22,
    fontSize: 12,
    opacity: 1
  },
  {
    text: "中美关系",
    top: 171.5,
    left: 212.5,
    width: 81,
    height: 22,
    fontSize: 14,
    opacity: 0.8
  },
  { text: "台独", 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: "联合公报",
    top: 241.5,
    left: 130.5,
    width: 73,
    height: 19,
    fontSize: 12,
    opacity: 0.7
  },
  {
    text: "有力反制",
    top: 211.5,
    left: 143.5,
    width: 73,
    height: 19,
    fontSize: 12,
    opacity: 1
  },
  { text: "白宫", top: 176.5, left: 15.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 },
  { text: "内政", 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: "领土", top: 57.5, left: 72.5, width: 49, height: 19, fontSize: 12, opacity: 0.6 },
  { text: "原则", top: 77.5, left: 264.5, width: 49, height: 19, fontSize: 12, opacity: 0.7 },
  { text: "台湾", top: 195.5, left: 287.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 }
]);
</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;
}

: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;
}
</style>